フローが煩雑なUber Eatsの注文プロセスはどうすればよかったのか

Jonathan Deesing

UXライター、ポッドキャスター、ゲームデザインに取り組む意欲的なゲームデザイナ。ゲーム業界で10年に及ぶ経験があり、ユーザーインターフェイスに没頭しています。

この記事はThe UX Boothからの翻訳転載です。配信元または著者の許可を得て配信しています。

UX IRL: Uber Eats’ Crummy Checkout

お金は賢く使おうと心がけている私ですが、Uber Eatsのおかげでその心がけは完全に失敗に終わっています。オーダーした食べ物を自分で取りに行くほうが早いし、金額も安いとは言えないとわかっているのに、服を着替えて外に出るのが面倒だと感じたときにはいつも、緑に黒のロゴをタップしている自分に気づくのです。

恥ずかしながらヘビーユーザーですので、アプリ内とアプリ外の両方でプロモーションコードを目を皿のようにして探します。Uber Eatsでの注文は今週に入ってすでに4度目となっており、プロモーションコードを使うことは、その罪悪感の若干の軽減に役立ちます。

体験

1. 栄養がありそうで、かつ、ベーコンがのっていないメニューを選択する

2. サイドメニューは多すぎるぐらいに注文。あとでおなかが空くかもしれないから

3. 満足のいく注文を終えたら、カートをみるをタップしてダメージの大きさを確認する

4. 注文の合計が確認できるところまでスクロールしていき、1つのプロモーションが利用可能…詳細をみという文字が目に入る

5. [詳細をみる] をタップすると、プロモーションページに飛ぶ。(自然な流れ)

6. 画面の右上にあるプロモーションコードを追加をタップすると、プロモーションコードを入力できる新しい画面に移動。

 

Uber Eatsのチェックアウト画面の上部にある、プロモーション用の「詳細をみる」バナー

利用可能な1つのプロモーションがあるという文句はもはやジョークとも言える。ただ、この段階で「プロモーションコードを追加」ボタンが表示される。

なぜ、この画面が元のチェックアウトまでの流れから削除されたのか?

問題点

一言で言えば、プロモーションコードを入力できる場所を見つけるのが困難で混乱します。プロモーションコードの機能が、アプリ内のその日の割引キャンペーンの広告の裏側に隠れてしまっているのです。私は決済画面にあるいろいろなボタンをランダムにタップしてやっと見つけることができました。

解決策

プロモーションコードを追加する機能は、どのようなオンラインでの決済においても、常に目にみえている必要があります。 人とお金をやりとりする際には、税金、配送料、プロモーションコードなど関連するすべての情報を包み隠さずオープンに提示することが重要です。

これはマーケティング活動としてプロモーションコードを頻繁に宣伝するUber Eatsにとって特に重要です。したがって、ユーザーが決済ページから離れてしまわないように、プロモーションコードを追加する機能はそれ自身1つの項目として同じ画面内に存在する必要があるのです。広告によるプロモーションはプロダクトのどこか別の場所で行うべきです。

教訓

Uber Eatsアプリはヘビーユーザーにとっても、少し不安を感じるものです。注文するをタップしたらそれまで。前の画面に戻ったり、注文を変更したりキャンセルしたりすることはできません。プロモーションコードの追加機能はユーザーの不安を高めるだけの機能であり、もはや隠し機能です。

プロダクトにおけるユーザーとの重要なタッチポイントは、明確で安心できるものであるべきです。特に実際のお金を支払う場面ではそうです。あり得ないとは思いますが、プロダクトのオーナーがプロモーションコードなどの特定の機能をできるだけ使ってほしくないという理由から、わざと見つけにくくするように指示しているのならば、私のアドバイスはこれだけ。そんなことをするのはやめるべきです。

この例では、Uber Eatsは失敗しています。なぜならユーザー体験の前半で確立してきたスタンダードから踏み外してしまっていたのです。注文プロセスの中の各ボタンは、すべて【単語+動詞】という同じパターンに従っています。

注文する、カートを表示する、プロモーションを追加する。これらはすべて特定の具体的なアクションを実行するためのものです。

そして最後のステップで、1つのプロモーションが利用可能。詳細をみるという表示が表れます。意味が不明瞭であるというだけでなく、このボタンには2つの異なるアクションが割り当てられています。その日のプロモーションコードの表示すること、そしてユーザーが別のコードを入力する(しかも別のページで)ことです。

このタイプの問題を見つけるもっとも簡単な方法の1つは、私がパンくずテストと呼んでいるテストをすることです。プロセスの各ステップをパンくずのように書き出し、ステップを大きな声に出して言ってみるのです。そして流れから外れていたり、筋が通らないものはないかを確認します。Uber Eatsにプロモーションコードを追加するとしたら、次のようになります。

カートに追加する>注文する>カートを表示する> 1つのプロモーションが利用可能、詳細をみる>プロモーションを追加する> 【ユーザーがプロモーションコードを入力】>プロモーションを追加する

プロモーションのステップがプロセスから飛び出していることに気づくはずです。これは偶然にも問題の原因となっている部分です。Uber Eats内部のリズムを壊すもので、率直に言って、単にマーケティング部門をハッピーな気分にするために追加されたものとしか思えません。

以下は、決済のユーザー体験を「パンくずまみれ」にしないためのコツです。

  • 重要な機能を他のプロセスの中に隠さない
  • お金の支払いに関するところは慎重かつ透明に
  • フローがおかしくないかをパンくずテストでチェックする

Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・毎朝更新中