こんにちは、デザイナーのスライです。
なんと、CBが来日するらしいですね！！！！
興奮しすぎてLittle Moreをヘビロテしております。
さて、スマートフォンサイトのUIを議論する際、
よく話題に上がるものがあります。
ハンバーガーメニューの是非です。
今回は、このハンバーガーメニューについて書こうと思います。
怒りのUI第6回目「ナビゲーションにおいて、ハンバーガーメニューは悪なのか？」です。
ハンバーガーメニューが生まれた背景
スマホの小さい画面の中に多くのメニュー項目を入れると、
画面の殆どがナビゲーションに占領されてしまいます。
この問題を改善するために、3本線のアイコンにナビゲーションを格納した、
いわゆる「ハンバーガーメニュー」が生まれました。
ハンバーガーメニューは、コンテンツの領域を確保しつつ、
PCサイトと同量のメニュー項目を実装することが可能です。
これはスマホサイトのUIに最適かと思われていました。
しかし、そこには大きな誤解があります。
デザイナーのためのデザイン
ハンバーガーメニューは、デザイナーが抱える問題を解決するために生まれたと言えます。
いわば、デザイナーのためのデザインと言えるでしょう。
そこには「ユーザーのためのデザイン」という概念がありません。
たまに、ユーザーにはどのハンバーガーメニューが効果的か、という議論を目にします。
三本線だけか、文字を入れたものか、外枠を付けたものか、など。
デザイナーはユーザビリティを考え、このようなテストを実施します。
しかしこれは、「ユーザーはハンバーガーメニューを必要としている」
という前提があって成り立つものです。
ユーザーはハンバーガーメニューを望んでいない、としたら？
なんとも不毛な議論と言えます。
なぜ、ユーザーはハンバーガーメニューを望まないのか？
恐らく多くのユーザーは、ハンバーガーメニューの意味を認識しています。
（初代iPhoneがリリースされてから9年経ちます。）
「認識していないから使えない」ではありません。
「認識しているのに使わない」と考えるのが現実的と言えます。
では、「なぜ認識しているのに使わないのか？」
その答えは、自分自身がユーザーになれば見えてきます。
ユーザー動作を考える
漠然と「服が欲しい！」という気持ちでサイトを見ました。
参照は大手ファッション通販サイトZOZOTOWN。
赤枠で囲った箇所が、ユーザー動作のターゲットです。
下記が、このサイトを見た私のユーザー動作になります。
- 画面を下へスクロールさせる。
- ページ途中で、再度ページ上部へスクロールさせる。
- MENのパネルをタップする。
ユーザー動作を分析する
1. 画面を下へスクロールさせる。
ファーストビューの下部に、商品画像が見切れています。
そこに「服が欲しい」という私の欲しい情報が存在すると感じ、
下へスクロールしたと思われます。
2. ページ途中で、再度ページ上部へスクロールさせる。
ページの途中で商品画像は「もっと見る」ボタンに変わり、無くなってしまいます。
これ以上、下へスクロールさせても私の欲しい情報は存在しないと感じ、
再びページ上部へスクロールさせたと思われます。
3. MENのパネルをタップする。
ページ上部へ戻り、「MEN」のパネルをタップしました。
デザイナーの私は当然ハンバーガーメニューを認識しています。
それにも関わらず、ハンバーガーメニューはタップしませんでした。
視覚からの情報を基に、ユーザーは行動する
ユーザーは目的を持ってサイトに来ます。
その目的と、サイトの視覚情報が少しでも合致することで、
ユーザーは次の動作へと移っていきます。
私のターゲットとなった「商品画像」と「MEN」も同様です。
- 服が欲しいから、商品画像の中から探す。
- 欲しい商品が無いから、「MEN」をタップしてソートする。
では、ハンバーガーメニューはどうでしょう？
3本の線があるだけで、そこに詳細な視覚情報は感じません。
恐らく、「MENU」といった文言が付いていたとしても、
「何のMENUなのか？」が分からずタップしないでしょう。
ユーザーはサイトを回覧する際、欲しい情報と全く合致しない情報について、
例え1回のタップであっても行動しない、と言えます。
ハンバーガーメニューの採用状況
ハンバーガーメニューの是非については、ずっと前から議論されてきました。
しかし、未だ多くのサイトがハンバーガーメニューを採用しています。
この事実を、私はずっと疑問に思ってきました。
ユーザーのためのデザインを作るべきデザイナーが、
なぜデザイナーのためのデザインを採用するのか？
恐らくハンバーガーメニューのデメリットを知っているのに、、、
そんなことを考えながら、改めてハンバーガーメニューの採用状況を調べてみました。
ハンバーガーメニューを採用していないサイト
Amazon、NAVITIME、楽天市場は、ハンバーガーメニューを採用していませんでした。
デザイナー視点では当たり前に感じるハンバーガーメニューですが、
それに頼らずとも快適なナビゲーションを実装できることが分かります。
ハンバーガーメニューを採用しているサイト
adidas、ニトリ、Yahoo! JAPANは、ハンバーガーメニューを採用していました。
しかし、ハンバーガーメニューの扱い方は私が思っていたものとは異なるものでした。
ハンバーガーメニューの内容
adidas、ニトリはお気に入りや利用ガイドなど、Yahoo! JAPANは設定項目などがあります。
どのサイトも、優先度の低い項目がハンバーガーメニュー内にあることがわかります。
つまり、ユーザーにとって重要なメニュー項目は、ハンバーガーメニューの外に設置している。
全てのメニュー項目をハンバーガーメニューに集約していないのです。
まとめ
ハンバーガーメニューは、ユーザーにとって望ましくありません。
しかし、用途によってはナビゲーションを簡易にする効果があります。
また、時間とコストを掛けてユーザーテストをしなくても、
自分自身がユーザーとなることで、サイトの改善案は見出せます。
最後に、UI改善策を考える上で、私が心がけているものを紹介します。
ふくだ的UI改善策の考え方
まず、ニュートラルな気持ちでサイトを回覧します。
（どこか改善案はないか？という気持ちでは、根本的な原因は見逃しがちになります。）
そして、自分の行動を詳細にメモしていきます。
（下へ3スクロールさせた、などなるべく詳細に。）
一通りサイトを回覧し終えたら、メモを基に自分の行動心理を分析していきます。
（今回のブログで書いた「ユーザー動作を分析する」のように。）
このように、自分自身がユーザーとなり、客観的にユーザー動作を分析することで、
UI改善策の大きなヒントになってきます。
もちろん、サイトを回覧する際はペルソナの設定と、
そのペルソナから考えられるユーザーの目的を確立した上で、
サイトを回覧する必要があります。
基本中の基本ではありますが、しっかりとユーザーの立場に立ち、
ユーザーのためのデザインを心がけていきましょう。
