我喜欢 Art in my Coffee 上的提交表单。它在一个紧凑的空间内包含了许多功能,并清楚地说明了您可以做什么以及需要您做什么。但最棒的是,我喜欢它首先要求您完成整个表单中最难的部分。
它只是一个简单的文件输入框,为什么它是“最难的部分”?想想这个输入框代表什么。
- 用户拥有能够捕捉照片的设备
- 用户已将该照片传输到其计算机
- 用户知道该照片文件在其计算机上的位置
- 用户已准备好勇敢地面对文件选择对话框以选择它
在这种表单中,如果用户没有准备好数字照片,那么他们真的不应该填写提交表单。将文件输入作为第一件事可以阻止人们做任何不必要的工作。
相反,确实已准备好数字照片的用户可以立即选择它。选择文件的行为让他们从一开始就深度参与填写此表单的过程。就网络表单而言,选择文件是一种非常私人的体验。一旦完成,填写表单的其余部分并提交它就会有一些兴奋感。
我认为这超出了此特定表单的范围。总体信息是:让用户立即执行他们想要执行的操作(可能是“难点”),表单的其余部分将变得轻而易举。以这个例子为例
在这里,我们立即询问用户是否有问题。他们可能一开始就在此表单上,因为他们确实有疑问。让我们让他们先提出问题。一旦他们写出来,他们就对这个表单有了相当大的投入,并且有了一定的动力。填写他们的姓名/电子邮件/电话将很容易。
与之相反
我可以想象这会遇到更少的热情。哎呀,还有更多障碍要克服,我只想问个问题。当然,您在这两个示例中都问了完全相同的问题,而一个纯粹理性的用户会理解当然需要收集姓名和联系信息。但这并不重要,用户在考虑他们的问题,而不是此表单想要的其他信息。让他们先解决难点。
我希望我有一些 A/B 测试可以在这里提供给您,但我没有。我想有一天会在上面做一些测试。所以这只是我根据自己的专业判断抛出的我认为是一个好的 UI 选择。
我完全同意你的观点,Chris,遗憾的是我们看到了太多网络表单的例子,用户被流程所劝退。
客户反馈和信息对我们客户的整个业务至关重要,因此对我们来说也是至关重要的。
一个不错的细节是您自己网站上的评论页面,它能够在我的第一次评论后记住我,因此更容易让我添加未来的评论。
Mark 说的很有道理,我认为被网站记住真的会让用户几乎瞬间感到宾至如归,至少对我来说是这样的。另一篇简短而切题的文章,干得好,Chris。
一个糟糕表单的例子是 dzone.com 的注册页面,他们在那里要求您提供大量实际上并不需要的信息。最重要的是,所有这些都是必填项。
我只是想要一个账户来在那里提交我的文章链接,我并没有要求信用卡。
我认为首先填写表单中最难的部分会让用户完成表单,而不是先填写最简单的部分然后放弃。但同样,在没有硬数据的情况下,很难说。
有趣,我以前没想过这一点。关于参与度和重要性的精彩论点。
这很酷,也很简单。仅仅是查看表单,先解决难点的表单看起来更具吸引力。至少对我来说是这样。
本文中最大的收获和最有力的观点:“让用户立即执行他们想要执行的操作”。
我最近说服了我们团队将文件输入作为文件上传表单的第一个元素,原因正是如此。一旦用户感觉自己正在朝着实现目标的方向前进,他们就更有可能选择一些与该选择相关的选项。
非常有趣——而且简单。我有点认为我应该很久以前就应该这么做了。
这是一篇优秀的文章,因为它很有道理。我有一个网站应用程序,允许成员在社区日历上发布事件。使用这个基本的可用性概念,我可以重新排列“添加事件”表单,让他们先输入有趣的信息,例如事件标题和描述。
也许这个博客上的评论框应该先询问我的评论,然后再询问我的姓名/电子邮件;-)
@Jeff – 如果是在大学实验室中找到的共享计算机,我认为先填写姓名、电子邮件和网站会有所帮助。
特别是如果姓名、电子邮件和网站“已保存”
非常好!!
这些都是一些很棒的观点。
好主意。我想我会立即在 5 个客户网站上这样做。
Chris 的另一个伟大的观察。我将重新考虑我的一些表单。
我从未想过这一点,我总是设置包含姓名/电话/电子邮件/消息的标准联系表单。但你提出了一个很好的观点,我将来一定会应用这个逻辑,谢谢!
太棒了!我想有一半以上的时间,你写出的内容正是我一直在思考的内容。当表单没有先满足我来到这里的目的时,我总是感到沮丧。当我需要先填写 10 个预选问题时,我讨厌它。尤其是我脑子里有一个完美的句子,有时会消失,因为我在填写 10 个信息字段的过程中忘记了它。
Chris 想得很好。现在你一说,它似乎是显而易见的。将乏味的东西——比如姓名、电子邮件等——几乎作为事后想法而不是障碍来呈现。我喜欢它。
您必须小心如何应用此方法。我参与了几个电子商务网站,客户流程的重要部分涉及上传照片。在许多情况下,客户在开始时并没有准备好上传。首先要求照片会导致销售损失。当然,有些人会回来,但有些人不会,这只是生活中的一部分。
上传放在最后,在创建账户并付款后。现在客户真正投入了,并且可以随时返回完成上传。
您也可以争辩说,在这种情况下,难点是提交付款,而不是上传照片。
同意 Juan 的观点。表单字段的顺序取决于表单的目的
一个非常酷的理论,我非常喜欢它。让用户一开始就做困难的部分是有道理的,这样剩下的部分就会变得轻而易举。
我同意你的业余心理学方法!说真的,它看起来确实不那么令人望而却步。
天才,这些是我在网页设计中喜欢的小细节,细节决定成败!感谢分享!
我认为这篇文章的核心观点是,开始更批判性地思考你的一些行为。对我来说,创建网页表单更多是一种必要行为,虽然我让它非常实用且足够吸引人,但我很少考虑结构和流程。有时候分析我们那些传统的方式,并提出问题“对于这个应用来说,这真的是最佳方法吗?”是很有益处的。提出这些问题会孕育创新,即使是在很小的范围内。
在设计表单时,这是一个需要考虑的极佳要点。特别是对于那些询问问题或提供反馈的表单,我发现自己总是先填写那一部分,然后再返回填写姓名、电子邮件等信息。
这就是我喜欢那些评论表单放在所有其他内容(姓名、电子邮件、网站等)之上的博客的原因。
我注意到,这让我更有可能留下评论,因为它首先呈现了我想要做的事情。
你知道我以前从未想过这一点。这真是一个很好的观点,感谢你提出并解释,Chris。从现在开始,我将以这种方式实现我的表单!
我从这个网站学到了另一件事,Chris做得太棒了,这是一个非常好的观点。感谢你的教导!
你提出的观点非常好!我以前从未想过这一点!
从现在开始,将在未来的网站上实施。
我也同意这是一个很好的观点。它让我感觉自己是在做出贡献,而不仅仅是发送一些信息(个人详细信息)。
理论上看起来不错。但是,以这个博客上的评论表单为例。我们可以一目了然地看到,“不要让我思考”的规则在这里适用,用户可以一眼看出表单的用途。是否需要重新排列它们?
我真的很想看到对此进行 A/B 测试。
尽管如此,还是要感谢你的提示。
有趣——我以前从未真正考虑过字段的顺序,但我想下次我会做一些不同的尝试。
它可能是表单中最难的部分,但在大多数情况下,它也是表单的核心,是它被填写的原因。将重要部分放在首位是有道理的。
我喜欢将表单进行排列以消除难点的想法,至少在合适/需要的地方。但是,我知道我在这里有点吹毛求疵,但我真的受不了你的第一个示例表单对文本输入使用了两种不同的样式。我知道其中一个是文件输入,但仍然……我参加过足够多的用户验收测试,知道相当一部分人不会认为那些电子邮件和姓名输入是输入框,并且当表单失败时会感到困惑和恼火。
非常有趣,Chris,这对于当它被突出显示时显得极其明显的内容来说,是一个极好的见解。我将牢记这一点,并在创建新表单时使用它,谢谢……
这正是一个我们因为一直以来都是这样做的而陷入困境的例子。我喜欢这种新的思考方式。再次感谢 Chris 运营这个博客并分享你的见解!
很棒的文章,Chris!我发现了一个语法错误……相反,那些确实有准备好数字照片的用户可以立即选择它。……一张数字照片。
我完全同意你的观点,Chris。我认为你已经很好地解决了难题。干得好!
第一个提交表单是所有 Tumblr 博客的标准 Tumblr 提交表单。
你打算在 css-tricks 上这样做吗?我的意思是将评论字段放在用户详细信息字段的顶部?
不错且有用的想法……
网页表单现在将变得越来越易用 :)
感谢分享!
很棒的文章。
我只是想指出,Art in my coffee 上的提交表单只是来自 tumblr.com 的默认提交表单,因为 Art in my coffee 是一个 Tumblr 博客。
所以,我认为他们应该获得此表单的荣誉。
我同意。我使用 Tumblr 作为我的博客,如果我想接受投稿,我可以很容易地切换选项以使用该表单。
在这方面我完全同意 Chris 的观点。表单的设计应让用户感到舒适,并尽可能简单。
从开发人员的角度来看,这可能需要多付出一些努力,但归根结底,最重要的是观看者的意见。
如何重新思考实际的评论表单?WordPress 总是以姓名、电子邮件和网站开头,而我们实际上是想输入评论。
观点不错,所有元素都与第一印象有关
这是一篇非常有趣的文章,我以前从未想过这一点。
哇,这绝对是一颗宝石,非常有见地,我肯定会在未来的网站上采用这种方法。 :)
我和 Ben 站在一起,你从哪里获得这些想法的
非常简单且有见地。很好的建议,我想我从现在开始将应用这个想法。
有趣的观点,Chris,它仅仅表明在设计表单时应该投入大量的思考。大多数人没有意识到一个优秀的网页设计师可以为表单设计付出多少努力以实现正确的流程。
一些 A/B 测试将非常有趣,毫无疑问,你会发现先完成难点确实在我的观点中是“最佳”的。
好的文章和例子。
我决定在我的 联系页面 上调换一下顺序。我们将看看效果如何。
再次感谢。
不错的文章。也许这与其说是将“最难”的部分放在首位,不如说是让用户首先做他们来这里要做的。
嗯,我将开始应用它。