- 设计理论 -

4步教你提升表单设计的用户体验

作者:姜正 原文出处:海盐社
2018-08-21

25.jpeg

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

目录

1.表单的目的

2.优化信息层级

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

4.及时的状态反馈

5.设计符合当前场景以及动态效果

6.总结


表单的目的

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

优化信息层级

优化信息层级,我们需要将信息分类,并避免不必要的的信息出现;同时要保证设计样式的统一。

我们以 SNKRS 和贝壳找房为例,SNKRS 的文字信息分类清晰,输入框的设计样式统一,按钮设计突出,为用户指出操作的方向。

贝壳找房的标题和选择标签区分明显,而且标签设计样式统一且与按钮的差异较大,不会给用造成过多的困扰。

640.jpeg


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

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

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

640-1.jpeg

第二种则是将复杂的表单进行分解成多张简单的表单,这样虽然增加了交互的步长,但是减缓了用户的操作压力,使得用户有动力完成之后的操作。

我们以58同城中发布闲置里的分类为例,分类的选项里分了多个页面,但是每个页面的操作只需要点击一下进行选择,不需要用户花大量的精力的思考或填写,这样瞬间提高用户的好感度。

640-2.jpeg


供及时的状态反馈

不能提供及时的状态反馈,是造成用户放弃当前任务最重要的原因之一!

发生状态反馈的情景基本有两种,一是我们操作错误的时候,二使我们操作成功的时候。

当用户操作错误的时候,我们要善意的提醒用户,并告诉用户如何执行正确的操作。我们以“网易有钱”为例子,当我们填写账单的时候,如果选择完类型之后,忘记填写金额的时候,就会弹出“提示信息”。

640-3.jpeg

用户操作成功时要给予用户操作成功的反馈,并鼓励和夸奖用户。

我们以闲鱼发布闲置页面为例,当发布成功的时候会提示用户发布成功,这里用户能明确自己的任务顺利完成。

640-4.jpeg


设计符合当前场景操作

设计符合当前操作场景,能增加用户的认同感,鼓励用户继续执行操作。

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

640-5.jpeg

流畅的动态效果

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


640.gif



总结

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


借鉴文章:

把一个表单设计到极致是怎样一种体验?

拒绝boring,一次表单设计探索



26.jpeg

海盐社.jpeg

喜欢就分享
精选评论
  1. 好多细节需要学哦!小伙伴们笔记走起!

    • UI乔帮主