设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 IT综合资讯 查看内容

深度探析如何提高Web表单的可用性

2013-5-6 11:32| 发布者: joejoe0332| 查看: 2099| 评论: 0|原作者: CSDN|来自: CSDN

摘要:   该文是对Smashing Magazine上一篇老文章《An Extensive Guide To Web Form Usability》的译文,温故而知新,希望大家从中可以得到新的收获。  可能与你平时阅读到的资料相反,你在表单中增加华丽的按钮、漂亮 ...

  4.帮助

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

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

Skype的注册表单既包含了用户触发帮助(蓝色的文本框是通过点击问号图标触发的),也包含了动态帮助(下面列出的建议使用的用户名)。

5.信息

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

● 成功信息。用以告知用户其在表单上取得了较大进步。如果表单很长,成功信息可以鼓励用户继续填写。和错误信息一样,成功信息也应突出显示。但是不能阻碍用户继续填写表单。

6.验证

● 只在需要时验证。过多的验证跟完全没有的效果一样差,因为它们都会让用户受挫。验证仅限于确认关键信息(比如用户名的可用性),确保答案真实(不允许130岁以上的年龄)等。

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

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

结束语,开端

  结束语这个词用在这里不准确。让该文成为你新的起点,学习我在本文中讲述的,并把它们应用到你的表单中。可喜的是,关于所有的这些,仍有大量内容可讲,针对每一点,你可以发现大量的资源。正如我在文章开始说的,只调整UI,这一捷径不会让你的表单更好用。(编译/陈秋歌 责编/魏兵)

原文链接:An Extensive Guide To Web Form Usability


酷毙
1

雷人

鲜花

鸡蛋

漂亮

刚表态过的朋友 (1 人)

  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部