正しい情報設計によるデザインプロセス

Transcript

1. 正しい情報設計によるデザインプロセス UI Lab 2018.3 伊原 力也 2018.03.17 1
2. 本日の流れ • 13:30〜13:31（01分）： 講師自己紹介 • 13:31〜13:40（09分）：チーム分け＆アイスブレイク • 13:40〜13:55（15分）：①トーク：要件とUIのあいだにあるもの • 13:55〜14:25（30分）：①タスク：シナリオから改善点を見出そう • 14:25〜14:40（15分）：②トーク：情報構造設計の基礎知識 • 14:40〜15:20（40分）：②タスク：新しい分類体系と検索軸を作ろう • 15:20〜15:30（10分）：休憩 • 15:30〜15:45（15分）：③トーク：GUIの基礎を支えるパターン • 15:45〜16:25（40分）：③タスク：新しいフロー図を作ろう • 16:25〜17:00（35分）：④タスク：ペーパープロトタイピング • 17:00〜17:10（10分）：休憩 • 17:10〜18:00（50分）：成果発表
4. 自己紹介
5. 伊原 力也 5 • freee IA/UX • HCD-Net 評議委員 / 認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員 • 国際ユニヴァーサルデザイン協議会 移動空間研究部会 副主査
6. https://www.hcdnet.org 6
7. https://waic.jp 7
8. Amazonで「アクセシビリティ」と検索！ 8
9. 9 Amazonで「インクルーシブHTML」と検索！
10. 10 Amazonで「インクルーシブHTML」と検索！
11. チーム分け＆アイスブレイク
12. チーム分け • サイトマップやフロー図やワイヤーフレームが書ける人、挙手ください • 挙手した人がテーブルごとにバラけるようにしてください
13. アイスブレイク • ひとり2分で自己紹介してください • 名前、所属、やっている仕事 • 今日参加した理由 • サイトマップやフロー図などを書くときに、 何をインプットにしてどう考えて書いているか （やったことがない人は、どういうイメージか）
14. ワーク①
15. 【トーク】 要件とUIのあいだにあるもの
19. https://reras-factory.com/iphone-10year/
24. http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
25. https://www.hcdnet.org/docs/Hints%20of%20HCD_vol%201.pdf
26. https://jasonfurnell.wordpress.com/2011/08/02/workshop-capture-templates-for-customer-journeys-content-workflows-business-model-canvas-and-more/
27. 【質問】 ペルソナやジャーニーマップから どうやってUIにするのか？
28. ?
30. ペルソナ・ジャーニーとUIの間にあるギャップ • シナリオ • 情報構造設計 • インタラクションデザイン
31. https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/
32. https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/
33. https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/
35. http://www.jjg.net/elements/translations/elements_jp.pdf
36. http://www.jjg.net/elements/translations/elements_jp.pdf
37. 【タスク】 シナリオから改善点を見出そう
38. 会員番号　：2663492752 パスワード：work1806
40. https://www.coop-takuhai.jp/takuhai/about
46. ご質問はありますか？
47. ワーク内容 1. ペルソナとシナリオを読み込み、ユーザーが何が求めているのかを理解する 2. 構造シートを見つつ、このアプリを実際に一通り触ってみる 3. ペルソナとシナリオに対する現状のアプリのギャップ（改善点）を洗い出す 4. その課題をグルーピングしてまとめる
49. ご質問はありますか？
50. 　スタート！
51. ワーク内容 1. ペルソナとシナリオを読み込み、ユーザーが何が求めているのかを理解する 2. 構造シートを見つつ、このアプリを実際に一通り触ってみる 3. ペルソナとシナリオに対する現状のアプリのギャップ（改善点）を洗い出す 4. その課題をグルーピングしてまとめる
52. 　終了！
53. ワーク②
54. 【トーク】 情報構造設計の基礎知識
59. https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/
61. https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/
62. ユーザーニーズと 　コンテンツの属性をもとに、 構造パターンを選択し 分類方針を定める
63. トップダウン・アプローチと ボトムアップ・アプローチ　
64. トップダウン・アプローチ ユーザーがどんなふうに見つけたり探したりするのだろうか？ ペルソナやシナリオをもとに： • その人がどんな分野には明るくて、どんな分野には詳しくないか • ウェブやアプリをどのくらい使っているか • どんなサイトやアプリを使っていて、どのくらい類推できそうか • このアプリにおいては、何をどういうくくりで探しているのか
66. ボトムアップ・アプローチ コンテンツが持つ属性（メタデータ）にはどんなものがあるのか？ • 名前、重さ、サイズ、色、大きさ、型番、などなど… • 取り扱うコンテンツ自体が持ちうる属性を洗い出す • それらにまとまりを与える • そこから、ユーザーがものを探し出すための切り口を見出す
71. ポイント：独自のことをやらない
72. 　IAはパクリだ！
73. 構造のパターン
74. ツリー
75. ファセット
76. ウェブ
77. ハブ＆スポーク
78. リニア
79. トピック、オーディエンス、タスク
80. LATCH
81. Location：場所 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
82. Alphabet：アルファベット/五十音 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
83. Time：時間 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
84. Category：カテゴリ https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
85. Hierarchy：連続量 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
87. http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
88. ご質問はありますか？
89. 【タスク】 新しい分類体系と検索軸を作ろう
90. ワーク内容 1. 現状の分類体系を洗い出す 2. 商品のもつ属性を洗い出す 3. トップダウン・アプローチ（ユーザーの探し方による分類）を試みる 4. ボトムアップ・アプローチ（商品の属性による分類）を試みる 5. 妥当そうなカテゴリ分け、検索軸、フィルタ軸、ソート軸を書き出す
91. 検討カテゴリは2画面目まで 1 2
92. 紙カタログ・Webカタログも参照OK
93. 「ウィークリーコープ」で検索 会員番号　：2663492752 パスワード：work1806
94. ヒント：ネットスーパーなどを参考に
95. ヒント：アパレルや価格.comなどを参考に 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級 人気度
97. ご質問はありますか？
98. 　スタート！
99. ワーク内容 1. 現状の分類体系を洗い出す（※1〜2画面目まで） 2. 商品のもつ属性を洗い出す（※カタログなども参考に） 3. トップダウン・アプローチ（ユーザーの探し方による分類）を試みる 4. ボトムアップ・アプローチ（商品の属性による分類）を試みる 5. 妥当そうなカテゴリ分け、検索軸、フィルタ軸、ソート軸を書き出す
100. 　終了！
101. ワーク③
102. 【トーク】 GUIの基礎を支えるパターン
105. 　ユーザーがサイト上の各種機能にどう反応するかを定義し、 タスクの実行を促進するアプリケーションフローを開発すること
106. ?
109. ?
110. 画面にするにはまだ早い
111. ある1画面に何をどれだけ置くのか？ 以下の条件で、いかようにも変化する • 画面の大きさ • 表示すべき内容の量 • ユーザーのリテラシーの想定 • ユーザーの利用状況の想定 • ユーザーの学習度合いの想定
115. まず「何をどうやれるようにするのか」を 　画面という単位に規定されずに並べ それらを繋いでフローにする
116. UI Flows http://www.standardinc.jp/reflection/article/ui-flows/
117. UI Flowsの「見るもの」と「やること」の粒度 ✗ これは細かすぎ：ボタンを見て、ボタンを押す ✗ これは画面遷移：ログイン画面を見て、ログインする ◎ よい粒度はこれ：オブジェクトを見て、アクションする
118. ?
119. コレクション 商品名称 グラム数／数量 価格 シングル 商品番号 商品名称 グラム数／数量 価格 税込価格 コレクション カテゴリ名称 カテゴリ一覧 商品一覧 商品詳細 詳しく見る 検索する 並び替える 詳しく見る 絞り込む ソートする ブックマークする 注文する 検索する
120. Webやアプリを司るパターンは4つだけ • コレクション（複数のもの ≒ 一覧） • シングル（個別のもの ≒ 詳細） • タスク支援（フォームなど ≒ 入力や設定） • ツール提供（写真の編集ツールなど）
121. 　なぜこの粒度？
122. http://modelessdesign.com/
123. モードレスデザイン モードレス：モードがない • もの（名詞）を選んで、何をするか（動詞）決める モーダル：モードがある • 何をするか（動詞）を決めて、もの（名詞）を選ぶ
124. 「釘を打つ時、我々はまずハンマーを持ち、それから振り下ろします。 振り下ろしてからハンマーを持つ人はいないのです」 https://www.sociomedia.co.jp/7279
125. 自然界の道具はモードレスであり GUIの基本もモードレスなので モードレスにデザインする
129. Modal
130. Modal
131. オマケ：モードレスの知見を深めるコーナー • Modeless and Modal • ユーザー理解に合わせたユーザーインターフェイスデザイン • アプリケーションのイディオムデザイン （ページ下の方） • モードレス・ユーザーインターフェース • アナーキー・イン・ザ・ UX • OOUX - オブジェクトベースの UIモデリング • モードレスインタラクション • SEのためのUIデザインの教科書 • 複雑なアプリケーションにオブジェクト指向 UIで立ち向かう • ユーザーインターフェース解剖学・改訂版
132. ご質問はありますか？
133. 【タスク】 新しいフロー図を作ろう
134. コレクション 商品名称 グラム数／数量 価格 シングル 商品番号 商品名称 グラム数／数量 価格 税込価格 コレクション カテゴリ名称 カテゴリ一覧 商品一覧 商品詳細 詳しく見る 検索する 並び替える 詳しく見る 絞り込む ソートする ブックマークする 注文する 検索する
135. ワーク内容 1. ペルソナ、シナリオ、現行アプリの構造シートをもう一度見る 2. いままでのワークの結果を眺める 3. 新しいフロー図を書いてみる
136. フロー図のルール • 「操作のシナリオ」にあるものが対象。ただし主要な部分だけでOK • ハコは画面単位と一致しない。 あくまで「ユーザーが見るもの→やること」でハコを作って繋ぐ ◦ 先のメルカリ・amazon・パルシステム・ZOZOTOWNのアプローチの違いを思い出す。 どれも「コレクション：カテゴリ名称」のハコはあるが、画面の括りは異なる • やること欄の中で、そのハコの中で終わるものは矢印を繋がなくてよい ◦ この例で言うと「ブックマークする」「注文する」はその場で終わるアクション • 「戻る」アクションは省略する
138. ご質問はありますか？
139. 　スタート！
140. ワーク内容 1. ペルソナ、シナリオ、現行アプリの構造シートをもう一度見る 2. いままでのワークの結果を眺める 3. 新しいフロー図を書いてみる
141. 　終了！
142. ワーク④
143. 【タスク】 ペーパープロトタイピング
145. ワーク内容 1. ペルソナ、シナリオ、現行アプリの構造シートをもう一度見る 2. いままでのワークの結果を眺める 3. テンプレートを使って、主要画面のペーパープロトタイプを作成する ※精緻でなく、構成がわかるレベルでOK
146. いままで出てきた事例も参考に • 西友ネットスーパー • 価格.com • amazon • メルカリ • ZOZOTOWN • パルシステム（アプリ）
147. ご質問はありますか？
148. 　スタート！
149. ワーク内容 1. ペルソナ、シナリオ、現行アプリの構造シートをもう一度見る 2. いままでのワークの結果を眺める 3. テンプレートを使って、主要画面のペーパープロトタイプを作成する ※精緻でなく、構成がわかるレベルでOK
150. 　終了！
151. 成果発表
152. チームごとに発表（準備） • 1チームあたり5分で発表です • だれが発表者になるか、どんな風に話すか、相談してください
153. 　スタート！
154. チームごとに発表（準備） • 1チームあたり5分で発表です • だれが発表者になるか、どんな風に話すか、相談してください
155. 　終了！
156. チームごとに発表 • 発表者の方、ご起立ください • じゃんけんで勝った順で発表しましょう！
157. 　スタート！
158. 　終了！
159. 　お疲れ様でした！
161. 161 エンジニア・UXデザイナー積極採用中！
162. ありがとうございました @magi1125 162