表单设计经验,各种设计员都应有明了的10件表单

众所周知,表单是网页中的重要元素。一个优秀的表单会给用户带来不错的用户体验。可我们在设计中需要注意哪些事项呢?在下面的文章中,用户导向设计公司CX Partners的设计师Joe Leech则为我们阐述了表单设计中一些注意事项。

表单是网页中的重要元素,一个优秀的表单会给用户带来不错的用户体验。经过近期长时间设计表单,我们需要从表单基本层面重新审视表单、理解表单。深刻认识到表单时用户和软件之间最具挑战的交互方式。

关注互联网,关注硅谷堂。想了解更多关于互联网岗位知识的信息,关注微信公众号:硅谷堂(ID:guigutang)或下载“硅谷堂”APP。

以下为原文文章:

1、必填字段不需要标记

无论是注册网站还是内容输入,总是回避不了表单这种UI控件。

估计没有什么比表单更让设计师头痛的了。表单能否让设计师表现出创意?我们可能需要从做基本的层面,重新审视表单、理解表单——表单是用户和软件之间的对话。

我们在设计表单时,大多数时候,或者说大多数做法都会给必填字段加上一个星号*标记,以让用户知道这是必填选项,但实际上必填选项没有太大意义。一份表单,最初始的出发点本来就是要填写完这份表单,标出必填字段并不是一个好的交互,无形之中给用户增添了学习成本,单纯使用(红色的*)星号标注必填字段有一定的学习成本,会让用户有学习负担。针对必填选项,表单选项基本上都是需要填写的,特意的使用某个符号标示此项必填,会显得有些许累赘,完全可以设置选填选项来弥补这一缺陷。

表单几乎是每一个数字产品都无法规避的组成部分,它的作用近乎无可替代。

忘掉切换、点击吧,表单是我们数字设计师(译者:我想应该是依赖计算机进行设计的设计人员)将面临的最富有挑战性的交互方式。下一次,当你要设计一个表单的时候,不要认为好的设计就是要应用好看的CSS效果或者是添加漂亮的jQuery特效。表单设计的水是很深的。

但是不需要标记必填也不是对所有表单都适用。如果大部分字段都必需输入,那么就将可选字段进行标注,如果大部分字段都是可选的,那么就标注必填字段。

不过,表单这种控件应用范畴极为广泛,应用情况牵涉到方方面面,所以请注意,今天的文章里我们所提及的设计准则都只是一般准则,每一种其实都有例外的情况。不过作为一般准则,它们可以很好地引导你设计出一个可用性极佳的表单,同时,作为设计师的你还需要根据实际情况,灵活地调整细节。

我已经做过上百个表单用户测试,为保险公司、假期预订交互设计过一些非常复杂的表单等等。可能你最近使用的某个表单就是我设计的。

关于必填选项这个处理方式,看了一下,腾讯系的很多产品都没有加必填选项标记,如腾讯微博、腾讯微视、QQ号注册等,百度系的百度账号注册也没有必填选项标记,Facebook注册没有必填标记。

接下来,我们一起来看看这些准则都包含了哪些内容吧。

图片 1

2、每一个表单只使用一种按钮类型,或者只提供一个按钮

尽量使用单列设计

下面这些经验教训,我认为设计师在开始设计表单设计之前要思量一番。

我们在填写表单的时候都会发现,当选项项增加时,我们就需要增添世间去思考怎么做选择,下决定的时间就会无形之中变长。我们可以在设计表单的时候就避免这个问题,每个表单页面只有一个醒目的按钮,让所有的基本按钮都保持同一风格,主动作按钮突出让用户毫不费力地进行操作。

●○●多列的表单容易让人分心,无法完全垂直浏览一口气完成填写。

1、不要标记必填字段

3、输入框的长度要保持适中

顶部标签对齐

你知道小星号(*)就表示必填字段?我已经见过很多关于此项用户测试失败的例子。从概念上来说,必填字段没有多大意义,等同离线。对于开发者,这个是很好的,他们提供了一种很好的黑白方式去完成。星号表示的必填字段不是一个好的表单元素,因为它需要用户去学习。在用户测试中我看到的典型行为是用户在上面填写表单,结束于某个东西阻止他们的时候或者他们碰了某个按钮。

输入框的长度要满足输入的文本的长度,同样也不能让输入框的长度太长。如果有必要,可以增加一个计数器,实时显示用户还可输入的字符数。这种情况针对大段输入框不失为一个好方法。但是对于普通的一句话输入框,只要框的长度适中就好,输入框太长会给用户造成疑惑,我的内容是不是填少了。

●○●标签和输入框纵向排列靠左对齐的设计,比起两者并排摆放效果更好。一方面,这种设计在桌面端和移动端都足够友好,另一方面,这样的设计可以更好兼容不同类型、长短的标签,便于用户视线的纵向扫视。不过标签置于输入框左边的设计也有其优势所在:布局更为紧凑,表单长度被压缩,显得更短,在特定的页面布局需求下,可能是更好的选择。

解决方法很简单,标记那些可选的字段,优质用户需要驻足思考是否要填写的字段也做出标记。

4、校验要及时,且提示信息需要突出显示,要友善

关联标签和输入框

译者 写道

对于输入框输入的内容,需要在光标离开的瞬间就进行校验,及时反馈校验结果,不能在填完一整张表单提交时告诉用户第一个输入框输入有错误,这种体验很不好。同时,当填写错误时,要及时在问题区域提示错误,提示信息的位置要醒目准确,让用户一眼看到出错区域,并且提示信息要友善,要告诉用户错误原因,或者给用户提供解决方案入口,不能只孤零零地提示错误,什么都没有,会让用户不知所措。

●○● 让相关联的标签和输入框更靠近,组成分组,让不同的分组保持相对大的距离,确保用户不会产生困惑。

从原文评论来看,这一段是争议很大的一个地方:应该标记必填字段呢还是应该标记非必填字段?

5、输入框如果有限制,需要给一个示例示范

避免字母全大写

本文作者语法以及用词上有些怪怪的,加上缺少必要的示例,所以这段理解起来有一定难度。我个人觉得作者的结论应该是正确与合理的(毕竟做过大量实际用户使用的测试,比设计师或开发者的冥想要可靠的多)。但是,在原因的阐述上显得单薄了点,也可能是因为自己(指译者)这方面了解不深。按照作者的解释,单纯使用(红色的*)星号标注必填字段有一定的学习成本,会让用户有学习负担,反而增加出错几率。

如果一个输入框要输入手机号,限制为xxx-xxxx-xxxx格式才能被验证,那么就需要在旁边给一个示范。最好的处理方式就是在输入框内加上破折号,让用户直接在破折号之间的空格里输入数字,体验会更好。

●○●全部字母大写会不便于阅读和快速扫视。

必填选项的概念类似于离线概念,我想可能的意思是指:我们平时访问网页,基本上都是处于在线状态(虽然HTML5有离线访问),我们没有必要专门在页面上弄个符号表示当前页面在线。因此,对于网页而言,离线这个概念就意义不大;同样的,表单选项基本上都是需要填写的,特意的使用某个符号标示此项必填,是多此一举,没有多大意义。

6、把相关的部分放在一块

低于6个选项就全部展示

我们或许过多地站在开发者以及软件测试人员的角度去看待表单设计了,正如上面提到的开发者的黑白方式。因为我自己也是开发者,所以对于星号表示此项必填,没有星号表示此项选填很容易理解。但是,用户会这样想的吗?软件测试人员是作为极端作恶用户(非上面提到的优质用户)去使用表单的。一些站在自身角度的认知确实会让我们对表单有经久的错误认识。

当下时代,信息本就复杂,在填写表单时,人们总会有一种畏惧感,对表单的一种陌生感畏惧感,把相关的内容放在一块,一是可以显得有条理性,二是可以把内容组织得更好,三是可以让用户在填写的过程中顺着一定的思维思考,可以产生更好的用户体验。

●○● 当表单中需要选取不同选项的时候,低于6个选项就不要使用下拉选框来选取了,因为下拉选框需要两次点击完成结果的选择,而直接选择来的更快。而超过5个选项的时候,选项过多,适合下拉选框的展示形式。

至于最后的用户表单完成终止我想可能是指:对于大部分正常使用用户,终止行为一般为被动阻止或主动点击按钮。所谓被动阻止,可能是即时的错误提交;主动点击按钮,可能是点击按钮提交等。例如,我发现腾讯微博绑定注册页面的表单所有选项都没有必填字段的提示,所有的必填提示均出现在表单提交之时(即用户触碰了某个按钮某些事件被阻止),这些都是我比较赞同的。

7、如果表单过长,可以选择拆分表单

避免将标签作为占位符使用

下面两张截图以腾讯微博注册页面为例分别演示:阻止用户填写表单的事情,以及不标记必填字段。

如果表单过长,可以按照内容的相关性将其拆分成多个步骤,就像是把一个很大的任务分解成多个小任务一样,这样用户在填写时才不会有畏惧感,也不容易产生疲劳。同时长表单拆分后可管理性会更好,用户前面填写的表单可以先保存起来,如果用户在填写后面表单的时候遇到计算机故障,不至于所有填入的表单内容全部丢失。但是,如果将一个长表单进行拆分,就需要给用户一个提示,让用户知道当前所处的位置,如2/4页,这样用户就知道完成了多少内容,还剩多少内容未完成,填写起来心里会更有底。

●○●为了让布局更紧凑,将标签作为占位符放置于输入框内是很有诱惑力的做法,但是这样存在一定的可用性问题:让部分用户迷惑内容已经被填写;点击输入的时候占位符消失,有的用户会忘记输入内容属性。

图片 2

8、如果一个输入框可以满足需求就不要用两个

复选框应当纵向排列

图片 3

一个问卷,给标题添加一个logo,这种形式的,完全可以通过标题输入框就能完成,没有必要再添加一个输入框再来添加logo。给表单添加一个描述,可引入图片、链接页面等,通过一个稍简易的编辑框就能搞定所有。

●○●纵向排列复选框让用户可以更快的扫视内容,便于进行选取。

2、不要使用微调

9、表单设计保持一致性

表述清晰的行为召唤按钮

HTML5近来春风得意,它提供了很多美轮美奂的元素共设计师选择。我们需要好好思考我们的新玩具是否得当。现在的数字字段(指类似于type="number"的输入框)都提供了小小的上下小尖角运行用户来回调数值。

确保表单中的所有输入控件保持一致,用户体验才会保持一致。前面单选用下拉列表二选一,后面单选用单选按钮,表单风格不一样会给用户造成不好的体验。

●○●行为召唤按钮中的标签必须使用简短而明确的词汇,让用户明确行为的意图和功能。

图片 4

10、使用恰当的动作顺序

指明出错的内容

现在有两个问题。首先,浏览器默认显示的小三角真不是一般的小,点击很繁琐,你还可以想象加菲猫般的手指在iPhone上挣扎的情景。这就是所谓的费茨法则,越小的东西越难点中。

当一个删除操作,确定是主动作操作时,需要强调确定弱化取消。当一个删除操作取消是主动作操作时,需要强调取消弱化确认。根据场景使用恰当的动作顺序。

●○●当用户填写内容出错的时候,应当指明发生错误的条目,以及错误的原因。

译者 写道

11、表单提示文案要精简

在用户填写完后再验证

Fitts Law,人机交互重要法则,其最基本的观点就是任何时候,当一个人用鼠标来移动鼠标指针时,屏幕上的目标的某些特征会使得点击变得轻松或者困难。目标离的越远,到达就越困难。目标越小,就越难点中。

没有人愿意查看一大段的提示文案,现在的用户浏览网页都是扫的,不再是认真的阅读每一段文字,提示文案一定要做到言简意赅,一目了然。十个字能搞定的绝对不要用十五个字来臃肿一番。

●○● 除了需要在输入过程中进行实时验证,普通的内容输入应当在用户输入完成之后再对内容的格式、属性进行验证,这些时候尽量避免使用内嵌验证。

我好像听到你在叫嚣:我可以直接在数字文本框中键入数值。是的,你可以。但是,让我们看看浏览器的显示内容、向上向下的微调箭头使得文本框长得很像我们信赖的朋友(下拉选择框)。首次使用微调交互的用户会因此认为他们不能键入内容。

不要隐藏基本的帮助文本

我的建议是:浏览器开发者应该调整默认的设计。

●○●将基本的帮助文本直接展示出来,除非你的帮助文本超过100个单词,信息量过大。如果帮助文本内容过长,建议置于靠近标签或者输入框的地方,光标悬停时展示。

3、只使用一种按钮类型或最好为每个表单只提供一个按钮

区分主要操作和次要操作

还有一个鲜为人知的心理学原理,叫做希克法则(Hicks Law),基本观点是:当选项增加时,人们下决定的时间就会增加。我知道,这不是《rocket science》(译者:一部关于青春期焦虑的喜剧电影佳作),但仍然是值得铭记于心的规则。

●○● 主要操作和次要操作是要进行区分的,而这个要根据使用场景和需求来分析和区分。

你可以通过帮助你的优质用户做选择来帮助他们。让所有的基本按钮都保持同一个颜色,每页都只有一个按钮(非基本按钮)来帮助他们做选择。哪个按钮是我应该点击的呢?哦,很简单嘛,那个大大的醒目的按钮!

让内容长度和输入框长度对应

图片 5

●○●输入框的长度应该同输入内容进行对应。诸如邮政编码、电话号码和银行卡号这样的字段,长度都是固定的,在设计它们的输入框的时候,输入框的长度是很好确定的。

4、大块区域

正确区分必填字段和选填字段

我之前是学神经科学的,因此研究过心理学记忆——特别是短期和工作记忆。现在我当面告诉你,短期记忆能力不是7+/-2, 4+/-1或是人说三五句话。作为人类的我们擅于处理视觉刺激,局限是数目越小我们做得越好。将表单块分成更小的组可以让评估变得更加容易,而这往往促使用户键入表单的内容来自他们的记忆。

●○● 用户有的时候并不知道哪些字段是必须填写哪些可以不用填写的 ,通常会使用星号(*)来区分两者,但是星号有的时候并不能为用户理解,所以尽量用文字来标识差异。

所以,请确保你的字段组长度大约为4。

相关信息分组

译者 写道

●○●过长的表单常常会让用户感到烦躁和不知所措,应当根据特定的逻辑、内容属性将相关的内容分组,强化表单整体的形式感,用户觉得更容易填写表单,也更容易完成。

我现在是彻底相信作者就是学神经学的了。人总是某方面有问题的时候开始学习这方面东西。本着服务大众的精神,我根据自己的理解把这段详细解释如下:首先要大致知道这里的短期记忆(short-term memory, STM)是什么东西。1974年,短期记忆概念被工作记忆(working memory, WM)所代替。工作记忆指的是一个容量有限的系统,用来暂时保持和存储信息,是知觉、长时记忆和动作之间的接口,因此是思维过程的一个基础支撑结构。

本文转自:

著名心理学家 艾伦•巴德利曾提出,工作记忆包括三个部分:

译者:陈子木@微博(

基于语音的语音环。主要用于记住词的顺序。

视空图像处理器。主要用于加工视觉和空间信息。

类似于注意的中枢系统。主要用于分配注意力资源,控制加工过程。因此,作者所说的短期记忆能力不是7+/-2, 4+/-1或是人说三五句话是指短期记忆不只是用来记住计算值(基于语音,心中有声音),或是刚刚说过的几句话(基于语音,嘴巴有声音),还包括人类擅长的视觉加工处理(视空图像处理),但是不足在于数目有限制,下面这个例子有助于理解这里所说的限制:

拿回忆一个新的七位数的电话号码举例。对大多数人来说,它通常只有六到七个数字。换句话说,工作记忆的能力是有限的。某些脑损伤的病人除了他们听到的最后一个字母外,别的一概回忆不起来,但他们的意识却很正常。

因此,作者才要求表单块状区域化(便于视觉记忆期记忆),同时控制字段数目在4个左右(多了会超出工作记忆的能力)。

5、想想你为何对某事抱有疑问,对于用户感觉又如何?

这可能是我给出的最直接的建议,但经常是采纳率最低的。

见下图:

图片 6

质疑你提出的每个问题。这个问题有必要吗?为什么要问这个问题?

很多业务需要我们提出问题。作为设计师的我们可以争得面红耳赤。提出业务上的问题,对于了解我们的业务需要的数据来说是有必要。

我们可以先告诉优质用户我们为何需要问那样的问题,之后再帮助他们。放心的使用和数据共享通常都是好的做法。

再次示例:

图片 7

译者 写道

实际上作者的意思应该是:我们要帮助用户(站在用户的角度,自己作为用户)提问,同时,在表单上显示用户想知道的答案。

下图为译者的补充截图:

图片 8

图片 9

6、日期是个不安分的家伙

输入日期确实是个挑战,有些缺陷你可以避免。最大问题是错误的处理方式。

最简单的方法是浮出日历。值得注意的是在英国一周开始于星期一,而在美国则是星期天。如果你的用户注意力不集中,他们可能选择星期天,而实际上他们本想选择星期一的。

同样需要注意的是国际日期的格式。在美国,日期格式是是月份在前,而在日本,日期的格式是年份在前。因此,日期4/5/12可以以三种方式解释。

这就是为什么最好使用选择框。

图片 10

下图为译者补充截图:

图片 11

7、表单是开发者的工艺品

与设计师一样,表单也是开发人员的工艺品。了解输入数据可能出现的错误以及编写相应的后台代码是一项挑战。

下面是个很简单的例子。输入货币值。用户可能犯很严重的错误。迫使用户满足某种特定的格式会让用户沮丧。让我们来正视这个问题吧,这是开发人员的懒惰造成的。

译者 写道

作者应该认为,对于开发人员而言,匹配固定格式比各种形式都匹配要轻松些,因此,迫使用户满足特定格式是开发人员懒惰的一种表现形式。

图片 12

对于开发人员而言,没有什么挑战胜过构建防弹表单(指防御能力很强的表单)了。

译者 写道

我想这部分应该是写给开发人员看的吧,意思是说,为了更好的用户体验,你们开发人员不要偷懒,要多辛苦点。然后再用构建固若金汤的表单是很有挑战很有成就感的事来激励开发人员。

8、不要在表单中使用垂直分栏(列)

在表单中使用列的最大问题是流动。表单开始于上面,结束语底部,而列的出现会打破这种流动。

不要假设用户通过标签访问表单,而因此以列的形式做出相应的导航。在用户测试中,这种情况是罕见的。大部分情况下,我们看到的是:输入细节,使用鼠标/触控板/手指点击进入下一个字段,然后再输入内容等。

9、如果一个输入框可以满足需求就不要用两个

大部分用户不熟悉盲打。在用户测试中,我们可以看到很多用户在输入内容时候都要看键盘。

当要往表单中输入电话号码的时候,会要求添加区号和电话号码,哦,问题来了。用户看不到,或确实记不住这儿有两个输入框,结果第一个框输入了完整数字,如果这个文本框限制了一定数目的字符限制,问题就更糟了。

电话号码就使用一个字段,同样的,门牌号/街道什么的都是如此。只使用一个文本输入框。

10、提示信息要友善

你会惊讶到底有多少相当粗鲁的错误消息出现在这里或那里。

下面是我最近碰到的一个例子:

图片 13

事实明摆着你可以选择一个未来时间,结果出现了滑稽的反应,恩,这种提示信息可不太好。

你可以作为用户设身处地想一下:作为用户,看到这个错误提示会有什么反应。恼火?或许更糟糕。亲切友善是其实很容易做到。

我制作了一幅图片(如下,点击可以查看超大图),它包含有更多的实践方法,以帮助你设计出更好的表单。

图片 14

本文由威尼斯国际官方网站发布于摄影技术,转载请注明出处:表单设计经验,各种设计员都应有明了的10件表单

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。