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.

第1回デザイニング・インターフェイス勉強会「ユーザの行動」

3,958 views

Published on

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Published in: Design
  • Be the first to comment

第1回デザイニング・インターフェイス勉強会「ユーザの行動」

  1. 1. デザイニング・インターフェイス(2e)勉強会 第1回 第1章 @yasulab
  2. 2. 良ければ、 本を買ってね!デザイニング・インターフェイス(2e)勉強会 第1回 第1章 @yasulab
  3. 3. 注意事項• 発表者 = デザインを勉強したいエンジニア • 質問はUstでも口頭でもいつでも歓迎! • 即座に回答できない場合は宿題的な感じで。 • 「それ違うんじゃね?」と感じたら是非指摘を。• 勉強会の経緯・スケジュールはこちらから↓ http://www.facebook.com/groups/di2e.study/
  4. 4. 注意事項• 50分ぐらい経ったら教えて下さい。 • 安西先生...休憩したいです... orz
  5. 5. 今日の概要• ユーザの行動について • ユーザは何を望んでいるのか?
  6. 6. 略語解説集• ID: Interface Design• SW: Software
  7. 7. 良いIDはユーザの理解から• 出発点=ユーザの理解 • 1. どんな人物なのか • 2. なぜ特定のSWを使うのか? • 3. それをどう操作するのか?“汝のユーザを知れ ― 彼らはあなたとは別人なのだ”
  8. 8. どうしてそれを使うの?• SWを使う=目標達成のための手段 • 調べもの,学習,制御,創作,会話,娯楽 ... • ユーザの達成したい目標を正しく見極めよう.• 目標達成の近道になるなら、どんどん削ろう! • 例:Simple Timekeeper
  9. 9. 例:Simple Timekeeper http://simpletimekeeper.com/
  10. 10. 1. (Start + Stop) button
  11. 11. 2. Number == Form
  12. 12. ちょっと考えてみる...• 入力するフォームを削ること=目標達成の近道? • 思考コストが低下する...かも? • マウスを、より動かさなくて良くなる...とか? • NumberをClickableにしたら気づく...のか?
  13. 13. ちょっと考えてみる...• 入力するフォームを削ること=目標達成の近道? • 思考コストが低下する...かも? • マウスを、より動かさなくて良くなる...とか? • NumberをClickableにしたら気づく...のか?  ↓  ユーザ調査
  14. 14. “好奇心を持とう. ユーザは実際にどのような人々で,何を考えたり感じたりしているのか,それを見出す専門的スキルを身につけよう.” P. 4
  15. 15. ユーザ調査• “最も良い方法は、外に出て彼らに会うことだ.” • cf. AirBnBが Los Angelsまでいった話. • cf. YCのアドバイザがよく一蹴する例. • 「ユーザはなんて言ってるの?」
  16. 16. ユーザ調査• “最も良い方法は、外に出て彼らに会うことだ.” • cf. AirBnBが Los Angelsまでいった話. • cf. YCのアドバイザがよく一蹴する例. • 「ユーザはなんて言ってるの?」 「え、でもユーザって人それぞれじゃね?」
  17. 17. ユーザ調査• ポイントは、“概ね”該当する事実は何なのか? • 一般的な行動パターン vs. 例外的なケース • 1. 概ね、どんなゴールを目指してるのか? 2. 概ね、どんなタスクを実行するのか? 3. 概ね、どんな単語を使うのか? 4. 概ね、どんなスキルを持ってるのか? 5. 概ね、どんな考え方を持ってるのか?
  18. 18. すごく時間がかかるけど,正しい問題を見極めよう.最初の一歩は大事なので, 正しく踏み出そう.
  19. 19. ユーザ調査の方法 (例)• 1. 直接観察• 2. Case Study • 3. アンケート調査• 4. ペルソナ※他にも色々あるようですが、本題ではないので省略.詳しくは「The Lean Startup」のMeasure等を参考に.
  20. 20. ユーザ調査のポイント• 真の問題を理解するのは難しい. • 一般的には、やや偏りがちになる • e.g. 説明出来るだけの言語表現能力が必要• 行き当たりばったりだと、変なデータを得るかも. • Formal method > Informal method > Do nothing
  21. 21. ←ここまで前置き  ここからが本題→
  22. 22. ユーザの行動パターン• ユーザ調査でデータを得たけど、それで? • ユーザをパターンに当てはめてみる。 • で、どんなパターンがあるの? → 次で説明
  23. 23. ユーザの行動パターン• ユーザ調査でデータを得たけど、それで? • ユーザをパターンに当てはめてみる。 • で、どんなパターンがあるの? → 次で説明 • どうしてパターンに当てはめるの? • 基礎となる構造・機能・表現を決めるため.
  24. 24. ユーザの行動パターン• ユーザ調査でデータを得たけど、それで? • ユーザをパターンに当てはめてみる。 • で、どんなパターンがあるの? → 次で説明 • どうしてパターンに当てはめるの? • 基礎となる構造・機能・表現を決めるため. Design Interface !
  25. 25. “一人一人がユニークな存在だとはいうものの、人々は概して予想通りにふるまうものだ。” P. 9
  26. 26. どんなパターンがある?• 1.Safe Exploration • 8. Microbreaks• 2. Instant Gratification • 9. Spatial Memory• 3. Satisficing • 10. Prospective Memory• 4. Changes in Midstream • 11. Streamlined Repetition• 5. Deferred Choices • 12. Keyboard Only• 6. Incremental Construction • 13. Other People’s Advice• 7. Habituation • 14. Personal Recommendations
  27. 27. 頑張って覚える!
  28. 28. 1. Safe Exploration• 「無理なく探検できますように...」• 色々試すためのアレコレ. • 代償を支払うことなく探検させよう! • Undo / Redo
  29. 29. 2. Instant Gratification• 「今すぐやりたい!」• 素晴らしいユーザ体験を迅速に提供しよう • “エンジニアの仕事が0を1にする仕事なら、 デザインは1を100にする仕事”http://www.startup-dating.com/2012/05/interview_ikumikatayama/ “見て2秒でわかるUIを常に目標として掲げている”
  30. 30. 3. Satisficing• 「もうこれでお腹いっぱいです」• Stisficing = Satisfying + Sufficing  • 全てを知るには時間が掛かる→必要十分な結果. • 例:目につきやすい場所に少数の選択肢• 状況が改善されるとしても,必要とされないかも. • 例:メールからFacebookに行く人々
  31. 31. 4. Changes in Midstream• 「気が変わったので、他のことやります」• 方針変更できる機会を提供&その場合の対処策。 • 途中まで入力された情報の保存. • 例:途中で気が変わった僕へのクーポンメール.
  32. 32. 5. Deferred Choices• 「とりあえず○○だけしたいんですけど...」• 不要なステップを後回しに。 • 例:掲示板にコメントしたいだけなのにSing up • 例:必要最低限の入力項目, 設定画面で詳細設定
  33. 33. 6. Incremental Construction• 「試行錯誤したい!」• 編集 <--- > 結果を迅速に表示 • 例:ATNDのイベント編集画面
  34. 34. 7. Habituation• 「おいおい、いつものアレが出来ないぞ!」• 「いつもの」の一貫性• 例:「Ctrl-a, Ctrl-x, Ctrl-s」を入力すると...?」 • MS Wordの場合 vs. Emacsの場合
  35. 35. ふぅ...
  36. 36. 8. Microbreaks• 「お、バスが来るのは2分間後か...」• 迅速な実行 & 素早い呼び出し • ✘ 毎回ログイン • ✘ ロードに時間が掛かる • ✘ 最初の画面に欲しい情報が表示されない
  37. 37. 9. Spatial Memory• 「あれ、いつもの場所にいつものアレがない...」• 秩序あるカオス • “ちょっと、勝手に僕の机を片付けないでよ!” • 勝手に整理、ダメ、ゼッタイ.
  38. 38. 10. Prospective Memory• 「忘れやすいアレは、ここに置いたままにしよう」• 不完全な記憶のための、外部記憶装置的な機能 • 例1:ウィンドウの開けっ放し • 例2:デスクトップに保存 • 例3:重要なメールにStar
  39. 39. 11. Streamlined Repetition• 「いったい何回繰り返せばいいの、この操作 orz」• よく繰り返す操作を簡単に. • 例:エディタの検索&置換 • 例:Photoshopの「アクション」登録 • 例:Unix Terminalの「Ctrl-p/Ctrl-n + Enter」
  40. 40. 12. Keyboard Only• 「マウスを使うとか情弱です ( ー`дー´)キリッ」• 他にも、身体上の理由でマウスが使えないとか。 • 例:Sign up 画面でマウス使いたくないよ!• でも、ゆうちょの口座番号入力とかどうよ? • cf. ゆうちょダイレクト
  41. 41. 13. Other People’s Advice• 「これって、他の人のどうやってるんだろうね?」• 他人を参考にしたい欲。そのためのアレコレ。 • 例:MATLABのカンニング推奨コンテスト • 例:他人が良く検索する項目を挙げる • cf. Google検索/Google入力=( ー`дー´)キリッ
  42. 42. 14. Personal Recommendations• 「SVの人が薦めた本だから、DI本はきっと凄い本」• 知人の推薦 ≧ 他人の推薦 • 同じURLにアクセスすると、同じページが見れる • 簡単に友人に紹介できる機能 • 手動テキスト > 自動テキスト
  43. 43. 以上!
  44. 44. どんなパターンがある?• 1.Safe Exploration • 8. Microbreaks• 2. Instant Gratification • 9. Spatial Memory• 3. Satisficing • 10. Prospective Memory• 4. Changes in Midstream • 11. Streamlined Repetition• 5. Deferred Choices • 12. Keyboard Only• 6. Incremental Construction • 13. Other People’s Advice• 7. Habituation • 14. Personal Recommendations
  45. 45. 今日の概要• ユーザの行動について • ユーザは何を望んでいるのか?
  46. 46. とりあえず今日はここまで.詳細は本を参照して下さい.
  47. 47. デザイニング・インターフェイス(2e)勉強会 第1回 第1章 @yasulab
  48. 48. 次回?•第2章(+ 第 x 章?)
  49. 49. 詳細はこちらからhttp://www.facebook.com/groups/di2e.study/

×