web-dev-qa-db-ja.com

最小限の(雑然としない)ビューと最小のクリック数を同時に保つための良い方法は何ですか?

編集:質問は特にデスクトップ用です。携帯電話/タブレットはありません。

私のクライアントは、ウェブアプリ(Chromeウェブストア)のデザインを望んでいます。ワイヤーフレームが最終です。しかし、問題は、彼がボタン/メニュー[下のセクションに]がユーザーの注意をそらさないようにしたいが、同時にオプションを使用するために2回クリックする必要がないことを望んでいることです(下のセクションにある多くのボタンの1つをクリックする)。 。

1つの解決策は、すべてのオプションを非表示にし、電話のハンバーガーアイコンのようにボタンクリックで表示することです。ただし、オプションを使用するには2クリックが必要になるため、お勧めしません。

その他の解決策は、ホバーに要素を表示することです。しかし、ここでも彼はカーソルを合わせて、使用するオプションを決定する必要があります。また、2ステップの選択です。

すべてのオプションを低い不透明度で表示したままにしておくと、クライアントが望まない不要なオプションが表示されます。

クライアントの要件を満たす他のソリューションはありますか?

wireframe for notes web app

1
Jcoder

私はあなたがここで完璧な解決策を見つけられないのを恐れています 視覚的な世界で)可視性とアフォーダンスを提供するには、いくつかの要素を可視に保つ必要があります。これがデスクトップソリューション(Chrome Web Store)である)である場合、ホバーに多くを表示することは良い考えです。

あなたが言及した両方のソリューションの長所と短所があります:

クリックでトリガーすると非表示の機能を発見/再発見するためにユーザーがクリックするようになります(ユーザーは「アイコンが何のために使用されたかを忘れたため、クリックするのを避けることができますか? "そして、いくつかの未知のアクションをトリガーするつもりはありません。つまり、このアイコンは考える必要があります。ユーザーがツールの目的を覚えている、またはアイコンが非常に、非常に自己定義可能で理解可能です。

ホバーでのトリガーは異なります。良い点は、ユーザーが拡張オプションを誤ってトリガーすることがあり、そこに何があるかを思い出させることです。しかし、同時に、これは煩わしくなりすぎ、最終的にユーザーが拡張機能をアンインストールすることになるため、適切なアプローチが必要です。ただし、ユーザーがアクセスしているWebサイトの内容に干渉することはできず、Webサイトのユーザーエクスペリエンスが制限されます。

したがって、最初のトリガーが配置される場所を適切に計画する必要があります。また、オプションで、ユーザーにこの位置をカスタマイズさせることもできます。ここで私のお気に入りの例の1つはJing(---(http://www.techsmith.com/jing.html )です。この場合、ホバースポットが画面の側面に接着されていますが、その位置はカスタマイズすることができます(ユーザーはそれをドラッグして、画面のさまざまな場所に接着できます。Windowsのインターフェイスの最上部を使用するChromeを除き、最適な場所は画面の最上部です(メインの真上にあります)アプリケーションウィンドウのコンテンツ。タイトルバーのすぐ上です。ただし、Chromeを使用しているため、適切な場所は現在、画面の左端です。これは、ほとんどのページが全幅ではなく、通常は中央に配置されているためです。それ以外の場合は、ドラッグミーどこか他の機能で完全に機能します。このソリューションはWebサイトにアクセスする状況で使用されるため、デフォルトの位置にして、ユーザーに通知します(拡張機能の直後のオンボーディング中)インストール)必要に応じて、別の場所にドラッグできます。

enter image description here

第二に、私は焦点を当てます:

  • 優れたアイコン。トリガースポットの目的と、それが隠している宝物を正確かつ迅速に認識します。ハンバーガーメニューは、ブラウザー全体を見ると、コンテキストに依存し、訪問したサイトに固有であり、メインサイトのナビゲーションにアクセスできるため、ここでは非常に悪い選択です。
  • ホバースポットを十分に大きくして、ユーザーがカーソルをその上に正確に置くことに集中する必要がないようにします。1つの手がかりは、ホバー領域をその視覚的インジケーターよりも大きくできることです。ただし、ウィンドウの左端全体を占めるようにしてください。ドラッグアラウンド機能を提供しても、一部のWebサイトが下で使用できなくなる可能性があります。

もう1つは、ソリューションがコンテンツコンテキストの場合、コンテキストポップアップメニューを表示するなど、少し異なる方法をとることがあります。テキストを選択した後(参照としてDiigo拡張子を確認できます)。

1
Dominik Oslizlo

クライアントは、メニューが邪魔になるべきではないと言っています。これは、メニューが表示されないことを意味する必要はありません。

コンテンツがメニューボタンよりも視覚的に強調されていることを確認できます。目はボタンではなく、コンテンツによってすぐに描かれるべきです。ユーザーは、メニューのようなものを探し回ったときにのみ、それらに気づきます。

これを行う方法は、コンテンツが何であるか、およびどのように「注意を引く」かによって異なります。多くのWebショップには、上部または下部のメニューバーが灰色/プレーンテキスト( これなど )で表示されています。このような何かが役立つかもしれません。

1
Franchesca

1つの提案は、2番目のソリューションのようなものになります。ユーザーがカーソルを画面の下部に移動するまで、下部を非表示のままにします。たとえば、カーソルが画面の下位30%、または下位20%に到達したときなど、可視性をトリガーする高さを試すことができます。これにより、ハンバーガーメニューをクリックしなくてもメニューが表示されます。そして、特定の要素の上にホバーすることなく。技術的には2段階のプロセスですが、トリガー領域に選択した高さに応じて、「1.5段階のプロセス」になります。 enter image description here

もちろん、この領域を大きくしすぎると、ユーザーを苛立たせる(そして気を散らす!)可能性があるため、最初に実験を行います。

0
user1261104

ワイヤーフレームとしては、モバイル向けのデザインのように見えます。ホバー状態は(現時点では)通常のタッチ機能ではないことに注意してください。

ゴーストボタンを使用できます。通常のボタンのようにユーザーの注意をそらすことはなく、ホバーを使用してボタンを表示する必要もありません。

http://www.onextrapixel.com/2014/04/28/ghost-buttons-the-brand-new-design-trend/

enter image description here

0
Bluewater