Transcript

• 1. ＜アジャイルUCD研究会＞ 2015年2月28日 100円 プロトタイプ ポストイットで、あっという間にモバイルUXデザイン Regional Scrum Gathering® Tokyo 2015
• 2. 「ユーザビリティ エンジニアリング(第２版)」 1章 ユーザ中心設計概論 2章 インタビュー法 3章 インタビューの実践 4章 データ分析法 5章 発想法 6章 プロトタイプ 7章 ユーザビリティ評価法 8章 ユーザテスト 9章 ユーザテストの準備 10章 ユーザテストの実施 11章 分析と再設計 12章 ユーザ中心設計活動 *無料サンプル版（第2章全文） http://www.slideshare.net/barrelbook/ss‐26183115 全面広告 全面広告
• 3. Shida Tarumoto 本日の案内役
• 4. Low High Fidelity Mid 一般的には見た目が大雑把ならばローファイ、本物そっくりならばハイファイと呼ぶ
• 5. ローファイの代表的手法が「ペーパープロトタイピング」
• 6. 「THE $1 PROTOTYPE」はモバイル時代の新しいペーパープロトタイピング論
• 7. 1. ENVISION 2. PROTOTYPE 3. TEST $1 Prototype 1ドル・プロトタイプ法の3ステップ
• 8. 1. ENVISION 正方形の付箋紙を使って「ストーリーボード」を描く
• 9. 2. PROTOTYPE 長方形の付箋紙を使って「ペーパープロトタイプ」を作成する
• 10. 3. TEST 近くのコーヒーショップに行って、 ”客”にコーヒーを奢って「インタビュー」に協力してもらう
• 11. ストーリーボード
• 12. あるイベント会場にて 店主：「2冊で60ドルに なります。」 客：「カード使えますか？」 店主：「ええ、どのカードで も結構ですよ。」 店主：「レシートに指で サインしていただけば、 SMSかメールでお送り できます。」 その日の夜 店主：「今日は何冊売 れたかな？」 引用元：「The $1 Prototype」 カード決済サービス「Square」を 題材としたストーリーボードの例
• 13. Establishing Shot （場面設定）から 始める 正方形の付箋紙5‐8枚 主に「吹き出し」 で話を進める 製品やアプリの 画面は重要な ”登場人物” 最後のコマは 「顧客のベネ フィット」を描く UXストーリーボードのポイント
• 14. 作・shida 付箋紙ストーリーボードの作成例
• 15. ペーパー プロトタイプ
• 16. 長方形の付箋紙をスマホの画面に見立てる
• 17. ※さらに極細サインペンがあれば尚可 道具一式：付箋紙、シャーペン、消しゴム、定規
• 18. 付箋紙プロトタイプの作成例
• 19. DRAWER SEARCH & KEYBOARDホーム画面 付箋紙を重ね合せれば、動きのある画面でも表現できる
• 20. ペーパープロトタイプ・ インタビュー
• 21. 「これがあなたのス マホだとします。」 「アプリを起動する と、こんな感じの画 面が出てきます。 どうしますか？」 「そこを押すと、次 はこんな画面にな ります。どうします か？」 XXXXXXXX > XXXXXXXX > XXXXXXXX > XXXXXXXX > XXXXXXXX > XXXXXXXX > TOP ← 「（仮に）あなたは ドコドコ で ナニナニ を しようとしていると 思ってください。」 ユーザの「操作」に応じて画面を「追加」していく
• 22. XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX Done XXXXXX XXXXXX XXXXXX XXXXXX 「そこを押すと、 画面が左側か らこんな風に 入ってきます。」 「そこを押すと、 こんな画面が下 側から出てきま す。」 「トランジション（アニメーション効果）」は口頭で説明する
• 23. 「ナビゲーションバーにある”ハンバーガー” アイコンをタップすると、サイドドロワーが左 からスライドインして、ホーム画面にオー バーレイ表示します。」 インタビューの大原則は「ユーザの言葉で話す」こと
• 24. おわりに
• 25. • リーンスタートアップ / リーンUX • Design Studio / Design Sprint • アジャイル開発（スクラ ム / XP） • ユーザストーリー・マッピ ング • プロトタイピング・ツール etc… 100円 プロト タイプ ＋ 付箋紙プロトタイプは他の手法と相性がよい
• 26. 特に「POP」や「Prott」とは相性がよい
• 27. プロトタイピングにはデザインパターンが役立つ
• 28. おまけ
• 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. 樽本 徹也 ‐ 利用品質ラボ代表 • 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. 簡単・便利なコトづくり応援します。  UX/UCDの講演・研修  UX/UCDの社内導入支援  UX/UCDによる製品開発支援 東京都台東区下谷1‐11‐15 ソレイユ入谷4F