@yasulab

デザイニング・インターフェイス(2e)勉強会第１回　第1章

@yasulab

デザイニング・インターフェイス(2e)勉強会第１回　第1章

良ければ、本を買ってね！

注意事項

• 発表者 ＝ デザインを勉強したいエンジニア

• 質問はUstでも口頭でもいつでも歓迎！

• 即座に回答できない場合は宿題的な感じで。

• 「それ違うんじゃね？」と感じたら是非指摘を。

• 勉強会の経緯・スケジュールはこちらから↓http://www.facebook.com/groups/di2e.study/

注意事項

• 50分ぐらい経ったら教えて下さい。

• 安西先生...休憩したいです... orz

今日の概要

• ユーザの行動について

• ユーザは何を望んでいるのか？

略語解説集• ID: Interface Design

• SW: Software

良いIDはユーザの理解から

• 出発点＝ユーザの理解

• 1. どんな人物なのか

• 2. なぜ特定のSWを使うのか？

• 3. それをどう操作するのか？

“汝のユーザを知れ ― 彼らはあなたとは別人なのだ”

どうしてそれを使うの？

• SWを使う＝目標達成のための手段

• 調べもの，学習，制御，創作，会話，娯楽 ...

• ユーザの達成したい目標を正しく見極めよう.

• 目標達成の近道になるなら、どんどん削ろう！

• 例：Simple Timekeeper

例：Simple Timekeeperhttp://simpletimekeeper.com/

1. (Start + Stop) button

2. Number == Form

ちょっと考えてみる...

• 入力するフォームを削ること＝目標達成の近道？

• 思考コストが低下する...かも？

• マウスを、より動かさなくて良くなる...とか？

• NumberをClickableにしたら気づく...のか？

ちょっと考えてみる...

　↓　ユーザ調査

• 入力するフォームを削ること＝目標達成の近道？

• 思考コストが低下する...かも？

• マウスを、より動かさなくて良くなる...とか？

• NumberをClickableにしたら気づく...のか？

“好奇心を持とう. ユーザは実際にどのような人々で，何を考えたり感じたりしているのか，それを見出す専門的スキルを身につけよう.”

P. 4

ユーザ調査

• “最も良い方法は、外に出て彼らに会うことだ.”

• cf. AirBnBが Los Angelsまでいった話.

• cf. YCのアドバイザがよく一蹴する例.

• 「ユーザはなんて言ってるの？」

ユーザ調査

• “最も良い方法は、外に出て彼らに会うことだ.”

• cf. AirBnBが Los Angelsまでいった話.

• cf. YCのアドバイザがよく一蹴する例.

• 「ユーザはなんて言ってるの？」「え、でもユーザって人それぞれじゃね？」

ユーザ調査• ポイントは、“概ね”該当する事実は何なのか？

• 一般的な行動パターン vs. 例外的なケース

• 1. 概ね、どんなゴールを目指してるのか？2. 概ね、どんなタスクを実行するのか？3. 概ね、どんな単語を使うのか？4. 概ね、どんなスキルを持ってるのか？5. 概ね、どんな考え方を持ってるのか？

すごく時間がかかるけど,

正しい問題を見極めよう.

最初の一歩は大事なので,

正しく踏み出そう.

ユーザ調査の方法 (例)

• 1. 直接観察

• 2. Case Study　

• 3. アンケート調査

• 4. ペルソナ※他にも色々あるようですが、本題ではないので省略.

詳しくは「The Lean Startup」のMeasure等を参考に.

ユーザ調査のポイント

• 真の問題を理解するのは難しい.

• 一般的には、やや偏りがちになる

• e.g. 説明出来るだけの言語表現能力が必要

• 行き当たりばったりだと、変なデータを得るかも.

• Formal method > Informal method > Do nothing

←ここまで前置き　　ここからが本題→

ユーザの行動パターン• ユーザ調査でデータを得たけど、それで？

• ユーザをパターンに当てはめてみる。

• で、どんなパターンがあるの？ → 次で説明

ユーザの行動パターン• ユーザ調査でデータを得たけど、それで？

• ユーザをパターンに当てはめてみる。

• で、どんなパターンがあるの？ → 次で説明

• どうしてパターンに当てはめるの？

• 基礎となる構造・機能・表現を決めるため.

ユーザの行動パターン• ユーザ調査でデータを得たけど、それで？

• ユーザをパターンに当てはめてみる。

• で、どんなパターンがあるの？ → 次で説明

• どうしてパターンに当てはめるの？

• 基礎となる構造・機能・表現を決めるため.

Design Interface !

“一人一人がユニークな存在だとはいうものの、人々は概して予想通りにふるまうものだ。”

P. 9

どんなパターンがある？• 1.Safe Exploration

• 2. Instant Gratification

• 3. Satisficing

• 4. Changes in Midstream

• 5. Deferred Choices

• 6. Incremental Construction

• 7. Habituation

• 8. Microbreaks

• 9. Spatial Memory

• 10. Prospective Memory

• 11. Streamlined Repetition

• 12. Keyboard Only

• 13. Other People’s Advice

• 14. Personal Recommendations

頑張って覚える！

1. Safe Exploration

• 「無理なく探検できますように...」

• 色々試すためのアレコレ.

• 代償を支払うことなく探検させよう！

• Undo / Redo

2. Instant Gratification

• 「今すぐやりたい！」

• 素晴らしいユーザ体験を迅速に提供しよう

• “エンジニアの仕事が0を1にする仕事なら、 デザインは1を100にする仕事”

“見て2秒でわかるUIを常に目標として掲げている”

http://www.startup-dating.com/2012/05/interview_ikumikatayama/

3. Satisficing

• 「もうこれでお腹いっぱいです」

• Stisficing = Satisfying + Sufficing　

• 全てを知るには時間が掛かる→必要十分な結果.

• 例：目につきやすい場所に少数の選択肢

• 状況が改善されるとしても，必要とされないかも.

• 例：メールからFacebookに行く人々

4. Changes in Midstream

• 「気が変わったので、他のことやります」

• 方針変更できる機会を提供＆その場合の対処策。

• 途中まで入力された情報の保存.

• 例：途中で気が変わった僕へのクーポンメール.

5. Deferred Choices

• 「とりあえず○○だけしたいんですけど...」

• 不要なステップを後回しに。

• 例：掲示板にコメントしたいだけなのにSing up

• 例：必要最低限の入力項目, 設定画面で詳細設定

6. Incremental Construction

• 「試行錯誤したい！」

• 編集 <--- > 結果を迅速に表示

• 例：ATNDのイベント編集画面

7. Habituation

• 「おいおい、いつものアレが出来ないぞ！」

• 「いつもの」の一貫性

• 例：「Ctrl-a, Ctrl-x, Ctrl-s」を入力すると...?」

• MS Wordの場合 vs. Emacsの場合

ふぅ...

8. Microbreaks

• 「お、バスが来るのは２分間後か...」

• 迅速な実行 ＆ 素早い呼び出し

• ✘ 毎回ログイン

• ✘ ロードに時間が掛かる

• ✘ 最初の画面に欲しい情報が表示されない

9. Spatial Memory

• 「あれ、いつもの場所にいつものアレがない...」

• 秩序あるカオス

• “ちょっと、勝手に僕の机を片付けないでよ！”

• 勝手に整理、ダメ、ゼッタイ.

10. Prospective Memory

• 「忘れやすいアレは、ここに置いたままにしよう」

• 不完全な記憶のための、外部記憶装置的な機能

• 例1：ウィンドウの開けっ放し

• 例2：デスクトップに保存

• 例3：重要なメールにStar

11. Streamlined Repetition

• 「いったい何回繰り返せばいいの、この操作 orz」

• よく繰り返す操作を簡単に.

• 例：エディタの検索＆置換

• 例：Photoshopの「アクション」登録

• 例：Unix Terminalの「Ctrl-p/Ctrl-n + Enter」

12. Keyboard Only

• 「マウスを使うとか情弱です ( ｰ`дｰ´)ｷﾘｯ」

• 他にも、身体上の理由でマウスが使えないとか。

• 例：Sign up 画面でマウス使いたくないよ！

• でも、ゆうちょの口座番号入力とかどうよ？

• cf. ゆうちょダイレクト

13. Other People’s Advice

• 「これって、他の人のどうやってるんだろうね？」

• 他人を参考にしたい欲。そのためのアレコレ。

• 例：MATLABのカンニング推奨コンテスト

• 例：他人が良く検索する項目を挙げる

• cf. Google検索／Google入力＝( ｰ`дｰ´)ｷﾘｯ

14. Personal Recommendations

• 「SVの人が薦めた本だから、DI本はきっと凄い本」

• 知人の推薦 ≧ 他人の推薦

• 同じURLにアクセスすると、同じページが見れる

• 簡単に友人に紹介できる機能

• 手動テキスト ＞ 自動テキスト

以上！

どんなパターンがある？• 1.Safe Exploration

• 2. Instant Gratification

• 3. Satisficing

• 4. Changes in Midstream

• 5. Deferred Choices

• 6. Incremental Construction

• 7. Habituation

• 8. Microbreaks

• 9. Spatial Memory

• 10. Prospective Memory

• 11. Streamlined Repetition

• 12. Keyboard Only

• 13. Other People’s Advice

• 14. Personal Recommendations

今日の概要

• ユーザの行動について

• ユーザは何を望んでいるのか？

とりあえず今日はここまで.

詳細は本を参照して下さい.

@yasulab

デザイニング・インターフェイス(2e)勉強会第１回　第1章

次回？

•第２章（＋ 第 x 章？）

詳細はこちらからhttp://www.facebook.com/groups/di2e.study/