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

ユーザーインタフェースの分解 Takehisa Gokaichi m1201097@gmail.com @5kaichi

2 User Interface ユーザー接点言葉の意味から見るUI

3 User Interface Design ユーザー接点設計言葉の意味から見るUIデザイン

1. 入力デバイスとGUI

5 操作結果の認知 GUI 処理応答 UIは人と機械の接点

6 操作結果の認知 GUI 操作操作処理応答応答が無いものも… 操作操作キーボードやマウスもUI UI

タッチパネルそのものを操作しているのではなく、 GUIを直接操作する感覚になる GUI 処理応答 12:34●●●●● 100% 結果の認知操作 7 タッチパネルもUI、だがしかし… UI

8 操作結果の認知命令車のハンドルもUI

9 12:34●●●●● 100%

車の音景色や距離感車の位置手の位置ハンドルをまわす聴覚的フィードバック視覚的フィードバックカーソルの位置文脈的結果 (何が起こったか) マウスを動かすクリックする/離すキーを押す/離す聴覚的フィードバック視覚的フィードバック文脈的結果 (何が起こったか) 聴覚的フィードバック視覚的フィードバック 12:34●●●●● 100% 画面を押す/離す文脈的結果 (何が起こったか) 画面上で指を滑らす複数の指で押す/滑らす結果の認知 GUI GUI GUI 操作対象操作方法空間視覚聴覚文脈タイヤ触覚ハンドルの反応スピード感

UIデザインとは

12 前提これ以降スライドでは UIをGUIに限定してお話します。 UIデザインの範囲は左の赤い部分です。 • Information Design • Interface Design • Navigation Design • Interaction Design • Information Architecture

13 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. 3. 4. 5.

14 なにを－ UIコントロール

• 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 どうなるのか – 機能の実行ビデオの再生を開始する表示範囲を調整する Pg Up Pg Dn クリックドラッグキーを押す 12:34●●●●● 100% フリックする次/前の写真を表示する

17 どうなるのか – UIの反応 Pg Up Pg Dn クリックドラッグキーを押す 12:34●●●●● 100% フリックする 12:34●●●●● 100% 12:34●●●●● 100% 写真が変わる 12:34●●●●●100% ビデオが再生されるスクロールする

18 状態の管理と整合性「どうなるのか」の整合性を保つのもUIデザイナーの仕事 Disable条件、非表示条件、文言表示条件、コンテンツ数制限コンテンツ数ゼロ、再生状態、表示モード… 矛盾のない世界にする

19 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. 4. 5.

21 シグニファイア言葉で説明絵で説明 http://blog.livedoor.jp/lunarmodule7/archives/3283889.html どう操作するかわかるようにデザインパターンの適用 12:34●●●●●100% フリック: 写真送りダブルタップ: 拡大ピンチイン/アウト: 拡大縮小

22 どうなったかわかるようにすばやいフィードバック明快なフィードバック

23 フィードバック参照参照マウスを動かすマウスを動かすカーソルが動くボタンが青くなるボタンがへこむクリックする画面が最前面に開くマウスの動きを認識押せることを認識押されていることを認識成功を認識ひとつひとつの操作に細かいフィードバック →「わかる」参照マウスを離す

24 作業状態コンテンツが追加されていく様子を透過率の変化で表現 C:¥ > robocopy a b コピーの準備をしています...完了 C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx フォルダに展開しています...完了しばらくお待ちください... 変換の進捗をプログレスバーで表現文章で状態を表示作業結果文章で結果を表示 (エラーなど) コンテンツが変更される音で結果を表現 (叩けない音など) 作業状態と結果のフィードバックその後の作業保存中と保存完了をシャッターで表現格納場所を明示して画面を復活させる方法をわかるようにしている

シグニファイアビジュアルボキャブラリー統一でのUI差異表現進捗選択状態と操作可否量「ごみ箱」は「入れる」ことを示唆し、容量も表現している (シグニファイア無し) アイコン失敗時に震えるビジュアルやモーションの活用どう操作するかわかるように作業状態と結果のフィードバック

26 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 5.

28 スポットライトや矢印による注意の提供どんな手順で操作するかわかるようにー直接的説明質問 → 答えチュートリアルで説明

29 どんな手順で操作するかわかるようにー関連付け場所コンテンツツール表示設定メインメニュー

30 どんな手順で操作するかわかるようにーレイアウト

31 ツリー徐々に細かい粒度へと情報を掘り下げていく遷移ファセット分類共通でまとめられた「群」を遷移ウィザード 1画面1手順にした 1本道の遷移ハブ&スポーク中心の画面からからサブの画面を往来する遷移ハイパーリンク遷移の方向や群が無く各画面が自由につながった遷移遷移なし 1画面で完結 (例:電卓) どんな手順で操作するかわかるようにー画面遷移や階層

32 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5.

33 フィッツの法則 ※ポインタを使った操作の場合は画面の端にあることも指し示しやすくなる要素になる。連続作業のリズム UIが大きいと指し示しやすい連続作業するUIが近いと指し示しやすい法則: 影響:

34 フィッツの法則体験 – 1～4の円を順番に押してください 1 2 3 4 1 2 3 4 すぐできる時間がかかる 1 2 3 4

35 意図しない作業の中断動作が重たくて作業のたびに止まるアニメーションが長くてなかなか次の作業に移れない OK Loading... 作業のたびに何かを読み込みしているどの作業もウィザード形式作業が中断されると効率的に作業できない

36 システムに作業を中断されないために UIの反応が早いことモードレスであることサクサク動く操作ごと不必要なアニメーションが無い良い例システムが重くて反応しない操作ごとのアニメーションが長い悪い例バックグラウンドで処理がなされる好きな手順で作業できる作業するごとにモーダルの処理が走るどの作業もウィザード形式

37 短期記憶の活用 | マジックナンバー7±2 973235035987 9732-3503-5987 短期記憶化できないブロックごとに短期記憶できる上より下の方が入力がらくちなみに今は4±1が有力な説らしい (書籍「ユーザーインタフェースの心理学」より Serial: Serial:

38 「使いやすさ > わかりやすさ」ということもコマンドは作業の省略と明確な指示が可能なので「できる人」には適している場合もある

39 充実したショートカットキー

40 気が利く取り込み後に空き領域がどうなるか事前に明示する「今後表示しない」のチェックよく見るWebページを最初に表示よく使う項目をデフォルトに

41 気を利かせるためのポイント自動化・スキップ無駄なことはやらせない (ただし、自動化やスキップには限界がある) フィードフォワード結果がどうなるか先に伝える先回りよくやることを、先に提示してくれるポカヨケミスできない設計にする

42 複雑さ保存の法則タスクのプロセスはある点を超えて減らすことはできない。 Xerox PARC in the mid-1980s, Larry Tesler 例: メールメールを送るには受け手と送り手のメールアドレスは必要。メールアドレスの入力はなくせないが、アドレス帳や自動入力機能などでユーザーをフォローできる。自動化・スキップ

43 作業に適した方法をデザインするのがUIデザイナーの真骨頂ゴカイチ持論

44 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。

45 ニュースの写真を大きく表示する。装飾する。配置を工夫する。コンテンツの魅力を活用する News: Microsoftmillion moments: Sony Digital Network Applications だらだら読む。全部読まなくてよい。 Twitter

46 アイコンの描画が細かい情報の表現がかっこいい UIそのものに魅力をもたせる他にも... • Now loading のときキャラクターが踊っている。 • 好きなアニメの世界感が表現されている。 • 色が全体的にピンク。画面効果やモーションとユーザーの動作がリンクしている Solar

47 UIそのものに魅力をもたせる長期的満足度にも影響する利用前・初期の満足度に強く影響するアイコンの描画が細かい情報の表現がかっこいい画面効果やモーションとユーザーの動作がリンクしている Solar 他にも... • Now loading のときキャラクターが踊っている。 • 好きなアニメの世界感が表現されている。 • 色が全体的にピンク。

48 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。

台本どおりにユーザーが体験すると UX デザインは成功タッチポイントを通してユーザーは体験する - ここにUIが含まれるタッチポイント台本 (結果) ユーザーの体験

50 UIデザインとは、提供したいUXを実現するために 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。

UIデザインの成果物

52 デザイン内容が設計者に伝わればOK 形式は設計者と密に相談して決めること成果物の基本

• UI Blueprint • 画面仕様書 / UI仕様書 • 文言仕様書 • プロトタイプ (挙動がわかるもの) • これらの成果物が実装とビジュアルデザインのインプットになる。 • リーンやアジャイルを活用したプロセスでは上記のような成果物を作らないことも。 53 成果物の例

54 UIデザイナーユーザー (メンタルモデル) (メンタルモデル) メンタルモデルを反映検証実行 (Norman, 1986) デザイナー・システム・ユーザーの関係

メンタルモデルとUI 55 UIデザイナーユーザー (メンタルモデル) (メンタルモデル) メンタルモデルを反映検証実行メンタルモデルを反映エンジニア (メンタルモデル) デザイナー・エンジニア・システム・ユーザーの関係

56 UIデザイナーユーザー想定していること (メンタルモデル) メンタルモデルを反映検証実行 (Gokaichi 2013) メンタルモデルを反映実装者受け取った仕様仕様書など伝言ゲーム状態！だから実装者にデザインを伝える成果物は大切さらに仕様書も入る

UIデザインに必要な知識/スキル

58 これまで説明した5項目を意識しながら提供したいUXを実現できるようにユーザーの作業をデザインし、仕様が伝わる成果物に落とし込む。 UIデザイナーには高い専門性が必要。

59 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作するかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。 A B C D 認知心理学の知識、人間工学の知識、UIコンポーネントの知識、プラットフォームの知識、プログラミングの知識、UIデザインパターンの知識・適応スキル、仕様記述スキル、など。 A 色彩の知識、レイアウトの知識、アクセシビリティに関する知識、情報を編集するスキル、レイアウトを整理するスキル、絵を描くスキル、タイポグラフィのスキル、文章表現のスキル、など。 B Man-Machine コミュニケーションの知識、作業に関する知識、作業に関するスキル、認知心理学の法則を応用するスキル、など。 C D 流行に対する感覚、アプリケーションやサービスが扱うことがらに関する知識、など。必要な知識/スキル

60 どうやって学べばいい？

たくさんあります

62 研究からも多くの学びが CursorCamouflage: Multiple Dummy Cursors as A Defense against Shoulder Surfing (Keita Watanabe, Nov 2012) SymmetircCursors (Keita Watanabe, March 2013) 例えば...

まとめ

64 UIデザインとは、提供したいUXを実現するために 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。

65 UIデザイナーユーザー想定していること (メンタルモデル) メンタルモデルを反映検証実行 (Gokaichi 2013) メンタルモデルを反映実装者受け取った仕様仕様書など伝言ゲーム状態！だから実装者にデザインを伝える成果物は大切さらに仕様書も入る

66 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作するかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。 A B C D 認知心理学の知識、人間工学の知識、UIコンポーネントの知識、プラットフォームの知識、プログラミングの知識、UIデザインパターンの知識・適応スキル、仕様記述スキル、など。 A 色彩の知識、レイアウトの知識、アクセシビリティに関する知識、情報を編集するスキル、レイアウトを整理するスキル、絵を描くスキル、タイポグラフィのスキル、文章表現のスキル、など。 B Man-Machine コミュニケーションの知識、作業に関する知識、作業に関するスキル、認知心理学の法則を応用するスキル、など。 C D 流行に対する感覚、アプリケーションやサービスが扱うことがらに関する知識、など。必要な知識/スキル

Takehisa Gokaichi m1201097@gmail.com @5kaichi ありがとうございました。

http://memo.5or1.info	19
http://s.deeeki.com	7
https://twitter.com	4
http://www.slideee.com	1
https://tweetdeck.twitter.com	1

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

by Takehisa Gokaichi, UX Designer / Interaction Designer at Sony Digital Network Applications, Inc. ( Japan )

on Jun 16, 2014

Statistics

Views

Actions

5 Embeds 32

Accessibility

Categories

Upload Details

Usage Rights

Report content

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