关灯
开启左侧

如何设计不难用的UI表单?(理论篇)

[复制链接]
大菲 发表于 2019-4-1 10:30:43 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 

产品设计是一门杂学,牵涉的东西多如牛毛,从最基本的美学、人因工程学,商业思考到行为经济学、心理学。今年年初在诸多的因素影响下,想将自己在工作上的经验分享给大家。

表单(forms)是什么?

表单在数字产品设计里面,想必是每个产品设计师一定会碰到的设计样式(UI pattern)。常用于登入,用户回馈,填写用户资料等以及任何需要组织整理数据的手段。

表单设计当中,已经有许多已被A/B 测试验证过可以有效增进易用性(usability)并进而增加转换率(conversion rate),在设计任何表单之前,我们可以通过接下来要介绍的方法,去评估自己所设计的表格。

如何设计良好的表单?

在设计表单之前,我们可以把表单想成是一段对话,一段你跟用户之间的互动。假设你是一位销售员,在卖的商品的时候,第一个要建立的是什么?建立信任关系,有了信任关系之后,才会有后续的事情发生。

而设计表单也是一样的,表单的设计第一件事情就是要提供情境给用户,让用户觉得可以信任目前所看到的资讯,进而将自己的资讯提供给我们。尤其是现在个人资安问题日益严重,提供足够的理由及意图给用户,是设计表单的第一步。

接下来要做的事情就是,你要怎么去架构你的对话,举个最常见的例子Gmail 登入页面:

当用户点“登录 ”之后,会被带来这个画面,看似简单的画面,其实里面却暗藏了需多需要注意的部分,姑且分为九个部分去看。

1,因为在上一个页面,用户的意图是要登录Gmail,因此你可以看到google的logo以及标题为登录,首先建立信任关系。

2,建立完信任关系之后,接下来就是提供用户情境。继续使用Gmail则是让用户的意图获得足够的验证。

3,确认以上两项之后,用户就可以填入自己的信息。此时会发生许多有趣的事情,稍后在表单设计最佳典范会提到。

4,如果在当下用户没有办法获得或是忘记自己的信息,在此情境中,我们就必须提供足够的信息或是动作(Call to action)让用户可以重新取得所想要的信息。

5,第五点也是在传达Google这家公司是注重信息安全,也是建立信任的一环。当然还有其他意图,我们在这边就不细谈。

6,防止错误发生也是一个在表单设计中很常见的设计思维。用户在登录页面时,有可能不一定是想要登录,而是注册,此时我们就需要提供另外一个连结(entry point),防止他迷失在流程中,同理在注册页面也时常提供登录的连结。

7,在这表单最重要的两个动作是1)填入email. 2)继续。因此我们可以看到继续是采用主要动作(primary action)的表现手法,都是以次要动作(secondary action)去表达。

8,这边提供可以快速切换语言的功能,以免当下你所用浏览的语言并非你常用的语言。当我们为提供多国语言的平台做表单设计时,时常要考虑的就是多国语言的限制,比方说:俄罗斯文有时会比英文长很多,中文是方块字型因此排版上比较不会有过长的情况,但是字体、字距等等的其他变数也需要考虑的比较多。

9,尤其是在登录页面,很多隐私条款或是需要寻求协助,因为法规或法律的因素,会将这些资讯放在最下方以第三级动作(tertiary action)的方式呈现(是说大概也不到5 %的人会去仔细看条款)。在同一个画面中,最好不要超过三种层级的动作,来有效的降低视觉噪音(visual loudness)的比例。

短短的一张表单,竟然有那么多小细节必须被注意,可见产品设计师每天都在跟那么多小细节在战斗(泪)。

接下来为了让大家少走冤枉路,整理了一些**最佳范例(Best practices)**供大家参考。

设计表单的最佳范例(Best practices)

以下要分享的Best practices,是我认为产品设计师每天工作上常会碰到的问题。这些案例是由各家平台自行测试过后所呈现出来的结果,但不代表这就是对你的产品最好的了解,每一个产品特征都是需要被经过验证的,但是也因为有这些前车之鉴,让产品设计师在每天的工作中少走了一些冤枉路。

去除所有非必要的输入框:

Expedia 在经过测试后,发现加了一个额外的输入框(公司名称)在订购表单中,让expedia每年损失了一千两百万美元;Marketo也发现一些没必要的输入框,让他们的花费增加约25%。

当我们在设计表单时,要避免提供多余的输入框或是过长的表单,但万一我们仍然想要收集到使用者的资料,那可以使用条件式逻辑或是非必填的选项来增加完成率。

条件式逻辑是当用户回答某个问题在你预期的状况下,你可以显示后续你想要了解的问题,常用于满意度调查的表格。

上方置左的标签(Top-left aligned labels)可最佳化可阅读性及完成度:

Google的UX研究员发现将标签放在栏位的左上方优化了表单的完成时间,这是因为它需要较少的视觉专注。可以看到左边的图中,有较多的视觉往返,而改善后的表单中,是较为垂直的扫描。

现今已经很少看到左手边的表单设计,但是我们依然可以记住一件事情,就是如何降低阻力,在使用者经验里,是非常重要的一件事情。

何时使用单选按钮(radio button)、复选按钮(checkboxes)、下拉式选单(dropdown)、切换(toggle)。

哇!讲到这边,估计都可以另外写一集来分享四个之间的不同。今天就从概论的方式来说明,这四个控制界面元件(control UIs)为表单设计中最常用的四种。

单选按钮(radio button)

一般来说,单选按钮常用于在一群选项中只能选一个的情况下作使用,这种情况下也可以使用小图示来表示:


复选按钮(checkboxes)

常用于选择多个选项,例如完成待办事项清单。


下拉式选单(dropdown)

下拉式选单较前两个复杂,可以做为多选或单选使用。如果可能的话,尽量使用单选或复选按钮来减少认知负荷和点击次数。


切换(toggle)

切换通常用于只有二选一的状态,例如:开与关。


知道这些控制元件之后,就可以更有效地选择哪一个最符合表单情境中的需求。


永远显示输入框标签

如上文所说,输入框标签通常位于栏位的左上方,而这些标签应该永远显示在同一个位置而不该被预留的文字(placeholder)所取代,原因是当用户开始输入时,预留文字将会消失,用户必须使用他们的记忆去回想刚刚的标签是什么。

看到这边应该会有一些朋友开始质疑「刚刚google的登录表格不就是这样用的吗?」没错,当然也有特例,而这个特例是最近两三年蛮常用的一个手法—  文中标签(inline label )或是浮动标签。

当你在跟栏位互动时,预留文字会变成输入框标签,此用意是为了不要让表单占用太多垂直空间,尤其是在手机优先(mobile-first)的时代,垂直空间的运用一直是被关注的重点。

使用预测及自动填写

当用户在选择他们的地址时,最好的方式不是让他们把完整的地址一一的打出来,而是当用户开始输入地址时,预测他们实际的地址并且自动填写。这可以有效地减少多余的输入还有认知负荷。


表单中的错误信息

人非圣贤,孰能无过。但要预防错误的发生,便是产品设计师的使命,尤其是在表单设计当中,接下来就要看看如何在表单设计中有哪些错误信息及摆放位置。

两种错误信息

通常的情况下,错误信息有分两种,第一种是系统错误,第二种是验证错误。

系统错误是用于资料在传输过程中发生错误,其中有很多种可能性,像是突然没网络,或是服务器挂掉等等。而最常见到的信息就是「something went wrong, please try again」,通常这类的错误会显示在操作端附近或是用户可以马上看到的位置。

而验证错误,则是在输入结束后(少量用在输入过程中),侦测到异常后所产生的回馈,也是我们妥善地使用进而引导用户走向正确的道路。

上下左右要放哪里

你希望用户会在栏位的哪个地方看到显示的错误信息?如果错误信息没有摆放在正确的地方,你可能会让用户无法完成你的表单。当错误产生时,他们需要知道如何去修正并重新送出。

研究指出将错误信息放置在栏位的周围可达到最佳的效果。尤其是右边以及下方更为直觉。

为什么在右边是最好的?因为在西方的阅读系统是由左至右(当然中文也因此受到影响),当用户从栏位移动到错误信息,很自然的会将眼睛移到右方,看到错误信息后再将输入的部分修正。

由于我们现在是处于手机优先的时代,手机上并没有太多的水平空间可以让我们运用,因此我们大多数看到的错误信息是显示在下方的。


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

8粉丝

200帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )