交互案例研究-跨专业也能做交互

跨专业做交互容易吗？

没有设计基础也能学好交互？

如何将自己的已有专业知识更好地应用于交互？

今天，小编就为大家分享一下Xavi Almirall的一个交互项目。

他是一名在Ironhack学习UX/UI的学生，同时也是一位在在线业务的技术招聘方面拥有丰富经验的心理学家。通过三周的时间，他为Spotify设计了一个新的本地场景功能，来帮助用户更好的搜索本地歌曲。

项目介绍

Introduction

Spotify是一个正版流媒体音乐服务平台，它为用户提供了播放列表、推荐列表和新专辑通知等功能。但是，作为用户，我们可以如何在Spotify上寻找本地音乐呢？我们是否尝试过在该平台上寻找新兴乐队？如果有的话，那么这种搜索经历又是怎样的呢？

除此之外，每个城市都会为我们带来不同的氛围。以纳什维尔为例，如果提到它，我们最先想到的是什么？也许是国家？也许是巴塞罗那还是纽约？我们的脑海中又会浮现哪些艺术家呢？

from Unsplash

基于以上思考，Xavi Almirall决定为Spotify设计一个本地场景功能——Local Scene。这项新功能将允许用户按流派风格过滤寻找附近或不同地点的艺术家。

这是一个个人项目，在设计过程中Xavi Almirall用到的主要工具为Figma。此外，由于他习惯了iOS设计系统，因此他决定以iOS平台为基础进行功能设计，以响应其特定需求。

设计流程

Deisgn Processes

在这一项目中，Xavi Almirall主要进行了UX研究、同类应用程序功能比较、原型设计、草图及线框图绘制等工作。

用户体验研究 (UX Research)：

在有了初步想法后，他决定进行快速验证。于是Xavi Almirall通过游击式的研究方法，对5位20至40岁的Spotify用户进行了采访，旨在了解他所设想的新功能是否具有设计意义。下图是其在affinity diagram中获取并总结的一些见解。

Affinity Diagram

Main Takeaways

部分用户将使用Local Scene功能来寻找新的艺术家
有些用户觉得Spotify无法帮助他们寻找到最新的本土艺术家
用户在Spotify上需要多次进行页面滚动，才能找到想要寻找的东西

功能比较 (Feature comparison):

尽管Spotify还在继续引领市场，但它在过去几年中略有下降。因此，在这种背景下设计Local Scene这一新功能，可以吸引更多用户进而恢复失去的市场份额。

因此，Xavi Almirall对同类应用程序进行了功能比较。同时在进行市场调查时，他发现Bandcamp是唯一允许用户通过位置定位寻找艺术家的竞争对手。

各同类应用程序的功能比较

原型角色设计 (Proto persona):

在继续设计之前，Xavi Almirall创建了自己的原型角色：Travis。他是一位本地艺术家的支持者，喜欢发现新的本土乐队和来自其他城市的新兴艺术家。

此外，Travis也喜欢朋克摇滚音乐，但Spotify上的"Discovery Weekly"播放列表为他提供的都是同一位艺术家的歌曲。这也使得他无法知道是否可以在其所居住的Terrassa城市发现新的乐队。最终，Travis放弃了Spotify，改用其他软件。

Travis

Travis的用户旅程图

根据Travis的用户旅程图，形成了一系列问题和假设陈述。

问题陈述

Local Scene功能旨在实现对新兴本土艺术家的发现。我们可以观察到目前Spotify的播放列表和播客并没有满足当地音乐艺术家支持者的期望，而这就会导致这些用户降低对该款应用程序的参与度。

假设陈述

本土艺术家的支持者所创建的城市过滤器将实现更高的保留率。

用户流和站点图 (User flow & sitemap):

考虑到问题陈述，设计师定义了Travis的用户流，其核心目的是播放在Terrassa中最受欢迎的朋克风格歌曲。

用户流

此外，Xavi Almirall还创建了sitemap，以查看信息架构并考虑Local Scene最合适的位置。在用户采访中，他发现其中一部分用户厌倦了不断滚动页面。因此，他决定将这个新功能放置在Spotify代码功能的旁边。

在下图的sitemap中，蓝线代表了主导航，黑线代表了子导航，而粉线则代表了新功能。

sitemap

草图和中保真线框

(Sketches and mid-fi wireframes):

用户流程和站点图可以帮助设计师决定需要设计的主要屏幕。随后，他还与用户一起测试了草图，并收集到了以下几个反馈信息：

"Change Location"按钮具有误导性。这是否意味着出现了错误定位？
有些用户没有看到播放列表。这是否意味着该新功能不包括播放列表？

据此，Xavi Almirall开始创建中保真原型。首先，他更改了"Discover other cities"的"Change Location"按钮，随后在Local Scene功能屏幕中添加了精选播放列表。

六个主要屏幕的草图

六个主要屏幕的线框图

这种从草图到线框图的转换，可以帮助Xavi Almiral重新思考一个问题，即：如何在屏幕上呈现信息。例如，他添加了城市名称、背景图片，并将流行歌曲放在了首位。

在完成了中保真原型后，Xavi Almirall与5位用户进行了测试，而其也得到了非常好的反馈。此外，他也获得了一个关于高保真设计的重要见解：如何开启GPS？

中保真原型

高保真原型 (Hi-fi prototype):

Xavi Almirall对以下部分进行了高保真原型设计：

Search Screen (搜索屏幕)：在该屏幕的右上角上有一个"Local Scene"图标，它可以帮助用户确认屏幕
Confirmation Screen (确认屏幕)：这个页面会告诉Travis目前所在的位置是Terrassa。Spotify通过地理位置收集所在城市和乐队信息
Local Scene Screen (本地场景屏幕)：在这个屏幕上，可以看到位于Terrassa的艺术家数量以及所有流行的本地歌曲。此外，还可以查看收听次数最多的专辑、播放基于本地艺术家的精选播放列表，以及其他艺术家和即将举行的演出

"Local Scene"图标

Local Scene Screen

此外，如果Travis想要寻找朋克风格的艺术家，那他可以点击"Filter by genre"按钮，即可查看城市中所有该流派的艺术家信息。

‍点击"Filter by genre"，以查看相关流派信息‍‍‍

可是如果他想要搜索其他城市，又该怎么做呢？这时候，只需要回到搜索屏幕，再次点击"Local Scene"功能。

Confirmation Screen (确认屏幕)：Travis会点击"Discovery other local scenes"按钮
Search Local Scenes Screen (搜索本地场景屏幕)：通过搜索栏可以按城市或邮政编码进行搜索。此外，还会根据用户的音乐品味推荐城市，然后向下滑动，即可看到不同的城市‍‍‍‍‍‍‍‍‍‍‍