当前位置:首页>WordPress资讯>盘点那些让人抓狂的奇葩网站功能与用户体验设计

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

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

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

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人正在浏览该商品“。

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

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

选择退出的羞辱

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

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

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

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

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

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

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

盘点那些让人抓狂的奇葩网站功能与用户体验设计这种对话一直在进行,一直在进行……。

糟糕的技术

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

破坏浏览器的功能

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

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

其他需要避免的问题:

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

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

禁用密码字段的粘贴功能

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

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

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

愚蠢的密码限制

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

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

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

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

移动内容跳跃

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

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

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

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

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

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

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

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

网络性能差

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

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

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

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

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

  1. 每一个都增加了数百KB的代码,影响页面性能。
  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] 是主标题。标准的 <a> 链接可以很好地工作,但如果您希望它们的行为与标准按钮相同,您可以增强它以在弹出窗口中打开页面。

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

WordPress资讯

大型语言模型未来发展趋势瞻望

2024-1-22 1:08:33

WordPress资讯

关于对话式人工智能的未来的五大期待

2024-1-22 1:08:35

个人中心
今日签到
有新私信 私信列表
搜索