智慧販賣機的觸控螢幕 UX 設計：3 秒內讓消費者完成購買的介面法則

3 秒定生死

消費者站在智慧販賣機前，從「想買」到「決定不買」的時間窗口只有 3 秒。如果螢幕上的資訊讓他猶豫、操作讓他困惑，他就轉身走了。

「便利商店的結帳流程是：拿商品、排隊、付錢。三步。智販機的流程不能比這更複雜，只能更簡單。」——李奇申

龍雲數位的 UX 設計團隊經過數千次的使用者測試和 A/B 測試，歸納出 7 條智販機觸控螢幕的設計法則。

---

法則一：首頁只放最暢銷的 6 個品項

首頁不是菜單，是銷售漏斗的第一層。

根據龍雲數位的數據，70% 的消費者購買的是首頁上展示的品項。如果首頁放了 20 個品項，消費者反而不知道選什麼。

首頁品項數	平均選購時間	轉換率
4 個	2.1 秒	78%
6 個	2.8 秒	82%
12 個	4.5 秒	65%
20 個	7.2 秒	48%

6 個是甜蜜點——足夠的選擇但不造成選擇困難。

---

法則二：圖片佔 70%，文字佔 30%

智販機不是網頁，消費者不會「閱讀」螢幕。他們用「掃視」的方式在 1 秒內找到想要的東西。

• 商品照片要大、清晰、真實
• 文字只需要：品名 + 價格
• 不需要詳細描述（沒人在販賣機前讀說明）
• 促銷標籤用顏色區隔（紅色 = 特價、綠色 = 新品）

---

法則三：購買流程不超過 3 步

最佳流程：

1. 點選商品（首頁或分類頁）
2. 確認購買
3. 選擇支付方式 → 完成

任何多於 3 步的流程都會降低轉換率。龍雲數位曾測試過加入「數量選擇」步驟（讓消費者選 1 個或 2 個），結果發現購買率下降 15%。最後決定取消這個步驟，預設數量就是 1。

---

法則四：支付方式的排列順序很重要

多元支付介面上，支付方式的排列順序直接影響消費者的選擇：

• 第一排放使用率最高的（LINE Pay、悠遊卡）
• 圖示要夠大（最小 80x80 像素）
• 每種支付方式用消費者熟悉的品牌 icon
• 最多展示 6 種，其餘收在「更多支付」

A/B 測試結果： 將 LINE Pay 從第三排移到第一排後，LINE Pay 的使用率從 22% 提升到 35%，整體客單價也因為 LINE Points 回饋效應而提升。

---

法則五：等待畫面不能空白

從消費者付款到商品出貨，通常需要 5-15 秒（冷凍食品加熱則需要 60-90 秒）。這段等待時間的螢幕顯示非常重要：

• 進度條動畫——讓消費者知道系統在運作
• 「正在為您準備...」的友善提示
• 顯示預估等待時間
• 播放品牌形象短片或下一次購買的優惠預告

絕對不能出現空白畫面或無止境的轉圈圈——這會讓消費者以為機器故障。

---

法則六：錯誤處理要人性化

支付失敗、商品售罄、機器故障——這些情況不可避免。重要的是如何處理：

錯誤類型	差的處理	好的處理
支付失敗	「Error 500」	「付款未成功，請重新嘗試或換一種支付方式」
商品售罄	灰色圖示	「已售完，為您推薦類似商品」
出貨卡住	無反應	「商品正在取出中，若未取得請撥客服 0800-XXX」

「錯誤訊息是消費者最後一次對你的印象。如果處理得好，他下次還會來；處理得差，他會拍照上網罵你。」

---

法則七：不同場域，不同介面

辦公大樓的午餐時段和夜市的週末晚上，消費者的心態和需求完全不同。龍雲數位的雲端管理平台支援遠端即時切換介面主題：

• 辦公大樓：簡潔、效率導向、突出便當和咖啡
• 學校：活潑配色、突出零食和飲料
• 醫院：大字體、高對比、突出健康食品
• 觀光區：雙語介面（中/英或中/日）、突出在地特色商品

---

數據驗證

龍雲數位在導入這套 UX 設計法則後的效果：

• 平均購買完成時間：從 12 秒降到 6 秒
• 購買轉換率：從 55% 提升到 78%
• 客訴率：下降 42%
• 首次使用者的完成率：從 62% 提升到 89%

好的 UX 設計不是讓介面漂亮，而是讓消費者不需要思考就能完成購買。

---

延伸閱讀

• 智慧販賣機觸控螢幕選購設計
• 智慧販賣機觸控 UI 設計
• 智慧販賣機客戶滿意度回饋
• Nielsen Norman Group — 全球 UX 設計研究與最佳實踐