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

在大部分用户眼里,表单填写一直是件很枯燥的事情,因为人们总希望用最少的付出换取最大的回报。

当我们在填写表单时,会变得不耐烦,因为可能会遇到这些情况:

  • 不断地输入各种信息不知何时是尽头;
  • 发生漏填错填却不被及时告知;
  • 填写一半遇到干扰(比如电话)再进入发现内容丢失…

以上都是真实发生的场景,这些bad experience令用户在表单填写时不断感到挫败然后放弃。

基本上,当一页密密麻麻需要填写信息的表单出现在用户面前时,他们的内心一开始都是拒绝的。而填写过程如果给做上弹幕可能是这样的:

另一方面,视觉设计师在项目中遇到表单填写的设计需求也容易缺少激情,更愿意在其他地方大展拳脚,进行激动人心的尝试。表单设计是否在产品体验中不重要而因此不被重视呢,答案必然是否定的。

想象一下著名博客Medium在手机应用上仅一根下划线设计就花了整整31天,每一个精雕细琢的细节都是帮助产品体验前进的一小步,最终成为产品拉开差距的一大步。除了作为最考验用户对产品信任感与耐心的环节,在垂直服务行业,很多的表单填写都是跟业务收益紧密捆绑的!

在移动端,表单填写设计体验的挑战很多,界面区域变小,场景碎片化,用户的操作随时被打断,表单设计更需要被尽可能地优化以提高成功机率。

前言至此,因为之前的设计项目中涉及到了移动端表单填写内容的设计,在体验了一些产品表单设计的同时,也做了一些优化的思考与尝试,最终结合具体的设计尝试和案例总结出一些方法。

然后发现即使到了视觉设计阶段,表单设计的优化空间依然如此巨大。如果你也在进行“boring”的表单设计,或许能够从接下来的内容获得一些思路。

缓解内容压力

减少步骤是最重要的表单设计最基础的原则,PM或交互同学会在低保真阶段尽可能地做简化。而到了视觉设计阶段(内容已不可删减),我们还可以用视觉手段让大量的枯燥内容看起来更加轻量化。比如

优化排版:

1

可以理解为一口气吃不成胖子,要想让用户听话,还得循序渐进。最被拒绝的表单除了个人资料填写场景还有评价反馈场景(比如JD和大众点评)。Gogobot在邀请用户进行评价时,即使在一个页面上操作,也聪明地通过高斯模糊后续内容缓解用户的压力。只有通过完成上一步的操作才渐进展现更多的选项,让内容的增加顺其自然。图中截取的是入住某酒店后的评价场景,选择你对酒店适合入住的人群标签(点击背包客标签)后,详细的评价邀请和后续的分享内容才会清晰的展现出来。

步骤可观察

在web端,由于屏幕区域开阔,进度设计比较成熟,一般会标明处于第几步,甚至对每一步操作添加解说。进度展示让用户在一开始和过程中随时了解操作的成本和进程,整个过程令用户不会感觉过于被动。比如淘宝买家退款的流程,进度条的设计清晰地告知用户退款流程已经进行到了哪里。

1利用动效

动效是个好工具,使用得当会让用户感觉产品速度很快,很灵活,很年轻,可信任。这是较于在银行从工作人员那里拿到几张密密麻麻毫无设计感的表单,在界面上填写表单的优势之一,这也正是时代的进步之处。

1

如果你在银行填完了几张表单却被工作人员粗暴地丢在一旁,会不会有些担心被弄丢?同��在界面上,如果你进行了提交操作,如果没有良好的反馈也会担心提交是否成功吧。

比如某宝成功拍下订单会出现包裹整装待发令用户产生踏实感,这里既然是申请银行卡不如也向用户展示下之前辛苦填写的战利品吧~提交成功的字段加上专属银行卡从订单后弹出动效,有种“耶!搞定!”的暗示(几乎忍不住要打个响指)。

1

这次的表单设计探索大致如此,然后发现看似boring的设计需求原来也有可以做得很high;看似毫无改进的表单也可以变得很优雅高效,收获满满~

以上的尝试和小结有些可能偏离纯视觉的范畴,但在实际工作中我们都发现往往很难明显做区分。如果只是限定在自己的职责范围内干活,也只能说是尽责,长此以往沦为美工的那天也就不远了吧…很多时候就是大家都多想一点,多讨论一下,多尝试一稿。用存在的问题驱动自己,逼迫自己从不同角度思考手上的视觉方案,并真正体会实际的使用场景,最终收获的也会是比较实际的成效:)

作者:koko口口

来源:http://www.jianshu.com/p/8b06271adf16#

免责声明:以上内容(如有图片或视频亦包括在内)有转载其他网站资源,如有侵权请联系删除

为你推荐
加载中...
咨询热线(9:00 - 18:00)
0755 - 29812418
微信公众号二维码
微信公众号二维码
微信公众号
返回顶部