Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

デザイン基礎 UXとUI

4,162 views

Published on

ハンズラボの新卒さん向けに行ったデザイン研修のスライドです。
第3回は、私の専門領域であるUIデザインと、ユーザーエクスペリエンスの設計の仕方・考え方のお話です。リーンスタートアップとかアジャイル開発っぽいところもあり。

この講義の到達点は「使いやすさを形にするとはどんなことなのか説明できるようになり、わたしたちの製品を利用する『人』を理解し配慮できるようになる。」です。

少々長め。

Published in: Design
  • Hello! Who wants to chat with me? Nu photos with me here http://bit.ly/helenswee
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

デザイン基礎 UXとUI

  1. 1. デザイン基礎 UXとUI
  2. 2. 達成できること ●使いやすさを形にするとはどんなことなのか、 自分なりに説明ができる ●わたしたちの製品を利用する「人」を理解し、 配慮できるようになる
  3. 3. お話しすること 1. ユーザーエクスペリエンスとは 2. ユーザーインターフェースとは 3. 実際のデザインプロセスについて
  4. 4. 言葉
  5. 5. ユーザーインターフェース / UI 機械、特にコンピューターとその機械の利用者(通常は人間)の間での情報をやりとり するためのインターフェースである。  界面や接触面  中間面 コンピュータと周辺機器の接続部分  人間と自動機械との間の複雑な操作をする手順・規則
  6. 6. ユーザーエクスペリエンス / UX  ユーザ体験  利用するひとが体験することすべて
  7. 7. デザイン領域
  8. 8. ユーザー エクスペリエンス
  9. 9. ユーザーエクスペリエンス ● ユーザ体験 ● 利用者が体験することすべて テーマ パーク 買い物 Web サイト アプリ 新商品 スーパー 公園 飲食 書籍
  10. 10. ユーザーエクスペリエンス UXにおける影響期間 いつ なにを どのように 利用前 経験を想像する 利用中 利用後 利用期間全体 予期的 UX 経験する 一時的 UX ある経験を 内省する エピソード的 UX 多種多様な利用 期間を回想する 累計的 UX ユーザー体験 利用フェーズ
  11. 11. ユーザーエクスペリエンス ● ユーザ体験 ● 利用者が体験することすべて テーマ パーク 何か操作をすることがある 買い物 Web サイト アプリ 新商品 スーパー 公園 飲食 書籍
  12. 12. ユーザーエクスペリエンス UX ユーザーエクスペリエンス UI ユーザー インターフェース 体験のうちのひとつ
  13. 13. いいUXを提供できる UIや操作感を工夫 UIはUXの大事な要素 使いやすい わかりやすい 迷わない 情報に リーチできる いいイメージを持 つ また利用する 満足する
  14. 14. UIはUXの大事な要素 サービスやコンテンツ ユーザーインターフェース ユーザー おすしおいしいエクスペリエンス
  15. 15. ユーザー インターフェース
  16. 16. ユーザーインターフェース 機械、特にコンピューターとその機械の利用者(通常は人間)の間での情報をやりとり するためのインターフェースである。 キーワード 1. UCD(User Centered Design)ユーザー中心設計 2. IA(Information Architecture)情報アーキテクチャ 3. ユーザビリティ 4. アフォーダンス
  17. 17. 1. UCD(ユーザー中心設計) ユーザのニーズを重視した設計をすること。 • 人々が欲しいのは何? User Centered Design ユーザー優先のデザイン哲学 課題解決を繰り返しインターフェースを最適化 ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価
  18. 18. 1. UCD(ユーザー中心設計) ユーザのニーズを重視した設計をすること。 • 人々が欲しいのは何? 国際標準化機構によるISO9241-210 User Centered Design ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる解 決策の作成 ❹ 評価 UCD / HCD のプロセス
  19. 19. UX ユーザーエクスペリエンス UI ユーザー インターフェース 1. UCD(ユーザー中心設計) User Centered Design UCDの 考え方
  20. 20. 2. IA(情報アーキテクチャ) 知識やデータの組織化・体系化のこと。 Information Architecture わかりやすさのデザイン 状況把握 情報アーキテクチャ 解析 画面構成 構造化 体系化 配置遷移 グラフィッ ク ナビゲー ション ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価
  21. 21. Information Architecture2. IA(情報アーキテクチャ) UX ユーザーエクスペリエンス UI ユーザー インターフェース 体験のうちのひとつ
  22. 22. IA 情報アーキテクチャ グラフィックデザイン 体験を表現する 手法のひとつ Information Architecture2. IA(情報アーキテクチャ) UX ユーザーエクスペリエンス UI 体験のうちのひとつ ユーザー インターフェース
  23. 23. • 使いやすさ 使い勝手 • 「特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を 達成するために用いられる際の、有効さ、効率、満足度の度合い」※ 国際標準化機構によるISO 9241-11 ちゃんと使えるかどうか 3. ユーザビリティ
  24. 24. UXピラミッド 情報元:坂本貴史著「IA/UXプラクティス モバイル用方アーキテクチャとUXデザイン」P15 図2 満足 安心 利用可能 好ましい 価値がある 役に立つ 信頼できる 使いやすい アクセスしやすい 見つけやすい 3. ユーザビリティ 当然 レベル
  25. 25. • ヒトが知覚できる「行為の可能性」※ • 見ただけで説明なしに、操作方法を想起させる形、配置、色、状態 4. アフォーダンス 情報元:ドナルド・ノーマンの発言 見て直感的に動かし方がわかる
  26. 26. 4. アフォーダンス 車のドア
  27. 27. 4. アフォーダンス 画像:nintendo , SONY ?
  28. 28. リアリズム ● 現実にある物体の質感 ● 自然界の動き ● 人のメンタルモデルを利用 4. アフォーダンス アフォーダンスを伝える助け
  29. 29. 画像:Mac OS, iBooks.app スクリーンショット, Google Material Design, 4. アフォーダンス リアリズム 画面の場合
  30. 30. 4. アフォーダンス フラットデザイン 画面の場合 iOS6まで iOS7以降
  31. 31. 4. アフォーダンス フラットデザイン
  32. 32. UIづくりのお作法
  33. 33. UIづくりのお作法 ポイント ● 常にユーザー目線 ● ユーザビリティに配慮する
  34. 34. ユーザーとUI ユーザーと製品のコミュニケーションがUI ユーザー 製品 CLI コマンドラインインターフェース
  35. 35. ユーザーとUI ユーザーと製品のコミュニケーションがUI GUI グラフィカルユーザーインターフェース ユーザー 製品
  36. 36. ユーザーとUI ユーザーと製品のコミュニケーションがUI UI グラフィック 構造 文章 ユーザー 製品
  37. 37. ユーザーとUI ユーザーと製品のコミュニケーションがUI グラフィック 色 かたち アニメーション UI 構造 階層 配置 文章 ユーザー 製品
  38. 38. ユーザーの姿勢 ユーザー
  39. 39. ユーザーの姿勢 怠惰がデフォ 文章 とにかく読まない 画像 ぼんやり色と形だけ 記憶 「だいたい右の下のへんにあった気がする」 アラート 邪魔だからすぐ消す 操作 連打 だがユーザーに非はない ユーザー
  40. 40. ユーザーの姿勢 怠惰がデフォ(怒らないで) 文章 とにかく読まない 画像 ぼんやり色と形だけ 記憶 「だいたい右の下のへんにあった気がする」 アラート 邪魔だからすぐ消す 操作 連打 救済! 長く書かずできるだけ読ませない。画像と一緒に表示。 色と形の意味を与える。 一貫性をキープしてメンタルモデルを構築。 緊急性がないときに邪魔しない。戻れるようにする。 視覚的フィードバック ユーザー
  41. 41. ユーザーの嫌いなこと 5大コスト、頭を使いたくない 入力 する 待つ選ぶ 読む 覚える
  42. 42. ユーザーの嫌いなこと 常に「救済」しよう 迷わせない 選んであげる 入力しやすく 待たせない 待ってる間楽しく 待ち時間を示す 読まずにわかる 戻れる 既存知識を利用 思い出させる 入力 する 待つ選ぶ 読む 覚える
  43. 43. ユーザーとUI それぞれの要素でユーザビリティ(使いやすさ)が求められる グラフィック ❹ 色 ❺ かたち ❻ アニメーション UI 構造 ❶ 階層 ❷ 配置 ❸ 文章 ユーザー 製品
  44. 44. ❶ 構造 - 階層 グラフィック 色 かたち アニメーション UI 構造 ❶ 階層 配置 文章 ユーザー 製品
  45. 45. ❶ 構造 - 階層 役割 ● 関連しているということを伝える ● ユーザのメンタルモデルを構築する
  46. 46. ❶ 構造 - 階層 関連しているということを伝える ● IA(情報アーキテクトが大きく影響) ● 階層構造の視覚的構築 ● 優先順位 A B A B A B A B A B
  47. 47. ❶ 構造 - 階層
  48. 48. ❶ 構造 - 階層 画像:新宿図書館(スクリーンショット)
  49. 49. ❶ 構造 - 階層 ウィンドウ タブ タブ タブ タブ ボタン ウェブページ このレベルの ボタンをクリックすると… グレーのエリアのみ 影響を与える
  50. 50. ❶ 構造 - 階層 階層の深さと選択数のバランスに配慮 階層が浅い 階層が深い
  51. 51. ❶ 構造 - 階層 ポイント ● 情報に優先順位や上位下位の判別をして、情報設計(IA)をする ● アプリやウェブページの構成要素をうまく階層構造にする ● 階層構造をもちいて、どのように動作するか伝える
  52. 52. ❷ 構造 - 配置 グラフィック 色 かたち アニメーション UI 構造 階層 ❷ 配置 文章 ユーザー 製品
  53. 53. ❷ 構造 - 配置 役割 ● 構造を伝える ● 何が大切か明確にする ● ユーザのメンタルモデルを構築する
  54. 54. ❷ 構造 - 配置 構造を伝える ウィンドウ タブ タブ タブ タブ ボタン ウェブページ
  55. 55. ❷ 構造 - 配置 構造を伝える
  56. 56. ❷ 構造 - 配置 構造を伝える
  57. 57. ❷ 構造 - 配置 構造を伝える
  58. 58. ❷ 構造 - 配置 構造を伝える
  59. 59. ❷ 構造 - 配置 構造を伝える
  60. 60. ❷ 構造 - 配置 構造を伝える オプション1 オプション2 オプション3 オプション4 オプション5 オプション6 オプション7 オプション8 オプション9 オプション10 オプション11 オプション12 オプション1 オプション2 オプション3 オプション4 オプション5 オプション6 オプション7 オプション8 オプション9 オプション10 オプション11 オプション12 グループ A グループ B グループ C
  61. 61. ❷ 構造 - 配置 構造を伝える
  62. 62. ❷ 構造 - 配置 画像:スターバックスコーヒージャパン http://www.starbucks.co.jp/, Apple http://www.apple.com/jp/ , Zespri Kiwifruit http://www.zespri-jp.com/ 優先順位を伝える webサイトの場合
  63. 63. ❷ 構造 - 配置 画像:spotify.app スクリーンショット、写真.app スクリーンショット 優先順位を伝える モバイルアプリの場合
  64. 64. ❷ 構造 - 配置 画像:tumblr.appスクリーンショット、facebook.appスクリーンショット、Tweetbot.appスクリーンショット 優先順位を伝える モバイルアプリの場合
  65. 65. ❷ 構造 - 配置 画像:HandsPOS操作画面 ユーザーのメンタルモデルを構築する
  66. 66. ❷ 構造 - 配置 ポイント ● 構造を視覚的に伝えるためにグループ化しよう ● 場所と面積で一番見せたいものを目立たせよう ● 配置に意味を持たせてルールとして徹底し、ユーザに体得させよう(メンタルモデル)
  67. 67. ❸ 文章 グラフィック 色 かたち アニメーション UI 構造 階層 配置 ❸ 文章 ユーザー 製品
  68. 68. ❸ 文章 ● モノを理解するのに言葉は必須 ● だがとにかく読まれない、一番嫌われ者
  69. 69. ❸ 文章 文章のユーザビリティを考えよう ポイント ● 言葉少なに ● 無駄は省く ● 誤解の余地がない文章を ● 親しみやすい語り口で ● 要点は図解する ● どんなひとにも理解できる言葉を ● どの画面で目にするかを配慮する
  70. 70. ❸ 文章 文章は読まれないという前提でデザインしよう
  71. 71. ❹ グラフィック - 色 グラフィック ❹ 色 かたち アニメーション UI 構造 階層 配置 文章 ユーザー 製品
  72. 72. ❹ グラフィック - 色 役割 ● イメージや印象を操作する ● 危険か安全かを伝える
  73. 73. ❹ グラフィック - 色 イメージや印象を操作する ● ブランドキーカラー ● コンテンツファースト
  74. 74. ❹ グラフィック - 色 画像:spoyify, facebook, evernote, PowerPoint 各アプリ内スクリーンショット イメージや印象を操作する ● ブランドキーカラー ● コンテンツファースト spotify PowerPointfacebook evernote
  75. 75. ❹ グラフィック - 色 画像:spoyify, iOS写真, Instagram 各アプリ内スクリーンショット イメージや印象を操作する ● ブランドキーカラー ● コンテンツファースト spotify 写真 Instagram
  76. 76. ❹ グラフィック - 色 危険か安全かを伝える
  77. 77. ❹ グラフィック - 色 危険か安全かを伝える 危険 NG 間違い 警告 緊急 忠告 注意 メンテナンス中 OK 適合 正解 安全 可能
  78. 78. ❹ グラフィック - 色 情報元:SEO Japan「ウェブデザインで参考にしたいユーザー行動と色の心理学」 http://www.seojapan.com/blog/psychology-of-color 危険か安全かを伝える
  79. 79. ❹ グラフィック - 色 情報元:SEO Japan「ウェブデザインで参考にしたいユーザー行動と色の心理学」 http://www.seojapan.com/blog/psychology-of-color 危険か安全かを伝える
  80. 80. ❹ グラフィック - 色 危険か安全かを伝える default primary success info warning danger
  81. 81. ❹ グラフィック - 色 ポイント ● サービス、アプリの目的を表現した配色にする ● 色彩心理を利用するのは必須 ● 色彩の持つイメージからかけ離れた用途に用いない
  82. 82. ❺ グラフィック – かたち グラフィック 色 ❺ かたち アニメーション UI 構造 階層 配置 文章 ユーザー 製品
  83. 83. ❺ グラフィック – かたち 身体性とデバイス
  84. 84. ❺ グラフィック – かたち 操作しやすい範囲
  85. 85. ❺ グラフィック – かたち ガイドラインごとの違い Google Material Design www.google.com/design/spec/material-design/introduction.html iOS Human Interface Guidelines developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/
  86. 86. ❺ グラフィック – かたち ポイント ● 身体性を理解する ● 利用シーン、デバイスによって違うことに配慮する ● 一貫性を持つことで美しく仕上げるだけでなく、ユーザーに体得させる ● つまみやスライダーなど、アフォーダンスを利用した物体に摸したものを利用する(こ ともある) ● ガイドラインは全部覚える
  87. 87. ❻ グラフィック - アニメーション グラフィック 色 かたち ❻ アニメーション UI 構造 階層 配置 文章 ユーザー 製品
  88. 88. ❻ グラフィック - アニメーション 役割 ● 画面が切り替わったことを知らせる ● 注意を促す
  89. 89. ❻ グラフィック - アニメーション 役割 ● 画面が切り替わったことを知らせる ● 注意を促す 画像:Mac OS スクリーンショット, Google Chrome スクリーンショット
  90. 90. ❻ グラフィック - アニメーション ポイント ● 見逃して欲しくない変化や状態に目を向けさせるために、アニメーションは有効 ● 注意をひきつける力が大きいので、乱用するとイライラを招き逆効果 ● 自然界と同じ動きにする
  91. 91. アニメーショ ン 考えることいっぱい 疲れた ユーザビリ ティ 配色 いいエクス ペリエンス ブランディン グ 構造化 メンタル モデル 優先順位 アフォーダン ス 情報 アーキテク チャ フラットデザ イン ユーザ 中心設計 グループ 化 Web サイト モバイル ガイド ライン エラー文章 警告色 かたち デバイス対 応 画面幅 リアリズム
  92. 92. 実際に デザインしてみよう
  93. 93. デザインプロセス どう使う? 何が課題? きっとこうしたらいい んじゃないか やっぱそうだった 何か違った UCD(ユーザー中心設計)をベースにデザインしていく リサーチ デザイン・実装 テスト ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価 つくってみる 要求定義
  94. 94. デザインプロセス かかる時間のイメージ 明確にする時間 つくる時間 確かめる時間 ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価 リサーチ デザイン・実装 テスト要求定義
  95. 95. デザインプロセス 競合調査 ユーザー調査 アクセス解析 要求定義 IA 情報アーキテクチャ リリース 効果測定 UCD(ユーザー中心設計)をベースにデザインしていく 何をつくりたいかかなり明確に持つポイント ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価 UX設計 UIデザイン プロトタイプ作成 実装
  96. 96. サンプル PDA版免税計算機能のデザイン、実装 • すでにあるHDBの免税検太郎を iPod touch 版 に翻訳する感じ • なんでPDAになったかというとQR読めるスキャ ナが足りなくなってry
  97. 97. サンプル PDA版免税計算機能のデザイン、実装
  98. 98. 心がけたこと ● 現行の問題点を解決 ● 今の配置のおかげですでに構築されているメンタルモデルを壊さない ● 機能追加 or コンポーネント化も考えて、くせのない汎用性の高いデザインをする ● PDAの将来的なデバイス変更の解像度対応 ● 使ってみたい新しい技術に挑戦 ● クールな開発環境にする(gulp)
  99. 99. ❶ 利用状況の理解と明確化 リサーチを繰り返し、何が問題で何が必要か暴く HDB版の解析 店舗調査 インタビュー ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価  HDB版との比較メ モ  インタビュー・調査 内容メモ、動画、音 声
  100. 100. ❶ 利用状況の理解と明確化 リサーチを繰り返し、何が問題で何が必要か暴く
  101. 101. ❷ 要求事項の明確化 リサーチをもとに、課題を明らかにし、方針を決める HDB版の解析 店舗調査 インタビュー 問題点の明確化 機能の整理 仕様決定 ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価  HDB版との比較メ モ  インタビュー・調査 内容メモ、動画、音 声  仕様  優先順位把握 (頭の中で)
  102. 102. ❸ デザインによる解決策の作成 リサーチをもとに、課題を明らかにし、方針を決める HDB版の解析 店舗調査 インタビュー 問題点の明確化 機能の整理 仕様決定 ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価  HDB版との比較メ モ  インタビュー・調査 内容メモ、動画、音 声  仕様  優先順位把握 (頭の中で)  ペーパープロトタイ プ  モックアップ  ソースコード UX設計 UIデザイン プロトタイプ作成 実装
  103. 103. ❸ デザインによる解決策の作成 エクスペリエンスを組み立てて、グラフィックのディテールに落とす →ペーパープロトタイプ、Sketchモックアップ
  104. 104. ❸ デザインによる解決策の作成 エクスペリエンスを組み立てて、グラフィックのディテールに落とす →ペーパープロトタイプ、Sketchモックアップ
  105. 105. ❸ デザインによる解決策の作成 コード書く
  106. 106. ❸ 評価 ユーザーのフィードバックを得る HDB版の解析 店舗調査 インタビュー 問題点の明確化 機能の整理 仕様決定 ❶ 利用状況の 理解と明確化 ❷ 要求事項の 明確化 ❸ デザインによる 解決策の作成 ❹ 評価  HDB版との比較メ モ  インタビュー・調査 内容メモ、動画、音 声  仕様  優先順位把握 (頭の中で)  ペーパープロトタイ プ  モックアップ  ソースコード UX設計 UIデザイン プロトタイプ作成 実装 導入時の説明 フィードバック
  107. 107. サンプル PDA版免税計算機能のデザイン、実装
  108. 108. UXデザインにこだわる意味 短期的効果よりも長期的効果 情報元:坂本貴史著「IA/UXプラクティス モバイル用方アーキテクチャとUXデザイン」P21 図4 費用削減 全体コスト ユーザビリティ向上活動コス トによる効果= ー 問い合わせが6件/h減った
  109. 109. まとめ
  110. 110. まとめ ● とにかくリサーチをよくする。そうしないと情報アーキテクチャ、デザイン する時に必ずつまづく ● 「誰ために」「何のために」「なにをする」について 自分自身の中で、チームの中で、明確にする ● いろんなUIを見て、自分が体験したことを分析しよう ● いっぱい本読もう
  111. 111. 達成できたこと ●使いやすさを形にするとはどんなことなのか、 自分なりに説明ができる ●わたしたちの製品を利用する「人」を理解し、 配慮できるようになる
  112. 112. デザイン基礎 おしまい

×