Self-Service 時代來臨,Kiosk 介面設計的關鍵要點與麥當勞、Amazon案例拆解

Several people using touchscreen self-order kiosks at McDonald's with dining area in the background

台灣於 2025 年正式宣告進入「超高齡社會」,65 歲以上人口比例突破 20%,與此同時,新生兒出生率持續探底。這個數字背後,正在改變許多產業的日常運作,不少店家面臨的人力不足的困境。

當勞動人口持續萎縮,以及根據經濟部的調查報告,餐飲業導入科技服務,包含手機和平板點餐和自助結帳機皆顯示逐年成長1,自助服務機台(Kiosk)的普及幾乎是可以預見的走向,在日常生活中已經不難發現:屈臣氏導入自助結帳機台、麥當勞門市配置自助點餐系統,越來越普及。本篇從設計師的角度出發,探討 Kiosk 介面在使用體驗上有哪些值得關注的設計要點。 

Kiosk 的應用場景遠比多數人意識到的更廣:航空公司的自助報到與行李條列印、速食店的自助點餐、停車場的繳費機、超市的自助結帳,這些機台早已融入日常。

相較於電商網站,Kiosk 的介面設計面臨一個根本上的差異,網頁版面經過多年演化,已形成相對穩定的通用慣例,像是大多網站Logo 和導覽列在頂部、購物車在右上角,從列表到商品頁再到結帳,流程幾乎大同小異。使用者用滑鼠操作,坐在室內,環境變數也較少,體驗相對可預測。

Kiosk 卻完全不同。使用者站在機台前,周遭可能有強光直射螢幕、背景噪音干擾判斷、身高不一導致操作角度各異,使用情境存在許多變數,讓 Kiosk 的介面設計有別於其他數位產品,也值得被單獨討論。

Kiosk 的體驗設計,需要同時考量三個相互影響的面向:環境、機台本身,以及站在螢幕前的那個人。

  1. 環境

光線是其中最直接的干擾因素。戶外機台在強烈日照下容易產生螢幕反光,室內機台若背光不足,對比度也會大幅下降,直接影響文字與按鈕的可讀性。若機台設有語音提示或錯誤警示,在吵雜環境中這些聲音訊號幾乎等同於無效,設計時不能單靠聲音傳遞關鍵資訊,視覺回饋必須能獨立運作,同樣,不能只有視覺回饋,在合適的情境下,搭配聲音提示,也有助於提升使用體驗和打造包容性的產品

  1. 機台

站立式 Kiosk 的螢幕通常會略為後傾,而非完全直立,主要是為了減少使用者仰頭的頸部負擔,以及降低環境光源直射造成的反光。GESAB 是一家專注於關鍵環境技術解決方案的設計與工程公司建議螢幕向後傾斜約 10 至 20 度,這個角度被認為能有效減少眩光與反光,同時維持操作舒適度2 。 

高度則是更直接影響操作可及性的因素。根據無障礙設計規範,機台可操作介面的高度範圍建議落在距地約 38 至 122 公分之間3 ,這個範圍的設定,是為了讓站立者與輪椅使用者都能觸及操作區域,也就是介面的核心互動區應該集中在螢幕的中段偏下位置,而非僅指螢幕的擺放位置。 

  1. 操作人

站在機台前的使用者,本身就是最大的變數。

身高與手臂長度的差異,決定了同一個螢幕高度對不同人的可及範圍。一個對成人來說剛好順手的觸控區,對兒童或身材較嬌小的使用者可能就在伸手極限之外。動作複雜度同樣不可忽視,避免需要多步驟、跨區域點擊的操作設計,在實體環境中比在桌機前更容易讓人感到疲累或困惑,尤其當使用者手上還拿著行李或正在帶小孩的時候。

  1. 一個畫面,一個任務

Kiosk 的使用場景多發生在公共場所,使用者帶著明確目的而來,沒有耐心消化複雜的介面。每個畫面應只有一個主要目標,讓人清楚知道現在該做什麼。Kiosk 螢幕尺寸大,容易讓設計者產生「空間充裕、可以放更多」的錯覺,但資訊過載恰恰是 Kiosk 介面最常見的失誤。 

  1. 觸控區域要夠大

手指不是滑鼠游標,無法精準點擊小目標。根據研究指出建議Kiosk觸控元件的可點擊區域建議至少 20mm(約76px)4,核心操作按鈕(如確認、付款)可以再放大。Kiosk 這類公共機台因使用者年齡層跨度大,寧可保守偏大。

  1. 可預期的操作流程

使用者不會在機台前閱讀說明,周圍也不一定有人員可以協助,流程設計本身就必須自我解釋。步驟順序應符合使用者的心智模型,每一步完成後給予明確的視覺回饋,讓人知道「剛才的操作成功了」。若有多個步驟,進度指示能有效降低使用者的不確定感。

  1. 品牌體驗一致性

Kiosk 是品牌實體接觸點的一部分,視覺語言、互動邏輯應與品牌的其他接觸管道保持一致,無論是門市風格、官網,還是 App。使用者在不同管道之間切換時,若介面風格差異過大,會產生認知斷層,也會降低品牌識別。

  1. 清楚的指引與重要步驟前的再次確認

操作指令應使用正向、具體的語句,明確告訴使用者「請點選您要的品項」,而非模糊的「繼續」。在進入付款頁面之前,必須提供完整的訂單確認畫面,讓使用者有機會核對資訊、修改選項,這一步不只是體驗設計,也是降低糾紛的基本保障。

  1. 多語言支援

台灣的公共場所 Kiosk 至少應考慮繁體中文與英文,若使用場景涉及觀光(如機場、熱門景點、便利商店),日文與韓文的需求也不低語言切換的入口應在第一個畫面就清楚呈現,而不是讓使用者先看不懂介面、再去尋找設定選項。

  1. 無障礙設計

視覺上,字級、對比度、色彩使用都應符合無障礙標準,不能只靠顏色傳遞資訊。語音輔助方面,關鍵操作應有對應的音頻提示,同時不能假設使用者在安靜環境中,所有語音訊號都需要搭配視覺回饋並行存在。肢體操作的無障礙設計,則回到前面提到的觸控高度與元件尺寸。

  1. 隱私保護

大尺寸螢幕在公共空間中本身就是隱私風險。付款資訊、個人資料、購買內容都可能被旁觀者一覽無遺。設計上可以考慮將敏感資訊的顯示區域集中在螢幕下半部使用遮罩處理部分數字,以及在完成操作後自動清除畫面。這個面向在戶外機台或人流密集場所尤其值得被優先考量。

麥當勞自助點餐機已成為速食業的顛覆性創新,顯著提升了顧客體驗,過去在櫃台點餐,來自後面排隊人潮,以及一對一面對點餐的時間緊迫,都有可能造成實際點的量少於顧客真正想要的需求,透過高品質又誘人的食物圖片,更容易讓顧客多加點一個蘋果派。直覺的觸控螢幕介面,方便使用者快速瀏覽選單,最大限度地降低初次使用者的學習難度。

自助點餐機設計特點

  1. 直覺的觸控介面:清楚的分類與導航結構,從選餐、客製化到結帳,每一步都有明確的引導,不會在流程中迷失。
  2. 去背的產品圖:麥當勞的點餐介面捨棄了複雜的背景與裝飾,以高品質的餐點主圖為核心。視覺上的精簡反而加速了顧客的決策,同時也讓追加銷售的提示更自然地融入畫面,而不顯得干擾。
  3. 訂單確認畫面:在送出訂單前,提供完整的餐點檢視與修改機會,降低了點錯餐的機率,也讓顧客對整個流程更有掌控感。
  4. 多語言與多元支付 語言選項照顧到不同語言偏好的使用者,支付方式涵蓋信用卡、行動支付與現金,保留彈性而非強迫顧客配合單一流程,減少結帳環節的摩擦。
AP Photo/Damian Dovarganes

自助點餐機改變了顧客與品牌互動的方式,為顧客提供了更大的便利性、個人化訂製以及獲得點餐過程的掌控權。

Amazon Pharmacy Kiosk 結合App 與 Kiosk ,複雜的步驟,像是建立帳號、選擇保險方案、下單付款,全部在 App 端完成;使用者抵達 Kiosk 時,只需掃描 QR Code,確認簽名,藥品便從取件口送出。從官方示範影片可以觀察到,每個畫面只有一個主要任務,下一步的操作按鈕固定置於畫面下方,讓使用者不需要思考「接下來要按哪裡」,操作路徑直覺且可預期。

這個設計同時回應了藥局場景特有的兩個挑戰。其一是隱私:藥品資訊屬於敏感的個人健康資料,Kiosk 螢幕上不顯示任何個人資訊,機台旁並備有話筒,讓使用者在諮詢藥師時不必擔心被旁人聽見。其二是專業服務的延續:Kiosk 並未完全取代藥師,而是透過視訊或電話保留即時諮詢的管道,讓取藥體驗更接近傳統藥局櫃台,同時又保留人與人互動的自動販賣機。

App 負責複雜決策,Kiosk 只負責最後一步驟的取件與確認,這種分工方式,讓 Kiosk 的介面得以保持極度精簡,也避免在大型螢幕操作複雜的步驟。

Amazon News

Kiosk 的導入,不只是介面設計的問題,而是牽涉到環境、機台、操作邏輯與使用者身體條件的整體設計挑戰。光線、噪音、螢幕高度、觸控範圍等,任何一個環節沒有照顧到,都可能讓一台設備在真實使用情境中讓人受挫。

從使用者體驗的角度來看,Kiosk 確實帶來了明確的優勢,緩解人力短缺的壓力縮短排隊等候時間讓顧客以自己的步調做決定,搭配高品質的產品視覺,甚至有機會帶動業績提升。另外,自助點餐也能減少顧客與店員之間因溝通不順而產生的摩擦,讓顧客與品牌之間的互動更加順暢。

然而,這也可能產生負面影響。對於習慣被人服務的顧客來說,少了人與人之間的互動,體驗感可能因此打折。任何新科技的導入都需要過渡期,這段時間裡操作不熟悉的使用者若缺乏適當支援,挫折感反而會轉化為對品牌的負面印象

分享一個過去個人在海外大型超市的體驗,自助結帳區同時開放約十台機台運作,每台機台旁設有警示燈。由於使用非母語介面,加上首次多了會員掃描的步驟,在操作上遇到困難,此時燈號自動亮起,現場人員即主動上前協助。因為有了人員的協助,日後再次消費和使用自助結帳機,多了一份可靠感。

這樣的服務設計,讓自助與人工服務並存,而不是立即取代。科技負責效率,人負責照顧例外,這或許才是 Kiosk 導入過程中,最值得設計師持續思考的平衡點。

資料來源

  1. 餐飲業者加速導入創新科技及數位轉型以提升競爭力 | 經濟部 ↩︎
  2. Large format screen or multidisplay. What offers the most benefits to the operator’s visual ergonomics? | Gesab ↩︎
  3. Guide to the ADA Accessibility Standards | U.S.Access Board ↩︎
  4. How to ensure accessible kiosk design | Philipp Brunner ↩︎

發表留言