web-dev-qa-db-ja.com

ユーザーテストで、モバイルのメインメニューの「3つの水平バー」が一般的に理解されていることがわかりましたか?

「3本の横線」または「ハンバーガーアイコン」は、特にモバイルサイトでは、「メインメニュー」ボタンの規則になりつつあるようです。

"Three horizontal bars" menu on Bootstrap site on mobile

この規則のユーザーテストを行った人、またはA/Bテストの結果を受け取った人はいますか?(つまり、「メニュー」という単語を使用した場合と比較して、直帰率が増加していますか?)

メインメニューにこのアイコンを備えたワイヤーフレームを使用して、簡単なユーザーテストをいくつか行いました。 6人に3人がそれを手に入れて使った。他の人はしませんでした。

特に一人は、規約について知らなかったり、ロゴがホームページにリンクすることを知らなかったため、「トップに戻る」(つまり、サイトのトップレベルからナビゲーションを再開する)のに多くの問題を抱えていました。

人口統計によって異なると思います-モバイルのFacebookユーザーはおそらくそれを知っています。

誰かが共有できる調査結果を得ましたか?

50
Dan

Exis WebのJames Fosterがハンバーガーアイコンに対して興味深いA/Bテストを行いました

モバイルでのテストでは、アイコンに境界線を付けた場合(ボタンのように見えるため)に、それほど重要ではありませんが、違いが見られました。

enter image description here

おそらくもっとおもしろいことに、A/Bテストは、デスクトップユーザーがアイコンを理解していないことをより明確に示しているようです

青いボタン内のコンテンツの4つのバリエーションをテストしました。

(ベースライン)単語「MENU」単語「MORE」ハンバーガーアイコン+「MENU」ハンバーガーアイコン+「MORE」結果ははるかに重要でした。

テスト2、3、および4のパフォーマンスははるかに悪い(それぞれ18%、31%、および43%悪い)。

そして興味深いことに、アイコン+ラベルは、単なるラベルよりもパフォーマンスが劣っています(通常、デスクトップページ/アプリに統合するのは非常に簡単です)。そのため、アイコンがボタンのように見える限り、モバイルではアイコンは実用的に機能します。デスクトップでは、まったく使用しないことをお勧めします

James Fosterが次に2番目のABテストを実施しました 、今度はWordメニューとボタンの境界線およびその組み合わせと組み合わせて使用​​した場合のハンバーガーメニューのテスト方法を調べます。

enter image description here

これと私の以前のABテストに基づいて、フラットハンバーガーアイコンはレスポンシブなWebサイトでは理想的ではない場合があります(これはアプリではなくWebサイトであることを忘れないでください)。 Word MENUを使用する(そしてボタンのように見えるようにする)と、訪問者にとってより役立つでしょう。

これは、ユーザーがハンバーガー/サンドイッチを理解していないことを意味するわけではありません。WordMENUがより注意を引く可能性があります。

NNGroup によって最近公開された調査結果もサポートします

明確なラベルは、ユーザーがより迅速に意思決定を行うのに役立ちます。これにより、次に何が起こるかについての良い情報の香りが得られます。ラベルは、3行のメニューアイコン(または「ハンバーガー」アイコン)などの新しいアイコンにも使用する必要があります...

...ユーザーは、3行メニューアイコンなどの新しいアイコンにまだ慣れていません

23
Ben Brocka

A/Bテストから( keiwes によって投稿された article に基づいて)次のように推測できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

ハンバーグアイコンの機能を正しく識別することとユーザーの年齢との間には相関関係があるようです。

したがって、ユーザビリティの観点から、ユーザーの大半が自分自身であるかどうかを質問する必要があります。プロポーションは次のようになります。

mockup

bmmlソースをダウンロード

テストに苦労したユーザーが他のユーザーよりも古いことを確認することにより、テストに基づいてこの仮定が正しいかどうかを確認することは興味深いでしょう。

私の頭に浮かぶもう1つのことは、ハンバーガーアイコンは(少なくとも従来のメニューと比較して)少し新しいので、ハンバーガーアイコンを知っている人はメニューを知っているが、その逆ではないということです。つまり、ユーザーの実際の分布は次のようになります。

mockup

bmmlソースをダウンロード

安全にプレイしたい場合は、メニューに移動してください。ハンバーガーにトレンディになりたい場合(高齢者が混乱する可能性があるリスクがあります)。ターゲットオーディエンスを特定してセグメント化するまで、推測するだけです。

*前述の記事は、ハンバーガーメニューに慣れていない古いユーザーを示唆していますが、テクノロジーの知識や経験、アーリーアダプターや遅刻など、他の要因を特定するためのさらなる分析も必要です。

32
edgarator

私の会社は高齢者向けですので、ハンバーガーのアイコンと一緒にテキストを含めました。これは、以前の人口と同様の結果が得られた記事です: http://mobile.smashingmagazine.com/2013/09/11/responsive-navigation-on-complex-websites/

Googleは、慣例を「何かが通常行われる方法、特に特定の領域またはアクティビティ内で行われる方法」と定義しています。この定義では、ハンバーガーアイコンが慣例であると言えますが、これはすべてのケースで機能することを意味するものではありません。テスターは、実際にアプリケーションを使用するユーザーを代表していますか?参加者の半分だけがそれを理解しました。つまり、改善が必要です。

これはUX.SEに関する別の質問です。ここで、トップの回答はハンバーガーメニューが慣習であると示しました: モバイルでナビゲーションメニューを最もよく示す方法

ハンバーガーメニューの使いやすさを支援するいくつかの設計ガイドライン: http://www.getelastic.com/dont-make-these-mobile-menu-mistakes/

22
Keiwes

私もハンバーガーメニューアイコンに関するA/Bテスト結果を確認したいと思います。ただし、注意すべき点の1つは、GoogleとFacebookの両方がこのアイコンを使用しており、このアイコンがますます一般的になっていることです。 GoogleとFacebookはインターネット上で最大の企業の2つであるため、ユーザーのテストなしにアイコンを使用するのは難しいと思います。しかし、Kewesは間違いなく何かに取り組んでいると思います。あなたは本当にあなたのターゲット人口統計を知る必要があります。そして、実装は実際にハンバーガースタイルのナビゲーションを使用することの影響/直感性を決定します。メニューアイコンがクリック可能であることをユーザーに確実に知らせるために、いくつかのテクニック(Kewesリンクの1つにリストされている)に従うことが重要です。しかし、ますます多くの企業がこのアイコンを使い始めるにつれて、特にモバイルの世界がどんどん大きくなっていくにつれて、このアイコンが一般的に採用されている基準になると思います(まだそうでない場合)。グーグル、私はテクノロジーの世界で最も影響力のある会社であり、彼らは文字通りテクノロジーの基準を設定したと主張します。したがって、Googleがこのアイコンを使用して「メニュー」を表す場合は、複数の製品にわたって、これで十分です。

Googleモバイル:

Google

モバイルGmail:

Gmail

Facebookモバイル:

Facebook

Facebookモバイル

7
circuitry

「すべての人ではなく、通常の」ユーザーによって理解されている、公平な声明: https://medium.com/design-ux/bcc8e0257bc8 。しかし、残念ながら今のところオンラインのどこにも難しい事実はありません。

記事から:

このアイコンは、そのようなインターフェースの通常のユーザーには完全に理解されているようですが、完全に誰にでも理解されているかどうかはわかりません。トイレのピクトグラムのように、ある程度の説明がなければ理解できない標準を作成していますか?私には答えがありません。ISO標準で使用されているものと同様に徹底的にテストする必要がありますが、Webに適合しています。テストが既に完了している場合は、それらが公開されていることを確認してください。

3
IronBasset

Booking.comは、ハンバーガーメニューに関する独自のA/Bテストの新しい結果を公開しました。

彼らはすでにハンバーガーメニューを使用しており、テストではこれを明示的に[メニュー]と記載した新しいアイコンに置き換えました。

私たちはユーザーベース全体に対してその実験を行い、このUI要素の卓越性と全知性を考えると、この変更が世界中の何百万ものお客様に、サポートされているすべての言語で、そして世界中で公開されるのにそれほど時間はかかりませんでした多数のデバイス。

興味深いことに、この変更はユーザーの行動にあまり影響を与えませんでした。

私たちの実験では、アイコンをWordの「メニュー」に変更しても、ユーザーの行動に大きな影響はありませんでした。非常に大きなユーザーベースで、特にBooking.comユーザーの場合、ハンバーガーアイコンはより説明的なバージョンと同じように機能すると非常に確信を持って述べることができます。

したがって、この特定の環境では、ハンバーガーメニューは非常によく理解されているようです。

出典: http://blog.booking.com/hamburger-menu.html

2
stefan.s

それだけを使用しているのはWebサイトだけではなく、Facebook、Chromeなどの大規模なアプリケーション、および多くのGoogle製品がすべて、ほとんどの作業に使用しています。 SmashingMagazineの担当者がかなり良い記事を書いているので、読んでみることをお勧めします。

アイコンを使用して非表示のメニューを表すレスポンシブなWebサイトの大部分は、3つの横縞を採用しています。これには、スターバックスなどの注目度の高いWebサイトや、FacebookやPathなどの人気のあるアプリが含まれます。アイコン自体は正確なオブジェクトやメソッドを明確に表していないため、その能力の一部はその多様性にあります。つまり、特定のパターンを優先することなく、さまざまなナビゲーションベースのデザインパターンに適用できます。アイコンが新しい標準になりつつあるため、形が曖昧であってもメッセージが損なわれることはありません。私たちの日常の言語で現れる新しい用語のように、私たちはそれが何を意味するかを知っています。そして、注目度の高いウェブサイトがその背後に重荷を投げているので、時間の経過とともに平均的なユーザーになります。

http://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/ からの引用

彼らはさらに、アイコンを使用している大企業のさまざまな例を示し、それは広く適応されています。

私はこの他のSE質問も参照したいと思います。 AppleまたはGoogleの3つの横棒のアイコンの意味はより一般的ですか?

これは2年近く前に問題を提起し、それ以来、さらに多くのWebサイトやアプリケーションがその背後に重きを置き、同じもの(または類似のもの)にすべてを使用しています。

確かに人々はメニューとしてそれを受け入れていると思いますが、あなたのウェブサイトが古い世代(モバイルアプリケーションの使用に慣れておらず、アイコンを見たことがないかもしれない世代)に対応している場合でも、テキストをスローしても害はありません)。

1
Mike

最後に、誰かが実際にハンバーガーアイコンとWordの「メニュー」でA/Bテストを行いました。彼の記事が非常に人気があることに気付いたので、彼はさらに広範なユーザーテストを行うことを計画しています。

http://exisweb.net/mobile-menu-icons

また、関連するTwitterタイムラインは次のとおりです。 https://Twitter.com/mrjoe/timelines/428584785347231747

そしてここ: http://www.exquisitetweets.com/collection/lukew/2919

上記の調査からの結論:
35歳以上の人はハンバーガーアイコンを知らないようです。結果は人口統計学的値の影響を受けます。研究者は、ハンバーガーアイコンに「メニュー」という単語を追加することを推奨しています。

1

3つのバーはますます一般的であるため、@が電子メールで使用できるように、標準の記号になります。

あなたのアプリケーションではメニューは右側にありますが、私が使用するアプリケーションの3つのバーは左側にありますAndroid記号の右側に3つのドットがあります(個人的に私はcogを好みました)

ナビゲーションは常に左側にありますので、これはすぐに役立つので、これを念頭に置いて再テストする価値があると思います。

このサイトを含むいくつかの良い記事があります:

モバイルのナビゲーションメニューを最もよく示す方法

他のいくつかを読み通したことが、読むのに最適な記事です。

これは、Androidサイトでは「ナビゲーションドロー」と呼ばれています。

http://developer.Android.com/training/implementing-navigation/nav-drawer.html

アイコンにCSSが必要な場合は、こちらをご覧ください。

http://css-tricks.com/three-line-menu-navicon/

0
indofraiser

アイコンがビジーな環境では、他のアイコンと簡単に区別できるため、3つのバーのアイコンではなく3つのドットを使用することをお勧めします。私はユーザーが3バーアイコンをテストしたことはありませんが、Googleのような企業がこれを使用するようになったことで、慣例になりつつあると感じています。

0
Dhananjay Garg