FREENANCE Ad

ハンバーガー注文アプリ『Tasty Burger』から学ぶUXデザイン

IC
FREENANCE Ad

ジョージ・バーナード・ショー(George Bernard Shaw, 1856-1950)はかつてこう言いました。

「食への愛より真剣な愛はない」

こうした人間の食への愛情は、食や料理のUXデザインが考え続けられる理由の一つでしょう。

本記事でTubikチームがお届けするケーススタディは、『Tasty Burger』という食べ物を注文するモバイルアプリを題材にしています。このアプリのUXデザインを通して、想像的かつ操作性の高いインタラクティブデザインを実現するポイントをみていきましょう。

デザインプロセス:「直観的で美味しそうな」UXデザインへ

食品注文アプリでは、注文に至るあらゆる段階について、どんな状況にあっても素早く注文できるような、分かりやすいナビゲーションをデザインすることが不可欠です。Tubik のUI デザイナーであるAnton Morozovは、 Ernest Asanovと Vladyslav Taranのアートディレクションのもとプロジェクトに取り組んでいますが、『Tasty Burger』のUIを「直観的で美味しそうに仕上げる」という目標を持っています。

このアプリの機能は幅広く、定番のバーガーをメニューからオーダーできるだけでなく、具を追加したり減らしたりなど、バーガーをカスタマイズして作ることもできます。

それではTasty Burgerで注文する一連の流れを見ていきましょう。メニューからの選択の流れ、バーガーのカスタマイズ、そしてデリバリーか持ち帰りかの選択、という流れについて、操作画面つきで解説していきます。

バーガーカード:シンプルかつ柔軟な選択肢を

1. バーガーを選ぶ

メニュー一覧画面では、レストランやサービスのその時点での、実際のメニューや特別オファーなどが表示されます。ユーザーは、商品の写真と材料・ボリュームの基本的なデータを見ることができます。ぱっと見て分かるように、価格や操作方法は色付けでハイライトされています。さらに、フィルター機能で検索結果をカスタマイズできるので、欲しいメニューやセットが早く見つかります。

特定のメニューを選んだら、商品画面に移動します。商品画面では、大きな商品の写真と、価格やバーガーのボリュームについての情報、そして「カートに入れる」の操作ボタンが表示されます。

このデザインは、感情に訴えかけるようなキャッチーなビジュアルに仕上げ、バーガーと情報の関連が一目で分かるようになっています。

一番大事なのは、シンプルなUIであることです。材料などの情報は載っていません。詳細情報は、そのメニューをよく利用する人にとってはもう知っていることですし、なるべく早くオーダーしたい人にとっても興味がないものです。

2. バーガーをカスタマイズする

材料にこだわってカスタマイズしたい人は、画面の下部にある「材料」のタブを使います。プルアップするとタブが開き、「野菜」「肉」「ソース」「トッピング」などカテゴリーごとにカスタマイズ画面が表示されます。材料リストの美的なパフォーマンスを上げ、かつ訴求力のあるものにするため、画面には全ての材料の写真が掲載されるようデザインされています。この画面におけるどの操作段階においても、右上にある「♡(ハートマーク)」をタップすることで気に入ったアイテムを保存できます。

この「♡(ハートマーク)」ボタンように、操作方法を示唆したり、ユーザーに行動のヒントを出すような、意味を持つデザイン/アイコンのことをUX アフォーダンスと呼びますが、この注文画面にはもう一つ特徴的なUXアフォーダンスがあります。それは、下部にあるカートのアイコン。アイコン上に黄色いドットがあるときは「カートが空」だと一目で分かります。

アプリの色について、デザイナーは背景色のコントラストを活かして楽しくデザインしています。 操作が必要な箇所、つまりコピーを読ませたり、リストの中でお店やサービスを見せて選択したりする場面では、可読性を優先して明るい背景色を使っています。一方で、写真やタブを選択するバーなどでは、美的なパフォーマンスを優先して暗めの背景色を使い、グラフィックをよりスタイリッシュで上品に見せています。

さらに、デザイナーが注意を払っているのは、ビジュアル的な階層をバランスよく組み立てること。この階層的なデザインのおかげで、操作方法が一目で分かり、コンテンツにざっと目を通しやすくなるのです。お腹を空かせたユーザーが、アプリの使い方を勉強するのにたくさん時間を使ってくれるとは思えません。全てが一瞬ではっきり分かるようにデザインしなければならないのです。

注文をカスタマイズする操作フローは以下の通り↓

3. バーガーを新しく作る

レストランやカフェから食べ物を注文するアプリは、多くの場合、決まったメニューを注文するようにできています。しかし、TastyBurgerアプリはその限界を突破しました。なんと、既存のメニューを具を足したり引いたりしてカスタマイズできるだけでなく、注文者が完全にオリジナルのバーガーを、アプリに登録された材料から作れるのです! アプリ上で材料を追加するたびに、価格がどう変わるか確認できます。

カスタマイズのフローは以下の通り↓

4. 注文と配達

注文内容が決まったら、そのメニューを受け取る二つの選択肢を提示されます。一つは特定の住所に配達してもらうこと。もう一つは、お店に受け取りにいくこと。同時に、さまざまな種類の支払い方法も提示されます。

持ち帰りを選んだ場合、マップでは、もっとも近いお店の場所と経路を示してくれます。色のコントラストによって画面ははっきりと見やすく、厳選されたフォントによって、高いレベルの可読性を実現しています。

注文・配達を決める操作フローは以下の通り↓

ランディングページ:食欲をそそるUI

このアプリのランディングページは、魅力的でキャッチ―なアニメーションがベース。新鮮でおいしそうなバーガーのデザインが本能へ働きかけ、食欲をそそる効果をもたらしています。

GIF

『Tasty Burger』アプリのデザインは、Tubikのデザインチームにとってもわくわくするチャレンジでした。幅広い機能性、高いユーザビリティと指で直観的に操作できる画面を使った、食品デリバリーアプリの地平を広げるような斬新な試みだったのです。

UI/UXデザインに役立つケーススタディ

モバイルアプリのUI/UXデザインについてもっと実用的な例を知りたい場合、以下のようなケーススタディが役に立つでしょう。よろしければご参考までにどうぞ。

Real Racing. UI and UX Design for Mobile Game

Cuteen. UI/UX Design for Mobile Photo Editor

Manuva. UI/UX Design for Gym Fitness App

Watering Tracker. UI Design for Home Needs

UI Experiments: Options for Recipe Cards in a Food App

Home Budget App. UI for Finance

Night in Berlin. UI for Event App

Upper App. UI Design for To-Do List

Wedding Planner. UI Design Concept

Toonie Alarm. Mobile App UI Design

(翻訳:Yuko Nakamura)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship