resize.fm

About Face3 — シナリオとプロトタイピング

Part1完結編「About Face 3」のチャプター6〜7を読んで、構造化シナリオ法を中心としたシナリオライティングや、プロトタイピングのやり方のアレコレなどについて話しました。

Part1 ゴールダイレクテッドデザインを学ぶ

  • ゴールダイレクテッドデザインとはなにか?
  • 実装モデル・脳内モデル
  • ユーザー調査
  • ペルソナ
  • シナリオ
  • プロトタイピング
  • ユーザビリティテスト

Chapter6 デザインの基礎:シナリオと要件

調査によって集めた材料をもとに、具体的に要件を定義しインターフェースデザインを作っていく。

  • (調査で作ったペルソナをもとに)理想のユーザーインタラクションを想像する手段として物語、シナリオを作る
  • シナリオを使って要件を定義する
  • 要件を使って、製品の基本的なインタラクションフレームワークを作る
  • どんどん増えるデザインのディテールによってフレームワークを埋めていく

デザインツールとしての物語

  • 物語=考えを伝える手段→ストーリーテリング

    • 物語には単にアプリやサービスをどう使うかということではなく、ユーザーがどんな場面に直面しているのか、そこにはどんな背景があるのかといった情景が含まれるので、他のメンバーに共有したり、議論をしたりするツールとして効果的
  • シナリオを考えるときにも、人間の行動のモチベーション「ゴール」がどこにあるのかを意識して考える必要がある。

  • ペルソナは単なるユーザーが行う一連の作業をモデリングするのではなく、ゴールをモデリングしたもの

  • ペルソナをもとにシナリオを書く

  • シナリオはよりマクロな視点のプロトタイプ

    • ディテールを要求せず、ゴールへの道のりを示す
  • 構造化シナリオ法

    • アクティビティ・シナリオ
      • 本書ではコンテキスト・シナリオと紹介されている
      • 環境的にどういう状況なのかということも含まれる
      • 一日の中でサービスと接する主要なポイントを記述する
    • インタラクション・シナリオ
      • 本書ではキーパス・シナリオと紹介されている
  • チェック・シナリオ

    • レアケースなどの細かい部分を詰めるためのもの?
    • もしこうなったらどうなるか?という質問を並べていく

要件の定義

何が課題・要件として求められているかを必ず先に定義してから、どのように解決するかという具体的なインタラクションやアウトプットを考える

  • 要件と機能は別物

    • 要件=ニーズ
  • 直感的な先入観で「ユーザーはこんなモノを求めているだろう」と決めつけて考えてしまうと、本来のゴールとはかけ離れてしまうかもしれない

  • 要件確定段階(製品がどんなもので何をすべきなのか)

    • 問題とビジョンの記述を作る
    • ブレーンストーミング
    • ペルソナの期待を突き止める
    • コンテキストシナリオを作成する
    • 要件を突き止める
  • コンテキストシナリオを作成する

    • デザインを魔法のブラックボックスとして扱う
      • 具体的なインタラクションを記述しない
      • より根源的なゴールに到達するためのシナリオを描く
        • 全てのシナリオはゴールに沿ったものである
    • シナリオは人数・仕様コンテキストに合わせて複数書く
  • 要件を突き止める

    • コンテキストシナリオで魔法のブラックボックスとして書いた部分を要件として定義する
    • ユーザーの脳内モデル、ビジネス、開発技術的、ユーザーの体験としての感情など複数の制約を踏まえた上で要件を検討する

Chapter7 要件からデザインへ

  • フレームワーク設定段階

  • 要件からガシガシ細かいデザインを作るのではなく、まずはたたき台となるラフスケッチのプロトタイプを作る

    • デザインは必ず修正があるので、いきなり時間をかけて作り込むことはしない
    • シナリオと簡単なワイヤフレームのプロトタイプで概ね議論するためのイメージはできる
      • ペーパープロトタイピング→意見を言いやすくする、焦点をディテールではなく根本的な部分にフォーカスする
  • 思慮深い人間のように製品を振る舞わせる

    • 本当に相手のことを思った人間が対応したら、どのような対応をするだろうかと考える
    • UXライティング
  • 原則とパターンの適用

    • 基本的にはユーザーが過去の経験で慣れているインタラクションを適用すべき
    • よほど特別な理由がある場合は新しいソリューションにするのもあり
  • 各機能や情報をまとめ、全体の情報構造を整理する

  • インタラクションフレームワークのスケッチを描く(ペーパープロトタイピング)

    • 外化
  • ビジュアルデザインフレームワーク

    • 見た目やスタイルといったブランドや印象に関わる部分を定義する
      • これもゴールに沿って決める
    • とはいえ感覚的な部分は一致しにくいものでもあるので、選択肢としては極端なオプションを用意し、選択を適切な方向に向かいやすくする
      • とはいえ、自分が満足していないデザインを出すと、それをステークホルダーが気にいる可能性もあるので、ボツ案を入れるな!!!
  • インタラクションデザインのプロトタイピング

テスト

  • 探索的テスト
  • フィードバックテスト
  • ユーザビリティテスト

resize.fmへのご意見・ご感想は、おたより(Googleフォーム)で送っていただくか、Twitterで#resizefmをつけて投稿してください!

※ご意見・ご感想は配信内でご紹介させていただくことがあります