如何提高表单可用性？

在数据迭涌的互联网时代，表单是我们随处可见的一个界面组件，从注册登录、问卷调查、交易支付、订单查询到数据监控、平台系统，我们已经习惯了填写一项项信息，浏览筛选一列列数据。表单，一个看似简单的组件，但在真正使用时，我们就会发现不同的表单设计会给人带来千差万别的效果体验。

 

而表单的真实效果体验并非由设计师一人决定，产品经理、视觉设计师、交互设计师、前端、后台开发都对表单的真正实现起着不同的决定性作用。

 

因此，本文尝试分析一下在页面设计中，如何提高表单可用性，以供设计师和不同岗位的程序员们共同探讨、学习。

 

表单的元素

在分析之前，我们首先简单了解下一般表单的元素组成：

标签：告诉用户这是什么表单

表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等

交互：用户在删、增、修、改时的操作行为

提示：帮助用户更好的操作、填写

反馈：在用户填写信息时，及时给出正确/错误反馈

 

 

 

文字的层次感往往受字体的大小、颜色、间距、布局等来体现，这些又影响着人们的阅读顺序、阅读体验。

现在我们来看看有哪些地方可提高页面中表单的可用性。

 

1、使用单列布局

 

多行会扰乱用户阅读顺序，首选垂直单列布局

 

2、用合适的间距区分组块

组和组之间保持稍大间距，以示区分

 

3、标题不要都大写字母

大写字母不便于快速阅读

 

4、超于6个选项时，采用下拉框

下拉框会造成两部操作，增加动作步骤数，但若超过6个选项时，适合采用下拉形式。

 

5、复选框采用纵向布局

 

纵向布局方便用户快速阅读，扫视信息

 

6、信息错误时，给出友好的提示反馈

当填写错误时，给出友好的提示，提示错误条目，错误原因

 

7、提供舒适的点击区域

无论是网页，还是APP界面设计，舒适的点击体验也很重要。一般说来，拇指的触发区域应当控制在 45~57px之间，但是在移动端上，控件看起来太大会让人觉得不舒服，所以文本框高度应该设计在32~40px之间，这样看起来足够友好，又不会太大。

 

8、区分主要操作和次要操作

 

主要操作和次要操作要根据所在的场景加以区分，主次明显，加快用户完成速度

 

9、字数不多的提示不必隐藏

 

基本的提示直接展示出来，若字数超过100个字符，可将提示标识置于标签或输入框附近，鼠标悬浮时展示文字。

 

10、配色的使用

 

心理学上，不同的颜色会给人以不同的暗示。界面设计时的用色需慎重斟酌。一般来说，通知为蓝色，警告为黄色，错误为红色，成功确认为绿色。

 

11、自动完成和自动建议

 

 

自动完成是以下拉框的形式根据你输入的内容进行实时补完的功能。这对于输入困难、拼写困难的用户会很有帮助，尤其是当这种语言并非他们母语的时候。

自动建议则会以列表的形式呈现相关的关键字或者短语，在匹配度上可能不会太多理想。

两种结合起来可以让用户输入的体验更加优秀。

 

 

12、梳理逻辑，保留必要字段

表单是同用户沟通的语言。和任何对话一样，有逻辑性的语句和简洁易懂的描述更便于沟通。

所以，你需要这么做：

 

①让问题保持直观的顺序。站在用户角度按照逻辑提问题，而非按照程序的逻辑。

②筛选必要信息。反思从用户那里获得的信息是否必要，如何使用。如此可消除不必要的选项，提升完成率。

 

 

13、给表单内容分组

 

 

冗长的表单会使阅读者一头大，布局时要合理分组，给以合理的标题，使表单有逻辑，便于阅读，便于理解。

 

14、来点趣味

 

 

 

 

大量的文本框看久了不免枯燥乏味，页面适当的留白、有趣的动效、趣味的图标则可以让页面立刻活动起来，增添不少新奇、趣味。

 

总结

 

上述几点建议的出发点其实不外乎以下几点：

 

1、从用户使用的目的出发，规划表单内容。

2、从用户使用的逻辑出发，合理布局表单内容。

3、从提高用户阅读速度的功能出发，进行表单的视觉设计。

4、从界面友好度出发，提供及时的帮助、提示、反馈。

 

用户填写表单时，不可避免的会遇到各种各样的问题，我们要做的就是在让用户完整的填写信息的同时，尽量减少用户完成时间，使整个过程便捷、轻松而高效。