磁磚清潔

文章来源：由「百度新聞」平台非商業用途取用"https://baijiahao.baidu.com/s?id=1651598640535691797&wfr=spider&for=pc"

人人都是產品經理發布時間：19-11-3012:13深圳聚力創想信息科技有限公司筆者由一次不好的麥當勞點餐體驗開始了對于該系統的研究和分析，根據點餐過程的問題進行了針對性優化。幾個星期前，我和我的家人一起去麥當勞買午餐吃，然后我們發現在麥當勞店門口安了三臺新的自動點單機器。我讓我爸爸和我哥哥去操作這個系統，我在旁邊觀察他們使用這個系統點單的交互過程。其中，我爸和我哥都在瀏覽菜單的時候遇到了問題，尤其是在他們具體選擇哪款餐品的過程中。接下來我將會把他們在點單和付款過程中遇到的問題一一解析。問題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.ccmcdonalds-kiosk-ordering-system-ui-ux-case-study-fe7b3693f12c本文由 @三分設 翻譯發布于人人都是產品經理，未經許可，禁止轉載。題圖來自Unsplash，基于CC0協議舉報反饋

關鍵字標籤：ipad點餐系統