ユーザーのためにデザインするには、ユーザーの最終目標とそこに辿り着くまでの行動を知っておかなければなりません。この２つはそれぞれコンテンツとユーザーフローと呼ばれます。これらが一緒になって、素晴らしいWebサイトの核を作るのです。
では、情報の概要をインタラクティブデザインに昇華させるにはどうすればいいのでしょうか？ この記事では、一連のコンテンツを１つのプロトタイプにする手法について、紹介したいと思います。
コンテンツリストをまとめる
私たちは何をデザインしているのでしょうか？ 多くのデザイナーは、まず外枠を作成してから内側へと仕事を進めていきます。ユーザーが多くの時間を費やす情報自体を検証する前に、情報の入れ物や枠組みから制作してしまうのです。
内から外へデザインを進める人は、ユーザーを考慮してデザインすることができています。ユーザーがすぐに見る必要があるものは、そのほかのコンテンツよりも目立って表示されるでしょう。たとえば、コールトゥアクション（CTA）は、ナビゲーションバーより注目されるデザインにするべきです。
また、コンテンツファーストのアプローチは自然とモバイルファーストのアプローチになることも重要です。モバイルデバイスは、画面のサイズや帯域幅など、デザインする上での制約が多くあります。よってこの範囲の中でデザインを行うことになるので、否応なしにコンテンツに優先順位をつける必要があります。
コンテンツリストは、エンドユーザーに関係ある要素をすべてまとめたリストやスプレッドシート、またはそのようなドキュメントです。優れたリストでは、セクションごとに分割されて情報の階層が綺麗にまとめられています。
完成したコンテンツリストからは、すべてのユーザーフローの可能性を伺うことができます。
情報に基づいてコアとなるフローを計画する
たとえば銀行のWebサイトのような複雑なプロジェクトでは、以下のような多くのフローが必要になります。
- パスワードの変更
- 投資オプションの閲覧
- 確定拠出年金の確認
- 小切手の申し込み
- 口座の開設・閉鎖
- 資金を送る・受け取る
- クレジットカードの決済
どのフローであれ、ユーザーが複数のコンテンツページを行き来できることが求められます。このチュートリアルとして、もっとも重要なフローの１つである、クレジットカードの決済のプロセスに着目します。プロトタイプを制作するときは、まずもっともリスクが高いユーザーフローか、もっとも基礎的なユーザーフローに注目しましょう。
このユーザーフローは以下の通りです。
- ユーザーがホームページに到着する。
- ログイン情報を入力すると、ダッシュボードへとリダイレクトされる。
- クレジットカードの利用残高をクリックする。
- 決済を行うアカウントを選択し、リクエストを送信する。支払いが行われることを確認する。
たくさんのステップがあるように見えますが、行われる判断は、決済の決定、決済する口座の選択、支払いの確認の選択、という３つだけです。プロトタイプをつくる際は、それぞれのステップがわかりやすく簡単でなければなりません。
プロトタイプを構築する
このケースでは、ユーザーがネット上の架空の銀行でカードの決済を行うユーザーフローを構築していきます。
コンテンツを考慮して、ここでの目標は、忠実度が中程度のプロトタイプを構築することです。忠実度が低いデザインでは、図形のワイヤーフレームだけを作成し、忠実度が高いデザインでは、ブランド戦略も示します。これらに対して忠実度が中程度のデザインでは、ユーザーがタスクを完了するために行う判断のフローを実演します。デザインを反復する時間が限られている場合は、このプロトタイプが最適です。ビジュアルデザインに時間を取られない一方で、ユーザーテストを行うのに十分な詳細部分だけを作ることができます。
忠実度が中程度のプロトタイプでは、以下の項目をデザインしましょう。
- UI要素の正確なレイアウト（ナビゲーションやもっとも重要なコンテンツなど）
- 基本的なカラー
- 基本的なインタラクション（より詳細なアニメーションや状態はまだ作成しない）
- 正確なタイポグラフィ
- 正確な寸法の画像
では、銀行のWebサイト制作において、プロトタイプがどのように機能するか見てみましょう。PhotoshopやSketchを使って制作を開始して、そのまま使い続けるか、プロトタイプのツールにインポートします。
ログイン
ログインのプロトタイプは簡単です。銀行のホームページでシンプルなフォームに入力して、ユーザーは安全にアカウントにログインします。このステップは絶対に必要になる、軽視してはいけないものです。このページは銀行とそのブランドに対して、ユーザーが最初にインタラクションする場所です。カラースキームからマイクロコピーまでのすべてにおいて、ユーザーにとってわかりやすい一方で、専門的なイメージを持たせなければなりません。
アカウントの概要
ユーザー名とパスワードを入力して、アカウント情報が含まれるダッシュボードへと移動します。この画面の目的は、ユーザーにアカウントの概要を提供することです。そのため、広告や売り込みを表示してはいけません。また、優先順位が低い情報は端に配置します。必要なのは、金額についての情報だけです。
支払いのタイミングがわかりやすくなるように、この画面ではクレジットカードの決済金額が見えるようにします。
支払いのプロセス
先程のユーザーフローに沿えば、次のアクションはカード利用残高を決済する選択です。簡単なクリックで選択できるようにして、２番目の決断を表示します。それは、引き落としの口座の選択です。
決定には時間と集中力が必要なので、口座を選択する操作はできるだけシンプルであるべきです。それぞれのアカウントは、口座の名前や残額など、必要最低限の情報だけを表示してリストにします。
次に３番目の決定へと移ります。取引を実行するかどうかの決断です。この段階では、この取引がどういうものか知る必要があります。つまり、２番目までの決定にあった選択肢は削除するべきです。
新たな画面かシンプルなモーダルウィンドウを開いて、判断するのに必要な情報のみを表示しましょう。具体的には、口座の名前と支払い金額、そして承認／非承認のボタンです。
完成しました！ 右のボタンをクリックすると、残額がクリアされたことが確認できます。
実際に機能するものへと近づける
先述のデザインのそれぞれの画面において、マイクロコピーだけでなく、カラーやタイポグラフィ、レイアウトも完成品と同じであることにお気付きでしょうか。これは完成版ではありませんが、テストを始めるには十分に忠実です。
この段階では、ユーザーが画面をクリックできるように、基本的なインタラクションを追加する必要があります。その作業が終わったら、フィードバックを集め、可能な限り作業を反復して、ユーザーテストを行いましょう。
プロトタイプを完成させるためには、以上のステップをそれぞれのユーザーフローで繰り返し行いましょう。
結論
ユーザーがインタラクティブなWebサイトを訪問するのは、タスクを達成するためであって、ウィジェットを使ったりグラフィックを褒めたりするためでは決してありません。実際のコンテンツに沿ってフローを作ることは、プロトタイプのUIを開発するのと同じくらい重要です。
コンテンツを中心としたデザインは、ユーザーを誘導するのに役立ちます。この記事の内容を試したい方は、UXPinの無料トライアルを始めてください。
