Design Forms Correctly, Essential UX for User Input

如何正确地设计表单?必须知道的用户输入 UX 基础

前言

表单是是网站中最常见的功能性元素也是与用户沟通的桥梁,像是购买商品、注册会员、问卷填写……等各项行动都离不开它,然而这么重要的体验却时常被忽略,于是我决定整理一个良好的表单应该具备的体验以及为什么应该这样设计

设计标签 Label

密码输入框标签示例

Label (标签) 是存在于用户输入旁的文字,用于描述输入的用途,类似于每个输入的描述标题

常见的问题是基于美观考量直接省略显示标签或者是淡化其存在,导致用户难以辨识与阅读输入项目的用途。

绝大多数输入框都应该具备标签,没有必要的原因尽量不要隐藏显示标签,它们的用途是让用户得知输入项目的用途,如果因为空间或视觉因素需要省略则可以考虑使用图示,举例来说:搜索框通常存在于网站的顶部并没有太多空间可以显示标签,这时使用搜索图示来替代是可以被接受的。

  • 应尽量避免省略,如不可避免则可以使用图示取代
  • 应具备良好的阅读性沟通输入的用途
  • 应简短(1~2 个词)描述输入框的用途

设计占位符 Placeholder

文字占位符示例

Placeholder(占位符) 是短暂的假内容用于描述输入资料可能的样貌,表单中的占位符通常指的是输入框的 placeholder 属性,它是一个短暂的提示文字,通常用于描述输入框的格式、示例或者是预期的内容

常见的问题是将占位符用于描述输入的用途,可能导致用户在输入后由于占位符的消失而遗忘输入的目的,良好的输入占位符主要用途应描述示例输入资料格式,像是信箱的占位符可以是:name@example.com 以降低用户的认知负担。

表单提交行为

表单如果没有明确的行动呼吁(CTA - Call to Action)可能导致用户不知道填写完表单后该如何提交,不应该单纯依赖按键来提交表单,随时让用户知道填写完表单的下一步动作应该是什么,像是明确的提交按钮、载入新资料供用户选择。

延伸阅读