快捷搜索:

7招表单设计设计师方法提升表单体验

近来在做认证的优化,时代涉及到一系列的表单设计。在制作历程中,发明我对付提示语、按钮的位置、是否放步骤条等等都无法做出快速的判断,这阐明我对这部分的观点是对照隐隐的,以是就想针对表单的体验设计做一个进修和总结,加深自己对表单设计的理解。

一、什么是表单

表单在网页或 app 中主要认真数据采集的功能。也便是说,大年夜部分起到了数据采集功能的模块,我们都可以称其为表单。表单本身只是一个数据采集的对象,本身不具有属性,它可以被机动运用于多种功能模块中,例如用于登录注册模块的信息采集,评论的编辑页,同伙圈的宣布页等。

△ 淘宝

从视觉体现上分类,一个表单有3个基础组成部分:

标签:奉告用户响应的输入元素是什么。

输入域 :一样平常包孕文本框、单选框、复选框、下拉选择、文件上传、开关、步进器、步骤条等。

表单按钮:包括提交按钮、复位按钮和一样平常按钮。

此外还可以有:

填写赞助,如「请输入11位数的手机号码」。

反馈:「提交成功」「收集差错」等。

注:表单可以包孕以上组成部分,但不是必然要有,比如提交按钮,在自动保存或触发的表单页面就可以没有提交按钮。

如图 Twitter 填写验证码表单中没有提交按钮,验证码输入6位后自动进行校验。

1. 列表VS导航VS表单

由于有些环境下,列表、导航与表单的体现形式可能异常相似,以是我们可能会弄混他们。

列表:是一种数据项构成的有限序列,即按照必然的线性顺序,排列而成的数据项的聚拢,在这种数据布局长进行的基础操作包括对元素的的查找,插入,和删除。

导航:本意是检测和节制工具从一个点到另一个点的历程。在网站或 App 顶用于定位用户当前所在页面位置,以及向导用户从当前位置移动到其他位置。

表单:在网站或 App 中作为数据采集对象。

从定义可以看出,列表是一个数据项的聚拢,是排列要领,导航和表单是有特定感化的对象。导航和菜单可以用列表的要领表现,但列表不必然是导航和表单。此外,导航和菜单可能体现形式相似,但并不是同一种器械。

总之,判断一个页面是否是表单页,关键看是否发生了数据的采集,从体现形式上可以看是否有表单域常用的控件,如文本框、单选多选、下拉菜单、开关等,以及是否有提交/清空等按钮。

二、若何提升表单体验

从本色上说,好用的表单应该是易于理解且让人认为舒适的。易于理解的表单能够赞助用户更好的对它们进行填写,这能让用户感觉是在跟表单进行交流,而不是单向的扣问,让用户感到到自己获得了关注。

1. 尽可能削减不需要的表单项目

判断某个字段信息对付用户来说是否有需要在表单中进行填写,每多一个项目必要填写,就有可能流掉一部分用户或掉去一部分好感度。虽然我知道无意偶尔候要去掉落表单中的某些项目是弗成能的(出于一些缘故原由,如安然性等),然则我们应该只管即便做到这一点。例如注册表单,如让用户应用邮箱注册,那么对付用户的姓名字段是否是注册的必选项?假如不是必选项是否可以在之后的信息完善中进行填写。

例如 Airbnb 的注册表单,Airbnb 容许用户经由过程邮箱进行注册,然则必要一并填写姓名和生日,姓名和生日并不会影响用户对网站进行浏览, 并且涉及到小我隐私,用户可能并不乐意在不认识产品的时刻就填写,以是没有需要在注册的历程中进行填写。注册时只必要邮箱和密码,而姓名和生日在必要时再进行完善体验会更好。

2. 尽可能削减表单中的多余字段

表单供给的字段过多,让人第一眼就生出「很多多少信息必要填,好麻烦」的沉重感,乃至于用户在填写历程中无法维持好心情。假如是登录注册的表单,就有可能是以流掉掉落一部分用户。以是我们应该改动预添补内容,尽可能删减掉落额外的无用字段。

亚马逊注书页面的改版充分表现了这一点,旧版中,标签内容用了描述性的语句,然则着实短短几个字已经足够注解意思。

用「姓名」一个输入框调换掉落「姓」与「名」这两个输入框;用示例或者提示简化纯真重复的预添补内容。

3. 选择最简单的输入要领

用户没有我们想象的那么勤劳,我们必要做到的是让用户最方便最快速的完成内容的输入。普通的来说,能不填写就不填写,能选择就不要输入,能选择一下来实现的就不要选两下。

△ 美团外卖/支付宝/Twitter

例如,美团外卖在选择收货地址时,自动勾选性别,由于这个选项至少可以方便一半的用户少进行一项选择,即就是性别选择差错也不会对收货孕育发生什么影响;支付宝的充值中间自动选择本机号码,并且将重置的金额用卡片的形式变现出来,不用让用户输入号码或者输入充值金额,用户只必要经由过程几回简单的点击即可完成选择,异常方便;Twitter 输入验证码后自动进行检测,而无需用户点击「提交」按钮。

4. 一页只做一件事,不要一次性展示整个内容

有的时刻表单的内容可能异常长,必要用户进行大年夜量的填写,这个时刻我们要留意,不要一次性把所有必要填写的内容都展示给用户,这样会吓到他们,让他们感觉必要在这个表单上花费大年夜量的光阴,有可能就放弃填写了。

你可以回顾一下当你在银行解决营业时,柜员丢给你一张这样的表单你心坎的第一感到必然不是预约的,假如不是有供给的示例,真的不知道该若何下手。

当你在 Airbnb 申请成为房主时,也必要填写大年夜量的出租信息。而 Airbnb 很奇妙地把左边长长的表单拆分成了多个步骤,在单个步骤中的三个关联的选项也是一条一条慢慢呈现的,给人异常连贯顺畅的感到。每个页面只回答一个内容,也让用户得以放松心情,专注于当前选项。

△ Airbnb

近期我们发明,很多产品的手机号注书页,手机号输入与验证码输入/密码输入也进行了分页,当这三个项目在一页时,用户必要在输入手机号码落后行等待,然后才能继承输入,让用户孕育发生这个表单进展迟钝的感到,分开后,用户在一页只必要填写一个或两个内容,跳转的光阴又掩饰笼罩了一部分等待验证码的光阴,会感觉进展更快更流通。

△ KEEP

5. 选择合理的标签对齐要领

顶对齐 vs 左对齐 vs 右对齐

跟一样平常设法主见相反,在输入框上面放置标签并不是可用性最好的位置。你无意偶尔候盼望用户尽可能快地填写表格,但有些时刻你必要有意让用户慢下来,以便他们用心地把稳并涉猎标签。此外,把长表单设成一个长列,让用户向下滚动页面。这比把表单分成列,每样都雷同要好。每一种对齐要领都有它的优点和毛病。

△ Matteo Penzo根据表单标签对齐要领钻研出的光阴表。

小结:

盼望用户快速扫描表单,把标签放在输入框上面,这种结构更便于眼睛向下扫描。

盼望用户仔细的涉猎,把标签放在输入框的左侧,这个结构扫描较慢,向下向右(Z的外形)的眼动。

6. 选择相宜的按钮位置

表单里可能有很多种类的按钮,我们在这里只说最紧张的「下一步」、「完成/提交/保存」等提交表单类型的按钮。

最常用的位置是右上角和下方。在右上角平日是翰墨按钮,而鄙人方一样平常有:固定在屏幕底部、跟随键盘移动、随表单移动。

关于保存功能,阿里设计师总结了一份超全的干货:《关于保存功能的设计,这篇可能是最周全的总结!》

右上角翰墨按钮

右上角翰墨按钮,最常见的一种按钮形式。

△ 美团外卖/微信/Facebook

上风:不影响用户对表单内容的留意力;用户在完成表单时,视线会从下向上转移,有助于用户作进一步反省。

适用于:

表单项目少,在一屏内完全展示;

内容繁杂且紧张,必要用户专注于表单本身,认证填写。

固定在屏幕底部

△ 闲鱼

上风:

用户在任何光阴都可以点击;

强烈吸引用户的留意力,向导用户点击。

适用于:

表单内容紧张性不高,不必要整个完成,也不必要过于仔细,必要匆匆进用户快速完成提交。

毛病:可能会被键盘阻挡。

随键盘移动

△ Twitter

上风:

间隔键盘位置近来,方便输入完急速提交;

不会被键盘阻挡。

适用于:

表单内容以输入为主,简单不易掉足,输入后必要快速提交。

置于表单底部

△ Twitter/美团外卖

上风:

相符用户从上至下的涉猎偏向;

可以匆匆进用户完成全部表单。

适用于:

表单内容少于一页,按钮最接近表单;

表单内容很长,必要向导用户整个填写。

四种常见要领各有上风,必要根据实际环境选择最得当的要领。

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

着实市道市面上已经有许多新的表单设计形式逐步遍及开来了,然则要在应用之前思虑你正在为谁而设计,它们是否得当你的项目,你的表单是否确凿必要应用微交互。

△ Health App Login by Jakub Antalík in Health app on Mar 10, 2016

这些例子中的微交各异常有趣,它们可以提起用户的兴趣,提升用户注册的转化率。

总结

一个表单是否「好用」,视觉体验只占了整体体验一部分,低级设计师能很随意马虎的复制一个高档设计师设计出的表单的样式,然则此中的思虑却无法直接拿来。作为UI设计师,我们必要服膺的是,经由过程优化视觉体现提升表单体验只是表象,更多是要斟酌到表单终极要帮用户办理什么问题,表单对付你的产品或项目起到了什么感化。换言之,先想好为什么,再想怎么做。

以上是我小我的一些见地和总结,如有纰谬的地方迎接斧正和评论争论。

迎接关注作者的微信"民众,"号:「海盐社」

您可能还会对下面的文章感兴趣: