點擊上方“三分設”→點擊右上角“...”→點選“設為星標★”
趕緊為三分設點上★，幫助全球1億設計師成長
正文共：4286字30圖預計閱讀時間：11分鐘
編譯作者|嘻嘻|倫敦|多媒體設計師
評審指導|TCC委員團|胖魚、呵呵、彈跳
編輯整理|三分設營運編輯|皮皮
為何想做這個研究的誘因
幾個禮拜前，我和我的家人一起去肯德基買早餐吃，之后我們發覺在星巴克店旁邊安了三臺新的自動點單機器。我讓我媽媽和我弟弟去操作這個系統，我在門口觀察她們使用這個系統點單的交互過程。其中，我爸和我哥都在瀏覽菜單的時侯遇見了問題，尤其是在她們具體選擇哪款餐品的過程中。接出來我將會把她們在點單和付款過程中遇見的問題一一解析。
問題
1.選擇餐款
這個選擇過程相關的互動操作是一個列表，這個列表是一個由圖標組成的，在屏幕的最左邊，可上下滑動來瀏覽的列表。其實這兒沒有任何提示或指示表明這是一個可滑動的菜單，但辛運的是，人們可以清楚意識到這個列表可以通過往上／往下滑動去獲得更多的選項，而并不止是目前畫面所展示下來的。
2.選擇好餐款后的個性化選項
其實的，這是最難的一個部份。這個部份的流程是，當你選擇好了你想買的披薩或套餐后，接著選擇大小、種類、配餐和啤酒。當我媽媽嘗試去換一種啤酒時，他找不到他想要的那一款（他只能看到目前顯示的6個選項）。最后只能換成我來幫他點單，我通過了一個向下滾動的動作，找到了更多的選項。當我如此做的時侯，他倍感很吃驚，完全沒想到還可以有這些操作。除此之外，這個機器也不能提供把套餐里附贈的馬鈴薯換成牛排的選項（不過我猜是由于她們是沒有更新菜單）。
3.付賬過程中的問題
這是所有流程中的最后一步。我發覺點餐系統軟件，這兒所提供的支付選項很奇怪，這兒有兩個選項：有在機器付款；或在柜臺人工付款（傳統方法）。我感覺這兒完全沒有要設置去柜臺人工付款的必要，雖然我感覺你們不可能在機器選好了又挪到柜臺再度排隊付賬。但是很有意思的是，我媽媽選擇了“去柜臺付賬”，這一舉動又引起了另一個很有意思的用戶體驗問題。當他選擇了這個選項后，機器讓我們取了一個號碼牌。我們所理解的是，這個號碼是我們的訂單號碼，工作人員會按照這個號碼給我們提供剛才選好的餐飲。并且我們錯了（不是完全錯誤）！屏幕給我們的號碼是53，但號碼牌又是175，這讓人十分的苦惱。在我們去付完款以后，我們又得到了一個支票，里面有除上述說的號碼之外的第三個號碼：157。我們大約等了差不多45分鐘才吃上東西。對于一個快餐來說，這是一個十分差的體驗，整個點餐和支付系統特別嘲弄的反倒增加了效率。
4.餐號呼叫系統
在快餐店，人們雖然早已習慣了在短時間內，能夠自己去柜臺取餐。而系統提供的服務是讓顧客坐在座位上等待，工作人員會依照號碼牌給你送來餐飲。但是在事情的最后，還是工作人員在喊餐號讓顧客去取餐。并且這個號碼牌又和真正的訂單號不一樣，等于說兩個不同的號碼系統同時在運作，假如我沒仔細區分的話，我都得不到我點的餐了。
5.在付款以后，我們又被要求要取一個桌號之后把桌號輸入進系統
研究
我主要使用的方式就是觀察。我媽媽和我的妹妹是這次我所研究的人物角色。其中我也去觀察了其他的路人使用這個系統。我發覺，通常人們一次只點一個物品的時侯沒有遇到大問題，都比較流暢。當想點多個物品的時侯，一些剛才我們遇見過的問題就出現了。依然有一定的人會選擇“在柜臺支付”，最后她們又得悉柜臺再排一次隊（是的，有的時侯收銀員甚至都不在，還得等她們過來）。
第三天實地考察
父親和我弟弟第一次體驗肯德基點餐系統。
第二天實地考察
一周后，我又去了另外一家星巴克分店觀察用戶的使用行為。
這個店面比較慘的一點是仍然須要有一個工作人員在點餐機器旁協助顧客使用該系統點單。
第一天實地考察
第二天，我帶我母親去了同一家星巴克分店，但這一次我自己測試了這個點餐系統。我母親在旁將整個過程錄影出來（這既有趣也很能幫助洞察問題）。
剖析
用戶畫像
用戶故事板
這是一個我按照前面兩個人物創造的故事板，這個故事里的人物的名子稱作Jhen。
構思和草稿
在我畫這個草稿之前，我先了一下關于快餐行業使用機器點餐系統的情況，我發覺KFC也有使用這些系統。我沒法找到相關短片去了解它是如何運作的，但我找到了一個關于肯德基推廣該系統的宣傳短片。這個短片述說的是一個服務員教導你們怎么使用這個系統。
關于單個物品點單流程的初步草稿
單個物品點單支付流程草圖
套餐／多個物品點餐流程草圖
我所定義的幾個主要需求
1.關于一個物品面臨分類重疊時，怎樣去組織
2.食物個性化選項怎么簡化
3.當用戶想退回上一步選項或回主頁時，怎么讓用戶得到清晰的指示
4.為了節約用戶等待時間，怎樣將支付顯得愈發效率
五保戶真線框圖
按照我之前所勾畫的草圖，我作出了以下的線框圖。我按照自己的觀點提出了優化后的系統，借以讓用戶覺得更舒服，但是愈發美觀。這也會幫助我在整個流程中發覺并更正問題。
重復測試線框圖
我創建了更多相同類型操作的版本來進行比較
1.主菜單
2.食物種類選擇的展示
3.甜品／配餐的選擇
4.食物信息界面
5.啤酒個性化選擇
主菜單比較
我將“完成(Done)”菜單除去了，由于它并沒有承載任何有意義的動作。只有在更新訂單、加入列表的情況下，該菜單就會出現。
食物種類選擇展示方法比較
愈加有組織，但是更重視用戶新劃動下來的選項。
甜品／配餐的選擇
作出了3個版本，但最后我選了最后一個（最右側那種）。由于左側兩個都有些毋須要的空白，用戶會因而看不見其他的內容。
食物信息界面
兩側的這一個圖，和目前肯德基分店使用一樣。一開始我認為繼續使用不修改也沒有問題，直至我測試后發覺，雖然這兒根本不須要兩種不同的按鍵（訂制／更改），雖然它們都是引導向同一個界面。于是我把這兩個按鍵合并成了一個，除去了更改按鍵，留下了訂制按鍵。點擊后，新彈出的界面都可以調整規格和細節選擇。
飲料個性化選擇
（在設計高保真圖時，這個看法最終被廢棄了）這個部份是我最新設計的該界面，是所有版本里最流暢的。
在以后的高保真原型圖設計中，最初的線框圖被廢除是由于它并不支持啤酒的氣溫選擇，而且中間有過多的頁面過渡。新版本的設計促使用戶可以在一個界面里完成所有的啤酒個性化選擇。
高保真設計原稿
我從星巴克官方網站中吸取了它的主題顏色，并借此設計了一個新的式樣。在整個高保真原型原稿過程中，我所使用的軟件是，之后導出到Figma（共享原型更容易）。
歡迎主界面
因為我找不到比較好的“堂食（DineIn）”／“打包（TakeAway）”的圖標，我只得自己用畫了一個。另外，我把“語言選擇”選項移到了最右上角。
主界面／餐品選擇
我把單個餐款用卡片的方式抒發，而且給被選中的項目添加了紅色高亮邊框。據悉，我也在屏幕右上角添加了一個搜索欄。
飲料個性化選擇
如我之前所提及的，這個部份完全替換了之前五保戶真的版本。顧客會看到她們預選擇的飲料，并可以隨心改變選擇另外一個。隨以后有一個確認按鍵出現，指示下來這兒有一個改變發生。
甜品／配餐選擇
當用戶只想點甜品或則配餐的時侯，她們就不會看到一大堆沒有必要出現界面。她們只須要選擇她們想點的物品，由于有些物品并不須要任何個性化選擇。
訂單列表&付款選項
為了能抒發愈發清晰的信息，我改變了一些按鍵上的文字。我也把付款列表重新組織分類了，這樣能夠讓用戶更清晰意識到有什么可能的動作會發生。
完成界面（打包或堂食）
左圖：打包的“感謝”畫面;下圖：堂食
堂食體驗的再設計
我重新設計的堂食訂單界面與目前肯德基系統里的界面完全不同。我把“用戶得到一個桌牌號碼，再輸入回系統”的流程改掉了。
我意識到，雖然漢堡王可以設計一個茶幾號碼系統，系統會手動的跟蹤那些號碼，這樣用戶只須要在她們的飯桌上等待，當她們的號碼牌開始呼叫，用戶就可以去柜臺取餐了。
這個新揭曉的系統去除了讓用戶輸入桌號進系統，讓工作人員送到茶幾的流程（由于當人滿為患的時侯，效率會更低）。最后初稿的版本附在這兒:McDKiosk。
學習總結
1.在設計的每位階段反復測試——根據我做的用戶畫像和故事板，對于怎樣解決現有的體驗問題點餐系統軟件，我一開始認為我的看法還不錯。最初我想像新版設計會特別的流暢。但雖然到最后，我邊做草圖邊修改了好多東西，從五保戶真到高保真，基本上整個過程都有各類變動。
2.構建設計環境的重要性——完成五保戶真原型圖后，我并沒有立刻動手開始制做高保真原型圖。動手之前，我先對顏色和字體的使用做了一些搜索和研究，再對整個系統的風格做了一個設計規范準則，這樣為我旁邊的設計增強了好多效率，節約了好多更改的時間。
可以改進的事情
更好的搜索／研究方法——我做研究時，不僅使用用戶畫像和故事板之外，缺乏一些比較有力的方式。一般我對手機用戶行為的知識，來自于對同學的觀察、經驗或則上的留言。
用戶測試——我把這個高保真原型圖發給了一些我的開發者同學看，她們給了我一些特別好的建議，我依據她們的建議對我的初稿做了一些改進。雖然不僅程序員和開發者，我可以給更多的人群去看和測試，聽聽她們對整個交互流程的體會。
原文作者|CsLeong
免責聲明：部分文章信息來源于網絡以及網友投稿，本站只負責對文章進行整理、排版、編輯，出于傳遞更多信息之目的，并不意味著贊同其觀點或證實其內容的真實性，如本站文章和轉稿涉及版權等問題，請作者在及時聯系本站，我們會盡快為您處理。
