经典的 ATM 交互范例June 11, 2008

很多交互方面的书籍都会拿 ATM 作为案例分析,谁叫银行和钱过不去呢。放下教科书,我们来看看 老美的银行的 ATM 是怎么设计的

http://files.gracecode.com/2009_11_05/717835b1d2e7.jpg

插入银行卡以后出现输入密码界面,按钮很大而且「看起来」非常容易点击也非常适合屏幕操作。

http://files.gracecode.com/2009_11_05/252025b1d2e7.jpg

这是原文中新老两个界面的对比,看得出设计者花了很多的功夫。对比老的界面,元素视觉方面更加的精简,显得层次分明;重新排列的按钮将相似的功能放在一起,更容易操作。

http://files.gracecode.com/2009_11_05/966615b1d2e6.jpg

这是取款确认界面,看得出左边的是取款流程并按钮的形式突出,用户随时可以退到某个步骤操作。在这里令人眼前一亮的是打印回执的 checkbox,它并没有像国内的银行那样等到现金吐出来了以后,再问你是否需要打印回执。

http://files.gracecode.com/2009_11_05/789195b1d2e8.jpg

再看下细节方面,上面是文中改版前后的两个按钮对比。改变最大的地方本人认为就是按钮的样式更加清晰,这非常容易理解谁喜欢取款的时候看花哨的海报呢?

http://files.gracecode.com/2009_11_05/860845b1d2ea.jpg

这是改版前后的布局,按钮被明显的放大并且被拉伸;重新布局的按钮明显减少了行数,从而看起来整体的布局更加清晰。

http://files.gracecode.com/2009_11_05/654195b1d2e8.jpg

这是 ATM 硬件外观前后对比,操作键盘被放大、吐钞口放到了显示器的下面(这应该是为了用户方便和安全)、存钱口和插卡口以及回执单出口都放在了右边 -- 这似乎都是用户输入操作。

全文在这里 ,懒得翻译了,希望本人的解释没有误人子弟。

§ 7 条评论

  1. …………国内的ATM光是UI就没法跟国外的来比,还要比交互???

    继续蓝底白字的ATM~

  2. qiao qiao

    “在这里令人眼前一亮的是打印回执的 checkbox”——好像不是checkbox吧,似乎是上一个步骤的确认。

  3. 额,我常常操作错误,本来要取消当前操作的,结果按了什么按钮,就退卡了,昨天还被退了三次卡。。。插回去重新弄

  4. @qiao 你说的也有道理的,谢谢

  5. 韵声 韵声

    今天也在看这个
    生活中的设计更重要!

  6. 最大的优点就是直接显示余额。

  7. Fox Fox

    你的网页光标默认是在搜索栏,导致我的退格键(后退快捷键)失效了...

添加评论




* Required (but your email address will never be published)

Yahoo 统计