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.

ユーザーインタフェースの分解

9,071 views

Published on

勉強会で紹介したスライドです。

Published in: Design
  • Be the first to comment

ユーザーインタフェースの分解

  1. 1. ユーザーインタフェースの分解 Takehisa Gokaichi m1201097@gmail.com @5kaichi
  2. 2. 2 User Interface ユーザー 接点 言葉の意味から見るUI
  3. 3. 3 User Interface Design ユーザー 接点 設計 言葉の意味から見るUIデザイン
  4. 4. 1. 入力デバイスとGUI
  5. 5. 5 操作 結果の認知 GUI 処理 応答 UIは人と機械の接点
  6. 6. 6 操作 結果の認知 GUI 操作 操作 処理 応答 応答が無いものも… 操作 操作 キーボードやマウスもUI UI
  7. 7. タッチパネルそのものを操作しているのではなく、 GUIを直接操作する感覚になる GUI 処理 応答 12:34●●●●● 100% 結果の認知 操作 7 タッチパネルもUI、だがしかし… UI
  8. 8. 8 操作 結果の認知 命令 車のハンドルもUI
  9. 9. 9 12:34●●●●● 100%
  10. 10. 車の音 景色や距離感 車の位置手の位置 ハンドルをまわす 聴覚的フィードバック 視覚的フィードバック カーソルの位置 文脈的結果 (何が起こったか) マウスを動かす クリックする/離す キーを押す/離す 聴覚的フィードバック 視覚的フィードバック 文脈的結果 (何が起こったか) 聴覚的フィードバック 視覚的フィードバック 12:34●●●●● 100% 画面を押す/離す 文脈的結果 (何が起こったか) 画面上で指を滑らす 複数の指で押す/滑らす 結 果 の 認 知 GUI GUI GUI 操 作 対 象 操 作 方 法 空間 視覚 聴覚 文脈 タイヤ 触覚 ハンドル の反応 スピード感
  11. 11. UIデザインとは
  12. 12. 12 前提 これ以降スライドでは UIをGUIに限定してお話します。 UIデザインの範囲は左の赤い部分です。 • Information Design • Interface Design • Navigation Design • Interaction Design • Information Architecture
  13. 13. 13 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. 3. 4. 5.
  14. 14. 14 なにを - UIコントロール
  15. 15. • Click • Double click • Triple click • Hover • Press and hold • Drag / Drop 15 マウスを動かす クリックする/離す キーを押す/離す 画面を押す/離す 画面上で指を滑らす 複数の指で押す/滑らす ユーザーの操作 コマンド • Press • Long press • multiple press (ショートカット キー操作など) • Tap • Double tap • Press and hold • Flick • Swipe / Pan • Drag / Drop • Pinch in / Out どう操作するか - ユーザーの操作 (入力) マウス キー タッチパネル
  16. 16. 16 どうなるのか – 機能の実行 ビデオの再生を開始する 表示範囲を調整する Pg Up Pg Dn クリック ドラッグ キーを押す 12:34●●●●● 100% フリックする 次/前の写真を表示する
  17. 17. 17 どうなるのか – UIの反応 Pg Up Pg Dn クリック ドラッグ キーを押す 12:34●●●●● 100% フリックする 12:34●●●●● 100% 12:34●●●●● 100% 写真が変わる 12:34●●●●●100% ビデオが再生される スクロールする
  18. 18. 18 状態の管理と整合性 「どうなるのか」の整合性を保つのもUIデザイナーの仕事 Disable条件、非表示条件、文言表示条件、コンテンツ数制限 コンテンツ数ゼロ、再生状態、表示モード… 矛盾のない世界にする
  19. 19. 19 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. 4. 5.
  20. 20. 20 なにを - UIコントロール
  21. 21. 21 シグニファイア 言葉で説明 絵で説明 http://blog.livedoor.jp/lunarmodule7/archives/3283889.html どう操作するかわかるように デザインパターンの適用 12:34●●●●●100% フリック: 写真送り ダブルタップ: 拡大 ピンチイン/アウト: 拡大縮小
  22. 22. 22 どうなったかわかるように すばやいフィードバック 明快なフィードバック
  23. 23. 23 フィードバック 参照 参照 マウスを動かす マウスを動かす カーソルが動く ボタンが青くなる ボタンがへこむ クリックする 画面が最前面に開く マウスの動きを認識 押せることを認識 押されていることを認識 成功を認識 ひとつひとつの操作に細かいフィードバック →「わかる」 参照 マウスを離す
  24. 24. 24 作業状態 コンテンツが追加されていく様子を 透過率の変化で表現 C:¥ > robocopy a b コピーの準備をしています...完了 C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx フォルダに展開しています...完了 しばらくお待ちください... 変換の進捗をプログレスバーで表現 文章で状態を表示 作業結果 文章で結果を表示 (エラーなど) コンテンツが変更される 音で結果を表現 (叩けない音など) 作業状態と結果のフィードバック その後の作業 保存中と保存完了を シャッターで表現 格納場所を明示して 画面を復活させる方法を わかるようにしている
  25. 25. シグニファイア ビジュアルボキャブラリー統一でのUI差異表現 進捗 選択状態と操作可否 量 「ごみ箱」は「入れる」ことを示唆し、 容量も表現している (シグニファイア無し) アイコン 失敗時に震える ビジュアルやモーションの活用 どう操作するかわかるように 作業状態と結果のフィードバック
  26. 26. 26 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 5.
  27. 27. 27 なにを - UIコントロール
  28. 28. 28 スポットライトや矢印による注意の提供 どんな手順で操作するかわかるように ー 直接的説明 質問 → 答えチュートリアルで説明
  29. 29. 29 どんな手順で操作するかわかるように ー 関連付け 場所 コンテンツ ツール 表示設定 メインメニュー
  30. 30. 30 どんな手順で操作するかわかるように ー レイアウト
  31. 31. 31 ツリー 徐々に細かい粒度へと 情報を掘り下げていく遷移 ファセット分類 共通でまとめられた 「群」を遷移 ウィザード 1画面1手順にした 1本道の遷移 ハブ&スポーク 中心の画面からから サブの画面を往来する遷移 ハイパーリンク 遷移の方向や群が無く 各画面が自由につながった遷移 遷移なし 1画面で完結 (例:電卓) どんな手順で操作するかわかるように ー 画面遷移や階層
  32. 32. 32 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5.
  33. 33. 33 フィッツの法則 ※ポインタを使った操作の場合は画面の端にあることも指し示しやすくなる要素になる。 連続作業のリズム UIが大きいと指し示しやすい 連続作業するUIが近いと指し示しやすい 法則: 影響:
  34. 34. 34 フィッツの法則体験 – 1~4の円を順番に押してください 1 2 3 4 1 2 3 4 すぐできる 時間がかかる 1 2 3 4
  35. 35. 35 意図しない作業の中断 動作が重たくて 作業のたびに止まる アニメーションが長くて なかなか次の作業に移れない OK Loading... 作業のたびに 何かを読み込みしている どの作業も ウィザード形式 作業が中断されると効率的に作業できない
  36. 36. 36 システムに作業を中断されないために UIの反応が早いこと モードレスであること サクサク動く 操作ごと不必要なアニメーションが無い 良い例 システムが重くて反応しない 操作ごとのアニメーションが長い 悪い例 バックグラウンドで処理がなされる 好きな手順で作業できる 作業するごとにモーダルの処理が走る どの作業もウィザード形式
  37. 37. 37 短期記憶の活用 | マジックナンバー7±2 973235035987 9732-3503-5987 短期記憶化できない ブロックごとに短期記憶できる 上より下の方が入力がらく ちなみに今は4±1が有力な説らしい (書籍「ユーザーインタフェースの心理学」より Serial: Serial:
  38. 38. 38 「使いやすさ > わかりやすさ」ということも コマンドは作業の省略と明確な指示が可能なので「できる人」には適している場合もある
  39. 39. 39 充実したショートカットキー
  40. 40. 40 気が利く 取り込み後に空き領域がどうなるか事前に明示する 「今後表示しない」のチェック よく見るWebページを最初に表示 よく使う項目をデフォルトに
  41. 41. 41 気を利かせるためのポイント 自動化・スキップ 無駄なことはやらせない (ただし、自動化やスキップには限界がある) フィードフォワード 結果がどうなるか先に伝える 先回り よくやることを、先に提示してくれる ポカヨケ ミスできない設計にする
  42. 42. 42 複雑さ保存の法則 タスクのプロセスはある点を超えて減らすことはできない。 Xerox PARC in the mid-1980s, Larry Tesler 例: メール メールを送るには受け手と送り手のメールアドレスは必要。 メールアドレスの入力はなくせないが、 アドレス帳や自動入力機能などでユーザーをフォローできる。 自動化・スキップ
  43. 43. 43 作業に適した方法をデザインするのがUIデザイナーの真骨頂 ゴカイチ持論
  44. 44. 44 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
  45. 45. 45 ニュースの写真を大きく表示する。装飾する。 配置を工夫する。 コンテンツの魅力を活用する News: Microsoftmillion moments: Sony Digital Network Applications だらだら読む。 全部読まなくてよい。 Twitter
  46. 46. 46 アイコンの描画が細かい 情報の表現がかっこいい UIそのものに魅力をもたせる 他にも... • Now loading のときキャラクターが踊っている。 • 好きなアニメの世界感が表現されている。 • 色が全体的にピンク。 画面効果やモーションとユー ザーの動作がリンクしている Solar
  47. 47. 47 UIそのものに魅力をもたせる 長期的満足度にも影響する 利用前・初期の満足度に強く影響する アイコンの描画が細かい 情報の表現がかっこいい画面効果やモーションとユー ザーの動作がリンクしている Solar 他にも... • Now loading のときキャラクターが踊っている。 • 好きなアニメの世界感が表現されている。 • 色が全体的にピンク。
  48. 48. 48 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
  49. 49. 台本どおりにユーザーが体験すると UX デザインは成功 タッチポイントを通してユーザーは体験する - ここにUIが含まれる タッチ ポイント 台本 (結果) ユーザーの 体験
  50. 50. 50 UIデザインとは、 提供したいUXを実現するために 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
  51. 51. UIデザインの成果物
  52. 52. 52 デザイン内容が設計者に伝わればOK 形式は設計者と密に相談して決めること 成果物の基本
  53. 53. • UI Blueprint • 画面仕様書 / UI仕様書 • 文言仕様書 • プロトタイプ (挙動がわかるもの) • これらの成果物が実装とビジュアルデザインのインプットになる。 • リーンやアジャイルを活用したプロセスでは上記のような成果物を作らないことも。 53 成果物の例
  54. 54. 54 UIデザイナー ユーザー (メンタルモデル) (メンタルモデル) メンタル モデルを 反映 検証 実行 (Norman, 1986) デザイナー・システム・ユーザーの関係
  55. 55. メンタルモデルとUI 55 UIデザイナー ユーザー (メンタルモデル) (メンタルモデル) メンタル モデルを 反映 検証 実行 メンタル モデルを 反映エンジニア (メンタルモデル) デザイナー・エンジニア・システム・ユーザーの関係
  56. 56. 56 UIデザイナー ユーザー 想定していること (メンタルモデル) メンタル モデルを 反映 検証 実行 (Gokaichi 2013) メンタル モデルを 反映実装者 受け取った仕様 仕様書 など 伝言ゲーム状態! だから実装者にデザインを伝える成果物は大切 さらに仕様書も入る
  57. 57. UIデザインに必要な知識/スキル
  58. 58. 58 これまで説明した5項目を意識しながら 提供したいUXを実現できるように ユーザーの作業をデザインし、 仕様が伝わる成果物に落とし込む。 UIデザイナーには高い専門性が必要。
  59. 59. 59 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作するかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。 A B C D 認知心理学の知識、人間工学の知識、UIコンポーネントの知識、プラットフォームの知識、 プログラミングの知識、UIデザインパターンの知識・適応スキル、仕様記述スキル、など。 A 色彩の知識、レイアウトの知識、アクセシビリティに関する知識、情報を編集するスキル、 レイアウトを整理するスキル、絵を描くスキル、タイポグラフィのスキル、文章表現のスキル、など。 B Man-Machine コミュニケーションの知識、作業に関する知識、作業に関するスキル、 認知心理学の法則を応用するスキル、など。 C D 流行に対する感覚、アプリケーションやサービスが扱うことがらに関する知識、など。 必要な知識/スキル
  60. 60. 60 どうやって学べばいい?
  61. 61. たくさんあります
  62. 62. 62 研究からも多くの学びが CursorCamouflage: Multiple Dummy Cursors as A Defense against Shoulder Surfing (Keita Watanabe, Nov 2012) SymmetircCursors (Keita Watanabe, March 2013) 例えば...
  63. 63. まとめ
  64. 64. 64 UIデザインとは、 提供したいUXを実現するために 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
  65. 65. 65 UIデザイナー ユーザー 想定していること (メンタルモデル) メンタル モデルを 反映 検証 実行 (Gokaichi 2013) メンタル モデルを 反映実装者 受け取った仕様 仕様書 など 伝言ゲーム状態! だから実装者にデザインを伝える成果物は大切 さらに仕様書も入る
  66. 66. 66 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作するかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。 A B C D 認知心理学の知識、人間工学の知識、UIコンポーネントの知識、プラットフォームの知識、 プログラミングの知識、UIデザインパターンの知識・適応スキル、仕様記述スキル、など。 A 色彩の知識、レイアウトの知識、アクセシビリティに関する知識、情報を編集するスキル、 レイアウトを整理するスキル、絵を描くスキル、タイポグラフィのスキル、文章表現のスキル、など。 B Man-Machine コミュニケーションの知識、作業に関する知識、作業に関するスキル、 認知心理学の法則を応用するスキル、など。 C D 流行に対する感覚、アプリケーションやサービスが扱うことがらに関する知識、など。 必要な知識/スキル
  67. 67. Takehisa Gokaichi m1201097@gmail.com @5kaichi ありがとうございました。

×