标签归档:表单设计

确定?没法确定!

“确定”与“取消”按钮应该可以算是Web应用里最无敌的组合了,你可以随处看到他们以及他们的姊妹组合“完成”/“取消”、“是”/“否”….当然,他们也不是每次都表述的是同一个交互动作,但是我们总会遇到。

为什么会有“确定”与“取消”的组合?
这个问题似乎是个废话。因为,Web应用中几乎你所有的动作都是可以取消的,这也是为什么每个浏览器都会有“后退”按钮的原因。
当然,有的时候我们也会只看到“确定”在单飞。比如,波希米亚同学收集了
国内30个著名网站的注册表单,我们看到只有雅虎中国、MSN中国、TOM和优酷的注册表单中有“取消”/“重置”按钮。
也许是处于商业因素的考虑,他们只给用户单一方向的指引,系统限制用户回头;也许是产品人员认为用户完全可以在一页长的表单里手动清除掉填写错误的信息或者借助浏览器的“后退”按钮来解决自己遇到的麻烦。
但是,在基本都是一页长的表单里没有“取消”或“重置”按钮显然是不够友好的。用户有权利结束自己的操作同时也有权利被允许重新开始自己的操作。一个“取消”按钮显然会比使用浏览器的“后退”按钮或者是“F5”刷新浏览器成本小的多。
所以,从这点来看这30个表单中给我体验最好的无疑是优酷的注册表单。虽然雅虎中国提供了取消按钮,但是在点击取消的时候出现了下面尴尬的一幕….


什么时候才会同时出现 确定、取消
确实,有的时候我们不需要取消按钮。比如评论框的表单里,我们只需要一个“提交评论”就足够了,因为我们没有可以取消的东西,你可以选择关闭页面停止浏览,你也可以选择点击链接进入下一篇文章的阅读。
取消,主要用在对用户进行警示、询问用户操作这2个场景中。比如用户选择了进行了某项不可逆的操作的时候,我们需要警示用户是否确定要进行这项操作;用户选择了我们其实并不想让他进行的操作,比如删除帐户,我们希望用户三思。

确定与取消不是万能的,需要更完美
“确定”与“取消”按钮在大多数情况下都可以正常工作,但是意义更明显的按钮标记能更好的帮助用户建立对点击结果的期望
比如QQ邮箱的注册表单,单击这个“确定”按钮会发生什么呢?保存了我填写的信息还是把我注册为新的QQ邮箱用户?很明显,对于用户而言这个期望是模糊的。
当然,我们很高兴的看到大多数网站的注册表单上都把“确定”按钮换成了一个更加明显的提示了,比如“注册”、“现在就加入”、….不过在软件领域里似乎这种令人生厌的做法已经持续了很久且一直没有改观,典型代表就是我们的浏览器弹窗提示…..
直接使用“确定”与“取消”,是一个懒惰的设计师的表现与设计手法。这是一个值得注意与琢磨的细节,因为你的一个错误的提示可能会诱发N多用户错误的点击。

没法确定的确定按钮
比如下面的这个界面提示,我是点确定呢还是取消呢?我没法确定…..

比如,某博客网站在发布文章的时候可以选择全屏编辑器,他们会在屏幕的右下角设置一个“取消”按钮,这个取消是怎么个意思呢?取消本次的编辑退回到我的博客首页还是退出本次的全屏编辑进入到普通的编辑状态?我没法确定……

关于确定与取消的按钮摆放
目前流行的做法是遵照“费茨法则”,一个人在使用鼠标移动指针时,屏幕上目标的某些特征会使得点击变得轻松或者困难。目标离得越远,到达就越费劲;目标越小,就越难点中。设计成一个大的“确定”与一个小的“取消”组合或者一个大的“确定”按钮与一个超链接的“取消”组合。
另外,关于是“确定”在左还是“取消”在左,mac系统与Win系统是个相反的做法,这是另外一个话题,有兴趣的同学可以研究一下。

这里,UCDchina翻译小组的一篇文章中说到了这个问题:“确定”与“取消”按钮如何正确排序?

最后,在寻找本文的例证的时候浏览几个网站后编的一个小段子
问:一个网站如果弹出“是”、“否”、“取消”,你该选哪个?答:右上角的×。因为,他才懒的管你选的是哪个,他判断有鼠标点击动作就给你强奸了,所以先×它才是正确的!

表单的重复输入项目应该设置为禁止粘贴

先来看一个最近挖到的网站:http://www.picnik.com/,这个网站简单的来说就是一个在线的图片处理网站。它的注册表单是我见过的做的最棒的表单之一了,简约而不简单,流程简单清晰没有丝毫的多余内容,视觉上也让人很舒服。
初始表单就三行,Username、passeord、email;表单的输入框顺序激活,输入完第一次密码之后再次输入密码的框体被激活、输入完第一次email后再次输入email的框体被激活;所有的重复输入都被设置成了禁止粘贴,达到了重复输入的设计意图。

我始终固执的认为,表单中的重复输入条目应该被设置成禁止粘贴的。因为,重复输入设计的意图在于检测两次输入的一致性,帮助用户记住自己输入的内容,给用户也给系统减少麻烦。
或者你在第一次的时候输入了一个错误的email地址(不是你自己的),但是第二次输入的时候输入了一个正确的地址,于是系统可以帮你纠正这个错误;当然,2次都输入同样的错误的情况也是存在的,但是这个概率很小,你要是真的两次都输入了一样的错误,那系统也没辙。
也许你会说你是高级用户,你铁定不会输入错误你的表单条目内容,但是再高级的用户也无法保证没有疏忽的时候,所以系统还是需要做出限制,很烦人的迫使“高级用户”验证一次你的内容。在安全系数较高的系统如银行、支付宝等中这点尤为必要。
所以,一个完美的表单应该是初始输入内容允许粘贴,但是重复输入内容坚决不允许粘贴,必须发挥重复输入的设计目的——检测你的输入内容,确保那是正确的一致的。(Ps:picnik.com的这个表单是初始的也禁止粘贴,我觉得这个地方可以改进)
一个疑问:输入密码的初始条目内容是否允许直接复制粘贴进去呢?密码在表单中的显示都是密文的,2次输入密码是否一致还有没有比简单粗暴的回答“2次输入不一致”更好的提示呢?

当然,你也可以把这个重复输入的表单条目去掉,把注册表单精简到输入ID输入密码输入邮箱三步曲,豆瓣就是这么做的。

最后,很多注册表单会放一个自认为很牛逼的很花哨的鉴定你的密码输入强弱的东西在密码输入框的下面,这个玩意有必要否?第一次见到的时候我还以为我能自己控制系统密码设置的强弱呢,我想我真牛逼!
有多少人是忽略你的这个牛逼的提示的?有多少人烦你这个牛逼的提示的?如果你想让我设置一个复杂的密码,直接在我输入完第一密码的时候就警告我“输入密码过于简单,请重新输入”不就完了吗?

2010-03-10 UPdate:关于密码的输入问题上,iphone是这样处理的:输入的时候是明文显示,几秒之后变成密文。这种做法一定程度上解决了密码输入全是密文带来的问题

2010-03-10 Update:目前淘宝网的注册页面已经实现了重复输入密码不允许粘贴