移动端表单设计避坑指南

移动表单的设计、布局和功能在产品体验和交互方式上与PC端相比都不一样,所以作为体验设计师需要确保PC端网站上的任何元素都是针对移动设备进行优化过的。以期达到与PC端一样流畅的体验。

移动端表单设计避坑指南

设计不合理的表单会给移动端用户带来不流畅的体验,导致用户流失并降低转化率。所以,明确移动端表单设计,看似简单却十分重要。

移动端表单设计避坑指南

1、限制表单字段的数量

评估每个输入字段,以确定它们是否是必需的,并删除所有不必要的字段。切勿由于繁杂的信息流失不必流失的用户。须知只要用户继续使用你的产品,就可以以其他方式或在以后获取必要的信息。

移动端表单设计避坑指南

相对比而言,“什么值得买”比右侧更为快捷,为何?不需要用户填写,一键登录。而右侧快手助手登录比较常规,需要填写手机号,获取验证码。快捷的登录,可以提升用户的好感度。

2、利用技术实现简化输入

简化输入的关键是需要了解当前设备所能实现的程度,基于此才可以设计相关的体验方案。例如获取GPS定位,自动填充当前位置信息。

移动端表单设计避坑指南

移动设备中的生物识别技术来允许用户使用其指纹或面部扫描进行登录。这减少了密码恢复的需要,降低了用户放弃整个过程的可能性,毕竟输入几次之后被锁定账户还是比较郁闷的。当然时下OCR识别技术,也是不少设备开始运用的一个方面。只是此项技术单独研发成本过大,更多的是购买第三方公司的服务。

3、必要时提供匹配输入的键盘组件

移动设备的优点是能够为不同类型的字段提供适当的键盘。通过限制输入的类型,它简化了过程并减少了用户出错的机会。例如,当用户输入他们的联系号码时,你应该显示数字0到9小键盘。

移动端表单设计避坑指南

4、非安全策略自动填充

当我们采用当下最普遍的SMS OTP进行验证时,如果不允许自动获取内容填充,我们将不得不在应用程序之间切换以查看消息并返回以填充字段是非常烦人的;通过允许自动填充,用户可以轻松输入验证码而不会带来其他麻烦。

左侧在你不注意的情况下,或未设置允许该应用通知,你只能在两个应用之间切换,以此填写验证码信息;右侧则可直接点击输入验证码避免繁杂操作。

5、避免拆分最小字段

最小化字段不进行拆分。特别是对于诸如姓名,出生日期或有效期限之类的字段,尽量展示为一个字段信息。

6、长输入表单分层级以拆分

“一个表单越长或越复杂,用户就越不可能有动力去完成它。”当输入表单过多时,可以通过分块、归类、分步骤的方式划分表单输入项,从而使其更易于处理和理解。例如,结帐流程可以分为购物车,付款明细和发货明细,部分产品会将登录或注册的过程也进行分步骤层级展示。

移动端表单设计避坑指南

7、合适尺寸大小

移动端设备上界面元素,都需要仔细考虑尺寸大小问题,不仅仅涉及表单设计。除尺寸大小之外,合适留白区域也是非常重要的。

8、合适的反馈

表单设计最常见的一种通用性组件,但是不能因为通用就忽略了反馈的重要性。我们考虑在行动前、行动中、行动后合适的反馈方式,以提升用户体验。

移动端表单设计仅是B端产品设计中一个比较小的单元,以上需要注意的原则或细节,有些也是适用其他组件设计的,例如列表设计,输入框设计等,重要的是需要明确在设计的过程中要考虑的细一点,以期可以有一个比较良好的体验。

业界动态

产品设计的20条心理原则(下)

2020-6-26 22:20:12

业界动态

迷茫的私域营销,企业微信应该怎么做?

2020-6-26 22:43:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索