如何设计不难用的UI表单？(理论篇)

产品设计是一门杂学，牵涉的东西多如牛毛，从最基本的美学、人因工程学，商业思考到行为经济学、心理学。今年年初在诸多的因素影响下，想将自己在工作上的经验分享给大家。

表单(forms)是什么？

表单在数字产品设计里面，想必是每个产品设计师一定会碰到的设计样式(UI pattern)。常用于登入，用户回馈，填写用户资料等以及任何需要组织整理数据的手段。

在表单设计当中，已经有许多已被A/B 测试验证过可以有效增进易用性(usability)并进而增加转换率(conversion rate)，在设计任何表单之前，我们可以通过接下来要介绍的方法，去评估自己所设计的表格。

如何设计良好的表单？

在设计表单之前，我们可以把表单想成是一段对话，一段你跟用户之间的互动。假设你是一位销售员，在卖的商品的时候，第一个要建立的是什么？建立信任关系，有了信任关系之后，才会有后续的事情发生。

而设计表单也是一样的，表单的设计第一件事情就是要提供情境给用户，让用户觉得可以信任目前所看到的资讯，进而将自己的资讯提供给我们。尤其是现在个人资安问题日益严重，提供足够的理由及意图给用户，是设计表单的第一步。

接下来要做的事情就是，你要怎么去架构你的对话，举个最常见的例子Gmail 登入页面：

当用户点“登录 ”之后，会被带来这个画面，看似简单的画面，其实里面却暗藏了需多需要注意的部分，姑且分为九个部分去看。

1，因为在上一个页面，用户的意图是要登录Gmail，因此你可以看到google的logo以及标题为登录，首先建立信任关系。

2，建立完信任关系之后，接下来就是提供用户情境。继续使用Gmail则是让用户的意图获得足够的验证。

3，确认以上两项之后，用户就可以填入自己的信息。此时会发生许多有趣的事情，稍后在表单设计最佳典范会提到。

4，如果在当下用户没有办法获得或是忘记自己的信息，在此情境中，我们就必须提供足够的信息或是动作(Call to action)让用户可以重新取得所想要的信息。

5，第五点也是在传达Google这家公司是注重信息安全，也是建立信任的一环。当然还有其他意图，我们在这边就不细谈。

6，防止错误发生也是一个在表单设计中很常见的设计思维。用户在登录页面时，有可能不一定是想要登录，而是注册，此时我们就需要提供另外一个连结(entry point)，防止他迷失在流程中，同理在注册页面也时常提供登录的连结。

7，在这表单最重要的两个动作是1)填入email. 2)继续。因此我们可以看到继续是采用主要动作(primary action)的表现手法，都是以次要动作(secondary action)去表达。

8，这边提供可以快速切换语言的功能，以免当下你所用浏览的语言并非你常用的语言。当我们为提供多国语言的平台做表单设计时，时常要考虑的就是多国语言的限制，比方说：俄罗斯文有时会比英文长很多，中文是方块字型因此排版上比较不会有过长的情况，但是字体、字距等等的其他变数也需要考虑的比较多。

9，尤其是在登录页面，很多隐私条款或是需要寻求协助，因为法规或法律的因素，会将这些资讯放在最下方以第三级动作(tertiary action)的方式呈现（是说大概也不到5 %的人会去仔细看条款）。在同一个画面中，最好不要超过三种层级的动作，来有效的降低视觉噪音(visual loudness)的比例。

短短的一张表单，竟然有那么多小细节必须被注意，可见产品设计师每天都在跟那么多小细节在战斗（泪）。

接下来为了让大家少走冤枉路，整理了一些**最佳范例(Best practices)**供大家参考。

设计表单的最佳范例(Best practices)

以下要分享的Best practices，是我认为产品设计师每天工作上常会碰到的问题。这些案例是由各家平台自行测试过后所呈现出来的结果，但不代表这就是对你的产品最好的了解，每一个产品特征都是需要被经过验证的，但是也因为有这些前车之鉴，让产品设计师在每天的工作中少走了一些冤枉路。

去除所有非必要的输入框：

Expedia 在经过测试后，发现加了一个额外的输入框(公司名称)在订购表单中，让expedia每年损失了一千两百万美元；Marketo也发现一些没必要的输入框，让他们的花费增加约25%。

当我们在设计表单时，要避免提供多余的输入框或是过长的表单，但万一我们仍然想要收集到使用者的资料，那可以使用条件式逻辑或是非必填的选项来增加完成率。

条件式逻辑是当用户回答某个问题在你预期的状况下，你可以显示后续你想要了解的问题，常用于满意度调查的表格。

上方置左的标签(Top-left aligned labels)可最佳化可阅读性及完成度：

Google的UX研究员发现将标签放在栏位的左上方优化了表单的完成时间，这是因为它需要较少的视觉专注。可以看到左边的图中，有较多的视觉往返，而改善后的表单中，是较为垂直的扫描。

现今已经很少看到左手边的表单设计，但是我们依然可以记住一件事情，就是如何降低阻力，在使用者经验里，是非常重要的一件事情。

何时使用单选按钮(radio button)、复选按钮(checkboxes)、下拉式选单(dropdown)、切换(toggle)。

哇！讲到这边，估计都可以另外写一集来分享四个之间的不同。今天就从概论的方式来说明，这四个控制界面元件(control UIs)为表单设计中最常用的四种。

单选按钮(radio button)

一般来说，单选按钮常用于在一群选项中只能选一个的情况下作使用，这种情况下也可以使用小图示来表示：

复选按钮(checkboxes)

常用于选择多个选项，例如完成待办事项清单。

下拉式选单(dropdown)

下拉式选单较前两个复杂，可以做为多选或单选使用。如果可能的话，尽量使用单选或复选按钮来减少认知负荷和点击次数。

切换(toggle)

切换通常用于只有二选一的状态，例如：开与关。

知道这些控制元件之后，就可以更有效地选择哪一个最符合表单情境中的需求。

永远显示输入框标签

如上文所说，输入框标签通常位于栏位的左上方，而这些标签应该永远显示在同一个位置而不该被预留的文字(placeholder)所取代，原因是当用户开始输入时，预留文字将会消失，用户必须使用他们的记忆去回想刚刚的标签是什么。

看到这边应该会有一些朋友开始质疑「刚刚google的登录表格不就是这样用的吗？」没错，当然也有特例，而这个特例是最近两三年蛮常用的一个手法—  文中标签(inline label )或是浮动标签。

当你在跟栏位互动时，预留文字会变成输入框标签，此用意是为了不要让表单占用太多垂直空间，尤其是在手机优先(mobile-first)的时代，垂直空间的运用一直是被关注的重点。

使用预测及自动填写

当用户在选择他们的地址时，最好的方式不是让他们把完整的地址一一的打出来，而是当用户开始输入地址时，预测他们实际的地址并且自动填写。这可以有效地减少多余的输入还有认知负荷。

表单中的错误信息

人非圣贤，孰能无过。但要预防错误的发生，便是产品设计师的使命，尤其是在表单设计当中，接下来就要看看如何在表单设计中有哪些错误信息及摆放位置。

两种错误信息

通常的情况下，错误信息有分两种，第一种是系统错误，第二种是验证错误。

系统错误是用于资料在传输过程中发生错误，其中有很多种可能性，像是突然没网络，或是服务器挂掉等等。而最常见到的信息就是「something went wrong, please try again」，通常这类的错误会显示在操作端附近或是用户可以马上看到的位置。

而验证错误，则是在输入结束后(少量用在输入过程中)，侦测到异常后所产生的回馈，也是我们妥善地使用进而引导用户走向正确的道路。

上下左右要放哪里

你希望用户会在栏位的哪个地方看到显示的错误信息？如果错误信息没有摆放在正确的地方，你可能会让用户无法完成你的表单。当错误产生时，他们需要知道如何去修正并重新送出。

研究指出将错误信息放置在栏位的周围可达到最佳的效果。尤其是右边以及下方更为直觉。

为什么在右边是最好的？因为在西方的阅读系统是由左至右(当然中文也因此受到影响)，当用户从栏位移动到错误信息，很自然的会将眼睛移到右方，看到错误信息后再将输入的部分修正。

由于我们现在是处于手机优先的时代，手机上并没有太多的水平空间可以让我们运用，因此我们大多数看到的错误信息是显示在下方的。

作者：Jeremy 

插画：Joyce