网易云音乐交互设计:如何让用户感知到个性化推荐

一般用户会以为都是热门推荐,只有非常细心的用户才可能发现,比如你最近听了不少古典音乐,那在首页上就会看到古典相关的歌单推荐。

1477356953-8025-101c00025a089ad9aacc

话说,云音乐是最早做歌单个性化推荐的——在首页根据你的口味推荐歌单,只是一开始绝大多数用户都不知道有这个功能。

为什么呢?因为我们在展示上非常低调——在首页上的表现就是,热门推荐歌单和个性化推荐歌单混杂在一起。一般用户会以为都是热门推荐,只有非常细心的用户才可能发现,比如你最近听了不少古典音乐,那在首页上就会看到古典相关的歌单推荐。

1477356955-2668-f780006fbb141357107

我们觉得这是我们的一个特色,应该发扬光大,让更多的用户感知到。针对这个问题,我们首页做了一次改版,将热门推荐和个性化(口味)推荐分成两个独立的栏目,各自配以明确的标题,同时给每一个口味推荐加上了推荐理由。

1477356954-8992-large

改版之后,就收到很多用户反馈:很喜欢你们的个性化推荐功能!mummm……人的感知就是这么简单粗暴。

这一版首页设计维持了相当长一段时间。直到某一天,产品再次提出:“我们现在首页的内容太少,滚两下就没东西可看了,浪费了首页这么好的位置。我们要在首页推更多的内容给用户,不光是歌单,还有专辑、MV、电台节目等等,让云音乐里更多好的资源曝光。”

设计:“那原来的个性化推荐栏目怎么办?”

产品:“没有这个栏目了,之后的首页栏目按照内容类型分,每个栏目里都有可能出现个性化推荐的内容。”

设计:“那不又回到之前的老问题了么?用户感知不到个性化推荐。”

产品:“现在用户应该都知道这个功能了吧。”

设计:“……”

看在产品在首页改版上沉淀了这么久的情分上(通常是情难却),还是勇敢地面对首页要改这个事实吧。

按照设想初步绘制的原型:

1477356955-2687-f7c0002bbb4271dcc9a

mummm…..左看右看,反正就是看上去变平庸了——和那一票在首页分类推荐各种内容的XX软件没啥区别。虽然我们自己知道,整个首页都是个性化推荐,每个人看到的首页都是不一样的……除了新手引导(一次性的引导容易被忽略),如何让用户感知到这件事情呢?

每个内容后面跟个推荐理由?首页内容变多,布局变紧凑之后就挤不下了。

给每个口味推荐的内容打个标记?画出原型之后,就觉得太傻太壮观。

1477356955-7244-1023000809681aacfe6f

点击进入内容页以后出个toast显示推荐理由?并不是每个用户都想看到这玩意儿的,软件里现有的各种toast已经让人心累。

1477356954-8612-101d0008041d9512a47c

挖空心思在想哪里还有空间。

这时候有一种设计模式从记忆里浮现出来。微信朋友圈,浏览到很下面,想往回滚动的时候,顶部的系统状态栏会短暂地被一个回到顶部的快捷操作提示替换一下。类似toast,但又没有toast那么嚣张。

1477356956-8020-f7c0002bbab5103c0fd

感觉利用这个位置去显示“推荐理由”还算靠谱,好处是没有干扰主体界面展示。虽然从看见的时机上来说晚了一步,但是,至少还有机会真真实实地用肉眼看到。

1477356956-2663-101f00009403f4f406db

同时我们还设计了一些其他的功能露出:

比如新用户还没有任何口味数据的时候,中间的每日歌曲推荐功能是不可用的,此时将这个入口替换成让用户设置初始化口味的功能。

1477356956-2890-f780006fbb2b08a8090

又比如把首页的第一个tab名称由“推荐”变为“个性推荐”;在首页下拉出现的背景上显示“首页内容根据你的口味生成”,等等。

1477356957-3965-f780006fbb3119b955a

新版上线之后,一大波老用户反馈来袭:哎呀原来首页我很喜欢的个性化推荐功能怎么没了?mummm……人的感知就是这么简单粗暴。

不过这个改版我们已经想了很久,方向已定,就不会因为用户反馈而回退,能做的就是跟用户说明,然后让时间去冲淡一切。不知道现在有多少人知道我们首页的个性化推荐呢。

产品迭代过程中,如何优雅地让用户感知到我们的功能特色,是个永恒的议题。

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/18282/

(0)
iouedioued
上一篇 2016-10-25
下一篇 2016-10-25

相关推荐

  • 从「令人发指」的苹果来看所谓的细节设计

    什么是细节设计?在讨论这个问题前先来看个案例。如果你手里恰巧有 iPhone 4s / 5 / 5s,请随便打开一个可以调出虚拟键盘的应用「比如短信」。注意观察键盘的最后一行,相信看这篇文章的人都是中文用户,所以在你的…

    IxD案例 2014-10-10
  • 购物商城微信公众号交互设计

    设计背景 由于微信公众号轻应用的设计需要在微信的结构框架中进行,信息架构和导航布局需要基于微信的开发接口和架构来做,项目开始时微信针对公众号的导航框架刚好有做出调整,在进入公众号里面的页面后可以逐级返…

    2015-11-06
  • 【译文】雨天里的交互细节

    最近出现了很多智能手机用的天气应用。但是在以前,这些应用其实都不是很必要的,我们只要知道早上出门带不带雨伞就好了,所以如果天气应用可以直观地告诉我们这一点就好了。就像妈妈一样,在你早上出门的时候帮你…

    2015-10-30
  • 创建用户友好型表单 Creating User Friendly Forms

    好久不见,由于懒惰好久没有翻译文章了,这次翻译一篇关于表单的很基础的文章。有些例子较牵强,大家可以有选择性的看 原文地址:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2 作者:Momo…

    2018-04-18
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 闪光的消亡对于用户体验来说意味着什么?

    而 Flash 是一个控制狂,那些拥抱 HTML5 的人往往是渐进增强的冠军。最后,我们的用户获胜。SuAnne 探索途径挑战现状,为现代的 web 设计。 Adobe 公司的决定停止移动 Flash 平台的开发及在 HTML5 相关的努力增加其…

    2014-09-04
  • Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • 消灭空状态

    设计师在做设计的时候,常常会忽略的一个页面状态就是空状态。空状态,顾名思义就是空白的状态,比如说:一个新闻的列表中没有新闻,这个时候列表就是空的,用户打开之后看到的就是白惨惨的一片。空状态的用户体验…

    2016-01-29
  • 交互设计案例视频展示

    一款APP的交互原型演示,有能力的话自己动手做个视频吧! [hana-flv-player video=" http://jhxt.org/wp-content/uploads/2015/07/ixdshow.flv" width="640" height="auto" description="Ta APP 交互简介" player="…

    2015-07-01
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04