スマホアプリのハンバーガーメニューの内容を想像できるケースとできないケース
U-Site で「モバイルでのページ遷移を支援しよう（ハンバーガーメニューがあったとしても）」という記事が公開されていました。
モバイルサイトやスマホアプリでよく見かける三本線のメニューボタンのことをハンバーガーメニューと呼ぶのですが、そのメニューを見つけられない、もしくは使おうとしないユーザーのことを考慮して設計しようという趣旨のものです。
そういえば最近何度かハンバーガーメニューの裏にどういったナビゲーションが隠れているのか想像がつかないことがありました。なぜ想像がつかなかったのか、その理由は次のようなものだと考えています。
- PC 向けサイトを利用したことがない
- PC 向けサイトのサイドメニューと異なるメニューになっている
想像がつくケース
まず最初に想像がついた例から紹介すると、例えば Gmail の iPhone アプリは PC 向け表示のサイドメニューと同様のメニューがハンバーガーメニューに入っているので容易に想像できます。
↑ PC 向けのサイドメニュー。
↑ iPhone アプリのハンバーガーメニュー。
他には例えば Feedly を使っていますが、こちらも同様にハンバーガーメニューの中身は PC 版と同じもので、すんなり使えます。
↑ PC 向けのサイドメニュー。
↑ iPhone アプリのハンバーガーメニュー。
想像がつかないケース
一方で、パソコンでほとんど利用したことがない JOYSOUND のアプリは想像ができませんでした。しかも PC 向けのメニューと内容が異なっていて戸惑います。
↑ PC 向けのサイドメニュー。
↑ iPhone アプリのハンバーガーメニュー。
mixi の場合は PC 向けサイトの画面上にあるヘッダーメニューがハンバーガーメニューの中にもあるだろうと思いきや、
↑ 「マイミクリスト」や「最近使ったもの」がファーストビューに並んでいて戸惑います。
ただ、虫眼鏡アイコンがついているので検索があるんだなということだけは予測できます。
考察
PC 向けサイトのサイドメニューは常に表示されています。常に表示されていれば常に目に入ることになるので、何度かサイトを利用していれば覚えてしまいます。しかしハンバーガーメニューの中身は常に目に入るものではないのでユーザーの学習回数も自ずと減少し、なかなか記憶に定着しづらいと考えられます。
モバイル向けサイトやアプリを作る側は、作っている間に何度もハンバーガーメニューの中身を見ることになります。そのためそういった戸惑いに気づきにくいかもしれません。
結論としては、
- PC 向けサイトでの利用が主でないアプリの場合、ハンバーガーメニューの中に存在するナビゲーションは基本的に想像できない。
- PC 向けサイトの利用が主であっても、サイドメニューと同様のメニューでなければ戸惑う。
と考えて設計しておいたほうがいいのではないかなと個人的には思います。
著者について
コメントを残す