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.

100円プロトタイプ(The $1 Prototype)

7,149 views

Published on

2015年2月28日 Regional Scrum Gathering Tokyo 2015 : Day 1 : [1E-2] 100円プロトタイプ ~ ポストイットで、あっという間にモバイルUXデザイン

Published in: Design
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2ZDZFYj ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2ZDZFYj ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

100円プロトタイプ(The $1 Prototype)

  1. 1. <アジャイルUCD研究会> 2015年2月28日 100円 プロトタイプ ポストイットで、あっという間にモバイルUXデザイン Regional Scrum Gathering® Tokyo 2015
  2. 2. 「ユーザビリティ エンジニアリング(第2版)」 1章 ユーザ中心設計概論 2章 インタビュー法 3章 インタビューの実践 4章 データ分析法 5章 発想法 6章 プロトタイプ 7章 ユーザビリティ評価法 8章 ユーザテスト 9章 ユーザテストの準備 10章 ユーザテストの実施 11章 分析と再設計 12章 ユーザ中心設計活動 *無料サンプル版(第2章全文) http://www.slideshare.net/barrelbook/ss‐26183115 全面広告 全面広告
  3. 3. Shida Tarumoto 本日の案内役
  4. 4. Low High Fidelity Mid 一般的には見た目が大雑把ならばローファイ、本物そっくりならばハイファイと呼ぶ
  5. 5. ローファイの代表的手法が「ペーパープロトタイピング」
  6. 6. 「THE $1 PROTOTYPE」はモバイル時代の新しいペーパープロトタイピング論
  7. 7. 1. ENVISION 2. PROTOTYPE 3. TEST $1 Prototype 1ドル・プロトタイプ法の3ステップ
  8. 8. 1. ENVISION 正方形の付箋紙を使って「ストーリーボード」を描く
  9. 9. 2. PROTOTYPE 長方形の付箋紙を使って「ペーパープロトタイプ」を作成する
  10. 10. 3. TEST 近くのコーヒーショップに行って、 ”客”にコーヒーを奢って「インタビュー」に協力してもらう
  11. 11. ストーリーボード
  12. 12. あるイベント会場にて 店主:「2冊で60ドルに なります。」 客:「カード使えますか?」 店主:「ええ、どのカードで も結構ですよ。」 店主:「レシートに指で サインしていただけば、 SMSかメールでお送り できます。」 その日の夜 店主:「今日は何冊売 れたかな?」 引用元:「The $1 Prototype」 カード決済サービス「Square」を 題材としたストーリーボードの例
  13. 13. Establishing Shot (場面設定)から 始める 正方形の付箋紙5‐8枚 主に「吹き出し」 で話を進める 製品やアプリの 画面は重要な ”登場人物” 最後のコマは 「顧客のベネ フィット」を描く UXストーリーボードのポイント
  14. 14. 作・shida 付箋紙ストーリーボードの作成例
  15. 15. ペーパー プロトタイプ
  16. 16. 長方形の付箋紙をスマホの画面に見立てる
  17. 17. ※さらに極細サインペンがあれば尚可 道具一式:付箋紙、シャーペン、消しゴム、定規
  18. 18. 付箋紙プロトタイプの作成例
  19. 19. DRAWER SEARCH & KEYBOARDホーム画面 付箋紙を重ね合せれば、動きのある画面でも表現できる
  20. 20. ペーパープロトタイプ・ インタビュー
  21. 21. 「これがあなたのス マホだとします。」 「アプリを起動する と、こんな感じの画 面が出てきます。 どうしますか?」 「そこを押すと、次 はこんな画面にな ります。どうします か?」 XXXXXXXX > XXXXXXXX > XXXXXXXX > XXXXXXXX > XXXXXXXX > XXXXXXXX > TOP ← 「(仮に)あなたは ドコドコ で ナニナニ を しようとしていると 思ってください。」 ユーザの「操作」に応じて画面を「追加」していく
  22. 22. XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX Done XXXXXX XXXXXX XXXXXX XXXXXX 「そこを押すと、 画面が左側か らこんな風に 入ってきます。」 「そこを押すと、 こんな画面が下 側から出てきま す。」 「トランジション(アニメーション効果)」は口頭で説明する
  23. 23. 「ナビゲーションバーにある”ハンバーガー” アイコンをタップすると、サイドドロワーが左 からスライドインして、ホーム画面にオー バーレイ表示します。」 インタビューの大原則は「ユーザの言葉で話す」こと
  24. 24. おわりに
  25. 25. • リーンスタートアップ / リーンUX • Design Studio / Design Sprint • アジャイル開発(スクラ ム / XP) • ユーザストーリー・マッピ ング • プロトタイピング・ツール etc… 100円 プロト タイプ + 付箋紙プロトタイプは他の手法と相性がよい
  26. 26. 特に「POP」や「Prott」とは相性がよい
  27. 27. プロトタイピングにはデザインパターンが役立つ
  28. 28. おまけ
  29. 29. BEGINING ・偶然、1ドルの付箋紙でスマホは簡潔にシミュレー ションできることに気付いた。 ・5年前にスティーブ・クルーグに勇気づけられた。 ・サンフランシスコ州立大学で「Agile Mobile UX  Design Certificate Course」を教えている。 ・1ドルプロトタイプ法はモバイルUXデザインとリーン スタートアップの完全な結合である。 ・「ENVISION(ビジョン構築)」のステップを省略しない ように。 Part 1: ENVISION ・正方形の付箋紙を使う。 ・「Establishing shots(場面設定)」が重要。 ・5‐8枚のストーリーボードを描く。 ・最後のコマは「顧客のベネフィット」を描く。 ・「ストーリボードウォークスルー」でブラッシュアップ する。 Part 2: PROTOTYPE ・長方形の付箋紙を使う。 ・「ホーム画面」から描く。 ・「デザインパターン」を活用する。 ・シャーペンと定規を使う。 ・画面要素(アイコンなど)は原則として全部描く。 Part 3: TESTING ・「コーヒーショップ」でテストする。 ・店員に「ワイロ(チップ)」を渡す。 ・「客(朝の待ち行列)」にコーヒーを奢って協力して もらう。 ・一人当たり4‐7分程度で「1画面フロー」をテストす る。 ・午前中だけで15‐20人テスト~改善を繰り返する (RITEメソッド風)。 ・「Adding(追加)」で画面遷移させる。 ・画面トランジションは「口頭」で描写する。 ・付箋紙はバインダーで管理する。 ・画面管理係(helper)と組む。 ・誘導質問しない。 ・専門用語を使わない。 Part 4: COLLABORATE ・1ドルプロトタイプ法はアジャイル開発と相性がよい。 ・ペルソナよりもコンテキストが重要。 ・キックオフミーティングで付箋紙ストーリーボードを 描く。 ・付箋紙プロトタイプとテストは1スプリント先行して 行う。 ・付箋紙プロトタイプを成果物として利用する。 “The $1 Prototype” Cheat sheet
  30. 30. 樽本 徹也 ‐ 利用品質ラボ代表 • UXリサーチャ/ユーザビリティエンジニア • 認定 人間中心設計専門家 • 認定 スクラムプロダクトオーナー(CSPO) • NPO  人間中心設計推進機構 評議員 • アジャイルUCD研究会 共同代表 ◎人机交互論 ‐ ユーザビリティエンジニア的HCI論 http://www.usablog.jp/ ◎アジャイルUCD研究会 ‐ リーン/アジャイルUX最新News http://groups.google.com/group/agileucdja?hl=ja ◎Facebook ‐ 樽本徹也 https://www.facebook.com/tetsuya.tarumoto  UX/UCDの講演・研修  UX/UCDの社内導入支援  UX/UCDによる製品開発支援 Keep in touch!
  31. 31. 簡単・便利なコトづくり応援します。  UX/UCDの講演・研修  UX/UCDの社内導入支援  UX/UCDによる製品開発支援 東京都台東区下谷1‐11‐15 ソレイユ入谷4F

×