Web表单设计:表单结构
[版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com
你是否曾为表单设计感到过沮丧或不知所措呢?接下来三篇文章,希望能彻底改变你的看法,真正爱上Web表单设计。首先感谢Luke Wroblewski的帮助,让我有机会细心品味设计表单的乐趣。总体来说,Web表单主宰着结算、注册和数据输入。每天eBay、Taobao上的大量物品主要通过出售物品(Sell Your Item)表单售出;MySpace、Facebook等超过几亿的用户都是通过Web表单加入网站社区的;YouTube、Youku通过上传视频(Upload Your Video)表单收集了大量视频。这一切都给我们创造了很多接触Web表单的机会,Web表单常常是漫长旅途的最后一步,也是最重要的一步。
你会设计表单吗?
以上为Yahoo的注册表单,我们可以大体观察出三个主体元素:标题、数据、动作。它们是组成表单的基本元素,过多的修饰表单或过多无用信息会给用户带来更多的思考与厌恶。有时用户会觉得表单很讨厌,想做的是投票、申请工作、在网上买书、加入小组或从近期购物中拿到折扣等,但表单却给用户带来了麻烦,妨碍了他们。
大多数表单是“由内而外”(Inside Out)而不是“由外而内”(Outside In)设计出来的。举个例子:如果谁想成为网站的会员,网站就会跳出表单要求用户提供用户名,密码,电子邮箱等。这就是“由内而外”的设计,多数用户不会认为享受网站服务与填写讨厌的表单有什么必然关系。同时,“由外而内”的设计意味着以组织或者网站外部人的角度来看待事务。这时候项目成员需要以用户的视角来讨论表单的设计,目标是让用户轻松地完成填写。让表单以某种隐形平衡方式存在,但又能保证系统和用户都获得想要的东西。
在电子商务、社交互动、生产力网站里,我们发现表单阻碍着用户需求和商业目标,表现为:
Web表单设计在支付和注册环节,会起到至关重要的中介作用。2004年人机交互?omputer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”,作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例,提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响,并成为评估和资助设计项目的范本。
通过逐页画出整个流程,同时配合说明用户离开和最佳实践分析的网站点击数据,下面我们分别分析每种数据的意义:
可用性测试 目的在于可获得宝贵的定性与定量数据。
实地测试 从人种学角度观察,人们在不同环境中,与表单的互动方式情况。
客户支持 通过客服或访谈等,了解用户使用表单时发现的问题,有利于分离和解决问题。
网站追踪 表单可用追踪任意数量的有用量化指标。
眼动跟踪 记录用户如何理解表单的表现形式,可用于解释复杂的地方。
Web惯例 调查表单设计问题的共同解决方案可提供宝贵见解。
观察用户如何完成表单,或者利用现成的网站分析软件监测网站日志,也可以得到大量有用的观测信息。
虽然很难设计出优秀的表单,很多时候都是“视情况而定”,但是通过考虑表单的设计因素,也就是以下我们所说的,找到适当解决办法的原则和模式,可以设计出不错的表单。闲话少叙,针对互联网表单设计,原则如下:
贾里德・斯普尔曾经有一个经典案例:修改按钮为网站年收入增加3亿美元。粗听起来好像是天方夜谭的事情,但是它确实是事实。良好的设计如何能为商业创造价值,这是设计团队一直在思考的问题。有一点是可以肯定的,我们用客观的数据与严谨的实验,去证明我们设计原则与设计模式,让它们的设计价值最大化,达到为商业创造价值的目标。
你会构建表单组织吗?
面对优秀表单设计,人们能够不费吹灰之力就能填完表单,这里有视觉与交互设计考虑因素对表单的影响,但更重要的因素是表单的内容及组织方式。以下是经过多年的设计实践我们能得到的一些原则:
Effortmark公司可用性顾问,卡罗琳・贾勒特说:“先考虑人,在考虑像素。”开始设计前要思考一个问题:用户真正关心什么?设计师在关注像素的同时可能忽视了人因因素-比如标签末端是否需要放置冒号等微妙细节。用户真的不关心冒号。其实用户真正关心的是问题的内容和为何要问这些问题。从了解用户开始,并了解你的公司搞清楚为什么表单要这么设计?是用户关心的关系点问题么?“保留,删减,延迟,解释”形成更好问题的四大策略,同时,多种视角的平衡用户需求与商业需求。
你还应该注意哪些表单设计细节?
设计表单时要注意细节问题的处理,比如:表单的命名、起始页、清晰的浏览线、注意力分散最少、进程指示、Tab键跳转等。其实还有一点就是让用户知道完成表单的路径。
Oracle可达性主管,彼得・沃勒克说:“对许多残障用户而言,表单的设计可达性尤其重要。可达性的核心是可用性。例如,如果网页不能使用或者无法开始,可达性首先需要“超级设计”(Uber-design)。包括:超级减少痛苦、超级明示完成路径、超级考虑情镜、超级确保一致沟通。同时可以遵循W3C制定的互联网内容可达性指南(WCAG)和美国采购法508章的最佳可达性指南。
注册表单设计例子(Registration Form Design Examples):
Mint
Windowslive
Vox
Box
Netvibes
Compete
Aol
WordPress
Blogger
Xanga
Hi5
Outright
Deviantart
Basecamp
Yelp
Vimeo
Ning
Metacafe
Mint
Fotki
Myspace
Lulu
Animoto
Wufoo
Geni
Netflix
Ebay
Ballpark
Craiglist
Gowalla
Mobileme
登录表单设计例子(Login Form Design Examples):
Animoto
Tumblr
delicious
Myspace
Gliffy
Footnote
Hulu
Polldaddy
Virb
Piczo
Mint
Tutsplus
Cnn
Viddler
Typepad
Devunity
Imagekind
Yahoo
Scrapblog
Zooomr
Mobileme
Grooveshark
建议继续学习:
- Web表单设计之注册表单 (阅读:7684)
- 网页表单设计摘要 (阅读:4387)
- jquery.form.js,JQuery表单插件 (阅读:4184)
- 10个超棒jQuery表单操作代码片段 (阅读:3365)
- 防止表单重复提交的几种策略 (阅读:3406)
- 表单校验 (阅读:2421)
- 渐进增强的HTML5表单方案 (阅读:2388)
- 读《Web 表单设计》 (阅读:2238)
- 模拟HTML表单上传文件(RFC 1867) (阅读:2098)
- 上海航空网站注册表单优化方案 (阅读:2060)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:zongbo.yuzb 来源: 阿里巴巴(中文站)用户体验设计部博客
- 标签: 表单 表单设计
- 发布时间:2011-06-23 13:27:48
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则