UXは、インタラクションの集大成です。「サイトを見たとたん、無意識に感情が動くこと」自体がインタラクションとなるのです。同様に、ユーザーはサイトでどこをどのようにクリックするかを意識して決める必要があります。
プロトタイピングをうまく使えば、有形、無形に関わらずどんなデザイン要素でも洗練させることができます。この記事では、「ビジュアルヒエラルキー」のルールをマスターして、より効果的なレイアウトをデザインする方法をご紹介します。
アプリやサイトは、ユーザーがある特定の情報を必要としている時にはその情報を与え、必要としていない時にはその情報を無くさなければいけません。アプリやサイトを作る時のゴールは、ユーザーの時間と関心を尊重するようなインターフェースを構築することです。
例えば、あるブログに４つのカテゴリーがあるとします。サイドバーにそれらのカテゴリーを載せることで、ユーザーは各記事を閲覧している時にそのカテゴリー一覧にざっと目を通す （そして無視する） ことができます。しかし、カテゴリーが20もある一覧表だと長文テキストのようになってしまうので、上手く機能しない可能性があります。ユーザーがその一覧表を見ようとした場合、自分の貴重な時間を、サイトのメインであるブログ記事ではなく一覧表を読むために使ってしまうことになり、本末転倒になってしまいます。
では、カテゴリーを表示するのに最適な場所はどこでしょうか？ その答えはサイトの趣旨にもよりますが、考える項目は同じです。
１. タイミング：ユーザーにいつカテゴリーを閲覧してほしいか？
２. 重要度：カテゴリーの一覧表は、ブログ記事やティザー広告と比べてどれほど重要なのか？
３. ブランディング：カテゴリーはどのようなスタイルを維持すべきか？
タイミング
インタラクションデザインを一続きのものとして考える場合、タイミングがとても重要になります。こちらのLo-Fiプロトタイプを見てみましょう。
写真クレジット：UXPin
ユーザーは、ハイコントラストでサイズが大きな要素を初めに見る傾向にあります。つまり上の画像では、タイトルが最初にユーザーの目線を惹きつけることになります。その後、ユーザーには選択肢が与えられます。つまり、タイトルのすぐ下にある本文を見るか、またはサイドバーにまず目を通してから本文に戻ってくるかのどちらかを選ぶことになります。後者のようなちょっとした遠回りでも、UXを損なう原因になってしまうこともあります。
デザインには、静的な表現以上の意味があります。無料の電子書籍である「インタラクションデザインの最適な実践方法」で説明されているように、ユーザーは最初のページ読み込みからコンテンツに触れるタイミング、そして最後にページを去るまで、段階的に情報を集めていきます。つまり、それぞれの段階をコントロールすることで、ユーザーがページに入る経路やその後の動作など、全体的な閲覧ルートを決めることができます。カテゴリーリンクは、単なるSEO対策のためにサイトの中にある飾りではありません。上の画像のデザインだと、カテゴリーリンクは、ユーザーがあまりに早く閲覧ルートから逸れる可能性を作ってしまっています。
この問題を解決するために、次の項目を考えてみましょう。
カテゴリーの重要度
タイミングと同様に、カテゴリーの相対的な優先順位によって、UXにおけるそれぞれのカテゴリーの立ち位置がわかります。優先順位がはっきり分かるようになっていればいるほど、ユーザーはあなたが通ってもらいたいと考えているルートに忠実に従ってくれるのです。
写真クレジット：UXPin
メガフッターのメリット （またはデメリット） についてお話ししましょう。上の画像のように、メガフッターの特徴は、ユーザーが通れるルートが１つしかないということです。つまり、上から順に要素を見ていくしかないのです。出口がルートを決めるように、カテゴリーは一番下に出てきます。鋭いユーザーは、カテゴリーリンクが比較的小さく作られていることに気がつくでしょう。カテゴリーリンクを本文と同じ文字サイズにすることで、その外見上の重要性を下げることができます。
メガフッターがサイドバーと比べていつも理想的であり、機能的である訳ではありません。もちろんメガフッターとサイドバーの両方を設置することもできます。
上の画像では、サイドバーは他のものよりも優先順位が高くなっており、あなたが重要だと思うカテゴリーを入れることができます。例えば、そのブログ記事が属しているカテゴリー、または現在表示されている記事と同じテーマのものを提示するカテゴリーなどです。このようなカテゴリーの重要度は、サイズと色を工夫することで変えることができます。ユーザーはサイズが大きくハイコントラストなものに惹かれるので、上のほうに設置されたカテゴリーでも、サイズとコントラストを小さくすれば、ページのコンテンツよりも重要でないものとしてユーザーに認識させることができるのです。（実際に使われている最終的なデザインを見てみましょう。）
プロトタイピングによって、様々な選択肢を検討することができる
プロトタイピングはどこで役割を果たしているのでしょう？ お分かりかと思いますが、全ての箇所においてです。
最初のサイドバーのデザインから最後の無料サービスまで、プロトタイピングは私たちがサイトの閲覧ルートをどのように展開するかを決めるサポートになります。プロトタイピングは、20ものカテゴリーがブログ記事本体と比べてどのように見えるかを示してくれます。これは私たちに、文字サイズと空白を調整すると何が起こるかを示してくれるのです。
UXは、アプリやサイトの中に順序良く並べられたインタラクションの集大成なのです。あるページから他のページに移るタイミングを操作するために重要度を利用することで、ユーザーがコンテンツを素早く飲み込めるようにすることもできます。
本記事で学んだことを実践するために、UXPinの無料トライアルをぜひ試してみてください。数多くの既成要素とカスタムアニメーションエディタ、そしてPhotoshop & Sketchの統合を用いて、迅速にプロトタイプを行うことができます。
