bts防弹少年团演唱会

bts防弹少年团演唱会

如何正确获得表单验证

《如何正确获得表单验证》

没有什么比填写设计糟糕的表格更令人沮丧。

不过,这是一种常见的体验。 您输入密码的次数仅仅是用红色墨水回收“错误! 密码需要一个大写字母,两个数字,一个字符,以及来自Fetty” wap>歌曲的引用。“

%E8%A1%A8%E5%8D%95%E4%BC%98%E5%8C%96%E6%98%AF%E8%BD%AC%E6%8D%A2%E4%BC%98%E5%8C%96%E7%9A%84%E5%85%B3%E9%94%AE%E7%BB%84%E4%BB%B6%EF%BC%8C%E8%A1%A8%E5%8D%95%E5%AD%97%E6%AE%B5%E9%AA%8C%E8%AF%81%E6%98%AF%E5%85%B6%E4%B8%AD%E5%BE%88%E9%87%8D%E8%A6%81%E7%9A%84%E4%B8%80%E9%83%A8%E5%88%86%E3%80%82″>

什么是表格验证?

表单验证是“技术过程,其中%E7%BD%91%E7%BB%9C%E8%A1%A8%E5%8D%95%E6%A3%80%E6%9F%A5%E7%94%A8%E6%88%B7%E6%8F%90%E4%BE%9B%E7%9A%84%E4%BF%A1%E6%81%AF%E6%98%AF%E5%90%A6%E6%AD%A3%E7%A1%AE%E2%80%9D%E3%80%82″>

表单将提醒用户他们搞砸了并且需要修复某些内容以继续,或者表单将被验证并且用户将能够继续他们的注册过程。 例如,Twitter不允许我使用格式不正确的电子邮件地址,并在我尝试这样做时给出错误消息:

《如何正确获得表单验证》

但是当我正确输入我的电子邮件地址时,它可以正常工作(并立即验证它,这很好):

《如何正确获得表单验证》

基本上,验证确保提供的文本格式正确(例如,对于电子邮件, [电子邮件受保护] ),以及文本是否符合合适条目的资格(例如,电子邮件尚未注册,或密码适合标准)。

通常,表单验证有两种主要类型:

  1. 提交验证后
  2. 内联验证

提交验证后

提交验证后可能是您最常用的。 通常,它也比内联验证更糟糕。

%E6%A0%B9%E6%8D%AEDesignmodo“>

换句话说,您填写整个表格,然后按提交。 在那之后,如果你犯了任何错误,页面会告诉你你做错了什么。 有时,当错误堆积起来时(特别是当它们全部显示在顶部时),它会变得非常令人沮丧,导致人们放弃表单:

《如何正确获得表单验证》
图像来源

更糟糕的是,有时表单会吐出不清楚的错误消息。 这是一个例子:

《如何正确获得表单验证》

Peep试图填写场地网站上的表格,以获得活动报价。

但是,他在这个页面上返回了一条红色的大消息,上面写着“你提交的内容存在问题”。

错误在于他进入了一系列客人(理性选择,因为很难说出确切数量的客人参加活动),但他们想要一个确切的数字。 当然,他们在点击“提交”之前没有提到这一点。 即使在提交后,错误消息也没有明确说明输入确切的数字。

正如我们将在下面看到的那样,即使在提交验证之后,仍有一些方法可以提前清楚地说明并避免上述示例的挫败感。

但是,改进形式UX的一种方法是简单地转向内联验证……

内联验证

内联验证是减少表格摩擦的绝佳方法。 它变得越来越普遍,可能是因为我们看到了令人信服的案例研究支持其有效性。

%E6%A0%B9%E6%8D%AEDesignmodo“>

内联验证的一个很好的例子就是我上面提到的Twitter。 当您注册个人资料时,您会看到一个复选标记(好的去)或红色文字,说明您做错了什么:

《如何正确获得表单验证》

大多数专家都认为内联验证更适合用户体验。 正如Luke” wroblewski> :

“网络形式不是很好的会话主义者。 他们提出了一堆问题,然后等到你回答之前全部回答。 因此,当您注册这个很酷的社交网络或使用电子商务网站时,它几乎就是一个独白。“

内联验证解决了这个问题,使填写表单的体验更具对话性。 Wroblewski还测试了对照的内联验证(提交验证后)。 以下是内联验证的视频示例:

[…]“/>

虽然样本很小,但他们在内联版本中找到了以下结果:

  • 成功率提高22%,
  • 错误减少22%,
  • 满意度增加31%,
  • 完成时间减少42%,和
  • 眼睛固定次数减少47%。

通过表单制作它的人数增加了22%非常值得付出努力 – 因此为填写表单的任何人创造更令人满意的体验。

为什么内联验证工作如此顺利

Designmodo%E6%96%87%E7%AB%A0%E8%A7%A3%E9%87%8A%E4%BA%86%E5%9C%A8%E6%AD%A4%E5%A4%84%E5%A1%AB%E5%86%99%E5%B8%A6%E5%86%85%E8%81%94%E9%AA%8C%E8%AF%81%E7%9A%84%E8%A1%A8%E5%8D%95%E7%9A%84%E4%B9%90%E8%B6%A3%EF%BC%9A”>

“在Twitter的形式中精心设计的表单验证的独立魅力是绝对诱人的。 当我出错时立即弹出信息错误消息,立即消除刺激。 “内联验证”帮助我了解了正在发生的事情。 我觉得这个简单的形式试图与我进行实际的对话。 这是一个启示! 最后,我不必等待重新加载整个页面来检查表单是否填写了正确的数据。“

但即使您不使用内联验证,也有一些方法可以使您的表单更加愉快。 以下是一些最佳做法:

1.使用Microcopy增加清晰度

Microcopy包含整个网页中的小部分副本,有助于提供更好的用户体验。 诸如错误消息,指令,条款和条件以及输入示例之类的内容都被视为复制。 最重要的是,对于本文,您可以使用microcopy为表单字段提供清晰度。

您的表单字段标签应尽可能清晰。 Baymard” institute> “92%的顶级电子商务网站在结账过程中没有足够的表单字段描述。”

要使表单字段更清晰,请尝试在您的复制中更具体,如下例所示:

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

在上面的例子中,显微镜澄清了一些常见的混淆点(因此也就是摩擦):你应该如何写你的名字(“亚历克斯”或“亚历山大”),卡号(我应该把破折号或空格插入?)和安全性代码(只是为了确保输入正确的数字)。 这避免了帮助用户避免犹豫,并以更少的错误更快地完成表单。

%E7%BA%A6%E4%B9%A6%E4%BA%9A%E6%B3%A2%E7%89%B9%E4%B9%9F%E5%86%99%E8%BF%87%E8%BF%99%E4%B8%AA%E3%80%82″>

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

微复制不仅可以提高清晰度,还可以%E5%87%8F%E5%B0%91%E5%BD%A2%E7%8A%B6%E9%A2%86%E5%9F%9F%E7%9A%84

例如, Baymard” institute>的2012%E5%B9%B4%E5%8F%AF%E7%94%A8%E6%80%A7%E7%A0%94%E7%A9%B6%E5%8F%91%E7%8E%B0“>

特别是如果您打算使用他们的电话号码或电子邮件提供某种特殊服务,请告知他们。 把消极变成积极的; 或者至少减轻他们的疑虑和恐惧:

《如何正确获得表单验证》

2.沟通错误时要明确

无论您是否使用内联验证,用户都知道他们做错了什么是很重要的。 如果他们说不出来,那将是一次令人沮丧的经历。 如果您的用户体验令人沮丧,那么您将会泄露大量潜在的注册。

Meetup.com就是一个很好的例子。 在这种情况下,未输入邮政编码:

《如何正确获得表单验证》

如果他们确实错误填写表单并且您需要显示错误消息,请确保使用他们输入的数据填充字段。

如果他们必须从头开始,它会导致沮丧,他们可能不会这样做。

3.沟通错误时要好

这很明显:用户不喜欢看错误消息。

根据Smashing Magazine的说法,你看到“当获得完全相同的页面但有错误信息时,用户会觉得他们几乎没有取得任何进展,尽管已经正确输入了90%的表格字段。”

首先,请勿使用带负音的单词。 像“哎呀”这样的事情失败了,而且“错了”。

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

你要做的最后一件事是在你没有完成你的(可能令人困惑的)形式之后让你的访客感到愚蠢。 而不是关注用户的错误,专注于他们需要做什么来修复错误。

当然,用户会犯错误。 虽然明确的标签和松散的表单验证将有助于防止这些错误,但您需要允许错误并使消息传递有用且友好。 %E6%9C%AC%E6%96%87%E6%B7%B1%E5%85%A5%E6%8E%A2%E8%AE%A8%E4%BA%86%E6%9B%B4%E5%8F%8B%E5%A5%BD%E7%9A%84%E9%94%99%E8%AF%AF%E6%B6%88%E6%81%AF%E3%80%82″>

作为正确行事的一个例子,Google提供了清晰友好的错误消息:

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

此外,如果您使用内联验证,则还应在用户正确使用时提供正面强化。 以下是Manuel de Costa %E5%9C%A8Formisimo%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E4%B8%AD%E7%9A%84%E4%BB%8B%E7%BB%8D“>

“使用带有刻度线的内联表单验证来向用户显示其输入是否有效。 这是一种积极强化形式,而不仅仅是使用红色X. 这还可以防止已经提交了具有错误细节的表单的情况,只是为了再次重新加载以便用户纠正他们的错误。 帮助他们第一次做对“

4.不要挑剔

在询问信息时,没有什么比要求以非常特定的格式输入信息的表格更令人讨厌的了。

例如,如果您要求提供日期,请接受16和2016年的年份。 让他们在数字之间使用斜杠(/)或点(。)。 当您要求提供电话号码时,不要求使用空格,括号或其他任何内容 – 让用户随意输入电话号码。

如果您需要特定格式的数据,请清楚(使用microcopy) – 或者更好的是,通过脚本进行转换。 以下是Craig Sullivan写的一篇文章的例子:

《如何正确获得表单验证》

他解释说:

“在这个表格的第一个例子中,邮政编码由于预期有空间而未通过验证,这只是一个非常愚蠢的时刻。 我们只需修改并测试邮政编码验证即可实现…

…我们可能会衡量解决这种验证问题的影响,但大多数情况下,我们只是接受我们正在做一些愚蠢的事情并将其修复为bug或BAU(照常营业)变更。 该解决方案完全简单易行,几乎不需要讨论。“

这是松散的现场验证,它使体验更具包容性。 无论用户如何理解提示,只要变化是合理的,就应该接受。

James Robinson %E5%9C%A8Formisimo%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E4%B8%AD%E8%AF%B4%E5%BE%97

“从松散的字段验证开始 – 而不是限制用户可以在任何新表单上输入太多内容,从宽松的规则开始,直到您发现某些条目的问题并从那里收紧。 这样你就可以从客户那里学习规则,而不是强迫他们满足你的要求并失去转换。“

哦,不要用你的密码要求这样做:

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

防止错误消息

转换用户的最佳方式不一定是设计更好的错误消息,而是首先防止这些错误消息发生。

我们过去曾写过关于%E8%AE%BE%E8%AE%A1%E9%AB%98%E8%BD%AC%E6%8D%A2%E5%BD%A2%E5%BC%8F%E7%9A%84%E6%96%87%E7%AB%A0%EF%BC%8C%E6%89%80%E4%BB%A5%E6%88%91%E4%B8%8D%E4%BC%9A%E5%9C%A8%E8%BF%99%E9%87%8C%E8%AF%A6%E7%BB%86%E4%BB%8B%E7%BB%8D%E3%80%82″>

不要忘记密码的“常见做法”

许多表单会让您填写密码然后进行确认,他们通常也会屏蔽密码。 这些可能是常见做法,但并不意味着它们是最佳做法。

%E5%8F%AF%E4%BB%A5%E5%B0%9D%E8%AF%95%E6%98%BE%E7%A4%BA%E5%AF%86%E7%A0%81%E4%B8%AD%E8%BE%93%E5%85%A5%E7%9A%84%E6%9C%80%E6%96%B0%E5%AD%97%E7%AC%A6%EF%BC%88%E9%9D%9E%E5%B8%B8%E9%80%82%E5%90%88%E6%89%8B%E6%8C%87%E4%B8%8A%E7%9A%84%E5%A4%A7%E6%89%8B%E6%8C%87%E5%92%8C%E5%B0%8F%E5%B1%8F%E5%B9%95%EF%BC%89%EF%BC%9A”>

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

您还可以让用户在键入密码时查看密码:

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

事实上,在2009年,雅各布尼尔森写了一篇名为“ %E5%81%9C%E6%AD%A2%E5%AF%86%E7%A0%81%E6%8E%A9%E8%94%BD“>

  • 当用户在填写表单时看不到他们正在键入的内容时,会产生更多错误。 因此,他们感到不那么自信并且更容易放弃(导致失去的转换)。
  • 用户对输入密码的感觉越不确定,他们就越有可能使用简单的密码或从他们的计算机上的文件中复制和粘贴密码。 这两种行为实际上降低了安

以下是UIE%E7%9A%84%E4%B8%80%E4%B8%AA%E4%BE%8B%E5%AD%90%EF%BC%9A”>

《如何正确获得表单验证》

最后,您无需要求用户确认其密码。 仅仅因为其他人都这样做,并没有使它有效。 可以做这样的事情:

《如何正确获得表单验证》

不要使用内场标签

内场标签如下所示:

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

由于以下几个原因,它们不是bueno:

  • 该字段内的标签看起来像预先填写的答案。
  • 在标题内使用标签作为占位符文本(用户通常知道答案的位置)会中断会话流程。
  • 如果字段获得焦点后标签消失,则屏幕阅读器无法读取标签。

提出建议或强制回应

尽可能限制响应,以便用户不会陷入困境。 例如,对于日期,您可以将其设为下拉菜单:

还记得我上面提到的关于场地形状不好的例子吗? 这个:

《如何正确获得表单验证》

如果它们需要确切的数字,它们可以提供不同范围的下拉(0-50,50-100,100-200等)。

如果可能,输入建议也会有所帮助。 以下是NGP” van>的一个例子:

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

如何跟踪表单错误

实施最佳实践很不错,但要弄清楚人们在特定表单上的落差情况更为出色。 我们怎么做? 好吧,我们必须设置一些方法来衡量表单分析,错误消息,放弃和完成。

如果你使用像Formisimo这样的工具,它相对简单,只需%E6%9F%A5%E7%9C%8B%E6%9C%80%E6%AD%A3%E7%A1%AE%E7%9A%84%E5%AD%97%E6%AE%B5%E6%8A%A5%E5%91%8A“>

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

您可以查看%E6%AF%8F%E4%B8%AA%E8%A1%A8%E5%8D%95%E5%90%AF%E5%8A%A8%E5%99%A8%E7%9A%84

《如何正确获得表单验证》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

您还可以设置脚本来%E8%B7%9F%E8%B8%AA%E9%A1%B5%E9%9D%A2以跟踪表单错误:

在表单上使用一系列自定义事件,每个事件代表该表单上的字段。 您的类别应该定义哪个表单标记错误; 你的行动应该定义每个表格领域; 并且您的标签可以是动态的,同时引入触发错误的验证规则的描述和破坏规则的输入值,由管道(即“|”)分隔。 这可能需要开发人员的帮助。

设置完成后,您可以深入查看自定义报告,该报告可对表单上最严重的错误进行量化和分层。 此时,您可以通过检查用户输入的值来评估错误的根本原因。 最后,您应该放松验证逻辑或包含更好的帮助文本,以最大限度地减少妨碍您最重要的转化活动的错误数量。

最后,如果您想通过Google跟踪代码管理器跟踪自己的表单参与度,请参阅以下两篇很棒的文章,说明如何进行设置:

无论您选择何种方式跟踪错误消息,您都可以对受众进行细分,并查看哪些错误消息与弃用表单最相关。 这些是对您的表单转换率影响最大的区域,因此请首先关注修复这些表单字段。

结论

表单验证是使用互联网最令人沮丧的部分之一(至少对我而言)。 在填写表格时,如果不清楚我做错了什么并且没有简单的方法来解决它,那么我更有可能放弃并徘徊到另一个网站。

虽然减少表单字段中摩擦的最佳方法是抢先(明确标签,只有必要的信息,内联验证等),但您可以采取一些措施来减少它们的挫败感。 像:

  • 使用显微镜来增加清晰度
  • 沟通错误时要清楚
  • 沟通错误时要好
  • 不要挑剔

我上面提到的所有内容都可能是最佳做法,但您的网站是独一无二的,因此您需要自己测试一下。 除了常规分析设置之外,还有一些很棒的工具,如Formisimo,可以让您精确地进行表单分析。 在最大的下降点开始测试,看看你是否能够通过让体验更加愉快来转换更多的潜在客户。

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注