更好的表单设计,从这6个设计策略开始

2017/09/04 8772

在网页设计领域中,表单设计始终是绕不过去的话题。有的表单设计的很无聊,但是有的表单却设计的很有趣,但是无论好坏,用户总得将表单填完,才能进入下一个环节,所以,表单的交互和体验无比重要。和其他的设计工作一样,表单是设计师/产品和用户进行沟通的桥梁,创建易用、高效的网页表单,用户填写越方便,转化率也就越高。

表单那可以有趣,可以便捷,真正的难点在于让整个体验足够优秀。用户不会因为有趣而填写表单,他们要的是表单填写之后的结果。因为信任你的网站或者APP,用户才会将他们的信息通过表单提交上来,但是由于种种原因,这些信息的呈现、传递和保存最终成为了设计师和用户两方的痛点。强化表单的功能性,不仅需要更优秀的视觉设计,还需要强大的代码在后方支持,同时还得对用户有足够的了解。今天的文章,为你提供一些设计技巧,帮你提升表单的用户体验和转化率,希望对你有所帮助。

我们拿一个旅游门户网站的注册流程作为实例,帮你更好地理解这些技巧。也许这些技巧听起来很简单,但是魔鬼常常藏于细节,多加小心并不为过。通过这个注册流程实例,我们将会说明六个表单设计的实用技巧。

1、人性:围绕着“信任”来做设计

无论是设计师还是用户,都在追求更好的体验。但是产品体验好始终都是有一个重要的前提:目标受众能够充分地理解设计元素和其中内容,再才谈得上体验是否足够优秀。此外,在设计的时候,要有目标地让用户同品牌本身的产生情感关联,而不仅仅是数据和程序驱动下的流程推进,冰冷的过程所带来的疏远感对于产品本身是不利的,个性、情感化的呈现,会有更好的效果,但是需要足够的时间来打磨。

同时,值得注意的地方在于,插画、图像和图标这样的视觉元素,应该是内容的补充,这个时候不应该喧宾夺主。在下面的案例当中,我们使用了图片来搭配表单。

2、简明:简单的布局让信息更容易被获取

人的眼睛在阅读内容的时候,其实非常的挑剔。如果使用了太多的色彩和设计元素,用户一定会注意到它们,同时所带来的问题,就是用户难以将注意力集中在关键的信息上了。

浅色的背景和更容易被聚焦的主体内容搭配在一起,是有效的设计策略,合理地加入一些描述性的内容,帮助用户更好地理解信息也是个好主意,这可以提升整个流程的速度,增加表单的直观性。在这个案例当中,诸如“Username”和“Password”都作为描述性的文本,来帮助用户了解各个字段需要填写的内容。

3、易懂:提升表单的可理解性

表单是否能够被用户所理解,是否为用户所信任,是设计者在这个环节需要考虑的首要问题。每个步骤都要足够的诚实,并且提供充分的说明,这样可以让用户保持耐心,并且做足准备。相比于隐藏了关键步骤,相对冗长但是内容充分的表单,更值得信任,并且不会让人沮丧。不过请注意,表单应当尽量提供绝对必要的信息,充分并不意味着要多而全,“少即是多”的原则同样在此适用。

在这个实例当中,用户轻松地了解,他们需要通过“Identify”、“Address”和“Payment”三个步骤,就能完成这个流程。

4、引导:报错信息要微妙地处理

无论表单中所承载的信息有哪些,都应该让用户感受到引导感。用户所填写的信息,是你或者你的产品所需要的,所以在设计表单中内容的时候,保持适当的“对话感”。当用户填写的信息出错的时候,尤其如此,不要让用户觉得这个错误很可怕,而是通过引导,降低用户的沮丧情绪,尽快修改,完成填写。

在下面的案例当中,用户填写出错并且以“Sorry”来开头,这种委婉的表述方式来缓解用户情绪,然后提供有用的建议,帮助用户解决问题。

5、陪伴:始终为用户提供帮助

当用户在表单填写过程中出错,有用的帮助能够让用户更加舒适,增加信任感。帮助可以是任何形式,无论是弹出框、faq页面,还是即时通讯聊天框,都可以。

在下面的实例当中,我们采用了聊天对话框来为用户提供帮助,这样的设计让用户有一种“始终有人在旁边提供帮助”的观感,如果出错的时候,主动为用户提供帮助信息,则能够进一步强化对用户的信任感。

6、奖励:完成任务之后祝贺用户

当用户完成任务之后,获得祝贺,大脑中分泌多巴胺,从而获得愉悦感和满足感。这种现象是得到临床验证的。无论是真实的祝贺,还是完成任务之后的系统提醒,都会让用户产生这样的反馈。游戏化设计当中,常常会采用这样的机制,看似获得更多成就,实质上是催发用户体内产生多巴胺这种“化学奖励”,产生快乐的感觉。

虽然很多时候,UI所提供的祝贺和奖励仅仅只是一个简单的“Thank You”,但是在用户那边则获得了良好的感觉和真实的笑脸。

结语

表单可能是网站或者APP当中最简单、最常见的部分,但是它在整个体验流程和产品当中,都起着关键的作用。最后再提醒一句,让表单保持简短,和用户保持对话,好设计也许会给你带来意想不到的效果。

【结合这些技巧,设计更好的表单】

  1. 《设计表单的时候,为什么悬浮式标签体验更好?》
  2. 《实战经验!如何做好网页后台的表单和表格设计?》
  3. 《16个优点告诉你,为什么表单设计应该用这个方法?》
  4. 《这7个秘诀,能帮你做出体验极佳的网页表单》

原文地址:uxplanet
原文作者:Lollypop Design Studio
优设译文:@陈子木


本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/design-better-form-6-tips

好文 界面设计 UI 平面设计 转场动效 交互设计师 设计师 设计师专访 扁平化设计 排版布局 设计流程 职场 用户体验设计 素材下载 视觉设计 配色 web前端开发 设计规范 海报设计 AI教程 产品设计 字体下载 设计理论 设计趋势 神器下载 动效设计 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 用户体验 优秀网页设计 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里