就像网站设计是您业务的关键部分一样,设计网络表单也很重要。人们不知道的是,借助精心设计的网站表单,可以收集有关用户的许多关键信息的过程。它使了解客户的过程变得更加轻松和高效。
实质上,整个过程对双方都是双赢。但是可悲的是,没有多少人具备设计Web表单的基本知识。有效的Web表单在美学上令人愉悦,但可以达到创建目的。在设计网站时,Web表单通常是最后工作的地方。但是,事实并非如此,因为Web表单是提取客户信息并研究情况分析的绝佳策略。这是用户与网站之间最频繁的互动。
尽管大多数人都不知道Web表单是什么,但我们希望分享Web表单设计的基本知识以及不该做的事情。但是在设计表单时要牢记什么之前,让我们尝试了解它们的重要性。Web表单可以有多种形式-签出表单,注册表单,弹出窗口等,这就是网站表单。
什么是网站表格?
简而言之,网站表单是一种在线补充,需要用户端的输入。就像我们出于所有正式目的填写必要的文件一样,网络表格也要求用户输入可能对访问网站至关重要的特定详细信息。许多企业愿意选择在其网站上输入网站表单,以确保他们接收到有关客户的数据,并建立一个数据库,从长远来看可以使他们受益。
简而言之,Web表单是Web开发的扩展。为了使事情变得更容易,PHP Web开发还提供了一个用于开发目的的框架,该框架可以作为构建Web表单,页面以及完整网站的基础。可以这么说,如果您希望对开发更加专业和技术完善,雇用PHP Web开发人员总是可以选择帮助您设计表单。
基于设计简单高效的Web表单的基本概念,跟踪过程中的不便之处至关重要。虽然设计Web表单可能是一项简单的任务,但要使其在技术上合理,则必须牢记一些要点。在本文中,我们将审视这些内容并总结出构成良好Web表单的内容。
1.信息超载:
要记住,每个人的时间都是非常宝贵的,这很简单。通过回答无关紧要的问题来浪费时间。如果特定集合至少需要两个字段(例如,姓名和电子邮件地址),请不要在表格上添加不必要的电话号码,地址和字段。取而代之的是使用一种称为“渐进分析”的工具。这样可以确保您在客户或用户浏览网站表单两次以上之后添加多个问题。
确保询问信息的方式也不会引起误解。用户不应觉得自己只是出于营销目的而受到讯问。他们应该感觉自己像是系统的一部分,这是通过使用有趣的流行语来完成的。如果您要提出预算或报价请求,可以先询问与挑战,时间表和期望有关的问题,然后再询问姓氏或地址。
2.标签放置:
假定您必须确保正确放置表单字段标签。这样,客户就不会因为需要什么信息而被误导或迷惑。左对齐的标签在用户开始填写表格后很麻烦。
一旦用户开始键入,大多数电话设备都可以放大该字段,这反过来会隐藏所有在左侧对齐的标签。此方法可确保用户每次需要移动到下一个输入时都将其缩小。
一种更可靠的解决方案是使用响应式查询,该查询将标签与移动设备的顶部对齐,但在桌面视图上却右对齐。这也是在使标签加粗以确保在输入字段上更突出的方向上的尝试。
3.占位符是新标签!
“占位符”属性是HTML5给定的输入字段的新添加。这样可以确保有关字段的期望值或数量的提示很小。在用户尝试输入真实信息之前,占位符文本已在字段中预先编码。当用户开始输入值时,它消失。
现在,此技术已被许多Web设计人员广泛使用。它有助于消除标签并使占位符成为输入字段中的新标签。此方法可确保设计整洁,但确实会给用户体验带来可观的牺牲。
如果用户不确定必须输入的值,方法或格式,则占位符是一种责任。要查看占位符文本,用户只能通过刷新页面来进行。这将导致丢失所有输入的数据。这将成为一个繁琐且反复发生的过程,该过程将确保用户的注意力消失,并最终将用户赶走。
解决此问题的一种折衷方法是隐藏标签(使用CSS)。也仅在用户激活输入字段之一后才显示它们。例如,Shopify就是这样一个平台,它提供了针对此问题的解决方案。它隐藏标签,然后在特定输入字段处于活动状态时允许用户查看它们。
4.布局和间距:
要在田野和剖面周围提供足够的空间,必须有出色的视觉流动。这使设计更整洁,更易于理解。在设计网站表单时,分组也很重要。这有助于确保您具有可确保易于阅读的格式的部分。它们使表单更具响应性。
例如,名字和姓氏可以与电话号码,电子邮件地址以及标准标题“联系信息”下的地址分组。这样可以为请求的字段提供适当的上下文,并突出显示标签的紧迫性。为了更好地组织表格,请使用虚线或实线。这将有助于将各个标题和组与标签分开。
表单的两列布局始终是一个不错的选择。这以一种棘手的方式起作用。从某种意义上说,您可以在左侧添加所有标签和输入字段,并在右侧添加可点击的提交按钮。这将确保人们不会错过必须填写和提交的信息,方法是查看第二列。此外,可以对按钮进行颜色编码,以使其更容易发现剩余的字段。
5.错误消息和误导性验证:
遇到频繁的错误可能会伤害或挫败用户。当用户可能忘记填写特定字段时,可能会发生错误。此外,它们可能会将错误的信息格式填充到输入字段中。例如,用电子邮件地址代替电话号码。
为确保正确解决此问题,请在输入字段周围显示错误消息,以使用户意识到提交内容中存在一些错误。使用星号或颜色,线条和边框突出显示错误字段,以免造成任何不满意的用户。确保在字段区域中有一条建议,说明输入错误的原因以及正确的输入可能是什么样。
6.验证码:
垃圾邮件对于网站表单来说是一件令人沮丧的事情。它们还可以导致潜在客户的报告。解决此问题的一种流畅,方便的方法是使用验证码或确定人还是计算机正在填写表格的设备。
有时,验证码会使用户难以解决,或者可能会被忽略。因此,请确保仅在知道您的网站将收到大量表格垃圾邮件时才使用它们。另外,为确保流畅和更易于访问,请确保提供刷新或播放单词音频文件的选项。
“蜜罐”是与垃圾邮件作斗争的另一种方法。此方法可确保存在只能由水龙头显示的字段。更令人兴奋的是,它确保垃圾邮件程序不会通过该字段的完成!
7.成功消息和确认:
为了确保该人不会感到疏远,不可避免的是要立即做出答复或反馈。这有助于确认他们在填写网站表格方面所做的努力。通过向用户发送一封电子邮件,其中包含提交的信息以汇总信息并保留提交的副本,可以使您更加放心。
提供一个时间限制,在这个时间限制内,人可以与用户联系是一种有用的做法。这样可以确保用户不会在没有任何形式接受表格的情况下被吊死。
8.表格不能令人讨厌!
构成Web表单的样式充分说明了设计它的人。虽然花朵风格可以使女人味更显女性化,但深色布局也可以使事物变暗。由于网络表单应足够吸引人的注意力。它应该使他们想要注册。设计必须以不拖延用户的方式进行。网页应该传达的信息必须与人格无关。
对于用户和设计者而言,Web表单都应该是一个更加沉迷的过程。
需要避免的错误
总结本文,这里是设计网站表单时应避免的一些提示:
- 如果您使用的是自动填充选项,请尝试不要使用自动前进选项。自动前进选项可确保按下Enter键后,光标自动前进到下一个字段。大多数用户不习惯此功能。他们想根据自己的节奏与之抗争,以填补这一领域。
- 确保您没有设计可读性低或难以通过的表格。尝试以为用户整理内容的方式来组织表单。
- 切勿在未确定要测试的情况下上传网络表单。
- 表格也需要针对手机进行优化。在执行此步骤时,请确保针对每个设备优化表单。
网络表单是网站的重要组成部分,是有助于潜在客户产生的磁铁。它可以帮助应用程序和网站达到目标会话率,从而帮助他们保持业务发展。
设计Web表单从来都不是一件容易的事,因为有很多因素需要确定。作为一名网页设计师,对每一个细节都保持谨慎是您的责任。确保考虑创建吸引人的表单时不应该做的事情。