各コンテンツへの誘導要素を担うグローバルメニュー。
ユーザーを目的のページに導くために重要なサイトの案内要素の一つですね。
ヘッダーフッターなどで固定で配置されていたり、なんてことが多いです。
しかし、スマートフォンなどでは固定メニューは幅を取ります。
それを解決するために生み出されたのが「ハンバーガメニュー」という概念。
スマートフォンでサイトを閲覧する機会の多いかたは馴染み深いのではないでしょうか。
タップするとメニューが出てくる、三本線のアイコンのことです。
このハンバーガーメニュー、デザインするときにスマートフォンサイトではほぼこいつを使って
メニューを省略しています…が、
ハンバーガーメニューって、UI性能としてはどうなの？
と、WEB上では議論の対象にもなっています。
よく考えたら三本線のアイコンがメニューを表す、なんてことは正直前知識が全くなければ理解できなくても仕方ない気が
しますよね？
とはいえ今では結構な数のサイトがハンバーガーメニューを使用している時代。
ハンバーガーメニューが多くのウェブサイトで導入されポピュラーになった結果、
ユーザーも「ハンバーガーメニューのアイコンをタップするとメニューが出てくる」ということを
理解している層が多いため、ハンバーガーメニュー＝UI性能が著しく低く誰にも気づいてもらえない
…なんてことはあまりないかと思います。
しかしなぜUIとしてよくないと言われるのか。
これはメニューとして気づいてもらえない…という致命的な理由よりも、
ユーザーがメニューを”隠されている”ことによって被る不利益を鑑みた結果、
議論される原因となっているのだと思われます。
というわけで、ハンバーガーメニューのメリットデメリットをそれぞれ表してみました。
●メリット
・シンプルで画面領域の節約になる
まず、ハンバーガーメニューの利点としてはそのシンプルさが挙げられます。
ページ数がかさめばかさむほど、グローバルメニューの表示領域は広くなっていきます。するとPCよりも画面サイズの小さい
スマートフォンなどはスクリーンを圧迫してしまい画面内の情報が多くなってしまいます。
すると単純な見目としても見づらくデザイン性が損なわれるし、何よりごちゃごちゃしている＝情報がどこにあるかわかりづらい＝UI性能の低下にも繋がりますので、それを簡略化して収納することで画面を見やすくすることができます。
●デメリット
・シンプルすぎてわかりにくい
メリットとしてシンプルさをあげましたが、これはデメリットにもなり得ます。なぜなら簡略化されすぎているせいで「ユーザーが目的のコンテンツに気づかない」といった事象が起こりやすいのです。
メニューがある、とわかっても、そこに何の要素が格納されているのかわからないと、わざわざタップしようとは
思わない、ということですね。
サイトを初めて開きそのまま離脱してしまう確率＝直帰率は一般的に約40％程度と言われています。
ユーザーがサイトに興味を持ってもっと何かを探そうと思わせるためには、
やはりタップする、という二次操作をしてでもサイト内を回遊したいと感じる要素がなければいけません。
メニューをタップすれば目的のコンテンツがあるとしても、開かなければ気づかない、では
初めてサイトに来る人には意味がないですもんね。
…ではハンバーガーメニュに変わるUI性能の良いグローバルメニューとは？
タイプ別にハンバーガー以外のグローバルメニューを集めてみました。
タイプ①：ヘッダー・フッターナビゲーション
ヘッダーやフッターにハンバーガーメニューのように省略せずサイトへのリンクを固定でおくメニューですね。
ページ数の少ないサイトに有効だと思われます。
多いサイトでも入りきらない部分はMOREで表示させるという手も使えます。
下記サイトのようにアイコンなどを使っているとよりわかりやすいですね。
参考：任天堂公式サイト https://www.nintendo.co.jp/
タイプ②：スプリングボード風
メニューをブロックで表示させたメニュー。見るだけで何のコンテンツかわかりやすいです。
参考：シネマカフェ https://s.cinemacafe.net/
タイプ④：スクロールナビゲーション
いくつか項目を表示させておいて、入りきらない部分は途切れているタイプのナビゲーションです。
一見途切れているのは情報の探しやすさとしては良くないように思えますが、隠れてしまっているコンテンツは途切れている事で自然とフリックしたくなる…という心理を利用している感じですね。
参考：hulu https://www.hulu.jp/
タイプ⑤：タブ切り替え
タブで切り替える形です。グローバルメニューではあまり使用されていないイメージですが、ニュースブロックなどのコンテンツ内の切り替えなどではよく使用されていますよね。ページ数が少なく、1P完結しているようなサイトの場合、グローバルメニューがわりに使用してみるのもアリなのではないでしょうか。
参考：なんばパークス http://www.nambaparks.com/
他、ハンバーガーメニューを使用してもユーザビリティを維持する工夫としては、
TOPページなど、ユーザーが最初に足を踏み入れるページ内で各コンテンツへのリンクを整えてあげておくことではないでしょうか？
TOPをスクロールで見ているときに各ページへのリンクがしっかりあれば、まずユーザーはそこからサイトを回遊してくれます。そうして他のページに飛びたい、と意志を持ってくれたのであれば、自然とメニューを探すハズです。そうすればわざわざメニューをクリックすることをさほど手間だと思わず他ページへの回遊がスムーズになるのではないでしょうか。
（ただ、やはりメニューを探す、という手間がある以上、感覚的な操作性としてUIとしては劣っていると思われてしまうかもしれませんが…）
もしくは、ハンバーガーメニューの欠点として押しにくいというものもあります。
今では一般的であるものの、左上や右上のボタン配置は手の指が届く範囲としてベターではないと言われています。
そのため、下記のサイトのように押しやすい位置にボタンを固定してあげるというのも、ユーザビリティの向上の一環としては一つの手かもしれません。
参考：PASMO https://www.pasmo.co.jp/
色々議論の余地が残るハンバーガーメニューですが、スマートフォンのような画面の小さい端末で見る以上画面内の表示領域を節約する工夫はやはり必要となってきます。その手段の一つとして使用しつつも、UI観点から見たとき他のメニュー表示法を検討したりハンバーガーメニューのデメリットを補うような工夫をサイト内の構成で考えてみる必要はあると思うので、ユーザーにとっての使いやすさ、わかりやすさに気を配れるよう、製作時には一層気をつけていきたいなぁと思いました。
