itsuna's blog

日々のアウトプットと備忘録

UXデザイン

UX メモ

UXデザイン

イントロ

  • UX：User Experience
  • UXはWebサイトやアプリを使用している時の体験だけではなく、訪問前や訪問後の体験も含む。
  • 範囲：UX > ユーザビリティ > UI
  • 関係者間での「任せるライン」と「口出ししないでほしいライン」を見極め、両者の間の部分で解決を始める。

ユーザビリティ評価

流れ

  1. 計画
    • 目的・目標(評価を行う背景とその活用方法)を明確にする。
    • 使う人を想定した簡易ペルソナを作成する。
    • 日程・場所・担当・予算・被験者を決定する。
  2. 評価設計
    • 評価目標を決めることで、評価導線を洗い出す。Webの場合はコンバージョンと同船を考える。
    • ペルソナをもとに、タスクとシナリオを設計する。
      • タスク：完了状態がわかるように書く
      • シナリオ：なぜタスクを行う必要があるのかを理解させ、人により齟齬が発生しないようにする。
      • 操作のシナリオ：タスクを行うために、こちらが想定してい動きを画面と操作の観点で書く。
    • 実験中、どこを特に見るかをあらかじめ洗い出す。
    • 進行(集中力の観点から1回あたり1時間~1時間半)・資材を決める。
  3. 実査準備
    • 資材を作成・手配し、プレテストを行う。プレテストは社内の関係ない人を選出する。シナリオや説明の不具合を改善する。
  4. 実査
    • 設営する
      • 外界と遮断できるようにする。密室が作れない場合は、パーティションを用意する。
      • モデレータは被験者の表情を確認できるような位置に座る。ただし、正面は除く。
      • 行動記録係、発話記録係は被験者の視界に入らないようにする。
    • 被験者を案内する。
      • 概略、調査目的、実際に行うこと、取り組みの姿勢(能力評価ではなく、問題を見つけることなので、頑張らないで普段どおりに)を伝える。
    • 事前のインタビュー
      • 被験者とペルソナの違いを把握させ、またリラックスさせるように相槌や笑顔を意識する。
    • タスクを伝える
      • シナリオを説明する。Webサイトの使い方を予想するようなヒントを与えないこと
      • 思考発話法を依頼する。(考えたことを口に出す手法)
    • Webサイト利用を観察する。
      • 行動と発話はそれぞれ別で記録する。(行動=事実, 発話＝背景)
      • 主観的記録 (モデレータと記録係がきになったこと)と客観的記録 (動画キャプチャ)を行う。
    • 事後インタビュー
      • 気になった点などを聞く。動画キャプチャを見せると思い出しやすくなるかも。
    • 謝礼・見送り・次セッションの準備
  5. 分析
    • 問題の重さ
      • 有効さ：自身のしたいことを成し遂げられない
      • 効率：効率よくしたいことができない
      • 満足度：不快や不安な思いをせずに成し遂げられない
    • 問題の要因 (良いデザインの4原則)
      • 可視性：見ただけで何をしたら良いのか、何が起きるのかわかること。
      • 良い概念モデル：ユーザの想像するシステムのイメージと実際が一致すること。どのような仕組みで動いていてどんな操作をすべきかがわかりやすいこと。
      • 良い対応付け：操作対象とその結果の対応があらかじめわかること。
      • フィードバック：操作後に意図した結果が得られたかわかること。
    • 問題の解決優先度
      • 上記2観点のマトリクス

評価方法

  • NEM (Novice Expert ratio Method)
    • 初心者(初めて使うユーザ)と熟練者(設計者など)で同じタスクを行った際の所要時間比の比較
    • 閾値(ex. 4.5)を決め、それ以上かかった操作ステップに問題があると判断する。
  • カードソート
    • コンテンツ名を書いたカードをカテゴリ名が書かれたカードの近くに配置し、カテゴリごとに分類する。
    • なぜその分類にするのかを理解するため、思考発話法が必須。

デザイン設計

プロトタイピング

  • アジャイルみたいに、評価と見直しを細かくやる。
    • ペーパープロトタイプ：紙にWebやアプリの画面を書く。
      1. 範囲を定める：設計初期であれば、最も重要のコンバージョン部分のみなど
      2. 作成する：手書きでバンバン書く。ただし、作りこみすぎないこと。
      3. 試用する：ユーザになった想定で、試用する。
      4. ブラッシュアップする：フィードバックループを回す。
    • ワイヤーフレーム評価：オズの魔法使い手法などで、過不足や矛盾を発見する。

ペルソナ

  • 製品・サービスを利用する典型的なユーザの人物像を具体的に書いたもの。このペルソナの気持ちをイメージしてサービスを作る。
    • 20歳~34歳のような層単位で書かず、具体的な定数で書く。
    • ペルソナは必ずしもWebやアプリだけを利用するわけではない。視野を狭めずに考察する。
  • 標準化シナリオ法
    • 価値のシナリオ：ペルソナの本音や本質的な欲求に注目し、それを実現する最小限のシナリオのみ記述する。
      • ユーザの本質的な欲求
      • ユーザの特徴
      • 価値のシナリオとシーン
    • 行動のシナリオ：ペルソナが何のために行動するのかを記載する。特定の製品名・機能名、Webサイトやアプリの画面を記載しない。
      • ユーザの目標
      • シーン
      • 行動のシナリオとタスク
    • 操作のシナリオ：ペルソナが目標を達成するために、具体的にどのような製品やサービスを利用し、どのような操作をするのかを考える。
      • ユーザの目標
      • タスク
      • 操作のシナリオ

導入

ステージ

  1. 未活動
  2. 有志活動
    • ハードル：有用性の立証
      • 小さな規模でも部分的なものでもよいので、成功事例を早期に作り出す。
  3. 実験・検証
    • ハードル：既存業務への適用
      • スケジュールやプロセスをなるべく変更せず、予算もかけずにUXデザインを試せるようにする。
      • ユーザビリティテストを部分的に取り入れ、ワイヤーフレームの作成とペーパープロトタイプによる検証を並行で実施できるようにする。
    • ハードル：稼働の有償化
      • 今までのアプローチに限界を感じている、または探しているクライアントに向けて提案する。
      • 他プロジェクトの中間成果物でもよいので、プロセスと手法が効果的であることを具体的に示す。
  4. 展開
  5. 統合

哲学

メタファー

  • スキュアモーフィズム
    • 現実世界の物質をリアルな質感、光沢感で表現
    • はじめてPCに触る人に親しみやすいが、現実世界にない発想のアプリケーションや見立てられないものに対して、表現が難しい。また本来の目的にない類推や先入観を与える。
  • フラットデザイン
    • UIの脱メタファー
    • IoTの拡大により非電化製品などの物理世界にメタメディアが拡大。3Dプリンタにより、情報だけではなく、物質も転送できる。
    • メタファーを超えた新しいインターフェイスを作る必要がある。
  • 体験を軸とした設計へ

情報の身体化

  • マウスのカーソルが無数にあっても、自分のカーソルを動きにより認識できる。しかし、遅延が入ると区別できなくなる
  • 自己帰属感の高いインターフェイスが良いインターフェイス

参考文献

  • Web製作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーにブックまで
  • 融けるデザイン