筆者由一次不好的麥當(dāng)勞點(diǎn)餐體驗(yàn)開始了對(duì)于該系統(tǒng)的研究和分析，根據(jù)點(diǎn)餐過(guò)程的問(wèn)題進(jìn)行了針對(duì)性優(yōu)化。

幾個(gè)星期前，我和我的家人一起去麥當(dāng)勞買午餐吃，然后我們發(fā)現(xiàn)在麥當(dāng)勞店門口安了三臺(tái)新的自動(dòng)點(diǎn)單機(jī)器。我讓我爸爸和我哥哥去操作這個(gè)系統(tǒng)，我在旁邊觀察他們使用這個(gè)系統(tǒng)點(diǎn)單的交互過(guò)程。

其中，我爸和我哥都在瀏覽菜單的時(shí)候遇到了問(wèn)題，尤其是在他們具體選擇哪款餐品的過(guò)程中。接下來(lái)我將會(huì)把他們?cè)邳c(diǎn)單和付款過(guò)程中遇到的問(wèn)題一一解析。

問(wèn)題

1. 選擇餐款

這個(gè)選擇過(guò)程相關(guān)的互動(dòng)操作是一個(gè)列表，這個(gè)列表是一個(gè)由圖標(biāo)組成的，在屏幕的最左側(cè)，可上下滑動(dòng)來(lái)瀏覽的列表。

雖然這里沒有任何提示或指示表明這是一個(gè)可滑動(dòng)的菜單，但幸運(yùn)的是，人們可以清楚意識(shí)到這個(gè)列表可以通過(guò)往上／往下滑動(dòng)去獲得更多的選項(xiàng)，而并不止是目前畫面所展示出來(lái)的。

2. 選擇好餐款后的個(gè)性化選項(xiàng)

顯然，這是最難的一個(gè)部分。

這個(gè)部分的流程是，當(dāng)你選擇好了你想買的漢堡或套餐后，接著選擇大小、種類、配餐和飲料。當(dāng)我爸爸嘗試去換一種飲料時(shí)，他找不到他想要的那一款（他只能看見目前顯示的6個(gè)選項(xiàng)）。

最后，只能換成我來(lái)幫他點(diǎn)單，我通過(guò)了一個(gè)向上滾動(dòng)的動(dòng)作，找到了更多的選項(xiàng)。當(dāng)我這么做的時(shí)候，他感到很驚訝，完全沒想到還可以有這種操作。

除此之外，這個(gè)機(jī)器也不能提供把套餐里贈(zèng)送的玉米換成薯?xiàng)l的選項(xiàng)（不過(guò)我猜是因?yàn)樗麄兪菦]有更新菜單）。

3. 付賬過(guò)程中的問(wèn)題

這是所有流程中的最后一步。

我發(fā)現(xiàn)，這里所提供的支付選項(xiàng)很奇怪，這里有兩個(gè)選項(xiàng)：在機(jī)器付款或在柜臺(tái)人工付款（傳統(tǒng)方式）。

我覺得這里完全沒有設(shè)置去柜臺(tái)人工付款的必要，畢竟大家不可能在機(jī)器選好了又跑到柜臺(tái)再次排隊(duì)付賬。然而，很有意思的是，我爸爸選擇了“去柜臺(tái)付賬”，這一舉動(dòng)又引發(fā)了另一個(gè)很有意思的用戶體驗(yàn)問(wèn)題。

當(dāng)他選擇了這個(gè)選項(xiàng)后，機(jī)器讓我們?nèi)×艘粋€(gè)號(hào)碼牌。我們所理解的是，這個(gè)號(hào)碼是我們的訂單號(hào)碼，工作人員會(huì)根據(jù)這個(gè)號(hào)碼給我們提供剛剛選好的餐飲。

但是，我們錯(cuò)了（不是完全錯(cuò)誤）！

屏幕給我們的號(hào)碼是53，但號(hào)碼牌又是175，這讓人非常困惑。在我們?nèi)ジ锻昕钪螅覀冇值玫搅艘粋€(gè)收據(jù)，上面有第三個(gè)號(hào)碼：157。

我們大概等了差不多45分鐘才吃上東西，對(duì)于一個(gè)快餐來(lái)說(shuō)，這是一個(gè)非常差的體驗(yàn)。整個(gè)點(diǎn)餐和支付系統(tǒng)非常諷刺，反而降低了效率。

4. 餐號(hào)呼叫系統(tǒng)

在快餐店，人們其實(shí)已經(jīng)習(xí)慣了在短時(shí)間內(nèi)，就能自己去柜臺(tái)取餐。而系統(tǒng)提供的服務(wù)，是讓客人坐在座位上等待，工作人員會(huì)根據(jù)號(hào)碼牌給你送來(lái)餐飲。

然而，在事情的最后，還是工作人員在喊餐號(hào)讓客人去取餐。而且這個(gè)號(hào)碼牌又和真正的訂單號(hào)不一樣，等于說(shuō)兩個(gè)不同的號(hào)碼系統(tǒng)同時(shí)在運(yùn)作。如果我沒仔細(xì)分辨的話，我都得不到我點(diǎn)的餐了。

5. 付款后

在付款之后，我們又被要求要取一個(gè)桌號(hào)，然后把桌號(hào)輸入進(jìn)系統(tǒng)。

研究

我主要使用的方法就是觀察。

我父母和我的哥哥是此次我所研究的人物角色，我也去觀察了其他的路人使用這個(gè)系統(tǒng)。

我發(fā)現(xiàn)，一般人們一次只點(diǎn)一個(gè)物品的時(shí)候，沒有碰到大問(wèn)題，都比較流暢。當(dāng)想點(diǎn)多個(gè)物品的時(shí)候，一些剛剛我們遇到過(guò)的問(wèn)題就出現(xiàn)了。仍然有一定的人會(huì)選擇“在柜臺(tái)支付”，最后他們又得知柜臺(tái)再排一次隊(duì)（是的，有的時(shí)候收銀員甚至都不在，還得等他們過(guò)來(lái)）。

第一天實(shí)地考察

爸爸和我哥哥第一次體驗(yàn)麥當(dāng)勞點(diǎn)餐系統(tǒng)。

第二天實(shí)地考察

一周后，我又去了另外一家麥當(dāng)勞門店觀察用戶的使用行為。

這個(gè)門店比較慘的一點(diǎn)是，一直需要有一個(gè)工作人員在點(diǎn)餐機(jī)器旁，協(xié)助客戶使用該系統(tǒng)點(diǎn)單。

第三天實(shí)地考察

第二天，我?guī)覌寢屓チ送患饮湲?dāng)勞門店，但這一次我自己測(cè)試了這個(gè)點(diǎn)餐系統(tǒng)。我媽媽在旁將整個(gè)過(guò)程錄影下來(lái)，這既有趣也很能幫助洞察問(wèn)題。

分析

用戶畫像

用戶故事板

這是一個(gè)我根據(jù)上面兩個(gè)人物創(chuàng)造的故事板，這個(gè)故事里的人物的名字叫做 Jhen。

構(gòu)思和草稿

在我畫這個(gè)草稿之前，我先 Google 了一下關(guān)于快餐行業(yè)使用機(jī)器點(diǎn)餐系統(tǒng)的情況。我發(fā)現(xiàn) KFC 也有使用這種系統(tǒng)，我無(wú)法找到相關(guān)短片去了解它是怎樣運(yùn)作的。

但我找到了一個(gè)關(guān)于麥當(dāng)勞推廣該系統(tǒng)的宣傳短片，這個(gè)短片講述的是一個(gè)服務(wù)員教導(dǎo)大家如何使用這個(gè)系統(tǒng)。

關(guān)于單個(gè)物品點(diǎn)單流程的初步草稿：

單個(gè)物品點(diǎn)單支付流程草圖：

套餐／多個(gè)物品點(diǎn)餐流程草圖：

我所定義的幾個(gè)主要需求：

• 關(guān)于一個(gè)物品面臨分類重疊時(shí)，如何去組織；
• 食物個(gè)性化選項(xiàng)如何簡(jiǎn)化；
• 當(dāng)用戶想退回上一步選項(xiàng)或回主頁(yè)時(shí)，如何讓用戶得到清晰的指示；
• 為了節(jié)省用戶等待時(shí)間，如何將支付變得更加效率。

低保真線框圖

根據(jù)我之前所繪制的草圖，我做出了以下的線框圖。

我根據(jù)自己的觀點(diǎn)提出了優(yōu)化后的系統(tǒng)，旨在讓用戶感覺更舒服，而且更加美觀，這也會(huì)幫助我在整個(gè)流程中發(fā)現(xiàn)并更正問(wèn)題。

重復(fù)測(cè)試線框圖

我創(chuàng)建了更多相同類型操作的版本來(lái)進(jìn)行比較：

• 主菜單
• 食物種類選擇的展示
• 甜品／配餐的選擇
• 食物信息界面
• 飲料個(gè)性化選擇

主菜單比較

我將“完成(Done)”菜單去掉了，因?yàn)樗]有承載任何有意義的動(dòng)作。只有在更新訂單、加入列表的情況下，該菜單才會(huì)出現(xiàn)。

食物種類選擇展示方式比較

更加有組織，而且更注重用戶新劃動(dòng)出來(lái)的選項(xiàng)。

甜品／配餐的選擇

做出了3個(gè)版本，但最后我選了最后一個(gè)（最右邊那個(gè)）。因?yàn)樽筮厓蓚€(gè)都有些不必要的空白，用戶會(huì)因此看不見其他的內(nèi)容。

食物信息界面

左側(cè)的這一個(gè)圖，和目前麥當(dāng)勞門店使用一樣。一開始我覺得繼續(xù)使用不更改也沒有問(wèn)題，直到我測(cè)試后發(fā)現(xiàn)，其實(shí)這里根本不需要兩種不同的按鈕（定制 customize／修改 change options），其實(shí)它們都是引導(dǎo)向同一個(gè)界面。

于是，我把這兩個(gè)按鈕合并成了一個(gè)，去掉了修改按鈕，留下了定制按鈕。點(diǎn)擊后，新彈出的界面都可以調(diào)整尺寸和細(xì)節(jié)選擇。

飲品個(gè)性化選擇

（在設(shè)計(jì)高保真圖時(shí)，這個(gè)想法最終被廢棄了）這個(gè)部分是我最新設(shè)計(jì)的該界面，是所有版本里最流暢的。

在之后的高保真原型圖設(shè)計(jì)中，最初的線框圖被廢除。這是因?yàn)樗⒉恢С诛嬃系臏囟冗x擇，并且中間有過(guò)多的頁(yè)面過(guò)渡。

新版本的設(shè)計(jì)使得用戶可以在一個(gè)界面里，完成所有的飲料個(gè)性化選擇。

高保真設(shè)計(jì)圖稿

我從麥當(dāng)勞官方網(wǎng)站中汲取了它的主題顏色，并以此設(shè)計(jì)了一個(gè)新的樣式。

在整個(gè)高保真原型圖稿過(guò)程中，我所使用的軟件是 Sketch，然后導(dǎo)入到 Figma（共享原型更容易）。

歡迎主界面

由于我找不到比較好的“堂食（Dine In）”／“打包（Take Away）”的圖標(biāo)，我只好自己用 Sketch 畫了一個(gè)。

另外，我把“語(yǔ)言選擇”選項(xiàng)移到了最右上角。

主界面／餐品選擇

我把單個(gè)餐款用卡片的形式表達(dá)，并且給被選中的項(xiàng)目添加了黃色高亮邊框。此外，我也在屏幕右上角添加了一個(gè)搜索欄。

飲品個(gè)性化選擇

如我之前所提到的，這個(gè)部分完全替換了之前低保真的版本?？蛻魰?huì)看見他們預(yù)選擇的飲品，并可以隨心改變選擇另外一個(gè)。隨后有一個(gè)確認(rèn)按鈕出現(xiàn)，指示出來(lái)這里有一個(gè)改變發(fā)生。

甜品／配餐選擇

當(dāng)用戶只想點(diǎn)甜品或者配餐的時(shí)候，他們就不會(huì)看見一大堆沒有必要出現(xiàn)界面。他們只需要選擇他們想點(diǎn)的物品，因?yàn)橛行┪锲凡⒉恍枰魏蝹€(gè)性化選擇。

訂單列表&付款選項(xiàng)

為了能表達(dá)更加清晰的信息，我改變了一些按鈕上的文字。我也把付款列表重新組織分類了，這樣就能讓用戶更清晰意識(shí)到有哪些可能的動(dòng)作會(huì)發(fā)生。

完成界面（打包或堂食）

左圖：打包的“感謝”畫面；右圖：堂食

堂食體驗(yàn)的再設(shè)計(jì)

我重新設(shè)計(jì)的堂食訂單界面與目前麥當(dāng)勞系統(tǒng)里的界面完全不同。我把“用戶得到一個(gè)桌牌號(hào)碼，再輸入回系統(tǒng)”的流程改掉了。

我意識(shí)到，其實(shí)麥當(dāng)勞可以設(shè)計(jì)一個(gè)餐桌號(hào)碼系統(tǒng)，系統(tǒng)會(huì)自動(dòng)跟蹤這些號(hào)碼。這樣用戶只需要在他們的餐桌上等待，當(dāng)他們的號(hào)碼牌開始呼叫，用戶就可以去柜臺(tái)取餐了。

這個(gè)新出爐的系統(tǒng)去掉了讓用戶輸入桌號(hào)進(jìn)系統(tǒng)，讓工作人員送到餐桌的流程（因?yàn)楫?dāng)人滿為患的時(shí)候，效率會(huì)更低）。

最后定稿的版本附在這里: McD Kiosk System。

學(xué)習(xí)總結(jié)

在設(shè)計(jì)的每個(gè)階段反復(fù)測(cè)試

根據(jù)我做的用戶畫像和故事板，對(duì)于如何解決現(xiàn)有的體驗(yàn)問(wèn)題，我一開始覺得我的想法還不錯(cuò)。最初我預(yù)想新版設(shè)計(jì)會(huì)非常的流暢，但其實(shí)到最后，我邊做草圖邊更改了很多東西。從低保真到高保真，基本上整個(gè)過(guò)程都有各種變動(dòng)。

建立設(shè)計(jì)環(huán)境的重要性

完成低保真原型圖后，我并沒有立馬動(dòng)手開始制作高保真原型圖。

動(dòng)手之前，我先對(duì)顏色和字體的使用做了一些搜索和研究，再對(duì)整個(gè)系統(tǒng)的風(fēng)格做了一個(gè)設(shè)計(jì)規(guī)范準(zhǔn)則。這樣為我后面的設(shè)計(jì)提高了很多效率，節(jié)省了很多修改的時(shí)間。

可以改進(jìn)的事情

更好的搜索／研究方式

我做研究時(shí)，除了使用用戶畫像和故事板之外，缺少一些比較有力的方法。通常我對(duì)手機(jī)用戶行為的知識(shí)，來(lái)自于對(duì)朋友的觀察、經(jīng)驗(yàn)或者 facebook 上的留言。

用戶測(cè)試

我把這個(gè)高保真原型圖發(fā)給了一些我的開發(fā)者朋友看，他們給了我一些非常好的建議，我根據(jù)他們的建議對(duì)我的定稿做了一些改進(jìn)。其實(shí)，除了程序員和開發(fā)者，我可以給更多的人群去看和測(cè)試，聽聽他們對(duì)整個(gè)交互流程的感受。

編譯作者：嘻嘻，多倫多，多媒體設(shè)計(jì)師

編輯整理：三分設(shè)運(yùn)營(yíng)編輯皮皮

原文作者：Cs Leong

原文地址：https://uxdesign.cc/mcdonalds-kiosk-ordering-system-ui-ux-case-study-fe7b3693f12c

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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