赞助商
立即赞助

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

产品经验3年前 (2021)发布 流光
2.2K 0 0

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

产品视觉设计大致是由80%产品界面和20%运营设计组成。80%的产品设计,属于理性,有规律的部分;而20%运营设计,属于感性,表...
实战案例
互联网时代的人们早就受够了信息爆炸,我们每天都会经系统推送、应用通知、微信、电话、短信等各类渠道收到大量消息。有多久...
EDM
一、色彩 DNA 文档 概述 根据品牌多年来的设计沉淀以及目前业务的各个使用场景,我们对品牌色彩的DNA进行了重新的探索和定义...
产品设计规范
今天跟大家聊一聊如何制定iOS的系统图标栅格系统的那些事。众所周知,在图标设计中都会使用统一的系统图标栅格系统。那么iOS...
App图标
@苏大牙牙牙 :文章包括品牌理念、品牌识别、APP大改版、品牌延伸。 △ 点击查看完整视频 一、项目背景 百度网盘是百度提供...
品牌升级
如何验证我们的对话设计是适宜的?这时候就需要设计走查。为了让走查过程中少出错,我们可以在设计语音体验时,考虑以下几点...
经验分享
从16年刚到 ofo 的时候我心中就有一个巨大的疑惑,像 ofo 这样一个简单的出行类产品还能怎么设计呢?纵观周围很多出行类 App...
情感化设计
@龙爪槐守望者 :经常能看到在很多 App 的 Navigation Bar(iOS 叫导航栏,安卓叫 App Bar /应用栏)下方、列表上方或者页面...
UI控件