第 6 集：让用户发疯的网站用户体验

大多数网站所有者都试图创造他们想要体验的用户体验，但有时业务和/或营销目标会创造出让用户发疯的体验。 在今天的节目中，Hannah、Ben 和 Kathy 向 Kadence Beat 表达了他们的不满，但也提供了一些替代解决方案，这些解决方案可能有助于网站所有者避免用户体验决策的陷阱，同时仍然满足他们的业务和营销目标。 我们还回顾了 Kadence Blocks 的后续功能，包括 Meta Box 支持、Show More 块等。

通过下面的控件收听，或将我们添加到您最喜欢的播客应用程序中。

在新窗口中收听。

时间戳和链接

0:00 介绍

0:54 没有在客户所在的地方遇到客户的弹出窗口

2:50 难以消费内容的食谱网站。 食谱盒

7:30 设计不佳的网站

10:26 为什么图片对您的网站如此重要

11:26 Craigslist，你怎么这么复古？

13:34 应用无法与网站连接的身份验证问题

16:28 单点登录

17:48 没有有意设计的联系表格

19:05 支持对小型企业至关重要

19:36 访问 theworldsworstwebsiteever.com 笑一笑

21:15 Kadence 和 Kadence Blocks 即将推出什么

The Kadence Beat 第 5 集的成绩单

凯西：欢迎来到 The Kadence Beat 的第六集。 这是关于使用 Kadence 创建有效网站的播客。 但是对于第六集，我们将进入颠倒的世界。 我们将扭转一切，我们将谈论我们曾经拥有过的最糟糕的网站体验。 也许我们可以通过一些方法来帮助正在创造网络体验的人，而不是犯一些这些错误。

你怎么看，汉娜？

汉娜：我是为此而来的。

凯西：我们有几分钟讨论我们将在这一集中谈论的内容，有点像展前谈话。 我们马上就进入了内容。 我想我们已经为此做好了准备。 我认为我们都有一些很好的网站示例，但我们遇到了一些问题。

我想先去，因为我对互联网上的网站有一些节日级别的投诉。 我想谈谈那些通过弹出窗口让我加入他们的列表的网站，或者更糟糕的是，当我在网站上停留不到五秒钟时，我会问我是否会将它们推荐给朋友。

本：我感觉到了。

汉娜：这是一个非常有效的抱怨。

Kathy：我想指出 Williams-Sonoma、Pottery Barn，他们所有的品牌，他们都这样做。 现在他们要我的电话号码，虽然我喜欢他们的品牌，也喜欢在这些网站上购物，但我不一定希望被弹出窗口击中。 首先，他们已经有了我的电子邮件地址。我以前从他们那里买过东西，我们已经有了关系。 但是，每次我访问他们的网站时，他们都想与我交流，就像我以前从未去过那里一样，而且我不在他们的名单上。 这很烦人。 我只想看看家具和家居用品的精美图片。

汉娜：我认为这很公平。 虽然我会说如果弹出窗口为您的电子邮件提供 20% 的折扣，但我可能会这样，这是一封旧电子邮件，是的，我将享受 20% 的折扣。 但我确实觉得他们应该给你时间先看看他们提供了什么。

凯西：你会给你的电子邮件百分之多少？

汉娜：你知道，这可能不会花太多时间，但这取决于我是否正在浏览一个我真的不知道你是谁并且我不知道你在卖什么的网站，那么我就是很生气，我可能会离开该网站。 但如果你喜欢一个大品牌，如果我要去 Patagonia 的网站，我知道我想要一件夹克，他们会说，这里有 15% 的折扣。 我开始觉得，好吧，生病了，因为我来这里是为了一件夹克。 但如果你是一个我喜欢的网站，我不知道你在卖什么。 我什至不确定我是怎么找到你的。 现在你给我这个弹出窗口，我很生气。 那么我可能只是要离开了。 而且可能大多数听的人都不是巴塔哥尼亚。 所以也许你应该听从凯西的建议，对弹出窗口冷静一下。

凯西：是的，我希望世界上少一些弹出窗口。 本，你呢？ 当您访问网站时，真正让您感到厌烦的是什么？

本：肯定是弹出窗口。 让我比他们想要你的电子邮件地址更多的是弹出的广告。 因此，我正在调用互联网上的每个食谱网站。 我不需要命名任何名字，因为它们都是这样的，尤其是在你的手机上。 就在最近我煮了卡津虾，因为我想吃一些卡津虾。 所以我上网查找了卡真虾的食谱。 当然，您访问的每个网站都单击它，您就会知道，当您真的想查看食谱时，有五页介绍了如何烹饪卡津虾。 当你试图滚动浏览时，你会被弹出窗口击中，因为他们制作卡真虾的视频以及其他食谱和其他一切的大量广告。

只是试图找到食谱，然后你把它坐在那里，你就像，好吧，我可以看到食谱。 然后一个弹出窗口发生整个页面移动，并且该食谱向上滚动或向下滚动。 是的，这是一个，这是一个悲惨的经历。 所以，嘿，给大家的专业提示，Recipe Box 是一个免费的应用程序，我喜欢它。 您可以访问您尝试从中获取食谱的网站，复制 URL 并将其放入食谱框中，它实际上会抓取实际的食谱和说明，并将其转换为易于阅读的格式。

汉娜：太棒了。 几个月前，Ben 告诉我这个应用程序，我一直都在使用它，因为即使你在食谱页面上并且你喜欢向下滚动并且试图截取食谱，到那时你实际上做了截图，弹出了八个视频。

然后视频太小了，您甚至无法退出。 然后你炸毁了视频。 然后到那时，我想，我只是要编一个食谱，因为这太烦人了。 所以食谱盒是合法的，但也许你会，不应该在他们的食谱页面上放这么多广告。

凯西：他们为什么这样做？ 为什么有所有的广告，为什么有所有无关紧要的东西，为什么不直接给某人食谱呢？ 你有没有搜索过另一个食谱并说，哦，上帝，又不是那个网站。

汉娜：实际上不仅仅是广告。 这就像，当你试图找到你的食谱时，你必须滚动浏览整个人生故事。 然后你必须听说他们的姑姑在他们叔叔的葬礼上做了这个食谱，就像，等等，等等，等等。 我想，我只想要食谱。 我不需要知道这一切。

凯西：嗯，他们一定有一些业务需求，这导致他们……

本：你可以和食谱网站交谈，他们会说，嗯，我们必须以某种方式赚钱。 我们做所有这些工作来创建所有这些内容，获取这些食谱，获取图片，获取视频。 就像我们必须以某种方式赚钱，没有人愿意为食谱买单。

我们不是。 如果有人对食谱收费，而不是展示广告，我们不会，我们绝对不会去他们的网站。 我们会说，你正在为一个食谱收费。 这就像收费阅读他们的文章的新闻网站。 这就像最简单的点击一样，哦不，有一百万个新闻网站。 我不需要你的。 除非它像，我们可以叫纽约时报，因为他们的设计很糟糕。 他们是非常优秀的记者，对，值得订阅，但伙计，他们的应用程序和他们的网站，就像，呃，无论如何。

我认为如果您的网站上有广告，因为如果有人在听一点，我，我，我必须获得广告收入，有两种方法可以接近它。 就像一个一样，我需要获得尽可能多的广告收入。 所以我必须在这个网站上加载广告，我会一直这样做，直到“他们只是愤怒地离开”的滋扰之前。”所以这对用户来说将是一个主要的滋扰。 而且我想知道是否没有一种方法可以制作不令人讨厌的广告。 这会让我回到你的网站，或者如果没有策略，因为就像我不去食谱网站搜索食谱，我搜索谷歌然后我看到结果是什么。

但如果我知道有一个食谱网站，我喜欢这些食谱及其设计，而且他们没有投放一百万条广告。 也许那是一个我会去看看的网站，“嘿，他们有食谱吗？”或者它甚至可能是我去的一个网站，我想订阅它，这样我就可以看到有什么新食谱出来了和。 然后还有更多的方法，也许如果您正在运行一个食谱网站，您可以创建一本电子书，然后以几美元的价格出售。 就是这样，如果它的价格足够低，而且我已经看过你的一些食谱，我真的想要那个卡真虾食谱，你展示一张漂亮的照片，然后我可以看到这是一种也赚取收入。

所以，我的意思是，我认为其中一些是有创意的，而最简单的方法就是放入谷歌广告，然后说，是的，折磨我的用户。

凯西：当然。 汉娜，你有没有让你在网上发疯的网站或真正影响你的网站体验？

Hannah：我不知道有什么特别的网站，但在过去的八年里我一直在做支持。 因此，我看到了许多需要大量帮助的网站。 所以当谈到喜欢的设计时，我想这会让我很反感。 就像我去你的网站，你知道，有人问，我怎样才能让我的标题更大？ 而且，然后你就得到了这张背景照片，就像完全分散了内容的注意力，或者你的颜色消失了。 我们在一页上使用了八种不同的字体。 我不会给你很多信任，因为我只是被你的设计关闭了。

Ben：我经常用背景图像捕捉到人们，尤其是在他们上面有文字的地方，他们已经为特定的屏幕尺寸设置了它，而这是他们碰巧看到的屏幕尺寸。 他们就像，嗯，你知道，就像，你可以阅读这个屏幕大小的文本。

汉娜：哦，我见过这么多。

本：是的，炸掉屏幕。 突然之间，文字覆盖了图片的黑暗部分，它根本不起作用。 这是一个非常常见的新手错误，我在这张对比度太大的图像上得到了这个漂亮的文字。 如果您要在图像上放置文本，请不要使用高对比度的图像，但是，呃，它们可以在它们的一个屏幕尺寸上工作。

然后，你知道，他们没有把它放在其他人身上，这就是它真正崩溃的地方。

汉娜：我特别记得一个人，我们爱我们所有的支持者。 对。 我们非常感谢做我们所做的事情，但有一个人特别与我们一起工作了大概六个月，他的网站非常糟糕。 我的意思是，由于很多原因，这很糟糕，但我们帮助了他，他希望它看起来像这样，我们将帮助他让它看起来像这样。 但也很难忍住，实际上，你应该改变一些事情。 我们确实做到了。 希望他有一个网站。 这不仅是他想要的，而且是有效的。 但这很有趣，人们来找我们的那种东西，我想，啊，你在这里错过了一个大问题。

Ben：我想通过 Kadence 为您提供构建精美网站的工具。 我想为您提供构建有效网站、构建快速网站、构建可访问性网站等合规性网站的工具。 但是通过为您提供这些工具，这意味着您可以构建不合规、速度不快的非常丑陋的网站，所有这些事情都可能反过来发生，因为我们试图创建我们的工具，我们并没有锁定您这就是它的本质，我们将强迫您拥有一个漂亮的网站。 即使你想要一个非常丑陋的。 这不是 Kadence 的目标。 我们只是想让您建立一个漂亮的网站。 所以这意味着我们已经授权人们建立很多非常不漂亮的网站。

汉娜：我们提供帮助，我们尽力提供帮助。

凯西：特别是，像入门模板这样真正帮助人们开始使用设计师实际上花了很多时间思考的东西。 只需更改这些品牌颜色和所有内容，您就可以朝几个方向前进。 但这有点让你在线条中着色，可以这么说，而不是，你知道，转向荒野。

本：是的。 是的。 这就是其中的一部分。 我认为人们必须意识到的部分内容是，即使他们正在使用入门模板，图像对于您的设计来说也如此强大。 它们对于用户如何了解他们的感受以及他们对您的网站的看法意义重大。

所以我们谈论的是糟糕的体验，比如当你进入一个网站时，图像显然不合适。 他们只是没有，他们的大小不稳定，他们抛弃了布局，或者他们只是，背景有太多的对比。 所以你很困惑，或者你有竞争的东西，你的图像中有竞争的颜色。

这类错误真的很容易，因为你会说，“嗯，这些是我的照片。”而且没有多少人有预算，我们要去为我们的网站拍摄专业照片或我们的业务或其他任何东西。 前几天我和一位设计师开玩笑。 我当时想，你一半的时间都花在搜索图像上。 设计是一回事，但获得正确的图像对于制作它、让它发挥作用非常重要。

说到设计，我想扔掉一个网站，每次我去那里，我最近都在那里寻找山地自行车。 我想，为什么他们仍然是这个设计，那就是 Craigslist。 如果你曾经在 Craigslist 上过，你就会确切地知道设计是什么，因为自 Craigslist 推出以来它一直是一样的，他们采用了这种方法，我想，我们不会使用 CSS，因为我可以不知道你最终会如何得到这个设计。 但是，就像这里一样，他们就像获得了如此多的流量。 他们一直在获得如此多的流量。 人们可能会说，嗯，它奏效了，但我不知道。

像我一样，Craigslist 是一个很容易解决的问题。 就像没有很多事情需要做一样。 就像我们需要让网站响应式一样，我们只需要稍微清理一下 UI，使其更易于导航、更易于查看。 相反，它只是一长串链接。 这太奇怪了。

凯西：就像九十年代的雅虎一样。 它仍然具有相同的氛围。 对。 它震撼了复古场景。 这对我来说很疯狂，我只是在他们的维基百科上，截至 2017 年他们有 50 名员工，但仍然有 50 名员工，他们在 2016 年的收入：6.94 亿美元。

本：天哪。

Kathy：不过，他们不会为 CSS 付费，对吧 Ben？ 这是本的笑话，我在偷它。

汉娜：当你在他们的网站上时，你会觉得你就像在某个老人的车库里购物，这有点怪异，也许他们希望你有那样的感觉，我不确定. 这很奇怪，但仍然有很多人使用它。

本：我，我们刚刚做到了。 我刚在 Craigslist 上买了一辆山地自行车。 我想，我正在使用这项服务，我想，只是修复你的设计。 是的，很狂野。 我的意思是，难怪他们也会因为这种粗略的购买方式而获得代表。 就像，它只是得到了这个……

汉娜：这个老人的车库感觉。

凯西：这是一个无意识的警告。

本：好的。 好吧，在这里我得到了另一个例子，就在那天发生在我身上。 善良。 所以我们得到了一台惠普打印机。 我们决定注册他们的即时墨水服务，本质上你就像使用打印机的应用程序一样，该服务会监视打印机中的墨水量，当你的墨水量变低时，他们会向你发送更多墨水。这非常令人困惑，因为他们实际上并没有每月向您发送墨水，但您每月支付。 您根据要打印的页数付费，并且那里有一些翻转。 这些都没有任何意义，因为他们不会每个月都给你寄墨水。 所以这不像他们给你每页一定数量的墨水。 但无论哪种方式，这都是他们的服务。 我之所以参加，是因为我们实际上从未从他们那里得到任何墨水。

我们已经六个月了，我们的打印机需要墨水。 我当时想，他们为什么不给我们寄墨水？ 就像现在我们必须去商店买墨水。 所以我正在浏览他们的应用程序，然后将我发送到他们的网站。 当然，我已经登录了该应用程序。

现在我在他们的网站上，他们要求我再次登录，因为他们没有制定出身份验证部分，而且他们的应用程序有大约三页内容，而不是其他所有内容基本上都会将您发送到他们的网站。 所以我想看看，他们有没有运送过任何东西，或者他们正在运送一些东西，任何那些东西？

网站和应用程序一直在我现在在网站上来回踢我，不是在应用程序中，而是在浏览器上。 而且我已经登录了四次，我登录了应用程序，然后登录了浏览器，然后它被踢回了应用程序。 然后我回到浏览器，不得不再次登录，然后我被踢了回来。

然后再次返回浏览器，再次登录，只是为了了解运输状态。 因此，对于如此大的公司，我会将其列为同类中的一个，哇。 这是惠普，没有这个。 他们通过即时墨水服务赚了很多钱。 令人惊讶的是，他们没有弄清楚登录身份验证，特别是如果您要构建一个应用程序，无论如何都要将每个人都发送到您的网站，这似乎是一个关键部分，但是，是的，我登录了四次并且我终于放弃了，就像，我将不得不在桌面上执行此操作，他们不再在应用程序和浏览器之间来回踢我。

凯西：几乎听起来组织中有两个团队。 网络团队与应用团队在完全不同的建筑中工作，他们彼此不交谈。 组织中可能有类似的规则，即安全规则，阻止这两个团队实际相互通信。

本：有趣的是，我结束了试图联系联系人。 也许我可以联系他们，然后我点击它，它说我需要登录才能进行即时聊天。 我当时想，我完了。 我没有再次登录，因为我知道一旦我登录它就会把我踢回应用程序。

因为它会像，哦，你在应用程序上。 所以我们只会让你回到应用程序，然后我会再次点击联系按钮。 它会带我回到网站并说，你想登录吗？

汉娜：必须登录是最烦人的事情。然后重新登录，当人们记得我的登录时，我很高兴，但是为了一个站点上的一个需求而不得不一遍又一遍地登录是很烦人。

本：是的，这很棘手。 您对使用 Google 帐户有何看法？ 或者让我们说您的 Apple 帐户或任何要登录的东西，例如这些随机商店或您使用的东西，您会这样做吗？

汉娜：我愿意。 是的。

凯西：是的，我经常这样做，显然在任何类型的单点登录类型的情况下，这是你必须注意的事情。 你把所有的鸡蛋都放在一个篮子里，有人入侵了你的电子邮件帐户和你的…… 基本上一切都妥协了，对吧？ 因此，如果您使用单点登录，它肯定会节省时间，而且要容易得多。 我不必加载 LastPass 或 1Password 即可输入另一个密码。 但是，出于同样的原因，您必须确保无论您使用什么，无论是 Google、Facebook 还是 Apple 或其他任何东西，该帐户都受到严格保护。

您在网上看到的任何其他问题。 我有一个完整的洗衣清单。 我的意思是，我可以永远抱怨一切。

Ben：我肯定看到的常见问题，即使在高度专业的网站上也不清楚。 我不知道你卖什么，做什么，或者这对我有什么帮助。 我环顾四周，然后离开。 或者就像你有一个五分钟的视频来解释一个非常简单的产品，除非他们观看那个五分钟的视频，否则你不会解释那个简单的产品。

凯西：我有一个关于联系表格的，尤其是联系表格 7，我知道很多 WordPress 领域的人都在使用它。 联系表格 7 的确认信息可能会被忽略很多次，因为它只是一小行表明您的联系表格已提交。

但它太小了，并没有真正给用户一个联系表单所经历的视觉反馈。 我只是提出了联系请求，三天没有收到任何回复。

他们得到那个联系了吗？ 我是否应该尝试寻找其他方式联系这家公司，因为我有一个需要解决的问题？

因此，这类似于有人走进您的店面却没有人与他们交谈。 他们只是四处走动，看东西，而您的楼层工作人员就像在角落里，看着他们的手机，他们只是无视客户。 您不希望在您的网站上出现这种体验。

因此，确保您的网站以客户为中心可确保有一种有意义的联系方式。 很多人不希望这样。 对。 他们想减轻支撑负荷。 因此，他们制作联系表格或一种联系方式，实际上与一个人交谈变得更加困难，因为他们不想给他们的支持人员增加更多负担。

但是，但是你在那里失去了一些东西。

本：是的，我看到很多大公司都在这样做。 这很令人沮丧。 如果您是一家小公司，那么支持就是人们选择小公司的一切，因为他们希望能够接触到一个人。 嗯，是的。 专业提示：Kadence 块。 我们有一个合同块和一个表单块。 在 Kadence pro 中，您可以将它们保存到数据库中。 您还可以直接从该联系表中进行自动回复。 所以他们抓住那封电子邮件并发送回复。 嘿，我们得到了你的票。 已提交。

我认为，我认为每个人都应该做最后一件事来让他们的日子过得更好。 那就是去worldsworstwebsiteever.com。 只是笑一笑。 它非常出色。 你会在网页上看到世界上最长的数字。 这将使您的滚动条正确运行一段时间。 这个网站有很多不错的、隐藏的小东西，呃，只会让你发笑。

汉娜：这非常了不起。 我认为热狗背景图像是真正从我这里得到的。

汉娜：只是一个很好的接触。

本：选框比赛也非常棒。

汉娜：我想知道这在手机上是什么样子的。

Ben：我从这个网站开始使用移动设备，它，是的，它看起来就像只是在移动设备上。

汉娜：太棒了。 我们喜欢那个。 对于不该做什么的终极指南。 这就是你要去的地方。 别客气。

凯西：漂亮。 有人可以用 Kadence 构建这样的东西吗？

Ben：你可以这样……如果你愿意，你可以。 我不知道其中一些，我想。 因此，您需要一些自定义 CSS 才能真正有效地强制它不响应。 就像这个网站一样，文本永远不会折叠。 没有最大宽度。 但是你可能可以用 Kadence 做到这一点，所以。

Kathy：显然，Kadence 中没有任何东西阻止任何人使用漫画 Sans 或眨眼标签。

本：是的。 或选框标签。 是的。

凯西：太好了。 好的。 嗯，这是一个有趣的讨论。 Kadence、Ben 即将发生什么，人们应该注意哪些内容以更新他们的更新？

Ben：是的，请尽快考虑，并且正在进行大量内部更新，但我们应该有 Kadence Blocks 和 Kadence Blocks Pro 更新，希望在接下来的几天内，我会这么说，并且这将为 pro 带来一个新块，它是一个动态列表块，可让您根据当前帖子的内容来获取分类或其他内容。

因此，如果您想显示这篇文章属于哪些类别，您将能够做到这一点。 您可以通过某些方式对其进行样式设置，但您也可以使用您创建的高级自定义字段或元框等复选框列表，以列表格式显示哪些已被选中。 所以这会有所帮助，它有助于构建自定义模板，您需要在 Kadence 中显示不同的东西。 这是一个新的专业版块。 我们还添加了对 Meta Box 的全面支持，这有点像高级自定义字段，它非常受欢迎。 然后免费，我们添加了一个显示更多块和一些更新，比如你将能够动态地获取画廊。

然后有一些针对不同事物的内部修复。 但最终就像我们这样做的大多数事情一样，就像，嗯，不，我们需要解决这个问题。 而且我们有，这些最终将是相当大的更新，因为我们必须在结构上设置多少，部分原因是5.9出现的一些错误看起来并不就像我们要在 6.0 中修复一样，所以我们要继续修复它们。

就像，如果您在块上打开了一个面板，然后切换到平板电脑视图，则该面板将关闭。 所有核心块都会发生这种情况。 你可以称它为错误，因为它不应该发生，但它也比这更具技术性。 所以像这样的事情，我们正在为此创建解决方案。

所以这些是接下来的大事。

凯西：令人兴奋。 是的。 前几天你给了我们一些关于正在发生的事情的预览，我很高兴能将所有这些介绍给 Kadence 社区。 我认为人们会对其中一些新增功能感到非常兴奋。 非常非常酷。 好吧，我想这就是我们今天为 Kadence Beat 所拥有的一切。

我们希望这是一个有趣的，但也有关于一些让用户发疯的错误的信息丰富的讨论。 希望您可以从中学习，并开始使用 Kadence 创建更有效的网站。