(翻译)表单中电话号码字段的不良设计

  电话号码字段是表单中最难处理的字段之一。由于电话号码的格式众多,用户经常搞不清楚有效的电话号码输入格式。
  用户对待电话号码字段的态度与出生日期字段一样。如果用户搞不清楚正确的输入格式,他们会担心输入内容通不过表单的格式验证,看到格式验证错误可能会让他们弃填表单。
  不应让用户猜测电话号码的有效格式,也不应让用户看到格式验证错误信息,否则电话号码字段的用户体验就特别差,需要重新设计。要想提升电话号码字段的用户体验,避免不良设计,请遵循以下最佳实践。

格式不明确的电话号码输入方式

  有些设计人员认为最佳实践是支持输入任意形式的电话号码,虽然这样能防止格式验证错误,但无法遏制用户对输入格式的不确定性。
在这里插入图片描述
  只要用户有疑惑,就会降低表单转换率。应该明确告知用户电话号码的输入格式,否则他们会担心输入内容格式不对。
  用户也搞不清楚电话号码前是否需要加国家代码,他们可能会画蛇添足般地加上国家代码,进而导致格式验证失败。

效率低下的电话号码输入方式

  有些设计人员觉得在字段旁放一个格式正确的电话号码示例能解决格式不明确的问题,用户可以对着示例按正确的格式输入电话号码。
在这里插入图片描述
  事实表明,虽然用户看得到示例,但大多数人都没有照着示例输入内容。研究发现:“89%的实验对象都没有按示例格式输入内容。”
  提供格式正确的示例用处不大,大部分用户都不会照着示例输入内容。不仅如此,当用户没有按正确格式输入时,还会导致格式验证失败。研究发现,格式验证失败会导致用户弃填表单。

操作困难的电话号码输入方式

  有些设计人员表示将电话号码拆分为多个文本字段输入能解决格式不明确的问题。以美国的电话号码为例,输入完整内容需要三个文本字段,这样确实能得到格式正确的电话号码,但仅适用于美国用户。
在这里插入图片描述
  来自其他国家的用户无法输入内容,因为他们的电话号码格式和长度与美国不同。面向单个国家用户设计的文本字段对国际用户并不方便。
  将电话号码拆分为多个文本字段也会让移动用户难以输入内容。可用性测试发现很多用户“在移动设备上难以切换输入字段”,输错的话也不方便纠错。

不费力气的电话号码输入方式

  电话号码的最佳输入方式是不让用户考虑输入格式或国家编码,字段会自动显示给用户。
在这里插入图片描述  采用geolocationinput masking技术自动格式化输入内容, 这是电话号码字段的最佳设计实践。用户输入电话号码时,不需额外操作,字段会自动显示正确的格式。
  用户只需输入数字,不用输入圆括号、破折号、斜杠、句点或空格等符号。电话号码字段限制只能输入数字,以免用户输入其他字符时出现验证错误。

在这里插入图片描述
  无论用户来自哪里,自动物理定位其国别,让字段自动格式化用户的电话号码。同时系统也能获取到用户的国家代码,不用他们再输入。这样可以减少用户的操作,提高表单转换率。
  国家代码应显示在电话号码前面,这样用户就知道不需要输入它。最直观的方式是在文本字段内紧靠着用户输入内容的地方显示用户的国家国旗图标。
  如果用户想输入国际电话号码,支持他们更改国家代码。点击国旗图标会弹出带有其他国家代码的下拉菜单。

不要让用户思考

  用户要的是能不加思考地填写表单,他们想尽快提交表单。允许用户以任意格式输入电话号码会迫使他们思来想去。相反,支持自动格式化输入内容能减少用户的思考。
  根据最佳实践设计电话号码字段能防止用户弃填表单,提高表单转换率。遵循电话号码字段的最佳设计实践,不要让用户思考。

原文地址:https://uxmovement.com/forms/bad-practices-on-phone-number-form-fields/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值