黑暗模式：揭开网络阴暗面

我们喜欢网络。 如果不是蒂姆·伯纳斯·李爵士的惊人发明，我们都必须找到不同的职业！ 尽管我们充满热情，但网络可能是一个不愉快的地方。

深色图案可能是无意的。 营销人员或开发人员可能认为他们在做正确的事情，但没有意识到他们实施的功能的问题和缺点。 最糟糕的深色图案是故意的。 页面会诱使您做一些您不打算做的事情，因为 UI 或措辞会操纵您的操作。 用户对最可疑的技术越来越聪明，但是在某个地方，有人会发现他们被欺骗了，直到为时已晚。

如果使用得当，网络可以节省时间、旅行和能源。 另一方面，深色图案浪费了数百万的工作时间和千瓦。 我们不会让任何特定网站感到羞耻（他们知道自己是谁），但我们会在可能的情况下说明改进和替代选项。

这些是我们的烦恼。

不直观的用户界面

这些是您会遇到的最常见的深色图案。 创造出色的用户体验需要时间和考虑……而且您可以通过这些突兀的深色图案快速破坏所有这些努力。

“安装我们的应用程序！”

一些网站和社交网络会提示您安装他们的应用程序——通常是在单击有关新消息或关注者的电子邮件警报时。 该链接在带有两个按钮的网页中打开：

1. 一个巨大的“使用我们的应用程序”按钮。 单击它会进入 AppStore，您必须在其中批准、下载、安装，然后启动该站点的本机应用程序（假设您的手机支持它）。 然后您必须登录、输入错误密码、请求重置、打开链接、创建新密码并访问系统。 你可能已经忘记了你为什么在那里，所以回到原来的警报并重新开始。
2. 用于执行操作的微观“继续移动网络”链接。

也许该应用程序很出色，并且已经花费了数百万美元，但很难找到比网站功能更多的应用程序。 当然，应用程序可以收集比网络系统更多的个人数据，因此它会获得更具侵入性的推广。

以各种方式推广应用程序，但在每次交互开始时都这样做会惹恼用户。 有些人会安装该应用程序以停止唠叨，但其他人会离开。 当用户使用该网站一段时间后，提供该应用程序会更有效吗？

“你想接收通知吗？”

一句话：没有。

时事通讯注册、基于 Web 的推送通知、“让我们聊天”小部件和调查提示可能很有用，但它们的实现普遍很糟糕。

网站通常会在您在网络搜索后第一次访问时提示您订阅。 那时，您不知道内容是否相关，是否有好处，或者该站点是否是您考虑经常访问的地方。 发现大多数人点击“否”并不奇怪。

提供通知或时事通讯没有任何问题，但最好确保用户首先与网站互动。 也许在文章末尾或他们访问过几次后显示提示。 它不那么打扰，不那么分散注意力，而且更有可能成功。

最后，请不要在用户点击时事通讯中的链接时提示用户注册时事通讯！ 它会比吸引他们更快地将他们赶走。

古怪的导航

标题栏和下拉菜单可能很无聊，但人们理解它们。 我们不想阻止 UI 演变和设计创新，但一些导航控件很奇怪且不合逻辑。

如果您需要使用“单击此处”工具提示或其他帮助方法提示用户，请重新考虑您的设计。 好的用户界面不需要解释。

不必要的滚动劫持

在页面滚动时显示动画或更新活动菜单项可能是一种引人入胜的体验。 在以下情况下它不太有用：

1. 动画被过度使用。 动画太多元素会分散观众的注意力——突出显示每个项目意味着没有任何东西引起用户的注意。 一些专注于重要信息的微妙效果效果更好。
2. 它打破了上下文。 滚动不应导致意外的操作，例如内容消失、模式对话框、表单提交、重定向到其他页面等。

动画也可能导致晕动病和眩晕，因此请考虑使用 CSS prefers-reduced-motion媒体查询来禁用效果。

请停止创建无限滚动页面！ 相关内容的链接很有用，但未经用户同意自动加载随机内容会浪费带宽。 这使得为​​任一页面添加书签变得困难，从而无法在页面页脚中找到联系方式和其他信息。

不必要的多页文章

我们都见过“文章”，其中包含一段文本，后跟指向下一页的链接。 这些页面通常是链接诱饵，没有大量内容——但在您涉足大量广告和页面印象之前，您不会发现这一点。

要求网络营销人员停止这种做法是徒劳的，但也许他们会重新考虑开发人员是否教育人们不要屈服于这种胡说八道！

操纵营销

网络是世界上最大的市场，可以销售各种各样的实体和数字产品。 用户将一次又一次地返回……除非您选择采用黑暗模式来促进销售。

订阅斗争

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

伪装广告

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

1. 看起来像一个菜单或选项；
2. 假装是来自原始网站的新闻或信息文章； 或者
3. 在有关软件产品的页面上显示 UI 控件，例如大的“下载”按钮。

网站无法始终确定使用何种广告设计，但它们确实控制了展示位置。 在显眼位置放置广告迷惑人们可能会增加广告收入，但这些用户会回来吗？

自动将产品添加到购物车

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

• 充其量，一小部分用户会注意到额外的项目并决定保留它。
• 更大的比例将删除它。
• 有些人直到交货才注意到，然后抱怨并要求退款。

这些活动以牺牲客户支持、商誉和持续的退货购买为代价来增加销售额。 处理投诉和退款可以抵消盈利能力的任何短期增长。

隐藏的购物成本

花时间选择产品、注册、输入您的交货详细信息并发布您的付款信息以发现价格已经高于竞争网站是不愉快的。 摘要页面现在显示隐藏成本，例如交付、保险、处理和我们希望您不会注意到此费用。

定价应该清晰和诚实，否则客户将对电子商务服务失去信心。 当交付成本差异很大时，提示用户在承诺购买之前输入他们的国家或邮政编码。

人工库存稀缺和可用性计时器

了解某件商品何时有货很有用，但一些电子商务网站会提高可信度。 他们提供的信息越多，就越不可信：

“立即购买！ 有 2 件商品，过去 3 分钟内购买了 15 件，有 597 人正在查看此页面。”

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

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

选择退出羞辱

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

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

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

订阅时事通讯

想知道我们是如何将流量提高到 1000% 以上的吗？

加入 20,000 多人的行列，他们会通过 WordPress 内幕技巧获得我们的每周时事通讯！

现在订阅

复杂的 Cookie 取消

欧盟的通用数据保护条例 (GDPR) 要求网站显示非必要 cookie 和类似跟踪技术的退出通知。 这是有缺陷的，但立法是善意的，是整个欧洲的法律要求。 其他国家可能有类似的规定，尽管它们通常不那么严格。

大多数用户会不假思索地选择加入并继续前进（这在一定程度上违背了立法的要点）。 选择退出应该同样简单，但有些网站要求您：

• 在找到选项之前浏览行话的页面/标签；
• 点击几十个复选框，即使这违反了 GDPR 规则； 和
• 等待他们“保存您的偏好”（保存到什么？）。

它可能会说服一些用户点击“全部同意”，尽管其他用户会放弃该网站或切换到阅读模式以隐藏 cookie 通知。 充其量，使退出变得困难给人的印象是该网站有一些隐藏的东西。 在最坏的情况下，这种黑暗模式处于合法性的边缘，可能导致罚款或增加律师费用。

可怕的技术

HTML 等技术是开箱即用的、可访问的和向后兼容的。 放弃这些好处需要特别的努力。

破坏浏览器功能

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

没有技术原因会破坏浏览器功能。 试图规避这些控制是一个设计问题，它会混淆用户并降低 Web 系统的可用性。

其他需要避免的问题：

1. 不要禁用右键单击或长按菜单。
2. 不要禁用复制或添加更多“有用”文本。
3. 不要因为未能更新 URL 而破坏单页应用程序中的书签。

但所有这些问题中最糟糕的是我们列表中的下一个。

禁用密码字段粘贴

出于任何原因禁用粘贴是不必要的。 禁用密码字段上的粘贴是令人讨厌的，但您会在大型网站上遇到此限制 - 他们应该更清楚。 我已经看到它被主要的国际银行所采用。

这种做法可能是出于可疑的安全原因而实施的。 如果用户不能粘贴，那么他们就不能重用其他地方的密码。 不幸的是，它还阻止人们使用密码管理器应用程序。 不再可能生成难以键入的高度安全、长而随机的字符串。

此外，开发人员可以通过一些 DevTool 修补来禁用粘贴限制。 其他人会挣扎，他们更有可能使用弱密码。 永远不要禁用粘贴 - 这对您来说工作量减少并提高了系统安全性。

愚蠢的密码限制

“您的密码必须介于 8 到 12 个字符之间，并且至少需要一个大写字符、一个数字和一个符号 - 但请不要使用 ` ' ” / \ 或 ;”

没有充分的理由实施严格的密码限制。 问你自己：

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

单一规则强制使用强密码：最小长度较长。 每增加一个字符都会成倍增加复杂性和破解时间。

移动内容跳转

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

当图像或 iframe（通常是广告）加载到视口滚动点上方时，会发生内容跳转。 加载内容后，浏览器可以确定其尺寸并将其放置在页面上。 因此，高度为 500 像素的图像（以全尺寸显示）会将内容向下推相同的量。

Google 的 Cumulative Layout Shift (CLS) 指标衡量内容跳转并相应地惩罚网站。 这是一个复杂的问题，但现在有几种技术解决方案可用：

• 为 HTML img和iframe元素添加 width 和 height 属性，或使用 CSS aspect-ratio属性在资源加载之前在页面上保留空间。
• 为包含加载速度较慢的资产（如广告、图像和社交媒体小部件）的容器元素设置尺寸。
• 尽早请求更大的图像，并考虑在您的 HTML head中使用预加载链接。
• 优化 Web 字体使用并使用类似大小的后备来最大程度地减少布局变化。
• 避免在页面顶部插入元素，除非它是在用户操作（如点击）之后触发的 DOM 更新。
• 使用 CSS 包含来优化内容块的呈现。 可以定义不会影响其他元素的大小或位置的元素。

当社交登录很糟糕时

OAuth 等技术允许用户使用 Google、Facebook、Twitter、LinkedIn 或 Github 等其他帐户在网站上快速注册。 实施得当，这是一个实用的选项，可提供更流畅的注册流程、节省时间并带来更高的转化率。

如果实施不当，网站随后会要求您输入您的电子邮件、个人详细信息，甚至是“供他们记录”的密码。

并非所有提供商都会传递用户信息，因此如果您的站点需要这些详细信息才能正常运行，请避免使用 OAuth。 OAuth 永远不应成为减慢注册过程的不必要步骤。

网络性能不佳

根据 HTTP 存档，在桌面设备上加载平均网页需要 7 秒，在移动设备上加载需要 20 秒。 单个页面浏览会发出 70 个 HTTP 请求，下载超过 2MB 的数据，并向大气排放 1.3 克二氧化碳（请参阅网站碳计算器）。 这是一个平均值——许多网站的情况更糟。

没有人打算制作一个缓慢的网站，但添加功能通常会超过性能改进。 鉴于可以创建 13Kb 的可播放 Quake 克隆，您不得不质疑为什么“关于我们”页面上的两段营销华夫饼需要 154 倍的下载量！

处理性能需要多种技术组合，但您只需要记住一个关键点：不要发送太多东西！

鬼鬼祟祟的社交媒体小工具

诸如“喜欢”按钮之类的社交媒体小部件看起来很无辜，但是：

1. 每一个都会增加数百千字节的 JavaScript 代码，这会影响页面性能。
2. 该代码存在安全风险，因为它以与站点 JavaScript 相同的权限运行。
3. 小部件即使在未激活时也会实现用户跟踪。 这可能会导致某些地区的法律问题。
4. 几乎没有人使用它们：你会很幸运地看到 1% 的用户参与度。

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

• 电子邮件： mailto:?subject=[title]&body=[url]
• 脸书： https://www.facebook.com/sharer.php?u=[url]
• 推特： https://twitter.com/share?url=[url]&text=[title]
• 领英： https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• Reddit： https://reddit.com/submit?url=[url]&title=[title]

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

验证码

CAPTCHA 是完全自动化公共图灵测试的缩写，用于区分计算机和人类。 它有助于防止机器人或其他机器访问 Web 系统。 您经常被要求输入以难以辨认的图像显示的文本或单击包含自行车的方块。 （安装在汽车上的自行车算吗？那辆三轮车呢？那堵墙后面有自行车吗！？）

验证码存在三个基本问题：

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

验证码在大多数网站上都是多余的。 您可以考虑替代 CAPTCHA 的替代选项，从而减少人力：

• 当机器人添加数据时，隐藏的蜜罐字段会阻止表单提交。
• 检查是否正确触发了input或keydown等键盘事件。
• 检查完成和提交表单所需的时间——机器人活动通常是即时的。
• 创建一个两阶段提交流程，要求用户在提交前确认他们的数据或附加问题。

这些将阻止大多数机器人。 可以绕过任何技术，但需要针对您的站点进行额外的开发工作。 当有数千个其他站点存在已知漏洞时，很少有机器人开发人员会打扰。

概括

网络是个好地方，但一些可疑的做法可能会破坏这种看法。 当然，你可以在任何地方被骗，但是网络允许犯罪者以很少的成本或努力接触到成千上万的人。 而当价值数十亿的大企业肆无忌惮地使用暗纹时，那真是太可耻了！

网站使用深色模式是因为它们有效。 但这是短期的想法。 访客总是对邪恶的技术变得明智，并且可能永远不会回来。

做正确的事，建立对您品牌的信任，您将留住客户，而无需诉诸黑暗模式。

对你遇到的黑暗模式还有其他想法吗？ 请在下面的评论部分分享它们！