网页设计表单制作实例图片 网页设计表单制作实例教程

编辑导语:我们在工作中经常会遇到一些关于表单优化的问题。虽然表单听起来是简单而常见的设计元素但为了设计出简洁、直观和清晰的表单还需要考虑更多的细节。本文总结了一些如何设计简单包容的表单的小技巧希望对你有所启发。

我最近的工作涉及到一个困难的任务——如何为我的产品设计一个体验更好的表单。我接到这个任务的时候根本不知道好形态和坏形态的区别。我需要思考:我应该设计一个多步表单还是一页表单？我应该使用占位符吗？怎样才能让自己的形式更符合包容性设计的原则？

几乎web端的每个重要交互从注册和登录、购买产品和服务到启动客户帮助或获得反馈都需要通过表单来完成。因此虽然表单可能不是设计中最令人兴奋的设计元素但学习如何设计一个好的表单是一项非常有价值的技能。

在学习了一些资料后我列出了我认为更好最有效的表单设计。但是我们需要记住的是:形式是一个高度依赖语境的设计元素所以实践中也有例外设计师需要具体情况具体分析。开始之前让我们快速回顾一下表单的五个主要元素:

结构:表单的布局和表单项的顺序。输入框:文本框、单选或多选等界面元素。输入框标签:输入框的相应提示。文案动作按钮:用户执行一个操作比如提交自己的个人信息反馈:让用户意识到自己的提交是否成功。反馈可以是视觉提示或听觉提示。

一、让表单尽量保持单列

首先尽可能保持表格的单一。

多列表容易被误解:用户非常容易忽略一些必填内容填写错误的文本框或完全放弃填写表单。下图是面对多个列表时用户的眼睛是如何移动的。

当一个表单没有提供清晰的填写路径时用户需要很长时间才能理解更不用说完成了。当一个表单的填充路径是线性的比如单栏表单用户完成的时候就不会产生误解。

2.过程、顺序和分组1。删除所有不重要的输入。

确保用户只输入我们真正需要的东西。但是请记住您要求用户输入的信息越多他们就越不想填写这个表单。因此这将影响转化率和其他因素并导致销售损失。设计师需要明确要求用户填写这些信息的目的。在这里我们可以使用一种称为“问题协议”的系统方法来确定表单的内容。

2.用清晰的逻辑排列表单项目。

好的形式是在合适的时间向用户索要合适的信息否则可能会让用户失去兴趣。回想一下我们自己的网购场景:如果网站要求你在买东西之前填写支付信息你会怎么想？还是要先填地址再填名字？所以要尝试从用户的角度去思考如何建立表单的排列逻辑。

3.分组表单项目

创建表单项的逻辑分组有助于用户更清晰地理解信息因为用户在同一时间只能关注一个组而不是被众多杂乱的信息所干扰。分组在一个组中的信息意味着它们彼此相关。因此视觉上区分不同的组也很重要比如在组之间添加空白色区域。

第三使用清晰有效的标签

首先标签应该尽可能在顶部对齐。根据眼动测试的研究将标签放置在输入框的上方而不是旁边将有助于用户更快地理解信息。

从包容性设计的角度来看标签也很重要。视力正常的用户可以阅读视力受损的用户可以在屏幕阅读器的帮助下听到运动障碍的用户可以在更大的点击区域使用。

四。避免使用占位符文本

因为占位符并不意味着用户必须阅读HTML规范中的某些内容。在表单中使用占位符是因为它们在用户输入信息时提供了额外的指导。但问题是这些文字是灰色的低对比度的颜色让用户很难读懂。在包容性设计的研究中发现占位符往往会被浏览器或某些屏幕阅读器的自动翻译功能忽略不会翻译或阅读。

那么我们为什么要使用占位符呢？使用占位符的原因是它们在视觉上节省了大量的空。但问题是当用户点击时占位符会自动消失因此用户无法仔细检查他们是否在正确的输入框中输入了正确的内容。

一种常见的解决方案是使用浮动标签并将它们用作占位符。当用户开始输入一个表单项时标签将被悬挂在输入框上方。这种方法很受欢迎因为它可以节省空。总的来说是非常优雅自然的模式。

但是浮动标签的缺点大于优点。首先设置提示文本缺少空空格因为标签和占位符是一样的。其次标签小对比度低用户很难分辨是占位符文本还是真正的数值。最后空之间的节省不会特别大因为标签需要在空之间移动。

那么我们该怎么办呢？我们可以把提示文字放在输入框的顶部就像下图一样。所以屏幕阅读器不会跳过这几个字还提供了更大的点击区域。

5.标记可选或必需的输入框。

传统上我们使用红色星号来表示所需的表单项但如果您知道我上面提到的“问题协议”工具大多数表单项都必须填写。因此帮助用户标记可选输入框将更加方便和有意义。当我们想让某些元素脱颖而出的时候我们会用视觉设计来突出这个元素的与众不同。

对于设计师来说我们可以很快理解红色星号的含义但总有人对此感到困惑。在标签上加上“可选”字样会比使用视觉符号更清晰明了。

在包容性设计中有关于如何使用红色星号作为必填字段的建议:可以在表单中添加标记以便屏幕阅读器在阅读时可以说“这是必填的表单项”从而帮助用户理解。

不及物动词出现错误时提供反馈。

当用户提交的内容出现错误需要通知用户时界面上应该有三个方面的呈现。

1.页面标题显示了错误的数量。

在html网页中浏览器标题栏中出现的标题用于定义网页的名称。标题是屏幕浏览器开始阅读时第一个需要阅读的部分。所以在这里显示“用户提交的信息是错误的”可以最有效最快速的反馈给用户。

这种解决方案需要使用javascript来计算表单中的错误并显示出来所以可能不属于一个设计师的功能。你只需要确保通知开发者这个功能。

2.在表单的开头显示错误提示摘要。

这种类型的错误反馈越来越清晰。表单上显示了错误的摘要因此用户知道他需要修改内容的哪一部分。

好的错误摘要不仅包含错误信息还包含错误位置的链接。错误的链接允许用户快速跳转到表单的错误部分而不是要求用户先记住错误发生在哪里然后从头阅读表单从大量信息中找到自己的错误。

当然当没有错误时需要隐藏错误汇总模块。

3.错误的实时警告

在理想情况下所有的错误提示都是实时的这意味着当用户填写一个表单项(或者不填写)时表单项附近会出现一个错误提示文本可以有效减少用户上下滑动查找错误提示信息的时间。

最近还有一种趋势是将错误消息放在文本框的顶部。这是因为有些自动填充功能可能会屏蔽这些消息手机上的键盘也会屏蔽这些关键消息所以用户很容易忽略。

例如对于稍微复杂一点的表单输入输入一个新密码。一个很好的解决方案就是用实时提示显示密码的强度也就是在用户打字的时候可以实时显示当前密码的强度。这将最有效地让用户知道他们是否符合该表格的填写要求。

七。动作按钮1。在动作按钮上使用动词。

CTA操作按钮应该使用描述性语言而不是模糊的语言。动词将帮助用户理解接下来会发生什么。虽然动作按钮上的描述要简短但也不能牺牲语言的清晰性。一定要用大家都能听懂的语言。

2.主要按钮和次要按钮

对一级按钮和二级按钮进行清晰的视觉区分主要是为了避免用户按错按钮。视觉上的区别可以导致最预期的操作。

3.动作按钮的位置

一般情况下提交按钮应该放在表单的底部因为大多数用户会从上到下填写表单然后提交。另一个需要考虑的点是按钮对齐位置是左、右还是中间。我觉得更好的解决方案是靠左对齐因为表单中的标签也是靠左对齐的所以当用户把视线下移时自然会看这个位置。

在需要使用后退按钮的表单中比如多步表单提交按钮仍然应该靠左对齐。但是后退按钮应该放在表单的顶部这样可以帮助用户区分一级按钮(即提交按钮)和二级按钮(即后退按钮)帮助用户误点后退按钮。

八、如果内容复杂可以采用多步形式。

当表单中填写的内容可以分类时使用多步表单可以提高表单的可用性。将一个较长的表单分成几个较短的表单可以帮助用户更清楚地填写表单。当需要填写大量信息时更好使用多步表单。同时你也可以向用户展示填充的进度这是提高用户参与度的好方法。

进度指示器将表单内容分成许多逻辑和顺序步骤向用户显示当前进度。这就给了用户明确的反馈让他们知道自己完成了多少还有多少没完成。

但是除非你确定整个表格有几个步骤没有偏差否则不要用数字来标注这样会导致更多的混乱。

1.尽早并频繁地测试设计草案。

最后设计师需要证明每个表单元素存在的必要性。对于表单用户来说很枯燥但是设计者的任务就是让表单尽可能的可用和易用。和其他设计一样表单可以通过测试不断优化所以要尽早、频繁地测试让测试结果推动下一步的设计改进。

欢迎大家评论喜欢或者自由分享。

作者:奥马尔·安达尼；；译者:王英瑞；评论:李和；编辑:孙

原文链接:https://UX design . cc/8-ways-to-make-forms-more-user-friendly-50 F3 f22 c 708 c

本文由@TCC翻译情报局翻译发布。每个人都是产品经理。未经许可禁止复制。

题目来自Unsplash基于CC0协议。