「第2弾」About Face 3を読んでみた
前回に引き続き、今回は、7章から14章までの内容について書いていきます。
ちなみに、第1弾はこちらになります。
今回は、要件の設定、フロー状態にさせるためのデザイン、優れたビジュアルデザインの定義について整理していきます。
要件の設定
適切な要件を設定するためには、いくつかのステップが必要になります。具体的な内容は、以下に記載。
Step1:物語形式に登場した名詞(オブジェクト)の抽出
前回の記事でも登場した物語形式の中で、記載されている名詞を抽出し、どのようなオブジェクトが必要になるのか明らかにする。
Step2:キーパスシナリオを描く
Step1で洗い出した名詞（オブジェクト）を意識しながら、ペルソナが最も頻繁に通過する主要経路を整理する。また、基本的に人間の作業は順番かつ直線的に進むことはなく、手順を何度も往復したりすることを心得ておく。
Step3:チェックシナリオの作成
重要度の低いケースを洗い出す。このやり方としては、一問一答形式で
「もし、〇〇が発生したらどうなるのか」という質問を洗い出し、回答できる状態になっていればOK。
Step4:ユーザービリティテスト
ユーザービリティテストを実施する上で、いくつか心得がある。それに基づくことで、プロダクトを作り込む前に、これまで整理した内容に問題がないか確認する。
テストに十分な具体的なデザインが作成されているが、細かい調整はされてない
テストに適した側面や作業の範囲で実施する
ペルソナを参考にして、ターゲット層から被験者を集める
被験者には、ローテクのプロトタイプを直接操作してもらう
被験者には、考えたことを口にしながら明確に指示された内容を実施するように求める
それまでのプロジェクトに参加していない方で、先入観や偏見が入らないようにする
被験者の振る舞いとその理由に注目すること
テスト全体を通じてデザイナが関与すること
ここまでが要件設定にの内容になります。次は、ユーザーのフロー状態について整理していきます。
ユーザーをフロー状態にさせる
最良のUIは、美しさにユーザーが下を巻くのではなく、楽に使えるのでインタフェースの存在に気づかないところに現れる。では、そのようなフロー状態を作るための考えを以下に記載する。
フローデザインの心得
ユーザーの脳内モデルに従う
小は大を兼ねる
ユーザーに直接的な操作を与える
ツール間の遷移を手早く、単純にする
モードレスなフィードバックを返す
通常ケースとイレギュラーケースを同列に扱わない
情報は単体ではなく、周囲との文脈の中で示す
オブジェクトとアプリケーションの状態を反映させる
不要な報告は避ける（報告はエラー時だけで十分）
ユーザーの過去の経験を踏まえて提案する
白紙スタートではなくショートカットを用意する
実行と設定は分けて考える
質問するのではなく選択肢を提供する
不可逆性の高い操作は奥底に
ユーザーのアクションに対してすぐに応答する（フローを阻害する最大の理由は応答の遅さ）
ナビゲーション
基本的に、ナビゲーションの改善とは、遷移する画面を減らすこと。
ユーザーのニーズに合わせて、よく使われる機能はアクセスしやすい位置に。あまり使われない機能は奥に。
駄目なパターンとして、タブで情報を小分けにして、階層構造を必要以上に深くしてしまうこと。これをすることで、操作が増え、フロー状態の阻害の要因になる。
プロダクトの振る舞い
ユーザーをフローに導くために、気の利くふるまいをする必要がある。
たとえ、指示がなくてもユーザーが入力した情報や行動を覚え、それに基づいて提案する。このような振る舞いを蓄積することで、結果的にユーザーが犯すミスの数を減らすことができる。なぜなら、プロダクトが最適な提案をどんどん用意してくれるので、ユーザーが操作する項目が減るから。
優れたビジュアルデザインの定義
優れたビジュアルデザインは、効率的である。最小限のビジュアルで、機能要素を最も上手い形で表現する。デザイナはデザインが成立しなくなるまで、取り除けるものを排除する作業が必要である。
そういった意味で、様々な事例を経て標準化されたインタフェースは非常に参考になる。しかし、リスクもあり、標準化されたデザインには個々のプロダクトの文脈は含まれていないので盲信はNG。適切な向き合い方は、あくまで詳しいガイドラインという位置づけで、もし標準よりも優れたアイデアがないなら、従うくらいの距離感が適切。
以上が、今回のまとめになります！
ようやく半分くらい読み終えたくらいなので、後半もしっかり読み込んでいこうと思います！
この記事が気に入ったらサポートをしてみませんか？