与用户体验死磕到底：不简单的表单设计

2017-04-26 09:46:00

用户体验早已成为互联网公司的金科玉律，贯穿在一款产品的设计、运营的全过程中。而用户在互联网上总会遇到各类表单，这一环节注重用户体验无疑非常重要。下面将从表单元素、如何有效提高表单可用性几方面分析：在表单设计中，怎样创造更好的用户体验。

一、表单元素

1. 标签

告诉用户表单需要填什么。

对齐方式是最重要的问题。选择左对齐、右对齐还是顶对齐？这是表单设计中经常遇到的问题。前人的研究发现了这样的规律：就观看时间、填写速度来说，顶对齐快于右对齐快于左对齐。

顶对齐的好处是处理快速，缺点是增加了垂直空间的占用。

右对齐的优点是垂直占用空间减少，缺点是可读性相较于顶对齐更差。

左对齐的好处是标签容易浏览，缺点是标签与输入框间距增加，浏览变慢。

标签的文字风格也越来越被人们重视，标榜与用户友好的企业在语气口吻上会更加清楚明确、平易近人。例如“希望内容来自：”和“我更希望内容来自：”，似乎后者更站在用户的立场上考虑；还有修改术语，用普通人理解的词语把问题解释清楚。这些小技巧对一些用户来说非常受用。

2. 输入框

（1）输入框类型

输入框一般包括文本框、单选钮、复选框、下拉菜单、列表框等。综合问题本身、界面设计、用户填写习惯等因素选择合适的输入类型。

（2）输入框长度

一些人认为输入框的长度提供了暗示，比如邮政编码、电话号码的输入框采取固定的长度，可以帮助用户了解是否填写了正确的位数。这不失为一个好办法，但是在美观上需要做出平衡。

上图为一款语言学习网站，你需要对照给的中文含义在输入框内填写英文单词，输入框会根据单词长度而变化，提供了正确与否的暗示。

（3）必填项与选填项的问题

很多表单上习惯在输入框旁边加上星号*来表示必须填写，熟练的用户一看便知。

基于这并不是既定的规则，有的表单出于稳妥起见会在下面添加说明。在输入框旁边添加“（可选项）”的说明也是一个好办法，看起来更加清晰，尤其当可选项较少时。

（4）关于弹性输入框

希望用户按照某种格式填写时，如“请采用XXX-XXX-XXXX的格式”，记住一定不要麻烦用户。为什么不直接把输入框设置成那种格式，用户只要输入其他都不用管？事实上，更好的方式是直接放宽对用户输入的要求，包括格式、大小写等。让你的系统更灵活，而非让用户为了你改变他们的输入习惯。

3. 动作

用户提交表单，即点击一个按钮或链接，执行一个操作。

一般动作分为主动作和次动作，主动作是最重要的行为（提交表单），次动作则是返回、取消等。主动作和次动作需要有严格的视觉区分，防止发生用户不小心点击了取消按钮，输入的数据全部清空的状况。

上面这个登录界面用截然不同的颜色突出了登录按钮，取消按钮的存在感变得很小，误按可能性极低。

4. 帮助文字

告诉人们如何回答问题。

自动即时帮助：在帮助信息最合适的时间和位置显示帮助信息，如点击激活输入框时，帮助文字就出现在输入框的旁边。

用户激活的帮助：在人们需要的时候提供帮助，这种方式强调用户的主动性，通常采用图标、按钮、图片或文本链接，便于人们知道有帮助可以使用。常见的是一个“？”的符号，如A站登录页，点击问号即可跳转到帮助手册页面。

但是，不要依赖帮助文字。要尽量减少帮助文字，创造简洁干净的设计。

5. 输入反馈

输入正确还是错误。

反馈是必要的，无论是填写提交错误还是正确，反馈能让用户感到安心，而不是烦躁地重复点击。

如果用户填写错误，应该明确说明是什么问题。如下图Facebook的用户名输入框，为空时会显示用户名无效，和应满足的要求。

但是下面Facebook注册页的反馈看起来就有点闹心了，刚点击“姓”输入框准备填写，后面其他还没填写的输入框都默认为填错了。设置错误反馈需要注意这样的问题，反馈应当是在每一项填写完毕时出现。

如果表单填写成功，也应该用成功消息清晰传达，突出提交成功的结果。至少不能什么都没有吧，那样看起来就会像一直没刷新的网页，只会引起用户的反感。一句“您的表单已提交成功！”就会让事情好得多，刷新到新的网页也是常见的做法。

二、有效提高可用性的方法

1. 合理地组织信息

可利用框线、空间间隔、颜色差异，还可按不同信息的类别、属性和相关性进行区块划分。

（1）分组

首先需要在逻辑上进行分组，如按重要程度划分成基本信息（必填/重要）和附加在信息（选填）；按主题归类划分，如面试题填写表单分成填写说明、个人信息、题目回答几大板块。

用分隔线来划分是常见的分组方法。

（2）色彩区分

根据人类色彩感知心理，一般通知用蓝色，警告用黄色（如黄牌警告），错误为红色，成功确认为绿色。

（3）分步指示

分出步骤展现给用户，提供清晰的路径步骤，明确高效

2. 简化表单，突出重点

简化如收起用户不常用的部分，当用户需要时通过点击某块区域再显示出来。

突出重点则表现在表单中重要的按钮等一定要凸显出来。这已经成为设计中共识的一部分，绝大部分网站都会凸显提交按钮，比如下面的登录页，将登录按钮用鲜艳的颜色凸显了出来。

个人觉得这种对比和凸显应该是明显的，所以上图这种输入框和登录按钮颜色的相似个人并不提倡，而且这个登录按钮的灰色看起来就像是不可用状态。

3.清晰的浏览线

主要是在对齐和空隙的设置上，使之形成清晰的浏览线，便于用户迅速观看。F型的眼动轨迹图（热点图）众所周知，提示我们用户倾向于观看有清晰浏览脉络（如垂直对齐）的内容。

4.选择合适的标签对齐方式

（1）有标签

请参考上文“表单元素”中“标签”部分。

（2）无标签

常见的情况是标签放在输入框的里面，可以节省空间。但是会带来一个问题，当用户输入时标签消失，用户常常会在输入到一半时忘记自己要输入什么（不要惊讶，这就是用户，每个人都会犯这样的毛病），或者是想再次看到标签里的信息。

为了解决这个问题，浮动标签应运而生。你或许已经看到过这种效果，在一个input输入框中有一个占位文本，当你用鼠标点击或用手触摸输入框准备输入时，展位文本以动画的方式移动到别的地方，这时你可以在原来占位符的地方开始输入文字。

上图是一个登录页未填写和准备填写时，当焦点集中到输入框里时，输入框里的标签文字变小，并且跑到了输入框上方。

就个人使用过程来看，浮动标签并未大规模普及，标签直接在输入框里比浮动标签出现的更多。也许是技术实现上更为复杂，也许界面更为花哨并不是一种好事，也许并不符合品牌气质……

简而言之，选择哪种需要根据自己的情况。

5. 智能默认

（1）通用智能默认：智能默认的作用是在满足多数人需要的地方放置选择，来简化选择。一组单选按钮预先选择了一项，是一种最简单的默认形式，如性别一栏，系统自动为你选好一个值。商家可能会把智能默认设置得更利于自身利益，例如，用户经常下载软件时常默认下载一些其他软件。这是很恼人的，我们应该确保默认选项符合客户的利益。

（2）个性化默认：指保持选项的“粘性”，即保持用户之前的选择。例如你在淘宝上买东西，每次地址都会自动默认你常用的那个，而不用你再自己选择。

6. 给用户填写的理由

事实上，这是我们一开始就要考虑的事情。

尤其在涉及一些较隐私的问题时，为了打消用户的质疑，你需要给出原因，说明让他填写某项信息是出于怎样的考虑；说明你不会泄露和非法使用用户的信息。

以及一些其他说明，告诉用户填写表单能获得什么好处；贴心的提醒（如填写完表单大致需要的时间）。

三、关于登录/注册

1. 要不要登录或注册？

很多产品其实是不需要登录注册的，比如地图类APP，大多数用户是即用即走。即使作为产品开发者你希望用户能够注册，以掌握用户信息、带来深入的互动、便于盈利等，也应当克制自己，把用户的需要放在第一位。

2. 什么时候？

如果要登录/注册的话，建议在需要的时候出现相应界面。一上来就出现登录/注册页面，而且不注册就无法使用的APP对所有的用户都是个困扰，很多人会选择放弃。

3. 验证问题

验证码是最常用的一种验证方法，当用户输入自己的邮箱或手机号来注册时，手机或邮箱会收到发过来的验证码，填入验证码后说明你的邮箱或手机号没有填错，注册成功。不过这样也很费时，所以很多网站，在填写注册表单时都不要求用户确认密码。有的网站甚至都不需要用户填写，而是将密码直接发送至用户的邮箱。我们可以更好利用验证码，比如微信提供验证码登录这样的功能，方便永远记不得密码的用户。

在网页端常看到为防止机器人而设置的验证码，有的和12306的验证码类似，非常“反人类”，这种验证码应该是尽量避免的。而且让用户点击（如按顺序点击图像处出现的文字）比让用户输入更加方便。