浅析WEB表单设计

标签: web 设计 | 发表时间:2012-01-20 00:38 | 作者:WondeRui
出处:http://ucdchina.com/rss/all

设计师不再只是为互联网创造漂亮美观的图形那么简单了,作为一个WEB设计师,我们还需要考虑一些其他的问题,比如用户体验,算法,代码等等。如今用户体验设计越来越重要,对于WEB表单的设计尤其如此。

WEB表单设计的目标是设计出一套让用户能够从填表到点击提交按钮的最简单的流程。这个过程中不需要太多的炫目效果,虽然jQuery的表单插件一 直都很受欢迎。在这片文章中我们只关注于表单的用户体验和交互过程。这里的概念也能够有效的帮助你减少用户在填表过程中的挫折感。

保持醒目和简洁

我听过不计其数的用户抱怨注册表单需要太多的信息。如果你正在想办法增加注册用户数量,那么你必须保证你的表单尽可能的易于填写。这点同样适用于其他地方的数据输入。

根据项目的不同,用户需要填写的信息数量也有所不同。注册表格可能会要求用户输入用户名,电子邮件地址,然后两次输入密码,这样当然很合理并且是用户所期待的注册方式。但是也有特殊情况,看看WordPress的默认注册页面。

这里用户只需要填写用户名和电子邮件地址,之后系统会自动生成一个密码并发到你所填写的电子邮件地址当中,这样做减少了原始表格的数量,并且将恶意注册者挡在了门外。你不需要去邮箱点击激活链接,但是你必须在你的邮箱中取得新的登陆密码。

始终与用户的期待保持同步

用户们最讨厌的事情就是页面有出乎他们意料的跳转。你绝对希望你的表单行为保持自然,并且将额外的JavaScript代码减到最少,弹出气泡和Ajax都是很有用的东西。好用的表单不应该被划分成许多小的项目,用隔断将他们彼此分离,那不是好办法。

另一个我们经常犯的错误是错过了HTML的tabindex属性。这个属性从可用性角度来说真是棒极了,因为通过它用户不使用鼠标就能填写完整个表 格。但是如果你没有保持tabindex属性的有序性,或者只在某些输入框中使用了这个属性,而另外一些没有使用,那么整个系统一定会出乱子。这一点适用 于所有的注册表单,而且同样适用于其他的输入页面,特别是网上购物的信息输入页面。

保密性是最重要的

不论用户输入的是他们的信用卡号码还是电子邮件地址,你都应该将保证这些数据的安全放在第一位。用户信任你的网站和后端代码正确的收集了他们的信息并将之保存在一个安全的地方。

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

另外,不要使用那些很容易被探测的信息。除非信息是完全非“个人”的,都需要使用POST数据类型。只有在URL结构能够从数据中获益的时候(比如说搜索页面中的search.php?q=my+search+terms)才使用Ajax的GET requests。

更大的输入框

我听过很多关于WEB表单输入框大小的争论。vBulletin,Joomla!和Drupal使用的都是相当小的输入框,大都是10px-12px的文字和很小的内边距。

Diigo的注册表单结构就很大气!你需要缓和不同输入元素之间的冲突。加粗的文字提示你哪些区域已经填写了,哪些区域还空着,当激活某一输入框时,它会变成淡蓝色,提示你光标现在所处的位置。

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

结论

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

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

源地址: http://www.uedreamer.com/?p=178

相关 [web 设计] 推荐:

Web设计精确点滴

- 安淡名 - 所有文章 - UCD大社区
这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且我一直认为这些问题比较严重,正因为这些都是基本问题,很容易解决的,但把这种忽略养成一种习惯性的“经验”那就“杯具”了,然而这些细节问题也不同程度的代表了你的工作态度. 当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:.

Web app设计浅谈

- Jason - 网易用户体验设计中心博客
HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中. Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.

从Web借鉴UI设计

- - 博客园_首页
  用户体验已经成为衡量应用软件质量的重要标准. 在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限正在被逐渐模糊. 虽然技术已经焕然一新,但很多开发人员并不是专业的信息架构师,可能还在使用传统的、平凡的UI设计风格.

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

浅析WEB表单设计

- - 所有文章 - UCD大社区
设计师不再只是为互联网创造漂亮美观的图形那么简单了,作为一个WEB设计师,我们还需要考虑一些其他的问题,比如用户体验,算法,代码等等. 如今用户体验设计越来越重要,对于WEB表单的设计尤其如此. WEB表单设计的目标是设计出一套让用户能够从填表到点击提交按钮的最简单的流程. 这个过程中不需要太多的炫目效果,虽然jQuery的表单插件一 直都很受欢迎.

WEB设计中的排版

- - 互联网的那点事
首先谈一下“Metro”——由微软公司开发内部名称为“ typography-based design language”(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌. 生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计. 现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥、庞杂无序,简洁之风深入人心——减少元素,以显现本质.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.