筆者由一次不好的麥當勞點餐體驗開始了對于該系統的研究和分析，根據點餐過程的問題進行了針對性優化。

幾個星期前，我和我的家人一起去麥當勞買午餐吃，然後我們發現在麥當勞店門口安了三台新的自動點單機器。我讓我爸爸和我哥哥去操作這個系統，我在旁邊觀察他們使用這個系統點單的交互過程。

其中，我爸和我哥都在浏覽菜單的時候遇到了問題，尤其是在他們具體選擇哪款餐品的過程中。接下來我将會把他們在點單和付款過程中遇到的問題一一解析。

問題

1. 選擇餐款

這個選擇過程相關的互動操作是一個列表，這個列表是一個由圖标組成的，在屏幕的最左側，可上下滑動來浏覽的列表。

雖然這裡沒有任何提示或指示表明這是一個可滑動的菜單，但幸運的是，人們可以清楚意識到這個列表可以通過往上／往下滑動去獲得更多的選項，而并不止是目前畫面所展示出來的。

2. 選擇好餐款後的個性化選項

顯然，這是最難的一個部分。

這個部分的流程是，當你選擇好了你想買的漢堡或套餐後，接着選擇大小、種類、配餐和飲料。當我爸爸嘗試去換一種飲料時，他找不到他想要的那一款（他隻能看見目前顯示的6個選項）。

最後，隻能換成我來幫他點單，我通過了一個向上滾動的動作，找到了更多的選項。當我這麼做的時候，他感到很驚訝，完全沒想到還可以有這種操作。

除此之外，這個機器也不能提供把套餐裡贈送的玉米換成薯條的選項（不過我猜是因為他們是沒有更新菜單）。

3. 付賬過程中的問題

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

我發現，這裡所提供的支付選項很奇怪，這裡有兩個選項：在機器付款或在櫃台人工付款（傳統方式）。

我覺得這裡完全沒有設置去櫃台人工付款的必要，畢竟大家不可能在機器選好了又跑到櫃台再次排隊付賬。然而，很有意思的是，我爸爸選擇了“去櫃台付賬”，這一舉動又引發了另一個很有意思的用戶體驗問題。

當他選擇了這個選項後，機器讓我們取了一個号碼牌。我們所理解的是，這個号碼是我們的訂單号碼，工作人員會根據這個号碼給我們提供剛剛選好的餐飲。

但是，我們錯了（不是完全錯誤）！

屏幕給我們的号碼是53，但号碼牌又是175，這讓人非常困惑。在我們去付完款之後，我們又得到了一個收據，上面有第三個号碼：157。

我們大概等了差不多45分鐘才吃上東西，對于一個快餐來說，這是一個非常差的體驗。整個點餐和支付系統非常諷刺，反而降低了效率。

4. 餐号呼叫系統

在快餐店，人們其實已經習慣了在短時間内，就能自己去櫃台取餐。而系統提供的服務，是讓客人坐在座位上等待，工作人員會根據号碼牌給你送來餐飲。

然而，在事情的最後，還是工作人員在喊餐号讓客人去取餐。而且這個号碼牌又和真正的訂單号不一樣，等于說兩個不同的号碼系統同時在運作。如果我沒仔細分辨的話，我都得不到我點的餐了。

5. 付款後

在付款之後，我們又被要求要取一個桌号，然後把桌号輸入進系統。

研究

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

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

我發現，一般人們一次隻點一個物品的時候，沒有碰到大問題，都比較流暢。當想點多個物品的時候，一些剛剛我們遇到過的問題就出現了。仍然有一定的人會選擇“在櫃台支付”，最後他們又得知櫃台再排一次隊（是的，有的時候收銀員甚至都不在，還得等他們過來）。

第一天實地考察

爸爸和我哥哥第一次體驗麥當勞點餐系統。

第二天實地考察

一周後，我又去了另外一家麥當勞門店觀察用戶的使用行為。

這個門店比較慘的一點是，一直需要有一個工作人員在點餐機器旁，協助客戶使用該系統點單。

第三天實地考察

第二天，我帶我媽媽去了同一家麥當勞門店，但這一次我自己測試了這個點餐系統。我媽媽在旁将整個過程錄影下來，這既有趣也很能幫助洞察問題。

分析

用戶畫像

用戶故事闆

這是一個我根據上面兩個人物創造的故事闆，這個故事裡的人物的名字叫做 Jhen。

構思和草稿

在我畫這個草稿之前，我先 Google 了一下關于快餐行業使用機器點餐系統的情況。我發現 KFC 也有使用這種系統，我無法找到相關短片去了解它是怎樣運作的。

但我找到了一個關于麥當勞推廣該系統的宣傳短片，這個短片講述的是一個服務員教導大家如何使用這個系統。

關于單個物品點單流程的初步草稿：

單個物品點單支付流程草圖：

套餐／多個物品點餐流程草圖：

我所定義的幾個主要需求：

• 關于一個物品面臨分類重疊時，如何去組織；
• 食物個性化選項如何簡化；
• 當用戶想退回上一步選項或回主頁時，如何讓用戶得到清晰的指示；
• 為了節省用戶等待時間，如何将支付變得更加效率。

低保真線框圖

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

我根據自己的觀點提出了優化後的系統，旨在讓用戶感覺更舒服，而且更加美觀，這也會幫助我在整個流程中發現并更正問題。

重複測試線框圖

我創建了更多相同類型操作的版本來進行比較：

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

主菜單比較

我将“完成(Done)”菜單去掉了，因為它并沒有承載任何有意義的動作。隻有在更新訂單、加入列表的情況下，該菜單才會出現。

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

更加有組織，而且更注重用戶新劃動出來的選項。

甜品／配餐的選擇

做出了3個版本，但最後我選了最後一個（最右邊那個）。因為左邊兩個都有些不必要的空白，用戶會因此看不見其他的内容。

食物信息界面

左側的這一個圖，和目前麥當勞門店使用一樣。一開始我覺得繼續使用不更改也沒有問題，直到我測試後發現，其實這裡根本不需要兩種不同的按鈕（定制 customize／修改 change options），其實它們都是引導向同一個界面。

于是，我把這兩個按鈕合并成了一個，去掉了修改按鈕，留下了定制按鈕。點擊後，新彈出的界面都可以調整尺寸和細節選擇。

飲品個性化選擇

（在設計高保真圖時，這個想法最終被廢棄了）這個部分是我最新設計的該界面，是所有版本裡最流暢的。

在之後的高保真原型圖設計中，最初的線框圖被廢除。這是因為它并不支持飲料的溫度選擇，并且中間有過多的頁面過渡。

新版本的設計使得用戶可以在一個界面裡，完成所有的飲料個性化選擇。

高保真設計圖稿

我從麥當勞官方網站中汲取了它的主題顔色，并以此設計了一個新的樣式。

在整個高保真原型圖稿過程中，我所使用的軟件是 Sketch，然後導入到 Figma（共享原型更容易）。

歡迎主界面

由于我找不到比較好的“堂食（Dine In）”／“打包（Take Away）”的圖标，我隻好自己用 Sketch 畫了一個。

另外，我把“語言選擇”選項移到了最右上角。

主界面／餐品選擇

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

飲品個性化選擇

如我之前所提到的，這個部分完全替換了之前低保真的版本。客戶會看見他們預選擇的飲品，并可以随心改變選擇另外一個。随後有一個确認按鈕出現，指示出來這裡有一個改變發生。

甜品／配餐選擇

當用戶隻想點甜品或者配餐的時候，他們就不會看見一大堆沒有必要出現界面。他們隻需要選擇他們想點的物品，因為有些物品并不需要任何個性化選擇。

訂單列表&付款選項

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

完成界面（打包或堂食）

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

堂食體驗的再設計

我重新設計的堂食訂單界面與目前麥當勞系統裡的界面完全不同。我把“用戶得到一個桌牌号碼，再輸入回系統”的流程改掉了。

我意識到，其實麥當勞可以設計一個餐桌号碼系統，系統會自動跟蹤這些号碼。這樣用戶隻需要在他們的餐桌上等待，當他們的号碼牌開始呼叫，用戶就可以去櫃台取餐了。

這個新出爐的系統去掉了讓用戶輸入桌号進系統，讓工作人員送到餐桌的流程（因為當人滿為患的時候，效率會更低）。

最後定稿的版本附在這裡: McD Kiosk System。

學結

在設計的每個階段反複測試

根據我做的用戶畫像和故事闆，對于如何解決現有的體驗問題，我一開始覺得我的想法還不錯。最初我預想新版設計會非常的流暢，但其實到最後，我邊做草圖邊更改了很多東西。從低保真到高保真，基本上整個過程都有各種變動。

建立設計環境的重要性

完成低保真原型圖後，我并沒有立馬動手開始制作高保真原型圖。

動手之前，我先對顔色和字體的使用做了一些搜索和研究，再對整個系統的風格做了一個設計規範準則。這樣為我後面的設計提高了很多效率，節省了很多修改的時間。

可以改進的事情

更好的搜索／研究方式

我做研究時，除了使用用戶畫像和故事闆之外，缺少一些比較有力的方法。通常我對手機用戶行為的知識，來自于對朋友的觀察、經驗或者 facebook 上的留言。

用戶測試

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

編譯作者：嘻嘻，多倫多，多媒體設計師

編輯整理：三分設運營編輯皮皮

原文作者：Cs Leong

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

本文由 @三分設 翻譯發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部