【UX徹底比較!】UberEats VS Deliveroo

 

はじめに

ただいま連載中の、【UX徹底比較!】UberEats VS Deliverooですが、前回は「好みのレストランを見つけるのが簡単なのはどちらか」というテーマで競ってもらいました。

結果は、UberEatsの方がより感覚的にわかりやすいデザインになっているということで、UberEatsに軍配が上がりました。(もう一度読みたい方はこちら)

 

このままUberEatsが二勝して逃げ切るのでしょうか。

 

では二回戦どうぞ!

 

二回戦: 料理を注文するのが簡単なのはどちらか

料理の注文プロセスは両アプリにとって妥協できない部分です。プロダクトデザイナーからすれば、注文プロセスをできるだけシンプルにして、カスタマイズできる機能を余計に付け足したくはないところです。

 

しかし同時にユーザーが思い通りに料理を注文できるようにもしたいところです。

 

さあ、ここでUberEatsとDeliverooでベーコンを追加したハンバーガーを注文して試してみましょう。

 

UberEats

UberEatsのすべての料理には画像が付いています。画像があることによって料理の閲覧を続けたく(料理が楽しみに)なります。

 

 

これも素晴らしいポイントですが、UberEatsでは選択肢を絞って表示してくれます。実際、このハンバーガー屋さんにはこれよりもっとたくさんのメニューがあるのは知っています。

 

選択肢が多すぎるのは良くありません。特に、現在のUberEatsのようなMVPの場合はそうです。

 

もしユーザーから定性的なフィードバックを募集したら、もっとたくさんの選択肢がほしいという答えが返ってくるでしょう。しかし、データはそうではないことを示しており、選択肢が少ないほうがコンバージョン率がよいのです。多すぎる選択肢はユーザーを迷わせるだけなのです。
もしスクロールしたくなかったら、右下にあるメニューボタンを押してどんな種類の料理が提供されているのかを見ることができます。また、そこから選ぶこともできます。

 

 

食べたいハンバーガーを選んだら、簡単にハンバーガーをカスタマイズできる「料理詳細画面」に遷移します。

 

 

カスタマイズのオプションは「エクストラ」の項目の下から選択することができます。また、自分で自由に入力できるフォームも用意されています。自由入力欄があることでユーザーは十分な選択肢があると思ってくれます!さあ、追加のベーコンをお願いしましょう。

 

自分好みの完璧なハンバーガーを作り終わった後に押すべきものは驚くほどわかりやすくなっています。

 

大きくて緑色の「カートに追加する」ボタンです。

 

UIの観点からみると、その他は白と灰色のトーンで最小限のデザインになっています。ボタンは鮮やかで大きく、タップしてくれとアピールしています。ユーザーは次に何をすべきかが感覚的にわかるでしょう。

 

ボタンをタップするとすぐにそのボタンは「決済」ボタンに切り替わります。

 

 

料理を注文するために料理詳細画面からレストランの紹介ページに戻ることもできます。しかし、料理がカートに入っていると、決済ボタンは画面の下部に表示され続けます。

 

これはその後アプリを利用している間中、カートに料理があるということをユーザーにリマインドし続け、すべてのeコマースアプリの深刻な問題である「カゴ落ち」を最小限に抑えます。

「決済」をタップした後、自分の注文を確認するためにカートページに飛ばされます。

 

 

Googleマップを使って配達地点を表示しているのはイケてるなと個人的に思っています。必ずそうする必要があるわけではありませんが、GoogleマップのデザインもアプリのUIの大部分と調和させています。また、レシートの部分をわかりやすくしています。

この注文確定の画面で私が一番感心しているのは、配達と料理のそれぞれに関しての追記事項の入力場所を明確に分ける方法です。

 

 

例で表示されている「ナプキンの追加、ソースの追加」というヒントは役に立ちます。これにより、ユーザーは料理詳細画面ではできなかった細かなカスタムを行うことができます。

 

もし私がUberEatsのデザイナーだったら、ここに「アレルギー情報」というヒントも追記するでしょう。

 

バックエンドの立場からすると、この少しの調整がたくさんの時間とお金を節約してくれるはずです。ドライバーに料理に関する追記情報が送られてしまうことも、レストラン側に配達に関する追記情報が送られてしまうことも最小限に抑えることができます。

 

配達に関する追記情報を記入している最中、注文確定ボタンは画面下部に残り続けます。
このボタンは画面から消えるべきでしょう。追記情報を記入し終える前に間違えて「注文確定」ボタンをタップしてしまうこともありえるので、安心できません。

 

 

UberEatsに関するもうひとつの良い点は、メニューを閲覧し始めてから画面の上部に配達の所要時間が表示されることです。

 

 

配達が混みあっているときには所要時間を知らせ続けてくれるので、40分以内に料理が配達されないからと言って文句を言うユーザーは減るでしょう。

 

悪いところ

料理ごとに画像があるのはいいことですが、メニューすべてが画像付きなわけではありません。画像のない料理を選ぶのは難しいので、私だったら横に画像がちゃんと付いている方を選んでしまいます!

 

そうはいっても、UberEatsはまだMVPの段階にあるサービスで、本格的な写真は高額なのです。

 

私の予想では、UberEatsは改善施策を実施するために必要なコンバージョン率に関するデータを十分に収集したとき、バージョン2でメニュー全てを写真にするでしょう。
次に、Deliverooでハンバーガーを頼んでみましょう。

 

Deliveroo

地元のハンバーガーショップを選びました。これがレストランページです。

 

 

どのメニューにも画像がありません。個人的には画像のほうが好みです。しかし、画像がないおかげで、メニューに対する先入観を減らすことができるというのは良い点です。
ハンバーガーのメニューを選ぶと、UberEatsのUXと極めて似た料理詳細画面に遷移します。

 

 

「商品を追加する」ボタンを押すとレストランの紹介ページにまた連れ戻されます。

ここでDeliverooがUberの料理注文プロセスより優れていると思う点がでてきます。

 

 

メニューのそれぞれの料理名の横に数字が表示されることで、自分が何を注文したのかを明らかになります。(私の場合、Mississippi1個です。)

「カートを見る」の横にカートの中にある料理の合計金額が表示されていることで、決済画面を行ったり来たりする必要がないのです。

 

 

この点はUberのわかりにくい「決済」ボタンを上回っています。

 

メニューから直接商品を決済対象外にできるというちょっとした隠し機能も見つけました。メニュー内の料理の部分をホールドすることで注文を削除することができるのです。

 

 

左にスワイプする、というのがアイテムを注文から外すのにより感覚的にわかりやすいかもしれません。とはいえ、これは追加する価値のある機能です。

 

ユーザーを決済画面から常に行ったり来たりさせたくはないはずです。

 

よし、ハンバ―ガーの注文はいい感じです。わかりやすくてよい「カートを見る」ボタンをタップしてみましょう。
注文した料理の金額の詳細を示す自分のカートへと遷移します。UberEatsの注文が1ステップなのに対し、Deliverooの注文は2ステップです。

 

 

支払いと配達に進むには「決済画面へ進む」をタップしなければいけません。

 

これは少し煩わしいものです。自分の注文、手数料、配達住所、そして支払い詳細が一つのページ内で確認できたほうがいいでしょう。
また、レシートのレイアウトにはまとまりがありません。視線が左から右へ、そして真ん中へと移動します。一方UberEatsはきれいに一直線に並んでいます。

 

決済画面は配達住所と追記事項を明確に示しています。必要があればこれらの情報を変更できるということが感覚的にわかりやすい見た目になっています。

 

 

勝者

Deiverooです。

 

Uberの方が見た目とページの構造と要素の位置のレイアウトが優れていますが、Deliverooの方が各フローの中で情報を表示する場所が優れています。

 

カートにどの商品が入っているかとその合計金額がいくらなのかを画面を移動せず知ることができる点が個人的にはお気に入りです。

 

Deliverooはそのフォームに記入する方法を示して、ユーザーが行うべきアクションを引き立たせています。これは重要なことです。なぜなら、InstagramやFacebookのような毎日利用するアプリと違い、このアプリは週、2週間、または1カ月に1回しか利用されないので、ユーザーはより多くのガイドを必要とするのです。

 

ユーザーが継続してくれることが大切なのです。
Uberの主な欠点はセールの際に、料理の料金を明確に示すものがないということです。

 

押さえておくべきポイント

そのアプリの価値が何なのかをユーザー自身が利用していくなかで引き出さなければいけない新しいアプリの場合、適切な場所に適切なタイミングでヒントを出す必要があります。
それぞれのイベントに必要なステップ数を減らしましょう。注文に2ステップ必要ですか?それは1ステップでできるものではありませんか?

 

さて今の所、UberEatsとDeliverooは拮抗しています。本連載の最終回では、「配達中の最新情報の通知の良し悪し」で勝負してもらいます。総合的によりUXが優れているのはどちらでしょうか。お楽しみに!

 

この記事は、buzinga上の記事 “UberEats VS Deliveroo: Which App Has The Best User Experience?“を著者の了解を得て日本語に抄訳し掲載するものです。Repro published the Japanese translation of this original article on buzinga in English under the permission from the author.