随着移互联行的飞速发展,人们原本习惯在 PC 端填写的长表单,渐渐地在移端越来越见。本将基于驴妈妈移端供应商盟项目,从 PC 端和移端的同之处入手,探讨移端长表单的设计有哪些注意事项。
供应商盟项目的交互设计及原制作:陈梦蝶(此作者),视觉设计:陈丛哲。受限于开发成本,中分示例的功并未上线。
PC 端移动端手动输入的便捷程度不同的。PC 端的输入较便捷(键盘鼠标触控板,效率较高);移动端的输入较不便捷(手指与屏幕的触碰面积较,效率精准程度远不及 PC 端的键盘鼠标)。因此,了打造便捷优的操作体验,移动端表单需尽减少用户的手动输入。以下方法可以减少手动输入。
方法1:当场景下的常用选项
提供当场景下的常用选项,用选择替输入基本的思。得注意的,如果常用选项不能涵盖用户可能填写的全部内,那么手动输入自义选项的功能也提供给用户。
法2:利用移动端设备能获取信息
尽管移动端在输入上没有那么便捷,获取到信息类与精确度,却具有定优势。比如,移动端设备能较为精确地获取到用户前地理位,这为某些需要填写位表单提供了便捷(如收货地址、联系地址等)。再如,调用讯录功能也经常出现在各需要填写手号表单。
方法3:提供用户的历史输入项
一表中出现了多相同类型的表项,这可以提供用户的历史输入项供其选择。另外,多填页也会将用户输入的息动保存为常用收货人等,同也是用了这一方法。
方法4:采用拍照识别的功能
由 OCR 技术(Optical Character Recognition,光学字符识别)的展,拍照识别文字的速度和准确度有大的提升,最常见的就是各大金融服务应用中拍照识别银行卡号的功能。下所示,三证合一的营业执照中有 18 位的统一信用代码,由阿拉伯数字和英文字母组成。果采用手动输的方式,不仅效率低,还容易输错。在里应用 OCR 技术,旨在降低输成,提升用户验。
相对于 PC 端的物键盘,移端的虚拟键盘由于受限于屏幕尺寸,在各种类键盘间进行切换的成本较,且在数字和各类中英标点符号的输入上效率较低。因此,在移端长表单的设计中,需要更多考虑:默认调哪种类的键盘,才是当前场景最为效的择。
另外,当连续个表单项的输方式各不相同时,考虑使用联动键盘。下面的案例所示:
不难现,案例中连续 3 个表单项对应的输方式分别是:时间选择器、数字键盘、选项选择器。果采用传统的方式按顺序填写,不仅需要依次点击 3 个表单项,而且对应的选择器和键盘也需要分别弹出和收各 1 次(弹出和收共计3*2=6次),操为繁琐。改为联动键盘,以在同 1 个底部弹出中,流畅地填写完 3 个表单项,有助打造更为便捷高效地填写验。
移动端设备相比 PC 端设备,屏幕尺寸小得。一份在 PC 端以用 1-2 屏展示完的表单,在移动端能需滑动 7-8 屏才能完整查看。果在移动端用一个页面承载 7-8 屏才能看完的长表单,能造成高跳出率和低完成率。表单设计领域的专 Adam Silver 通过实际项目发现:将较长表单拆解为若干分,若干页面展示,升户满意及支付转率。除此之外,Adam 还总结了这种设计念的 16 个优点,我觉得中最要的 3 个优点如:
- 降低认知负荷,让用户能专注完任务;
- 使得每一页的错数得到降低,从而降低错误带给户的挫败感及跳率;
- 合进度指示器,能给用户一种前进的正面感。
那么,分页面展示就足够了么?还不一。根据具体的况,时还需将一页面中的内划分不同的模块。具体的法:将相关表单项行分类组合,并通过卡片、分割线或间距将它们分不同的语义组,并添加对应模块标题以突出页面的节奏感,从帮用户加高效浏览填写表单。
为什么要考虑预览功能呢?于分页填写表单,如需检查前已填写内容,要逐步返回前页查看,十分不便。此,提供个专预览页让用户表单进检查和确认,是很有必要。而这也符合尼尔森可用性原则易取原则(Recognition rather than recall),尽可能减少用户回忆负担,把需要用户记忆或确认内容接展示出来。
这点要从 PC 端和移动端的使用景说起。PC 端的使用景相对比较局限,人在使用大多是坐在前;而移动端的使用景则宽泛得多,无论是站着、坐着、着还是躺着,都能使用机,这就让发生误操作的可能性更大。另外,端的使用景同受各网络环的响,PC 端的网络质量相对稳定,而移动端由于「移动着」的性,网络质量容易波动,比如,从号较好的室外进入号较差的梯内。对于异常情况的发生,计可从这 2 点进行考虑:
- 尽能地帮助用户存已填写的表单信息;
- 如果实在无法保存已填写的表息,要友好且确地提醒用户这一风险。
这一点主对于 iOS 操作系统言的。相比于 Android 操作系统,iOS 系统对数据读写限制,这由于 iOS 系统的沙盒(SandBox)机制所决的。所谓沙盒机制,就各应用程序的数据都独立的沙盒中行储存,应用程序只能自己的沙盒中访问文件,不可以访问其他沙盒中的内。对于 iOS 系统的 APP 言,一般只能访问设备的相册资源(用户允许其访问相册权限的况下)。因此,如果移动端表单需传文件,需考虑到 iOS 操作系统这一数据读写的限制问题,并根据限制规范化支持传的文件格式。
综所述,可将文中提到的内归纳一张表格。
参考
[1]如何高效完表单输入?看这案例 – 优设
[2]16优点告诉,什么表单设应该用这方法? – 优设
[3]Better Form Design: One Thing Per Page (Case Study) – Smashingmagazine
[4]可能全面的表单设完全手册 – 优设
[5]尼尔森可用性原则 – Nielsen Norman Group
[6]从交互设角度,聊聊Web网站移动App的六差异 – 优设
[7]iPhone 20了也用!这些功能iOS永远不会 – TechWeb
[8]iOS阶第一天(数据处理之文件读写)- 简书
欢迎关注「驴妈妈UED」的微信公众: