UIデザインを行う際に知っておきたい、情報設計とインタラクションデザインの基礎

Transcript

1. UIデザインを行う際に知っておきたい、 情報設計とインタラクションデザインの基礎 伊原 力也 テクトモ #8｜2019.01.31 1
2. 自己紹介
3. 伊原 力也 3 • freee株式会社 プロダクトマネジャー • HCD-Net 評議委員 / 認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員
4. https://www.hcdnet.org 4
5. https://waic.jp 5
7. 本日の流れ • WebデザインとUIデザインの違い • UIデザインの進め方? • ペルソナとUIの間にある3つのギャップ • 理想シナリオ • 情報構造設計 • インタラクションデザイン
8. WebデザインとUIデザインの違い
9. アプリケーションはプラットフォームがある • iOS・Android • プラットフォームのお作法に乗りつつ、独自の機能性を考える • Webなら同じ？
10. Webサイトなのかアプリケーションなのか • WebサイトデザインをやっているからUIデザインできるわけではない • 同じ木から出来ていても、新聞と椅子ぐらい違う • 閲覧ベースかインタラクションベースかで重視するポイントは異なる
11. アプリケーションは目的を設定しやすい • 例：ターゲットを絞らずに広く閲覧してもらうサイト • 例：特定のユーザーがゴールに向かうことを支援するアプリ • 提供側の意図を適切に伝えるのか、ユーザーをゴールに向かわせるのか
12. Webサイトを作っていても、その素養は磨ける • フォーム最適化：業務アプリのグロースやUI改善に活きる • ECサイトやシミュレーター案件：Webサイトとアプリの境界線 • CMSの入出力の設計：エンドユーザーではない人のタスクを支援する • いずれにしてもユーザーのゴールがある案件に携わるのが重要
13. UIデザインの進め方?
14. よくある話 • よさそうなサイトやアプリを日々ウォッチする • デザイン写経でパターンを身につける • なるべくいろんなものを使ってみる • そうすると構成やUIが思いつく……?
15. よくある実務の進行 • いきなりサイトマップを書く • いきなりワイヤーフレームを書く • いきなりUIをデザインする • いきなりプロトタイプを作る
17. 基礎を知るとより近道ができる • UIデザインには根幹となる概念がある • それを知った上で学習や実務を行うのが合理的 • 文法を知ったうえで用例を学ぼう
19. http://www.jjg.net/elements/translations/elements_jp.pdf
20. http://www.jjg.net/elements/translations/elements_jp.pdf
21. https://www.hcdnet.org/docs/Hints%20of%20HCD_vol%201.pdf
22. https://www.hcdnet.org/docs/Hints%20of%20HCD_vol%201.pdf
23. https://jasonfurnell.wordpress.com/2011/08/02/workshop-capture-templates-for-customer-journeys-content-workflows-business-model-canvas-and-more/
24. よくある実務の進行：その２ • ペルソナとジャーニーマップを作る • いきなりサイトマップを書く • いきなりワイヤーフレームを書く • いきなりUIをデザインする • いきなりプロトタイプを作る
25. ペルソナやジャーニーマップから どうやってUIにするのか？
28. ペルソナとUIの間にある3つのギャップ 1. 理想シナリオ 2. 情報構造設計 3. インタラクションデザイン
29. 1. 理想シナリオ
30. http://www.jjg.net/elements/translations/elements_jp.pdf
32. https://www.coop-takuhai.jp/takuhai/about
41. http://www.jjg.net/elements/translations/elements_jp.pdf
42. 2. 情報構造設計
47. https://reras-factory.com/iphone-10year/
52. https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/
54. ユーザーニーズと 　コンテンツの属性をもとに、 構造パターンを選択し 分類方針を定める
55. トップダウン・アプローチと ボトムアップ・アプローチ　
56. トップダウン・アプローチ ユーザーがどんなふうに見つけたり探したりするのだろうか？ ペルソナやシナリオをもとに： • その人がどんな分野には明るくて、どんな分野には詳しくないか • ウェブやアプリをどのくらい使っているか • どんなサイトやアプリを使っていて、どのくらい類推できそうか • このアプリにおいては、何をどういうくくりで探しているのか
58. 構造のパターン
59. ツリー
60. ファセット
61. ウェブ
62. ハブ＆スポーク
63. リニア
64. トピック、オーディエンス、タスク
65. http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
66. ボトムアップ・アプローチ コンテンツが持つ属性（メタデータ）にはどんなものがあるのか？ • 名前、重さ、サイズ、色、大きさ、型番、などなど… • 取り扱うコンテンツ自体が持ちうる属性を洗い出す • それらにまとまりを与える • そこから、ユーザーがものを探し出すための切り口を見出す
71. LATCH
72. Location：場所 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
73. Alphabet：アルファベット/五十音 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
74. Time：時間 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
75. Category：カテゴリ https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
76. Hierarchy：連続量 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/
77. ポイント：独自のことをやらない
82. ヒント：ネットスーパーなどを参考に
85. ヒント：アパレルや価格.comなどを参考に 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級 人気度
87. 3. インタラクションデザイン
89. 　ユーザーがサイト上の各種機能にどう反応するかを定義し、 タスクの実行を促進するアプリケーションフローを開発すること
90. ポイント • OOUI • 4つのパターン • 画面で考えない
92. ？
93. ユーザーの興味関心の対象はこちらにある 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級 人気度
94. ユーザーの興味関心の対象はこちらにある
99. OOUI タスクベースUI • 何をするか（動詞）を決めて、もの（名詞）を選ぶ オブジェクトベースUI • もの（名詞）を選んで、何をするか（動詞）決める
102. Modal
103. Modeless
104. Webやアプリを司る4つのパターン • 一覧：複数のもの：コレクション • 詳細：個別のもの：シングル • 入力や設定：フォームなど：タスク支援 • ツール提供：写真の編集ツールなど
105. UI Flows http://www.standardinc.jp/reflection/article/ui-flows/
106. 一覧：商品 商品名称 グラム数／数量 価格 詳細：商品 商品番号 商品名称 グラム数／数量 価格 税込価格 一覧：カテゴリ カテゴリ名称 詳しく見る 検索する 並び替える 詳しく見る 絞り込む ソートする ブックマークする 注文する 検索する
107. 「釘を打つ時、我々はまずハンマーを持ち、それから振り下ろします。 振り下ろしてからハンマーを持つ人はいないのです」 https://www.sociomedia.co.jp/7279
108. 画面のことは後で考える • 画面の大きさ • 表示すべき内容の量 • ユーザーのリテラシーの想定 • ユーザーの利用状況の想定 • ユーザーの学習度合いの想定
114. http://modelessdesign.com/
115. オマケ：モードレスの知見を深めるコーナー • 2018年のオブジェクトベース UI • Modeless and Modal • ユーザー理解に合わせたユーザーインターフェイスデザイン • アプリケーションのイディオムデザイン （ページ下の方） • モードレス・ユーザーインターフェース • アナーキー・イン・ザ・ UX • OOUX - オブジェクトベースの UIモデリング • モードレスインタラクション • SEのためのUIデザインの教科書 • 複雑なアプリケーションにオブジェクト指向 UIで立ち向かう • ユーザーインターフェース解剖学・改訂版
116. そしてUIデザインへ
117. ここまで来ると、これが活きる • よさそうなサイトやアプリを日々ウォッチする • デザイン写経でパターンを身につける • なるべくいろんなものを使ってみる • シナリオを考え、情報構造設計を行い、インタラクションを考える • そうすると、適用すべきUIパターンが思いつく
119. 本日の流れ • WebデザインとUIデザインの違い • UIデザインの進め方? • ペルソナとUIの間にある3つのギャップ • 理想シナリオ • 情報構造設計 • インタラクションデザイン • そしてUIデザインへ
124. ありがとうございました 引き続きQ&Aコーナーへ！ @magi1125 124