HCD-Net教育セミナー「理解のデザイン ーIAの基本をおさえようー」 2012年11月28日

| トラックバック(0)

昨年のこととなってしまいますが、
hcd-net主催のコンセントの長谷川さんのIAセミナーを受講してきたので、
備忘録として。


講義

■長谷川さんとコンセントの紹介

 ・コンセント
  →「伝わるしくみ」をデザインする会社。
IMG_7428


■「理解」の問題意識

・何を考えていけばいいかを大事にしていくことを考える。

 例1:JRの券売機
   シールがいっぱいで見苦しい
   色のトーンが違う、ばらつきがある。
   取り消しボタンにラベリングをし直している。

   ※ユーザー行動を考えれば「取り消しボタン」が重要なハズなのに、
    それを踏まえて設計できてない、利用頻度を考慮していない。

   長谷川さんは「共倒れ」と読んでいる
    → 一個一個のボタンやシールは機能しているが、全体として死んでいる。

 例2:地下駐車場の文
    事前精算機を使った方が便利なことを訴求しているが、
    あまりにも文章が几帳面すぎる(間違ったことをいっている分けではないが)

 例3:ドイツな空港のサイン(メタデザイン社)
    これはユーザーの行動観察を徹底的に行った。

    出発しようとしている人→余裕がない人を考えて、
    サイン計画や導線計画を行った。

    ※実際に問い合わせが50%減り、
     インフォメーションセンターの人員を削減できた。

 例4:管制塔の案内

    ×Hold for take-off

    ◯Taxi into position and hold

    管制塔の案内放送が阻害された場合「take-off」だけ聞こえてしまい、
    大変な誤解を生む恐れがある  

▼なぜ伝わらないか?

 ・情報が過多
   例1:PS3のブルーレイリモコン

   例2:楽天サイト
      楽天メソッドと言われるような縦長デザイン

   情報過多→共倒れ

   例3:楽天の各サイト
      ヘッダーがバラバラ。

   一貫性の欠如 Consistency
      ↓
   類推・学習を妨げる

   ※悪法も法なり:一貫性の力
    →悪いインターフェースでも一貫性を保っていれば、
     ユーザーが学習してくれる、
     良かれと思って機能を作り分けた結果、ユーザーが混乱してしまう。

▼Awareness Test
    
 ・Look out for cyclists

  受け手の視点
    ↓
  情報への期待
  見えるものしか見えない

▼習熟化の過程

 1. 知識ベース行為
   認知的段階

 2. 規則ベース行為
   体系化の段階

 3. 技能ベース行為
   自動化の段階

▼情報探索行動

         アクティブ        パッシブ
直接 検索 モニタリング
間接 ブラウジング 注意喚起

 ※今一番使われているのは注意喚起(レコメンド)

 例:ソフトバンクのサイト
   →縦に長過ぎてオチが分からない
 
 優先度の欠如

 送り手の目的・意図・メッセージ
      ↓
    プライオリティ

 グラフィックデザイン=整理のデザイン
  優れたグラフィックデザイナーはプライオリティ付けしてくれる。
  本来的にはグラフィックデザイナーの仕事ではなくて、依頼側の仕事。

 
  例1:スーパーカミオカンデ
  http://www-sk.icrr.u-tokyo.ac.jp/sk/about/intro.html

  ※テキストベースすぎて内容がわからない

  情報自体の難しさ

  ・難しい:
   前提となる知識・情報が必要
   抽象度の高さ
   (抽象度が高すぎるとついていけない、難しくて嫌になる。)

  例2:セマンティックWebとは
     →HTMLが、自分自身がどんな情報かの定義まで持っている状態

    正確さ ? わかりやすさ

   ※正確さとわかりやすさは対局にある。

▼伝わらない理由
 ・情報過多
 ・一貫性の欠如
 ・文脈のずれ
 ・プライオリティの欠如
 ・難しさ

 これを解決するひとつの方法がインタラクションデザイン


■IAの歴史

▼理解を促すデザイン=インストラクションデザイン

 例:家の設計図、譜面、ダンス(てびちゃんふりつけ)

 ・インストラクションの構成要素
  リチャード・ワーマンの「理解の秘密」
   http://www.isis.ne.jp/mnn/senya/senya1296.html

▼インストラクションの種類
 ・過去に関するインストラクション
  知識の伝達、受け身

 ・現在に関わるインストラクション
  動かし方、組み立て方、右へ曲がれ

 ・未来志向のインストラクション
  将来の目標、帰りに牛乳を買って来て

▼インストラクションの構成要素
 ・使命:なんのためか
 ・最終目的:最終結果として選んだ地点
 ・手順:指示内容
 ・時間:実行に必要な予定時間
 ・予測:どんなことが起こりそうか
 ・失敗:ミスした場合、通りすぎた場合

 理解をデザインする人:
 インフォメーションアーキテクト
 
▼リチャード・ソール・ワーマン 

 ワーマンがTEDを立ち上げたが90年代に売ってしまった。
 TEDという場所を作ることもデザイン

 ・UnderStanding USA
   →アメリカの見えないデータをインフォメーショングラフィックスにした。
 ・ツインピークスのガイドブックを作った。
 ・INFORMATION ARCHIRECTS(書籍)

  情報アーキテクチャ
   ・情報システムにおける組織化、ラベリング、
    ナビゲーションシステムの組み合わせ
   ・タスクの遂行およびコンテンツへの直感的アクセスを容易にするため、
    情報空間を構造的にデザインすること
   ・ウェブサイトとイントラネットの構造化と分類を行う上での
    アートとサイエンス、情報の発見および管理を促進すること
   ・デザインと建築の原則をデジタルの景観にあてはめて考えることに、
    焦点を絞った、新しい学問分野及びコミュニティ

  インフォメーションアーキテクト
   ・データに潜む隠れたパターンを整理し、複雑さを明快にする人
   ・ユーザーが自分の知識を獲得するための道筋を見つけられるような、
    構造や地図を作る人
   ・明快さ、理解、情報の整理に特化した、
    時代の要求によって生まれた21世紀の職業

 
  データ→情報→知識→知恵

   →Web IAの誕生
    ・Big IA:広義のIA
      →「理解」のための総合プロデューサー

    ・Little IA: 狭義のIA  
      →サイトストラクチャ、ワイヤーフレーム、シロクマ本的解釈

    ※ LittleIAを目指している人に活躍する人はいない。
    ※広義のIAはHCDプロセス的なことをする人なので、
     UXデザイナーと読んじゃってもいいんじゃないのという議論もあった。

▼人間中心デザインプロセス

「JJG:The Elements of Use Experience」の5階層
 http://www.jjg.net/elements/pdf/elements_ch02.pdf

▼Web情報アーキテクチャ設計でめざすこと
 ・利用者が、情報を探し易く、理解しやすくなる。
 ・送り手のメッセージを的確に届ける
 ・変化に対応する

▼IA設計のための3大要素
 ・ユーザー:誰か、状況は?
 ・コンテンツ:何を?関連することは?
 ・コンテクスト:どうして?制約は?

▼Web IAの階層
 インターネット全体:ウェブエコシステム
       ↓
 サイト間の関連:ハイレベル情報アーキテクチャ
 企業全体の情報アーキテクチャ:エンタープライズ情報アーキテクチャ
       ↓
 サイトの情報アーキテクチャ:サイトストラクチャ
       ↓
 各画面の情報アーキテクチャ:グラフィックデザイン

 ※ウェブエコシステム→インターネット全体を見て考えて情報設計していく。

▼サイトIA設計の全体像
 前提要素(戦略・調査/分析)
     ↓
 コンセプト定義
     ↓
 情報アーキテクチャ設計

▼ユーザーを知る
 ・観察
 ・インタビュー調査
 ・モデル化(ペルソナ)
 ・ユーザーニーズを基にコンテンツ企画

 →ペルソナやペルソナの行動を具体的に可視化しておく。

 ・concent method:ユーザー分析シート
  http://www.concentinc.jp/labs/2009/04/user-model-analysis-sheet/

▼コンテンツを知る
 ・既存コンテンツのリストアップ
  →コンテンツ目録(インベントリ・リスト)
 ・追加、更新の把握
 ・情報の分類
 ・情報間の関係の整理

 LATCH:情報分類の基本的な枠組み
  ・Location:位置
  ・Alphabetically:50音
  ・Time:時間
  ・Category:カテゴリー (主観的)
  ・Hierarchy:階層(大小)

  ※誰がやっても同じように設計出来る=誰が探しても探し易い。
  ※カテゴリーは主観的、ハマるときはハマる。

 カードソーティング
  ※クライアントやユーザーや制作者でカードソーティングすると、
   利用者のメンタルモデルを抽出できるし、ユーザーテストの1つとして出来る。

 情報分類のトップダウン/ボトムアップ
  ・トップダウン→ファセット分類、テーマ経路
  ・ボトムアップ→ソーシャルタグ
  
▼コンテキスト(文脈)を知る
 ・課題の把握(サイト評価/ログ分析)
 ・ビジネス戦略/効果指標
 ・予算/スケジュール
 
 ※Contents Strategy Brief
  http://www.concentinc.jp/labs/2011/08/contents-strategy-brief/

▼コンセプト定義
 ・メタファー
 ・シナリオ/ストーリーボード
 ・ユーザーエクスペリエンスフロー
 ・コンセプトダイアグラム

Comic Sample from the Toy Comic Toolkit

▼エンタープライズ情報アーキテクチャ
 ケース事例:カネボウ化粧品

▼Pervasive IA
 ウェブエコシステム
 →トップ以外から訪問してきた場合にも、情報が分かるようになっているか?
  グローバルエリア:サイトの顔
  コンテンツエリア:欲しい内容
  ローカルエリア:次の動線

▼アダプティブパスが作ったエクスペリエンスジャーニーマップ
 Rail Europe Experience Map  

▼これからのIAヒューリスティックス
 ・場所性:Place-making
 ・一貫性:Consistency
 ・弾性、復元力:Resilience
 ・縮約性:Reduction
 ・相関性:Correlation

■まとめ
・インフォメーションアーキテクトは、理解のデザイナー
・ユーザー、コンテンツ、コンテキスト
・サイトのIAから、システム全体のIAへ


懇親会

懇親会は最近UX居酒屋と呼ばれているげんてんにて。
IMG_7431

IMG_7432

IMG_7435



トラックバック(0)

トラックバックURL: http://www.hokorin.com/mt/mt-tb.cgi/794

月別 アーカイブ