最专业的八方代购网站源码!

资讯热点
抠细节!设计高效且易于使用的表格的10个技巧

发布时间:2019-10-30 分类: 行业资讯

无论是网页设计还是APP UI设计,表单都是界面中最常见和最重要的组件之一。它们具有广泛的应用,用户注册,订阅服务,用户反馈,问卷表格,买卖交易等,从数据输入到信息搜索,几乎无处不在。对于设计人员,前端和开发人员,您应该尽可能地专注于表单的设计,以使其更易于使用。详细设计极大地增强了用户体验和交互效率。

在今天的文章中,您将找到很多关于表单设计的实用建议,其中涉及可用性测试,现场测试,眼睛跟踪和用户反馈的许多不同方面。

1.梳理逻辑并保持必要

表单是与用户通信的语言。与任何对话一样,它应该有助于各方以合理的方式完成通信。所以你需要这样做:

·以直观的顺序保存问题。您应该从用户的角度逻辑地提出问题,而不是程序或数据库的逻辑。如果问题之间没有逻辑,则可以按字母顺序排列。

·以直观的顺序组织选项。例如,当选项是日期时,它按照星期,星期二,星期三的顺序排列,而不是顺序。

·始终反思从用户获得的信息是否必要以及如何使用。这样做是为了消除不必要的选项并提高完成率。

2,使用单列列表布局

要填写的多列表很容易被用户填写并中断填充体验。用户需要根据锯齿形轨迹完成整个表格,这不仅影响整个书写路径,还会降低效率并产生一定的干扰。但是,如果您使用单列表单,则此路径是单一,直接且更直观的。

3.减少要输入的字段和工作量的数量

减少要输入的字段可以使表单更精确并减少加载时间,尤其是对于包含大量信息的表单。

简单地减少输入的字段数当然是不够的。您还应该注意填写表单的用户的方式,内容和工作量。通过键入来键入内容是一种高度交互的输入方法,具有高错误率和高时间成本。因此,用户应尽量减少用户的键入,并使用复选框,单选按钮和下拉菜单等选项来减少用户错误。概率。

4.匹配输入框和内容的大小

Baymard Institute发现,如果某个字段与输入框相比太长或太短,它会让用户怀疑他们输入的内容是否正确,并在CVV(信用卡验证值)等字段中输入。这是特别明显的。

为了保持良好的可用性,您应该使输入框的宽度尽可能地与输入的长度相匹配,并且适当的保留空间可以使用户更舒适。

5.标签放在相应的输入框上方

用户是否方便快速查看表单?如果表单难以快速扫描用户,则需要更长时间才能填写。因此,它是表格设计的一个很好的指导方针。 Matteo Penzo的文章研究了如何布置表单中的表单和输入框,以便用户更好,更快地浏览和填写。结论是标签应放在输入框的上方。

如果您希望用户尽快浏览,请让标签和输入框垂直对齐,与左侧对齐。请注意,这是一个快速浏览。这种布局的优点是它们不需要太多的水平空间,用户不需要左右扫描而只需要向下浏览,这样的布局更容易形成响应式UI,兼容不同的屏幕和不同的应用场景。

6,支持灵活多样的格式

某些字段需要由用户准确填写,但要求用户输入特别精确或特定格式的内容可能会带来易于使用的问题。如果您要求用户输入数字内容(例如电话号码),最好是灵活并支持各种不同的输入方法和显示方法,以便更容易查看(而不是加工)并防止出错。

例如,固定电话的格式通常是(777)666– 5544.这种格式更易于用户查看,记录和记忆。

7,不要混合占位符和字段标签

设计人员经常在表单中放置文本占位符作为附加提醒,以告诉用户如何填写。当用户开始输入占位符文本时,占位符文本将消失。

有些设计师会将标签直接放在输入框中作为占位符,以减少表格长度并减少视觉混乱。对于简单的表单设计,这种设计几乎没有效果。当表单信息很大且内容类型可变时,此方法不适用。这种设计的缺点是:

·一旦用户点击输入框,标签就会消失,用户很容易忘记谈论需要输入的内容和表格

·当用户看到输入框中填写的内容时,将会误解该字段已填写而未键入

如果仍需要在表单中使用占位符,请将占位符作为浮动标记存在。默认情况下会显示占位符,当用户输入时,它会作为标签浮动以提醒用户。

8.混淆可选字段和必填字段

正如我之前所说,尽量避免在表单中添加可选字段。但是如果你必须加入,那么至少应该清楚哪些字段是可选的,哪些是必需的。控制1~2内的可选字段,并清楚地告知用户这是可选的。

9.请勿使用“重置”按钮

“重置”很容易让用户删除表单上的所有内容并从头开始。风险太大了。在现实生活中,这个按钮从未真正帮助过用户。相反,虚假触摸造成的损害更多。一些。

10.提供高可见性和特定错误消息

理想情况下,用户完成表单并上传以完成任务。但在实际情况下,错误是不可避免的。因此,当发生错误时,应以高度可用且可见的形式通知用户发生了问题。因此,您提供的错误消息应符合以下规则:

·当用户进入该字段时,应该实时通知用户他们填写的信息是正确还是错误,而不是在告诉他们出现问题之前等待他们完成所有信息。

·错误消息应该一目了然,从颜色,图标到文本应突出显示,错误消息应该靠近输入框,而不是表单的底部或顶部或按钮旁边。

·如果输入格式是特定的,则应提前声明。

·发生错误后,请不要清空已填写的表单。

结论

在填写表格时,用户的犹豫是不可避免的,我们应该尽量使这个过程方便和容易。我们应该让形式设计成为优势,而不是弱点。高度针对性的表单设计,贴心的细节和体验,不懈的改进和调整,高效快速的提交和流畅的流程,这些都是良好形式应该是好的形式。

« 移动APP原型设计三部曲 | 分析导致代购源码网站优化失败的因素 »