1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="U4Xvs3eefj"><a href="https://uxdaystokyo.com/articles/menu-akane-edit/">飲食店のメニューづくりで注文時間が変わる！！UI改善案付き</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/menu-akane-edit/embed/#?secret=U4Xvs3eefj" width="600" height="338" title="“飲食店のメニューづくりで注文時間が変わる！！UI改善案付き” — UX TIMES" data-secret="U4Xvs3eefj" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2017/10/img-010.png1785689UX DAYS TOKYOのスタッフの伊藤です。普段は制作会社のディレクターとして、WEBサイトの制作に携わっています。 今回は大阪でワークショップを行った際に行ったランチのメニューがわかりにくいということで、定例勉強会の問題としてあがってきたので改善方法を含めてご紹介いたします。 飲食店メニューの問題 スタッフの1人が名物である「肉つけ麺」を選び注文しました。すると、注文を受けた店員は 「風味は、”ゆず胡椒”と”海老だし”と”ごま味噌”、また、麺は”太麺”と”細麺”、盛りは”ひや盛り”と”あつ盛り”のどれにしますか？」 と注文したスタッフに選択を委ねました。 そんな選択があることを知らなかったスタッフは、結果的に店員を待たせてしまいました。 選択しなければならないオプションがあると気づきにくいメニュー メニューを見ると「肉つけ麺」を選ぶだけで良いように見えます。 注意深く見なければ、肉つけ麺を選んで「風味」と「麺」と「盛り」を選ばならければならないことに気がつきません。 単なるメニューがお客様を正しく誘導する この問題はレイアウトが悪いことで、お客さんを惑わせていることでもありますが、その結果発生する問題についても整理しておきます。 悪いレイアウトメニューの問題点 注文時に時間がよりかかる（平均1〜2分） 質問されるようなことがあればもっと時間をロスする（店員の手が止まっていることになる） 誤発注の要因がある 店員のモチベーションが下がる（無駄な接客で品質が下がる可能性がある） 上記の問題は単純にお客を惑わせています。その上で、店員を待たせるという問題が発生します。お客さんによっては店員の長い解説が理解できず聞き直すことがあるでしょう。そうなればより時間を取らせますし、いろいろと話をしている上で決定したメニューは聞き間違で誤発注する可能性があります。 お客と店員のコミュニケーションができて良い。注文の最後には確認するから誤発注はないだろう。という意見もあるかと思いますが、混雑している場合の数分の無駄はお店の売上にも影響します。万が一、間違ったものを出してしまったらより時間を取られてしまいますし、お客様にとっては良い体験ではありません。 一番の問題は店員のモチベーションが下がることでしょう。同じ説明を繰り返し行い、注文を受けなければならず、決して良いコミュニケーションを取る心のモチベーションにはならないはずです。 もし、あなたが常連で同じ説明をいつもしているものを見ると「ああ、またか。」と思ってしまうでしょう。 スーパーのレジもそうですが、日常のちょっとした待ちもお客様は良い思いをしていません。これらをメニューのレイアウトで制御（コントロール）できたり、今回のような問題が発生してしまうのであれば改善すべきです。 メニューを改善する 現状のメニューの問題を分析 現状のメニューは肉詰め麺を選んだ後に選択するものがあることに気が付かないレイアウトです。 つまり、肉つけ麺を選ぶだけで良いと思えるレイアウトです。 ユーザー導線はどうなっているのか？ ユーザー視点を細かく分析すると以下の３つの行程になります。 タイトルを見る メニューの種類を見る 食べたいものをメニューから選択する 目立たせようにも目にはいらない メニューを作成した方も今の問題点を改善しようとして、少し太文字で「いずれかをお選びください」と明記したり、最後の選択には赤枠でデザインしていりますが、ユーザーの目線がそちらに行かないので誘導できていません。 グルーピングもできてない このメニュー表は、つけダレの選択があるなしを区別するために、黒々しい太線が縦に引かれています。 そのことで、左右が情報として分断されているような印象を与え、右側にある「肉つけ麺」「特上肉つけ麺」を選択した際に、左端にある注意文が右の肉つけ麺も選択しなければならない情報が記載されていることに気づきません。 お店としては、つけ麺というカテゴリの一番最後に記載していて、その中で麺を選んでほしいという意図だと思いますが、ユーザーはそのように解釈できません。 情報のグルーピングを変え「つけ麺カテゴリのどのメニューを選んでも、麺と盛りを別途選ぶ必要がある」ということ認識させなければなりません。 デザイン変更の要件 自然な視線移動のために、選択する項目は各メニューの下に置く 「お選びください」の見出しを各メニュー名の下に配置し、メニューを選び終わったタイミングで気づきやすいようにしました。 メニュー同士を比較しやすいよう、各メニューと値段を近くにまとめる 各メニューの比較をしやすいように、写真の位置をずらした上で各メニューの項目がそれぞれ同じ高さに揃うようにレイアウトを調整しました。 再デザインの方法 自然な視線移動のために、注意文は各メニューの下に設置 選択しなければならないことを認識させるために「お選びください」のワードをしっかりと目立たせる 情報のグルーピングの見せ方を見直し、メニューと注意文の関係性を明確化する メニュー同士を比較しやすいよう、各メニューと値段を近くにまとめる お客さんが選択できるメニューの誕生 このレイアウトであれば、どのお客様でも何を選択すべきだとかが理解できるでしょう。レイアウト１つでも誘導が変わってきます。 基本のレイアウトを学ぼう ユーザー導線のレイアウトはグラフィックからも学ぶことができます。今回の様な課題を解決をするには理論的にデザインをしなければなりません。グラフィックになりますが、レイアウトの基本が学べるノンデザイナーズデザインブックを学ぶことでユーザーの視点を理解してレイアウトを組むことができます。 「近接」「整列」「反復」「コントラスト」の4つのデザインの基本原則は、デザインに関わったことがない人にもわかりやすく書かれています。