編集:質問は特にデスクトップ用です。携帯電話/タブレットはありません。
私のクライアントは、ウェブアプリ(Chromeウェブストア)のデザインを望んでいます。ワイヤーフレームが最終です。しかし、問題は、彼がボタン/メニュー[下のセクションに]がユーザーの注意をそらさないようにしたいが、同時にオプションを使用するために2回クリックする必要がないことを望んでいることです(下のセクションにある多くのボタンの1つをクリックする)。 。
1つの解決策は、すべてのオプションを非表示にし、電話のハンバーガーアイコンのようにボタンクリックで表示することです。ただし、オプションを使用するには2クリックが必要になるため、お勧めしません。
その他の解決策は、ホバーに要素を表示することです。しかし、ここでも彼はカーソルを合わせて、使用するオプションを決定する必要があります。また、2ステップの選択です。
すべてのオプションを低い不透明度で表示したままにしておくと、クライアントが望まない不要なオプションが表示されます。
クライアントの要件を満たす他のソリューションはありますか?
私はあなたがここで完璧な解決策を見つけられないのを恐れています 視覚的な世界で)可視性とアフォーダンスを提供するには、いくつかの要素を可視に保つ必要があります。これがデスクトップソリューション(Chrome Web Store)である)である場合、ホバーに多くを表示することは良い考えです。
あなたが言及した両方のソリューションの長所と短所があります:
クリックでトリガーすると非表示の機能を発見/再発見するためにユーザーがクリックするようになります(ユーザーは「アイコンが何のために使用されたかを忘れたため、クリックするのを避けることができますか? "そして、いくつかの未知のアクションをトリガーするつもりはありません。つまり、このアイコンは考える必要があります。ユーザーがツールの目的を覚えている、またはアイコンが非常に、非常に自己定義可能で理解可能です。
ホバーでのトリガーは異なります。良い点は、ユーザーが拡張オプションを誤ってトリガーすることがあり、そこに何があるかを思い出させることです。しかし、同時に、これは煩わしくなりすぎ、最終的にユーザーが拡張機能をアンインストールすることになるため、適切なアプローチが必要です。ただし、ユーザーがアクセスしているWebサイトの内容に干渉することはできず、Webサイトのユーザーエクスペリエンスが制限されます。
したがって、最初のトリガーが配置される場所を適切に計画する必要があります。また、オプションで、ユーザーにこの位置をカスタマイズさせることもできます。ここで私のお気に入りの例の1つはJing(---(http://www.techsmith.com/jing.html )です。この場合、ホバースポットが画面の側面に接着されていますが、その位置はカスタマイズすることができます(ユーザーはそれをドラッグして、画面のさまざまな場所に接着できます。Windowsのインターフェイスの最上部を使用するChromeを除き、最適な場所は画面の最上部です(メインの真上にあります)アプリケーションウィンドウのコンテンツ。タイトルバーのすぐ上です。ただし、Chromeを使用しているため、適切な場所は現在、画面の左端です。これは、ほとんどのページが全幅ではなく、通常は中央に配置されているためです。それ以外の場合は、ドラッグミーどこか他の機能で完全に機能します。このソリューションはWebサイトにアクセスする状況で使用されるため、デフォルトの位置にして、ユーザーに通知します(拡張機能の直後のオンボーディング中)インストール)必要に応じて、別の場所にドラッグできます。
第二に、私は焦点を当てます:
もう1つは、ソリューションがコンテンツコンテキストの場合、コンテキストポップアップメニューを表示するなど、少し異なる方法をとることがあります。テキストを選択した後(参照としてDiigo拡張子を確認できます)。
クライアントは、メニューが邪魔になるべきではないと言っています。これは、メニューが表示されないことを意味する必要はありません。
コンテンツがメニューボタンよりも視覚的に強調されていることを確認できます。目はボタンではなく、コンテンツによってすぐに描かれるべきです。ユーザーは、メニューのようなものを探し回ったときにのみ、それらに気づきます。
これを行う方法は、コンテンツが何であるか、およびどのように「注意を引く」かによって異なります。多くのWebショップには、上部または下部のメニューバーが灰色/プレーンテキスト( これなど )で表示されています。このような何かが役立つかもしれません。
1つの提案は、2番目のソリューションのようなものになります。ユーザーがカーソルを画面の下部に移動するまで、下部を非表示のままにします。たとえば、カーソルが画面の下位30%、または下位20%に到達したときなど、可視性をトリガーする高さを試すことができます。これにより、ハンバーガーメニューをクリックしなくてもメニューが表示されます。そして、特定の要素の上にホバーすることなく。技術的には2段階のプロセスですが、トリガー領域に選択した高さに応じて、「1.5段階のプロセス」になります。
もちろん、この領域を大きくしすぎると、ユーザーを苛立たせる(そして気を散らす!)可能性があるため、最初に実験を行います。
ワイヤーフレームとしては、モバイル向けのデザインのように見えます。ホバー状態は(現時点では)通常のタッチ機能ではないことに注意してください。
ゴーストボタンを使用できます。通常のボタンのようにユーザーの注意をそらすことはなく、ホバーを使用してボタンを表示する必要もありません。
http://www.onextrapixel.com/2014/04/28/ghost-buttons-the-brand-new-design-trend/