1. 14.6 第三个方面:外观

外观或者用户界面(UI)是Web表单可用性的关键,针对此有如下指南。为了简化,将它们分组到之前讨论的六大组件。

1.标签

● 单词与句子。如果标签的目标很简单,如询问姓名或电话号码,那么标签处用一两个单词就足够了。不过,字段或者句子对于避免歧义还是有必要的。

figure_0161_0139

亚马逊的注册表单就包含完整的语句,尽管有的地方用单独的单词就能搞定。

● 句子大小写与标题大小写。是写成“Name and Surname”还是“Name and surname”?从语法角度上看,句子大小写比标题大小写更容易、也更快理解。但有一点是肯定的:一定不要全部大写,不然表单会看起来不专业且难以阅读。

figure_0162_0140

快速阅读Barnes & Noble 的注册表单并非易事。

● 标签后面添加冒号。一些桌面程序和诸如Windows之类的操作系统的界面指南会建议在表单标签后面加冒号。一些Web表单设计师一直坚持这一原则,主要因为老的屏幕阅读器很依赖冒号来识别标签。而新的屏幕阅读器则根据标记(尤其是“label”标签)来识别。另外,冒号的使用只是一种偏好而已。只要风格统一,就不会增强,也不会减弱表单的可用性。

● 标签的对齐方式:上对齐、左对齐或右对齐。与一般建议相反,输入框上方并不总是放置标签的最佳位置。如果想让用户尽快填完表单,这样做是理想的。但有时会故意让他们慢下来,以便他们可以认真地阅读标签。还有,将长长的表单以一列的形式显示出来,让用户通过下拉页面来观看,要比多列显示,以便所有表单信息在一屏显示更好。每种对齐方式都各有利弊。

figure_0163_0141

figure_0163_0142

表单绝不可多列显示。注意,Makeup Geek 上的表单的右列是很容易被忽略的(更别说会注意底部的“必填项”提示了)。

2.输入框

● 输入框类型。根据需要,选择合适的输入框类型。每种输入框都有各自的、用户熟悉的特性。例如,如果只允许从多个选项中选择一个,就用单选按钮;如果可以多选,则用复选框。

● 定制输入框。不要发明新的输入框类型。这种情况在早期的Flash网站上很常见,现在似乎又有回归的迹象:笔者曾看到一些通过jQuery实现的奇怪的输入框。通常,简单才是最实用的。应该让输入框看起来跟原生的HTML渲染尽量接近。

● 限制输入框的格式。如果要限制用户输入数据的格式,那么至少要采用一种不会激怒用户的方式。例如,应该采用三个下拉列表框,当然,能用日历控件更好,而不是在日期文本框后添加“MM/DD/YYYY”备注。

figure_0164_0143

改变输入框的界面会让用户感到困惑。

● 必填项和选填项。要让用户清楚地知道哪些输入框是必填的。一般用号表示必填。其他符号也可以用,只要指明它所代表的意思即可(即使是号也同样需要指明作用)。

3.操作

● 主操作和辅助操作。主操作就是表单中完成“最后”功能的链接和按钮,例如“保存”和“提交”。辅助操作允许用户取消已经输入的数据,如“后退”和“取消”。如果误点了,辅助操作一般会产生非预期的后果,所以,在可能的情况下只保留主操作。如果非要有辅助操作,那就让它们看起来没主操作那么显眼。

● 命名规则。避免使用“提交”之类通用的词语,这样会让用户觉得该表单就是通用的。用“加入LinkedIn”之类的描述性单词或短语会更好一些。

figure_0165_0144

主操作与辅助操作之间的区别不明显,很容易导致操作失误。在圣路易斯社区大学长长的表单下面有这样两个操作按钮,试想一下,如果误按了“重置表单(Reset form)”会有什么后果。

4.帮助

● 表单的说明文字。永远不要向用户解释如何填写表单。如果它看起来不像表单或很难填写,那就只能重新设计了。说明文字只应出现在需要的地方,比如解释为什么需要信用卡信息,或者解释出生日期的用途,或者是“用户协议”的链接。这些文字很容易被忽视,所以要尽量简洁易读。原则就是:解释文字(总共)不要超过100字。

● 用户触发的帮助和动态帮助。与其每个输入框后都加上帮助文字,不如让其仅在需要时出现。可以在输入框旁边放个小图标,让用户在需要时自行点击。更好的方法是,当用户在输入框里输入数据时,动态显示帮助信息。这种方式越来越普遍,也很容易实现,如使用jQuery等JavaScript库。

5.消息

● 错误信息。告知用户有错误发生,一般会阻止用户继续填写表单。可以通过颜色(通常是红色)、熟知图形(如警告标志)、突出显示(通常在表单上方或是发生错误的侧边)、大字体等来突出错误信息。

● 成功信息。用于告知用户其在表单上到达了关键结点。如果表单很长,成功信息可以鼓励用户继续填写。和错误信息一样,成功信息也应突出显示。但是不能阻碍用户继续填写表单。

6.验证

● 只在需要时验证。过多的验证跟完全没有的效果一样差,因为它们都会让用户产生受挫感。验证仅限于确认关键信息(比如用户名是否可用),确保答案真实(不允许130岁以上的年龄),并在可能数据是有限集但在下拉列表中显示又太长的情况下(比如国家码前缀)建议回复。

● 智能默认。使用智能默认是为了让用户更快、更准确地填写表单。例如,根据用户的IP地址,事先选定其国家。但是,使用这些时要格外小心,因为用户一般不会去改变事先选定的字段。

figure_0167_0145

Twitter的注册表单使用了动态验证(姓名、邮箱、密码和用户名)和智能默认(保持登录状态)。

Copyright & copy 7dtime.com 2014-2018 all right reserved,powered by Gitbook该文件修订时间: 2018-06-23 10:10:34

results matching ""

    No results matching ""