如何设计WEB表单


现在的设计已经不仅是为互联网创造漂亮美观的图形那么简单了,作为一个WEB设计师,我们需要考虑一些其他的问题,比如代码,用户体验,算法等。如今用户体验设计的地位正在不断上升,对于WEB表单的设计也是如此。

WEB表单设计的目标是设计出一套让用户从填表到点击提交按钮最简单的流程。在这个过程中不需要太多的炫目效果,尽管jQuery的表单插件很受欢迎。但是在这片文章中我们只关注于表单的用户体验和交互过程。这里的概念也能够有效的帮助你减少用户在填表过程中的挫折感。
第一,保持醒目和简洁
很多用户抱怨注册表单需要填写的信息太多。如果你想通过表单来增加你网站的注册用户数量,那么你就得保证你的表单易于填写。这点同样适用于其他地方的数据输入。

由于项目的不同,用户需要填写的信息数量也会有所不同。对于用户来说注册表格可能会要求用户输入用户名,电子邮件地址,然后两次输入密码,这样当然很合理并且也是用户所期待的注册方式。但是也有特殊情况,例如WordPress的默认注册页面。用户这里用户只需要填写用户名和电子邮件地址,之后系统会自动生成一个密码并发到你所填写的电子邮件地址当中,这样既减少了原始表格的数量,并且将恶意注册者挡在了门外。也不需要你去邮箱点击激活链接,但是你必须在你的邮箱中取得新的登陆密码。

第二,始终与用户的期待保持同步
用户体验对于网站来说是基础也是核心,所以尽量避免用户们最讨厌的事情——页面有出乎他们意料的跳转。你绝对希望你的表单行为保持自然,并且将额外的JavaScript代码减到最少,同时弹出气泡和Ajax也都是很有用的东西。好用的表单既不应该被划分成许多小的项目,也不用隔断将他们彼此分离,因为那不是好办法。

同时我们还要注意不要错过了HTML的tabindex属性。因为这个属性从可用性角度来说是很的,用户可以通过它在不使用鼠标的情况下填写完整个表格。但是如果你没有保持tabindex属性的有序性,或者只在某些输入框中使用了这个属性,如果是这样的话那么整个系统就会很糟糕。这一点除了适用这一表格外,还适用于所有的注册表单和其他的输入页面,尤其是网上购物的信息输入页面。

第三,保密性很重要
无论用户输入的是他们的电子邮件地址还是信用卡号码,你都应该保证这些数据的安全。因为用户相信你的网站和后端代码在正确的收集了他们的信息后会并将之保存在一个安全的地方。

如果你不怕麻烦的话建议你在整个网站中都使用SSL认证,因为这样不仅保护了用户的注册信息,而且用户浏览网站的整个过程也都被HTTPS保护了。虽然有点麻烦,但是有些WEB主机会辅助你安装这些功能。虽然并不是每个网站都必须这么做,但是你只需要多费一点儿时间和精力就能保护用户数据的安全,用户也会因此而觉得安全,你和用户之间就能建立起一种相互信任的纽带。

另外,在使用信息上尽量不要使用那些很容易被探测的信息。除非信息是完全非“个人”的,都需要使用POST数据类型。只有在URL结构能够从数据中获益的时候,才使用Ajax的GET requests。

第四,更大的输入框
关于WEB表单输入框大小的争论,相信大家都曾听过。vBulletin,Joomla!和Drupal使用的都是相当小的输入框,大都是10px-12px的文字和很小的内边距。而Diigo的注册表单结构就很大气!你需要缓和不同输入元素之间的冲突。加粗的文字提示你哪些区域已经填写了,哪些区域还空着,当激活某一输入框时,它会变成淡蓝色,提示你光标现在所处的位置。

传统的Digg注册表单就是用很相似的方法来设计的。Twitter的注册表单同样都很大,这样你就不会错过任何东西。他们不会吝啬于用大量白色的空间来突出输入区域。他们的标签系统也很独特,空的输入框中会有预先设置的占位文字,通过颜色的变换,你也可以清楚的将用户输入的文字和系统预设文字区分开来。

现在的WEB设计出现了很多的创新设计。最新的CSS3正在被越来越多的设计师们所采用,而表单设计也需要设计师们投入更多的关注和思考。

希望通过这些用户体验背后的指导原则能够指引各位创造出更好的WEB表单。对于后端数据来说,即使是PHP这样简单的语言也能很好处理的。或者你可以通过一到两个星期的时间,创造出一套你自己的系统。对于网络开发者们而言,不管是前端还是后端,都应该尽力去理解这些范例和设计原则。

分类目录: 建站教程 | 标签: 如何  设计  WEB表单   | 评论:0
上一篇: “五招”还你一个清晰整洁的网站
下一篇: 敏捷型流程