顧客視点で考えた結果、ハンバーガーメニューをやめました

ハンバーガーメニューはもういらない

昨日私はハンバーガーを食べました。モスバーガーのオニオンリングが私の好物です。
そして、このサイトではハンバーガーメニューをやめました。お客様のサイトを含め、このサイトでもハンバーガーメニューのクリック率が悪かったことが原因です。

ハンバーガーメニューはUIとして良いのか

GIGAZINEの「なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?」の記事によると、「不親切」の項に以下の箇所があります。

それをクリックすることで何かが得られるとしても、何を得られるかがクリック前に明らかでない

サイトデザインを考える時、恰好良い、今の流行り(トレンド)、多くの人がやっている(初心者あるある)といった理由で、効果を想定せずに配置してしまうことがあります。
ですが、ターゲット層のネット接続率が低いほど、ハンバーガーメニューのようなボタンは「何が起きるのかわからない」という印象を与えることを考慮しなければいけません。

私はこれでハンバーガーをやめました

結論から言うと、見えていることの重要性を再認識したから。
以下はハンバーガーメニューをやめた、このサイトの現デザインでのヒートマップです。クリックされた箇所が一目でわかります。

ハンバーガー

以前のデザインでは、ページ上部でクリックされている箇所が記事画像だけで、ハンバーガーメニューはヒートマップではクリックされた形跡がなく、同時に測定していたアナリティクスのイベントトラッキングの結果でも「0」となっており、まさに散々たる結果でした。

そこで出た疑問が、上記記事とも一致する 訪問者にとって不親切なのではないか ということ。さらに、「新規訪問者にクリックさせてまで表示させる内容なのか」というメニュー内容の質にも疑問を感じ、別の見せ方に変更しました。

どういう経路で流入しているのか

別の見せ方を検討する際、最初に整理し直したのが流入経路です。現状では検索流入 70% でリファラルとソーシャルでの認知度はまだまだなサイトです。Search Console やアナリティクスで検索クエリを見ると「withings activite pop」「flexbox」「atom エディタ」など流入キーワードが多様化し、それによって来訪者が増えてきましたが、彼らはピンポイントなその情報を知りたいだけで、別にこのサイトをじっくり見ようとは思っていません。

期待を上回る満足を与えているのか

次に流入経路ごとの直帰率とセッションごとのPV、滞在時間など個々のページの閲覧状況を再確認しました。直帰率だけを見ると 75% を超えており、ほとんどの方が目的のページのみの閲覧。滞在時間については複数ページ見てくれている人ほど、各ページを長くじっくり読んでくれています。

ただ、この直帰率の高さは、次のアクションを発生させるほどの満足を与えていないことを示す根拠で、「他のページを見てみようかな」と誘導できていない私の記事の質も問題アリな気がしますが…。

見えている情報がすべて

流入経路とページごとの満足度を再確認したことで、「見えていない情報には決してリーチしないし、見えていない情報に誘導させることは不親切だ」という仮説が立ち、ハンバーガーメニューをやめることを決断しました。

また、お客様のサイトにおいてもサイト設計を協議した結果、モバイルレイアウトを下記 After のような配置に変更したところ、変更初日に初めて電話問い合わせが発生するという結果になりました。しかも私と打ち合わせ中というタイミング。(これは嬉しかった)

モバイルレイアウトの変更

電話問い合わせが皆無だった変更前と比べ、今では 2 日に 1 件のペースで電話問い合わせが発生しています。もちろん他にも対策を進めているからなのですが、常に見えている状態であることの重要性をここでも再認識させられました。

やめてどの形にしたのか

実は、最適解を今も探しています。というよりも、解は変わり続けるものだと思っています。そのためには、「何のためにやるのか」を明確にして、「どんな人に見てもらいたいのか」を徹底的に考え抜きます。このサイトも現在進行形で「見てくれている人に合わせたデザインレイアウト」となるよう日々試行錯誤しています。

現状では、モバイルでもPCでもメニューは全て表示しており、カテゴリについては、項目数が多いためドロワーメニュー形式としています。

レイアウトの最適解とするために

加えて、ピンポイントなキーワードで訪れてくれた方のことを考え、適切なタイミングで関連記事を出すように現在調整中で、表示場所や見せ方をテストしています。

効果はどうか

今計測中ですが、 直帰率の低下、PV数アップなど徐々に変化が数字として現れてきました。また、ヘッダーメニューのクリックをヒートマップとイベントトラッキングで確認できたので、以前よりも「クリックしても良い感」のあるメニューになりつつあると言えます。
とはいえ、見に来てくれている方々に役立つ情報と記事を発信することが前提で成り立つものなので、本当の効果はまだまだ先になりそうです。

リニューアルや修正でデザインを変更する時は、その変更が本当に良いのかを自分ではなく訪問者の視点で考えることが重要ですね。そうすればハンバーガーメニューをやめる日もそう遠くないかもしれません。

発売から1年近く経ちますが、この本はよくまとまっています。Kindle版がかなり安くなっていてびっくり。
と思ったら、2015年10月1日に再度見ると、通常の価格に戻ってました。それでも良本なことには変わりないですよ。

関連記事