麥當勞自動點餐系統案例分析

產品老司機手把手教寫文檔,10天線上課程,零基礎掌握產品經理必備7大文檔撰寫法。了解一下>

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

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

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

問題

1. 選擇餐款

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

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

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

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

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

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

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

3. 付賬過程中的問題

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

我發現,這里所提供的支付選項很奇怪,這里有兩個選項:在機器付款或在柜臺人工付款(傳統方式)。

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

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

但是,我們錯了(不是完全錯誤)!

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

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

4. 餐號呼叫系統

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

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

5. 付款后

在付款之后,我們又被要求要取一個桌號,然后把桌號輸入進系統。

研究

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

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

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

第一天實地考察

麥當勞自動點餐系統UI/UX案例分析

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

第二天實地考察

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

麥當勞自動點餐系統UI/UX案例分析

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

第三天實地考察

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

分析

用戶畫像

麥當勞自動點餐系統UI/UX案例分析

麥當勞自動點餐系統UI/UX案例分析

用戶故事板

這是一個我根據上面兩個人物創造的故事板,這個故事里的人物的名字叫做 Jhen。

麥當勞自動點餐系統UI/UX案例分析

麥當勞自動點餐系統UI/UX案例分析

構思和草稿

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

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

麥當勞自動點餐系統UI/UX案例分析

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

麥當勞自動點餐系統UI/UX案例分析

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

麥當勞自動點餐系統UI/UX案例分析

套餐/多個物品點餐流程草圖:

麥當勞自動點餐系統UI/UX案例分析

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

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

低保真線框圖

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

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

麥當勞自動點餐系統UI/UX案例分析

重復測試線框圖

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

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

主菜單比較

麥當勞自動點餐系統UI/UX案例分析

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

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

麥當勞自動點餐系統UI/UX案例分析

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

甜品/配餐的選擇

麥當勞自動點餐系統UI/UX案例分析

做出了3個版本,但最后我選了最后一個(最右邊那個)。因為左邊兩個都有些不必要的空白,用戶會因此看不見其他的內容。

食物信息界面

麥當勞自動點餐系統UI/UX案例分析

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

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

飲品個性化選擇

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

麥當勞自動點餐系統UI/UX案例分析

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

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

高保真設計圖稿

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

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

麥當勞自動點餐系統UI/UX案例分析

歡迎主界面

由于我找不到比較好的“堂食(Dine In)”/“打包(Take Away)”的圖標,我只好自己用 Sketch 畫了一個。

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

主界面/餐品選擇

麥當勞自動點餐系統UI/UX案例分析

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

飲品個性化選擇

麥當勞自動點餐系統UI/UX案例分析

如我之前所提到的,這個部分完全替換了之前低保真的版本??突Щ崢醇竊ぱ≡竦囊?,并可以隨心改變選擇另外一個。隨后有一個確認按鈕出現,指示出來這里有一個改變發生。

甜品/配餐選擇

麥當勞自動點餐系統UI/UX案例分析

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

訂單列表&付款選項

麥當勞自動點餐系統UI/UX案例分析

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

完成界面(打包或堂食)

麥當勞自動點餐系統UI/UX案例分析

左圖:打包的“感謝”畫面;右圖:堂食

堂食體驗的再設計

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

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

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

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

麥當勞自動點餐系統UI/UX案例分析

學習總結

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

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

建立設計環境的重要性

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

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

可以改進的事情

更好的搜索/研究方式

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

用戶測試

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

 

編譯作者:嘻嘻,多倫多,多媒體設計師

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

原文作者:Cs Leong

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

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

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 國內麥當勞挺方便的啊

    回復
  2. 體驗不好就是因為點餐系統后號碼牌系統是不同廠家設計的。沒有辦法兼容哈。。

    回復