当前位置: 首页 > news >正文

Web 性能入门指南-1.1 网站速度与用户幸福感的心理学

前言

在深入探讨网络性能的技术层面之前,重要的是首先要了解我们对闪电般在线体验渴望的根源。

https://blog-img.speedcurve.com/img/487/cognitive-load.gif?auto=format,compress&fit=max&w=2000

在过去的几十年里,人们对人类与技术互动的方式进行了大量有趣的研究。其中许多研究得出的结论多年来一直存在,表明我们不仅仅希望我们的技术速度快,而且在深层的神经层面上,我们需要它快。因为我们对“速度的需求”深深植根于我们的神经结构中,所以这种需求不太可能改变,无论我们多么希望它能改变。

在本文中,我们将探讨:

  • 为什么时间是至关重要的(且经常被忽视的)可用性因素

  • 我们如何感知等待时间

  • 为什么我们的记忆是不可靠的

  • 为什么体验的结束对我们的感知有着不成比例的影响

  • 我们期望页面加载有多快(以及为什么)

  • “心流”在我们使用网络时的意义

  • 延迟如何影响我们的生产力

  • 从测量“网络压力”中我们能学到什么

  • 缓慢如何影响我们对品牌的整体认知

时间是至关重要的可用性因素

如果你不把时间视为至关重要的可用性因素,那么你正在错过用户体验的一个基本方面。有大量研究揭示了为什么等待是困难的——这也是为什么网站速度很重要——这不仅仅是从商业角度来看,更是从根深蒂固的神经学角度来看。

让我们先从宏观角度来看看人类是如何处理各种形式的等待的。

我们如何感知等待时间?

简短回答:非常差。

排队论是研究等待队伍(无论是真实的还是虚拟的)的数学学科。如果你深入研究这个领域,你会发现一些有趣的故事。我最喜欢的一个故事发生在休斯顿的一个机场。

机场的客户关系部门收到了大量关于行李传送带上等待时间过长的投诉。机场高管们试图通过雇佣更多的行李搬运工来解决这个问题,从而将平均等待时间缩短到7分钟。但投诉的数量并没有减少。

https://blog-img.speedcurve.com/img/463/airport.jpg?auto=format,compress&fit=max&w=2000

解决方案是什么?他们并没有雇佣更多的行李搬运工,而是简单地确保每架航班的到达门尽可能远离该航班指定的行李传送带。结果,乘客们不得不走六倍长的路才能拿到他们的行李,而行李传送带上的平均等待时间缩短到了一分钟。

乘客的投诉几乎降为零。

从这个实验中我们可以得出以下结论:

  • 等待是困难的

  • 被动等待更加困难

  • 感知到的速度比实际情况更重要

  • 这些原则几乎适用于任何形式的等待,包括等待页面加载。

我们的记忆力并不可靠

我们对时间的感知会受到许多因素的影响,包括(但不限于)我们的年龄、所在地、情绪以及各种外部刺激。毫不意外,这种不一致性也适用于我们的在线体验:

普通网络用户感觉到的加载时间比实际时间慢15%。然而当他们回忆起这一体验时,会记得加载时间慢了35%。

https://blog-img.speedcurve.com/img/463/perception.gif?auto=format,compress&fit=max&w=2000

普通人认为自己每天要花9分钟等待慢速网站。这相当于每年有整整两天的时间都花在了等待上。(即便这一数据并不完全准确,但它仍是衡量人们对网络态度的有趣指标。)

添加加载动画和进度条之类的指示器,可以让我们误以为页面的加载速度比实际速度快10%。要记住我们不仅会感觉等待时间比实际时间长,而且之后回忆时会觉得等待时间更长。

体验的结束对感知的影响不成比例

一项研究追踪了两名患者在整个结肠镜检查过程中感受到的疼痛程度,发现了“结肠镜检查效应”。

在下图中,您可以看到患者 A 和患者 B 的数据。尽管患者 A 的体验时间较短,疼痛峰值大小相似,但他们 认为 自己的体验时间更长,疼痛程度也更大。结论是,由于患者 A 的体验以疼痛峰值结束,因此疼痛影响了他们的整体感知。

https://blog-img.speedcurve.com/img/463/colonoscopy.gif?auto=format,compress&fit=max&w=2000

这公平吗?也许不公平,但这就是我们大脑的运作方式。

我们希望网页速度有多快?

虽然我们对在线体验的期望是不准确且变化很大的,但我们对不同页面速度的实际反应却更加一致——而且几十年来一直如此。

1968 年,罗伯特·米勒发表了一项名为《人机对话中的响应时间》的研究。在研究中,米勒指出, 超过 2 秒的等待会分散注意力,影响工作效率

1993 年和 2010 年,可用性专家 Jakob Nielsen 发现:

  • 0.1 秒给我们一种瞬间响应的错觉

  • 1秒钟让我们的思路流畅

  • 10秒足以吸引我们的注意力——仅仅如此。

  • 10 秒后,我们的思绪就开始飘忽不定,一旦页面最终加载完成,我们就很难重新集中注意力。

https://blog-img.speedcurve.com/img/463/nielsen-response-times-no-bckgrnd.png?auto=format,compress&fit=max&w=2000

互联网可能会发生变化,网页可能会发展和演变,但用户的期望是不变的。45 多年来,人类感知和响应时间的数字一直保持不变。 这些数字是固定的。我们无法控制它们。无论我们在特定时刻使用哪种设备、应用程序或连接,它们都是一致的。

但为什么呢?事情就变得非常有趣了。

尼尔森表示,人类对较长加载时间的反应基于大脑功能的两个方面:

  • 我们的短期记忆很差 ——存储在短期记忆中的信息会很快消失。

  • 我们需要掌控一切 ——被迫等待会让我们感到无能为力和沮丧。

不耐烦:它存在于我们的大脑中

我们的急躁是人类不可思议的神经回路中不可磨灭的一部分。在任何特定时刻,你的大脑都会进行三种类型的记忆处理:

  • 感觉记忆

  • 短期记忆

  • 工作记忆

(还有长期记忆,但它在这里并没有真正发挥作用。)

感觉记忆

每次你看到某样东西,这些视觉信息就会被眼睛里的感光细胞接收,并传送到大脑的枕叶。这就是你的图像记忆。它只是你的三种感觉记忆之一。(另外两种控制听觉和触觉。)

近 300 年来,人们一直在研究图像记忆是如何运作的。在 一项最早的研究中,早在 19 世纪初,人们就将一块发光的煤块固定在车轮上。车轮旋转得越来越快,直到观察者看到一个连续不断的光圈。研究得出结论,发光的煤块必须在 100 毫秒或更短的时间内完成一个完整的循环,才能产生火光圈的幻觉。

https://blog-img.speedcurve.com/img/463/burning-wheel.jpg?auto=format,compress&fit=max&w=2000

这项早期研究发现了我们现在称之为“视觉暂留”的现象,该现象基于这样一个事实: 我们的图像记忆会保留视觉信息约 100 毫秒。此后,“记忆库”耗尽,图像记忆需要用新的视觉信息进行刷新。几个世纪以来,这个数字一直保持不变。

有趣的是,这也许并非巧合,100 毫秒是 Google 提出的页面加载时间目标。

https://blog-img.speedcurve.com/img/463/100ms-new.png?auto=format,compress&fit=max&w=2000

当然,一些感觉记忆确实会保留下来…只要它被快速使用并最终巩固到你的长期记忆中。

短期记忆和工作记忆

如果我们的感觉记忆的作用是提供关于我们整个感觉体验的全面信息,那么短期记忆的工作就是提取相关部分并将它们放入工作记忆的漏斗中。 你的短期记忆 最多可以存储 10-15 秒的信息,这段时间刚好够你的工作记忆处理、操纵和控制它。

https://blog-img.speedcurve.com/img/463/15s-new.png?auto=format,compress&fit=max&w=2000

  1. 防止信息从我们的标志性记忆中漏掉,同时我们

  2. 在它们开始丢失信息之前,给我们的短期记忆和工作记忆充足的时间来完成它们需要做的所有解析。

什么是“流程”?就我们使用网络的方式而言,它意味着什么?

数十万年来,人类已经进化到能够以优美的、连续的流程执行动作。我们的日常任务——生火、猎杀羚羊、烤面包、挤牛奶——都是由一系列细微的动作组成的,这些动作或多或少无缝衔接。

著名心理学家 米哈里·契克森米哈赖在他的著作《 *寻找心流:融入日常生活的心理学》*中 观察到, 定期进行无缝、基于序列的活动的人比不这样做的人更快乐。他创造了“心流”一词来描述这种状态。https://en.wikipedia.org/wiki/Mihaly_Csikszentmihalyi

https://blog-img.speedcurve.com/img/463/flow.png?auto=format,compress&fit=max&w=2000

直到过去 40 年,随着计算机进入我们的家庭和工作场所,甚至进入我们的口袋!,我们才对大脑提出了新的要求。我们大多数人都痛苦地意识到,计算机的使用并不提供一系列流畅的连续操作,而是具有延迟、停机和重启的特点。

简而言之, 我们以流程为导向的大脑无法处理人机交互的断断续续

有些人对延迟、停机和重启对生产力和其他性能指标的影响持怀疑态度。一个常见的论点是,大多数人确实会适应糟糕的性能。事实证明,这些人的假设可能有些正确,但他们也可能关注的是错误的部分。

拖延真的会影响生产力吗?

在 1999 年的一项 关于工作场所干扰的研究中,几组工人在日常工作中遭遇了各种干扰。然后根据以下方面对他们进行了测量:

  • 他们的生产力,以及

  • 他们自我报告的心理状态。

虽然该研究主要关注的是一般的工作场所中断,只关注了人机交互,但仍有一些有趣的发现,这些发现很可能与网络性能有关:

发现 1:参与者制定了策略,使他们能够有效地处理干扰并保持生产力

研究表明,至少对于某些环境中的某些员工来说,他们不仅学会了如何应对干扰,甚至可能努力过度补偿潜在的绩效下降。

发现2:然而,这种应对机制是以更高的心理成本为代价的

总的来说,干扰会对情绪和幸福感产生负面影响。此外,参与者最终需要付出更多努力才能完成相同的任务。

发现 3:随着时间的推移,干扰影响了参与者恢复工作和承担新任务的能力和意愿

中断似乎具有累积效应。当中断次数增加时,恢复时间(即重新开始任务所需的时间)会变得异常长。参与者似乎会失去动力并产生精神疲劳。

这些发现对于网络性能而言意味着什么?

在处理申请延迟时,人们可能会制定应对策略,让他们在短期内保持生产力。但这里缺少的是流动。如果没有流动,我们的动力和幸福感最终会受到影响。

https://blog-img.speedcurve.com/img/463/interruptions.jpg?auto=format,compress&fit=max&w=2000

我们必须提醒自己,应用程序性能只是更大世界的一部分。我们的日常生活中充满了各种事件 - 从堵车到在杂货店排队 - 都在挑战我们对流程的需求。

网站速度慢只是其中一个问题,但对于我们这些工作和个人时间都花在上网的人来说, 网站速度慢会给本来就充满摩擦的世界带来更多摩擦。 这种影响是累积的,因为我们大多数人都无法区分自己的压力。

“网络压力”是可以测量的

当网站性能不佳时,我们会做出糟糕的反应。(甚至有研究表明, 使用速度慢的网站会导致血压升高!)鉴于我们现在知道我们对流量的强烈渴望,这并不奇怪。

2011 年,CA Technologies 委托客户体验咨询公司 Foviance 在格拉斯哥卡利多尼亚大学开展 一系列实验室实验 。参与者在进行日常在线交易时,佩戴 EEG(脑电图)帽来监测脑电波活动。参与者使用 5 MB 网络连接或人为减慢到 2 MB 的连接完成任务。

https://blog-img.speedcurve.com/img/463/desktop-eeg.jpg?auto=format,compress&fit=max&w=2000

实验中的脑电波分析显示, 参与者在通过较慢的连接使用网站时必须集中注意力 50% 以上。当被问及他们在研究期间最喜欢和最不喜欢的网站的哪些方面时,参与者经常提到速度是最受关注的问题:

“该网站非常慢,因此加载图书预览需要很长时间。”

“我最不喜欢该网站的一点是它的速度。”

研究还发现,人们在交易过程中的这些阶段最有可能感受到最大的压力:

  • 搜索

  • 查找和选择产品

  • 查看

  • 输入个人信息并完成销售

从直觉上看,这是有道理的。网上购物本身就带有一定压力,因为我们大多数人都关心以最优惠的价格找到合适的商品。而结账过程——当我们交出个人信息和信用卡信息时——也充满了一定压力。再加上页面速度变慢,很容易理解为什么网上购物体验会变得不愉快。

移动用户也感受到“网络压力”

基于CA Technologies进行的桌面神经科学研究,Radware于2013年进行了 类似的研究 ,这次的重点是移动设备用户。

这项移动压力研究采用了眼动追踪和脑电图 (EEG) 技术的突破性组合,以监测一组移动用户的神经活动,这些用户被要求通过移动设备进行一系列在线交易。(下图是其中一名研究参与者的照片。)

https://blog-img.speedcurve.com/img/463/mobile-stress-eeg.jpg?auto=format,compress&fit=max&w=2000

在研究中,参与者被要求使用智能手机在四个零售和旅游网站上完成标准化购物任务。一些参与者通过 WiFi 以正常速度浏览网页,而另一些参与者则以持续减慢的速度浏览网页(使用软件人为创建 500 毫秒的网络延迟)。

参与者 知道速度是测试的一个因素;相反,他们认为他们正在参与一项通用的可用性/品牌感知研究。

https://blog-img.speedcurve.com/img/463/mobile-strees.png?auto=format,compress&fit=max&w=2000

该研究结果的一些亮点:

  • 用户在关键点上感受到的挫败感峰值高达 26%。

  • 与 CA Technologies 的研究类似,挫败感高峰最常见于浏览和结账阶段。

  • 页面加载速度越快,用户参与度就越高。(这是一件好事!)

  • 即使在理想的移动浏览条件下,所有用户都会经历一定程度的“网络压力”。

缓慢会影响我们对品牌的整体看法

是的,这包括网站的非性能方面,例如内容、设计和导航。

在上述移动压力研究之后,参与者参加了离职访谈,他们被要求给出对网站和公司的印象。访谈中的所有形容词都被输入到词云生成器中,该生成器为每个网站的每个版本(正常和慢速)生成云。

提醒:唯一的区别在于网站速度。由于这是一项盲测,测试人员并没有意识到速度差异。结果表明,较慢的页面速度会在全球范围内影响品牌。

结论: 页面速度慢会损害整体品牌健康。

这是测试参与者在正常速度使用该网站后生成的词云:

https://blog-img.speedcurve.com/img/463/mobile-stress-normal.png?auto=format,compress&fit=max&w=2000

这是参与者在体验同一网站(网络延迟为 500 毫秒)后生成的词云:

https://blog-img.speedcurve.com/img/463/mobile-stress-slow.png?auto=format,compress&fit=max&w=2000

虽然两个词云都包含正面和负面的描述,但值得注意的是,速度较慢的网站的词云中包含的负面形容词几乎是速度较快的网站的三倍。形容词从主要为易于使用(在第一个词云中)转变为一系列负面联想(在第二个词云中)——这完全是因为页面延迟。

虽然一些参与者明显察觉到了性能的轻微下降(“缓慢”和“迟钝”),但参与者也对与速度无关的领域产生了负面看法。他们报告说,该网站似乎“无聊”、“不雅观”、“笨重”、“俗气”和“难以导航”。

换句话说, 页面加载速度较慢会影响人们对网站三个 与加载时间完全无关的重要方面的感知:

  • 内容(“无聊”)

  • 视觉设计(“俗气”且“混乱”)

  • 导航的简易性(“令人沮丧”和“难以导航”)

总结和要点

我们所说的我们想要的东西和我们内心深处真正 需要的 网络体验之间存在着有趣的差距。

在过去十几年里,用户调查显示,我们声称想要的东西随着时间的推移而发生变化——从 1999 年的 8 秒加载时间到 2006 年的 4 秒,再到今天的 2 秒左右。如果我们相信这些调查,那么我们会得出结论,我们是一个越来越急躁、没有耐心的物种。我们可能会忍不住评判(或怜悯)自己,认为我们是现代生活的受害者。

https://blog-img.speedcurve.com/img/463/happy.png?auto=format,compress&fit=max&w=2000

但神经科学研究——研究我们如何接收和响应视觉信息——却讲述了一个截然不同的故事。几十年来,研究人员重复了同样的结果:总的来说,当我们的网站和应用程序(以及一般的技术)在几分之一秒内做出响应时,我们最快乐。我们可能会学会如何适应较慢的响应时间,但这种适应将永远——至少在可预见的未来——令人尴尬和不安。

是的,让您的网站更快确实有 商业理由 。但关注网络性能不仅仅是为了商业。

作为技术人员,同时也是富有同情心的人,我们需要做的不仅仅是提供足够的在线体验。 我们的目标应该是提供顺畅且令人愉悦的在线体验,以便我们的访问者离开我们的网站和应用时比刚来时更开心。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 51单片机5(GPIO简介)
  • Go:基本变量与数据类型
  • Excel如何才能忽略隐藏行进行复制粘贴?
  • STM32MP135裸机编程:烧录程序到EMMC的方法
  • Redis 三大高可用模式:主从、哨兵、集群
  • frameworks 之FallbackHome
  • PMP–冲刺–总结--高频考点
  • 缺血性脑卒中的常见并发症
  • gitlab 搭建使用
  • 基于Rspack实现大仓应用构建提效实践|得物技术
  • 理解常见开源协议的区别
  • 计算机网络——常见问题汇总
  • LangChain —— Prompt Templates —— How to use few shot examples in chat models
  • AWS-WAF-Log S3存放,通过Athena查看
  • 51单片机4(reg52头文件介绍)
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • Median of Two Sorted Arrays
  • mysql 5.6 原生Online DDL解析
  • MySQL常见的两种存储引擎:MyISAM与InnoDB的爱恨情仇
  • opencv python Meanshift 和 Camshift
  • Selenium实战教程系列(二)---元素定位
  • TCP拥塞控制
  • Vue 动态创建 component
  • vue2.0一起在懵逼的海洋里越陷越深(四)
  • Yii源码解读-服务定位器(Service Locator)
  • 使用common-codec进行md5加密
  • 我的zsh配置, 2019最新方案
  • 小程序button引导用户授权
  • Python 之网络式编程
  • ​zookeeper集群配置与启动
  • ​力扣解法汇总1802. 有界数组中指定下标处的最大值
  • ​软考-高级-系统架构设计师教程(清华第2版)【第15章 面向服务架构设计理论与实践(P527~554)-思维导图】​
  • (03)光刻——半导体电路的绘制
  • (1)Nginx简介和安装教程
  • (2015)JS ES6 必知的十个 特性
  • (6)添加vue-cookie
  • (C语言版)链表(三)——实现双向链表创建、删除、插入、释放内存等简单操作...
  • (floyd+补集) poj 3275
  • (k8s中)docker netty OOM问题记录
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (翻译)Entity Framework技巧系列之七 - Tip 26 – 28
  • (译)2019年前端性能优化清单 — 下篇
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (转)socket Aio demo
  • (转)用.Net的File控件上传文件的解决方案
  • (转载)虚幻引擎3--【UnrealScript教程】章节一:20.location和rotation
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .Net 6.0 处理跨域的方式
  • .NET Core 项目指定SDK版本
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
  • .NET Framework 的 bug?try-catch-when 中如果 when 语句抛出异常,程序将彻底崩溃
  • .Net插件开发开源框架
  • .NET处理HTTP请求
  • [ C++ ] STL priority_queue(优先级队列)使用及其底层模拟实现,容器适配器,deque(双端队列)原理了解
  • [ 隧道技术 ] cpolar 工具详解之将内网端口映射到公网