飲食店のメニューだってユーザー導線を考慮しよう

今回は大阪でワークショップを行った際に食事をした飲食店のメニューのわかりにくさについて勉強会で話し合ったので、改善方法を含めてご紹介いたします。

飲食店メニューの問題

スタッフの1人が名物である「肉つけ麺」を選び注文しました。すると、注文を受けた店員は

「風味は、”ゆず胡椒”と”海老だし”と”ごま味噌”、また、麺は”太麺”と”細麺”、盛りは”ひや盛り”と”あつ盛り”のどれにしますか？」

と注文したスタッフに選択を委ねました。

そんなオプションがあることを知らなかったスタッフは、結果的に店員を待たせてしまいました。

オプションに気づきにくいメニュー

注意深く見なければ、肉つけ麺を選んだ後に「風味」と「麺」と「盛り」を選ばならければならないことに気がつきませんね。

単なるメニューがお客さんを正しく誘導する

このメニューの最大の問題はレイアウトが悪いことでお客さんを惑わせていることですが、それに付随する問題についても整理しておきます。

このメニューは単純にお客さんを惑わせているだけでなく、その上で『注文時に店員を待たせる』という問題が発生します。お客さんによっては店員の長い解説が理解できず聞き直すことがあるでしょう。そうなればより時間を取らせますし、いろいろと話をしている上で決定したメニューは聞き間違で誤発注する可能性があります。

考え方として『お客さんと店員のコミュニケーションができて良い。注文の最後には確認するから誤発注はないだろう。』という見方もあるかと思いますが、混雑している状況での数分の無駄はお店の売上にも影響します。万が一、間違ったものを出してしまったらより時間を取られてしまいますし、お客様にとっては良い体験ではないのは明らかです。

一番の問題は店員のモチベーションが下がることでしょう。同じ説明を繰り返し行いながら注文を受けなければならない状況では、決して良いコミュニケーションを取ろうとする心境にはならないはずです。もし、あなたが常連で同じ説明をいつもしているものを見ると「ああ、またか。」と思ってしまうでしょう。

スーパーのレジもそうですが、日常のちょっとした待ち時間もお客さんは良い思いをしていません。

これらをメニューのレイアウトで制御（コントロール）できるのであれば改善すべきです。

メニューを読む視線の動き

ユーザーの視線の動きを細かく分析すると、以下の3つの工程になります。

1. メニューの見出しを見つける
2. メニューの種類を順番に見て比較する
3. メニューから食べたいものを選択する

このときの問題点は、食べたいものを選択した後にオプションを選択する必要性に気づけないことです。

細かく見ていきましょう。

メニューの問題点を特定する

1. オプション表示が左上にある

現状のメニューは注文の決定後に左上に目線を移さないとオプションについて確認できません。縦読みの文章を読むときは右上から左下に視線を移動するほうがスムーズな動きですので、このようなレイアウトはオプションを見落とす一因になっています。

2.「お選びください」が目立たない

食べたいものを選択した後にオプションを選択してもらうには、そのタイミングでオプション選択が「自分と関係のある情報だ」と認識してもらう必要があります。この場合、「ゆず味噌風味」などの各要素よりも、むしろ「お選びください」というメッセージを強調すべきでしょう。

3.情報のグループ分けにも失敗している

このメニュー表は、風味の選択の有無を区別するために、黒々しい太線が縦に引かれています。

そのせいでお客さんは、左右が情報として分断されているような印象を与え、右側にある「肉つけ麺」「特上肉つけ麺」を選択した際にも、左端の赤枠に囲まれたオプションを選択しなければならないということに気づきません。

情報のグルーピングを変え「つけ麺カテゴリのどのメニューを選んでも、麺と盛りを別途選ぶ必要がある」ということ認識させなければなりません。

オプションに気付かせるメニューの誕生

以上の問題を解消するためにレイアウトを組み直したメニューがこちらです。

どのような考え方で変更を行ったのか、順番に説明していきます。

レイアウト変更の考え方

1.「お選びください」というメッセージを目立たせる

注文を決めた後にオプション選択の必要性に気づけるよう、「お選びください」の文字を強調しました。この文字が周りの要素に埋もれてしまわないよう、周りの文字は逆に比較的目立たないようにしています。

2.自然な視線移動に合わせて左下にメッセージを配置する

注文を選び終えたタイミングで自然にオプションに目が向くよう、左上ではなく左下にメッセージを配置しました。

3.情報のグループ構造がはっきりとわかるようにする

「麺」と「盛り」のオプション選択を、メニューの横幅全体にまたがるように配置することで、オプション選択がメニュー全体と関連する情報だと判断できるようにしました。

4.メニュー同士を比較しやすいよう、各メニューと値段を近くにまとめる

「オプション選択に気づけるようにする」とい本題からは逸れますが、各メニューの比較をしやすいように、写真の位置をずらした上で各メニューの項目がそれぞれ同じ高さに揃うようにレイアウトを調整しました。

これらのやり方でレイアウトを変更すれば、どのお客さんでもオプション選択の必要性に気づくことができるでしょう。レイアウトを変えるだけでも、読み手の認識や行動を大きく変えることができます。

基本のレイアウトを学ぼう

ユーザー導線のレイアウトはグラフィックからも学ぶことができます。今回のような課題を解決をするには論理的にデザインをしなければなりません。グラフィックになりますが、レイアウトの基本が学べるノンデザイナーズデザインブックを学ぶことでユーザーの視点を理解してレイアウトを組むことができます。

「近接」「整列」「反復」「コントラスト」の4つのデザインの基本原則は、デザインに関わったことがない人にもわかりやすく書かれています。