中心思想：通过眼动实验帮助企业、电商网站等进行网站优化。

表单字段可用性：考虑为“电话”和其他受限输入使用本地化输入掩码

作者： Edward Scott

全文共计：3430字  预计阅读时长：12分钟

原文链接：https://baymard.com/blog/input-masking-form-field

( 再次感谢伟大的谷歌，可以让一个英语渣渣查找阅读国外文献资料）

输入掩码可以帮助用户在受限输入中输入数据，但是有很多细节可以确保输入

掩码对用户有效。

我们的大规模Checkout可用性测试显示，89％的用户可能以几种不同的方式输入数字输入 - 即使提供了显示网站所需输入格式的格式化示例。此外，在测试过程中，一些测试对象在输入数据之前犹豫了，因为他们担心他们会以网站无法验证的格式输入它 - 即使在接受所有格式的网站上也是如此。

这是一个合理的担心，因为我们发现98％的电子商务网站限制某些领域的投入，并且用户在收到由于包含和省略格式化网站而未接受的验证错误的网站上有过先前的经验。在测试过程中，这些格式化验证错误甚至导致结账放弃，特别是当错误消息或错误恢复过程也很差时。

测试表明，输入屏蔽可以是缓解用户对错误输入信息的担忧的好方法，同时确保他们以所需或优选的格式输入数据。然而，我们的基准数据显示，64％的网站不使用输入掩码，也没有正确使用输入掩码，以帮助用户在受限输入中输入数据，例如电话号码字段。

在本文中，我们将讨论与输入掩码相关的结帐可用性研究中的测试结果。特别是，我们将重点关注：

--为什么提供所需输入格式的例子还不够；

--为什么输入掩码可以成为限制字段的一个很好的解决方案；

--为什么网站只应在格式化验证通过的国家/地区使用本地化输入蒙版。

为什么提供所需输入格式的示例还不够

89％的测试对象没有遵循限制字段的格式示例。当格式化示例以场外静态文本

形式提供时（如Cabela's所见），或作为字段占位符文本提供时，甚至当我们

的眼动追踪数据显示大部分主题实际上都注意到格式化时，情况就是如此在错

误地输入输入之前的示例。

当提供一个格式化示例时，89％的测试对象以不同于该网站所举例说明的格式输入其数据。例如，如果某个网站指示所需的电话号码字段格式为555-555-5555，则几乎所有用户仍将以不同的格式输入该电话号码 - （555）555-5555，555 555 5555,555 555 -5555等

目前还不清楚为什么会出现这种情况，尤其是因为我们的眼动追踪测试数据显示用户在以不同的格式输入数据之前会查看格式化示例 - 用户很可能只是以他们喜欢并假定的格式输入数据该网站将“修复”它，或者用户可能将格式示例视为建议而不是要求。无论如何，显然提供一个格式化示例不足以确保用户以所需的格式输入数据。

此外，网站首先应该非常谨慎地限制用户的输入 - 特别是当它只是用于输入格式化的虚拟限制时。如果可能的话，用户应该被允许以他们希望的任何格式输入他们的数据。但是，对于网站或者具有输入那里是围绕输入字符限制没有办法，或者说愿意把钱花在完善填表经验技术资源网站，输入面具是在测试过程中观察到表现良好- 如果相当大的技术尽职第一次进行勤奋工作。

为什么输入掩码可以成为限制字段的一个很好的解决方案

“如果有这些[输入掩码，编辑]，这将是很好的。现在我必须输入一个

反斜杠或正斜杠，相反它可以......为我制作。“由于缺乏输入蒙版，测

试对象变得更加严重，因为他现在觉得有必要自己输入日期格式。

在测试过程中，输入屏蔽被认为是限制输入的特别好的解决方案。输入掩码可以在用户输入字符之前显示字符预期的格式，然后自动将该格式应用于用户输入的输入。因此，用户可以完成格式化输入 - 具有输入掩码提供的所有验证和易读性优点 - 但不必自己键入任何格式化字符，因此获取输入格式的验证错误的可能性要小得多。

输入屏蔽功能可以消除用户对受限输入所需的格式（如电话号码）的疑惑，

以及在用户输入时提供验证和易读性 - 使拼写更容易找到。

提供输入掩码不仅可以确保正确输入值，还可以观察到消除用户对正确格式化的预先关注，并且通常可以加速完成表单。

“他们可能不希望+1，因为它以括号开头。”此主题将她的电话号码输入

到“电话号码”字段中。在输入她的电话号码后，她注意到：“这很好，

在输入字段中......我只是得到一个确认，它在这个盒子里说的很好。这对

我们有很大的帮助。“

例如，如果以国家代码为前缀，所有电话号码都是有效的，但在美国和加拿大，电话号码开头的“1”或“+1”国家代码实际上通常被省略，并且通常会产生一个如果包含错误（由于电话输入现在为11位数字并包括特殊字符），尽管它是有效的电话号码。输入掩码指导用户如何输入他们的电话号码，如果国家代码应该键入，不应打字或已包含在内（将显示在基于所选国家/地区的输入掩码中） - 让用户避免如何输入他们的信息和潜在的验证错误的不确定性。

提供用户可以实际键入的格式化例子当然至关重要。请注意，用户无法在

REI上关注手机格式化示例，因为iOS上的手机优化键盘不允许输入破折号

或括号。

输入掩码对于移动设备上的用户尤其适用，其中打字通常比桌面环境更困难，并且触摸键盘布局应针对特定类型的字段进行优化（例如，电话字段，信用卡字段，电子邮件字段等等） - 意味着不同的键盘字符对用户是可用的，取决于他们所在的字段。具有输入掩码确保用户能够输入他们的输入以匹配期望或需要的格式，在它可以是难以或不可能输入通常与特定输入类型相关联的字符，例如电话号码。

在百思买，用户的信用卡号码输入是自动格式化的空间，使输入和阅读更容易。

该信用卡号码是另一个领域，其中我们的测试已经证明该输入掩码的表现非常好，自动格式化卡号空间。自动格式化空间显示为使用户更容易阅读和输入长信用卡号码输入，否则容易出错。事实上，在测试过程中，看到主题以“块”的形式输入并阅读其输入内容，这些内容反映了他们的实际信用卡上的内容; 例如，“4571 [暂停] 6610 [暂停] ...”。自动格式化卡号空格的输入掩码可以帮助用户不必费力读取长而完整的信用卡号码字符串，并且使他们在完成输入后可以更加容易地检查输入。

输入掩码可以很好地执行，但只有在本地化和详细检查时才有效

实现输入掩码可以帮助用户更轻松，更准确地填写表单字段。但是，应该特别小心，因为输入掩码也会直接修改和设置用户可以输入的限制。任何技术怪癖或与用户输入不匹配都可能不愿意强迫这些用户放弃该网站，因为他们无法正确提供请求的输入。

例如，当基准测试和审计结账流动时，我们经常观察到输入掩码逻辑没有完全解释用户如何在字段中编辑输入，由于显着的交互怪癖，这变得更加困难。

输入掩码的另一个重要考虑因素是输入格式和输入结构（如日期，电话号码，地址等）的地区差异。例如，美国的日期格式为MM / DD / YY，而大多数欧洲是DD / MM / YY，加拿大和日本是YYYY / MM / DD。

在Staples用户输入字段时，不会提供空的占位符文本。许多用户不确定

他们是否应该输入格式化字符。

Northern Tool确实向用户显示空的占位符文本，清楚地表明他们只需

键入他们的电话号码数字。

出于这个原因，输入掩码提供空占位符格式是很重要的，因为用户输入字段来澄清字段的预期格式，并澄清用户不应输入自己的格式。在测试过程中，所有主题立即拿起，当把焦点放在带有输入掩码的电话号码字段上时，在占位符文本中使用下划线和括号表明他们只需键入电话号码数字，而如果字段有没有占位符格式化，用户更难以知道他们是否必须键入格式化字符。

此外，根据经验，输入掩码在本地输入格式和结构已经过验证之前不应在多个国家/ 地区重复使用。例如，全球大多数国家都有电话号码长度或电话号码格式，因此无法重复使用以美国为中心的电话输入掩码，例如“（315）415-9999”。此外，像英国和德国这样的几个国家的电话号码的总长度是不同的：例如，德国的有效电话号码只有7位数字，一直到11位数字，区号都是2到5位数字 - 制作一个输入模板，可以正确显示用户预期的输入格式，这几乎是不可能的。

如果不能完全确定正确的区域格式，或者如果输入掩码的目标受众被认为太小，则应该对未经验证或不受支持的国家/地区的所有用户完全禁用输入掩码，而不使用传统表单字段任何输入限制都应该是默认值。

鉴于技术的稳健性和所需的国际化逻辑，应该强调的是，输入掩码如果性能良好，开发的资源密集程度有限，任何外部输入掩码脚本在使用之前都需要详细检查。

考虑实现输入掩码 - 但谨慎行事

当它们运行良好时，我们的测试中观察到的输入掩码有许多好处，其中包括

--消除用户对如何填写特定限制字段的不确定性；

--减少用户对可能填写错误的领域以及接收错误的担忧；

--减少所有用户遇到的验证错误的数量，有时可能导致网站被放弃。

在测试期间，输入掩码在帮助测试对象正确提交格式化和限制输入

方面表现良好，如REI中所示。特别是，初始输入犹豫和验证错误的

数量会降低。

鉴于这些非常重要的优势，我们建议为受限制的表单字段（如电话号码，日期，信用卡自动分隔以及需要或需要特定格式的任何其他字段）实施输入掩码。

然而，输入掩码必须完美地工作，以避免造成更多的伤害。输入掩码不符合用户的国内格式，通常会导致放弃，因为用户无法完成表单字段和结算（如果电话号码是必填字段），在这种情况下，关键是也解释了为什么）。

为了确保输入掩码正常工作，他们需要针对用户的特定国家或地区进行本地化，这意味着所有用户的默认实现都是一个普通的空表单字段，可以接受任何格式。然后用输入掩码逐步增强此字段的用户界面，这些用户位于网站关键市场中已验证本地输入格式的用户。

本文仅从我们的电子商务结账可用性研究中的134条用户体验指南中的1条提供研究成果 - 获取有关创建“最先进”购物车和结账用户体验所需的133个其他调查结果的完整信息。