适用于web表单设计的可用性原则(上)

原文:An Extensive Guide To Web Form Usability 

作者: Justin Mifsud   发表时间:2011年11月8日    

译者:BibliophileO_o

#译者有话说#   标签按钮等这些看似小的元素设计就像是达芬奇的鸡蛋,你需要从各种角度场景下不停打量深钻,才能把它画成一颗真正符合用户心中的蛋。画蛋是积淀。


不同于你可能会在某些地方看到的一些论调,让表单充满好看的颜色、字体、按钮以及大量的jQuery动效并不会让你的表单更好用。事实上,你这么做,大概只能让你的表单(以非结构化的方式)在可用性上提升到33%。


在这篇文章中,我们会提供一些很实际的参考规则帮助你更好地设计表单。这些参考规则是从可用性测试,现场测试,网站追踪,眼球追踪,网页分析和客服人员提供的用户真实的抱怨中研究分析而来。


为什么表单的可用性很重要

ISO 9241标准 将网页的可用性定义为“在特定的场景下,目标用户能够准确,高效并满意地实现指定目的。”用户使用一个网页的时候,他们是有特定目标的。如果我们能将网页的体验设计好,它会满足用户的目标并且符合该网页背后的需求逻辑。设计一个表单的时候,我们经常要平衡用户需求和表单的逻辑目标,因为,尽管人机交互设计在进步,表单仍然是web端用户进行交互的主要形式。事实上,表单经常被用在引导用户完成目标最后也是最重要的环节。

下面,我们来聊聊表单的三种主要用途。正如Luke Wroblewski在他的书(Web Form Design: Filling in the Blanks)中所述,每一个表单的设计都是为了满足以下三种意图之一:商业,社交,生产力。下面的表格将以上每一种意图转化成他们背后的业务目标:


表单可用性,参考自 Luke Wroblewski’s Web Form Design: Filling in the Blanks.

综上所述,表单和web可用性原则有以下两方面的联系:

  1. 表单能够让一个网站变得好用或者不好用,不好用的表单阻碍了用户目标的实现;

  2. 表单必须要好用为了帮助用户去实现他们的目标。

本文将着重讲述第二点原则,因为一个好用的表单自然而然会提升网站的整体用户体验,从而论证了第一点原则。


Web表单的六个组成部分

表单是网站组成的必需品,但它的设计往往是设计师和用户的痛点。久而久之,用户心中已对表单的形式有自己的预期。符合用户预期的表单一般有以下六种组成:

1.标签

标签告诉用户需要输入什么。

2.输入框

输入框让用户提供反馈。它们包括文本输入框,密码输入框,复选框,单选框,滚动条等等。

3.动作

“动作”是指一些触发动作的按钮或者链接。如,提交表格按钮。

4.帮助

一些“帮助”用户填写表单的信息。

5.反馈信息

反馈信息是根据用户的输入内容反馈给用户的信息。它们可以是正面的(如,告诉用户表单提交成功),也可以是负面的报错信息(如,“您填写的用户名称已经存在”)

6.验证

验证措施确保用户提交的数据符合系统规则。



Skype的注册表单拥有上述所有的六个组成部分。


表单三方面的可用性判断

正如Caroline Jarrett和Gerry Gaffney在他们的书中(Forms That Work: Designing Web Forms for Usability)所述:除去布局,功能和目的方面的差异,所有表单都有以下三个主要方面:

1.关系(Relationship)

表单建立了用户与产品之间的关系。

2.对话(Conversation)

表单使用户和产品之间可以对话。

3.表现(Appearance)

通过视觉交互呈现,表单建立起了用户和产品之间的关系和对话。

对于一个易用的表单,上述三方面都得具备。下面,让我们来深入探讨每个方面,从而可以找出一些能够让设计师容易遵从并且实用的指导方法,来设计让用户好用的表单。

第一:关系(The Relationship)

17世纪的英国诗人,讽刺作家,律师,牧师,John Donne曾经说过,“没有人是绝对独立的”(原句是:No man is an iasland)。确实,在这个社会中,不管是在爱情,友情,学业或是工作中,人类依靠关系成长。一个表单,则是建立或者说加强用户和产品之间的关系。一旦表单设计的很失败,这段关系就会被提早扼杀和终止。

为了防止这段关系提前被扼杀,我们需要遵从以下几点:

  • 一段关系的维系基于信任,所以,在您的表单中建立信任是最重要的。信任的建立可以通过标识,图像,颜色,排版和文字来实现。这样用户可以很容易通过表单的设计感受到这是一个多么靠谱的产品。

  • 每一段关系都有一个目标,比如,在一段浪漫的关系中人们渴求的是爱情和幸福,又或者在一段商业关系中想要达到的目标是盈利。设计师在做设计的时候,问问自己,你的表单需要达到什么样的目标呢?

  • 基于表单的目的给表单取名字

    一个表单的名字会在一开始就告诉用户这个表单是做什么用的以及用户需要在表单里面填写什么。

  • 就像在一段关系中,去了解另一方是很必要的。了解你的用户,站在用户角度思考,你在表单中设计的这些问题的问法是否合适,如果合适,那么这些问题出现的时机是否合适?这些思考将会注入一种自然的流程到你的表单中。

  • 了解用户还能帮助设计师写出合适而精简的文案。这会帮助设计师设计出平衡用户需求和产品需求的界面。

  • 不要提超出用户预期的问题。在一段关系中,如果对方问出一些不恰当的超出你预期的问题,自然会让你感到不舒服从而失去信任。线上关系同样如此。设计师应与需求方多沟通,梳理出真正需要的信息。

  • 交互行为或界面上出现一些突如其来的改动会让用户措不及防。所以,千万别在表单和流程设计之间做出一些不符合常理预期的改变。


了解你的用户。让新用户去注册,老用户来登录。Debenhams并没有明确让用户感知到这两个区别。

相反的,Amazon简化了新老用户寻找入口的过程。

第二:对话(The Conversation)

表单即对话。跟对话一样,表单代表了介于两个角色之间的双向沟通:用户和产品。事实上,用户在填写表单的过程就是为了发起与产品之间的对话。

举个例子,在社交网络中,用户会填写注册表单来告诉这个社交产品“我们愿意加入”。在处理用户请求的过程(无论是自动的还是人工的),产品会问用户一系列问题(以标签labels的形式),如他们的姓、名、邮箱等等。一旦用户被接受(或者被拒绝),产品方会告诉用户结果,从而形成了沟通的闭环。

以下是一些有用的设计指导意见:

  • 正如前面提到的,表单是一个对话,不是一个审讯。

    标签上咄咄逼人的词汇会让用户觉得焦虑,与此同时,如果用户还会继续操作,那他们会给出你想听到的答案而不是他们内心真正所想。

  • 将标签有逻辑的排列,会让这段对话呈现自然状态。举个例子,在仅仅问过两三个问题后就问用户他们的姓名,难道不会很奇怪么?越深入的问题应该在表单的最后去问。

  • 将相关信息组合排列,比如个人信息。问题的顺序从一组问题到下一组问题,会更加自然有结构性。


Yahoo的注册表单通过紫色的标题文字和合适的线条,有效地将相关内容组合在了一起。


然而Constant Contact将相关信息组合的就不好,它将组合信息之间相隔太远,会使用户产生疑惑。

  • 就像在一段真正的对话过程中,每个标签(label)一次针对一个主题
    来帮助用户填写相关的问题。

  • 自然的停顿,会表明在表单中哪里出现留白, 如何组织标签以及在多个页面下是否将表单拆分。

  • 在任何一段对话中,用户会被周围出现的噪音分心。所以,做减法,将广告和没有必要的导航这些会让用户分心的事物从你的表单中去掉。


Dropbox提供了一个注册表单设计的正面示例。表单中的留白留的很有效,并且这个页面非常整洁,没有一丝冗余的东西。


说明:由于文章较长,译者将其分为上,下两篇。下篇着重描述了第三方面:UI表现的设计注意点。

链接:适用于web表单设计的可用性原则(下)

评论 ( 2 )
热度 ( 5 )

© BibliophileO_o | Powered by LOFTER