1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

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

时间:2020-06-30   分类:设计管理    作者:网络   来源:网络整理   点击:67

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

内容采集来自9fen.net

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

copyright 9fen.net

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

内容采集来自9fen.net

聚焦核心信息,减少认知成本

内容采集来自9fen.net

联动式键盘,提高输入效率 九分网络

实时反馈,传递规则信息

九分网络

合理规划层级,减少输入压力 copyright 9fen.net

从实际场景出发,抓用户核心诉求点

九分网络

专注独立任务细分 本文来自九分网络

一、了解在前

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

本文来自九分网络

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

www.9fen.net

二、聚焦核心信息

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

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

www.9fen.net

内容采集来自9fen.net

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

内容采集来自9fen.net

如何让用户在不同的状态下聚焦最重要的信息,减少认知成本成为设计的关键点。 www.9fen.net

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

本文来自九分网络

www.9fen.net

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

本文来自九分网络

信息输入前聚焦标签内容,输入中聚焦规则信息,输入后聚焦结果内容。让用户在不同状态下,聚焦核心信息,减少认知成本,提高输入效率。 九分网络

三、联动式键盘

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

九分网络

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

copyright 9fen.net

九分网络

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

内容采集来自9fen.net

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

www.9fen.net

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

本文来自九分网络

△ 联动键盘输入更高效 图片来源:赶集房屋发布 内容采集来自9fen.net

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

在58简历发布改版项目中,我们使用了同样的设计思路,改变用户的输入方式,提高用户输入效率。

copyright 9fen.net

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

本文来自九分网络

内容采集来自9fen.net

△ 联动式键盘输入更高效 图片来源:58创建简历 内容采集来自9fen.net

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

本文来自九分网络

四、实时反馈

无论是规则引导还是错误提示,都要在用户输入时实时进行反馈与提醒,合理有序的向用户传递规则信息,可以有效减少表单页面中无效信息的同时,使信息传递更加具有通用性和规范性。 本文来自九分网络

在联动式键盘中增加提示信息,帮助用户在输入过程中及时了解输入规则。 www.9fen.net

1. 规则信息提示

在用户输入时不再消失输入规则,而将提示文案与联动式键盘相结合,辅助用户正确完成信息填写。 本文来自九分网络

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

九分网络

本文来自九分网络

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

九分网络

2. 实时反馈

在用户输入过程中,错误是不可避免的。如何将错误以高度可见的形式实时告知用户,降低用户错误输入中带来的挫败感是尤其重要的。 九分网络

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

本文来自九分网络

www.9fen.net

△ 左图来源赶集 – 房屋发布;右图来源58 – 创建简历 内容采集来自9fen.net

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

www.9fen.net

九分网络

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

九分网络

3. 对话式引导

标签: 经验分享 优设 实战案例 用户体验 表单设计 改版设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----