発見されやすいコンテンツや機能をデザインするための 12 のヒント | アドビ UX 道場 #UXDojo

発見されやすさ（ディスカバラビリティ）とは、言葉どおりに、何かが発見される潜在力のことです。デジタルインターフェイスにおけるディスカバラビリティを定義するなら、ユーザーが UI からコンテンツや機能を見つける際の簡単さと言えるでしょう。優れたディスカバビリティが重要になる主な理由は、ユーザーが必要なものを見つける能力が、特定のタスクを完了する能力に直接影響する点にあります。

この記事では、ディスカバラビリティが重要な理由、そしてディスカバラビリティに優れたデザインためのヒントを紹介します。

発見されやすいようにデザインすることが難しい理由

UX においては、ファインダビリティ（探しやすさ）とディスカバラビリティ（発見しやすさ）という用語が、しばしば同じ意味で使われます。両者に関連はありますが、同じものではありません。重要な違いは、ユーザーのコンテンツに対する接し方にあります。ファインダビリティは、ユーザーにとって既知の、あるいは存在が想定されているコンテンツや機能に辿り着く能力に関わります。一方、ディスカバラビリティは、ユーザーが事前に知らなかった新しいコンテンツや機能に出会う能力に関わります。

この違いを理解すると、ディスカバラビリティの高いインターフェイスのデザインが困難な理由が理解しやすくなります。多くの場合に、ユーザーは意図的に新しいものを探したりはしていません。そもそも、使用しているサイトやアプリの一部として存在することを知らなければ、ユーザーはただ画面を操作して、新しい機能やコンテンツを気にかけることすらないでしょう。ディスカバラビリティに注目することは、ユーザーが新しい要素に出会うのが容易なデザインへの道を開きます。

ディスカバラビリティを向上させる 12 のヒント

多くの要因が UI のディスカバラビリティに影響します。これから紹介するのは、ディスカバラビリティの向上を図るために、一般的に適用可能な 12 のヒントです。

ヒント 1：馴染みのあるインターフェイスにする

多くのデザイナーは、新しいアプローチや、ちょっとした実験を好みます。しかし、何か新しいものをつくり出そうとする試みの中で既存のアプローチを改変すると、残念なことに、ユーザーにとって理解の難しい画面になることがよくあります。

広く受け入れられている標準に従ったインターフェイスをデザインするのはデザイナーの責任です。既存のデザイン慣習、例えば、macOS や Windows に使われているメタファーやパラダイムなどを利用すると、ディスカバラビリティを高めることができます。過去の経験を頼りにできると、ユーザーは何がどうなるのかを把握しやすくなります。多くのウェブサイトが、ナビゲーションメニューをページ上部のサイトのロゴの横に配置しています。これはほとんどのユーザーが「そこにあること」を期待している場所です。

ヒント 2：価値のあるコンテンツや機能を優先する

UI で何かを隠すと、ユーザーがそれを見つけないリスクが高まります。モバイルアプリやウェブサイトがハンバーガーメニューからタブバーへと移行しているのは、ディスカバラビリティが大きな理由です。確かに、ハンバーガーメニューはナビゲーションの選択肢を隠すことで画面スペースを節約できるという利点をもっていますが、「見えていないものは意識されることがない」という言葉のとおり、隠されている選択肢については、ユーザーはその存在を忘れがちです。

高い視認性はディスカバラビリティを高めます。目に付きやすい要素であるほど、ユーザーがその存在を知る可能性が高まります。タブバーのように選択肢を明示するナビゲーションは、選択肢を常にユーザーに意識させることができます。

ヒント 3：コンテンツと機能を論理的な順序でグループ化する

強い関連性を持つ項目同士は、論理的なグループにまとめて整理するべきです。このルールは、コンテンツにも（例：e コマースサイトの商品カテゴリ）、機能にも（例：Instagram のフィルターグループ）どちらにも適用できます。構造に論理的な順序を導入すると、ユーザーは欲しいものをより簡単に、しかも素早く見つけられるようになります。

なお、UI デザインに着手するよりも前に、ツリーテストを実施してユーザーのメンタルモデルを理解しておくことは非常に重要です。この理解は、ユーザーのニーズに合わせてコンテンツを構造化するために必要なものです。

ヒント 4：視覚的な混乱を減らす

UI デザインの通説のひとつに、「すべてを同じように発見しやすくすることは可能である」というものがあります。常に表示されていれば発見しやすくなるという考えに素直に従うなら、画面やページ上にすべての利用可能な UI 要素やコンテンツを配置することになります。しかし、実際には、すべてのオブジェクトを目立たせようとすると、ページが判読できなくなるほどに乱雑になることがあります。

ユーザーの操作の妨げになる不要な機能あるいは装飾は、視覚的な乱雑さの一番の原因です。この乱雑さは、ユーザーの作業効率を低下させるだけでなく、重要な機能の発見を困難にします。

また、ページや画面に、適切な視覚的階層があったとしても、人の注意力が持続する時間は限られており、目を通して物を認識する脳の能力にも限界があります。そのため、UI 要素に優先順位をつけて、どれが他よりも注目に値するかを判断することは常に重要です。レイアウトから不要な要素をすべて取り除けば、残った重要なコンテンツや機能を目立たせるために、視覚的な重みを加えることができるようになります。

ヒント 5：選択肢の総数を減らす

ヒックの法則によると、ユーザーは選択肢が多いほど意思決定のプロセスに時間がかかります。従って、ユーザーが多くの選択肢から選べるようにすることと、重要なものだけに絞ることの間の適切なバランスをとることが重要になります。どのような場面であれ、選択肢の数を限定することで意思決定プロセスを簡素化できます。すると、ユーザーがすべての選択肢を確認し、試すだけの余裕を（そして自信も）提供することができます。

ヒント 6：視覚的なフィードバックの提供

ここでの視覚的なフィードバックとは、ユーザーが何らかの操作を行ったときに発生する、目に見える反応のことです。ウェブページのリンク上にマウスを移動すると、リンクの色が反応して変わるのはその一例です。この小さな視覚的変化は大きな意味を持ちます。なぜならば、ユーザーの全体的な体験を向上させ、不確実性を排除する働きがあるからです。特定の要素が操作可能であるとユーザーが知り、次に起きることを理解するために、視覚的なフィードバックは有効です。

ヒント 7：普遍的な意味を持つアイコンの使用

見慣れないアイコンを操作可能な要素として使用すると、一般的に、ナビゲーションの問題を引き起こす要因になります。未知のアイコンを見たユーザーは、それが操作可能なのか、可能だとしてタップしたときに何が起こるかを予測できません。この推測するという行為には、大きな代償があります。というのは、多くの場合に、ユーザーはその選択肢を単純に見なかったことにしてしまうからです。

では、アイコンが見慣れたものかどうかを判断する方法はあるでしょうか？それはテストしてみることです。実際のユーザーや潜在的なユーザーに、その要素が何をするものだと思うか尋ねてみましょう。もし明確な答えが得られなければ、アイコンをより意味の明確な別のもの（別のアイコン、明確なラベル）と置き換えます。

ヒント 8：アニメーションでユーザーの注意を引く

人間の目は、動く要素に注目する性質を持ちます。ちょっとしたアニメーション効果は、ユーザーの視線を、特定のコンテンツや機能へ誘導できます。また、アニメーションは、オブジェクトの操作方法を説明することもできます。

ヒント 9：使用するジェスチャーに注意

ジェスチャーは隠された操作方法です。そのため、多くのディスカバラビリティの問題を引き起こす可能性があります。ユーザーが特定のジェスチャーの存在を知らない場合、それを試そうとはしないでしょう。つまり、ジェスチャーを使用する場合は、同種の製品やサービスで一般的に受け入れられているものを使い、一般的ではないパターンの新規導入は避けるべきです。

多くのユーザーにとって、ジェスチャー自体がまだ比較的新しいコンセプトであることを考慮するなら、オンボーディングの際にジェスチャーによる操作を強調して伝えることは検討の価値があります。

ヒント 10: UI 要素のサイズは適切に

デザイナーが見出しと通常のテキストに異なるスタイルを使用するのには理由があります。テキストを読むユーザーが、見出しを容易に見つけられるようにするためです。同じ戦略が UI デザインにも当てはまります。重要な要素をその他の要素よりも大きくすると、ユーザーの注意をそこに向けさせられます。

例えば、ランディングページの大きな CTA ボタンは、ユーザーに次に行うべきことと、その結果として何が起こるかを明確に伝えます。通常、大きなターゲットはページの先頭に置かれ、再発見されやすくなっています。（大きな UI 要素は、モバイルデバイスでタップしやすいため、ユーザビリティの観点からも有益です。）

ヒント 11：視覚的なアフォーダンスを提供する

ユーザーがあるオブジェクトを発見したとしても、それをどう使えばよいかはわからないかもしれません。アフォーダンスは、要素の使い方を示唆する属性です。アフォーダンスが無いと、ユーザーはそのオブジェクトの使い方を想像するしかなくなります（そして、そのまま放置する可能性が高まります）。

デザイナーは、デジタルインターフェイスに使用するオブジェクトの形状を選択する際、その形状がユーザーにどのような操作方法を伝えるかを、判断の基準に加えるべきです。例えば、「送信」というラベルの付いた長方形のオブジェクトを見た人は、「これはボタンだ」と考えるでしょう。

ヒント 12：視覚的な合図の提供

視覚的な合図は、ユーザーを特定のコンテンツや機能へ誘導するために使われます。視覚的な合図の典型的な例としては、水平方向のスクロールが可能なサイトで、ユーザーを特定の方向へと誘導するアニメーション付きの矢印があります。

おわりに

ユーザーが見つけられないものは、そのユーザーにとって存在しないも同然です。ディスカバラビリティへの注目は、それをユーザーが発見しやすくする方法を考える助けになります。デザイナーであれば、直感的なインターフェイスと体験を生み出すように心掛けるべきです。より発見しやすいインターフェイスをデザインすれば、ユーザーがコンテンツや機能に出会う可能性だけでなく、実際にそれらのコンテンツに触れたり機能を使ったりする可能性を高めることができます。

この記事は Tips to Improve Discoverability in UX（著者: Nick Babich）の抄訳です