在实验室的兔子上做实验,但这次没那么残忍。
插图的

设计研究

如果您已经花了足够的时间开发web,那么这条反馈自远古以来就已经出现在您的收件箱中:

文章继续如下

“这张照片看起来很模糊。我们能换一张更好的吗?”

每次我收到这个反馈,我都会问:“你觉得这张照片不好看吗?你能告诉我吗?”为什么?

这是一个有点不公平的问题。这种抱怨源于对图像质量的主观感知,而主观感知又受到许多因素的影响。有些是技术性的,例如图像的输出质量或压缩方法(通常是有损的,就像jpeg编码的照片一样)。另一些则更加直观或感性,例如图像内容以及压缩工件如何混合在其中。也许甚至绩效也扮演着我们没有完全意识到的角色。

多年来处理这种反馈,最终引导我进行设计和开发图像质量调查这是我第一次尝试在网上建立一个研究项目。我从专业摄影师拍摄的25张照片开始。使用它们,我生成了大量不同质量水平和大小的图像。这些图片随机提供给用户,让他们对图片的质量进行评价。

第一轮的结果很有趣,但并不完全清楚:用户似乎倾向于高估图像的实际质量,并且表现不佳出现对图像质量的感知有负面影响,但这还不能下结论。许多用户体验和技术问题使得有必要实施重要的改进并进行第二轮研究。我决定,与其从第一轮的结果中得出结论,不如尽可能地改进调查,并进行另一轮研究,以获得更好的数据。本文记录了我最初是如何构建这个调查的,以及后来我是如何听取用户反馈以改进它的。

定义研究#第2节

在web性能的主题中,图像优化尤其广泛。有各种各样的格式、编码和优化工具,所有这些工具都是为了使图像足够小以供web使用,同时保持合理的视觉质量。在速度和质量之间取得平衡才是图像优化的真正意义所在。

这种性能和视觉质量之间的平衡促使我思考人们如何感知图像质量。有损图像质量,特别是。最终,这一思路引出了一系列问题,推动了图像质量感知调查的设计和发展。调查的想法是用户提供主观的评估质量。这是通过让参与者在没有“完美”的客观参考的情况下评价图像来实现的。毕竟,这就是人们看待图像的方式原位

关于调查#第三节

当我们想要量化用户行为时,如果不是最终选择从一群人中收集数据,那么调查至少是不可避免的。毕竟,当你的目标是得到一些可衡量的东西时,调查是完美的。然而,这项调查是一种诱惑而又危险的工具,正如埃里卡·霍尔所警告的那样.它们很容易制作和执行,而且在传播过程中经常被滥用。它们不是评估过去行为的好工具。它们在预测未来行为方面同样糟糕(如果不是更糟的话)。例如,顾客满意度调查通常采用的1-10量表并没有真正说明顾客实际上有多满意,或者他们将来购买产品的可能性有多大。

然而,不幸的现实是,与我亲自控制数百名参与者不同,调查是我唯一真正实用的工具,可以衡量人们对图像质量的看法,以及绩效指标是否(以及可能如何)与这些看法相关。在设计调查时,我遵循了以下准则:

  • 除了问参与者当时的感受,不要问其他任何问题。当参与者继续前行时,他们对刚刚做过的事情的记忆会随着时间的流逝而迅速消失。
  • 不要假设参与者知道你所做的一切。用相关的副本引导他们,简要描述你对他们的期望。
  • 不要要求参与者提供粗糙的评估。使用一种输入类型,允许他们在与有损图像质量编码范围一致的规模上精细地评估图像质量。

接下来我们所能做的就是承认我们在解释我们收集的数据,假设参与者是诚实的,理解交给他们的任务。即使从数据中删除了感知指标,仍然可以收集到一些客观的性能指标来讲述一个引人注目的故事。从这里开始,就需要定义驱动研究的问题。

问正确的问题#第四节

在研究中,你在寻找问题的答案。在这个特殊的努力中,我想要这些问题的答案:

  • 人们对有损图像质量的感知有多准确真实的质量呢?
  • 人们对JPEG图像质量的感知与之不同吗WebP图像
  • 性能在所有这一切中起作用吗?

这些都是重要的问题。然而,对我来说,回答最后一个问题是首要目标。但是,通往答案的道路是(并将继续是)一个复杂的设计和开发选择之旅。让我们从一些用于从调查参与者收集信息的技术开始。

嗅探出设备和浏览器特征#第五节

在测量人们如何感知图像质量时,必须考虑设备。毕竟,任何特定设备的屏幕都会比其他设备的屏幕功能更强或更弱。谢天谢地,HTML特性srcset图片非常适合为任何给定屏幕提供最佳图像。这是至关重要的,因为如果图像不适合设备的屏幕,人们对图像质量的感知可能会受到不利影响。相反,如果将高质量(因此是庞然大物)图像发送到具有小屏幕的设备,则性能可能会受到负面影响。在找出绩效和感知质量之间的潜在关系时,这些因素值得考虑。

关于浏览器的特性和条件,JavaScript为我们提供了大量的工具来识别用户设备的重要方面当前SRC属性显示从响应图像数组中显示的图像。缺少当前SRC,我可以很有把握地假设支持srcset图片是缺乏,并回落到img标记的src值:

const surveyImage = document.querySelector(".survey-image");让loadedImage = surveyImage。currentSrc | | surveyImage.src;

在屏幕功能方面,devicePixelRatio告诉我们像素密度一个给定设备的屏幕。缺少devicePixelRatio,您可以放心地假定回退值为1

让dpr = window.devicePixelRatio || 1;

devicePixelRatio具有出色的浏览器支持.那些少数不支持它的浏览器(例如IE 10及以下)在高密度显示器上使用的可能性非常小。

坚定的getBoundingClientRect方法对象的已渲染宽度img元素,而HTMLImageElement接口的完整的属性确定图像是否已完成加载。这两者中的后一个很重要,因为在没有加载图像的情况下,丢弃单个结果可能是更好的选择。

在JavaScript不可用的情况下,我们无法收集任何这些数据。当我们收集那些关闭了JavaScript(或无法运行JavaScript)的用户的评分时,我不得不承认数据中存在缺口。我们仍然能够收集到的基本信息确实提供了一些价值。

嗅探WebP支持#第6节

您可能还记得,最初的一个问题是用户如何看待WebP图像的质量。HTTP接受请求标题宣传浏览器(如Chrome)中的WebP支持。在这种情况下接受标题可能如下所示:

接受:图像/ webp图像/ apng,图像/ * * / *;q = 0.8

如您所见,WebP内容类型图像/ webp是标题内容中的播发内容类型之一。在服务器端代码中,您可以检查接受图像/ webp子串。下面是它的外观表示后端代码:

const WebP = req.get("Accept").indexOf("image/ WebP ") !== -1 ?真:假;

在这个例子中,我将浏览器的WebP支持状态记录到JavaScript常量我可以用以后修改图像交付。我可以使用图片具有多重属性的元素来源S,并让浏览器根据来源元素的类型属性值,但这种方法具有明显的优势。首先,它的标记更少。其次,调查不应该如此总是选择一个WebP源代码仅仅是因为浏览器能够使用它。对于任何给定的调查样本,应用程序应该在WebP或JPEG图像之间随机选择。不所有使用Chrome浏览器的参与者应该打分只有WebP图像,而不是两种格式的随机零星。

记录性能API数据#第7节

您可能还记得,我之前准备回答的一个问题是性能是否会影响图像质量的感知。在web平台开发的这个阶段,有几个api可以帮助我们寻找答案:

  • 导航时间API(第二级):这个API跟踪页面加载的性能指标。不仅如此,它还能深入了解特定的页面加载阶段,如重定向、请求和响应时间、DOM处理等等。
  • 导航时间API(第一级):与第2级类似,但存在关键差异。API第1级公开的计时缺乏第2级的准确性。此外,1级指标表示为Unix时间.在调查中,如果不支持第二级API,则只从第一级收集数据。它离理想还很远(技术上也过时了),但它确实有助于填补小空白。
  • 资源定时API:类似于Navigation Timing,但是Resource Timing收集的是页面资源的各个加载阶段的指标,而不是页面本身。在调查中使用的所有api中,Resource Timing使用得最多,因为它可以帮助收集图像样本的加载参数和用户评分。
  • 服务器定时:在选定浏览器中,当页面请求以Server-Timing响应头。此报头是开放式的,可以使用与后端处理阶段相关的计时来填充。这被添加到第二轮调查中,以量化一般的后端处理时间。
  • 油漆时机API:目前只在Chrome,这个API报告两个油漆指标:第一次油漆第一个意旨油漆.因为网络上有相当一部分用户使用Chrome,我们五月能够观察感知的图像质量和绘画度量之间的关系。

使用这些api,我们可以为大多数参与者记录性能指标。下面是一个简单的例子,展示了调查如何使用Resource Timing API为加载的图像样本收集性能指标:

const surveyImageElement = document.querySelector(".survey-image");const fullImageUrl = surveyImageElement。currentSrc | | surveyImageElement.src;const imageUrlParts = fullImageUrl.split("/");const imageFilename = imageUrlParts[imageUrlParts. php]。长度- 1];//检查性能API方法if ("performance" in window && "getEntriesByType" in performance){//从资源计时API中获取条目让resources = performance.getEntriesByType(" Resource ");//确保资源被返回如果(typeof resources === "object" &&资源。length > 0) {resources.forEach((resource) =>{//检查资源是否为加载的图像if (resource.name. indexof (imageFilename) !== -1){//为这里的图像访问资源图像}});} }

如果资源定时API是可用的,并且getEntriesByType方法返回结果,返回一个带有计时的对象,看起来像这样:

{connectEnd: 1156.5999999947962, connectStart: 1156.5999999947962, decodedBodySize: 11110, domainLookupEnd: 1156.5999999947962, domainLookupStart: 1156.5999999947962, duration: 638.1000000037602, encodedBodySize: 11110, entryType: "resource", fetchStart: 1156.5999999947962, initiatorType: "img", name:“https://imagesurvey.site/img -圆- 2/1 - 1024 w - c2700e1f2c4f5e48f2f57d665b1323ae20806f62f39c1448490a76b1a662ce4a。webp", nextHopProtocol: "h2", redirectEnd: 0, redirectStart: 0, requestStart: 1171.6000000014901, responseEnd: 1794.6999999985565, responseStart: 1737.0999999984633, secureConnectionStart: 0, startTime: 1156.5999999947962, transferSize: 11227, workerStart: 0}

我在参与者评价图像时获取这些指标,并将它们存储在数据库中。当我想要编写查询和分析我拥有的数据时,我可以参考资源和导航计时API的处理模型.有了SQL和数据,我可以测量模型概括的不同阶段,看看是否存在相关性。

在讨论了如何从调查参与者收集数据的技术基础之后,让我们将重点转移到调查的设计和用户流上。

设计调查#第8节

尽管相对于其他网站,调查往往具有直接的设计和用户流,但我们必须了解用户的路径以及用户可能面临的障碍。

入口点#第9节

当参与者到达主页在美国,我们希望直接与他们交流。首页介绍文案欢迎参与者,为他们提供了一个简洁的解释,并提供了两个导航选择:

一个按钮的文字是“我想参与!”另一个按钮的文字是“你收集了什么数据?”

从这里开始,参与者要么开始调查,要么阅读隐私政策。如果用户决定进行调查,他们会进入一个页面,礼貌地询问他们的职业,并要求他们透露任何视力状况。这些问题的字段可以留空,因为有些人可能不愿意透露这类信息。超过这一点,调查开始认真。

调查底漆#第10节

在用户开始对图像进行评级之前,它们被重定向到底漆的页面. 本页描述了对参与者的期望,并解释了如何对图像进行评级。虽然这项调查是在设计和开发部门进行的,在这些部门,读者经常在网上使用图像,但初级读物仍然有助于让每个人都在同一个页面上。页面的第一段强调用户正在对图像进行评级质量,而不是图像内容.这是很重要的。在没有任何背景的情况下,参与者可能确实会对图片的内容进行评分,这不是我们想要的。澄清后,有损图像质量的概念如下图所示:

一张分开的照片,其中一半的图像质量较低,而另一半的图像质量较高。

最后,说明了额定输入的作用。大多数人可能会推断出这一点,但解释性副本有助于消除任何剩余的歧义。假设您的用户知道您所做的一切并不一定是明智的。在一个人看来显而易见的事,在另一个人看来未必如此。

图片样本页#第11节

此页面是主要活动,参与者在此评估向其展示的图像的质量。它包含两个焦点区域:图像样本和用于评估图像质量的输入。

让我们先来讨论一下输入。关于输入内容,我考虑了几个选项类型使用。我考虑过选择带有粗略预定义选项的输入输入用一个类型数量,以及其他选择。然而,对我来说最有意义的似乎是滑块输入用一个类型范围

评级下滑,“最差”在极左,“最佳”在极右。滑块轨迹是从左边的红色到右边的绿色渐变。

滑块输入比文本更直观输入,或者一个选择元素中填充了各种选择。因为我们要求的是对具有如此大的解释范围的事物的主观评估,滑块允许参与者在评估时更细粒度,并使收集的数据更加准确。

现在让我们讨论一下图像样本以及后端代码是如何选择它的。在调查的早期阶段,我决定要一些在现有图片集中并不突出的图片。我也想要未压缩的资源,这样我就不会向参与者展示重新压缩的图像样本。为了达到这个目的,我从当地的摄影师.我选定的25张图片经过了最低限度的处理原始图像从摄影师的相机里。结果是一组连贯的图像,在视觉上相互关联。

为了正确测量整个质量设置光谱的感知,我需要从上述的来源生成96个不同的质量设置,范围从5到100。为了考虑到屏幕在野外的不同宽度和像素密度,每个图像还需要根据每种质量设置以四种不同的宽度生成:确切地说,是1536、1280、1024和768像素。只是工作srcset是为你而生的!

最重要的是,图片需要以JPEG和WebP格式编码。因此,调查从768张图片中随机抽取每个标本在整个质量范围内,同时也为参与者的屏幕提供最好的图像。这意味着,在参与者评估的25个图像样本中,调查从一个池中抽取19,200图片总。

在介绍了调查的概念和设计之后,让我们继续探讨如何通过在第二轮中实施用户反馈来改进调查。

听取反馈#第12节

当我开始第一轮调查时,来自设计师、开发者、易访问性倡导者甚至研究人员的反馈如潮水般涌来。虽然我的意图是好的,但我不可避免地错过了一些重要的方面,因此有必要进行第二轮。迭代和细化是至关重要的提高设计的实用性,这次调查也不例外。当我们根据用户反馈改进设计时,我们就会把一个项目从一般水平提升到更令人难忘的水平。要做到这一点,就意味着要从容地接受反馈,并解决不同的、可执行的项目。在调查中,整合反馈不仅产生了更好的用户体验,还提高了收集的数据的完整性。

建立一个更好的滑块输入#第13节

虽然第一轮调查是可用的,但我在滑块输入方面遇到了问题。在第一轮调查中,该输入如下所示:

一个从左到右间隔均匀的标签,分别读“糟糕”,“坏”,“好”,“棒”。下面是一个禁用的按钮和文字“请评价图像…”。

关于这一具体实施,有两起重复投诉。首先,参与者觉得他们必须将自己的评分与滑块下方的一个标签对齐。这是不可取的,因为选择了滑块明确地鼓励参与者提供细致入微的评估。

第二个投诉是,在用户与滑块交互之前,提交按钮一直处于禁用状态。此设计选择旨在防止参与者在没有对图像进行评级的情况下在每个页面上单击提交按钮。不幸的是,此实现无意中对用户怀有敌意,需要改进,因为它会在没有明确解释原因的情况下,用户对图片进行评级。

修复标签问题意味着重新设计滑块,如图3所示。我完全删除了标签,以消除用户将答案与标签对齐的诱惑。此外,我还更改了滑块背景属性到渐变模式,这进一步暗示了输入的粒度。

提交按钮的问题是如何提示用户。在第一轮中,提交按钮是可见的,但禁用状态对某些人来说不够明显。在咨询了一位同事后,我找到了第二轮的解决方案:提交按钮不是最初可见的,而是隐藏在一些指南副本中:

修改后的滑块后面的文本“一旦你评价的图像,你可以提交。”

一旦用户与滑块进行交互,并对图像进行评级,就可以使用改变事件附加到输入触发,它隐藏指南副本,并将其替换为提交按钮:

修改后的滑块后面跟着一个按钮,上面写着“提交评级”。

这个解决方案不那么模糊,它将参与者引导到所需的路径上。如果有人禁用了JavaScript访问,指南副本永远不会显示,提交按钮立即可用。这并不理想,但它并不能排除没有JavaScript的参与者。

解决滚动困境#第14节

调查页面在纵向方向上工作得特别好。参与者可以看到全部(或大部分)图像,而不需要滚动。然而,在浏览器窗口或移动设备的横向,调查图像可以比视口更大:

调查的屏幕截图,由视口和评级滑块在底部剪切的图像。

使用这种有限的垂直空间是很棘手的,特别是在滑动条需要固定在屏幕底部的情况下(这解决了第一轮测试中早期的用户反馈)。在与同事讨论了这个问题后,我决定在页面角落里的动画指示器可以向用户表明还有更多的图像要看。

调查与剪辑图像,但现在有一个向下的箭头与单词“滚动”。

当用户点击页面底部时,滚动指示器就会消失。因为动画可能会不和谐某些用户,一个喜欢减少运动媒体查询用于关闭此(以及所有其他)动画,前提是用户对减少运动有明确的偏好。在禁用JavaScript的情况下,滚动指示器总是以纵向方向隐藏,在纵向方向上,滚动指示器不太可能有用,并且在可能最需要滚动指示器的横向方向上始终可见。

避免图像样本的过度缩放#第15节

一个同事让我注意到的问题是,调查图像似乎随着视窗无限扩展。在移动设备上这不是问题,但在大屏幕上,甚至中等尺寸的高密度显示器上,图像可能会被过度缩放。因为响应img标记的srcset属性指定的最大分辨率图像1536w,在设备像素比为2的设备上,当尺寸超过768像素宽时,图像可能开始变得“小”。

调查与图像扩大,以填补窗口。

一些过度扩张是不可避免的,也是可以接受的。然而,当它过度时,图像中的压缩伪影会变得更加明显。为了解决这个问题,调查图像max-width被设置为1536 px对于第二轮的标准显示。对于设备像素比为2或更高的设备,测量图像的max-width是这个的一半吗768 px

调查与图像舒适地吻合在窗口。

这个小的(但重要的)修复确保图像不会超出合理的最大值。使用视区中合理大小的图像资产,参与者将评估接近或处于给定图像资产的自然尺寸的图像,特别是在大屏幕上。

用户反馈是有价值的。我加入的这些和其他UX反馈项目改善了调查的功能和收集的数据的完整性。所需要做的就是与用户坐在一起,倾听他们的声音。

结束#第16节

随着第二轮调查的进行,我希望收集到的数据能揭示一些令人兴奋的事情,即人们对图像质量的感知与表现之间的关系。如果你想参与其中,请接受调查.当第二轮结束时,请关注这里的结果总结!

感谢那些为使本文尽可能好而付出宝贵时间和反馈的人:亚伦GustafsonJeffrey Zeldman布兰登·格雷戈里雷切尔·安德鲁布鲁斯Hyslop阿德里安·罗塞利梅格·迪基·库尔季奥莱克,尼克·塔克

另外感谢那些帮助改善图像质量调查的人:曼迪TensenDarleen Denno夏洛特丹蒂姆Dunklee,萨德鱼子

13读者评论

  1. 读起来很有趣。我个人对显示的任何图像都没有问题。我想知道那些能看到更多人工制品的人是否能在低光条件下使用校准良好的屏幕?

    我的验光师总是告诉我我的眼睛有多好,而唯一对我抱怨的人是戴着眼镜的昂贵硬件的用户(讽刺)。我从来没有理解它,通常只是去显示他们的加载时间在全脂图像与我的配置。

  2. 哇。非常好的关于研究复杂性的文章来回答那些乍一看似乎很简单的问题。我希望你也把结果写下来。

    你认为在你的分析中是否需要考虑锚定或其他偏见之类的影响,或者你认为在有足够多的参与者的情况下,这些影响会自动消失吗?例如,当我在一张高质量的图片之后看到下一张图片时,我对它的评价可能比在一张低质量的图片之后看到它时要低。有些照片可能会因为“摄影质量”(对焦、曝光等的选择)而被系统地评级为更高或更低的质量。

  3. 哇,这真的很有趣。我喜欢你设置的图像质量调查。希望所有的数据都能帮助你解决“我的图像看起来很糟糕”的困境,你可以发布更多关于结果的精彩内容。

  4. 设计是你的网站或应用程序对用户的第一印象,这就是为什么它很重要的原因,而获得用户的评论确实有助于获得好看的网站,这就是我们第一次发布网站时所做的ERP软件设计公开

有什么要说的吗?

我们已经关闭了评论功能,但是你可以看到在我们关闭评论功能之前人们都说了些什么。

从阿拉巴马州

Webwaste

在这篇《世界垃圾》的摘录中,Gerry McGovern研究了臃肿的网站和不必要的资产对环境的影响。
工业

连接这些点

在这篇摘自《创意文化》的文章中,Justin Dauer向我们展示了一个组织的文化和它所做的设计工作相互作用的许多方式。