はじめに
わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。
興味があれば、ぜひ Google UX Design Certificateを受講してみてください。
これまでの振り返り
階層の定義
階層とは、ページ上の要素に順番をつけ、その重要度によって強調するビジュアルデザインの原則のことです。階層化の目的は、ユーザーを誘導することです。
UXデザインにおける階層は、異なる要素間の相対的な重要性をユーザーに理解させることができます。
前回紹介した強調と階層がどう違うのか不思議に思うかもしれません。
- 階層 ：重要性の順に整理された要素群を参照する
- 強調：ある要素をそれを取り囲む他の要素から際立たせる
例えば、あるメディアのニュースを見るときを考えてみてください。
- 通常、まず見出しをチェックしますよね。多くの人は、それぞれの記事の内容をざっと把握するためにそうします。見出しは、最も重要であるため、ページ上で目立つ要素です。
- 見出しの下にはストーリーの要約があり、通常、フォントは小さく、太さも抑えてあります。この場合、タイポグラフィによってトップページに階層が生まれました。
階層の重要性
UXデザインでは、ユーザーが最初にどこに注目し、どのような行動をとればよいかを常に明確にしたいと考えます。階層は、ユーザーがユーザー・ジャーニーで取るべき最初のステップを指し示す のに役立ちます。
私たちは、モックアップを作成する際に、ユーザーがアプリを簡単にナビゲートできるように階層構造を適用しています。階層化することで、ユーザーは最も関連性の高い情報やメインアクションボタンを最初に見つけることができます。また、階層は、ユーザーをページ上の最も重要な場所に導きます。
階層化を実装してみる
デザインは、ユーザーにとって 最も重要な情報を優先的に表示する ことが大切です。重要度の高い順に並べることで、ユーザーが必要な情報を的確に得ることができ、製品に不満を抱くこともなくなります。
階層構造をデザインに取り入れるには、ユーザーが製品に触れたときに達成したい主な目標に焦点を当てます。たとえば、ユーザーがサイトにログインして操作することが第一の目標であれば、ログインページやサインアップページへの明確なリンクから階層を始める必要があります。
メインゴールとサブゴールが分かれば、デザインの階層を整理することができます。次のGoogleリワードのアプリのデザインをご覧ください。
- 左: 階層を追加することで、アプリのデザインに強調性を持たせています。大きく太い文字と色を使うことで、ユーザーが獲得した報酬に注目させ、ユーザーがこのアプリを終了する際に知っておくべき情報を明確にしているのです。
- 右: ユーザーにとって重要な情報領域が強調されていないものです。ユーザーはこの画面のどこに最初に焦点を合わせればいいのか、どんな行動をとればいいのかがわからず、ユーザーエクスペリエンスに欠けるものになっています。
サンプル：犬の散歩のアプリ
- "Select the dog walker" テキストをページの一番上に配置することで、その下にあるコンテンツのほとんどがこのプロセスに関する情報を含んでいることを示します。テキストを大きくすることで、そのことがより明確になります。
- "Availability based on your date and time"テキストは、"Select the dog walker"よりも小さく、各ドッグウォーカーの詳細よりも大きくなっています。リストアップされたドッグウォーカーのすべてが、選択した日時に利用可能であることをユーザーが認識することが重要なのです。
- "各ドッグウォーカーの名前"テキストは、そのドッグウォーカーに関連する他のテキストよりも濃いグレーで表示されていることに注目してください。
参考
- Golden Tips and Examples to Create Visual Hierarchy in Website Design で、効果的な視覚的階層を作るための旅を始めてください。
- インクルーシブなデザインについてもっと知りたい方は、UX Collectiveの記事をご覧ください：A is for Accessibility - 12 top tips for designing an inclusive user experience。