/交互设计：表单设计最佳实践
最新文章2023-09-17

交互设计：表单设计最佳实践

|| 最好的学习就是持续输出

ThinkerD (Thinker Design)

作者：马林

导读
主题：交互设计：表单设计最佳实践
阅读时间：约 6700 字，约 8 分钟
阅读收获：
    1）表单设计重要性及主要原则；
    2）30 项表单设计实践案例，深刻理解表单设计的方法和技巧；
    3）表单设计（交互设计）的建议，帮助提升自身设计能力。





Ⅰ    前言


表单这种形式我们每天都会遇到，它们实在是太普通了，并没有引起很多产品设计者关注，但是正因为表单适用的广泛性，我们作为设计者才要更加重视的研究它们，以实现完美的使用体验。


表单设计在交互设计体系中是一项重要的组成部分，尤其是人机交互、界面设计、信息反馈、可视化等相关方面，是用户与产品之间最直接的对话方式（当然也包括产品所服务的客户）：

商业角度：用户与服务商（电商，游戏，内容等）之间达成交易，用户提交交易需求，服务商按照表单信息完成服务售卖；

交互角度：用户主动参与，通过表单传递诉求，服务商理解捕捉用户需求，以更好满足需求。



大师眼中无小事，细节决定成败，表单可能会出现在每个细节，表单也不会单独存在，注册登录，购物订单，问卷调查，客户资料，数据报表，搜索信息，业务申请等，在产品的整个业务体系中，表单仅是衔接流程中的各个节点，这些细节体现着用户体验、设计功力，大师们都会在这些细节上尽善尽美，不断以工匠精神精益求精。


精心设计的表单，能让用户感到心情舒畅，愉快地注册、付款和进行内容创建和管理，这是产品成功实现商业目标的起点。




Ⅱ    原则


四项原则，是表单设计的指导思想，在遇需要取舍的功能、信息字段时，再回到原则上来衡量判定。


有体验有结果


我们的目的是要获取人们填写完表单的东西，期望准确、工整、更多（尽可能多的信息来画像）；但从他们的角度来看，只想快点跳过表单进入下一步。


设计表单时要使填写过程尽可能地简单、容易。
切记：表单设计是一个过程，而不是每个孤立存在的单独界面。（备注：交互设计是一个使用过程）


明确目标及路径


表单存在的价值是人们按照设计者的思路完成填写，表单应清晰告知人们如何完成这一目标，比如多少选项、预计花费时间、多少步骤、多少次跳转等。


将表单装入情景


表单极少单独存在，会应用在广泛的情景，不同的受众群体（孩子，老人）、不同的载体平台（手机，PC）、不同的场景环境（地铁，沙发）、不同的业务类型（调研，支付）、不同的面向对象（toC，toB，toG）。


确保一致口径


表单是顾客和公司之间对话的媒介，多个团队会参与对话（市场营销、用户研究，设计部、商业部等），表单用一种口径表达。




Ⅲ    实践


1，标签的使用




标签告诉用户哪些信息属于给定的表单域，通常位于表单域之外。位于表单域内的占位符文本是特定域所需信息的附加提示、描述或示例。当用户在字段中键入时，这些提示通常会消失。



标签对于界面可访问性是非常必须的，并且将每个字段的意思传达给用户，确保每个表单字段有一个 <lable>，结合界面的 HTML 语义触发聚焦事件。


2，标签：不宜作为提示占位符



某些表单用字段内占位符文本替换字段标签，以减少页面上的混乱，或缩短表单的长度。虽然这种方法基于良好的意图，但我们的研究表明它会产生许多负面后果。
标签作为占位符时，一旦用户触发焦点开始输入，标签就会消失，用户必须清除已输入的文本才能再次显示占位符，在某些情况下，使用浮动标签是个非常好的方式。



标签作为提示符时，字体颜色太亮或太暗会造成干扰，太暗会误认为不可操作，太亮会误认为已输入。


3，标签：简洁易懂

尽可能避免使用长标签，易于快速阅读并理解其含义。


4，字段长度和结构与预期输入匹配


字段的长度限定了答案的范围。将此用于具有已定义字符数的字段，例如电话号码、邮政编码、信用卡号码等。


5，表单域应该看起来像表单域



在设计表单时，创新往往会导致不利的结果，遵循通常的字段表现形式，如：单选、多选、下拉选项、输入框、文本区域等。如果一定要重新发明轮子，请务必进行彻底的可用性测试。
6，将表单字段与其他元素区分开来



表单域应该直观地传达其功能。确保在其他 UI 元素之间添加足够的差异，以便用户无需猜测。
7，使用适当的输入类型和标签



输入类型使表单更易于填写并增强了用户体验。例如，使用正确的输入类型会调用移动设备上的相应键盘（数字键盘或全局键盘）（如第 28 项规则）。


设计人员和开发人员经常忽略简单的事情，比如对于有多个选项但只有一个答案的问题，使用圆形单选按钮而不是复选框。


8，表格尽量作为一列



单栏表格阅读舒适，更适合移动设备。
多列表格可能会使用户感到紧张，并导致他们意外跳过字段。
与大多数最佳实践一样，此规则也有例外（如第 9 项规则)。确保始终牢记您正在设计的上下文，以确定最佳的表单设计效果。


9，让有逻辑性的字段保持关联



堆叠相关字段，如姓名、地址和支付信息，会造成不必要的误会，并可能中断用户的填写流程。


10，省略不需要的字段



省略可选字段，并考虑其他收集信息的方法。时刻提醒自己，这个问题是否可以去掉、分步或推迟到以后。


11，明确描述 CTA



操作按钮应该清晰简洁地描述被点击后的结果，避免在点击时造成困扰。


备注：CTA，即 “Call to Action” 的缩写，意思是行为召唤，原本是营销领域的术语，它的主要目标是吸引用户采取点击行为，提升 CTR（点击率）指标来提升转化的可能。前面的文章介绍过，参看《 UX/UI 视角：10 种方式提升产品转化率》，传送门>>


12，标签、输入域，对应分组



明确显示标签、及其相应的输入域，用户就可以清楚地知道他们正在填写哪个字段。错误通常发生在用户上下滚动界面并关联错误时。


13，避免全部大写



应该更接近人们正常的阅读习惯，标题、语句所有都大写在阅读起来会造成困难。
14，垂直显示复选或单选



垂直显示时，展示复选和单选选项更容易。但是，显示带有关联图形的选项会给设计增加额外的维度。


15，如果 < 6，则显示所有选项




将所有选项合并在下拉菜单中隐藏，会需要单击 2 次才能操作完成；
当选项小于 6 时，在界面上显示所有选项；
当选项超过 5 时，可使用下拉菜单选项；当选项超过 25 时，建议添加搜索功能合并到下拉菜单中。
如果界面空间有限，则根据实际情况灵活调整。


16，明确显示错误



当用户出错时，向他们显示错误发生的位置，并告知原因，说明如何修复错误。


17，分组相关字段



将信息创建逻辑分组，以便用户可以更快地理解表单中的含义，即使在未来需要修改某个字段信息时可快速定位找到。


18，区分主要操作和次要操作



使表单的主要操作（如创建）比次要（如取消）选项更突出，以避免错误；并且不断提醒自己，是否需要采取次要的操作。


19，多步骤表单添加进度提示



为多步骤表单添加进度指示，这样用户就可以知道他们在哪里以及接下来还有哪些内容。


20，避免多个模态交互



需要多个模态的交互可能会导致用户错误，可以在单个模态逻辑中关联处理。


21，标签对齐方式：左对齐，右对齐，顶对齐



顶部对齐




如果标签放在字段的顶部，完成表单的速度会更快。如果您希望用户尽可能快地浏览表单，则顶部对齐标签是很好的选择。
顶部对齐标签，最大优势是不同大小的标签和界面更容易兼容适配。(这对于空间有限的屏幕尤其有利)
左对齐



左对齐标签的最大缺点是完成时间最慢。
这可能是因为标签和输入字段之间的可视距离。标签越短，它离输入的距离就越远。然而，缓慢的完成率并不总是坏事，特别是当表单要求敏感数据时。


如果是手机号、驾照号码、社保号码、信用卡号码这样的东西，你可能会故意放慢用户的速度，以确保他们输入的是正确的。因此，读取敏感数据的标签所花费的时间微不足道。
左对齐标签还有另一个缺点：它们需要更大的水平空间，这可能会给移动用户带来问题。
右对齐



右对齐标签的最大优势是标签和输入之间有很强的视觉联系，彼此接近的项目似乎是相关的。
这一原理并不新鲜；它源于邻近法则，源自格式塔心理学。对于较短的表单，右对齐的标签可以有很长的完成时间。缺点是不舒服；这样的表格缺少坚硬的左边，这使得它看起来更不舒服，阅读起来也更困难。


备注：
分组原则（或格式塔分组法则）是心理学中的一组原则，最初由格式塔心理学家提出，以解释人类自然地将物体感知为有组织的模式和物体的观察，这一原则被称为 Prägnanz。
格式塔心理学家认为，这些原则的存在是因为大脑天生就有根据某些规则感知刺激模式的倾向。这些原则分为五类：邻近性、相似性、连续性、封闭性和连通性。
格式塔邻近定律指出，“彼此接近的物体或形状似乎形成了群”。即使形状、大小和对象完全不同，如果它们很接近，它们也会显示为一个组，这种分组可以通过色调、色值、颜色、形状、大小或其他物理属性来实现。
22，复选或单选信息化布局



将复选框按照逻辑关联性排列呈现，方便用户快速理解并识别，单选框的情况同样适用。


23，即时验证尽量做到适时



尽量在用户完成一个字段时处理，避免中间对他们造成干扰，除非这个填写的过程是非常必要的，比如创建带有字符数的密码、用户名或信息。


24，重要的提示信息一级界面呈现



尽可能呈现基本的帮助信息，对于复杂的帮助器文本，请考虑在其聚焦状态期间将其放在输入旁边。


25，某些情境下，字段的长度是很好的辅助方式



字段的长度提供了答案的长度。对于定义通用字符数的字段（如电话号码、邮政编码、信用卡号等），请使用此选项。


26，谨慎使用（*）标记



用户有时候并不知道必填字段使用（*）标记的真实含义，换种思路，可以使用文字说明来作为提示标识。


27，输出标记指引



输入标记是一种帮助用户格式化输入文本的技术。一旦用户将注意力集中在某个字段上，就会出现一个指引，它会在填写字段时自动格式化文本，帮助用户将注意力集中在所需数据上，并更容易地注意到错误。
示例中，在输入电话和信用卡号码时会自动应用圆括号、空格和破折号。这项简单的技术节省了使用电话号码、信用卡、货币等的时间和精力。


28，移动设备：输入对应键盘



在移动设备端，在输入不同的内容时对应匹配不同的键盘，如手机号码、支付账单等。


29，视觉反馈



设计“提交”按钮的动态反馈，以清楚地表明用户操作后正在处理表单。
向用户提供反馈，同时防止重复提交（有时使用提交后将按钮置灰的效果，也是一种简单的动态反馈）。


30，表单高级技巧：信息分组



表单中单个字段的信息我们掌握了以后，当界面中出现多个字段信息时，为了让用户们快速理解、思维连贯等角度考虑，将各个字段按照逻辑关联分组，以分组的形式逐步呈现（如个人信息，购物订单，客户资料，可视化报表等）。




Ⅳ    提升技巧


1，学会调研


多观察高水平的设计作品，试图理解高水平的设计思维。站酷、BAT、网易、京东等众多一线互联网公司的设计官网；国外的 Pinterest，Dribbble 等等，都有非常多的高水平设计作品。


多思考设计原则、设计背景（需求背景），通过观察了解设计大佬们的设计思路；
多实践以理解设计方法，提升设计技巧。交互设计是一门实践性学科，需要有大量的练习来理解概念、强化技巧，只观察原型、记住原则是远远不够的，一定要抽时间练习来掌握。


最后，通过多观察多思考多练习，总结规律总结方法，得到适合自己的、适合自己产品的交互设计方法论。


2，临摹


我遇到很多同学学习参考高水平案例时非常理解，自己动手就会出问题，案例方法一看就明白一上手实践就出问题，这种情况非常典型。
出现这种情况，原因是只看到了设计结果而没有体会到设计过程，交互设计的练习太少，没有完全掌握交互设计的步骤或者演变。


建议：
1）看到高水平案例，可以先临摹（抄写）一遍；
2）抄完以后，开始针对自己的交互设计原型进行挑错，找到哪里还可以优化、哪里还可以调整；
3）自己动手从交互设计的角度输出（画原型）再画一遍。记住：一定要脱稿。


3，数据：SUP


表单设计（交互设计）没有最好或最坏，往往是最适合，通常我们在通往最佳目标的路径上要走很多弯路，这就是不断调整、不断试错。


不要试图套用规则，不要直接原样搬运，结合自己产品状况不断修正，在此过程中可以利用最有效的工具：数据。


在表单设计的节点、各个界面进行数据埋点，不断收集用户的点击次数、停留时间等数据，帮助我们了解、分析用户行为，帮助我们改善表单设计。


切记：数据是手段，是帮助我们改进表单设计（交互设计）的方法，并不是为了提升点击率、停留时间、留存率等指标。
备注：SUP，即 Support，辅助，就像王者荣耀里的角色，为完成目标而带来的增益效果，离开团队目标则没有了意义。


4，复盘与总结


无论是习得了新设计技巧，或是项目结束后，要复盘要总结。总结的过程是真正理解原理、并加深结论的过程。


表单的设计，看似通俗易懂非常简单，但是要理解他们的设计原理是一定需要实践过程来体会，千万不要因为表单的设计微小而忘记了总结。


5，适宜：微交互


人们每天要面对的信息越来越多，所处情景越来越复杂，因此，在填写表单时会被过度干扰。


告别以往的 PC 电脑，更多的通过移动应用来进行交互，借助手机物理设备提供的功能（定位，指纹，摄像，录音，水平仪，重力仪等），可以让 APP 添加更多的交互功能。


适量加入微交互，动画效果、蒙板分区、模态指引等等，以帮助人们提升完成表单的效率，但要掌握好尺度，避免造成干扰而带来填写负担。


6，未来：自动化输入


数据和信息的录入越来越自动化。
例如，移动和可穿戴设备在用户不自觉的情况下收集大量数据，智能设备具备的传感器也会主动探测数据而辅助信息收集，可以利用社交、对话式 UI、SMS、电子邮件、语音、OCR、位置、指纹、生物识别、环境识别等等各种方式。
Ⅴ    总结回顾


表单设计的内容要点总结如下：
  • 认真分析评估表单所包含的所有问题，必须要注意，将非必要问题剔除掉。
  • 表单问题（标签）通俗易懂，简洁明了。
  • 如果人们会误解标签的意思，应当使用自然语言，阐明表单要求人们回答的问题。
  • 表单的问题来自不同人或不同部门，应当确保表单统一口径。
  • 将表单内容组织成逻辑组，有助于浏览和完成填写。

  • 如果可能，应当以对话形式构建表单。主体间的自然间断有助于组织表单。
  • 如果表单可自然分成若干主题，一个界面就足以组织表单。
  • 如果表单包含大量问题，而主题较少，会需要多个界面组织表单。
  • 如果表单包含大量问题，而只有一个主题，需要一个较长界面组织表单。
  • 可以考虑在表单填写之后提出可选问题，会比在初始表单中就提出这些问题能获得更多答案。
  • 应当采用最少的必要视觉信息来区分内容组。



  • 确保表单名称符合人们的期望，并简洁解释每个表单的用途。

  • 如果表单需要时间或者查询信息才能填写，可以采用起始页来设定人们的期望。

  • 由始至终采用清晰导航线和有效视觉步伐来引导人们，确保说明清晰的填写完成路径。

  • 对于关键人物表单，比如结算表单或者注册表单，应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容。

  • 如果表单分为多个已知的有序网页，可以采用进程指识来传达范围、状态和位置信息。

  • 设计表单布局时，应考虑使用 Tab 键的“跳转”体验（ PC 平台，移动平台可以结合键盘、自动化输入）。

参考资料：
Luke Wroblewski -《 Web Form Design: Filling in the Blanks 》（互联网表单设计的最佳读物） 
链接：https://www.lukew.com/
Michelle Shan 《互联网表单设计》（译文）
Nick Babich -《 Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions 》
链接：
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/#labels
Medium - Andrew Coyle -《 Form Design Best Practices 》 
链接：https://medium.com/nextux/form-design-best-practices-9525c321d759
Douban -《Web Form Design: Filling in the Blanks》（书评） 
链接：https://book.douban.com/subject/4886100/
Nielsen Norman Group -《 Placeholders in Form Fields Are Harmful 》
链接：https://www.nngroup.com/articles/form-design-placeholders/
Wikipedia-《 Principles of grouping 》
链接：
https://en.wikipedia.org/wiki/Principles_of_grouping
案例图片引用来源：
Andrew Coyle 博客

Nielsen Norman Group
Cubicle Ninjas
视觉中国

案例截图来源自网络收集，作者编辑整理，以供爱好者学习、研究、交流使用。
图片版权归原作者所有，引用时注明了出处，如果涉及侵权请联系作者予以删除。

ThinkerD  (Thinker Design)　：新产品经理职场加油站。

欢迎关注支持 ThinkerD 本公众号，点赞、转发、在看以帮助更多的朋友们。

本文来自微信公众号“in ThinkerD”作者：ThinkerD（ID：ThinkerDesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章