國泰世華 ATM 提款機

  • UI 設計
  • 更新:2025-01-26
  • 初版:2014-04-11

話先說在前頭,這是我想領 3000 元過日子,ATM 很開心的吐給我 30 張 100 元而埋下淦意。國泰世華新改版 ATM 介面!


這是卡片一插進去什麼都還沒做、系統自動出現的畫面。我的視線一直停留在右上方粉紅色對話框,雖然習慣性視線有往右下角掃、找看看有沒有按鍵,但按鈕長得太像對話框,第一時間反應不過來「它可以按喔」。戳了戳右方圓圈內的藍色提款字樣沒理我、才發現還有個粉紅色按鈕可按。(我就是想領 3000 出來錯了嗎?)

那個提款字樣背景單純,還勾了白邊,看起來還比較像是可以按的地方。左上那一大塊綠色竟然有做厚度,為什麼按鈕反而是平的啊?為什麼對話框要和按鈕長得這麼像…


「請觸碰螢幕選單或下方數字鍵盤」不夠明顯。而且我一直搞不懂為什麼會選粉紅色和藍色。


拿藍色和粉紅色 2 個方塊顏色試測色盲者使用情況分數都只有這樣。不過我從照片上做顏色取樣肯定有誤差,看看就好。(國泰世華的標準色不是綠色和黃色嗎?)


太平了,差點不知道哪邊可以按。icon 的隱喻也不夠明確。英文字體拉長、字距被調小很擠變糊了。(這是中文介面英文不重要?)


圖片取自:http://zestyping.livejournal.com/251102.html
早期的 ATM 介面長這樣,藍白畫面純文字。使用者要去點螢幕旁邊的實體按鍵反而清楚好懂不易出錯。

UI 演進史要研究一下,知道為什麼一開始會是擬物風嗎?十大易用性原則「系統與真實世界的關聯性 Match between system and the real world」。現在年輕人人手一隻智慧型手機,扁平風是潮流大家也都習慣了。ATM 的使用族群會到爸爸、甚至爺爺那一輩,現實生活對於按鈕的印象就是有厚度、有陰影讓人知道可以按。就算是扁平風一樣可以做出立體感,不是矩型方塊拉一拉就叫順應時代潮流!


借款服務的黃底白字分數是這樣,我把相近的色彩跑了一圈分數還是很破。


為什麼會是左藍右粉?重看了一下整串 UI Flow,左邊都是藍的、右邊都是粉紅,為什麼?我以為該是用選項內容來歸類。用左邊右邊區分有什麼特殊意義?


就個人生活習慣而言、我應該要去點「是」,每次領錢都是領 3000元,要轉帳什麼的靠網路、要借錢找老公,ATM 對我只有領現金功能。但我完全不敢選「是」,無法預期按下去後會發生什麼。應該還是停留在這個畫面啦…就覺得猜不透它。

突然出現深灰色的按鈕,右邊粉色和藍色變的和之前有點不一樣,是我照片色偏嗎?


要扁平風就扁徹底一點好嗎?icon用了很淺的顏色再加上內陰影,為什麼啊?

結論

國泰世華這次的設計好潮好難懂。在操作過程中還會穿插一些說明頁或廣告頁。右下角的粉色按鈕完全沒有任何立體感或陰影,和背景融合的非常剛好。它成功讓使用者在廣告頁多停留了好幾秒…那顆該死的 SKIP 按鈕到底在哪裡!

ATM 不是只有年輕人才會操作,有更多的長輩依賴它,比如每個月固定去 ATM 前領子女匯進來的生活費。設計得這麼「青春水漾」大概想改變銀行生冷的形象,只是改得一點都沒有國泰世華的感覺,還以為是哪個 iOS APP 整包原封不動移植到 WIN 8 上再塞進 ATM 裡。白色字體的可讀性原本就較深色字體低,還配上對比度不夠的底色根本為難視力不佳的使用者,就算所有介面按鈕位置和前一版相去不遠,卻也足夠讓第一次遇到的操作者滿畫面找哪裡可以按。拜託顧及一下無障礙,台灣都已經快和日本一樣成為高齡化社會了。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
為何明明是「好設計」,卻讓人用得很痛苦?
為何明明是「好設計」,卻讓人用得很痛苦?

你有沒有遇過這種狀況?
門推不開、按鈕搞不懂,結果發現「設計害了你」?
其實 UX 不只在螢幕裡,生活處處是可用性考驗!

從公共設計看新北市門牌選色
從公共設計看新北市門牌選色

新北市政府這篇換門牌的 貼文 引起很大的討論聲音。尤其是「配色」方面得到許多負面評價,就來看看這幾個顏色出了什麼問題吧!

iOS Guideline 怎麼看?(2)

iOS Human Interface Guidelines 第二章是設計策略 Design Strategies ,主要講畫面、使用者操作、反應等等的一致性與注意事項。在閱讀這個章節之前,建議把 十大易用性原則 先看過一遍、對易用性有粗淺概念後會更容易理解為什麼 Guideline 會這樣寫。

每個人看到的介面應該都要不一樣
每個人看到的介面應該都要不一樣
  • APP 功能太多已經造成困擾了
  • 每個人看到的介面應該都要不一樣
  • 那「一致性」怎麼辦?
  • 未來的介面會長什麼樣子呢?
Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close