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