大喜

前言

在日常 APP 的操作使用中,用户在使用 APP的场景是碎片化的,环境可能非常嘈杂,各种因素导致用户中止或放弃操作,所以表单设计的用户体验显得尤为重要!接下来我们看看通过什么样的方法能快速提高表单的用户体验。

 

目录

  • 1.表单的目的
  • 2.优化信息层级
  • 3.为用户提供便捷的操作流程
  • 4.及时的状态反馈
  • 5.设计符合当前场景以及动态效果
  • 6.总结

表单的目的

表单的根本意义在于帮助用户顺利完成当前的任务操作。 

优化信息层级

优化信息层级,我们需要将信息分类,并避免不必要的的信息出现;同时要保证设计样式的统一。我们以 SNKRS 和贝壳找房为例,SNKRS 的文字信息分类清晰,输入框的设计样式统一,按钮设计突出,为用户指出操作的方向。贝壳找房的标题和选择标签区分明显,而且标签设计样式统一且与按钮的差异较大,不会给用造成过多的困扰。

为用户提供便捷的操作流程

为用户提供便捷的操作流程有两种:

第一种是交互减步长,让用户在同一个页面中进行多种便捷操作。

我们以微信充值和转转中卖二手页面为例,微信充值将充话费和冲流量可以在同一页面中操作,用户不需要再跳转界面。转转的卖二手发布页面中,将用户经常描述物品的文字转换成标签的形式,用户点击标签直接显示,用户可以紧接着输入描述信息,这样减少了用户的输入成本,提高的用户的输入效率。

第二种则是将复杂的表单进行分解成多张简单的表单,这样虽然增加了交互的步长,但是减缓了用户的操作压力,使得用户有动力完成之后的操作。我们以58同城中发布闲置里的分类为例,分类的选项里分了多个页面,但是每个页面的操作只需要点击一下进行选择,不需要用户花大量的精力的思考或填写,这样瞬间提高用户的好感度。

提供及时的状态反馈

不能提供及时的状态反馈,是造成用户放弃当前任务最重要的原因之一!发生状态反馈的情景基本有两种,一是我们操作错误的时候,二使我们操作成功的时候。当用户操作错误的时候,我们要善意的提醒用户,并告诉用户如何执行正确的操作。我们以“网易有钱”为例子,当我们填写账单的时候,如果选择完类型之后,忘记填写金额的时候,就会弹出“提示信息”。
用户操作成功时要给予用户操作成功的反馈,并鼓励和夸奖用户。我们以闲鱼发布闲置页面为例,当发布成功的时候会提示用户发布成功,这里用户能明确自己的任务顺利完成。

设计符合当前场景操作

设计符合当前操作场景,能增加用户的认同感,鼓励用户继续执行操作。我们以 Luckin coffee 和飞猪旅行为例,在 Luckin coffee 的菜单页面中,当我们选择咖啡的种类和规格的时候,顶部会展示产品精美的样子,增添用户点餐的动力。同样飞猪旅行的定制旅行,顶部同样会以景点的精美的图片来吸引用户执行操作,让用户率先感受到景点风景来增添填写表单的动力。

流畅的动态效果

在填写表单时,流畅有趣的动态的效果能打破操作时的枯燥,为当前的操作增添趣味性。这里我们可以结合3D-touch 或长按等手势交互进行操作,如下图:

总结

看似简单的表单设计,稍有不慎就会变成用户的噩梦。这里我们再总结一下以上能提高用户体验的几个知识点,首先,我们要优化信息层级,删除不必要的信息;其次我们要为用户提供便捷的操作流程,帮助用户顺利完成任务;再者,在用户执行当前操作的时候,要给予用户及时反馈,操作正确给予用户鼓励,错误的时候给予善意的提醒和正确的指示;最后,表单的设计符合当前使用场景和流畅有趣的动效都是加分项,能给予用户情感上认同以及在操作时打破枯燥。

借鉴文章:把一个表单设计到极致是怎样一种体验?https://www.jianshu.com/p/06f1c20fde29

拒绝boring,一次表单设计探索https://www.jianshu.com/p/8b06271adf16 

原文地址:海盐社(公众号)
作者: 姜正

转载请注明:韦德1946 » 4步教你提升表单设计的用户体验

登录收藏

学UI就上韦德1946!越努力,越幸运!

“韦德1946www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
老板说你的设计没有视觉冲击力?你肯定没用这2个技巧老板说你的设计没有视觉冲击力?你肯定没用这2个技巧
被忽略的榜单设计被忽略的榜单设计
iPhone 2018 全面屏适配详解·含 XS、Max、MRiPhone 2018 全面屏适配详解·含 XS、Max、MR
顶部导航交互方式的灵活应用(以iOS系统为例)顶部导航交互方式的灵活应用(以iOS系统为例)
六种常见隐藏菜单六种常见隐藏菜单
多图案例:7种提升设计的实用技巧多图案例:7种提升设计的实用技巧
产品设计中的游戏化设计策略产品设计中的游戏化设计策略
目前市面上最完整的GIF导出方案目前市面上最完整的GIF导出方案
界面中被忽略的模块加载界面中被忽略的模块加载
搜索框设计样式与分析搜索框设计样式与分析