移动表单的设计,布局和功能在网站的整体用户体验中扮演着重要角色,尤其是每天通过移动设备进行购买,创建帐户和提交请求的用户数量都在增加。
“一切在移动设备上的运作方式都不相同,因此设计师需要确保其网站上的任何元素始终针对移动设备进行优化”
设计不当的移动表单会使用户感到沮丧;导致用户流失并降低转化率。这意味着在移动设备上简单高效地查看,填写和提交表单至关重要。了解移动表单设计的基本原理也很重要。
以下是一些准则,可用来改进移动表单设计。
01 限制表单字段的数量
长长的表单会让用户感到头痛,因为它们需要非常多的精力才能完成;花费的时间越多,用户填写表格的可能性就越小。这就是为什么需要评估每个输入字段必要性以及是否能够简化无关紧要的表单内容。
02 避免分割数据字段
最小化字段数的一个好方法是不对其进行拆分。特别是对于诸如姓名,出生日期或有效期限之类的字段。通常没有真正的理由将它们分开,最好只将一个字段与清晰的格式规则配对作为占位符。
03 提供配套的键盘
移动设备的好处是能够为不同类型的字段提供适当的键盘。通过限制输入的类型,能够简化输入过程并减少用户出错的机会。例如,当用户输入他们的联系电话时,您应该只显示数字0到9。
- input type=”text” 显示移动设备的普通键盘。
- input type=”email” 显示普通键盘以及“ @”和“ .com”。
- input type=”tel” 显示数字0到9的键盘。
- input type=”number” 显示带有数字和符号的键盘。
- input type=”date” 显示移动设备的日期选择器。
- input type=”datetime” 显示移动设备的日期和时间选择器。
- input type=”month” 显示移动设备的月份和年份选择器。
04 尽可能自动填充数据
仅仅最小化输入字段的数量是不够的,还应该尝试减少用户输入数据的工作量。当用户需要进行高成本交互–容易出错且耗时的操作时,作为设计人员,我们应尽可能实现自动填充或自动完成功能,以防止不必要的输入。
如果您的应用程序或网站需要SMS OTP进行验证,则此功能特别有用。不得不在应用程序之间切换以检查消息,并返回以填写该字段是非常烦人的。通过允许自动填充,用户可以轻松输入验证码而不会带来太多麻烦。
05 利用技术简化数据输入
地理位置
大多数移动设备都具有GPS功能,这使得可以根据其地理位置数据预先选择用户所在的国家/地区。也可以根据用户的当前位置提供准确的建议。例如,对于乘车服务,可以使用用户的当前位置预填充“发件人”字段。
在由于准确性问题而导致预填充位置不正确的情况下,Grab甚至可以提供用户周围位置的列表。这允许用户轻松地重新选择他们的位置,而无需付出太多努力。
生物识别
密码的未来就是没有密码。您上次使用密码解锁手机的时间是什么时候?设计人员需要利用移动设备中的生物识别技术来允许用户使用其指纹或面部扫描进行登录。
这减少了密码恢复的需要,降低了用户放弃整个过程的可能性。
卡扫描
如果您的表格需要用户的信用卡或身份证信息,则可以通过使用移动设备的相机作为扫描仪来简化此过程;一键填写所有详细信息。另外要允许用户编辑这些字段,因为技术并不总是完美的。
06 将长表单分步展示
在某些情况下,无法减少输入字段的数量。在这种情况下,重要的是最小化在任何时间点可见的字段数量。这可以传达出简短形式的感知;而不是将所有内容都显示在一个屏幕上,而这可能会令人不知所措。例如,结帐流程可以分为购物车,付款明细和发货明细,使处理和理解变得更容易。
07 设计对手指友好的组件
对于移动表单,组件的大小将极大地影响操作所需的工作量。微小的组件会给用户带来可怕的用户体验,因为它们很难与用户交互。就像穿针一样。通过使组件更大且更易于交互来设计对手指友好的组件至关重要。
大小不是唯一重要的事情。在组件之间保持足够的空白很重要,以防止用户与错误的组件进行交互,导致任何体验较差的行为。这对于二进制选项(例如“ confirm”和“ cancel”)通常至关重要,它们通常彼此相邻。
08 提供反馈
与使用台式机不同,移动用户在单击或点击交互式组件时不会感到物理上的“单击”感觉。这就是为什么在用户与某个元素进行交互时提供清晰的反馈很重要,以防止他们感到迷茫和困惑。“是否正常?”,“我是否正确点击了它?”
这可以通过以下方式完成:
- 为字段设计焦点状态
- 实施视觉反馈
- 适当地应用成功状态或错误消息
虽然表单只是由输入字段和确认按钮组成的通用组件,看起来很容易设计,但是,通过遵循上述准则,您将显著提升表单的可用性及完成率。
原文:8 mobile form design guidelines
作者:Jeremiah Lam