恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何提高长表单操作效率?
0.0°
2019-06-19 原创文章 经验/观点 举报 3284 50 22 0

最近在做长表单的设计,一些心得整理下来和大家分享。

Image title


当表单信息较长时,用户在使用时往往都会感觉很吃力,提高长表单的操作效率显得格外重要。我最近刚好项目中在做表单界面,于是把项目中遇到的问题总结出来分享给大家。


目录


一、什么是表单

二、长表单设计常见问题

三、如何提高长表单操作效率



一、什么是表单?


表单可以收集用户的信息和反馈意见,是用户和产品管理者之间沟通的桥梁。表单从结构上可以分为:表现层、交互层、反馈层。

Image title

其中表现层主要由文本域、选择框、标签、地址、按钮等表单对象组成;交互层主要由键盘、日期控件、选择控件、调节滑块等对象组成;反馈层主要由实时反馈、结果反馈等对象组成。


在我们日常生活中越来越离不开表单,比如订外卖、发布个人简历、打车、登陆注册等都需要用表单来完成。



二、长表单设计常见问题


表单不管是对用户还是产品方都很重要,但是当表单信息较长时就会出现问题:

Image title

当你的表单出现这些问题,你的用户心情肯定不太美好,如果产品不是唯一的,那么他们就会弃你而去了,就算是唯一的,但是也免不了吐槽你几句。但不管怎样像QQ这样的产品都在不停的优化用户体验,我们的产品要留住用户也是需要不停优化。



三、如何提高长表单操作效率?


当表单过长往往会给用户造成压力,从而放弃操作,而我们常说用户体验主要指以用户为中心进行产品设计,其目的是满足产品需求、符合用户习惯和认知、能高效愉悦的完成操作。达到这些目的我们才可能提高整体的操作效率。


具体表现在框架层展示清晰、表现层展示合理、交互层操作高效、反馈层实时提醒。根据这些特点我整理了8条优化建议。


1、将长表单分步设计

2、将相关的信息进行分组

3、突出核心信息

4、信息排序遵循用户习惯

5、优化设计细节,提升好感度

6、采用合理的输入方式

7、寻找更高效的输入方式

8、及时反馈



1、将长表单分步设计


当表单较长时,将表单信息进行拆分,并分步设计,可以有效降低用户输入压力。就好像同样的人数排队,一个队排成长长的1排,一个队分成了2排,你是不是更想排第二队的呢。


同样有效拆分长表单会让用户觉得这个操作并不太多,还可尝试着去完成,如下图所示。

Image title

Image title

Keep采用标签导航进行分布设计、58同城采用下一步的方式进行设计,都很好的将界面起到了简化作用。



2、将相关的信息进行分组


信息较多时,将相关信息进行分组可以减轻用户输入压力,比如你要去超市购买鸡蛋、牛奶、苹果、香蕉、西红柿、酸奶、黄瓜这7样东西,如果直接记你可能很快就忘记了,如果我们将其分为蛋类、奶类、水果、蔬菜这样是不是就轻松很多。


同理在设计时我们可以将属性相同的归为一组、类似功能的归为一组,这样从视觉上好像信息变少了,用户才有完成的动力,如下图所示。

Image title

58同城将信息分为基本信息、租金详情,同时信息内容将相关联的厅室、朝向、楼层分为一组,虽然信息差不多,但是58看上去简洁很多。



3、突出核心信息


在界面中将核心信息进行差异化设计,可以很好的引导用户视线,这里的差异化设计可以是字体加大加粗、添加背景色、色彩对比、留白等。

Image title

饿了么订单列表的收货地址、送达时间、支付方式就采用了差异化设计,选择收货地址将字号增大、并放置在列表外的蓝色背景上,送达时间和支付方式的从参数采用蓝色文字。这样不仅将模块之间有了区分,同时在表现形式和用户接受信息上都有加强。



4、信息排序遵循用户习惯


信息排序指每个模块的内部信息最好能按照用户习惯进行排序,比如填写个人信息时,一般顺序为姓名→当前公司→职位,如果你把这个位置颠倒了就打破了用户的逻辑,会增加用户思考的时间,如下图所示。

Image title

智联招聘的个人信息界面排列顺序为姓名、公司、职位、所在地均是围绕个人信息逐步填写。



5、优化细节提升好感度


表单细节的设计主要需要注意列表对齐方式、文字层次等。


1)标题和暗示选用适合对齐方式


标题和暗示对齐方式一般有三种,左对齐、左右对齐、上下对齐。从下图可以看出左对齐和左右对齐不及上下对齐视觉流畅。但是其占地小,因此这两种用得比较常见。一般输入信息较多时可采用左对齐、选择信息较多时采用左右对齐、信息较少时采用上下对齐。

Image title

2)文字要有层次


设计时文字大小、默认颜色、输入颜色、强调颜色都需要设定好,这样可以提升表单细节的层次。

Image title


6、采用合理的输入方式


输入方式也可交交互方式主要有,键盘、快捷标签、滑块、下拉控件、输入框等。采用合适的形式可以节省用户输入时间,如下图所示。

Image title

转转输入卖多少钱时直接采用联动的数字键盘,让输入一次完成,不用来回切换。当需要输入详情时直接调用文字键盘,同时还设置了快捷标签,让编辑更顺畅。



7、寻找更高效的输入方式


当输入样式设计后,我们在追问下这种输入方式真的是最优的吗。还有其他形式可以取代吗?比如加入语音输入、摄像头扫描、联动弹窗等。

Image title


8、及时反馈


及时反馈可以避免所有信息都填完之后在弹出toast提示不通过的情况,同样能提供操作效率,如下图所示。

Image title

58同城当我输入的数字为一位数时,他会提示租金最少输入两位,这样可以有效的防止用户错填,给用户更清晰的指示。


四、总结


本文主要和大家分享了提高长表单操作效率的8个优化方面。

1、通过将长表单分布设计、将相关的信息进行分组让框架层展示更清晰;

2、通过突出核心信息、信息排序遵循用户习惯、优化细节提升好感度让表现层展示更有层次;

3、通过采用合理的输入方式、寻找更高效的输入方式让交互层操作更高效。

4、通过及时反馈让反馈层实时提醒,避免错误操作。



原文链接: https://mp.weixin.qq.com/s/f3o2eb0aZZDIiTXyd-ifzA


参考引文

http://t.cn/RgJPuuK经验分享:简化输入,让网页表单更亲切

http://t.cn/EKTmQOC以用户视角出发的表单之旅

http://t.cn/EKTmuN8如何通过设计的手段来提高表单的录入体验

http://t.cn/EhMmZPf 表单设计需要注意

http://t.cn/Rgx3Pr4如何高效完成表单输入?来看这个实战案例!

微信公众号:设计早8点

更新:2019-06-19

收藏

50人已收藏

风筝KK

微信公众号:设计早8点

  • 39

    作品

  • 5366

    粉丝

  • 59

    关注

  • 以字段映射为例,带你了解B端页面该如何设计!
  • 【B端】字段映射如何设计?别被大厂方案禁锢了
  • 小团队有必要建立完善的设计体系吗?
  • 如何提升B端界面的精致度,做到这两点就够了!

    猜你喜欢

      2019-06-19 原创文章 经验/观点 举报 3284 50 22 0

      如何提高长表单操作效率?

      0.0°

      你确定要举报如何提高长表单操作效率?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年06月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      22
      50
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录