您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 设计理论 >> 浏览设计教程

如何高效完成表单输入?来看这个实战案例!

58UXD:表单是收集用户信息的体例。假如你的产品必要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中肯定要考虑到输入成本和输入服从对用户体验的影响。

针对复杂表单信息多、填写慢、体验差等题目,我们以「58简历发布」与「赶集房产发布」为例,进行表单发布流程的再设计。重要从以下六个方面进行体验的周全升级:

  • 聚焦核心信息,削减认知成本
  • 联动式键盘,进步输入服从
  • 实时反馈,传递规则信息
  • 合理规划层级,削减输入压力
  • 从现实场景出发,抓用户核心诉求点
  • 专注自力义务细分

一、了解在前

表单具有三种状况,默认态即用户输入信息之前的状况,该状况告知用户必要填写什么类型的信息;焦点态即用户正在输入信息时的状况,该状况使用户聚焦输入信息时,能够更好与表单交互并完成信息填写;反馈态即用户填写信息后的校验状况,该状况能够对输入信息进行实时判断。

二、聚焦核心信息

在表单处于默认态时,通常会用标签提醒用户填写什么类型的信息,用占位符作为额外提醒告知用户如何填写信息等规则,当用户开始对信息进行输入时,标签不变,占位符文本消散。

在复杂表单展示中,占位符的存在会分散用户对核心信息的阅读,消散会影响用户对输入规则的关注。

如何让用户在不同的状况下聚焦最紧张的信息,削减认知成本成为设计的关键点。

△ 不同状况下聚焦核心信息 图片来源:58简历发布

信息输入前聚焦标签内容,输入中聚焦规则信息,输入后聚焦效果内容。让用户在不同状况下,聚焦核心信息,削减认知成本,进步输入服从。

三、联动式键盘

在用户进行表单信息输入时,怎样跟输入控件亲密无间的合作,从而降低用户的输入成本,进步用户的输入体验?

△ 控件反复调入跳出 图片来源:赶集旧版房屋发布

旧版表单进行信息输入时,每个字段的输入过程均为「点击选择输入 – 弹出对应输入控件 – 信息输入 – 收起控件」,完成表单输入的整个过程中,对应的输入控件在频繁交叉的弹入弹出,用户也在频繁的选摘要输入字段。如何从根本上改变用户对输入控件的使用服从?

△ 联动键盘输入更高效 图片来源:赶集房屋发布

为了避免让用户频繁的跳入跳出雷同类型的输入项,首先整合表单的信息字段,将同类型的字段进行合并,同时结合输入控件,设计联动式组件,让用户在表单输入时更加高效。

在58简历发布改版项目中,我们使用了同样的设计思路,改变用户的输入体例,进步用户输入服从。

△ 联动式键盘输入更高效 图片来源:58创建简历

通过进步用户对工具化产品的使用服从,避免了让用户频繁跳入跳出雷同类型的填写项,让输入更高效。

四、实时反馈

无论是规则指导照旧错误提醒,都要在用户输入时实时进行反馈与提示,合理有序的向用户传递规则信息,可以有用削减表单网页中无效信息的同时,使信息传递更加具有通用性和规范性。

在联动式键盘中增长提醒信息,帮助用户在输入过程中及时了解输入规则。

1. 规则信息提醒

在用户输入时不再消散输入规则,而将提醒文案与联动式键盘相结合,辅助用户精确完成信息填写。

△ 左图来源赶集 – 房屋发布;右图来源58 – 创建简历

2. 实时反馈

在用户输入过程中,错误是不可避免的。如何将错误以高度可见的情势实时告知用户,降低用户错误输入中带来的挫败感是尤其紧张的。

△ 左图来源赶集 – 房屋发布;右图来源58 – 创建简历

△ 信息填写实时反馈,来源赶集 – 房屋发布

3. 对话式指导

Justin Mifsud 曾提出「表单应该像一个对话,而不是审讯」。优秀的对话式表单,能够进步用户信赖度和转化率。采用亲和、生动、容易理解的语言来指导、告知和激励用户完成对应的义务,文案每每在细节之处起到紧张作用。

合理的规则提醒、实时的错误反馈,友爱的对话指导,会降低用户出错带来的挫败感,提拔精确率,进步用户信赖度和转化率。

五、合理的规划层级

1. 主动填写/匹配预设值, 削减用户输入

表单的主动填写或主动匹配功能,能够帮助用户降低输入负荷、提拔填写服从。

在对表单设计时,以下四种情况,可主动填写或匹配表单信息:

  • 将用户在平台中已输入的雷同信息主动带入表单;
  • 将通过移动设备各种传感器获取正确的信息主动带入表单,如用户当前定位可通过移脱手机的 GPS 获取;
  • 将内容相干联的信息通过匹配分析主动带入表单,如用户输入身份证号后,可根据第7-14位获掏出生日期、第17位数字获取用户性别,为用户主动将匹配信息带入表单。

△ 主动匹配 削减用户输入 图片来源:赶集房屋发布

赶集房产发布,将旧版的「选择区域」与「小区名称」调换位置,用户先输入小区名称,后台数据即可通过小区定位,主动匹配小区所在区域。通过此设计用户即可削减一项表单的填写,提拔填写服从。

2. 按步骤分解复杂表单,拆分义务

表单是收集用户信息的一种体例,并不是每个表单都是简短的,多数情况下我们必要用户填写大量繁琐的信息。对于如许复杂的表单,在设计上合理分组、指导用户分步完成表单的填写是很紧张,不但可以降低用户对冗长表单的填写压力,同时能够缓解对复杂、较长表单的恐惊感。

△ 合理分解复杂表单 拆分义务 图片来源:58简历发布

58简历发布,将繁杂的填写信息进行合理划分、重新定义新表单的网页规则。

整个表单填写分为三步:

  • 用户基本信息填写:姓名、性别等;
  • 求职意向填写:期望职位、薪资、求职区域;
  • 完美简历:基础简历创建成功后,指导用户填写选填信息,使简历内容更加雄厚,当然此时用户也可直接发布基础简历。

对用户来说,分步填写信息不仅缓解了对复杂表单的恐惊感,而且能够对填写的内容更聚焦。

3. 运用动效提醒信息层级关系, 避免用户迷失

合理的运用动效,能够通过覆盖、滑出、推移等动效设计帮助用户构建界面空间与信息层级关系,避免用户在一级网页与二级网页的表单切换中迷失,同时同一的转场结果能够让用户在复杂的操作中,捉住最核心的表单网页。

六、从现实场景出发

无论是项目迭代照旧一个新项目的开始,收集到的用户诉求点每每是零散的、逻辑性不强的,所以我们必要在这些离散的诉求点中捉住核心诉求,梳理现实使用场景并分析题目。

△ 捉住核心诉求 缩短操作路径 图片来源:58简历发布

58简历发布的头像选择与赶集房屋发布的图片上传功能,旧版是通过让用户先选择类型,再选择内容,该逻辑结构并无题目,但经过用户调研,我们发现多数用户在此操作时会直接添加头像或照片。根据调研效果反推旧版设计的合理性,该设计增长了用户的选择和操作成本。改版后将内容直接用一个网页进行组合,知足大多数用户的核心诉求,同时为少数用户提供入口。

打破逻辑思维的桎梏,从用户最直接的诉求出发,缩短用户使用路径和无缘由的选择成本。

七、专注自力的义务细分

从扁平的义务平铺到更加沉浸自力的义务细分,分支流程,在一个控件内快速完成整个流程,削减团体表单网页信息压力的同时,也让单个义务的完成更加专注和聚焦。

△ 聚焦自力义务 图片来源:58简历发布

58App 简历创建网页,必要插入认证手机号的义务,而这一义务是与建立简历自己无关的,会干扰主流程的进行;优化后,把认证相干信息分割自力,用户进入新场景实行新义务,使单个义务更聚焦。

总结

通过明确的信息提醒、高效的输入体例、实时的错误反馈、合理的信息层级与义务拆分,让整个表单的输入流程更加易懂与流畅,操作体验更加吻合移动端用户的使用风俗。

赶集房产与58雇用发布体验升级的尝试,发布成功率有了大幅提拔、网页跳出率与输入报错率相对降落,同时通过可用性测试,用户发布输入的平均时长也相对短缩,用户写意度提拔。

迎接关注「58UXD」的微信公众号:

图片素材作者:Renaud Lavency

[教程作者:互联网]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/di4169.html
网易可用性优化实录!如何让你的交互设计自查表真正用起来? ... ...
高手进阶技巧!全方位深入理解 Sketch 库上
图趣网微信
建议反馈
×