盘点那些让人抓狂的奇葩网站功能与用户体验设计

我们热爱网络。如果不是蒂姆-伯纳斯-李爵士的惊人发明，我们都将不得不寻找不同的职业 尽管我们充满激情，但网络可能是一个令人不快的地方。

Dark Patterns可能是无意的（了解更多关于Dark Patterns的信息）。营销人员或开发人员可能认为他们在做正确的事情，但没有意识到他们实施的某项功能的问题和缺点。最糟糕的Dark Patterns是故意的。一个页面欺骗你去做一些你不打算做的事情，因为用户界面或措辞操纵了你的行动。用户对最可疑的技术越来越聪明，但在某个地方，有人会发现他们被骗了，直到为时已晚。

如果使用得好，网络可以节省时间、旅行和精力。反过来说，Dark Patterns浪费了数百万的工作时间和千瓦。我们不会羞辱任何特定的网站（他们知道自己是谁），但我们会在可能的地方说明改进和替代方案。

这些是我们的痛处。

1. 不直观的用户界面
2. 操纵性营销
3. 糟糕的技术

不直观的用户界面

这些是你会遇到的最常见的Dark Patterns。创造一个好的用户体验需要时间和考虑……而你可以用这些碍眼的Dark Patterns迅速破坏所有这些努力。

APP诱导

一些网站和社交网络提示你安装他们的应用程序–通常是在点击一个关于新消息或追随者的电子邮件提醒时。该链接在一个有两个按钮的网页中打开：

1. 一个巨大的 “Use Our App” 按钮。点击它可以进入AppStore，在那里你必须批准、下载、安装，然后启动该网站的原生应用（假设你的手机支持该应用）。然后你必须登录，弄错密码，请求重置，打开链接，创建一个新密码，然后进入系统。你可能已经忘记了你为什么在那里，所以回到原来的警报，重新开始。
2. 一个细小到人无法阅读的 “continue in mobile web” 的链接来执行该操作。

不，谢谢–我不需要你的应用程序!

也许这个应用程序很光鲜，并在上面花费了数百万美元，但很少能找到比网站功能更强的应用程序。当然，一个应用程序可以比网络系统收集更多的个人数据，所以它得到了更多的干扰性的推广。

通过各种手段推广一个应用程序，但在每次互动的开始就这样做会让用户感到厌烦。有些人会安装应用程序以停止唠叨，但其他人会离开。在用户使用网站一段时间后再提供应用程序会不会更有效？

网站通知订阅

一句话：不。

有没有人点击过 “Allow”？

通讯注册、基于网络的推送通知、”让我们聊天 “小工具和调查提示可能是有用的，但它们的实施普遍都很糟糕。

网站往往在你搜索后第一次访问时就提示你要订阅。在这一点上，你不知道内容是否相关，是否有任何好处，或者该网站是否是你考虑经常访问的地方。发现大多数人点击 “不 “并不令人惊讶。

提供通知或新闻简报并没有错，但最好先确保用户已经参与了网站。也许在文章的结尾或在他们访问过几次之后显示一个提示。这样做的干扰性较小，不会分散注意力，而且更有可能成功。

最后，请不要在用户点击简讯中的链接时提示他们注册简讯! 这将使他们更快地离开，而不是吸引他们进来。

奇葩导航

标题栏和下拉菜单可能很无聊，但人们能理解它们。我们不想阻止UI的进化和设计的创造性，但有些导航控制是奇怪的，不符合逻辑的。

如果你需要用 “点击这里” 的工具提示或其他帮助方法来提示用户，请重新考虑你的设计。好的UI不需要解释。

不必要的滚动跳跃

当页面滚动时，显示动画或更新活动的菜单项可以是一种吸引人的体验。在以下情况下，它就不那么有用了：

1. 动画被过度使用。太多元素的动画会分散浏览者的注意力–突出每一个项目意味着没有什么能引起用户的注意。用一些微妙的效果来关注重要的信息效果更好。
2. 它打破了上下文。滚动不应该导致意外的动作，如内容消失、模式对话框、表单提交、重定向到其他页面等。

动画也会导致晕动症和眩晕，所以考虑使用CSS的 prefers-reduced-motion 媒体查询来禁用效果。

请不要再创建无限滚动的页面了! 与相关内容的链接是有用的，但未经用户同意自动加载随机内容会浪费带宽。它使人很难将任何一个页面加入书签，使人无法在页面页脚到达联系细节和其他信息。

不必要的多页文章

我们都见过这样的 “文章”，它包含一段文字，然后是一个通往下一页的链接。这些页面通常是链接诱饵，没有实质性的内容–但你不会发现，直到你涉足众多的广告和页面印象。

要求网络营销人员停止这种做法是徒劳的，但如果开发者教育人们不要屈服于这种无稽之谈，也许他们会重新考虑！

操纵性营销

网络是世界上最大的市场，有能力销售无限多的实体和数字产品。用户会一次又一次地回来……除非你选择诉诸于Dark Patterns来促进销售。

订阅挣扎

取消通知或新闻简报的订阅应该和订阅一样简单，如果不是更简单的话。要求用户跳过取消订阅的障碍会导致挫折感和对网站失去信心。没有可信的理由要求用户传真他们的出生证明原件、三个地址证明和最新的医疗记录。

伪装的广告

广告在许多网站被过度使用，但最糟糕的例子：

1. 看起来像一个菜单或选项；
2. 假装是原网站的新闻或信息文章；或
3. 显示用户界面控制，如在一个关于软件产品的页面上显示一个大的 “DOWNLOAD” 按钮。

下载网站上的广告，使你远离实际的下载。

网站不能总是决定使用什么广告设计，但他们可以控制广告的位置。把广告放在显眼的位置来迷惑人，可能会增加广告收入，但这些用户会回来吗？

自动将产品添加到购物车中

看到相关或推荐产品的列表可能是有用的。在未经用户同意的情况下将它们添加到用户的购物车是另一回事。有多少人会觉得它有帮助？

• 最多只有一小部分用户会注意到这个额外的项目并决定保留它。
• 更大比例的人将会删除它。
• 有些人在交货前不会注意到，然后抱怨并要求退款。

这些活动增加了销售额，但却牺牲了客户支持、商誉和持续的退货购买。处理投诉和退款可以抵消任何短期利润率的增加。

隐藏的购物成本

花时间选择一个产品，注册，输入你的送货细节，并发布你的付款信息，发现价格已经高于竞争网站，这不是一件令人愉快的事。总结页面现在显示了隐藏的费用，如送货、保险、处理和 “希望你不会注意这个” 的费用。

定价应该是清晰和诚实的，否则客户会对电子商务服务失去信心。当送货费用差别很大时，应提示用户在承诺购买前输入他们的国家或邮政编码。

人为的库存稀缺性和可用性定时器

知道一件商品何时有库存是很有用的，但有些电子商务网站会扩大可信度。他们提供的信息越多，他们就越不可信：

“立即购买! 仅剩2件，过去3分钟内已卖出15件，当前共597人正在浏览该商品“。

这些高压策略在应用于数字或高价值物品（如汽车和度假）时变得更加可疑。

用户很快就意识到，当物品在许多天内仍有库存时，这些信息是毫无价值的。当网站的营销信息不可信时，他们还会继续购买吗？

选择退出的羞辱

甚至某些大型的电子商务公司也会沉迷于愚蠢的羞辱技术。他们会提出一个注册问题，然后是一个大的 “同意” 按钮和一个较小的退出链接，例如：

• “不–我不想要无限制的免费送货。”
• “不–我不关心濒临灭绝的绒毛动物的困境。”
• “不–我确实想看到地球燃烧。”

这种做法有用吗？也许吧。但它是否与客户建立了一种诚实的关系，并增加了对网站的信任？

复杂的Cookie取消

欧盟的《通用数据保护条例》（GDPR）要求网站对非必要的cookies和类似的跟踪技术显示退出通知。这是有缺陷的，但该立法是善意的，而且是整个欧洲的法律要求。其他国家可能有类似的规则，尽管它们通常没有那么严格。

大多数用户会选择加入，然后不假思索地继续前进（这在一定程度上违背了立法的意义）。选择退出应该同样容易，但有些网站却要求你这样做：

• 在找到选项之前，要浏览数页/标签的专业术语；
• 点击几十个复选框，尽管这违反了GDPR规则；以及
• 在他们 “保存你的偏好”（保存什么？）时，要等待长达一分钟。

这可能会说服一些用户点击 “同意所有”，但其他人会放弃网站或切换到阅读模式以隐藏cookie通知。在最好的情况下，让选择退出变得困难，给人的印象是网站有什么东西要隐藏。在最坏的情况下，这种Dark Patterns处于合法性的边缘，可能导致罚款或增加律师费用。

这种对话一直在进行，一直在进行……。

糟糕的技术

像HTML这样的技术是可用的、可访问的，而且开箱即是向后兼容的。抛弃这些优点需要特别的努力。

破坏浏览器的功能

后退按钮是网络对用户界面的最大贡献。它很实用，任何有最低技术经验的人都能理解。然而，网站却通过打开新的窗口/标签、使前一页失效或告诉用户不要使用浏览器控制来破坏它。

破坏浏览器功能没有任何技术原因。试图规避控制是一个设计问题，它使用户感到困惑，并使网络系统的可用性降低。

其他需要避免的问题：

1. 不要禁用右键或长点菜单。
2. 不要禁用复制或进一步添加 “有用 “的文本。
3. 不要因为没有更新URL而破坏你的单页应用中的书签功能。

但所有这些问题中最糟糕的是我们清单上的下一个问题。

禁用密码字段的粘贴功能

以任何理由禁用粘贴功能都是不必要的。禁用密码字段上的粘贴是令人厌恶的，但你会在大型网站上遇到这种限制–他们应该更清楚。我见过一些大型国际银行采用这种做法。

这种做法可能是出于可疑的安全原因而实施的。如果用户不能粘贴，他们就不能重复使用其他地方的密码，这是合理的。不幸的是，这也使人们无法使用密码管理器应用程序。现在已经不可能生成高度安全的、长的、随机的字符串，而这些字符串的输入是不实际的。

此外，开发人员可以通过一些DevTool的调整来禁用粘贴限制。其他人会很难，他们更可能使用弱的密码。千万不要禁用粘贴功能–这对你来说是个小麻烦，而且可以提高系统的安全性。

愚蠢的密码限制

“你的密码必须在8到12个字符之间，至少需要一个大写字母、一个数字和一个符号–但请不要使用` ‘ ” / / 或 ;”

实施严格的密码限制没有什么好理由。问问你自己：

1. 系统是否将密码作为纯文本存储在数据库中，而不是散列？
2. 是否有安全专家建议阻止人们使用简单的密码，如password、qwerty或123456？这是真的，但这也阻止了人们使用更复杂的密码，并为暴力破解提供了一个方便的模板。

一个单一的规则可以强制执行强密码：一个很长的最小长度。每一个额外的字符都会以指数形式增加复杂度和破解时间。

移动内容跳跃

在智能手机上阅读内容可能是一种令人沮丧的体验。当你全神贯注于一篇文章时，内容跳出了屏幕，你失去了你的位置。然后你花了几秒钟疯狂地向上和向下滚动。或者更糟糕的是，你会在一个链接或按钮移动的瞬间点击它，而发生一个意想不到的动作。一些读者会失去动力，放弃，并在你将他们转化为客户之前离开。

当图像或iframe（通常是广告）加载到视口滚动点以上时，就会发生内容跳转。一旦内容加载完毕，浏览器就可以确定其尺寸并将其放在页面上。因此，一个500px高度的图像（以全尺寸显示）会把内容往下推等量。

谷歌的累积布局偏移（CLS）指标衡量内容跳跃，并对网站进行相应的惩罚。这是一个复杂的问题，但现在有几个技术解决方案：

• 为HTML img 和 iframe 元素添加宽度和高度属性，或使用CSS aspect-ratio 属性，在资产加载之前在页面上保留空间。
• 设置容器元素的尺寸，以包围加载较慢的资产，如广告、图像和社交媒体小工具。
• 尽早申请较大的图片，并考虑在你的HTML head 使用预加载链接。
• 优化网页字体的使用，并使用同样大小的后备字体，以尽量减少布局的变化。
• 避免在页面顶部插入元素，除非是在用户行为（如点击）之后触发的DOM更新。
• 使用CSS遏制来优化内容块的渲染。也许可以定义一些不会影响其他元素的大小或位置的元素。

当社会化登录很糟糕的时候

诸如OAuth等技术允许用户使用另一个账户（如谷歌、Facebook、Twitter、LinkedIn或Github）在网站上快速注册。实施得好，它是一个实用的选择，提供了一个更流畅的注册过程，节省了时间，并导致更高的转换率。

如果实施得不好，网站随后会要求你输入你的电子邮件、个人详细资料，甚至密码，”供他们记录”。

并非所有的供应商都会传递用户信息，因此，如果你的网站需要这些细节来实现功能，请避免使用OAuth。OAuth绝不应该成为一个不必要的步骤，拖慢注册过程。

网络性能差

根据HTTP档案，网页在桌面设备上的平均加载时间为7秒，在移动设备上为20秒。一个页面的浏览会产生70个HTTP请求，下载超过2MB的数据，并向大气排放1.3g的二氧化碳（见网站碳计算器）。这只是一个平均数–许多网站更糟糕。

没有人打算做一个慢的网站，但增加功能往往超过了性能的提高。鉴于有可能在13Kb内创建一个可玩的Quake克隆，你不得不质疑为什么在 “关于我们” 页面上的两段营销废话需要154倍的下载量！”！

解决性能问题需要各种技术的结合，但你只需要记住一个关键点：不要发送那么多东西！

偷偷摸摸的社交媒体小工具

社交媒体小部件，如 “Like” 按钮，看起来很无辜，但是：

1. 每一个都增加了数百KB的JavaScript代码，影响页面性能。
2. 该代码是一个安全风险，因为它的运行权限与网站的JavaScript相同。
3. 这些小工具即使在没有激活的情况下也会实施用户跟踪。这在某些地区可能会导致法律问题。
4. 几乎没有人使用它们：你能看到1%的用户参与就不错了。

小工具也是不必要的。大多数社交媒体网站提供了标准链接，这些链接可以保留分享，而不会对性能、安全或隐私造成任何风险，例如：

• Email: mailto:?subject=[title]&body=[url]
• Facebook: https://www.facebook.com/sharer.php?u=[url]
• Twitter: https://twitter.com/share?url=[url]&text=[title]
• LinkedIn: https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• Reddit: https://reddit.com/submit?url=[url]&title=[title]

其中 [url] 是当前页面的url，[title] 是主标题。标准的  链接可以很好地工作，但如果您希望它们的行为与标准按钮相同，您可以增强它以在弹出窗口中打开页面。

CAPTCHAs

CAPTCHA是 “完全自动公共图灵测试” 的简称，用于区分计算机和人类。它有助于防止机器人或其他机器访问网络系统。你经常被要求输入一个难以辨认的图像中的文字，或者点击包含自行车的方块。(安装在汽车上的自行车算吗？那辆三轮车呢？那面墙后面有自行车吗！）。

要求你识别巴士的验证码

CAPTCHAs有三个基本问题：

1. 他们故意让拥有完美视力的非残疾人士感到困难。那些有视觉或其他障碍的人如何应对？
2. 随着机器人和人工智能技术的提高，它们必须变得更加复杂。
3. 他们把访问安全的责任放在用户身上–而不是网站所有者或开发者，主要受益者。

CAPTCHAs在大多数网站上都是多余的。你可以考虑CAPTCHAs的替代方案，以减少人类的努力：

• 隐藏的honeypot字段在机器人添加数据时阻止表单提交。
• 检查键盘事件，如 input 或 keydown，是否被适当地触发。
• 检查完成和提交表单所需的时间–机器人的活动往往是瞬时的。
• 创建一个两阶段的提交过程，要求用户在提交前确认他们的数据或一个额外的问题。

这些将阻止大多数机器人。绕过任何一项技术都是可能的，但这需要针对你的网站进行额外的开发工作。当有数以千计的其他网站有已知的漏洞时，很少有机器人开发者会去理会。

小结

网络是一个伟大的地方，但一些可疑的做法会破坏这种看法。当然，你可以在任何地方被骗，但网络允许犯罪者以很少的成本或努力接触成千上万的人。而当数十亿的大企业肆无忌惮地使用Dark Patterns时，这简直是一种耻辱

网站使用Dark Patterns是因为它们有效。但这是短期思维。访客总是对邪恶的技术变得明智，并且可能永远不会再回来。

做正确的事情，在你的品牌中建立信任，你就会留住客户，而不必诉诸于Dark Patterns。

你对你所遇到的Dark Patterns有什么其他想法吗？请在下面的评论部分分享它们！

原文地址：https://www.wbolt.com/dark-patterns.html