Design for Understanding:理解のデザインとしての情報アーキテクチャ

  • 1,401 views
Uploaded on

ある勉強会にて、IAについてのプレゼンテーション+カードソーティングを用いたエクササイズを実施したときの資料です。

ある勉強会にて、IAについてのプレゼンテーション+カードソーティングを用いたエクササイズを実施したときの資料です。

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,401
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 理解のデザインとしての 情報アーキテクチャ Design for Understanding : A fundamental of Information Architecture. Satoru MURAKOSHI 2014/03/25 ©All rights reserved by carlo.buffa
  • 2. 情報アーキテクチャとは何か 情報を伝えるということ:エクササイズ IA思考を養うには Agenda
  • 3. 村越 悟 インフォメーションアーキテクト メインフレーム系PG → Web制作会社 → デジタルエージェンシー World IA Day 2014 Tokyo ローカルコーディネーター Member of Information Architecture Institute 寄稿 講演 HCD認定人間中心設計専門家(挑戦中)
  • 4. Live IA
  • 5. 4.8 On Sale. (寄稿:事業会社におけるUXデザインの取り組み)
  • 6. 情報の伝え方 今日のテーマ ©All rights reserved by carlo.buffa
  • 7. 情報アーキテクチャ 考え方としての Photo by Scarygami
  • 8. 情報アーキテクチャとは 「情報をわかりやすく伝え」、 「受け手が情報を探しやすくする」ための表現技術 - IAAJ
  • 9. - パターンを整理して、複雑なものを明快にする
 - 理解への経路を見つけるための構造や経路をつくる
 - 明快さ、理解、情報の組織化を専門とした職業 - Richard Saul Wurman
  • 10. 理解のためのデザイン Design for Understanding
  • 11. USER CONTENT CONTEXT 利用シーンの理解 どういう使われ方をするのか? 何を提供すれば 相手にうまく意図が伝わるのか 誰に伝えるのか? 相手を理解し、共感する
  • 12. Visual Design Interface Design Navigation Design Information Design Interaction Design Information Architecture Functional Specification Content Requirement User Needs Site Objectives 表層 骨格 要件 戦略 構造 具象 抽象 The Elements of User Experience / Jesse James Garret
  • 13. トップダウン ボトムアップ Big IA Small IA ビジネス・戦略視点 制作物・成果物視点
  • 14. ©Peter Morville
  • 15. ? 意図 意味 Intention Meaning
  • 16. どう見せるか、何を見せるか よりも「何を伝えるか」が重要 ©All rights reserved by carlo.buffa
  • 17. 情報を集める 情報を理解する 情報を分類する 情報を組織化する データ ユーザ・ コンテキスト の把握 コンテンツ 設計 画面設計 具象 抽象 情報を表現する ビジュアル デザイン
  • 18. 情報の分類「軸」を探し出す 伝える相手を想定して、情報を整理する
  • 19. 5つの帽子がけ 5 hats of Classification. Corbis Images
  • 20. L A T C H
  • 21. L A T C H ・・・場所 ・・・アルファベット順 ・・・時間 ・・・カテゴリー ・・・階層
  • 22. L A T C H ・・・場所 ・・・アルファベット順 ・・・時間 ・・・カテゴリー ・・・階層 客 観 分 類
  • 23. L A T C H ・・・場所 ・・・アルファベット順 ・・・時間 ・・・カテゴリー ・・・階層 主 観 分 類
  • 24. 情報を理解する 情報を分類する 情報を組織化する ユーザ・ コンテキスト の把握 コンテンツ 設計 画面設計 カードソーティング ワイヤーフレーム
  • 25. カードソーティング Card Sorting Method
  • 26. 分類 ラベリング 関連性
  • 27. ワイヤーフレーム Wireframing
  • 28. 設計意図を作り手が 共有するための共通言語 情報の伝え方、 理解の道筋を作るための設計図
  • 29. 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する Exercise
  • 30. Ice Break
  • 31. あなたを絵だけで自己紹介してください。 ※白紙の紙にひとつあなたがどんな人かわかる絵を書いてください。 ※所属や業務内容、専門用語などは含めないようにしてください。 ※2分間で描いて、グループ内で紹介しあってください。 「私はこういう人です」 絵を描く(2分) → グループに紹介する(1人1分)
  • 32. Exercise 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する
  • 33. カードソーティングゲームキット 上平 崇仁(専修大学): 2013 © Takahito Kamihira
  • 34. © Takahito Kamihira 20種類の犬のカードがあります。 犬のカードを共通点を探して、分類して下さい。 考えつく限りの分類を試し、試した分類軸を紙に 書き出して下さい。 ! 【手順】:10分で作業してください。  - 机の上でカードを並べ変えて、いろいろな分類軸を探す  - 探し出した分類軸をワークシートに書く
  • 35. 多様な分類軸 © All rights reserved by Harri_1970
  • 36. Exercise 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する
  • 37. © Takahito Kamihira 20種類の犬がいる「犬カフェ」 をオープンしようと考えています。 ! 犬を飼っている人、犬好きだけど犬を飼っていない人をターゲット にカフェにいる犬たちを紹介したいと思っています。 ターゲットを想定して、犬の情報の分類を 考えてください。 その際、ターゲットのニーズやシチュエーション も考慮して分類をしてください。 ! 【手順】:20分で作業してください。  - ターゲットのニーズや、カフェを利用するシチュエーションを
 想定して、ワークシートに書く。
 - ニーズやシチュエーションに応じて犬のカードを机の上で分類 し、分類に付箋で見出しを付ける。
  • 38. ターゲットのニーズやシチュエーションの整理(メモ) 犬好き カフェを利用する シチュエーション 犬飼ってる 飼ってない カフェでしたいこと カフェに求めるもの ターゲット
  • 39. 切り口(見出し) 切り口(見出し) 切り口(見出し) カード ○○な人の ための犬カフェ
  • 40. 伝えたい相手がもっとも しっくりくる分類を「探す、見つける」 © All rights reserved by Tyson J
  • 41. 見えている分類 見えていない分類 © Takahito Kamihira 小型犬 フワフワ
  • 42. Exercise 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する
  • 43. © Takahito Kamihira スマートフォン向けのサイトで、犬カフェの紹介をしたいので情報 を整理し、サイトの画面設計を行いたいと思っています。 犬カフェサイトのトップページでカフェにいる犬の紹介を掲載したい と思っています。 Exercise2で検討したカード分類をもとにこのページのワイヤーフ レームをスケッチして下さい。 ! 【前提条件】
 - ターゲットは、自分が住んでいる近所のカフェや動物とふれあえる施設をいろい ろ探しており、情報収集をしている段階です。 ! 20分で作業してください。
  • 44. LOGO
  • 45. 発表 となりのグループ同士で、できた案を発表しあって下さい。 1グループ2分をめどに発表してください。
  • 46. 伝え方≒フォーカス © All rights reserved by Max Gerber Smith
  • 47. LOGO こんなワンちゃんがいます フワフワ癒し 活発遊び好き 温厚大人しい カフェ名:場所 抱っこ体験やカフェの犬と遊ぶ、一緒にまったりお茶を飲む、 などのシーンを想定、分類軸を設定 犬好きがグっとくるようにカワイイ写真で興味を持たせなが ら、性格や犬種などの最低限のメタ情報を網羅するヨークシャーテリア:○○ちゃん
 甘えん坊で○○
  • 48. 伝える相手とコンテキストの理解ができて、 はじめてワイヤーフレームが書ける ペルソナ (誰に伝えるか) ジャーニーマップ (どうやって伝えるか) ワイヤーフレーム (何を伝えるか)
  • 49. どう見せるか、何を見せるか よりも「何を伝えるか」が重要 伝え方の軸 伝え方 を決める を検討する 伝え方の軸 カードソーティング ワイヤーフレーム
  • 50. 情報を集める 情報を理解する 情報を分類する 情報を組織化する データ ユーザ・ コンテキスト の把握 コンテンツ 設計 画面設計 具象 抽象 情報を表現する ビジュアル デザイン
  • 51. ©All rights reserved by Gregorio Jiménez 一筆を入れる瞬間
  • 52. 終わりに
  • 53. IA思考を養うには ©All rights reserved by C E Andersen
  • 54. 記憶 経験 空間 Corbis Images
  • 55. 自身の経験の積み重ねから、 情報を理解、判断する
  • 56. 目の前にいる人とのコミュニケーションが うまくいくかどうかは、 相手が何を理解できないのかを きちんと理解するというこちら側の能力にかかっている。 - Richard Saul Wurman「それは情報ではない」
  • 57. 我々が自らにこうしているのだと言い聞かせている 思考や行動からではなく、 実際に行っている思考や行動から影響を受けるかたちで、 医療用機器、コンピューター、乗り物、 コミュニケーション用のツールをデザインする必要がある - 伊藤 攘一 「小さき精神を出し抜くデザイン」
  • 58. - Wikipedia
  • 59. 探索 対話観察 Exploration Observation Conversation 好奇心 Curiosity
  • 60. 探究心と試行錯誤 Creative Confidence : IDEO
  • 61. ? 意図 意味 Intention Meaning
  • 62. どう見せるか、何を見せるか よりも「何を伝えるか」が重要 ©All rights reserved by carlo.buffa
  • 63. 基礎を積み重ねること ©Jiro Dreams of Sushi
  • 64. Richard Saul Wurman - それは情報ではない Richard Saul Wurman - 理解の秘密 マジカル・インストラクション Peter Morville - Understanding Information Architecture 上平 崇仁 - カードソーティングゲームキット 赤瀬川原平 - 超芸術トマソン Peter Morville - Information Architect 赤瀬川原平 - 路上観察学入門 Resources. 坂本 貴史 - モバイルIAシンキング 長谷川 敦士 - IA100 楽しいBADUIの世界 - http://badui.org
  • 65. Thanks for your attention. Facebook: murakoshi.satoru Twitter : @future79 ©All rights reserved by carlo.buffa