web-dev-qa-db-ja.com

アプリメニューとして3x3 9ドットのアイコンを使用する必要がありますか?

Webが進化し続け、より複雑なアプリケーションが出現するにつれて、ユーザーがアプリケーション間をすばやく移動できるようにする必要があります。このアクションは、アプリ内に表示されるナビゲーションメニューとは異なります。問題のあるハンバーガーメニューアイコンは、小さな画面でのグローバルナビゲーションの慣例となっています。ここでは、アプリケーション間のナビゲーションについて説明します。

enter image description here

Googleはこれを使用して、ユーザーがGoogleマップ、Google Play、Googleドライブ、その他の多くのGoogleアプリケーションの間を移動できるようにします。

enter image description here

マイクロソフトはまた、これを使用して、ユーザーがアプリケーションOneDrive、Word Online、Swayおよびその他のMicrosoft Apps間を移動できるようにします。

enter image description here

しかし、同じメッセージを伝える他の方法があります。 4x4 16ドットアイコンを使用するものや、3ドット以上のメニューの拡張のように見える4ドットのものもあります。問題は、3x3 9ドットのアプリメニューアイコンを使用するかどうかです。これは、大きなプレーヤーがこのアイコンをアプリケーション間の切り替えのメタファーとして使用しているように見えるためです。

enter image description here

注:この質問はハンバーガーメニューに関するものではありません。アプリメニューの使用についてです。

42
Benny Skogberg

バーガーVSグリッド-同じまたは異なるコンテキスト?

ハンバーガーとグリッドは、まだどこにも正式化されていませんが、一般的には異なる意味を持っていると思います(少なくとも、ISOやW3標準のように広く知られているわけではありません)。

ハンバーガーメニューは通常、コンテキスト内でコンテンツをナビゲートするためのものです。 Webサイトにアクセスして、ページのさまざまなサブセクションに移動します。同じサイト、異なるテキスト/画像。または、アプリを使用していて、ファイルをロードまたは保存したい場合。それはまだあなたが作業している同じアプリです。

しかし、グリッドメニューはコンテキストの変更に関するものです。コンテンツを変更するだけでなく、完全に新しいアプリ、インターフェース、インタラクションの一種を開きます。あなたが提供した画像では、同じスイートの他のアプリにリンクしており、AndroidメニューではOSからアプリに移行しています。

リストとグリッドの分割はまだユニバーサルに近いわけではありませんが( eg Android share ))、レイアウトがどこで使用されているかについて、特定の不均衡に気づきました。そして、アイコンはそれをサポートするべきだと思います。もちろんAndroid共有では、<アイコンは、=または#のどちらかのアクションのより代表的なものですが、アイデアはわかります。


3X3 vs 4X4アイコン

3x3と4x4の両方のアイコンはユーザーによってほぼ同じように解釈されますが、青いアイコンはかなり異なり、iOSに基づく「ホーム画面」のように表示されます。

3x3グリッドには4x4よりもいくつかの利点があります。それはより単純で、より小さくすることができ、グラフィックス/アイコンのサイズによりよく一致します(8x8px対少なくとも18x18): 3x3 grid vs 4x4 gridそして、ハンバーガーの「三重」を保つので、世界のすべてのインターフェースとの一貫性が少し高くなります。したがって、デフォルトでは3x3を使用します。

ただし、メニューがデフォルトのAndroidアプリドロワー)のように4つの項目列または行(4x5、6x4など)を使用している場合、4x4グリッドを使用するのにはかなりの理由があります。実際のメニューによく似ています。

しかし、個人的には、それは私が行く限りです(つまり、5x5、6x6などはありません)。

18
PixelSnader

編集する

ハンバーガーメニューについて この記事 を読んでください。ハンバーガーメニューは機能しますが、より良い解決策がしばしばあります。 FacebookやNBCのような大企業は、それが真実であることを発見し、バーガーナビコンからTAB BARに変更しました。最高のコンバージョン率を与えるようです。複雑なナビゲーションはネストできます。

ロングバージョン:

3x3の9ドットのアイコンとハンバーガーアイコン(ナビコン)は、両方とも現在Webで最も物議を醸している技術なので、同時に説明しましょう。アイコンはモバイルデザインの実装であるため、簡単に拡張可能であり、大量の画面の不動産を節約し、統一性を意味します。それらは、大多数のWebユーザーによって認識されています。 (アイコンは30歳以上です!)。ここまでは順調ですね。

Burger icon 1981

だが

  • 使いやすさのテストは決定的ではありません

    アイコンは若い人口統計学者によって容易に認識されるとデザイナーは主張します、他の人は古い人口統計学がアイコンを認識しますが、それはウェブリテラシーがある場合に限られます。並行テストは、しばしば矛盾する結果を返します。

  • クリック数を増やします。 Ew。おそらくそれがリンクのグループのように見えるように設計されているために、ユーザーがアイコンを単一のリンクとして認識しないことは受け入れられます。ハンバーガーアイコンは、ナビゲーションに追加のアクションを追加します。特定のページに到達するのに1回クリックする必要がある場合、今では2回かかります。 *ヒント:アイコンを境界線で囲むか、背景を付けると、ボタンのような外観(変形)になり、クリック数が増えます。

Wordの「メニュー」を含めるのが最適です。

Burger menu variation conversion rates

Morten Rand-Hendriksen は、バーガーをテキストで置き換えると述べています。これによりクリック数が増えることになりますが、問題は解決しません。また、他のアイコン( Paperclip など)は使用しないでください。

  • 隠しコンテンツ。 UXの観点からは、ユーザーが実行できるアクションを見つけるためにユーザーがアクションを実行する必要はありません。ユーザーは、存在がわからないリンクを探しに行くことはありません。

TL; DR。

番号。

「「通常の」サイトが必要ですが、孫娘の電話に圧迫されています。」

アイコンは、モバイルファーストアプローチのすべての側面を心から受け入れることができないという私たちの集団的な失敗の兆候です。

解決策

OPは「より大きなプレーヤー」を指します。Facebookがこの問題をどのように解決したかを見てみましょう。

  • Facebookのアプリは、ハンバーガーアイコンをタブバーに交換したことで有名になり、その結果、コンバージョンが向上しました。
  • メッセンジャーアプリ。うん。そう?それについての大事なことは、彼らがすでにメッセージングを統合することができた完全に機能的で人気のあるアプリを彼らが既に持っていたことです。 Facebookはコンパートメント化機能を持っています。これは、複雑なアプリではなく、2つのシンプルなアプリに到達した各アプリの役割に焦点を当てることです。

区画化機能により、メニューオプションのセットが削減され、ナビコンメニューの必要性が少なくなります。

したがって、基本的には簡略化して区分化する必要があります。

注:現実は、ビジネスニーズに応じて最善の解決策が得られます。

14
RobSeg

画像自体は、メニューの形式を示しています。これらの場合、現在のWebアプリケーションで一般的なグリッドレイアウト、つまりの場合、これは通常、何らかのリストスタイルのメニューです。 4ドットは絶対にやり過ぎだと思います。3でポイントを獲得できます。

コンテンツとはほとんど関係がなく、レイアウトと関係があります。

4
insidesin

この特定のアイコンは「App Drawer Icon」として知られていると思います。私が間違っていない場合、トレンドはAndroidとBlackberry、特にNexusとSamsungの携帯電話で(初期の頃)のアプリのランチャーとして機能するアプリドロワーアイコン)以降、リストのランチャーアイコンとして採用されていますアプリ。

編集(私のコメントやその他の提案に基づいて)-アイコンのユーザビリティの基本の1つは、アイコンのユーザーの理解が以前の経験。長年にわたり、アプリドロワーアイコンはアプリランチャーとして認識されるようになりました。しかし、私はまだ認識テストを行います。また、可能であれば、テキストラベルを含めます。

3
Adit Gupta

避けたい...今のところ

なぜなら...

  • グリッドアイコンはハンバーガーアイコンと同じように非伝達的です。グリッドがアイコンのマトリックスを漠然と伝達するのと同じように、ハンバーガーはメニューリストを漠然と伝達します。どちらも、ユーザーが基礎となるメニューのUIレイアウトを知っていて、それをアイコンのデザインに正しく関連付けることができると想定しているため、伝達論的デザインの点で問題があります。

  • これらのコミュニケーションの問題により、アイコンの目的を伝えるための主要な手段として慣習と普遍性/ユビキタスを尊敬しています。しかし、アイコンは今日、ほとんど普遍的ではないため、慣習は、ユーザーがアイコンの意味を確実に理解するための信頼できる手段ではありません。

グリッドアイコンの使用が広がるにつれて、これは時間とともに変化する可能性がありますが、それは時間でしかわかりません。今のところ、グリッドの賛否両論とハンバーガーアイコンの十分に文書化された賛否両論の間に実質的な違いはありません。

2
tohster