- 设计理论 -

用GUI提升表单体验的10个技巧

作者:阿肆Stella 原文出处:海盐社
2018-07-20

5.jpeg

上一篇表单设计进阶文章我们从内容和交互的层面对表单进行了体验优化,不过很多时候,对处于工作流下游的UI设计师来说,无论是删减不必要的内容还是更改交互方式,都是很难反向推动的,那么,我们难道就对表单放任不管了么,当然不是。作为视觉设计师,我们依旧可以利用我们可以控制的界面呈现效果来优化表单体验。

针对这一点,今天借用设计师Andrew Coyle的文章《设计更好的表单——设计师的常见错误与解决方法》中提及的例子,就我个人的工作经验进行了补充和解读,希望能更好的帮助大家进行理解。这些技巧简单易懂,对UI设计师,特别是新人设计师有很大的实用价值。

640.png

人们的阅读方向是从上往下的,因此一个纵列的列表可以顺应用户的阅读方向,让用户在阅读时更为流畅。而横向的列表,用户的视线需要在行和列之间Z字形移动,增加了阅读负担。

640-1.png

表单标签和输入框不能距离太远,根据格式塔的相近原理,相近的元素会被分为一类,如果标签和输入框相距过远,如右图所示,用户下意识会把左侧的标签分为一类,右侧的输入框分为一类,需要进行再次的思考判断才能分辨出左侧的标签对应的是右侧的输入框,增加了用户的认识负荷。

640-2.png

纵向排列表单时,要注意标签与输入框的距离与表单纵向的间距比例。同样是格式塔相近 原理,左侧用户可以下意识辨识出标签对应的是下方的输入框,但是右侧,因为标签距离上面和下面的输入框间距一样,在有多行表单时,用户会难以辨别出标签对应的究竟是上面的输入框还是下面的输入框,可能会引起误解。

640-3.png

当选项少于5个的时候,让所有的选项都展示出来,便于用户快速浏览。

640-4.png

当你把标签放在预填充里面时,虽然表面上看起来节约了空间,但是当用户开始输入或完成输入后,预填充消失,除非全部删除,否则用户就没有办法知道这个输入框本来应该输入的内容是什么了。

640-5.png

单选项或者复选项要纵向排列。首先纵向排列符合阅读习惯,便于用户进行快速浏览;其次纵向便于用户辨别出选择框和选项的对应关系,如果横向排列的话,如右图,用户无法快速辨别出选框对应的是前面的Tiger还是后面的Bear,特别是在选项内容比较多的时候,很容易造成误操。

640-6.png

当表单内容有2个以上的输入区域时,要在输入位置旁给出明确的错误提示,而不能是在表单头部或者尾部给出笼统的错误提示。如右图,顶部显示1个错误,用户首先不能确定这个错误对应的是哪个内容,其次用户不知道错误发生的原因是什么,这种错误提示几乎等同于没有,很有可能引起用户的焦虑情绪。

640-7.png

如果你的表单对用户的输入内容有特殊的要求时,需要提供帮助文本,但最好不要把文本隐藏起来。要知道用户是懒惰的,如果需要多一步操作来查看帮助文本,那么几乎没有人会多此一举点开查看。帮助文本就完全无法发挥出引导用户填写的作用。

640-8.png

如果输入框输入的内容长度是固定的,那么可以制作固定宽度的输入框,以此来暗示用户可输入内容的字段长度,例如图中输入邮编的输入框,如果邮编统一为5位数的话,就把输入框设计成5位数字的长度,而不是右图常规的长度,这样用户在填写的时候就会知道要填写的是短数字,而不是像身份证号一样一长串数字,避免用户犯错。

640-9.png

如果你觉得符号*表示必填项是一个众所周知的“常识”的话,那么你错了,符号的识别很大程度上依赖过去的经验,而对于一些没有相似经验的用户来说,要识别出*表示必填可能是一件很困难的事情。所以尽量用文字来表示“必填”或者“选填”。

640.jpeg

如果你的表单很长的话,将表单内容分类,是一个很好的缓解用户疲劳感的方式。如示例,如果你一次性让用户填写10个表单项,用户一定会觉得亚历山大,而当把10个项目拆分成个人信息、账户信息和练习方式这三大类,每一类只有3~4个项目时,用户可以走几步“歇一歇”,很大程度上缓解了疲劳感,让用户有信心继续填写下去。

屏幕快照 2018-07-20 上午11.04.03.png

总结

以上就是从视觉角度对表单进行体验优化的10个技巧。可能有的人会觉得,文中提到的列表间距的细微区别、排列方式的差异等等都是一些小细节,没有必要为此兴师动众,就个人观点来看,有这样想法的,可能还是初出茅庐的新人,因为越是在这个行业挖掘深刻的人,越是知道细节的重要性,而细节也是一个设计师功力的重要体现。

俗话说不积跬步无以至千里,好的用户体验就是一点一滴的小细节逐渐积累起来的。对于用户来说,他们感受到的是由无数细节组合成的“整体感觉”,他们也许并不会注意到你都做了哪些好的体验,因为越是好的体验就越是无法感知,相反,不好的体验却会被第一时间察觉甚至被无限放大。

所以,表单作为一个处在与用户交流的一线、与用户进行密切信息交流的组件,是值得我们花心思去琢磨细节的。这篇文章列举出了一些常见的表单设计的技巧,希望能够帮助大家,特别是新人UI设计师在表单设计上更进一步。

屏幕快照 2018-07-20 上午11.04.29.png

6.jpeg

海盐社.jpeg

喜欢就分享
精选评论