让用户更高效地完成表单填写

标签: 交互设计 | 发表时间:2013-07-12 11:53 | 作者:liuman0722
出处:http://ueo.baidu.com

填写互联网表单几乎是每个用户每天的经历,如用户进行网站注册和登录、购物等,都需要填写各种表单。用户为了获得想要的东西,表单成了用户完成需求和网站系统需要数据之间的互动形式。那么表单设计的首要目标也更清晰:让用户迅速高效快捷并且轻松地完成填写。

设计目标已清晰,那么如何设计表单呢,以下从表单的内容、组织方式、流程、表单元素控件及交互等方面详细阐述。
表单的元素

研究如何提高表格可用性之前,我们先简要了解下一般表单的元素,这里我们暂且这么总结:

标签:告诉用户表单问题是什么?
输入框:供给用户填写答案信息;
动作:用户提交表单,即用户点击一个按钮或链接,执行一个操作;
帮助文字:为如何填写表单提供帮助;
输入反馈:针对用户输入给出反馈,输入正确还是错误;

提高表单可用性的一些技巧

一 信息内容的合理组织

考虑用户填写表单的目的,哪些表单需要填写,去掉没必要的表单项,确定完表单内容。如何组织起来呢?表单项并不是一个个从上到下无序罗列,而是根据表单内容,按照一定的逻辑,经过组织,分成不同的内容组,不同的主题。同时各个逻辑组和同一个主题的表单项,也是按照逻辑顺序或者用户熟悉的模式顺序,使用户浏览和填写自如。如果表单过长时,也可拆解成不同网页,类似于任务拆解,让用户一步步填写。

品牌1.0系统,新建订单时,将表单内容,进行逻辑划分为两个内容组:基本信息(重要/必填)和附加信息 (次要/选填),通过分割线区分内容组,结构清晰,易于浏览。考虑区分内容组时,应当考虑采用较少的视觉信息,过多的视觉信息可能会导致注意力分散,给表单带来大量视觉噪音。

新建百度Union账户,表单内容较长,同时有若干主题,一个网页信息量太大,所以采用多个网页来组织表单,分步骤给用户,提供清晰的路径步骤,即清晰又简单。用户在填写时,提供进程指示,避免紧张和疑惑。

二 简化表单 突出重点

根据用户使用数据,适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。比如品牌1.0的新建创意表单,90%的人不进行曝光监控链接的填写,那么默认收起,保持表单的简洁,让绝大多数用户快速完成,避免大量的表单给用户的焦虑,而又满足了小众用户的需求。

三 清晰的浏览线

思考如何设计表单结构和路径时,需要有个基本原则:由始至终提供清晰的浏览线。采用眼动仪实验即可检验用户的浏览线。如标签的对齐方式、输入框的布局等都影响着用户的浏览线。当提供了垂直单一路径,使用户减少注意力分散,可以迅速对问题作出回答,完成任务所花时间最少。

如下面Etre( www.etre.com)提供的眼动跟踪数据图,表单各个元素构成垂直轴,提供了单一路径,用户有清晰的浏览线,可以迅速对问题做出答复。而另一张图,完成过程变成了弯曲的眼球运动,采用单一路径更容易处理表单问题。

四 考虑用户场景 保证主流程顺畅

我们在设计表单时,定义了清晰的线性步骤,但很少真正实现。考虑用户场景,保证主流程不要中断,将导致人们放弃填写的元素解决。例如,招商银行卡号密码的付款流程,分为三项表单步骤:填写银行卡号、填写其他验证信息、支付成功。但在用户填完卡号和其他验证信息后,经常会发现付款额超出每日限额,以前的流程是,用户中断付款流程,不得不新打开一个网页,招行主页 → 网上个人银行登录 → 选择一卡通(输一卡通卡号、查询密码、附加码)登录后→ 网上支付 → 网上支付额度管理调整额度,然后再次重新支付,使用户在两个操作流程中切换,让用户各种折腾。而改版后的设计,可谓十分贴心,给予信息提示的同时,用户可在当前流程设置限额,避免了付款流程的中断,同时大大节省了用户的操作成本。

 

还有新建广告位时,选择所属频道,如果没有想要的频道,就需要新建频道,增加额外的页面来添加新频道,而在设计时,考虑到用户的此场景,在下拉选择框旁边,增加“新建频道”按钮,为用户提供便捷,减少了新建广告位流程的打断。

五 选择合适的标签对齐方式

“输入框标签应该是顶对齐、右对齐、左对齐还是输入框内标签?”是我们在设计表单时最常见的问题。其实业界有很多针对此问题的实验和研究(Matteo Penzo的眼动实验、Luke Wroblewski的 Luke Wroblewski’s findingsVitaly Friedman的web表单设计之注册表单),都表明每种方式有不同的优缺点,根据具体目标等因素具体考虑。

Matteo Penzo的眼动实验发现,顶部标签方式,标签移动到输入框需50毫秒,比左对齐标签方式(500毫秒)快了10倍,比右对齐标签方式(240毫秒)快了5倍左右。

博文配图_15

总之,顶部标签方式,填表时间最短。但如果尽量减少垂直面积,可以考虑右对齐方式。如果希望用户填表时认真浏览标签,了解仔细考虑表单的每个输入框时,可以采用左对齐方式。

博文配图_17

六 提供帮助

为了用户快地填写表单,一般在难以理解的表单项增加帮助信息,引导用户成功填表。帮助信息,提示用户应该如何填写,常见的帮助,一般在标签或者输入框旁提供帮助文字,交互方式也有 一直展现(即一直出现在输入框右侧、下方或输入框内)、 即时帮助(即激活输入框时,帮助文字自动出现)、 用户激活的即时帮助(即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助)、用户激活的 区域帮助(将表单所有的帮助信息统一放在一个位置)等多种方式。其实可以考虑更多的方式来更好地帮助用户,例如经常见到的信用卡有效期填写,当用户激活输入框时,右侧出现可视化的帮助信息,更简洁直观,更好理解。

博文配图_19

七 智能默认

网络表单中有很多地方能利用智能默认减少必要的选择和输入次数,加速表单完成过程。一般通过恰当设置满足大多数人需要的默认选择和数值,推送默认每个人都相同。还有个性化默认方式,它与表单对象相关。如京东购买的订单信息,智能默认与个人相关,不需要表单输入,默认之前的收货地址信息、支付配送方式、发票信息等,符合用户的需求习惯,同时避免了重复输入的成本。品牌1.0的新建广告设置,96%的用户折扣率为所属订单的折扣率,但又要满足KA用户修改广告折扣率的需求,所以输入框预置默认为订单折扣率,加速绝大多数用户的表单填写。

博文配图_21

八 即时反馈验证

虽然设计表单时,保证表单的内容结构清晰,提供有意义的输入帮助,但总有些答案不止一个。此时,直接反馈有助于再次确保人们的回答有效,提供即时校验。即时验证分为多类反馈:确认输入合适、建议有效回答、核对输入信息,通过实时更新设计以帮助用户控制在必要的限制范围内。这类反馈通常发生在用户在输入框开始、继续输入或者停止输入的时候。

如在设置密码时,要求用户输入字符数有限制、字符类型有限制的密码,利用即时验证,不仅告诉用户输入的密码是否有效,是否合格,而不是填完所有表单,提交之后,才告我密码需要修改,同时还能说明密码的安全程度,采用高度可视化方式让用户衡量密码质量。

直接反馈不仅限于确认所提供的答案,还能提供输入建议。用户在搜索时,搜索框能够在输入过程中自动补全、提供相关联的搜索建议,既可以避免用户输入出错,又可以节约用户的拼写时间(这一点在手机端更加需要)。

九 额外输入

额外输入可以提供更多选项或者高级选项,满足有需要的用户,同时不妨碍许需要的用户。如图不到10%的用户会填写一个以上的曝光监控链接,这类用户可以选择点击“添加”按钮来进行更多的输入,即时增加并不阻碍完成任务。

博文配图_23

十 其它方法

如果用户填写的表单与已有表单的表单项大多数相同,为避免用户重复的输入,提供 复制导入表单数据功能,用户只需修改少量数据即可。

将重点信息或者难以理解的信息可视化,清晰有效地传达与沟通信息,形成高效的功能、使用映射,使用户高效完成任务目标。如将广告管家1.0选择创意模版,表格列表形式清晰,但用户理解成本和选择判断成本较大;新方案默认缩略图形式,强调对创意的直观,一图胜千言,用户选择较高效。

博文配图_25

除以上方法,还有一些主动作和次动作的差异、采用垂直或水平选项卡、采用叠层等方法。当用户在填写表单时,他们希望尽可能快的完成任务。因此十分有必要将表单设计得清晰和整齐。

 

后续

随着科技的发展,语音智能、拍照及传感器等新技术的出现,这些必定会对表单设计打开新的思路。也可能以后人们不通过表单形式,直接通过声音、眼神等完成与系统互动,表单或许更加弱化或消失。

 

参考资料

http://www.etre.com
http://www.lukew.com/ff/entry.asp?1502
http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/
Luke Wroblewski 《Web Form Design: Filling in the Blanks》

 

 

相关 [用户] 推荐:

用户及用户特征

- Nick - 所有文章 - UCD大社区
要创建1个可以与用户有效交流的网站,必须考虑到与你交流的用户. 理解用户的需求对我们决定网站内容、信息量、用户以及内容结构至关重要. 用户不是被动的接受网站提供的信息,所有人都会不断的地根据自身经验和猜测来理解. 自己在屏幕上看到的内容,即使我们认同是相同语言,但是每个人的理解含义不会完全相同. 我们都会根据自己的知识和经验来理解所看到的内容,(如果你不住再伦敦,就不知道Oyster卡,Oyster卡是乘坐公交交通时用的旅游储值卡).

用户体验

- tal-rasha - 博客园-首页原创精华区
    用户体验是一个很大的话题,先从一个故事说起.     周末参加了两天的PMP培训,听课期间注意到老师的一个细节,在讲选择题的时候,选项A、C读音正常,而“B”老师读为Boy,“D”老师读为Dog.     刚听到的时候大家莞尔一笑,以为这是个善意的玩笑.     很快,我想明白了,B和D的发音类似,容易混淆;Boy和Dog是简单的单词,发音能够明确区分,也没有类似Bog和Doy的读音混淆.

用户研究

- - 技术改变世界 创新驱动中国 - 《程序员》官网
介绍自己的设计流程时,设计师通常都说它是“以人为中心”或是“以用户为中心”的. 笼统地讲,这表示设计师经常要考虑所设计产品的潜在用户,尽力为这些人创造出最好的产品. 这个问题看似简单,实际上却不好回答. 好的设计通常都是从用户研究着手的. 我们如何才能发现人们想要实现的目标. 虽然这样做有时会得到一些有用的信息,但一定要小心地评估人们给出的答案.

Chrome用户比IE用户更聪明?

- - 创意科技 - 果壳网
Calcudoku 根据2010年至2011年间该网站的数独解谜数据,对使用不同浏览器的用户进行了分析. 结果显示,在推解该网站的数独题时,Chrome用户的表现要好于其他浏览器用户. 从Calcudoku发布的分析图中我们可以看出(下图),无论是解4×4、5×5还是6×6的数独,Chrome用户的解题速度都是最快的,火狐和IE用户分列2、3位.

排泄型用户

- Keen - 坏脾气的小肥
很长时间以来,我一直在观察某类行为,最近取了个名字叫“排泄型互动”. 最重的一级当然是辱骂与下流的留言;次一级是理直气壮的弱智言论,比如抵制家乐福(昨天还看到有人说要抵制南京的法国梧桐树,因为看法国不顺眼,只爱护中国植物);最轻的一级则是长年累月发表毫无信息价值的口水评论,如“毒,德味. ”“冬天里把爱洒向人间,洒向朋友的空间.

hotswap 用户手册

- 小丑鱼 - 淘宝JAVA中间件团队博客
关于hotswap(该补丁的网址http://ssw.jku.at/dcevm/). Hotswap  是一个允许在运行状态下无限制的修改加载类文件的Java虚拟机补丁. 当前java虚拟机的动态加载机制只允许修改类的方法体,而打了hotswap补丁以后,可以增加,删除类属性,方法,甚至可以改变一个类的父类.

Facebook:Google+没有用户

- Nanqi - 36氪
6月份 Google 推出带视频群聊的社交网络 Google+ 之后,Facebook 马上联合 Skype 推出基于网页版的一对一视频聊天服务,上周 Google 宣布推出 Google+ 上的社交游戏平台,并首先上线了《愤怒的小鸟》、Zynga 的《德州扑克》等游戏之后,Facebook 马上回应对游戏进行了一系列的改版,包括游戏分辨率更高,侧边栏 News Feed 等.

用户是上帝

- Jeff - DBA Notes
因为今天在微博上抱怨支付宝在Mac下控件的问题,又想起了「用户是上帝」这句话. 恐怕每个人都听过这句话,也有很多人、很多公司将这句话写入公司章程,写在墙上,甚至挂在嘴边,但是很少有人真的把这句话放在心里. 静下心来仔细想一下,发现自己过去可能没有明白「用户是上帝」这说法到底有什么含义. 用户是上帝,不是说对于上帝的所有需求或是要求,你都去满足,那样你无形中在心里将上帝当作了魔鬼,切记不要轻易出卖自己产品的灵魂,不要动不动被用户所驱使.

DUBBO用户指南

- - 开源软件 - ITeye博客
随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本. 此时,用于简化增删改查工作量的 数据访问框架(ORM) 是关键. 当访问量逐渐增大,单一应用增加机器带来的加速度越来越小,将应用拆成互不相干的几个应用,以提升效率.

天使用户启示录

- 书皮 - 互联网的那点事...
天使用户就是一个产品最早那批使用者中最认同产品,并希望更多人认同这个产品的人. 对于创业者来说,他们就像天使投资一样,对产品和企业有着至关重要的意义. 8月23日,Gmail工程经理马克·斯奇贝克(Mark Striebeck)在其博客中发布了代号为“麒麟”的集成功能的截图. “麒麟”计划是谷歌应广大用户要求将Google+ 整合至Gmail中的新举措,从而尝试让Google+与公司现有网络服务无缝链接,借助于此,谷歌进军社交网络迈出了又一实质性步伐.