谷歌相册 Redesign

Zeeshan

2019-06-11

自译外文

118

0

1

经验分类:经验/观点/自译外文

原作者:Tony Jin

谷歌相册重新设计 - 用户体验案例研究

谷歌相册重新设计 - 用户体验案例研究

利用Google的机器学习算法帮助用户更好地管理和比较类似的照片


Image title


我喜欢Google相册。
作为一个用户,我认为谷歌相册是我最喜欢的应用程序。谷歌相册可以快速查找照片,快速与朋友分享照片,以及获得有趣的动画和拼贴画。作为一名设计师,我喜欢谷歌相册利用 AI 学习的力量来探索用户管理照片这种直观的方式,例如使用自然语言搜索照片而不是浏览漫长而凌乱的时间线。但是,我相信可以进一步推动 Google 的机器学习技术,使照片管理体验更轻松。我和我的朋友经常遇到的一个问题是,在拍照时,我们喜欢拍摄很多照片,然后选择最好的照片。选择过程既耗时又令人沮丧,如果我们将所有这些照片留在那里,相册很快就会很混乱,使我们很难找到我们想要的东西。


这给了我最初的想法:如果我们可以重新考虑照片在Google相册中的呈现方式,并帮助用户更好地管理和比较相似照片呢?当然,如果我正在设计真实产品,我还会回顾产品自己的目标受众和公司的路线图,思考该功能对于用户和业务是否至关重要。虽然我必须自己做出这些假设,但我仍然希望得到一些练习并思考如何让我最喜欢的应用程序更好。



概述
在解释我如何发现问题并得出解决方案之前,我将首先概述我发现的问题以及我提出的解决方案。


问题
让我们从这个场景开始吧。 想象一下,你走在街上,一个美丽的夕阳捕捉你的注意力。 你取出手机并拍下照片,希望抓住时机。 但是日落不同于你以前见过的任何东西,你想要确保你捕获最好的东西,以便以后与你的朋友和家人分享。 所以你会多拍几张, 稍微改变角度,然后稍微移动一下,最终,你拍摄了20张照片,甚至没有想到你拍了这么多张照片!

如果您不时这样做,您的照片库可能最终会像这样:

Image title

3张不同用户的照片库,拍摄了大量相似的照片

根据我的研究,我发现这是休闲/半专业摄影师的常见问题。
他们通常会拍摄大量类似相同/相同的照片,并且很难将它们进行比较,以便选择最好的照片。 这些高度相似的照片也使他们的相册混乱,使他们以后很难找到他们想要的东西。我们怎样才能解决这个问题?

我的解决方案
我设计了 Photo Groups,这是 Google 相册中的一项新功能,可以更好地利用Google 的 AI 学习技术来识别相似的照片,将它们组合在一起,推荐最好的照片,并促进照片比较。


新设计的Google相册可让您:
浏览没有干扰:使用机器学习算法,重新设计的 Google 相册会自动对同一时间拍摄的相似照片进行分组,并且只显示相机胶卷中的最佳照片。 快速浏览您最美好的回忆,只有在您感兴趣的情况下,才能深入了解群组中的所有图像。
Image title

使用照片组浏览



即时查找最佳照片:照片组中的最佳照片会自动为您挑选。 不满意推荐的一个? 全新设计的“比较模式”可帮助您即时查看您拍摄的每张照片与我们建议的照片之间的差异。 快速决定标记或删除,并单击删除所有不需要的照片。
比较模式

比较模式


始终处于控制模式:我们确保算法为您完成大部分工作,但我们知道有时候您的偏好可能会有所不同。 如果您不同意我们的分组或建议,只需编辑照片组即可添加和删除照片。
Image title编辑照片组


定义用户需求


作为设计师,我知道我不应该为自己设计。 我不认为这个问题已经足够广泛,因此设计一些东西来解决这个问题是值得的。 为了快速了解这是否是一个值得解决的问题,我决定1、关注 Reddit 上的摄影论坛,2、对我周围的人进行快速,半结构化的访谈。

在线论坛
由于时间的限制,我认为在线论坛是我了解问题的最快方式。 因此,我去摄影相关的 subreddits 询问是否有多张相似的照片混杂照片库是其他人遇到的问题。我发现的是令人惊讶的。 人们的回答一般分为以下两类:


1、好的摄影师不应该首先拍摄太多的照片。

Image title


2、我愿意/我必须花时间和精力从我拍摄的所有照片中挑选并编辑它们。
Image title



为什么是这样?
当我更多地了解他们的答案时,我本能的意识到 reddit 用户往往是更有经验的摄影师!与那些随意拍摄生活快照的人不同,这些半专业摄影师或专业摄影师要么拍摄很少并且高质量的照片,要么花费很长时间使用 Lightroom 等工具手动修缮照片。换句话说,在他们的相册中要么有很少类似的照片,要么有很多。最后他们会一张又一张地检查照片,选择出最好的照片并对其进行后期处理。

因此,专业摄影师似乎不在我的目标受众中。那些只使用相机拍摄生活快照的休闲摄影师呢?

访谈和角色
考虑到这个问题,我起草了几个问题并随便开始向我周围的人询问他们拍摄照片的习惯,以及他们现在是否遇到任何困难。我有一个假设,那些在拍照很随意的人会因为清理相册和删除类似的照片而感到沮丧。


我的发现验证了这一假设:当人们随意拍照时,他们往往会遇到管理类似照片并挑选最佳照片的挫败感。为了总结我的研究的主要发现并指导我的设计过程,我创建了以下角色。我还创造了一个反人格,提醒我记得我不是在为某一个人而设计。
Image title



领域研究
知道存在问题以后,我研究了以下现有产品和功能,试图找到灵感和差距:

Image title


现有的产品都不利于照片之间的比较。 只有Gemini帮助用户管理类似的照片,但用户需要进入应用程序手动清理他们的照片库。 我们是否可以使清理过程更加轻松,并帮助用户更好地比较他们拍摄的相似照片?


设计目标
根据用户需求和现有产品的差距,我确认了希望通过 redesign 实现更高层次的目标。
Image title


促进用户浏览过去的照片
现在,用户可以看到他们在“照片”标签中列出的所有照片,其中类似的照片占用了大量空间并阻止他们找到他们需要的照片。
从我的用户研究中,我了解到用户并不一定需要那些照片,尤其是类似照片。他们只是希望看到关键照片,提醒他们做过什么以及他们去过哪里。只有当他们感兴趣时,他们才能看到与该特定时刻相关所有的照片。


重新设计应该从哪里下手?
我的第一直觉是重新设计“相册”标签,但在深入重新设计之前,我问自己:这个问题可以在其他地方找到吗?


Google相册允许用户使用自然语言(例如Paris Summer,Dogs,Sunset等)搜索特定照片。 Google智能助理还会自动为同一时间和地点拍摄的照片创建相册,并将其推荐给用户。我应该专注于这些功能,以更好地帮助用户浏览他们的记忆吗?

Image title


我回顾了我从用户访谈中学到的东西。与我交谈过的大多数用户的大部分时间都在浏览“照片”标签中的照片。
有些人使用“搜索”,但仅用于搜索特定照片。对于“相册助手”标签中自动生成的照片专辑,不包含用户拍摄的所有照片。
虽然这些照片专辑的意图是仅仅是自动为用户提供最佳照片,但是用户仍然想知道他们拍摄的所有照片都在哪里,并且更愿意在“照片”标签中查看。


因此,我决定“照片”的标签是 redesign 下手的地方。


设计方案:分组和扩展
帮助用户快速清理杂乱相册的一种方法是“使用机器学习算法对相似的照片进行分组”,并仅在主网格视图上显示最佳的照片。用户可以查看照片,单击感兴趣的组,并查看扩展的组中的所有其他照片,以便他们可以详细查看所有照片。

这在技术上是否可行?
由于我的技术背景,即使我无法访问项目的工程师,我也会一直考虑设计的可行性。
关于这个设计理念的两个重要问题是:1、如何定义“相似的照片”并将它们分组。2、如何在一组相似的照片中定义“最佳照片”。


对于第一个问题,Google 相册已经能够识别出类似的照片。它的“相册助手”功能可以自动生成类似照片的拼贴画和动画。


对于第二个,Google 相册现在可以自动创建相册和视频,并选择不重复的照片自行添加。


我不确定这些照片是“最好的”,但它们绝对是从现有照片中精心挑选出来的。此外,Google Clip 还具有自动推荐视频剪辑中最佳照片的功能。
因此,尽管最佳照片的概念仍然是 AI 算法算出来的,但是我相信,根据某些标准,从一组照片中选择“最佳照片”的技术应该可供 Google 使用。

考虑到这个想法,我很快就提出了两个选择,并考虑了利弊。
Image title但是,在网格布局上展开组意味着需要在单击时更改整个布局。这也意味着用户需要再多一步才能获得他们想要的照片。他们仍然需要在照片列表选择相似的缩略图。然后我开始问自己:用户是否真的需要在相机胶卷中看到所有相似的照片?


似乎所有照片都显示在相册列表中,至少在展开的视图中是惯例。


但是当我回顾用户需求和我的设计目标时,我意识到这个约定可能会被打破。相册列表的主要功能是让用户快速浏览并查找/发现他们正在寻找的内容。
用户只关心他们所做的事情以及他们过去所处的位置,一个图像足以满足这一目的;相似图像的相似之处仅在用户可以看到详细图像时才有意义。

因此,我开发了第三种替代方案。
Image title

我迅速抽出了一个线框并向用户展示了验证这个想法。
Image title

用户反馈:如何识别最重要的时刻?
我收到的一个反馈令人惊讶:
对于一些用户来说,在相册列表中显示所有相似的照片实际上是可以帮助他们识别哪些时刻是最重要的。


当用户快速滚动时间线时,他们会在看到他们为他们访问过的一个地方拍摄了15张相似的照片时停下来。 这可能意味着他们在那里度过了很多时间,或者这个地方很特别。将所有15张照片分组到一个缩略图中会失去这一点,但它可以帮助用户清理他们的照相册。

这是我以前没有意识到的。 解决一个问题可能会导致另一个问题的产生。 有没有更好的方法来解决杂乱的问题,同时仍然有一些东西来表明一组相似的照片的重要性?

我很快想到了两个选择:
Image title


我决定使用大小来表示组中的照片数量是一个更好的选择,因为大小可以很自然的让人们理解更多信息:大小越大,照片组包含的照片越多,照片越多,这个小组越重要。


但是,这意味着我们需要稍微更改照片在“照片”标签中的显示方式。 如果我可以访问开发人员,我肯定会向他们咨询有关此更改的信息,并平衡更改带来的价值以及我们需要为此更改付出的努力量。


根据我自己对Google Photos当前网格布局的理解,我开始探索这种变化将如何影响不同情况下的布局。


不同网格布局的分组
Google相册的iOS客户端有4种不同的网格布局。
Image title


显然,在年度视图中对缩略图进行分组是没有意义的,因为它不会向用户显示所有照片。 因此,我开始考虑如何为其他3个视图分组缩略图,并绘制出相应的线框。
Image title


在月视图和日视图(3)中,由于几乎所有照片都以固定大小的方块显示,因此我为不同数量的照片组合了3种不同的尺寸。对于日视图(2),由于每行最多有2张照片,并且照片尺寸根据其宽高比,宽度和高度而不同,因此我仅定义了2种不同的尺寸来表示每组中的照片数量。

至于划分组的实际阈值(例如,一组7张照片应该是1号还是2号),我需要与工程师讨论细节并试验真实数据。它也可能取决于不同用户的习惯。

分组将如何改变用户浏览/与照片交互的方式?
在“照片”选项卡中重新设计网格布局后,用户点击进入照片组后会看到什么?引入“照片组”的概念意味着我需要更多地思考。1、用户如何在这些组中的照片之间导航,2、如何影响与这些照片的现有交互。

对于第一个问题,我回顾了用户需求,并将自己置于用户的角度。由于我的时间有限,我做了一个有根据的假设,大多数时候,用户只想在刷过照片库时看到最好的照片。只有他们真正感兴趣的照片才能看到他们拍摄的所有其他类似照片。

考虑到这一假设,我开始考虑交互的替代方案。

Image title


乍一看,替代2似乎是相似照片之间最差选择,因为当缩略图的位置不断变化时,用户很难记住他们想要比较的照片。 但是,由于我后来决定创建一个单独的模式进行比较,因此用户在此页面中的照片之间导航的唯一目的就是快速浏览它们。 为此,备选方案2和备选方案1成为最佳选择。 如果我有时间,我会把它带给用户或其他设计师以获取他们的意见并验证这个设计决定。


至于重新设计如何改变用户当前与照片的互动,我探讨了用户当前与照片互动的所有方式,并考虑这些互动是否更合理地应用于一组相似的照片 或一张照片。
Image title


帮助用户选择他们的照片
用户在拍摄大量相似照片时通常需要执行的另一项主要任务是比较不同的照片,删除不良照片,并选择最佳照片进行查看,编辑或分享。但是这个选择过程是痛苦和耗时的,因为1、用户必须手动浏览每张照片来挑选好的并删除不好的照片,2、在相似的照片之间进行比较并发现差异非常困难。如何让选择过程更容易?


使用机器学习推荐最佳照片
减轻用户选择最佳照片负担的一种方法是“快速行动”。使用机器学习,可以识别具有最佳照明,构图,甚至是每个人都在微笑的照片。 Google Clip 一直使用类似的算法来推荐视频中的最佳时刻。可以在 Google 相册中进一步应用类似技术,以自动建议照片组中的最佳照片,并使用户能够快速共享或删除其他照片。


但是,我相信即使使用最先进的算法,用户仍应自己选择最佳照片,这样“最佳照片”的概念也非常清晰。如果他们不想选择推荐的照片,我们如何帮助用户选择他们喜欢的照片?


促进比较
我几乎采访过的所有用户都抱怨滚动相似的照片并在它们之间进行比较很难。以下是他们目前在类似图片之间进行比较的方式:
Image title


作为一名心理学学生,我没有发现这种趋势令人惊讶。 “改变失明”是所有人都体验到的。 心理学实验表明,当两个略微不同的图像并排时,或者甚至当它们顺序呈现时,两个图像之间存在短暂的空白区域时,特别难以进行比较。


尝试识别以下两个图像之间的差异。


Image title



如果并排比较已经很困难,那么请考虑滚动并逐一看到略有不同的图像是多么困难,并尝试将当前的图像与10秒前看到的图像进行比较。

查看两个图像之间差异的最快捷,最轻松的方法是按顺序叠加覆盖照片,两者之间没有中断,类似于用户如何比较Google照片,Apple照片和Instagram中的已编辑图像和原始图像。

Image title


考虑到这些模糊的方向,我开始集思广益并对潜在的想法进行原型设计。


设计方案
由于很难使用纸张或甚至可点击的原型来说明用户如何比较不同的照片,以及比较方法是否有效,我在Principle中快速创建了以下备选方案,并使用真实照片来说明用例。 我自己走过了使用场景,并向其他人展示原型以获得反馈。
Image title

Image title

Image title


在这3种方法中,替代方案1和2是相似的,因为它们引入了点击缩略图以将点击的照片与固定照片进行比较的交互。备选方案3从另一个角度解决问题,使用户能够自然地浏览照片并在需要时与基准进行比较。


替代方案1和2的一些缺点可以通过合并两者来解决。我们可以使用备选方案2中的大多数交互并进行以下更改:我们可以让用户拖动缩略图将其固定在屏幕上,而不是让用户双击或滚动以固定照片。


最终,我仍然决定进一步开发第三种替代方案,因为它不需要用户改变他们的习惯。考虑到应用程序的庞大用户群,可能很难让Google相册的所有用户快速了解备选方案2中的交互,但一旦学会了,它可能会更有效率。但是,如果我有更多时间,我肯定会从用户/设计师/ PM收集更多反馈,或进行A / B测试以决定最终的互动。


是否分开模式?
我可以选择直接将比较功能添加到照片详细信息页面,或创建单独的“比较模式”以更好地帮助用户比较照片。我决定为它创建一个单独的模式,原因如下:

Image title


高保真设计
考虑到所有不同的组件,我开始深入探讨如何将它们连接成一个有意义的流程。 我再次回顾了用户任务,以指导我在整个过程中的推理。
至于视觉设计,我遵循 UI 设计指南,使其与Google相册的风格保持一致。
用户流和原型

Image title


使用中的功能
浏览过去的照片:相似的照片会自动分组到相册列表中。 用户点击它们时会看到组中的所有照片,并且可以通过单击底部的缩略图来浏览。 在当前照片上向左和向右滑动导航到另一个照片组/照片,而在缩略图上滑动可快速在组内的照片之间导航。
Image title


比较照片:系统推荐的最佳照片已用点表示。 用户可以点击“照片组”图标进入比较模式。 对于每张照片,他们可以点击并按住以将其与固定照片进行比较,默认情况下是建议照片。 然后他们可以选择他们喜欢的,并删除他们不喜欢的。 完成后,他们可以删除所有未选择的照片,也可以将选定的照片单独保存到库中以便进一步操作。
Image title


管理照片组:机器学习算法可能无法始终将正确的照片放入照片组。 当Photo Group对用户没有意义时,他们可以轻松地添加照片或从Photo Group中删除照片,甚至可以完全删除分组(原型中尚未显示)。

Image title


未来的步骤
分组技术细节
确定设计解决方案成功与否的关键功能之一是对相似的照片进行分组。但如何定义“相似”的照片?一个照片组和另一个照片组之间的边界是什么,如果它们都是在相同的时间,在同一个地方与类似的人一起拍摄的?人们为什么要拍照并将其上传到Google相册有很多不同的用例,这意味着如果我们要更改现有产品,我们就需要考虑所有这些用例。


如果这是一个真实的项目,我肯定会从分组创意的开始就开始与工程师一起工作,以确保我们以正确的方式训练机器学习算法并考虑不同的边缘情况。


此外,照片组包含不同数量的照片,并在相机胶卷中使用不同尺寸显示。我们如何划分数字并将它们映射到不同的大小? 16张照片组应该采用2x2网格还是4x4网格?这会根据用户拍照的习惯而有所不同吗?这也是我需要与工程师讨论并查看真实用户数据以做出最终决定的事情。


用户评估设计
由于时间限制,我无法将设计备选方案或最终设计带给真实用户进行结构化反馈,尽管我尽力随便向人们展示并听取他们的想法。有几个我之前提到的问题,我希望进一步了解我是否有更多时间:


在照片组之间导航和在Photo Group中导航的不同方式是否有意义?
我选择用于照片比较的替代方案是他们首选的比较方式吗?他们是否会更喜欢挑战现有行为但又带来更多便利的另一种选择?在照片组中,用户是否了解哪些操作适用于整个组,哪些操作仅适用于当前照片?固定照片和推荐照片的概念有意义吗?它们应该是一个还是两个概念?除了回答这些问题之外,我还想制定一个计划,评估我的设计是否成功,并确定可用性问题。鉴于应用程序的庞大用户群,如果可能的话,我可能会逐渐将更改推送给部分用户进行A / B测试。


与现有功能集成
向现有产品添加新功能意味着该功能不能单独使用,必须与整个产品相匹配。 Google照片中与重新设计相关的一些现有功能包括Burst Photos和Pixel 3中的Top Shot。


Burst Photos:Google相册已将Burst Photos分组到一个组中,并允许用户设置关键照片并删除其余照片。但是,功能仅限于Burst Photos,因此用例不同。现在,我正在使用一个不同的图标来表示照片组;然而,由于对类似照片进行分组和分组突发照片是类似的概念,我可能会进一步思考区分它们是否有意义,如果没有,如何将这两个功能合并为适合两种用例的功能。


Pixel 3中的Top Shot:Google的Pixel 3具有Top Shot功能,只需点击一下即可自动为用户拍摄几张照片,之后会向用户推荐一张照片。这个功能,如果在其他智能手机中变得越来越常见,可能会解决人们从另一个角度拍摄太多相似照片的问题 - 如果手机自动拍摄多张照片并选择最佳照片,则用户无需拍摄很多相同的照片首先作为故障保险。


但是,我认为分组功能仍然是必要的,因为1)Top Shot仅适用于Pixel 3,而不适用于其他智能手机或相机。一旦像Top Shot这样的功能变得司空见惯,人们可能需要很长时间才能停止拍摄多张类似的照片。 2)即便如此,人们仍然希望在拍照时尝试稍微不同的角度和照明。这是一个用例,我们仍然需要帮助他们在之后对相似的照片进行分组。Top Shot和Photo Groups之间有几个相似之处,两者都与Google Photos相关。作为未来的一步,我需要考虑如何使他们的接口/交互一致。

将UI扩展到其他平台
Google相册是iOS,Android和Web上的跨平台。添加此功能意味着我需要考虑如何在不同的屏幕尺寸下更改其他平台的UI。


我学到的是
重新设计的考虑因素
这是我第一次重新设计具有大量用户群的现有产品,并为其添加新功能。它促使我深入思考新功能将如何改变应用程序的现有流程,交互,甚至背后的逻辑。例如,通过引入照片组,我需要考虑以前仅将一张照片应用于照片组的每个功能。
我尽力不破坏对用户有意义的现有功能,以便在他们将应用程序用于其他目的时,他们不会注意到功能的变化。
由于庞大的用户群,对于新功能内部的交互,我仍然做出更保守的选择,选择那些更适合用户现有心智模型的选择。我不确定这是否是重新设计的最佳方法,所以我很乐意学习并讨论更多相关内容!

捕捉创意
我在接受IDEO汤姆凯利的采访时了解到捕捉创造性思维的重要性。我之前也了解到,只要你仔细考虑了这个话题,就会在意想不到的时候想到创意。


在我做这个项目时,我确保在我的Notes应用程序上始终捕捉到我想到的任何想法,无论其质量如何。在感恩节假期旅行也让我失去了时间让我的思绪徘徊并产生新的想法。然后,我会找个时间坐下来,看看那些看似随意的想法,并以此为基础。其中一些最终成为最终设计中的重要特征。我将来会继续为我的设计做这件事。






全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消