編輯導(dǎo)語(yǔ)：當(dāng)用戶(hù)不想出門(mén)、或不想做飯時(shí)，便可能選擇利用送餐APP來(lái)滿(mǎn)足自己的食欲。那么，在送餐這一日常服務(wù)中，產(chǎn)品應(yīng)該如何提升用戶(hù)的使用體驗(yàn)？本篇文章里，作者結(jié)合Uber Eats這款送餐APP進(jìn)行了分析，一起來(lái)看一下。

Uber Eat 新增了 “餐廳亮點(diǎn)” 的功能。新功能的設(shè)計(jì)目的是為用戶(hù)提供一種新的與 App 之間互動(dòng)的方式，并給餐廳提供一個(gè)可以展示更多個(gè)性化內(nèi)容的空間。

查看完整設(shè)計(jì)概念文檔：

https://www.notion.so/Uber-Eats-Highlights-095cbd61deb64f039adc3cc0769c11c7

一、項(xiàng)目介紹?Project Pitch

1. 送餐行為研究

背景

送餐是一種將食物或雜貨運(yùn)送到指定位置的服務(wù)。提供這項(xiàng)服務(wù)的 APP 解決了一系列用戶(hù)的需求，包括不會(huì)做飯或沒(méi)有時(shí)間做飯的人，以及想呆在家里吃現(xiàn)成食物的人等等，甚至有人用這款 APP 搭送貨員的車(chē)。

Uber 的選項(xiàng)布局

1）問(wèn)題說(shuō)明

像 Uber Eats 這樣的送餐 APP 有太多的選項(xiàng)，以至于用戶(hù)面對(duì)太多選擇會(huì)不知所措。

2）問(wèn)題描述

這些 APP 根據(jù)預(yù)先確定的類(lèi)別展示列出的餐廳（從特定配料到一般主題，如每日供應(yīng)）。這種方式非常好，能最大限度地發(fā)揮屏幕空間，提供各種選擇，但也會(huì)有刺激買(mǎi)方過(guò)度選擇的巨大風(fēng)險(xiǎn)。

3）改進(jìn)

我計(jì)劃重新設(shè)計(jì) Uber Eats 的 iOS 端界面，以改變送餐 APP 中買(mǎi)家過(guò)度選擇行為的現(xiàn)狀。改進(jìn)的重點(diǎn)是希望一次只強(qiáng)調(diào)一個(gè)單一的餐廳，詳細(xì)闡述其背后的故事、食物、配料和廚師。

4）必要性

改進(jìn)的目的是減少買(mǎi)方的過(guò)度選擇，這是一種認(rèn)知障礙，人們?cè)诿鎸?duì)太多選擇時(shí)難以做出決定。當(dāng)用戶(hù)看到等價(jià)的選項(xiàng)，會(huì)權(quán)衡每個(gè)選項(xiàng)的因素，以找到風(fēng)險(xiǎn)最小的選項(xiàng)。這是一個(gè)令人心力交瘁的過(guò)程，用戶(hù)最后往往會(huì)選擇更安全的選項(xiàng)。

就送餐 APP 而言，用戶(hù)傾向于選擇他們已經(jīng)嘗試過(guò)的選項(xiàng)，而不是選擇小商家。改進(jìn)后的概念不僅解決了用戶(hù)的過(guò)度選擇問(wèn)題，還為小商家提供了增加流量的機(jī)會(huì)。

5）約束條件

由于課程的限制，我無(wú)法進(jìn)行 A / B 測(cè)試，來(lái)比較用戶(hù)使用原型和使用原設(shè)計(jì)做決定所需時(shí)間的差異。

6）設(shè)計(jì)計(jì)劃

我計(jì)劃設(shè)計(jì) iOS 端界面的高保真原型。主要特點(diǎn)是全屏描述一個(gè)單一的餐廳，包括他們可選擇的食物和食物的制作過(guò)程。通過(guò)用全屏水平和垂直滾動(dòng)的方法，來(lái)減少用戶(hù)的交互行為。

二、競(jìng)品分析?Competitive Analysis

1. 抖音

TikTok 是一款社交 APP，人們可以拍攝、分享和觀看其他用戶(hù)制作的短視頻，通常在一分鐘以?xún)?nèi)。

• 它主要的目標(biāo)用戶(hù)是喜歡拍和觀看短視頻的青少年和年輕人。
• 內(nèi)容創(chuàng)建者們會(huì)分享生活事件、瑣事、技能等。觀眾在這款 APP 上觀看其他用戶(hù)發(fā)布的內(nèi)容來(lái)收獲快樂(lè)。
• 這款 APP 中有一些有趣的點(diǎn)，比如：簡(jiǎn)短易用的短視頻，通過(guò)上滑交互切換視頻，以及鼓勵(lì)用戶(hù)社交互動(dòng)的評(píng)論和分享功能。
• 簡(jiǎn)單的交互方式和易于識(shí)別的圖標(biāo)和排版，有效地強(qiáng)化了讓用戶(hù)觀看視頻的產(chǎn)品目標(biāo)。

TikTok 的主頁(yè)視覺(jué)布局

2. Ulyss

這款 APP 幫助用戶(hù)逐步篩選旅游地點(diǎn)，并且會(huì)基于用戶(hù)的喜好給予推薦。

• APP 的主要目標(biāo)用戶(hù)是優(yōu)柔寡斷的旅行者，他們需要滿(mǎn)足自己旅行需求的地點(diǎn)推薦。
• 這些旅客可以在這款 APP 上輸入他們的需求和目標(biāo)，并顯示滿(mǎn)足這些要求的選項(xiàng)。
• 這款 APP 上一些有趣的點(diǎn)包括：直觀的遞進(jìn)流程，該流程引導(dǎo)用戶(hù)通過(guò)有限的選擇問(wèn)題，結(jié)合流程末尾的統(tǒng)計(jì)摘要，以比較旅行偏好和最符合要求的地點(diǎn)。
• 每一個(gè)選擇步驟都包含小的幾何視覺(jué)元素，可以簡(jiǎn)化選擇，使決策更容易。

Ulyss 的逐步選擇

3. 亞馬遜

亞馬遜作為一個(gè)電子商務(wù)平臺(tái)，為用戶(hù)提供買(mǎi)賣(mài)產(chǎn)品的服務(wù)，它也是我重點(diǎn)分析的競(jìng)品。

• 他們的主要目標(biāo)受眾是那些因?yàn)闆](méi)有時(shí)間或不想出門(mén)而喜歡在網(wǎng)上買(mǎi)東西的的人群。
• 對(duì)于這個(gè)特定的目標(biāo)受眾，在亞馬遜上購(gòu)物縮短了篩選商品和出門(mén)的時(shí)間。快遞系統(tǒng)還能將商品送到任何用戶(hù)指定的地點(diǎn)，這大大增加了在亞馬遜上購(gòu)物的便利性。
• 改善亞馬遜網(wǎng)上購(gòu)物體驗(yàn)的一些有趣的特性包括：每種產(chǎn)品的詳情描述，以方便用戶(hù)了解產(chǎn)品，從而減少用戶(hù)在購(gòu)買(mǎi)時(shí)會(huì)出現(xiàn)的問(wèn)題。描述包括圖表、客戶(hù)評(píng)論和其他買(mǎi)家的常見(jiàn)問(wèn)題。
• 每個(gè)選項(xiàng)都有小的幾何視覺(jué)元素，可以簡(jiǎn)化選擇，使用戶(hù)更容易決策。
• 通過(guò)清晰的排版格式以及標(biāo)題和文本的直觀分層，信息結(jié)構(gòu)被分為多個(gè)部分。這樣可以合理的安排內(nèi)容，方便用戶(hù)使用。

亞馬遜 APP 中的商品描述

三、用戶(hù)場(chǎng)景User Scenarios

• 當(dāng)我第一次進(jìn)入這個(gè) APP 時(shí)，我想在導(dǎo)航系統(tǒng)中找一個(gè)小商家的列表，這樣我就可以很容易地在大公司中進(jìn)行排序。
• 當(dāng)我瀏覽推薦的商家名單時(shí)，我希望能給我多推薦一些新開(kāi)的店，這樣我就可以支持各種各樣的小商家。
• 當(dāng)我瀏覽推薦的商家名單時(shí)，我想了解他們的生產(chǎn)、道德和安全預(yù)防措施，這樣我就可以對(duì)我花了錢(qián)的商家做出明智的決定。
• 當(dāng)我瀏覽推薦的商家名單時(shí)，我想了解他們使用的食物和配料，這樣我就可以嘗試自己在家做。
• 當(dāng)我瀏覽推薦的商家列表時(shí)，我想保存并編輯購(gòu)物車(chē)中的項(xiàng)目，這樣我就可以不必返回主頁(yè)直接結(jié)賬。

• 當(dāng)我第一次進(jìn)入 APP 時(shí)，我想輕松地知道餐廳能夠提供什么服務(wù)，這樣我就可以很快找到滿(mǎn)足我需求的食物。
• 當(dāng)我第一次進(jìn)入 APP 時(shí)，我想在主導(dǎo)航上找到 APP 擴(kuò)展功能，以便快速找到搜索選項(xiàng)。
• 當(dāng)我瀏覽推薦的商家名單時(shí)，我想輕松地進(jìn)行選項(xiàng)篩選，這樣我就可以直接查看各種食物選擇，而不會(huì)不知所措。
• 當(dāng)我瀏覽推薦的商家名單時(shí)，我想知道這家餐廳一般都提供什么類(lèi)型的食物，這樣如果不是我現(xiàn)在想要的，我就可以很快看下一選項(xiàng)。
• 當(dāng)我瀏覽推薦的商家列表時(shí)，我想對(duì)某些選項(xiàng)進(jìn)行排序和篩選，以便在搜索時(shí)排除不需要的選項(xiàng)。
• 當(dāng)我瀏覽推薦的商家名單時(shí)，我希望能看到每道菜的配料，這樣我就可以知道我此刻想吃的食物。
• 當(dāng)我瀏覽推薦的商家列表時(shí)，我希望能夠?qū)⑷颂砑拥接唵沃?，比如餐廳和菜單過(guò)濾器/搜索，以便使用我熟悉的擴(kuò)展功能。
• 當(dāng)我瀏覽推薦的商家名單時(shí)，我希望看到的不只是食物選擇的清單，這樣我就知道，除了食物之外，我還可以根據(jù)其他因素做出決定。

四、流程圖?Flowcharts

五、低保真原型?Low-Fidelity Prototypes

低保真原型 Figma 鏈接：

https://www.figma.com/proto/wBgzqtnAez9spMo9RVshRh/Advanced-Topics-in-Interactivity?node-id=105%3A6&scaling=scale-down

六、視覺(jué)規(guī)范?Image Assets

七、高保真原型?High-Fidelity Prototype

高保真原型 Figma 鏈接：

https://www.figma.com/proto/wBgzqtnAez9spMo9RVshRh/Advanced-Topics-in-Interactivity?kind=&node-id=152%3A759

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）。

作者：Katherine Ng

原文：https://ng-design.medium.com/uber-eats-new-feature-restaurant-highlights-79f4e802e0d6

譯者：邵俊森；審核：李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議