web-dev-qa-db-ja.com

ハンバーガーアイコン-メニューまたはドラッグアフォーダンス?

このアイコンの出現には意味の違いがあるようです:

enter image description here


一部の場合は「メニュー」を意味し、他の場合は「ドラッグ可能なアイテム」を表します(たとえば、GMailで使用される小さなドットよりも優先されます)。

文脈だけでその意味を明確にするのに十分ですか?

21
Phil Parry

コンテキストは重要であり、おそらくlearnが各コンテキストに対して何を意味するかを確認する必要があります。メニューだとわかっていても、どんなメニューなのかはわかりません。 Chromeを使用してください。 Windowsではハンバーガーしかありませんが、Mac OSでは、すべてのMacアプリと同様に、トップのメインメニューもあります。ハンバーガーはそれがどんな種類のメニューであるかを述べていません。

ドラッグ可能なハンドルアイコンは、スクロールバーのケースのほかに、リストを再配置するためにも一般的です。たとえば、一部のiOSアプリでリストの[編集]を押すと、削除アイコンが片側に表示され、「ドラッグ可能なハンドル」 "もう一方のアイコン。これは、各行にメニューがあることを意味しないとはどういう意味ですか?知って、あなたはしようとする必要があります。

enter image description here

これは、物理的でドラッグ可能なスイッチにグリップがよくなるように一連の線があることが多いためです。

enter image description here

ボタンアイコンとして、3行には多くの意味があると思います。それはそのような単純なシンボルであり、リストまたは(テキストの)行のセットのように見えます。

列、リスト、および両端揃えテキストのテキスト編集では、3行も使用されます。左揃え。おそらくもっと多くの用途があります。

メニューアイコンとしての使用は、多くの場合、メニューも数行のテキストであることに由来します。代わりにメニューがグリッドの場合、メニューボタンもグリッドのように見える場合があります。

enter image description here

このGoogleグリッドメニューは、ページ上部の水平メニューバーの形式でした。

ハンバーガーの新しいメニューの表現は、ウィンドウの上部に常駐していた従来の「メインメニュー」を非表示にする傾向に由来する、このようなボタンの必要性から来ています。小さいデバイス画面には、すべてのメニューオプションを表示するスペースがありません。デザインは、「画面上で簡単に利用できる」および「最小クリック数」から離れ、より明確になり、画面上の主なものにより重点が置かれます。メニューに完全に依存していないアプリケーションでは、実際にメニューオプションを使用しているユーザーは、画面上で直接、ボタンの後ろにいるユーザーを見つけることができます。

あなたの質問に答えるには:

  • 3本の線は、ドラッグ可能なハンドルとして解釈されるように、ドラッグするのに意味のある場所に配置する必要があります。
  • 画面にメニューがないアプリケーションでは、メニューがそのボタンの後ろにある可能性があります。
  • テキストエディターで、左揃えアイコンの横のボタンに表示される場合、それはおそらくスクロールバーではありません。 ;) 等々。

そのため、これが曖昧であることが判明したアプリを見つけて構築することは困難です。もちろん例は大歓迎です!

17
JOG

問題の核心は、単にこれらが2つの意味的に異なるアイコン、つまり

グラブハンドルは、親指または指の摩擦領域を複製する記号です

ハンバーガーメニューは、メニュー項目のリストを表す記号です

これら2つのアイコンが誤って同じシンボルに落ちました。それらが同じように見えるという事実は、純粋に偶発的であり、不必要であり、UXにとってはむしろ不幸です。

重要な質問アイコンを明確にするためにコンテキストのみに依存する十分な理由はありますか?いいえ。ここでは、別個のアイコンであるドラッグハンドルの例を示します。

enter image description here

8
Jason A.

ドラッグ可能な要素と見なされるには、スクロールバーのような垂直バーの中央にある必要があります。

scrollbar

6
Sara

アフォーダンステスト

答える前に、質問をしたいと思います(あなたがMacユーザーでないことを願っています)。このウィンドウの右上に表示される2つの矢印をどのように操作しますか?

a screenshot of the fullscreen icon

アイコンがサイズ変更カーソルを思い出させるという事実と、アイコンがボタン内に含まれていないという事実は、多くの人々にそれをドラッグさせます。

Button Affordanceはそのアイコンよりも優れています

アイコンOriginは、ボタンを押したときに開く「列ビュー」と視覚的に類似していると確信しています(以下を参照)。

ただし、Saraが述べたように、ほとんどの人はスクロールバーやその他のドラッグ可能なアイテムの行に慣れています。

アフォーダンスは「オブジェクトまたは環境の物理的特性がその機能に影響を与えるプロパティ」と定義されているため、ハンバーガーアイコンが人気になる前のアフォーダンスはドラッグ可能なアイテムであると主張できます。

ただし、アイコンが存在するボタンは、これがボタンのアイコンにすぎず、ボタンのアフォーダンスがクリックであることを人々に示します(UI設計ソフトウェアの外では、ボタンはほとんどありません)ドラッグ)。つまり、アフォーダンスはクリック可能なアイテムです。ボタンからボタンの境界を削除する場合、これは根本的に変わります。アイコンはドラッグできるようになります。

An Image showing the column view that opens when one clicks the hamburger icon on the iphone facebook app

これらのアイコンがドラッグを許容するように設計されている場合、アイコンは次のようになります(これは、直接操作を使用して、より優れた設計であると主張できます)。

enter image description here

6
Izhaki

ハンバーガーメニューを使用したコンバージョン率に関する調査は次のとおりです。 http://conversionxl.com/testing-hamburger-icon-revenue/

Luke wroblewskiが以前に同じ結果を述べたと思います。

0