阿里設(shè)計師把人機交互吃透了，這個項目案例暴露實力！

背景

1. POS收銀機是什么？

POS（Point of Sale）是指在餐廳、商場、超市、酒店等消費場所中，用于結(jié)算和支付的一種設(shè)備。

傳統(tǒng)意義上或我們印象中的POS機可能是刷卡機或集成式收銀機，但隨著餐飲行業(yè)數(shù)字化的深入，POS機也在不斷變化，功能上不僅可以結(jié)賬收銀，還可以點餐叫號，系統(tǒng)操作上也不再被受限于硬件，硬件形態(tài)也是更加靈活多變。

▲  POS收銀機的發(fā)展變化

在我們的日常生活中，POS收銀機已隨處可見，它可以是臺式一體機、稱重收銀秤、電腦、平板和移動手持終端。所以，我們現(xiàn)在稱呼的“POS機”或“POS收銀機”都已經(jīng)不再是指一種具體的設(shè)備，而是一套操作系統(tǒng)，它會以多種形態(tài)出現(xiàn)在商家的線下門店中。

▲  就餐場景中的POS收銀機

在客如云的業(yè)務(wù)中，我們也在不斷地去適配兼容更多硬件設(shè)備，商戶簽約客如云餐飲SaaS系統(tǒng)后，可以選擇購買客如云的硬件設(shè)備，也可以使用自己已有的硬件設(shè)備。

▲  客如云的POS形態(tài)

2. 為什么需要設(shè)計原則？

盡管商戶的POS硬件存在差異，但我們提供的是同一套系統(tǒng)，里面的功能非常豐富的，交互體驗會直接影響到商戶的日常經(jīng)營。那么，在面向POS機進(jìn)行產(chǎn)品設(shè)計時，我們是如何設(shè)計的？

▲  客如云的POS收銀機

其實，設(shè)計師也面臨著困惑，POS端的設(shè)計什么樣是好的，什么樣是不好的，目前缺少一套設(shè)計評判標(biāo)準(zhǔn)。我們通過調(diào)研，發(fā)現(xiàn)目前市面上在餐飲POS收銀領(lǐng)域的設(shè)計研究甚少，無法找到現(xiàn)成的答案。

2023年5月，從“人民數(shù)據(jù)研究院”發(fā)布的數(shù)據(jù)來看，中國餐飲行業(yè)經(jīng)營主體超過600萬家，從業(yè)人員超過2000萬人。每家門店至少需要1臺POS機，由此可推測使用人數(shù)約在千萬左右，而他們的體驗不該被我們所忽視。

3. 設(shè)計原則的意義是什么？

通過對POS機進(jìn)行全面的人因研究，提出對應(yīng)的設(shè)計指導(dǎo)原則，為用戶/產(chǎn)品/行業(yè)帶來價值。

▲  設(shè)計原則的意義

#02

了解用戶

首先，我們需要了解一下使用POS的用戶是誰。我們對50余家商戶從用戶、設(shè)備、環(huán)境三要素進(jìn)行完整的人因研究，去洞察用戶現(xiàn)狀和需求，并對發(fā)現(xiàn)的設(shè)計問題進(jìn)行剖析，開展相應(yīng)的實驗。

1. 使用POS收銀機的用戶有三類

一方面，我們發(fā)現(xiàn)使用POS的用戶有三種典型角色。在“正餐”業(yè)態(tài)中，會嚴(yán)格區(qū)分“收銀員”和“服務(wù)員”，他們都會使用POS機，但工作內(nèi)容和職責(zé)會存在明顯的差異；

而“點單收銀員”則主要出現(xiàn)在“輕快餐/茶飲”業(yè)態(tài)中，顧名思義，既需要負(fù)責(zé)點單，也要負(fù)責(zé)收銀結(jié)賬，有些還需要同時負(fù)責(zé)商品制作，工作中也會更加追求效率，工作壓力也會更大。

▲  角色畫像

2. 用戶感覺自己的工作很“累”

另一方面，我們發(fā)現(xiàn)所有用戶都會在某個時候感覺自己工作很“累”，在每天工作期間和結(jié)束后，容易有較強的「疲勞感」，可謂是身心俱疲，原因如下：

▲  用戶工作勞累的原因

3. 重視“低疲勞”需求

用戶在日常工作已經(jīng)很累了，為什么還要額外使用POS機，當(dāng)然是為了更好地完成工作任務(wù)，希望POS機可以幫助到他們的日常工作。作為用戶體驗從業(yè)人員，我們應(yīng)該重視用戶的低疲勞需求，努力降低用戶使用POS機乃至整個工作的疲勞度。

#03

POS設(shè)計原則

我們將疲勞分為以下四個類型，分別進(jìn)行人因研究，分析該疲勞對用戶的影響，并針對性地提出設(shè)計原則。

▲  設(shè)計原則框架

#肢體疲勞

01.簡化流程

通常POS一體機被放在一個柜臺上，用戶會站著使用觸摸屏，較長時間的工作姿勢容易損傷頸部、肩膀或手臂。

• 使用者身高與設(shè)備擺放的高度差越小，屏幕擺放越“直立”，使用者就需要將手臂高抬進(jìn)行操作，長時間操作，手臂肌肉越容易酸痛；

• 使用者身高與設(shè)備擺放的高度差越大，屏幕擺放越“平”，使用者就需要大角度低頭查看屏幕，長時間保持姿勢不變，頸椎越容易損傷。

▲  站立使用POS一體機

用戶在使用PC終端設(shè)備時，多數(shù)是以站立使用為主，這是由于老板都會要求收銀員在結(jié)賬時，站立使用POS機進(jìn)行收銀結(jié)賬，方便與顧客進(jìn)行溝通。

由于擺放鍵盤鼠標(biāo)的桌臺高度較小，站立時需要大角度彎曲頸椎和手腕，長時間使用會損傷頸椎和手腕。

▲  站立使用PC+鍵鼠

因此，設(shè)計時，應(yīng)簡化操作流程和交互方式，讓用戶能夠使用最少的步驟和努力來完成他們的任務(wù)，降低肢體疲勞。

例如，在結(jié)賬時，顧客告知收銀員需要使用現(xiàn)金作為支付方式。簡化流程的方式就包括如下：

1）提供默認(rèn)值，輸入框中直接默認(rèn)當(dāng)前的訂單金額；

2）提供選項，根據(jù)訂單金額，智能匹配出常見的收款金額作為選項，方便收銀員一鍵進(jìn)行更改；

3）可快速修改，輸入框中默認(rèn)為選中態(tài)，直接平鋪展示鍵盤，需要修改時直接輸入即可更換；

4）自動計算找零，按顧客實際多付金額進(jìn)行找零，收銀員直接點擊或輸入實時金額后，系統(tǒng)自動計算需找零的金額，省去收銀員心算和使用計算器的流程，而且還可以減少計算出錯。

▲  案例：現(xiàn)金收款

例如，顧客在紙質(zhì)菜單上勾選菜品后，服務(wù)員會對照著已勾選的菜品信息，再到POS上進(jìn)行逐個搜索與加購，最后再下單給后廚。簡化流程的方式就包括如下：

1）鍵盤不遮擋：搜索時，鍵盤不遮擋左側(cè)的購物車，在完成點單后也無需收起鍵盤，可直接進(jìn)行下單操作；

2）簡化輸入內(nèi)容：服務(wù)員可輸入菜品名稱的拼音首字母，如“土豆”的“TD”，即可直接進(jìn)行搜索；

3）考慮連續(xù)操作：在搜索結(jié)果中點擊目標(biāo)菜品，會自動清空搜索框中的內(nèi)容，并保留鍵盤，以方便服務(wù)員進(jìn)行輸入新的菜品信息。

▲  案例：連續(xù)搜索加購

例如，茶飲商戶有統(tǒng)一備料，再統(tǒng)一打印效期貼的習(xí)慣，且發(fā)現(xiàn)每天早上服務(wù)員需要一次性打印的物料數(shù)量非常多，那么在設(shè)計時，就需要提供按“物料分類”的“全選”，讓服務(wù)員可以進(jìn)行批量勾選，一次性打印。

▲  案例：打印效期貼

2.大拇指可及

用戶操作觸摸屏的不同區(qū)域時，習(xí)慣使用的手指會不同，對應(yīng)易于操作的熱區(qū)范圍也會不同。

▲  觸摸屏操作場景

對多名實驗者的大拇指進(jìn)行多點測量，測量出可操作的舒適距離和最大距離，得到主要尺寸下的熱區(qū)范圍。

▲  大拇指操作手勢熱區(qū)

因此，在設(shè)計時，需要用戶較長時間操作的內(nèi)容，應(yīng)該放置在屏幕的左右兩側(cè)或頂部，且能夠讓用戶自然觸及的區(qū)域，方便用戶將手掌托在設(shè)備的邊緣后，使用大拇指進(jìn)行單手操作，減輕手臂的負(fù)擔(dān)，提升用戶的舒適度。

例如，在結(jié)賬時，除了常見的現(xiàn)金、掃碼支付、團(tuán)購核銷，一般還可能會有儲值卡、掛賬、各大銀行App的活動等，商戶為了精準(zhǔn)記賬，就會分別為每種方式設(shè)置一個結(jié)賬方式。

當(dāng)顧客告知要使用的結(jié)賬方式后，收銀員就可以將手掌托在右側(cè)進(jìn)行滑動查找，而不是在中間區(qū)域手臂懸空進(jìn)行查找。

▲  案例：結(jié)賬收款

例如，收銀員需要去回查某個訂金詳情時，需要用戶長時間去滑動查詢的信息，那么就應(yīng)該采用右側(cè)的抽屜，而非居中的彈窗。

▲  案例：查看訂金詳情

3.易操作性

1）觸摸屏：用戶操作很容易失敗，包括同一元素需要重復(fù)點擊和滑動容易卡頓。

▲  觸摸屏操作遇到的障礙

2）PC+鍵鼠：在PC電腦的右下角通常會長駐顯示輸入法或殺毒軟件的懸浮窗信息，很容易遮擋住部分應(yīng)用中的信息，造成用戶短暫的視覺或行動障礙，不易于操作。

▲  PC操作遇到的障礙

因此，設(shè)計需要提供易于識別的點擊目標(biāo)，并采取一系列措施來確保點擊目標(biāo)在不同情況下都可以被準(zhǔn)確地點擊，以提高用戶操作的效率和準(zhǔn)確性。

例如，在彈窗中，底部的行動按鈕需要更大，采用“充滿容器”的布局方式，而非“固定尺寸+右對齊”，讓實際的點擊區(qū)域變得更大。在頁面中，圖標(biāo)按鈕的可點擊熱區(qū)需要根據(jù)情況進(jìn)行擴大，讓點擊更容易。

▲  案例：彈窗按鈕和圖標(biāo)按鈕

例如，在加購套餐時，行動按鈕的位置需要避免在右下角被完全遮擋，可以采用位置左移或尺寸增大的方式，讓用戶使用鼠標(biāo)點擊更加方便容易。

▲  案例：加購彈窗的按鈕

#視聽疲勞

4.可讀性

對不同業(yè)態(tài)下的20多家商戶，使用「光譜照度計」分別對店內(nèi)的POS收銀機從屏幕四角進(jìn)行光數(shù)據(jù)的測量，得到以下環(huán)境光數(shù)據(jù)。

▲  環(huán)境光測量

對數(shù)據(jù)進(jìn)行分析，參考國家標(biāo)準(zhǔn)《建筑照明設(shè)計標(biāo)準(zhǔn)》GB 50034-2013，得出以下環(huán)境光的結(jié)論。

▲  環(huán)境光測量結(jié)論

1）環(huán)境光照度過弱/過強對用戶的影響：在不同的環(huán)境光下，用戶分別手動調(diào)整屏幕亮度，以達(dá)到基礎(chǔ)的“能看”水平，但由于大部分的環(huán)境都處于過強或過弱的極端光環(huán)境，用戶很容易無法看清對比度較低的信息。

▲  “照度過弱/過強”對用戶的影響

2）環(huán)境光分布不均勻?qū)τ脩舻挠绊懀河捎诃h(huán)境光線普遍不均勻，再加上安卓一體機通常采用高清的多點觸摸電容屏，無論使用設(shè)備傾斜為任何角度，屏幕中都會出現(xiàn)局部反光或局部無光線的情況，用戶很容易無法看清楚低對比度的信息。

▲  “光線分布不均勻”對用戶的影響

因此，設(shè)計時，需遵循色彩規(guī)范，注重內(nèi)容的可讀性，需要確保界面元素之間有足夠的對比度（符合WCAG的 AAA級 標(biāo)準(zhǔn)），以使其在高亮度和低亮度的環(huán)境下都能清晰可見，同時也要避免使用大面積的強對比色，使用戶在高亮度的環(huán)境下產(chǎn)生視覺疲勞。

例如，在訂單模塊的頂部導(dǎo)航欄會分Tab去展示來自不同渠道的訂單，為了確保在不同亮度的環(huán)境下都能夠清晰可見，Tab的文本與背景色對比度就需要至少大于7:1，而非4.5:1。

▲  案例：Tab標(biāo)簽欄

例如，在彈窗內(nèi)采用灰色背景+白色信息，既可以增強信息對比度，同時也去避免使用大面積的純白色，帶來持續(xù)性的視覺疲勞。

▲  案例：叫號取餐

5.可聽性

對多家餐廳在營業(yè)高峰時段進(jìn)行實地噪聲值測量，發(fā)現(xiàn)中式餐廳的噪音普遍高于70dB，顯得比較嘈雜。

用戶長時間（大約10分鐘~5小時）處在噪音環(huán)境下，容易感到不舒服產(chǎn)生聽覺疲勞，更嚴(yán)重會直接影響身體健康，損傷神經(jīng)細(xì)胞，導(dǎo)致聽力損傷。環(huán)境音普遍偏高，在排隊叫號、取餐叫號等場景下使用的交互類音效需超過環(huán)境音才能被用戶所聽見，卻會容易帶來新的噪音。

▲  環(huán)境音測量

因此，設(shè)計需建立聲音標(biāo)準(zhǔn)，并根據(jù)不同的業(yè)務(wù)特征，給予不同的聲音建議，讓聲音在使用時能夠精準(zhǔn)傳遞有效信息，同時保持自然流暢和調(diào)性統(tǒng)一，減輕用戶在聽取內(nèi)容時的疲勞。

▲  環(huán)境音使用標(biāo)準(zhǔn)與應(yīng)用

#認(rèn)知疲勞

用戶容易因為以下四類原因產(chǎn)生認(rèn)知疲勞，會直接導(dǎo)致用戶在使用POS時記憶力變差、操作錯誤增加、作業(yè)效率降低。因此需要遵循一定的原則去降低用戶的認(rèn)知負(fù)荷。

▲  用戶認(rèn)知疲勞的原因

6.簡單易懂

設(shè)計應(yīng)該盡可能地簡單明了，包括界面布局清晰有序、使用用戶熟悉的語言或圖形、配置所見即所得等方式，讓用戶應(yīng)該能夠快速理解并上手使用。

例如，在收銀結(jié)賬時，當(dāng)收銀員想要給顧客打9折時，可以直接選擇“9折”或輸入“9”，這更符合現(xiàn)實場景中的“打幾折”，而不是“90%”；在酒水寄存場景中，往往需要針對已有酒的刻度進(jìn)行判斷并記錄在系統(tǒng)中，服務(wù)員只能通過目測預(yù)估，無法做到非常精確，系統(tǒng)通過圖形化和“半瓶、大半瓶、小半瓶”這樣通俗文案就會更易于用戶選擇。

▲  案例：打折、酒水寄存

例如，用戶添加打印需要選擇打印機類型時，需要將用戶容易分辨的接口差異圖形進(jìn)行凸顯，讓用戶更易于選擇，而不使用純文本進(jìn)行長串的文本解釋，使得用戶困惑難懂。

▲  案例：選擇打印機類型

例如，在需要用戶配置快速結(jié)賬方式時，當(dāng)用戶對某個結(jié)賬方式進(jìn)行開啟、關(guān)閉或排序操作后，需要讓用戶在界面上可以直觀地看到自己所做的更改和調(diào)整，所見即所得，幫助用戶快速地理解并完成操作，而不是去使用靜態(tài)的樣例圖。

▲  案例：配置快速結(jié)賬方式

7.人性化幫助

設(shè)計易于訪問的幫助文檔、用戶手冊、在線客服支持等，讓用戶在遇到問題或困惑時能夠及時獲得幫助，這能夠減輕用戶的焦慮和壓力，增強用戶對產(chǎn)品的信心。

例如，在為用戶提供「幫助文檔」時，入口在頂部導(dǎo)航欄進(jìn)行長駐，讓用戶隨時能夠找得到；在查看時，在POS上只展示了標(biāo)題和摘要，文章的詳情則引導(dǎo)用戶手機掃碼到App中查看，讓用戶可以一邊查看，一邊在POS設(shè)備上進(jìn)行操作，可以邊學(xué)邊用。

▲  案例：幫助中心

8.一致性

設(shè)計需要保持界面和操作的一致性，使用戶在不同的功能之間都能夠快速適應(yīng)和操作，避免產(chǎn)生額外的認(rèn)知負(fù)荷。

例如，制定幾種典型的框架布局和通用的模態(tài)交互，來滿足各個場景的使用需求，包括全頁內(nèi)容平鋪、父子級布局、三欄布局等。

▲  案例：布局規(guī)范

#心理疲勞

9.多設(shè)備融合

POS機允許與10余種外設(shè)連接，實時交互來完成工作任務(wù)，部分功能還會非常依賴外設(shè)，一旦外設(shè)出現(xiàn)故障可能會導(dǎo)致功能完全不可用，造成流程堵塞，容易引發(fā)顧客抱怨，進(jìn)而直接增大用戶的工作壓力。

▲  POS的外設(shè)情況

因此，在設(shè)計中，應(yīng)該將不同的設(shè)備和技術(shù)進(jìn)行融合，以提供更加全面和一體化的使用體驗。

例如，在綁定智能餐盤時，可以通過圖形化智能餐盤和動效引導(dǎo)等方式來降低商戶的理解成本，讓商戶知道如何配置智能餐盤，當(dāng)前設(shè)備處于何種的狀態(tài)，避免因設(shè)備故障導(dǎo)致商戶經(jīng)營中斷，進(jìn)而引發(fā)顧客抱怨。

▲  案例：智能餐盤掃描器

例如，其他外接設(shè)備在使用中也會存在不穩(wěn)定性，那么就需要實時展示連接狀態(tài)，出現(xiàn)異常應(yīng)該及時反饋，避免在高峰作業(yè)時流程阻斷，造成顧客抱怨，進(jìn)而增加收銀員的心理壓力。

▲  案例：掃碼槍&電子秤

例如，POS機自帶副屏和掃碼窗口，那么在副屏設(shè)計時就不可重復(fù)展示掃碼窗口，避免讓顧客誤以為上面是掃描窗口，放錯手機的位置，從而增加收銀員的解釋成本。

▲  案例：顧客展示付款碼支付

例如，在顧客掃收銀員進(jìn)行付款時，會檢測當(dāng)前商家的硬件設(shè)備是否有副屏，并進(jìn)行差異化的信息展示和交互引導(dǎo)，比如有副屏則提示顧客掃副屏的收款碼，無副屏則提示打印收款碼讓顧客掃。

▲  案例：顧客掃碼支付

10.積極反饋

從用戶的反饋來看，工作的核心內(nèi)容不足以給用戶帶來價值，用戶反而需要一些情緒上的支持。

▲  用戶說

因此，在設(shè)計中，用肯定的語言表達(dá)、鼓勵性圖標(biāo)或動畫等方式，給予積極正向的反饋，增強用戶的成就感和積極情緒，減輕心理壓力。

例如，讓用戶在日常經(jīng)營中更容易察覺到「網(wǎng)絡(luò)狀態(tài)」，若當(dāng)前的網(wǎng)絡(luò)是安全穩(wěn)定的，就需要使用更明顯的安全色去表達(dá)，給用戶營造出系統(tǒng)穩(wěn)定安全的感受。

▲  案例：網(wǎng)絡(luò)狀態(tài)

例如，當(dāng)過期的「效期貼」被清理后，在界面中展示的反饋信息需要使用積極的圖形和肯定鼓勵的語言；當(dāng)用戶經(jīng)過多個步驟完成打印機的連接，需要使用肯定的圖形和鼓勵性的語言給到用戶，讓用戶覺得是自己的努力所帶來的成功。

▲  案例：完成任務(wù)

例如，根據(jù)線下餐飲文化和風(fēng)俗習(xí)慣，對商戶經(jīng)營能夠帶來積極心理的是店內(nèi)生意興隆，那么在用戶查看桌臺時，就需要避免使用一些視為不吉利的圖案：

1）在沒有顧客，桌臺都處于空狀態(tài)時，應(yīng)該避免使用大面積的黑/白/灰色；

2）在顧客人山人海，桌臺都處于就餐狀態(tài)時，應(yīng)該避免使用大面積的綠色。

▲  案例：空桌臺與滿桌臺

#04

總結(jié)

以上就是客如云在POS收銀機探索出的設(shè)計原則，后續(xù)還會不斷完善迭代，通過將人因研究和業(yè)務(wù)實踐相結(jié)合，去不斷降低用戶的工作疲勞感，減少用戶在使用過程中的肢體、視聽疲勞和認(rèn)知負(fù)荷，以提高用戶的工作效率和舒適度。

▲  10條POS設(shè)計原則

????如何領(lǐng)取本期讀者資源？先將“UXD筆記”公眾號設(shè)為??星標(biāo)，然后在后臺回復(fù)以下關(guān)鍵詞，即可實現(xiàn)無套路領(lǐng)取。

【1】回復(fù)“交互規(guī)范”——領(lǐng)大廠APP交互設(shè)計規(guī)范文檔和手勢交互詞典（指南），UX/交互設(shè)計師必看參考！

與83910位讀者一起成長

為防止走失，我們邀請你做一個小小的動作，給 UXD筆記 微信公眾號加個??星標(biāo)，方便你及時獲取大廠UX知識推送。