[譯] 可口可樂自由風格售賣亭界面使用者體驗的回顧和重新設計

<b>本文講的是[譯] 可口可樂自由風格售賣亭界面使用者體驗的回顧和重新設計，</b>

<b></b>

一個可口可樂自由風格售賣亭的界面

了解這個售賣亭和它的使用者體驗

找到痛點以及使用者體驗的障礙

優化可口可樂自由風格售賣亭的使用者體驗和界面設計

這是這個項目的設計流程

在重新設計中我遵循了簡單的設計流程。

我自己之前從來沒有用過這個機器，是以我需要了解它是如何工作的，以及它的使用環境。觀察這個機器在不同的餐館和電影院中如何被使用提供了重要的場景。

之後我做了一些快速使用者測試，詢問了當他們接飲料時在想什麼。我把我的觀察和使用者訪談做了筆記，并分析資料以搞清楚他們的意義。這驅動了在這篇文章中提到的再設計。

我去了我所在區域附近有該機器的幾家大衆餐館。主要目的是了解使用者，環境和使用場景。通過和當地從業人員交流我也發現了（裝置使用的）高峰時段。

環境

售賣機主要被放置在餐館裡，還有電影院等休閑場所。

（這些場所）在周末，假期，以及工作日的特定時間會是高峰期。

高峰時經常會排隊。

終端使用者

機器的終端使用者包括

年齡段：青少年及以上（夠不着螢幕，不能操作螢幕的群體除外）

對熱量和咖啡因有不同偏好的群體

參與人數：4

熟悉程度：兩人第一次用，兩人曾經用過

時間：8、9 分鐘左右

來自使用者測試的記錄：

曾經用過的使用者明确的知道他們想要喝什麼。他們快速的挑選類别，對圖形界面很熟悉。

新使用者花了很長時間做選擇，他們在不同的幾種主要飲料種類中糾結了一會兒。

新使用者對螢幕底部的「Push」按鈕也感到疑惑。

一些使用者在裝滿杯子前想「嘗試」新的味道或者是混合飲料。是以，他們也有許多反複的（操作）。

一些使用者建議

「哇，太多選項了！」 「我選的飲料通常在這兒」，使用者指着飲料按鈕說。 「我是否需要按住「Push」鍵？」

在界面和使用者流等不同問題上，使用者測試給了我一些很好的啟發。為了了解更多，我們來探讨一下現有的使用者流程。從使用者站在售賣機前開始，到得到一杯飲料，過程如下圖所示。

得到一杯飲料或者創造混合飲料的流程

這是一個最好的使用者流程用例，适用于絕大多數的使用者。雖然它一開始看起來相當簡單，但是當使用者沒有想好要什麼飲料時，這裡最主要的障礙就是認知過載。 每一屏上面都有 8 到 15 個選項可供選擇。在這種情況下作出決策是相當困難的。而現有的設計并沒有幫助（使用者做出選擇）。 當使用者需要創造一種混合飲料的時候花費的時間會更多。

移動應用的使用者流程

在售賣機上使用應用會稍稍簡化流程，通過為使用者準備好混合飲料節約了時間，是以他們不需要每次都浏覽和選擇。

一個螢幕内展示 15 種飲料！

對于新使用者和想要混合口味的使用者來說，有太多反複的步驟

對于「push」按鈕的初始認知不明确

螢幕逾時的時間太短-造成了緊迫感

過濾器中可以不含咖啡因或者低熱量，但不能同時過濾

獲得一些正常口味的飲料像可樂和雪碧也需要太長時間。

根據前一階段的發現，可以對使用者體驗進行細化，如下所示。輔助的移動應用也被考慮進行重新設計。首先讓我們看看為了重新設計而定制的一些目标，限制和假設。

對于大多數人來說減少獲得飲料所需要的步驟數

減少認知負荷

讓創造混合（飲料）更簡單

讓導航更簡單

主要的限制就是觸屏，它是電阻式觸屏，适用于輕擊的互動，而不太适合更進階的手勢。

售賣機可以給可口可樂（或者服務商）提供資料回報

可口可樂和合作夥伴持續使用這些資料分析并優化産品。

在快速産生創意上草圖十分強大，我從做這些最初的草圖中得到了最終的重新設計（方案），

探索一些初步的概念

一些混合飲料的概念

這些初步的原型是用 Balsamiq 制成的。（他們源于大量的快速草圖）

左邊：初始化界面 || 右邊：使用者選擇一種飲料後的界面

思考下面的界面

左邊：初始化界面由最受使用者歡迎的飲料産品構成。請注意，「低熱量」和「不含咖啡因」是過濾條件。使用者可以選擇兩者，減少後續螢幕中的選項。

右邊：使用者選擇了一種飲料後，系統「推薦」四種流行口味的飲料。請注意，這裡有八種飲料可以選擇。

這是更好的嗎？那麼，使用資料回報的建議，設計 可以更容易的從大約 100 個總數中選出 48 種最受歡迎的飲料。

左邊：在選擇的飲料已經确定時 || 右邊：使用者接飲料時

上面的兩個界面顯示了接選中的飲料的流程。請注意，描述為「按住」，解決了使用者早期對系統的混淆。作為改善微互動的一部分，它也相應了使用者界面上的按鈕。

另一個重要的事情需要注意-這一行圓圈，這些是添加飲料到目前飲料中的建議。使用者可以快速按下這些選項之一，并将其添加到混合飲料中。再一次強調，這些來源于資料的支援。

在使用者選擇第二種飲料混合後

其他的關鍵點

設計使其易于導航。分頁操作是一個容易的來回查找的設計，并且給出了可選擇的全部選項的預期。

為了混合，使用者還可以随時傳回選擇不用的飲料。這個設計試圖簡化此過程，但也使使用者可以靈活的傳回或重新開始。

讓我們考慮如何 在資料驅動的支援下，針對大多數人， 改變使用者流。

重新設計的使用者流

移動應用已經能創造更好的體驗。但還可以進一步改善。讓我們來看看我們如何在移動應用上選擇飲料，以及如何改進。

左邊：目前選擇飲料的界面 || 右邊：一個下拉搜尋的設計

現在讓我們看一看一些高保真設計，基于一些使用者回報，與低保真界面相比有一些小的變化。

左邊：開始螢幕。該界面展示了第一頁上最受歡迎的六種飲料。 || 右邊：當使用者點選一杯飲料後，變化如圖所示。

開始畫面上的一個變化是水圖示被移到了右上角以獲得更多的可見性，并且該按鈕也用了圓形更符合飲料的圖示形狀。

左邊：一旦使用者選擇了一個飲料的變種，就把它倒入杯子裡。||右邊：當使用者按下「Push」按鈕時 UI 界面的回報。

這些界面和低保真設計有一些不同。再最終版本中還有一個附加列-「混合飲料建議」旁邊的「其他選擇」。這更清楚的表達了使用者（可以進行）的選擇。如果使用者想要選擇與推薦的飲料不同的風味，這會引導他們進行下一步。

左邊：使用者點選推薦的第二杯飲料進行混合後，顯示這個界面。|| 右邊： 從開始的界面（界面 1），點選「水果味」進入此界面。

6 号螢幕顯示「水果味」的選擇。最受歡迎的五種口味顯示在頂部并十分突出。下面顯示不太受歡迎的口味。Kiosk 上有三種「混合」口味，這些都是混合口味。選擇一個這些選項将顯示類似于螢幕 2 的選項。

點選原型

<a href="https://link.juejin.im/?target=https%3A%2F%2Fmarvelapp.com%2F28f7gbe%3Femb%3D1%26amp%3Breferrer%3Dhttps%253A%252F%252Fmedium.com%252Fmedia%252F1dba6e6eec95ce7b8611343aef3c1237%253FpostId%253Df77fc087c09" target="_blank"></a>

雖然重新設計解決了一些關鍵點，但仍存在一些不足。

目前設計将更受歡迎的選項優先于不常見的選項，如果使用者想要不常見的選項，可能需要多做幾步。

如果使用者想要使用于推薦的口味不同的口味混合，需要重新開始活着回到口味選擇頁面，然後挑選另一種飲料。

<b>原文釋出時間為：2017年6月22日</b>

<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>