エンジニアの副業は週1からでも可能?副業の例や探し方も解説
- ITエンジニア
- 副業
ジョージ・バーナード・ショー(George Bernard Shaw, 1856-1950)はかつてこう言いました。
「食への愛より真剣な愛はない」
こうした人間の食への愛情は、食や料理のUXデザインが考え続けられる理由の一つでしょう。
本記事でTubikチームがお届けするケーススタディは、『Tasty Burger』という食べ物を注文するモバイルアプリを題材にしています。このアプリのUXデザインを通して、想像的かつ操作性の高いインタラクティブデザインを実現するポイントをみていきましょう。
食品注文アプリでは、注文に至るあらゆる段階について、どんな状況にあっても素早く注文できるような、分かりやすいナビゲーションをデザインすることが不可欠です。Tubik のUI デザイナーであるAnton Morozovは、 Ernest Asanovと Vladyslav Taranのアートディレクションのもとプロジェクトに取り組んでいますが、『Tasty Burger』のUIを「直観的で美味しそうに仕上げる」という目標を持っています。
このアプリの機能は幅広く、定番のバーガーをメニューからオーダーできるだけでなく、具を追加したり減らしたりなど、バーガーをカスタマイズして作ることもできます。
それではTasty Burgerで注文する一連の流れを見ていきましょう。メニューからの選択の流れ、バーガーのカスタマイズ、そしてデリバリーか持ち帰りかの選択、という流れについて、操作画面つきで解説していきます。
材料にこだわってカスタマイズしたい人は、画面の下部にある「材料」のタブを使います。プルアップするとタブが開き、「野菜」「肉」「ソース」「トッピング」などカテゴリーごとにカスタマイズ画面が表示されます。材料リストの美的なパフォーマンスを上げ、かつ訴求力のあるものにするため、画面には全ての材料の写真が掲載されるようデザインされています。この画面におけるどの操作段階においても、右上にある「♡(ハートマーク)」をタップすることで気に入ったアイテムを保存できます。
この「♡(ハートマーク)」ボタンように、操作方法を示唆したり、ユーザーに行動のヒントを出すような、意味を持つデザイン/アイコンのことをUX アフォーダンスと呼びますが、この注文画面にはもう一つ特徴的なUXアフォーダンスがあります。それは、下部にあるカートのアイコン。アイコン上に黄色いドットがあるときは「カートが空」だと一目で分かります。
アプリの色について、デザイナーは背景色のコントラストを活かして楽しくデザインしています。 操作が必要な箇所、つまりコピーを読ませたり、リストの中でお店やサービスを見せて選択したりする場面では、可読性を優先して明るい背景色を使っています。一方で、写真やタブを選択するバーなどでは、美的なパフォーマンスを優先して暗めの背景色を使い、グラフィックをよりスタイリッシュで上品に見せています。
さらに、デザイナーが注意を払っているのは、ビジュアル的な階層をバランスよく組み立てること。この階層的なデザインのおかげで、操作方法が一目で分かり、コンテンツにざっと目を通しやすくなるのです。お腹を空かせたユーザーが、アプリの使い方を勉強するのにたくさん時間を使ってくれるとは思えません。全てが一瞬ではっきり分かるようにデザインしなければならないのです。
注文をカスタマイズする操作フローは以下の通り↓