盘点史上最烂的7个UX设计案例（附解决方法）

编者按：优秀的设计当中有值得学习的优点，而糟糕的设计也同样不是一无是处的，你可以从中学到很多价值非凡的……教训。Ben 撰写的这篇文章基于一组著名的讽刺性的 UX 设计案例，他们的讽刺足够辛辣，但是同样也映射到现实中的许多设计，看看我们能从中学到什么吧！以下是正文。

更多UX设计干货：

糟糕的用户体验会让戳瞎你的眼睛。

作为设计师，我们天生喜欢设计精美的东西。

我们习惯于从苹果、Airbnb 和 Linear 中寻找设计模式的灵感。我们拍摄街头制作精美的海报。我们收藏带有创意动画的网站。但有时，丑陋的事物能给我们带来比你想象的更多启示。

在认知科学中，有一个心理学原理叫做「消极偏见」，它说的是人类对消极经历比积极经历更敏感——这就是我们会记住坏经历多于好经历的原因。

糟糕的设计不仅会伤害我们的眼睛，它还常常会留在我们心中，成为激励我们的强大工具。在接下来的文章中，让我们看看 Reddit 上著名的 badUIBattles 论坛板块中最糟糕（也是最搞笑）的设计案例，看看我们能从中学到什么。

#1、祝你能够顺利取消订阅

祝你顺利取消订阅

上面的讽刺设计可能看起来很极端很有趣，但不幸的是，如今许多公司都使用类似的欺骗模式，让用户难以取消订阅他们的服务。上述设计有两个主要问题：

问题 1：隐藏的取消订阅按钮，使得用户难以找到退出方式。

虽然你不希望用户退订，但隐藏退订按钮并不会让他们更喜欢你的产品。如果用户决定采取行动但找不到按钮，你只会让体验变得更糟，并在客户与你的品牌/产品互动的最后一刻，给他们留下不好的印象。

但不幸的是，这是许多公司为阻止订阅者退订而采用的模式。下面的电子邮件是 Tattly 发给退订用户的，其中包含过多的文字和多个 CTA，为试图退订的用户带来不必要的麻烦。

你能在邮件中找到取消订阅按钮吗？

问题 2：不熟悉的模式让用户感到困惑

与上面的例子类似，由于风扇把你的光标吹走了，你永远无法触及按钮，许多公司使用「暗黑模式」（就是反逻辑反习惯的设计模式）来诱骗用户点击错误的按钮，以留在产品中——比如切换号召性用语按钮的位置，以便用户「误点击」，因为大多数情况下，用户都熟悉突出显示主操作按钮。

Cake 颠倒按钮的顺序和颜色样式来诱骗用户不取消订阅

你应该怎么做呢？

如何说再见与如何说你好同样重要

你应该做的是让流程透明化。确保将取消订阅按钮放置在用户期望的位置，例如设置页面、帐户页面或结算页面。

如果你想了解用户离开的原因，以便制定策略，请抓住机会，在用户点击取消订阅时添加一个简单的问卷或者反馈页面，让他们自愿分享离开的原因。采用这种方式之后，你也许会对获得的有用反馈的数量感到惊讶。

提供有意义的优惠

如果你想建立一种机制来阻止客户离开，有时提供一些有意义的、有价值的东西，比如一次性折扣或免费试用延期，可以帮助客户在最后一刻重新考虑是否要留下。

例如，在取消Hotjar 的服务时，如果取消的主要原因是费用太高，产品方会为你提供临时折扣，以便你不必取消订阅。

另一个例子是Jasper。如果你决定对订阅降级，他们会为你提供 30 天的免费延期，这样你就有更多时间探索产品。

Hotjar 为用户提供 2 个月的免费订阅服务，以说服他们不要取消。

当你取消时，Jasper 提供额外 30 天的延长试用期。

#2、这只是另一个奇葩的加载界面

祝你加载成功

加载界面是产品中最容易被低估和忽略的界面之一。

想象一下在咖啡馆等咖啡的场景。当你能看到店员在做什么时，你会感到更舒服——磨豆子、煮牛奶——因为这让你确信事情取得进展，你将会拿到你的咖啡。但想象一下员工在后厨工作，你看不到他们。没有可见性，很难估计要等多久，让你感到焦虑和恼火——而这就是加载界面的重要性所在。

你还记得被 windows 系统更新加载进度条支配的恐惧吗

当你看到数字产品的加载屏幕时，也会有同样的看法。Fiona Fui-Hoon Nah 开展了一项关于用户等待时间和反馈对用户容忍度影响的研究，发现用户在看到进度条后会等待 22.6 秒，然后才会放弃浏览网页；而如果没有进度条，由于无法看到进度，用户的等待时间会下降到只有 9 秒。

有进度条时用户等待的时间与无进度条时用户等待的时间有明显差别

你应该怎么做呢？

劳动幻觉

在设计加载界面时，请尝试利用劳动错觉的心理学原理：即使只是很小的步骤，显示可见的进度也会让用户感觉正在发生有意义的事情。使用现实而具体的信息来告知用户预计的等待时间，以及正在进行中的步骤。

这有助于用户保持用户参与度，并减少感知上的等待时间。Veed.io 就是一个很好的例子，它使用动画和状态更新让用户在等待时了解当前情况，将无聊的加载时间变成了有趣的时刻。

Veed 的加载界面（等待创建视频）

让用户保持参与度

在某些情况下，加载时间会很长，例如下载大型文件。在这种情况下，与其强迫用户坐下来等待，不如尝试启用后台静默进行，以便用户可以继续他们的操作而不会受到之前任务大的影响。如果无法隐藏到后台，请抓住机会向用户介绍你的产品，以便用户一直停留在你的产品当中。

我在 PlayStation 上非常喜欢的游戏之一是 MLB The Show。但是，由于文件大小约为 30 GB，因此安装完整游戏需要相当多的时间。MLB The Show 设法解决的问题是在用户开始玩游戏时提供轻量版的 Demo 游戏。当他们玩完 Demo 游戏（通常约 1 小时）之后，完整游戏就几乎可以玩了。

Mlb the show 中的 Demo 模式

#3 通过打败电脑证明你是人类

我们只是想确保你不是人工智能。

我相信你在生活中不止一次见过 CAPTCHA ，也就是我们俗称的「验证码」——这是企业用来阻止机器人访问或滥用其服务的一种流行技术。

然而，你是否知道，对于用户来说，CAPTCHA 的失败率接近 29%？此外，视障人士报告称，CAPTCHA 是当今视障人士访问网站最困难的障碍之一。

这意味着一件事——虽然 CAPTCHA 可以防止机器人滥用软件，但它们通常也会阻止大量合法用户。

视障人士上网体验报告

你应该怎么做呢？

关于 Captcha 的重新思考

在采用 CAPTCHA 之前，请考虑它是否是你唯一的选择，或者是否可以采用其他方法（例如电子邮件或电话验证）。

如果需要使用 Captcha，请查看所有可能的选项，以避免让用户感到沮丧。例如，reCAPTCHA ，也就是使用点击复选框或选择特定图像等技术来实现，这与传统的基于文本的 CAPTCHA 相比，这些技术对大多数用户来说相对简单且不那么令人沮丧。

reCAPTCHA

#4 使用风扇移动光标

祝你输入密码顺利

你是否尝试过用遥控器在智能电视上打字，或在 PS4 或 Xbox 上输入 Wi-Fi 密码？这是一种令人痛苦和沮丧的体验——就像上面的例子一样。

很多时候，在设计产品时，我们会针对特定类型的设备（网页、移动设备或应用）优化体验，但我们并不总是考虑这会对访问产品的所有用户产生怎样的影响。如果你给用户带来不便，无论你的产品有多好，他们都不会使用它。

你应该怎么做呢？

使用数据了解流行的屏幕尺寸

解决此问题的一种方法是了解用户最常用的设备或屏幕尺寸。这种洞察可帮助你确定需要针对哪些设备或屏幕尺寸优化你的产品。

根据这些数据，你可以确保所有主要屏幕尺寸或设备都得到照顾。例如，由于大量 Netflix 用户使用智能电视访问他们的应用程序。Netflix 允许用户通过二维码或短网址登录电视。这种方法无需使用遥控器输入超长的帐号密码，从而显著改善了用户体验。

Netflix 的二维码登录方法

#5 真正的深色模式

深色模式

深色模式的发明和实现并不是因为设计师认为黑色很酷。

研究表明，深色模式可以为长时间盯着屏幕的用户提供更舒适的体验。此外，深色模式还更节能，因为它们消耗的电量更少。

然而，大多数深色模式的实现方式都是错误的。许多公司认为暗黑模式仅仅是切换到纯黑色（#000000）和白色文本，或者只是反转当前颜色。这种方法通常会导致可读性差、眼睛疲劳加剧，用户体验更差。

你应该怎么做呢？

使用深灰色，不要使用纯黑色

经验法则是避免使用 #000000（纯黑色）作为背景颜色。相反，应使用较柔和的深灰色（如 #121212）作为背景。

这些颜色可减轻眼睛疲劳，并带来更精致、更专业的外观。Google的 Material Design指南还建议使用深灰色作为背景，以平衡舒适度和可读性。

Google Material Design 指南

确保高对比度，但不要太过

处理深色模式时，请仔细检查以确保你的文本和 UI 元素符合 WCAG 标准的最低对比度 4.5:1。WebAIM 对比度检查器等工具可以帮助微调对比度，以确保你的暗黑模式符合无障碍标准。

#6 大金刚输入法

祝你能够成功输入你的名字。

你是否遇到过这样的情况：网站要求你填写姓名，但你却发现网站不接受你姓名的格式？例如，我认识一些名字只有一个字母的人，他们经常被阻止填写，因为大多数表格不接受单个字母。

另一个常见问题是网站将名字和姓氏字段分开。虽然这有助于数据结构化，但它常常导致用户感到沮丧，因为用户需要多次点击才能完成一个简单的步骤。

你应该怎么做呢？

尽可能合并字段

只要可行，就将名字和姓氏合并到一个标记为「全名」的字段中。这样，用户可以更轻松地输入全名，并减少因格式限制而导致错误的可能性。如果需要，你可以依靠算法将输入分解为组件。https: //uxmovement.com 的 Antony这样描述它：

「并非每个用户都有姓和名。他们的文化背景决定了他们的名字的形成方式。例如，如果你来自拉丁美洲，你很可能有两个姓氏，分别来自父母。如果你是中国人，你的姓氏和名字的位置是相反的，并且总是一起使用它们。」

设定明确的期望

尽可能添加占位符（例如「John Doe」），以帮助用户了解要输入的内容。确保字段标记正确，以便用户确切知道填写表单所需的内容。

使用占位符来设定明确的期望

#7 用贪吃蛇游戏来输入你的年龄

用贪吃蛇输出你的年龄

除了姓名字段的问题之外，大多数生日的字段输入也搞得过于复杂。我遇到的一个常见问题是，日历选择器在选择生日时通常会设置为当前日期。也就是说，作为用户，我需要回滚到 20 年或更久才能选择我的生日日期。

另一个相关问题是，强迫用户必须使用日期组件（例如，月、日和年的下拉菜单），而不提供直接输入日期的选项。

你应该怎么做呢？

建立有效的默认参数

尽可能根据你的用户设置智能默认值。例如，如果你的用户平均年龄约为 30 岁，则将年份默认为当前年份减 30。这可让大多数用户免于无休止地滚动日历来选择他们的出生日期。

允许直接输入

尽可能让用户直接输入生日，而不是只依赖日期部分。使用清晰的标签（例如「MM/DD/YYYY」）来设定期望，让用户更轻松地输入信息。

日期输入

结语

总而言之，尽管这些 UX 示例被认为是极端和有趣的，但不幸的是，这些糟糕的 UX 方面中的许多都出现在我们日常使用的许多软件中。

通过学习这些有趣和最糟糕的设计，我们可以了解如何创造不仅可以避免挫败感而且还可以积极取悦和参与的用户体验。