剖析用户体验 - 《让开发者帮助用户填写表单》

前言

如果您是一位前端工程师，本篇文章或许对您能有一些帮助。当然了，不管您是什么职位，您都能从本篇文章中领略一些知识，虽然这些知识给您带来不了技术上的突破，但能让您与您的程序更友好的与用户进行交互和交流。

主题引出

表单是用户与您的网站(或移动应用)进行的最基本且主要互动之一，它将人们联系在一起并让他们沟通。就像对文章发表评论并向作者解释他们如何强烈反对他们所写的内容，再或者让他们直接在互联网上聊了起来。无论是论坛、在线社区、支付、产品订单，表单都是用户与您交流的重要组成部分。

每位开发者不断撰写和谈论用户体验，但为什么这么多网站和产品仍然做错了。为什么用户会反馈找不某功能？但也算不错，至少用户愿意反馈。那么有没有一种人，直接因为产品用户体验差而卸载呢？不好意思，你不是因为技术而失去了这个用户，而是用户觉得你不尊重他。

搭建强大的信息架构

要构建好的表单，首先需要从数据库的结构中下功夫，尝试了解用户希望如何填写表单，这是您的表单上进行一些可用性测试和用户研究变得方便的地方。

用户心里模型是一个用户体验概念，它可以帮助您。他们希望采取哪些措施？什么先来？接下来是什么？最后是什么？这将使您更好地了解如何以更加友好的方式构建表单和数据结构。

字段进行可视化分组

对于组合在一起的字段，进行可视化分组可以帮助用户填写表单，它还将帮助屏幕阅读器了解层次结构，分块信息和分组相关信息有助于人类大脑以一种简单，可读的方式来处理这些信息。

如果表单很长，最好不要默认公开所有内容。对你所展示的内容保持警惕，明智地使用分支仅显示人们需要的字段。例如，在结帐表单中，不显示所有货件选项的所有详细字段。因为这将压倒用户。显示足够的信息以帮助他们选择正确的货件选项即可。

用户注意力随着时间的推移变得越来越短，简单可选项放置在末尾最合适。

收集信息也要看场景

如果您经营了一个电商网站，请不要把 " 独特 " 的信息放入注册表单中。

例如，您的网站用户注册表单中，您是需要收集用户姓名、手机号、收货地址、支付方式等信息。收集这些信息非常正常且合理。但是，这些信息什么时候收集，您有想过吗？

其中，收货地址就是独特的信息且需要在特定环境下收集，或许您会反驳我这有什么独特的地方？

在结账时询问用户的收货地址(用户需要收货)，而不是在他们注册时收集。

交互错误提示也是一门艺术

如果您提前预知了用户可能发生的错误，要相近一切办法避免让用户对错误感到自己愚蠢。如果可能，请忽略否定词，这些错误词语往往会吓唬人，让用户更加焦虑。所以，请使用礼貌、积极、肯定的词语和语气。

不要因为错误而责怪用户，我保证，系统不会有怨恨，把用户的注意力转移到系统无法处理操作的方式，并向他们解释如何找到解决方案。

您还可以通过错误消息获得创意，并将图像和幽默融入其中，以降低其威胁性。不过，这实际上取决于您的品牌的身份和基调。

标签应清晰可见

请记住，只要一个字段获得焦点，键盘就会打开并占据屏幕区域的至少三分之一。在小型移动屏幕上，用户还必须滚动才能填写表格，那么您需要反复调试，提前想到虚拟键盘可能遮挡的问题。比如：设备在横向模式下，屏幕的高度会降低。您可能希望在左侧放置标签，在右侧放置输入。

这也意味着用户在填写表单时将丢失部分上下文，您的标签应该是清晰的，可见的文本，无需上下文即可阅读和理解。用户应该能够将每个标签和字段完成为单独的任务，即使他们丢失了上下文。

输入框大小应与预期内容匹配

如果条件允许，input元素的大小应与预期内容长度匹配，这将有助于用户愉快的填写信息后并了解预期结果，以便用于能与表单有核对信息的交流。

适当大小的输入可帮助用户更加方便的扫描表单，并了解字段中的预期内容。

避免在移动设备上拆分输入

我知道，您拆分输入，为的就是用户能清楚的核心自己的信息。但不要仅仅为了格式化而拆分输入框，尤其在移动设备中。用户无法(不方便)使用键盘在字段之间导航，它需要额外的点击才能进入下一个字段以填写表单。

您可能会反驳到：我在分段的输入框中获取到字符后，自动将焦点移动到下一个字段！
但您将控制UI，这对用户来说变得不可预测。此外，如果您自动将焦点移动到下一个字段后，用户想要修改更正某些内容，移动到指顶位置将会非常痛苦。

您仍然希望能够将用户的数据格式化为小块，以帮助他们填写您的字段，你的想法完全正确。但是您可以使用遮罩空格、蒙版等，这种在视觉上帮助用户的行为最合适。

高效的字段描述

显示有效的字段描述可以在无缝和痛苦的表单体验之间产生差异，描述可以在很多方面帮助用户。
内联描述可帮助用户了解您需要此信息的原因。

你究竟要求什么？
对于一些术语或涉及资产字段不向用户传达用意，用户会非常困惑，甚至不愿意交付信息。
首字母缩略词和缩写词也是如此，我知道您会说你会避免它们，但有时候您不能。
例如，如果您处理特定行业的复杂表单，它们可能有自己的缩写集。任何需要填写表单的新用户可能还不熟悉这些缩写，所以必须在某处提供描述帮助用户。

你为什么需要这些信息？
如果用户不理解您为什么需要它以及您将使用它做什么，你必须提前预测并作出说明元素。否则用户可能不愿意向您提供个人信息，有时候您可能需要询问用户的电话号码，这是正当理由，但是如果您不解释用途，那么用户有权利不提供。

我在哪里可以找到信息？
有些时候，如果您的用户需要在某个地方找到某些信息以便来继续填写表单，那么请您告诉用户具体在哪里可以找到信息。不然，您写的描述信息又是给谁看呢。
例如：您可以点击左侧问号打开弹出窗口，这里的信息可以帮助您。

我应该如何格式化信息？
由于某些字段需要特定的格式，这时请向用户说明并让用户预先了解格式规则。如我们的反馈信息最大长度是多少、手机号可不可以是座机、填写金额时需要逗号分隔吗，尤其是涉及到个人资产，一定要说明格式。或许，聪明的你可能早已经想到文章前面提到的 " 掩码 " 来解决用户格式焦虑。

降低表单的交互成本

如果您想降低表单的互动成本，请您保持聪明，请勿根据用户提供的其他信息询问您可以自动检测或猜测的信息。尽可能自动完成和预填充。如果用户搜索某个地点或需要输入地址，您可以提供自动完成功能来帮助他们。在键入时，API会填充其余的地址。这也减少了错误不是吗。自动检测很容易的另一个领域是信用卡。您无需询问用户他们拥有哪种类型的信用卡。您可以根据输入的初始数字自动检测。

优化触摸交互

如果您的字段太小或难以覆盖，则用户会出错并需要额外的互动才能实现目标。您可以通过增加触摸区域大小，轻松点击输入框、字段或表单，多填充一些触摸区域，没有什么坏处。在移动设备上，增加移动触摸优化的最佳实践，就是确保输入足够大，易于点击。

此外，应监听用户是否错过或忘记填写某信息，以便焦点直接跳到该区域提醒用户。

提供焦点反馈

移动用户没有PC用户鼠标点击的 “反馈”，移动用户没有那种点击感，由此它们天生就失去了 “反馈” ，但您需要帮助移动用户来创造 “反馈” 感，为用户正在与之交互的表单字段提供焦点状态。

内联验证

如果您熟悉可用性原则，您可能知道格式塔邻近法则。在移动设备上，在用户点击提交按钮后，避免页面顶部的错误摘要，没有上下文信息。相反，错误消息应该位于错误本身附近。

实时验证
您可以采用实时验证，无需等到用户点击提交按钮，您可以在用户填写时验证字段并显示反馈。

尽量防止表单的错误

最后一步，便是处理错误，我们一直在尝试减少表单错误的发生以减轻用户的认知负担，但是无论多么优秀的交互表单，由于用户的认知水平不同，都会发生错误。

预防胜于治疗
如果您认为您需要限制用户可以在该字段中输入的内容，请首先问自己“为什么”。在用户体验领域，有一种称为 “三个为什么” 的技术。如果答案是因为数据库，也许是时候改变了。

您要知道，为什么要拒绝用户名字段中的特殊字符？知道了又怎么向用户说明呢？如果您有充分的理由要求用户使用特定格式，请事先说明，尊重用户，比什么都重要。

主动标记必填字段
如果字段是必填信息，请给予该字段不同的表现效果，一个 " * " 号、一段加粗样式、一个警告提示。无论您以什么样的表现方式，必须让用户提前预知该字段的重要性。

关于如何标记这些字段的决定将取决于字段的设计和长度以及上下文，您必须分析并做出合理的最佳方案，保证用户的体验，您的时间投资的明智且正确。

明智的默认值
关于这个问题，您的脑海里一定浮现了默认值的画面，但在这里我想跟您说的是，默认值也要分情况来使用。例如：有些场景表单是需要用户提供婚姻状态的，虽然您知道只有三种状态(未/结/离)，但是您的默认值却不可以自动填充任意一个婚姻状态，让用户自己选择就好了。

像选择地址交互中，当用户输入河北省时，您应该为用户直接提供关于河北省的子城市，而不应该由用户来再次选择点击河北省相关城市信息。另一方面，智能的默认值也可以帮助用户在填写表单时避免低级错误。

颜色设计同样重要

世界上有一些你不能打破的约定，非色盲用户知道红色表示错误，绿色表示成功，黄色表示警告。这就好比红绿灯一样，已经根固人心。您也应该坚持使用这三种颜色。不过，红色也会让人感到焦虑，用户可能认为它们犯了一个非常严重的错误，使用橙色或黄色显示错误消息可能会减少恐慌，因为黄色和橙色的问题在于很难找出它们色调。

颜色在不同国家和文化中有不同的含义，请小心它们。

结束语

If there are errors in this article or you have better optimization ideas, please take your valuable time to leave a message for me.