适用于web表单设计的可用性原则(下)

原文:An Extensive Guide To Web Form Usability 

作者: Justin Mifsud   发表时间:2011年11月8日    

译者:BibliophileO_o

#译者有话说#   从翻译中学习设计,我个人倾向于带着理解去写中文,因为每个语言都有其他语言无法准确替代的词汇语句。译者有个小trick,将文中所述带入自身设计场景,则,豁然开朗,文思泉涌。建议设计师们如果有空可以多读读原文,欣赏原文的语言魅力。

接上文:适用于web表单设计的可用性原则(上)


第三:表现(The Appearance)

用户界面是体现Web表单可用性的核心模块。以下,我们针对之前提过的Web表单的六个组成部分来提出一些UI设计上的指导方法:

1.标签

·单个单词vs句子

如果一个标签的目的能够让用户轻松理解,如,问他的名字或者电话号码,那么一两个单词作为标签已经足够。但在某些不易理解的场景下,一个短语或句子有可能会帮助消除语义的歧义。


多年前的Amazon注册表单,它的标签文案冗长啰嗦且略显一丢丢幼稚。


现在Amazon优化了它们的注册表单,标签文案简洁明了。

·句首字母大写vs首字母大写(适用于英文表单的设计参考)

是“Name and Surname”或者是“Name and surname”?句首字母大写会让用户稍易于理解一些,同时也让用户理解更快一些。因为句首字母大写更符合用户阅读语法。虽然我们很难说上述两种哪一个更好,但是有一点可以很确定:千万不要让标签字母全部大写,这样会让你的表单看起来一点都不专业且用户会非常难去阅读。


看上面Barnes & Noble的注册表单,多么难以让人快速浏览啊!

·标签尾部的冒号

对于一些桌面应用和操作系统来说,比如Windows系统,就建议在每个表单标签的后面添加冒号。一些设计师在设计web端表单时仍然坚持此原则,主要因为老版屏幕阅读器需要依靠冒号去识别标签。现代屏幕阅读器则是靠标记来识别标签(具体点说,是靠label tag)。所以,设计表单的时候不用太纠结于加不加冒号,只要保证一致性就行了。因为冒号即不会大幅度增强也不会削弱表单的可用性。

·标签的对齐原则:顶部,左边,还是右边

不同于常规意见,将标签放在输入区域上方并不总是可用性最高的方案。如果你希望用户尽可能快的去填写那这可能是最有理想的方案。但是在某些场景下,你希望用户能够慢下来,能够注意到标签的内容。保持长表单成一列并让用户滚动阅读比将一个长表单拆分成几个列具有更高的可用性。当然,每一种对齐形式都有它的优劣处:


Label Placement in Forms”by Matteo Penzo.


表格不应该有一个列以上。上图Makeup Geek中在右边的表格就很容易被用户忽略。


2.输入框

·输入框的形式

在不同场景下提供合适的输入框形式。每一种形式都有让用户熟悉的特点。比如,在单选中使用单选按钮(radio button),在多选中使用复选框(check boxes)

·定制化输入框

不要发明新形式的输入框。在Flash网站时代,出现了许多奇怪的输入框,貌似现在这个现象又出现了;我看过一些用jQuery写的非常奇怪的输入框。简单易懂才是最有效的。尽可能设计符合其自身逻辑和用户认知的输入框。


上面将下拉框放在输入框内的设计让用户产生极大的困惑。

·限制输入框的格式

如果你想限制用户输入字段的格式,至少用一种不会让用户焦虑烦躁的设计。举个例子,如果你想让用户填写日期,考虑用三个下拉框或者用一个日历选择器,而不是呈现MM/DD/YYYY这样的解释字段在输入框旁边。请充分站在用户角度思考。

·必填项和可选项

明确区分哪些输入框是选填的。惯例是会使用 * 号。其实任何符号都可以,只要设计师将其意思说明清楚。


3.动作

·主要动作和次要动作

主要,是一些像链接和按钮能够呈现“最终”功能如“保存”和“提交”的动作。次要,是指像“返回”和“取消”这些能够让用户撤销之前操作的动作。如果用户点错了,次要动作一般都会有不好的后果,所以尽可能突出主要动作。如果一定要使用次要动作,将它们的视觉呈现弱化,突出主要动作。


不清晰区分的主次动作极可能导致用户误操。以上显示的两个按钮出现在填写St. Louis Community College的申请表单的最后。现象一下,用户点击了这极容易误操的rest form按钮会导致的后果。

·命名规则

取名的时候避免通用词汇如“提交”,因为这会给用户一种该表单本身就是通用的感觉。描述性的单词和句子会更好,如“加入领英”(Join Linkedln)。


虽然Coca-Cola的注册表单区分了主要动作和次要动作。但是它给自己的提交按钮取名为“Submit”。对用户来说,“Register with us”更有效表达了这个表单的目的。


4.帮助

·解释表单的辅助信息

体验好的表单永远不需要向用户解释如何去填写。如果它看上出不像个表单或者它显得太复杂了,那么,你的首选应是重新设计。辅助信息只出现在需要它们的地方,比如,解释为什么需要信用卡信息,填写生日会有什么用,链接到“条款和条件”(Terms and conditions)。这样的解释文本往往会被忽略,所以将解释文案设计的简介易懂。传授一个经验,千万不要让你的解释文案超过100字。

·用户触发的帮助和动态帮助

在解释需要的时候展示文案,远好于把帮助文案放在输入框旁边。你可以在相关的输入框旁边放一个帮助按钮,这样用户想要去读的时候就会主动触发这个按钮。更有效的实现方式是,在用户点击某个输入框准备输入内容的时候自动的出现解释文案。jQuery和JavaScript就能够帮助你实现这个功能。


Skype的注册表单不仅包含用户主动触发帮助文本(用户点击图中蓝色问号按钮可触发解释气泡出现),也包含动态的帮助(建议的用户名)。


5.反馈信息

·错误反馈

这个反馈告诉用户出错了,并且错误反馈的出现往往是阻止用户继续填写表单直到改正错误。通过以下几种方式来突出错误信息:颜色(一般是红色)来强调错误信息,熟悉的icon样式(比如警告标示),突出信息位置(一般是在表单顶部或是就近原则,在出错信息旁边),放大错误字体等。

·成功反馈

成功反馈告诉用户他们已经顺利完成了表单中的某个流程。在一个冗长的表单中,成功的反馈激励着用户去继续填写下去。跟错误反馈一样,成功反馈需要突出。但是突出成功信息,不代表要突出到影响到用户继续填写表单。


6.验证

·只在需要的地方出现

过度的信息验证会然给用户流失。验证信息出现在以下场景,确认关键信息的时候(比如,用户名的可用性),保证输入信息的真实性(比如年龄不允许超过130岁),字数有限的文本输入框(字数有限但却长,不适合使用下拉选择器,比如国家代码前缀)

·提前验证

做一些提前验证的设计,能够让用户能够快速并且更准确的填写表单。比如,根据他们的IP地址提前给她们选好地区。但要小心,用户容易忽略系统提前给他们选择的输入框。


Twitter的注册表单不仅使用了动态验证(姓名,邮箱地址,密码和用户名),同时也使用了提前防错验证。(如,勾选项“Keep me logged in”)


结语 开始

感觉“结语”这个词不太适合,让我总结的这些信息成为你设计表单的开始吧!关于表单的设计经验还有很多很多,你可以通过自己的设计经历在上述的没一点中不断补充。正如我在文章开头说过,只调整UI界面这种捷径是不会有效提高你表单的可用性。我想想我还能说些什么?对了,现在完善表单设计的理论就交给你了。赶紧行动吧!(原文是,Go get your hands dirty!这句非常形象,献给设计小白们!)

扩展阅读:

Forms That Work: Designing Web Forms for Usability  Caroline Jarrett and Gerry Gaffney

Eyetracking Web Usability, Jakob Nielsen and Kara Pernice

Web Form Design, Filling in the Blanks, Luke Wroblewski


评论
热度 ( 4 )

© BibliophileO_o | Powered by LOFTER