國泰世華 ATM 提款機

話先說在前頭,這是我想領 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 裡。白色字體的可讀性原本就較深色字體低,還配上對比度不夠的底色根本為難視力不佳的使用者,就算所有介面按鈕位置和前一版相去不遠,卻也足夠讓第一次遇到的操作者滿畫面找哪裡可以按。拜託顧及一下無障礙,台灣都已經快和日本一樣成為高齡化社會了。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close