Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
ユーザーインタフェースの分解
- 3. 3 User Interface Design ユーザー 接点 設計 言葉の意味から見るUIデザイン
- 10. 車の音 景色や距離感 車の位置手の位置 ハンドルをまわす 聴覚的フィードバック 視覚的フィードバック カーソルの位置 文脈的結果 (何が起こったか) マウスを動かす クリックする/離す キーを押す/離す 聴覚的フィードバック 視覚的フィードバック 文脈的結果 (何が起こったか) 聴覚的フィードバック 視覚的フィードバック 12:34●●●●● 100% 画面を押す/離す 文脈的結果 (何が起こったか) 画面上で指を滑らす 複数の指で押す/滑らす 結 果 の 認 知 GUI GUI GUI 操 作 対 象 操 作 方 法 空間 視覚 聴覚 文脈 タイヤ 触覚 ハンドル の反応 スピード感
- 11. UIデザインとは
- 12. 12 前提 これ以降スライドでは UIをGUIに限定してお話します。 UIデザインの範囲は左の赤い部分です。 • Information Design • Interface Design • Navigation Design • Interaction Design • Information Architecture
- 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 どうなるのか – 機能の実行 ビデオの再生を開始する 表示範囲を調整する Pg Up Pg Dn クリック ドラッグ キーを押す 12:34●●●●● 100% フリックする 次/前の写真を表示する
- 17. 17 どうなるのか – UIの反応 Pg Up Pg Dn クリック ドラッグ キーを押す 12:34●●●●● 100% フリックする 12:34●●●●● 100% 12:34●●●●● 100% 写真が変わる 12:34●●●●●100% ビデオが再生される スクロールする
- 21. 21 シグニファイア 言葉で説明 絵で説明 http://blog.livedoor.jp/lunarmodule7/archives/3283889.html どう操作するかわかるように デザインパターンの適用 12:34●●●●●100% フリック: 写真送り ダブルタップ: 拡大 ピンチイン/アウト: 拡大縮小
- 23. 23 フィードバック 参照 参照 マウスを動かす マウスを動かす カーソルが動く ボタンが青くなる ボタンがへこむ クリックする 画面が最前面に開く マウスの動きを認識 押せることを認識 押されていることを認識 成功を認識 ひとつひとつの操作に細かいフィードバック →「わかる」 参照 マウスを離す
- 24. 24 作業状態 コンテンツが追加されていく様子を 透過率の変化で表現 C:¥ > robocopy a b コピーの準備をしています...完了 C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx C:¥xxxxxxxxxxxxxx/xxxxx/xxxx.xxx フォルダに展開しています...完了 しばらくお待ちください... 変換の進捗をプログレスバーで表現 文章で状態を表示 作業結果 文章で結果を表示 (エラーなど) コンテンツが変更される 音で結果を表現 (叩けない音など) 作業状態と結果のフィードバック その後の作業 保存中と保存完了を シャッターで表現 格納場所を明示して 画面を復活させる方法を わかるようにしている
- 26. 26 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 5.
- 28. 28 スポットライトや矢印による注意の提供 どんな手順で操作するかわかるように ー 直接的説明 質問 → 答えチュートリアルで説明
- 29. 29 どんな手順で操作するかわかるように ー 関連付け 場所 コンテンツ ツール 表示設定 メインメニュー
- 32. 32 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5.
- 34. 34 フィッツの法則体験 – 1～4の円を順番に押してください 1 2 3 4 1 2 3 4 すぐできる 時間がかかる 1 2 3 4
- 37. 37 短期記憶の活用 | マジックナンバー7±2 973235035987 9732-3503-5987 短期記憶化できない ブロックごとに短期記憶できる 上より下の方が入力がらく ちなみに今は4±1が有力な説らしい (書籍「ユーザーインタフェースの心理学」より Serial: Serial:
- 39. 39 充実したショートカットキー
- 42. 42 複雑さ保存の法則 タスクのプロセスはある点を超えて減らすことはできない。 Xerox PARC in the mid-1980s, Larry Tesler 例: メール メールを送るには受け手と送り手のメールアドレスは必要。 メールアドレスの入力はなくせないが、 アドレス帳や自動入力機能などでユーザーをフォローできる。 自動化・スキップ
- 44. 44 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
- 45. 45 ニュースの写真を大きく表示する。装飾する。 配置を工夫する。 コンテンツの魅力を活用する News: Microsoftmillion moments: Sony Digital Network Applications だらだら読む。 全部読まなくてよい。 Twitter
- 46. 46 アイコンの描画が細かい 情報の表現がかっこいい UIそのものに魅力をもたせる 他にも... • Now loading のときキャラクターが踊っている。 • 好きなアニメの世界感が表現されている。 • 色が全体的にピンク。 画面効果やモーションとユー ザーの動作がリンクしている Solar
- 47. 47 UIそのものに魅力をもたせる 長期的満足度にも影響する 利用前・初期の満足度に強く影響する アイコンの描画が細かい 情報の表現がかっこいい画面効果やモーションとユー ザーの動作がリンクしている Solar 他にも... • Now loading のときキャラクターが踊っている。 • 好きなアニメの世界感が表現されている。 • 色が全体的にピンク。
- 48. 48 UIデザインとは 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
- 49. 台本どおりにユーザーが体験すると UX デザインは成功 タッチポイントを通してユーザーは体験する - ここにUIが含まれる タッチ ポイント 台本 (結果) ユーザーの 体験
- 50. 50 UIデザインとは、 提供したいUXを実現するために 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
- 51. UIデザインの成果物
- 53. • UI Blueprint • 画面仕様書 / UI仕様書 • 文言仕様書 • プロトタイプ (挙動がわかるもの) • これらの成果物が実装とビジュアルデザインのインプットになる。 • リーンやアジャイルを活用したプロセスでは上記のような成果物を作らないことも。 53 成果物の例
- 54. 54 UIデザイナー ユーザー (メンタルモデル) (メンタルモデル) メンタル モデルを 反映 検証 実行 (Norman, 1986) デザイナー・システム・ユーザーの関係
- 55. メンタルモデルとUI 55 UIデザイナー ユーザー (メンタルモデル) (メンタルモデル) メンタル モデルを 反映 検証 実行 メンタル モデルを 反映エンジニア (メンタルモデル) デザイナー・エンジニア・システム・ユーザーの関係
- 56. 56 UIデザイナー ユーザー 想定していること (メンタルモデル) メンタル モデルを 反映 検証 実行 (Gokaichi 2013) メンタル モデルを 反映実装者 受け取った仕様 仕様書 など 伝言ゲーム状態！ だから実装者にデザインを伝える成果物は大切 さらに仕様書も入る
- 57. UIデザインに必要な知識/スキル
- 59. 59 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作するかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。 A B C D 認知心理学の知識、人間工学の知識、UIコンポーネントの知識、プラットフォームの知識、 プログラミングの知識、UIデザインパターンの知識・適応スキル、仕様記述スキル、など。 A 色彩の知識、レイアウトの知識、アクセシビリティに関する知識、情報を編集するスキル、 レイアウトを整理するスキル、絵を描くスキル、タイポグラフィのスキル、文章表現のスキル、など。 B Man-Machine コミュニケーションの知識、作業に関する知識、作業に関するスキル、 認知心理学の法則を応用するスキル、など。 C D 流行に対する感覚、アプリケーションやサービスが扱うことがらに関する知識、など。 必要な知識/スキル
- 60. 60 どうやって学べばいい？
- 61. たくさんあります
- 62. 62 研究からも多くの学びが CursorCamouflage: Multiple Dummy Cursors as A Defense against Shoulder Surfing (Keita Watanabe, Nov 2012) SymmetircCursors (Keita Watanabe, March 2013) 例えば...
- 63. まとめ
- 64. 64 UIデザインとは、 提供したいUXを実現するために 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作して、どうなったかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。
- 65. 65 UIデザイナー ユーザー 想定していること (メンタルモデル) メンタル モデルを 反映 検証 実行 (Gokaichi 2013) メンタル モデルを 反映実装者 受け取った仕様 仕様書 など 伝言ゲーム状態！ だから実装者にデザインを伝える成果物は大切 さらに仕様書も入る
- 66. 66 1. なにを、どう操作して、どうなるのか決めること。 2. なにを、どう操作するかわかるようにすること。 3. なにを、どんな手順で操作するかわかるようにすること。 4. 効率的に、作業に適した方法で、没頭できるようにすること。 5. ポジティブな感情を増幅させるようにすること。 A B C D 認知心理学の知識、人間工学の知識、UIコンポーネントの知識、プラットフォームの知識、 プログラミングの知識、UIデザインパターンの知識・適応スキル、仕様記述スキル、など。 A 色彩の知識、レイアウトの知識、アクセシビリティに関する知識、情報を編集するスキル、 レイアウトを整理するスキル、絵を描くスキル、タイポグラフィのスキル、文章表現のスキル、など。 B Man-Machine コミュニケーションの知識、作業に関する知識、作業に関するスキル、 認知心理学の法則を応用するスキル、など。 C D 流行に対する感覚、アプリケーションやサービスが扱うことがらに関する知識、など。 必要な知識/スキル