適切なインジケータ要素を使用して、ユーザーが隠れたコンテンツを発見できるように誘導します。

天気はとても良いです、寒くもなく暑くもなく、少し眠いです。この記事を書き終えた後、私は屋上に行き、ぼんやりと見つめていました。アイコンが少し怖いと感じた方は、お気軽にコメントするか、Weiboで直接私に話しかけてください。

iOS Wow エクスペリエンスの 2 つの章を連続して更新しました。1 つはアプリケーションのコンテキストに関する章、もう 1 つは iOS の技術的な機能に関する章です。今日は気分を変えて、モバイル アプリ ビジネスは脇に置いて、Web に戻りましょう。隠しコンテンツとそれに対応するプロンプト要素の使用方法などについて、写真とテキストを添えた短い翻訳を書きます。歩く。

タブ、ドロップダウン メニュー、アコーディオン スタイルの折りたたみコントロール... プログレッシブ ディスクロージャーは、ユーザーにできるだけ多くのコンテンツを表示しながら、インターフェイスの視覚的な複雑さを効果的に軽減するのに役立ちます。

しかし、何事にも長所と短所はあります。視覚的に見えないものは、ユーザーに無視される可能性が高くなります。したがって、インターフェース要素を非表示にするだけでは不十分です。非表示の要素の存在をユーザーに認識させるために、適切な方法でプロンプトを表示する必要があります。

ユーザーの期待

ここで言及されている期待とは、サイト内で隠された要素を見つけることができるかどうかについてのユーザーの想定と予測を指します。ユーザーは、特定のコンテンツがどこかに隠されているはずだと信じている場合、積極的にそれを探すでしょう。逆に、何らかの要因の影響を受け、そのコンテンツがまったく存在しないと早まって結論付けることもあります。

ショッピング ウェブサイトでは、ほとんどのユーザーは、商品の詳細、返品および交換ポリシー、送料などの情報を入手できるし、入手できるべきだと考えています。この期待の影響を受けて、コンテンツが直接提示されていなくても、積極的にコンテンツを探すようになります。

一方、ユーザーレビュー、追加の製品写真ギャラリー、ビデオデモなどの追加コンテンツは、すべてのショッピング Web サイトの標準機能ではありません。デフォルトで表示されていない場合、サイトに慣れていないユーザーは、これらのコンテンツが存在するとは予想していないため、通常、それらを探すのにあまり時間をかけません。

ユーザーの期待は、長年の認知習慣と行動習慣に基づいています。デザイナーとして、ユーザーが隠された要素を積極的かつ主観的に探すことを保証できない場合は、視覚的なトリガーを使用して、ユーザーがより多くのコンテンツを取得するように誘導する必要があります。

トリガー表示

隠しコンテンツの存在を示すインターフェース要素は、トリガー インジケーターと呼ぶことができます。大まかに5つのカテゴリーに分けられます。

1. 方向と空間

方向インターフェース要素は、多くの場合、非表示のコンテンツを示すために使用されます。方向指示器の視覚的表現は、仮想空間における位置と動きの概念を正確に描写することができ、ユーザーの直感と一致します。

さらに、方向指示自体は通常アイコンの形になっているため、その背後にあるテキストタイトルはユーザーの目にクリックしやすくなり、隠されたコンテンツが発見される可能性がさらに高まります。

Fox のメイン ナビゲーションでは、最初の 2 つのメニュー項目はそれぞれ「メガ メニュー」の展開をトリガーします (この用語は、中国語に翻訳したくない用語です - 翻訳者 C7210 によるメモ)。トリガー インジケーターは、タイトル テキストの後にある下向きの三角形のアイコンです。これらの要素は視覚的には目立たないものですが、ユーザーがページとどのように対話するかを正しく理解するためには非常に重要です。

空間指標は方向指標と密接に関連しています。このパターンでは、通常、ユーザーに現在の場所または選択内容を思い出させるための「強調表示された」インターフェース要素があり、通常の状態で同じレベルの他のナビゲーション要素は、現在の領域にさらに発見すべきコンテンツがあることを示します。

ページング コントロールは典型的な例です。このモードを使用すると、ユーザーは、読んだコンテンツの量、現在位置、次に読むべきコンテンツの量を明確に把握できます。さらに、ナビゲーション メニューの「現在の」ステータス インジケーターとブラウザーのスクロール バーは、本質的に空間インジケーターです。

2. 比喩

比喩は非常に効果的な指導方法です。たとえば、ユーザー インターフェイスを本や雑誌に似せて設計したり、インタラクション方法によって実際の物理的効果をシミュレートしたりすることもできます。この非常に比喩的な表現形式を使用してオンライン コンテンツを配信することで、ユーザーは、実際に本を読んでいるのと同じように、現在表示されている領域の「背後」にあるものを自然に閲覧できます。

比喩的なアプローチは、確かにユーザーの直感や期待と非常に一致しています。デザイナーとして、私たちはシミュレートされたインターフェースの外観とインタラクションが実際のオブジェクトの視覚的および物理的特性を正確に反映できるようにする必要があります。ただし、テクノロジーの制限やその他の客観的な条件により、実際のオブジェクトの動作が Web ページに正確に復元されない可能性があります。デザイン プランを選択するときは、この問題を考慮する必要があります。

3. アイコン

アイコンを使用すると、トリガー インジケーターをページの他の部分から目立たせることができます。たとえば、Macy’s の「レビュー」タブで使用されている星のアイコンなどです。

アイコンなどの視覚要素により、単純で退屈なテキスト コンテンツを認識しやすくなり、ユーザーが近くにある隠れた要素を見つけやすくなります。しかし、このような行為には一定のリスクもあります。時には注目を集めすぎて、ユーザーが他の重要な情報を無視してしまうこともあります。

4. グラデーションフェード

また、トリガーインジケーターとしてアイコンなどの視覚的なインターフェース要素を使用せずに、コンテンツ自体の外観を変更することで、より多くの非表示コンテンツを示すこともできます。最も一般的な方法は、Amazon の商品説明ページで使用されているコンテンツテキストにグラデーションフェード効果を設定することです。

テキストを徐々にフェードアウトさせることは、ユーザーの注意を引き、より多くのコンテンツを探索するように促す効果的な方法です。このガイダンス効果は、「詳細を表示」テキスト リンクや関連アイコンなどの視覚的なトリガー インジケーターを使用することでさらに強化されます。

5. 短いプレゼンテーション

いわゆる短期プレゼンテーションとは、コンテンツを一定期間戦略的に表示し続けることを意味します。たとえば、ショッピング サイトの商品詳細ページでは、ページが読み込まれると、商品の説明コンテンツ全体が短時間表示されたままになり、その後アニメーションで折りたたまれ、コンテンツが最終的に消える場所に視覚的なトリガー インジケーター要素が提供されます。このようにして、ユーザーは、関連情報を取得する必要があるときに、どのコンテンツが隠されているか、どこにあるのかを明確に把握できます。もちろん、このモードを実装するには重要な前提条件があります。つまり、ユーザーはコンテンツの消失プロセスとそれに対応するアニメーション効果に気付く必要があります。

短期的なプレゼンテーションのもう 1 つの典型的な例は、カルーセルです。このモードでは、一定期間、複数のコンテンツが順番に表示されます。これにより、ユーザーはより多くのコンテンツの存在を知ることができるだけでなく、さらに重要なことに、コンテンツが「アクティブ」に表示されるため、ユーザーはインタラクティブな操作を実行しなくても完全な情報を取得できます。

ベストプラクティス

トリガー兆候の 5 つのカテゴリを全体的に見てみました。これだけだと十分ではありません。さらに重要なのは、実際の作業でこれらのトリガー インジケーターをどのように、どの程度使用するかを知ることです。なぜなら、このような要素は、多かれ少なかれ、全体的なインターフェイスに一定の視覚的なノイズをもたらし、インターフェイス全体をかなり乱雑にしてしまう可能性があるからです。プロンプトとして効果的に機能しないだけでなく、ユーザーのブラウジングや他のコンテンツや機能の使用にも影響を及ぼします。まず、実際に次の 4 つの側面を検討することをお勧めします。

非表示のコンテンツがどの程度重要か、コンバージョンの向上にどの程度役立つか、特定のタイプのユーザーに対してのみ意味があるかどうかを判断します。

このコンテンツがどのくらいの頻度で閲覧されているかを判断し、統計ツールを使用してこのコンテンツを閲覧できるユーザーの割合を確認します。

非表示のコンテンツに関するユーザーの期待を判断し、ユーザー調査を使用して、特定のインターフェースでユーザーが最も取得したい情報は何かを理解します。

最初の 3 つの側面の分析結果をまとめ、「非表示コンテンツ + トリガー表示」モデルを使用する必要があるかどうかを判断します。必要であれば、インジケーター要素の視覚表現としては、より注目を集めるカルーセルアニメーションの方が適切でしょうか。それとも、視覚効果が比較的弱いグラデーションフェードの方が適切でしょうか。

非表示のコンテンツが本当に重要である (1) が、現在のページビュー数が少なく (2)、ユーザーがそのコンテンツを見ることを期待していない (3) と判断した場合は、トリガー要素を調整して、より多くの注目を集めることができるかどうか、またはコンテンツを非表示にしない必要があるかどうかを検討する必要があります。

この記事はもともとこのサイトでまとめられたものです。転載する場合は、次のことを明記してください: この記事はBe For Webから提供されています

オリジナルの英語:

http://baymard.com/blog/trigger-indicators

翻訳者情報: c7210 - ユーザーエクスペリエンスデザインおよびフロントエンドプレーヤー。現在、Dianping.com の UED 部門で勤務。

元のタイトル: 適切なインジケータ要素を使用して、ユーザーが隠れたコンテンツを見つけられるようにする

キーワード: スルー、インジケーター、要素、ガイド、ユーザー、発見、非表示、コンテンツ、天気、非常に良い、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化