你会设计表单吗?网页表单结构设计

网页制作Webjx文章简介:Web表单设计:表单结构.

你是否曾为表单设计感到过沮丧或不知所措呢?接下来三篇文章,希望能彻底改变你的看法,真正爱上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年人机交互(Computer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”,作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例,提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响,并成为评估和资助设计项目的范本。

通过逐页画出整个流程,同时配合说明用户离开和最佳实践分析的网站点击数据,下面我们分别分析每种数据的意义:

可用性测试 目的在于可获得宝贵的定性与定量数据。

  • 错误或问题的数量或位置;
  • 错误或问题的严重程度;
  • 完成率;
  • 完成整个表单或部分表单的时间;
  • 满意度评分;
  • 任务主观评论。

实地测试 从人种学角度观察,人们在不同环境中,与表单的互动方式情况。

  • 访问表单要求填写信息的来源:文档、软件和人等;
  • 表单填写环境:吵闹的办公室和小监视器等;
  • 任何说明表单完成或错误率的额外情境。

客户支持 通过客服或访谈等,了解用户使用表单时发现的问题,有利于分离和解决问题。

  • 报告最多的问题;
  • 解决报告问题的常见办法;
  • 问题报告人的统计信息;
  • 问题报告人所使用的操作系统及其浏览器设置。

网站追踪 表单可用追踪任意数量的有用量化指标。

  • 完成率;
  • 如果表单未完成,人们是在哪个位置放弃填写表单的;
  • 人们访问表单的方式;
  • 已使用哪些表单元素;
  • 已输入哪些数据;
  • 浏览器和操作系统信息。

眼动跟踪 记录用户如何理解表单的表现形式,可用于解释复杂的地方。

  • 人们在表单上看到了什么;
  • 眼球固定次数:解析表单所花的努力;
  • 眼球固定时间长度:看每个元素所花费的时间。

Web惯例 调查表单设计问题的共同解决方案可提供宝贵见解。

  • 设计问题的独特解决方案;
  • 网上通用的模式。

观察用户如何完成表单,或者利用现成的网站分析软件监测网站日志,也可以得到大量有用的观测信息。

虽然很难设计出优秀的表单,很多时候都是“视情况而定”,但是通过考虑表单的设计因素,也就是以下我们所说的,找到适当解决办法的原则和模式,可以设计出不错的表单。闲话少叙,针对互联网表单设计,原则如下:

  • 尽量减少痛苦-用户不在意之前是什么,更在意之后能得到什么,让过程尽量简洁快速。
  • 说明填写完成路径-表单应该有清晰的提示或帮助用户,告诉他们如何能快速完成目标。
  • 考虑情境-表单并非独立存在,它们都是更广泛情境(受众群体、应用、业务)的组成部分,这些情境决定如何使用表单。
  • 确保一致沟通-表单是用户与公司沟通的中间人,多个团队参与对话,但最后表单只能传达一种一致的声音。

贾里德·斯普尔曾经有一个经典案例:修改按钮为网站年收入增加3亿美元。粗听起来好像是天方夜谭的事情,但是它确实是事实。良好的设计如何能为商业创造价值,这是设计团队一直在思考的问题。有一点是可以肯定的,我们用客观的数据与严谨的实验,去证明我们设计原则与设计模式,让它们的设计价值最大化,达到为商业创造价值的目标。

你会构建表单组织吗?

面对优秀表单设计,人们能够不费吹灰之力就能填完表单,这里有视觉与交互设计考虑因素对表单的影响,但更重要的因素是表单的内容及组织方式。以下是经过多年的设计实践我们能得到的一些原则:

  • 应当花时间评估表单中的问题。应当提高警觉,去除一切不必要的问题。
  • 表单所提问题(标签)应当尽量简洁。
  • 如果人们会误解简洁标签,应当寻找使用自然语言的机会,澄清表单要求人们回答的问题。
  • 表单所提问题来自多个不同人或部门,应当确保表单统一口径。
  • 可以将表单内容组织成逻辑组,有助于浏览和完成填写。
  • 如果可能,应当以对话形式构建表单。主题间的自然间断有助于组织表单。
  • 如果表单可自然分成若干主题,一个网页可能就足够组织表单。
  • 如果表单包含大量问题,同时有若干主题,可能需要多个网页来组织表单。
  • 如果表单包含大量问题,而只和一个主题相关,一般需要一个较长网页来组织表单。
  • 可以考虑在表单填完之后提出可选问题。可能会比在初始表单中就提出这些问题能获得更多答案。
  • 可以考虑采用Web惯例调查发现特定类型网站如何组织表单。
  • 应当采用最少的必要视觉信息来区分内容组。
  • 英文网站首字母应当大写,使内容组更容易浏览。

Effortmark公司可用性顾问,卡罗琳·贾勒特说:“先考虑人,在考虑像素。”开始设计前要思考一个问题:用户真正关心什么?设计师在关注像素的同时可能忽视了人因因素-比如标签末端是否需要放置冒号等微妙细节。用户真的不关心冒号。其实用户真正关心的是问题的内容和为何要问这些问题。从了解用户开始,并了解你的公司搞清楚为什么表单要这么设计?是用户关心的关系点问题么?“保留,删减,延迟,解释”形成更好问题的四大策略,同时,多种视角的平衡用户需求与商业需求。

你还应该注意哪些表单设计细节?

设计表单时要注意细节问题的处理,比如:表单的命名、起始页、清晰的浏览线、注意力分散最少、进程指示、Tab键跳转等。其实还有一点就是让用户知道完成表单的路径。

  • 确保表单名称符合人们的期望,并简洁解释每个表单的用途。
  • 如果表单需要时间或者查询信息才能填写,可以采用起始页来设定人们的期望。
  • 由始至终采用清晰浏览线和有效视觉步伐来引导人们,确保说明清晰的填写完成路径。
  • 对于关键任务表单,比如结算表单或者注册表单,应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容。
  • 如果表单分为多个已知的有序网页,可以采用进程指示来传达范围、状态和位置等信息。
  • 如果表单没有清晰的有序网页,不要采用进程指示,应当采用更笼统的进程指示,而不要设置错误期望。
  • 设计表单布局时,应考虑使用Tab键的“跳转”体验。
  • 采用“tabindex”HTML属性来控制表单的跳转顺序。

Oracle可达性主管,彼得·沃勒克说:“对许多残障用户而言,表单的设计可达性尤其重要。可达性的核心是可用性。例如,如果网页不能使用或者无法开始,可达性首先需要“超级设计”(Uber-design)。包括:超级减少痛苦、超级明示完成路径、超级考虑情镜、超级确保一致沟通。同时可以遵循W3C制定的互联网内容可达性指南(WCAG)和美国采购法508章的最佳可达性指南。

[版权声明]:版权归作者Alite所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com

时间: 2024-09-14 17:10:26

你会设计表单吗?网页表单结构设计的相关文章

简单实用的网页表单设计:设计用户喜欢的网页表单

文章描述:漫谈表单设计. 跟你所知的相反,布满漂亮的按钮.颜色和字体,再加上一大把jQuery插件的表单并不一定好用.真的,这么做只能(零散地)体现表单可用性的1/3. In this article, we'll provide practical guidelines that you can easily follow. These guidelines have been crafted from usability testing, field testing, website tra

网页表单输入框设计:精心简化表单输入框

文章描述:简化输入 - 让网页表单更亲切. 大部分人不喜欢填表单,因为人们来到网站,主要目的不是填表,而是浏览或者购买.精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血.那怎样才是优秀的表单呢?页面的布局.逻辑组织.视觉样式等都是值得关注的细节,其中简化输入是最近常被提及的,在这里我分享下自己工作中的心得- 1. 更高大的输入框 增加输入框高度,加粗字体,可以让网页上的输入框看起来更容易填写和阅读.随着电脑显示器尺寸变大,这样的输入框也显得更大气. 2. 添加选取器. 与其让

网页设计:WEBJX收集优秀的网页表单设计例子

文章描述:30个非常优秀的网页表单设计例子. 网页表单作为访问者与网站所有者主要的沟通途径,确保网页表单比较容易理解和使用起来比较直观成为网页设计的重要目标之一.每个网站都会有适合自己风格的表单,新颖的网页表单设计能吸引用户的注意力,让更多的用户填写反馈信息.在本文中将展示国外一些非常优秀的网页表单设计例子,以供欣赏借鉴. RxBalance Awesome Brian Handley Gowalla Form Spring Buffalo [1] [2] [3] [4] [5]  下一页

网页设计参考:寻找设计网页表单的灵感

网页制作Webjx文章简介:一组网页表单页面设计欣赏. 网页表单看似是网站中最常用的页面,内容大多也不会有啥变化,但这样看似简单的表单设计起来并不容易,原因就在于太简单了,所以在一些新手设计时会感觉不知从何开始.其实对于网页设计老手来说,表单设计也有自己的规律,最常用的一种方式就是根据网站整体风格进行设计. 而一些本身就很干净的网页来说,设计起来就需要花些功夫了.本文推荐的几个表单页面包含了复杂与干净的不同网站风格.可以从中寻找设计网页表单的灵感.

测试网页表单的交互设计

作为网页表单交互设计,有时候网页设计师本身要进行一些极端的测试,这就包括填写和思考一些普通用户很难想去做的一些动作.比如在价格输入框中填写英文字母,什么都不输入的时候按提交按钮等等. 一般作为测试者,我们都要尽可能的把一切可能发生的用户行为考虑到,即便这种可能性出现的概率很低. 以下我们来具体分析啊下网页表单的交互设计中的极限测试以及对淘宝等网站进行观察,看看这些大网站对于表单交互测试做到了什么程度! 如图: 1. 你会在search bar什么都不输入的情况下就按search button吗?

网页表单设计中的反馈提示

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://lilong4174.blogbus.com/logs/39063960.html 反馈这个词儿其实是控制论的基本概念,泛指发出的事物返回发出的起始点并产生影响.在信息交互过程(输入输出)中,它是一种界面输出物,用以提醒信息输入者他的操作结果.它有很多种形式,包括界面元素.声音.影像变化和物理位移(如震动)等. 我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出信息,为了加强区分避免歧义,我们这里姑

CSS设计符合Web标准的网页表单的几个技巧

本文总结了用div CSS进行网页表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: <textarea name=textarea wrap=virt

WEBJX收集30个优秀的网页表单制作实例

这里是30个相比风格更加明显,更注重"外貌"的包括评论表单在内的一些优秀的表单应用设计,任何人都希望可以在使用产品的同时能获得愉悦的感受,因此,一个提供易用漂亮的交互方式的Web表单可以吸引更多用户的响应,在愉悦使用的同时留下更直观的视觉印象. 相关文章: 网页设计师参考:网页登录表单设计实例 网页交互设计参考:漂亮的网页登陆表单设计实例 CSS网页设计实例:15个用CSS设计的网页表单实例 1. Synch Media 2. Ft designer 3. Glass house 4.

有效网页表单的八条规则

如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了.一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑.明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则. 文章中所有的实例都是用CoffeeCup Web Form Builder生成的. 1. 保守性的搭建, 并带有目的性的设计表单 我们要面对的现实是没有人喜欢花大把的时间填写表单. 保持表单的短小精悍并且剔除绝对不必要的或者不会提供实际收效的表单元素. 保证表单的每个部分都对整体起到了推动

网页表单有效的八条规则

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了.一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑.明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则.文章中所有的实例都是用CoffeeCup Web Form Builder生成的. 1. 保守性的搭建, 并带有目的性的设计表单 我们要