web-dev-qa-db-ja.com

コンテンツを短縮するためのツールチップ

私の仕事ではUXの専門家はいませんが、同僚との毎日の議論のほとんどはユーザーエクスペリエンス/インタラクションに関するものであるため、イライラすることがあります。

現在、ウェブサイト上の(カスタム)ツールチップ/バルーンに関する議論があります。コンセプトは「コンテンツが多すぎる」ので、彼らはそれを短くして、情報アイコンをツールチップでその後ろに配置しようとします。ツールチップには(おそらく)多くの情報が含まれます。このようなツールチップを使用して、画像などのハードウェアの仕様を表示するのを見てきました。

コンテンツを最小限に抑える理由は、コンテンツが多すぎて、営業担当者が「売り売り」ボタンに集中したいと考えているためです。

私の意見では、ツールチップはより多くの情報が本当に必要なフォーム/入力要素にのみ使用する必要があります。ツールチップの情報は短く、説明的で、ラベルが十分に明確でない限り、相互作用(リンクなど)を必要としない必要があります。

さらに、売上主導のテキストの後に小さなアイコンの後ろに重要なデータのほとんどすべてを隠すと、ユーザーの信頼が少し損なわれる可能性があると思います。

ですから、本当のUXの人々がこの問題/「解決策」についてどう思うか聞いてみたいです。

これは基本的に彼らが私に彼らのために作成するように求めているものです: Example usage

(補足として、ウェブサイトをtouch-friendlyと、このような小さなアイコンは非現実的なタッチターゲットです)。

2
CharlesLeaf

そのような場合は、アコーディオンスタイルのインターフェイスを使用することを検討します。ここで、概要の販売コピーは見出し/ボタンのようなものであり、そのアイテムをクリックするとコンテンツを展開できます。

プラス記号などでインターフェースを明確にし、拡張できることを示します。この問題は、FAQシステムによってかなり広く解決されています。

これを例にとります(ただし、おそらくプラス記号のコントラストをより良くします)。

FAQ Page with Expandables

インタラクティブサイトへのリンクは次のとおりです。

https://www.updater.com/faqs

1
James Thompson

情報がツールチップの背後に隠れている可能性がある場合、それはまったく関連がありますか?

インタラクティブな要素の背後に情報を隠し始めると、直面する新しい障壁があります。これがデスクトップブラウザーのホバーで機能する場合、これは電話でクリックする必要がありますが、電話でツールチップを表示すると、閉じるまで行動を促すフレーズが完全に隠れてしまうことがあります。これは、そもそもツールチップを作成するポイントを無効にし、CTAをより普及させます。

また、これらのCTAおよび情報コンテンツが表示される場所を再配置することも検討する必要があります。価格表は、CTAボタンの下に詳細を表示する良い例です。

enter image description here

これにより、上部で「売り」を行い、その下のユーザーに通知できます。価格表では、詳細の下に同じCTAボタンも配置されているため、ユーザーは詳細を読む前または読んだ後に「サインアップ」または「購入」に簡単にアクセスできます。

1
ckaufman

コメントから、製品の2つのバリエーションを提供する必要があることを理解しました。この側面と、それがどのようにサポートされるかを検討します。

  • バリエーションは非常に似ていますが、価格が大幅に異なります。

  • それらは非常に似ているため、直接比較すると、より高い価格を支払う理由はあまりありません。

ただし、両方のバリアントを販売できるとまだ想定しています。つまり、次の2種類の顧客がいると想定します。

  • 「通常の顧客」-低価格で快適であると期待している
  • より高い価格を支払うことをいとわない可能性が高い、ある種の高度な顧客

それはかなり可能です。たとえば、製品は2つのコンテキストで提供される可能性があり、一方は他方よりも高価格の製品に関連しています。または、それは単に消費者および企業の顧客である可能性があります。

必要なのは、2つの異なる「製品ID」を提供することです。
つまり、2つの異なるWebサイト、ページスタイル、さらには異なるドメイン名を使用して、オファーを完全に分離する必要があります。

このようにして、両方のグループに独自に理由を説明することができ、違いが小さいことは無関係になります。

一部の1つのグループにのみ関連するため、処理する必要のあるコンテンツの量は、バリアントごとに少なくなることを願っています。

0
Volker Siegel

私もツールチップを残して入力を形成し、これらのようなリストを展開可能/折りたたみ可能にするか、別のページに完全にリンクします。

0

VibrantInfolinks のようなサンプル技術としてのインテキスト広告を見てください。通常の下線の付いたリンクとは異なる種類のリンクを使用できます。点線の下線または二重下線。したがって、正確にユーザーに何を追加するかを正確に伝えることができます。このリンクをクリックするか、ホバリングすると、ポップアップウィンドウがアクティブになり、技術、マーケティングなど、必要なあらゆる種類の追加情報が表示されます。

0
Serg

ウェブサイトをタッチフレンドリーにする必要があるとおっしゃいました。コンテンツが多すぎる場合は、ツールチップを使用することはまったく好ましくありません。ツールチップに表示するコンテンツの種類に応じて、次のオプションを使用できます。

ポップオーバー

折りたたみ

また、ポップオーバー自体にインタラクティブ要素(CTA)がほとんどなくても問題はありません。ボタンやリンクに似ています。それらが一目でユーザーにとってあまり重要ではないことを確認してください。

コンテンツとコンテキストについてさらに洞察を提供できる場合は、さらに役立ちます。

0