web-dev-qa-db-ja.com

ウェブサイトの最初の訪問のヘルプ

私のウェブサイトでは、新しい訪問者がすぐに見て理解できるようにしたいトップメニュー機能があります。たぶん訪問者の10%だけがそれを使用するでしょう(それがトップメニューより大きなスペースに値しない理由です)、しかし私はこれらの10%がこの機能をすぐに理解することを確認したいと思います。

私はについてのアイデアを探しています:

  • このオプションの存在を強調する方法

  • 再訪問者がこのメッセージに悩まされるのを防ぐ方法(たぶんCookieを使用して、新規/再訪問者かどうかを検出しますか?)

(品質が悪い)例:

enter image description here

注:これはメタ質問ではありません。例としてサイトux.SEを使用しました。

5
Basj

答えは、スクリーンショットでポイントした場所のすぐ隣です。黄色いボタン。

メニュー項目は何か新しいものや新しいものであることを強調したい場合は、色やボーダーを追加して目立たせることができます。トップメニューの「ほんの一部」でありながら、ゴーストボタンのような感じを与えることができます。 。

それは誰の邪魔にもならないので、それも迷惑にはなりません。他のメニューより少しだけ注目されるメニュー項目になります。これは、最近のWebサイトのalotで見つけることができます。通常、これらのタイプのアイテムは通常のメニューアイテムとは多少異なるため、達成しようとしているものとまったく同じように、より強調されています。

3
MJB

オンボーディング機能について話しています。オンボーディング機能とは、1つ以上の機能にスポットライトを当てることにより、システムに新しいユーザーを紹介する機能です。スポットライトには、吹き出しなどの追加情報を含めることができます。

ただし、ユーザーがその機能を使用した後は、スポットライトは表示されなくなります。

この手法は、既存のユーザーに新しい機能を導入する場合にも役立ちます。

ところで、多くのコンピュータゲームがこの手法を使用しているため、この手法は実際にはゲーム業界から来ています。

オンボーディングの吹き出しを示すLinkedの例を次に示します。

Here is an example from Linked in

3
SteveD

onboarding テクニックと簡単なアニメーションを使用して、この要素とその重要性を示すことをお勧めします。良い例は Floating Action Button(FAB):: Transitionsの一部ですマテリアルデザイン、特にモーフとフルスクリーンのサブアイテム。 FABが別の要素にどのように変形するかがわかります。

enter image description here

(より明確なビデオのためにページにアクセスしてください、これは私が最初と最後を示すために行った簡単なアニメーションですが、本物に近いところはありません)

あなたのnavで同じことをすることができます:ページの中心にある明確な行動を促すフレーズから始めて、おそらく唯一の可視要素であり、何が何であるかを説明し、クリックすると、期待どおりに要素に変形し、ユーザーに要素を説明します常にそこにいます。このように、遊び心があり、理解しやすい概念を使用することにより、ユーザーはその要素について覚えることが非常に簡単になります。

心理学では、これはメモリインプリンティングまたはメモリフラッシュとして知られています。強力な視覚イベントを使用して脳の経路を強化する方法であり、遷移は認識に大きな役割を果たすことが証明されています要素のさまざまな状態の理由、それがなぜUX、特にオンボーディングとユーザー学習で大量に使用されるのか

0
Devin