跳到主要内容

如何设计出色的网络表单

在形式方面,诱惑是直接深入细节。我们需要收集电话号码还是只收电子邮件地址?这个按钮应该说“提交”还是“申请”?等等。但与任何成功的设计或开发项目一样,最好的起点是建立整体框架。

作为着名的高效人士七个习惯的作者,Steven R Covey说:“从头脑开始。”对于形式,重要的是要清楚地定义形式必须达到的目的。新闻的“六个W”是有用的:

  • 我们需要收集哪些信息?
  • 为什么需要这些信息?
  • 谁将使用此信息?
  • 如何使用这些信息?
  • 我们什么时候需要这些信息?
  • 信息将在哪里生效?

你会发现这些问题根本不涉及形式 - 它们的重点是信息。表单只是收集此信息的工具。因此,其设计应由信息需求决定。与关键利益相关者讨论上述问题将有助于引发约束,这也会影响表格的设计。这些约束可以是关于流程的任何部分,从开发平台(例如,确保与遗留系统的连接)到需要以特定格式收集数据(例如,与相关标准一致)。

您需要的框架的另一个关键元素是很好地理解使用的上下文。在这里,我们正在逐渐远离收集信息的一方(表单所有者)的需求以及填写表单(表单填写者)的人们的需求。


这份表格是在家里,工作场所,学习场所还是在途中填写的?人们是否需要来自其他来源的信息才能填写表格,或者他们是否已经掌握了所有信息?在填写表格时,人们是分心,压力,震惊,匆忙还是没有动力?您的产品或服务对表单填写程序的承诺程度如何?

The Australian Electoral Commission hasn’t really understood context of use. This form is for people moving, but do you enter an old or new address?

澳大利亚选举委员会尚未真正了解使用情况。此表格适合人们移动,但您输入旧地址还是新地址?

了解您的受众

您可能已经注意到,理解使用环境的核心是理解受众:表单填充程序。您可以设计一个满足表单所有者需求的表单,但除非能够被目标受众访问,理解,填写和提交,否则它将失败。

您可能会发现有三种工具可用于开发真正意义上的表单填充程序:分段,角色和场景。

细分是指计算可能需要填写表单的不同人群。例如,就业前医疗可能需要由潜在雇员,潜在雇主和医生完成。

The Book Depository understands its two key segments: repeat customers and one-off purchasers, and offers options to suit both

Book Depository了解其两个关键部分:回头客和一次性购买者,并提供适合两者的选项

可以在任意数量的不同维度上进行分段,包括:

  • 角色(如我们的就业前医学示例)
  • 人口统计学(年龄,性别,受教育程度,收入,地点等)
  • 与产品或服务的接触程度(例如:不知道;意识到但不考虑;考虑;决定购买/获得;已经购买/获得)
  • 观念和意见(用户是否乐于通过信用卡在线交易?)
  • 偏好(例如'喜欢提供大量信息以获得更准确的报价'与'喜欢快速估算而不必做多少')

一旦您对目标受众进行细分,您就可以确定表单必须使用哪种表单填充以及哪些元素是“很高兴”。

角色可以是表示不同细分的有用方式。角色是对片段内人物的叙述性描述(例如乔治家庭主妇或Sangita分析师)。它们应该源于对一个细分市场的代表性样本的直接研究。出去;在他们的“自然栖息地”中观察这些人。了解他们的想法,感受和行为。如果你不这样做,人物角色是一种危险的小说,很可能是刻板印象和缺乏理解。

With personas and scenarios, Citipower may have realised many people won’t go outside, or check a bill, to find their meter number

通过人物角色和场景,Citipower可能已经意识到许多人不会去外面或查看账单来查找他们的电表号码

分段告诉我们表格填充的组。人物角色为我们提供了这些群体的切实代表。场景描述了这些角色与您的表单相关的行为,将目标受众置于使用环境中。 Sangita刚来到表格之前做了什么?她想要填写什么?她有什么信息,她需要从其他地方获得什么? Sangita有什么问题?在提交表格时及之后,她认为会发生什么?

我们现在可以设计吗?

唷!所有这一切,我们还没有起草一个问题。这可能看起来很奇怪,但相信我 - 这一前期努力的每一盎司都是值得的。询问六个Ws可以最大限度地减少仅在设计阶段发现令人讨厌的惊喜的可能性。从(痛苦的)经验来看,我可以告诉你,没有什么比设计和线框化多页表单更糟糕的了,依赖于实时服务器更新,只是被告知这样的更新是不可能的。

The questions on this insurance form are worded like a conversation with the customer, rather than the underlying data items

此保险表格上的问题措辞与客户的对话,而不是基础数据项

分段,人物角色和场景也减少了扳手后来被投入作品的可能性。但同样重要的是,这些有助于确保设计以用户为中心,提供解决内部纠纷的机制。团队可以转向细分,人物角色和场景,而不是观点驱动的决策,看看哪些是最有意义的。乔治真的会离开并检查他的电表只是为了能够得到这个更新吗?

数据项和问题

在此阶段,我们拥有表格框架,并对目标受众有了深刻的理解。现在让我们深入了解细节。首先,我们需要为表单计算出数据项。数据项是表单必须收集的单条信息,例如表单填写的出生日期。

我建议在开始绘制草图,线框图或原型之前编译一个数据项列表。它不需要复杂,但至少它应该包括标识符(如出生日期);存储格式(字符串,DD-MM-YYYY)以及数据项是必需的还是可选的。如果您有使用瀑布式软件开发过程的经验,则可以将数据项列表识别为功能规范的核心部分。

In this form for creating rental agreements, the order of sections, and of questions within sections, is sensible

在这种创建租赁协议的形式中,部分的顺序和部分内的问题是明智的

请注意,数据项与表单上显示的问题不同。数据项可能是“策略开始日期”,但问题可能是“您希望何时启动策略?”。区分这两个元素很有用,因为数据项封装了表单所有者的需要,而问题措辞将这种需求转化为适用于表单填充的东西。

以类似的方式,存储格式可以与收集格式不同。电话号码就是一个很好的例子。让表单填充符以任何方式输入数字(使用空格,短划线,括号等)。这是收集格式。在幕后,您可以解析此数据,甚至在需要时将其呈现给用户进行验证,以确保数据库中的格式一致。

一旦我们获得了数据项,下一个逻辑步骤就是编写问题(这样做本身就是一个主题)。您希望它们清晰简洁,使用适合目标受众的语言。不要忘记问题级别的帮助文本和答案选项的选择与问题本身一样重要。对于您编写的每个问题,如果问题未得到答复或使用无效数据回答,最好编写相应的错误消息。

The poor deployment of colour on this ticketing site makes success look like failure (red is most commonly associated with errors)

此票务网站上的颜色部署不佳使得成功看起来像失败(红色通常与错误相关)

问题是形式的原子元素。问题有多种不同的定位方式。在制定有效和有效的途径时,有些安排会比其他安排更好。因为有些问题自然会形成逻辑分组,所以最好按照自下而上的顺序排列问题,而不是为表单编写结构并尝试将问题纳入该结构。

为了确保整个表格的流程感觉直观,并最大限度地提高完成率,目标应该是将相关问题放在一起,在意想不到的问题之前提出预期问题,在更难的问题之前提出更简单的问题。

如果表单扩展到多个屏幕,请包含进度指示器。最佳进度指标描述了实际步骤,将表单填充作为内容感,而不是指完整的抽象百分比。

This shopping site violates the principle of similarity: fields are sometimes styled the same as headings, sometimes white

这个购物网站违反了相似原则:字段有时与标题相同,有时是白色

您还需要导航元素,例如“后退”链接和“下一步”按钮。请注意建议使用按钮进行“主要”操作(理想情况下,您希望人们做的事情:继续前进)和“辅助”操作“返回”的链接(如果相关,还可以使用“取消”)。这种视觉和结构差异有助于将主要动作与任何辅助动作区分开来,为表格填充提供重要提示。

布局

到目前为止,您拥有表单(问题)的原子元素,并将它们组织成一个流程。现在,当你听到表单设计时,你已经准备好做大多数人想到的了:布局。

您的网络表单的视觉设计应基于美学,品牌和格式塔感知原则的组合。与形式布局最相关的格式塔原则是颜色,大小,形状,图形/地面,接近度和相似性。

颜色,大小和形状是屏幕上各个元素的属性。利用这些属性突出显示(例如附加红色星号以指出哪些问题是必需的),沟通(文本框的大小通知用户关于预期的内容量)并最大化学习能力(例如,圈子为复选框的单选按钮和方块)。

同时,图形/地面,接近度和相似性的原理是关于元素之间的关系。图/地告诉我们人们自然地在周围环境中寻找人物(换句话说就是整个物体)。对于表单,这意味着人们可以检测按钮和文本框等元素 - 因此这些元素不需要太多修饰。

接近原则告诉我们人们看到彼此靠近的物体是相关的。大量难以使用的形式忽略了这一原则 - 例如,通过将标签放置得更靠近其他标签而不是每个标签对应的字段。在布置表单时,请考虑不同元素的相关方式,并确保放置反映这些关系。

相似性原则告诉我们人们看到相似的对象。该原则与网站表单的相关方式相关。在网站上,我们确保不同类型元素的样式是一致的(所有一级标题都是粗体和3个;所有链接都是蓝色和下划线等等)。 H1标题在主页上的显示方式与标题在较低级别页面上的显示方式之间的相似性有助于用户更快地学习网站和参与。

Initially this taxi booking form had unnecessary embellishment on the form fields, which are highly visible in the redesigned version

最初这个出租车预订表格在表格字段上进行了不必要的修饰,在重新设计的版本中非常明显

对于Web表单,相似性在完全相同的方式中很重要。在类型内保持一致(当样式页面标题,章节标题,问题,答案选项,帮助文本,按钮和链接)将有助于填充者更快地理解表单 - 并因此理解它。

我们也可以反过来使用相似性,以帮助引起对事物的注意。表单中的辅助按钮(例如用于验证地址的辅助按钮)的样式可以与主按钮略有不同(例如,通过以不太突出的颜色着色它们)。具有相同的形状表示次要按钮和主按钮都是按钮,但不同的颜色传达不同的优先级。

测试

通过使用此处描述的过程,您的表单可以很好地直接运行。但是每个使用环境和受众都不同,所以在现实世界中测试你的表格是必不可少的。

这可以通过一个小例子来说明。几年前,我正在制作房屋保险报价单。家中的某些物品(如珠宝和自行车)是便携式的,可以在家外带走。这些物品的覆盖水平可能与通常不便携的物品(例如厨房水槽)不同。因此,我们在表格上提出了一个问题,即提到“家里”和“家外”的物品。

只有在与目标受众的成员一起测试表格时,我们发现有些人认为“在家外”除了建筑物内部以外的任何地方(例如,在后院或在商店时),而其他人认为“在家外”只意味着仍然在房产上的那些空间(在后院,但不是在商店)。

There are multiple proximity problems with this product registration form. How many can you spot?

此产品注册表单存在多个邻近问题。你能发现多少?

这只是多页Web表单上一个问题的一部分。您可以想象我们从其他问题中了解到的其他问题,以及流程,布局和整体流程,以及在真实环境中使用典型用户测试表单。

这些步骤依次进行

总结一下:通过询问六个W来确定表格的目标,约束和过程 - 什么,为什么,谁,如何,何时,何地;详细说明使用背景;通过细分,角色和场景来了解目标受众;列出数据项;写问题(包括答案选项,帮助文本和错误信息);设计流程元素(问题顺序,分块,进度指示和导航);全力以赴;并测试,测试,测试!

遵循这些步骤将确保您最终得到满足所有各方,所有者和填充者需求的表格。

话题



翻译字数超限