デザイナーのためのプロトタイピング入門

デザイナーのためのプロトタイピング入門

第 1 章：プロトタイプとは何か？

プロトタイプとは何か、業界毎のプロトタイプについて解説されている

• エンジニア: 静的プロトタイプ(紙)、インタラクティブプロトタイプ(アプリ)
• デザイナー: クリッカブルなモックアップ
• 建築: 模型 (きりゅう、昼光、材料のテスト)

つまり

他人が見える、ユーザーを対象にしたテストができるように形にしたものならなんでもプロトタイプ

第 2 章：何のためにプロトタイプを作るか

目的 (理解、コミュニケーション、テスト・改良、重要性の主張) について検討

• 開発プロセスが進行するにつれて方向性を変えるのは、難しくコストがかかる
• 初期段階では最初のアイデアに固執せず思いつく限り試すべき

戦略の理解

• ユーザーフローの理解
  • ユーザーフローのステップを一つひとつ明らかにすると、デザインや目標達成に必要なことが見えてくる
• ユーザー中心設計
  • ユーザーが話の主語になる
  • 購入するユーザーが曖昧だと誰にも響かない
  • ペルソナ作成すべし
    • 長期プロジェクトだと特に自分自身のバイアスを削り、新しい視点を取り入れることが重要
      • ヒアリングにはデモグラフィック情報が重要
        • 年齢層
        • 経済的地位
        • 所得レベル
        • 教育レベル

第 3 章：プロトタイプの忠実度

忠実度の種類

• 低忠実度
  • コンセプトを掘り下げるのに活用
  • 安価で迅速に試せるが、インタラクションが限られユーザーに文脈がほとんどあえられない
• 中忠実度
  • 特定のフローのユーザーテストを行う。ステイクホルダーに見せるのに良い
  • かける時間と質のバランスが良いが、時間がかかる割には完全に機能しない
• 高忠実度
  • 具体的なインタラクションや細かいユーザーテストを行う。最終的なデザイン提示に活用
  • 細かいテストができるが、相当時間がかかり、コーディング時間もかかる

忠実度の要素

• ビジュアルの精度
  • What: 見た目をどれだけ完成形に近づけるか
  • Why: 高忠実度になればなるほど、コントラスト比材料の相互作用、美的評価、読みやすさの判定、だと普段の環境や文脈で使ってもらいやすくなるため
  • Ex: アプリ画面
    • 高忠実度: 書かれてなかった
    • 低忠実度: ポストイットを使ったアプリ画面。(コンセプト段階ということをユーザーに示せる)
• 機能の幅広さ
  • What: 広範な機能のうちどれくらいの数の機能が盛り込まれているか
  • Why: どこまで盛り込むかを決められると時間を省いてプロセスを進められる
  • Ex: 音楽を購入しプレイリストを作成する機能
    • 高忠実度: 全ての機能が網羅されている(多様な機能をどう使うかを見れる)
    • 低忠実度: 書かれてなかった
• 機能の深さ
  • What: 個々の機能をどれくらい詳細に作り込むか
  • Why:
  • Ex: 音楽のプレイリスト作成するタスクに、選択、名前付け、保存、追加...など実際に作成するのに必要な多くの機能を盛り込む。
    • 高忠実度: 製品を使って実行する個々のタスクをしっかりとテストできる
    • 低忠実度: ナビケーションに関する単純な仮説をテストできる
• インタラクティビティ
  • What: アプリのインタラクティブな良い嘘がユーザーにどう提示されるかを意味する
  • Why: キューや各部分の動きを通じてプロセス全体を通して、文脈を持ってテストできるできる
  • Ex
    • 低忠実度: ペーパーで作成した Web サイト
    • 高忠実度: クリックしたときに起きるアニメーションが作成されている(正しい文脈を持ってユーザーテストができる)
• データモデル
  • What: インターフェースでユーザーがインタラクトするコンテンツと、製品で活用されるデータ
  • Why: 実際のデータによる裏付けができ、バックエンド構造や処理速度など正しい検証ができる
  • Ex
    • 低忠実度: Web サイトのコンテンツは全てダミーテキストにする
    • 高忠実度: 音楽の実際にある長いタイトルや短いタイトルを表示する(UI の崩れや表現を検証できる)

第 4 章：プロトタイピングのプロセス

実用最小限のプロトタイプ

• STEP1 ユーザーが誰かを明らかにして問題を特定数する
  • ペインポイントを見つけ k 解決策の方向性を考える
• STEP2 ユーザーフローを作成して問題を解決する
  • 方向性を裏付けるユーザーフローの作成に取り掛かる
    • → 作らなければならないプロトタイプの範囲と、優先順位(売れなくなるか、頓挫するかの仮説を最初にテストできる)がわかる
• STEP3 ユーザーフローに対処すプロトタイプを作る
  • 目的の検証を行うために最適な忠実度に沿ったものを作成
    • ワイヤーフレームを描く
    • ブレッドボードを使用した配線を行う
• STEP4 テストし、結果を評価して繰り返す
  • あなたが質問し、他の人がメモをとる
  • 4~8 人程度実施、結果を検討、仮説を直すか、どうすすればエクスペリエンスを向上させられるか検討

探索中心

• STEP1 ユーザーの問題を解決する方法をたくさん考える
  • 付箋書き出し、貼り付け、議論し、アイデアを書き加える
• STEP2 類似のアイデアをまとめてカテゴリーを作る
  • 「親和性マッピング」のプロセスで分類
  • 優先度を投票で決める
• STEP3 優先順位に基づいて今後の方針を決める
  • 優先度を何らかの指標でプロットする
    • 実現の容易さ x インパクト の 2 軸でプロット
  • チーム全体で議論する
    ー議事録、成果物は必ず残し誰でもアクセスできるようにする

オーディエンス中心

• STEP1 オーディエンス目標、忠実度を決める

  • オーディエンスの役割
    • デザイナー
      • フィードバック、サポート、非表、アイディえーションをお願いするのに適している
    • ステイクホルダー
      • デザインの方向性の承認を得る
      • 進捗の方向
      • ビジネスニーズが満たされていることを断言する相手
    • クライアント
      • アイデアを納得させて契約を結び、進捗報告して順調かどうかを確信してもらう相手
    • エンジニア
      • 実現可能性に関する情報を求め、デザインを伝え作成してもらう相手
  • 目標
    • デザイナー
      • 低忠実度のプロトタイプを理解できる人
      • 忠実度の粒度に応じて、アイデアやコンセプト、エクスペリエンスの向上させる細かい改良点についてのフィードバック
    • ステイクホルダー
      • コンセプト、ユーザーフローの明確化
      • 忠実度(作業中の要素は何か、変えようと思っていることなど)を理解してもらい、検証してもらう
      • 彼らのために期待値を合わせること
    • クライアント
      • 中〜高忠実度のプロトタイプを通して、コンセプトを現実的に理解してもらう
      • クライアントの既存のスタイルでどう機能するかを見せる
      • 現在のプロトタイプから、今後どんな製品になるかを期待を持ち続けてもらう
    • エンジニア
      • 低忠実度のプロトタイプを理解できる人
      • 実装難易度が飲み込めればし s つの高いフィードバックをすることができる
      • ただし、最終的なデザインを理解してもらうには高忠実度のプロトタイプが必要

• STEP2 目標達成のために何を組み込む必要があるか

  • それぞれのロールの人が理解できるレベルのプロトタイプとコミュニケーションにあったプロトタイプを作成するべし

• STEP3 オーディエンスにプロトタイプを提示する

  • ユーザーストーリーを説明しながらプロトタイプを提示するやり方がベスト
    • 文脈を与えるとプレゼンテーションや検証の狙いを理解してもらえる
  • 受けたフィードバックをわかるように全員の意見を記録する

仮説中心

• STEP1 ユーザー、彼らの問題、テストすべき課題を決める

  • ユーザーの課題を明確にしておく
    • 方向性を見失わないようにする

• STEP2 製品開発のどの段階にあるかに応じて、仮説に適した忠実度を選ぶ

  • 初めはややこしくても、状況に軸足を置いたプロトタイプを作成する力になる
  • 手遅れにならないような初期のうちにプロトタイプを作成するべし

• STEP3 実施すべきテストの種類を決める

  • 仮説と忠実度に基づいて実施すべきテストを行う
  • コンセプトが大きな仮説には、カードソーティングやクリックスルーのようなテストが良い
  • 特定のインタラクションについて複数アイデアがあるときは、A/B テストを用いる(それぞれお複数作る)

• STEP4 プロトタイプを制作する

  • リサーチ計画書を書き、テストするのに必要なプロトタイプを作成する
    • リサーチ計画書
      • 目標と仮説
      • ユーザープロフィール
      • 事前調査のための質問
      • タスク

• STEP5 プロトタイプをテストする

  • 説明、質問する人と、議事録をとる 2 人以上で着手すると良い
  • ユーザーが"ハッピーパス”から外れてもすぐに助け舟を出さず、外れたことを悟られないようにして記録する
    • そして質問する
      • 何が起こると思いましたか？
      • このエクスペリエンスについて一番好きなこと、嫌いなことは何ですか？2 つ答えてください
  • 淡々とした表情を崩さず、賛成や批判をしない
  • テスト対象者
    4-8 人にテストする
    • 自分たちとは全く違う属性の人にも質問する

第 5 章：デジタルプロダクトのプロトタイピング

1. アプリのフローの核となるアイデアを確定する

   • ユーザーフローを使ってハッピーパスをデザインする！

   • あ多様なユーザーに合うようにユーザーフローは複数作成する

     • ペルソナも複数用意する

     • 初めてのユーザーと 2 回目以降のユーザーでもインタラクションが異なる

       • 初めて
       • 2 回目以降

2. 情報アーキテクチャを作成する

   • ユーザーが目標を達成するのに必要な IF を紙に描く

     • 豊富なバリエーションな IF を書いていく

   • 情報アーキテクチャを活用し要素を洗い出す

     • インターフェースがどう構造かされているかを表したもの
     • カードソーティングを行いアイテムや用語をどう分類するかを突き止める
       • やり方
         • ページ、ページのセクションを全て別々のカードに書く
         • カードをシャッフルしてカテゴリー名を付け直す

3. ワイヤーフレームを描く

   1. グレースケールで情報アーキテクチャをもとに作成する
      • 付箋を用いると小さいサイズで考えなければならないので良い
        • ペーパープロトタイプ
      • この段階でグリッドを選択しておいたほうが良い

4. プロトタイピングを行う

   1. ペーパープロトタイプをクリッカブルにする
      • スキャンしたペーパープロトタイプに対してFigmaやXDなどを使い、画面遷移を行えるようにする
   2. プロトタイピング用のソフトウェアで、確定したペーパープロトタイプ通りのデザインを起こす
      • Figma, XDなどを使いつかいデザインを書き起こす

5. コーディングする

   • 開発者と協力して作る
     • プロトタイプを作成している段階で実際のパフォーマンスや、開発時間を計算しておくべし
   • 注意点
     • 高忠実度のプロトタイプ
       • 例えコーディングしてないところがあっても、最終製品と区別がつかないレベルでないとならない
       • コンテンツ
         • データモデルが揃ってないといけない

6. A/Bテスト

   • A/Bテストで改善を行う

第 6 章：フィジカルプロダクトのプロトタイピング

第 7 章：プロトタイプのユーザーテスト

第 8 章：すべてを 1 つに ーー SXSW テイスティングエクスペリエンス

第 9 章：私たちが学んだこと

用語集

• ユーザーフロー
  • 人がソフトウェアやアプリを使い、色々な画面をナビゲートしてどのように目標を達成していくかを示したもの
• ハッピーパス
  • ユーザーがタスクを完了する最も簡単で迅速なルート