Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Rikiya Ihara
January 31, 2019
9

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

Rikiya Ihara

January 31, 2019
Tweet

More Decks by Rikiya Ihara

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

  6. 6

  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をデザインする • いきなりプロトタイプを作る

  16. None
  17. 基礎を知るとより近道ができる • UIデザインには根幹となる概念がある • それを知った上で学習や実務を行うのが合理的 • 文法を知ったうえで用例を学ぼう

  18. None
  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. よくある実務の進行:その2 • ペルソナとジャーニーマップを作る • いきなりサイトマップを書く • いきなりワイヤーフレームを書く • いきなりUIをデザインする •

    いきなりプロトタイプを作る
  25. ペルソナやジャーニーマップから どうやってUIにするのか?

  26. None
  27. None
  28. ペルソナとUIの間にある3つのギャップ 1. 理想シナリオ 2. 情報構造設計 3. インタラクションデザイン

  29. 1. 理想シナリオ

  30. http://www.jjg.net/elements/translations/elements_jp.pdf

  31. None
  32. https://www.coop-takuhai.jp/takuhai/about

  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. http://www.jjg.net/elements/translations/elements_jp.pdf

  42. 2. 情報構造設計

  43. None
  44. None
  45. None
  46. None
  47. https://reras-factory.com/iphone-10year/

  48. None
  49. None
  50. None
  51. None
  52. https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/

  53. None
  54. ユーザーニーズと  コンテンツの属性をもとに、 構造パターンを選択し 分類方針を定める

  55. トップダウン・アプローチと ボトムアップ・アプローチ 

  56. トップダウン・アプローチ ユーザーがどんなふうに見つけたり探したりするのだろうか? ペルソナやシナリオをもとに: • その人がどんな分野には明るくて、どんな分野には詳しくないか • ウェブやアプリをどのくらい使っているか • どんなサイトやアプリを使っていて、どのくらい類推できそうか •

    このアプリにおいては、何をどういうくくりで探しているのか
  57. None
  58. 構造のパターン

  59. ツリー

  60. ファセット

  61. ウェブ

  62. ハブ&スポーク

  63. リニア

  64. トピック、オーディエンス、タスク

  65. http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

  66. ボトムアップ・アプローチ コンテンツが持つ属性(メタデータ)にはどんなものがあるのか? • 名前、重さ、サイズ、色、大きさ、型番、などなど… • 取り扱うコンテンツ自体が持ちうる属性を洗い出す • それらにまとまりを与える • そこから、ユーザーがものを探し出すための切り口を見出す

  67. None
  68. None
  69. None
  70. None
  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. ポイント:独自のことをやらない

  78. None
  79. None
  80. None
  81. None
  82. ヒント:ネットスーパーなどを参考に

  83. None
  84. None
  85. ヒント:アパレルや価格.comなどを参考に 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級

    人気度
  86. None
  87. 3. インタラクションデザイン

  88. None
  89.  ユーザーがサイト上の各種機能にどう反応するかを定義し、 タスクの実行を促進するアプリケーションフローを開発すること

  90. ポイント • OOUI • 4つのパターン • 画面で考えない

  91. None
  92. ユーザーの興味関心の対象はこちらにある 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級

    人気度
  93. ユーザーの興味関心の対象はこちらにある

  94. None
  95. None
  96. None
  97. None
  98. OOUI タスクベースUI • 何をするか(動詞)を決めて、もの(名詞)を選ぶ オブジェクトベースUI • もの(名詞)を選んで、何をするか(動詞)決める

  99. None
  100. None
  101. Modal

  102. Modeless

  103. Webやアプリを司る4つのパターン • 一覧:複数のもの:コレクション • 詳細:個別のもの:シングル • 入力や設定:フォームなど:タスク支援 • ツール提供:写真の編集ツールなど

  104. UI Flows http://www.standardinc.jp/reflection/article/ui-flows/

  105. 一覧:商品 商品名称 グラム数/数量 価格 詳細:商品 商品番号 商品名称 グラム数/数量 価格 税込価格

    一覧:カテゴリ カテゴリ名称 詳しく見る 検索する 並び替える 詳しく見る 絞り込む ソートする ブックマークする 注文する 検索する
  106. 「釘を打つ時、我々はまずハンマーを持ち、それから振り下ろします。 振り下ろしてからハンマーを持つ人はいないのです」 https://www.sociomedia.co.jp/7279

  107. 画面のことは後で考える • 画面の大きさ • 表示すべき内容の量 • ユーザーのリテラシーの想定 • ユーザーの利用状況の想定 •

    ユーザーの学習度合いの想定
  108. None
  109. None
  110. None
  111. None
  112. None
  113. http://modelessdesign.com/

  114. オマケ:モードレスの知見を深めるコーナー • 2018年のオブジェクトベース UI • Modeless and Modal • ユーザー理解に合わせたユーザーインターフェイスデザイン

    • アプリケーションのイディオムデザイン (ページ下の方) • モードレス・ユーザーインターフェース • アナーキー・イン・ザ・ UX • OOUX - オブジェクトベースの UIモデリング • モードレスインタラクション • SEのためのUIデザインの教科書 • 複雑なアプリケーションにオブジェクト指向 UIで立ち向かう • ユーザーインターフェース解剖学・改訂版
  115. そしてUIデザインへ

  116. ここまで来ると、これが活きる • よさそうなサイトやアプリを日々ウォッチする • デザイン写経でパターンを身につける • なるべくいろんなものを使ってみる • シナリオを考え、情報構造設計を行い、インタラクションを考える •

    そうすると、適用すべきUIパターンが思いつく
  117. None
  118. 本日の流れ • WebデザインとUIデザインの違い • UIデザインの進め方? • ペルソナとUIの間にある3つのギャップ • 理想シナリオ •

    情報構造設計 • インタラクションデザイン • そしてUIデザインへ
  119. None
  120. None
  121. None
  122. None
  123. ありがとうございました 引き続きQ&Aコーナーへ! @magi1125 124