web-dev-qa-db-ja.com

ホバーの円形コンテキストメニュー

デスクトップアプリケーションのマウス中心のユーザーインターフェイスに取り組んでいます。対象読者は、コンピュータに詳しい人です。

ユーザーインターフェイスの主な要素は、ステータスインジケーターを兼ねる円形のボタンです。それを押すと、タブ付きのコントロールが表示されます。タブを削除して、ユーザーが最初のクリックですぐに選択できるようにしたいと思います。

enter image description here

UIを最小限に抑え、目立たないようにすることは最優先事項であり、マウスクリックの削減は2番目の優先事項です。

計画されたデザインで、特定のインタラクションを起動する特別なボタンを追加します(次のステップにタブがないようにします)。これらのボタンは、マウスカーソルが近くにない限り非表示になります。

enter image description here

ボタンを非表示にする代わりに無効にすることを求めるほとんどのUXガイドラインに照らして、ボタンを非表示にすることを正当化する私の思考プロセスを批評してほしい:

アフォーダンス

  • マウスがメインボタンの約1インチ以内に入ると、追加のボタンが表示されます
  • ユーザーがツールを使用して何かをしたい場合は、キーボードショートカットを使用するか、メインアイコン(追加のボタンを見つける場所)の上にマウスを移動する必要があります。
  • メインアイコンはステータスインジケータのままですが、メインアイコンにカーソルを合わせると、デフォルトのインタラクションが表示されます(追加のボタンの1つから利用可能)。クリックすると、この相互作用が呼び出されます

マッスルメモリ

  • 追加のボタンは、メインアイコンに対して常に同じ位置にあります

タッチ

  • 最初のタッチはマウスホバーのように機能します。マウスクリックのような2回目のタッチ
  • タッチ操作が検出されると、アイコンのサイズが大きくなります

インタラクションごとに追加のボタンが表示されるため、アフォーダンスは抑制されていないと思いますか?

他に注意すべきことはありますか?

2

アフォーダンス

最も簡単な言葉で言えば、アフォーダンスは次のように見なされます。

何かの知覚は可能な相互作用を示唆します。

元の(アフォーダンス)の意味でも、修正された(知覚されたアフォーダンス)の意味でも、これはドンノーマンのアフォーダンスとはあまり関係ありません。

段階的開示

ここで提案するのは、漸進的開示の形式です(Lidwell、W.、Holden、K.、Butler、J.、2010.Universal Principles of Design 。Rockport、Beverly、Mass。):

必要な情報または要求された情報のみが常に表示される、情報の複雑さを管理するための戦略。

また、サブメニューやドロップダウンとは少し異なります。

A dropdown

Google Inboxは提案したパターンと同じですが、赤いボタンの上にあるオプションはホバーにのみ表示されます。

A screenshot of Google's inbox interface

つまり、ボタンは再生ボタンをクリックしたときにのみ表示されるという事実に関しては、特にアフォーダンスに関連する問題ではなく、問題を確認できません。

2
Izhaki

オプションを '右クリック'で表示することができます。画面を横切って特定の領域にマウスを移動するよりもクリックがはるかに速いため、多くのソフトウェアがメニューと右クリックの両方でコントロールを持っているのはなぜですか。

enter image description here

別の例としては、特定のアクションの後にのみ表示される特定のコントロールがあるMS Wordがあります。物をドキュメントにコピーする:

enter image description here

同じロジックを使用して、(質問の例のように)制御可能な項目が強調表示されている場合にのみコントロールを提供し、カーソルが常にある場所の近くに表示できます。

要約:(イジャキが述べたように)ホバーのコントロールは問題ありませんが、非表示のメニューについて事前の知識が少なくて済む他の方法もあります。その場で必要な/利用可能なときに表示されるMS Wordのようなコントロール。それ以外の場合は、保存するさまざまな右クリックメニューで画面の特定の領域をターゲットにする必要があります。ただし、最初にそれらについて知る必要があります(例やGoogle Inboxと同様)。

2
Chris