设计一份优秀表单,需要注意的三个要点

@呆呆U理 在我们的生活中经常会接触到表单,不过老实说,它们的使用体验经常让人无奈,比如在一些平台确认飞机票、检查购物清单或者是登录页面的设计等等。所以我们都希望表单能被设计的更好用一点。

虽然在这个时代,我们对表单的设计在交互方法上有更多的技术选择,包括人工智能、生物识别等,但是如今我们能看到的大部分表单的基本结构与设计方式都还是处于纸质时代的技术层面上。

从本质上说,好用的表单应该是易于理解且让人感到舒适的。

易于理解的表单能够帮助用户更好的对它们进行填写,这能让用户觉得是在跟表单进行交流,而不是单向的询问。

让人感到舒适的表单让用户感觉到自己得到了。这种表单会在用户填写的过程中犯错误时,会替用户找到错误的位置和原因,并帮助他们进行修改。

下面有三个注意点,告诉你如何设计出这样的表单。

1.尽可能删除表单中的多余字段,直到不能再删除为止。

在上面的例子中,Airbnb 允许用户通过邮箱进行注册,但提供的字段过多,没办法让用户轻松填写。虽然我知道有时候要去掉表单中的某些项目是不可能的(出于一些原因),但是我们应该尽量做到这一点。所以,要想让 Airbnb 这份表单做到井然有序,可以从以下几点做起:

  • 修改标签,删减掉额外的无用字段:用「Full Name」字段替代「First」与「Last」这两个字段(即用「姓名」一个输入框替换掉「姓」与「名」这两个输入框);
  • 某个字段信息对于用户来说是否有必要在注册表单中进行填写(如让用户使用邮箱注册,那么对于「姓名」字段是否可以在注册完成之后的「个人资料」中再填写)?
  • 与领导或产品相关人员协商,将某字段删除?(这点很难做到,往往需要数据或其他资料证明这个字段确实是无用的)

除了对表单进行简化之外,我们还可以通过与第三方社交平台的合作来让用户更方便的进行注册,我们总要思考如何将表单最简化。这就像是 Antoine de Saint-Exupery’s 的名言说的:完美的作品,不是对其中的内容做到无以复加,而应该是不可减少。

2.给表单的设计加入微交互

其实市面上已经有许多新的表单设计形式慢慢普及开来了,但是要在使用之前思考为什么你的表单需要使用它们。

这些例子中的微交互非常有趣!它们可以提起用户的兴趣,提升用户注册的转化率。其实还有许多其他的微交互方式,也会让表单变得很有趣。下面这个链接中就可以看到不少有趣的关于输入框的动效形式。https://tympanus.net/Development/TextInputEffects/

但是,你需要记住你正在为谁而设计,无论是否对表单加入微交互,都应该考虑清楚它们是否适合你的项目。

3.从全局出发,思考表单的作用

第三点是最具挑战性的,也是表单设计工作中最具价值的一个点。设计出好的表单不仅仅是把点停留在元素或组件上,还应该找到是什么原因导致用户在使用的过程中遇到了问题,乃至在填写表单的过程中被困扰。

虽然这说起来很简单,好像就是让用户注册这款产品或者说让用户访问站点并创建账号。但是用户为什么要这么做呢?你是否有想过用户在使用你的产品时会遇到什么问题?以及为什么用户需要填写这份表单呢?这是设计师应该思考的。

思考你的表单的设计策略以及它如何融入你的项目中,这将会真正地让你的工作、团队以及目标用户受益。

我不是表单设计方面的专家,甚至在设计领域我也没有对这方面进行深入的学习与探索,但是希望我写得这些能帮助各位开始对表单设计起到重视的作用。

总结

其实这篇文章就说了一个道理,就是在形式上简化表单的内容,而这个前提是在业务上梳理清楚用户为什么要使用这个表单的情况下,同时它能帮用户解决什么问题,以及这个表单对于你的产品或项目起到了什么作用。

看起来很复杂,用一句话总结就是:先找到设计表单的目的,这样你就知道如何设计了。

封面作者:Patryk Zabielski

uxplanet

译文地址:知乎

作者:Ken Lee-Sanekata

译者:呆呆U理

(0)

相关推荐

  • UX设计秘诀之注册表单设计,细节决定成败

    说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非用户所需.他们需要的仅仅只是能够尽快买票.聊天等服务而已.如此,注册表单的填写,似乎就成为他们不 ...

  • 优秀表单设计应遵循的原则

    小编:表单是网站的重要组成部分.表单的目标是引导用户沿着一条路径,提高用户填写表单的效率,防止他们出错或中途流失,提升愉悦度及转化率.最好的表单用最少的文本来引导用户. 设计师常犯的错误,以及正确做法 ...

  • 【干货】5大移动端表单设计原则及案例赏析

    当我们在享受手机App为生活带来的巨大便利时,无形中已经经历了多种多样的移动表单设计形式.而表单设计又是移动应用设计中与用户产生最多交互的步骤,包括用户注册.订阅服务.用户反馈.问卷表单.买卖交易等等 ...

  • DW软件怎么在网站中制作简单的表单

    在DW软件制作网页中,编辑表单是必须学习的内容,所以今天就由小编来为大家介绍DW软件怎么在网站中制作简单的表单. 操作方法 01 第一首先在DW软件创建站点. 然后再新建一个HTML文件. 02 第二 ...

  • FineReport怎么进行表单设计

    FineReport是一款报表软件,它的报表操作功能是报表软件中的佼佼者。下面小编就为大家进行介绍一下FineReport简单的一些表单设计功能,希望能帮到大家 新建表单点击文件>新建表单,如下 ...

  • FrontPage基础教程表单的设计

    制作搜索表单 对访问者来说,在一个大网站中查找文章会很不方便,这时我们可以创建一个搜索表单.执行"插入/Web组件"命令,打开"插入Web组件"对话框.在左侧窗 ...

  • 9个新人容易中枪的表单设计问题

    在网站中,表单是用户跟我们沟通的主要桥梁.透过表单,用户可以买东西.订阅新文章.更新资料--可以说网站最重要的功能,都是靠表单来完成.然而这个跟顾客打交道的重要环节,我们真的有做好了吗?以下分享的是一 ...

  • 44个漂亮的注册表单设计

    小编:注册表单在网页应用中十分重要,好的注册表单是可以让用户喜欢使用,大大的提升用户体验的.所以把注册表单设计好也是非常重要的一件事.今天就为大家带来44个漂亮的注册表单设计,看上去真的是有种赏心悦目 ...

  • 表单设计:一页只做一件事

    小编:形形色色的表单我们几乎每天都会接触,如何让用户顺利的完成表单填写.提交是我们应该想的事.一起去看看表单最高的工作效率:一页只做一件事. 2008年的时候,我在*Boots.com*工作.他们想做 ...