设计实战!怎么改版才能让宜家产品的用户体验更好? - 优设-UISDC

设计实战!怎么改版才能让宜家产品的用户体验更好?

2018/11/06 9606评论区

去宜家买过东西的人,大都会有这样的体验:将订购的家具零件从包装里面拿出来,花上一下午组装起来,然后大汗淋漓地坐在沙发上高兴地盯着这个看起来平淡无奇的新玩意,然后发上一条朋友圈。

这是「劳动的果实」。

作为一家成立于1943年的企业,宜家从瑞典走出到家喻户晓花费了几十年的时间。从2008年开始,宜家就已经是全球最大的家居零售商了。

在宜家,家具大都需要用户买回去之后自己组装起来,这种组装之后产生的一系列的心理学效应虽然并不只由宜家的产品带来,但是最终还是因为宜家的名气,而最终使用它来定名。

人们对于自己所构建起来的东西,会更加看重和着迷,哪怕别人所做的完全一样的东西,也很难在自己这里产生情感羁绊。这种完成感和成就感,源自于「向别人发出你有能力」的信号。严格意义上来说,这种心理学现象是一种认知偏差,而宜家的创始人 Ingvar Kamprad 正是在这个基础上构建起宜家的整个家居帝国。

即使死侍本人也沉迷于这种成就感。

一、宜家的用户历程

在宜家的用户历程当中,毫无疑问是存在「摩擦」和「障碍」的,但是这种设计是故意为之的。

在宜家的实体店当中,用户在各种「障碍」的包围下,按照规划者的路径来行动。而购买了产品之后,又可以回家在「摩擦」中享受「自己组装的乐趣」。

「每个人在宜家,都经历着属于自己的恐怖故事。」

用户进入宜家之后,会发现自己几乎只能按照规划的路径将所有的地方都逛到。在我看来,宜家这种精心设计的用户浏览路径是天才的设计,但是对于一部分用户而言可能会带来混乱和挫折感。

「瑞典的一家报纸认为,宜家是一种介于土木工程和潜水艇之间的东西,我觉得这种描述很准确。」

二、让人又爱又恨的说明书

另一方面,虽然宜家的产品组装起来要费点劲,但是说明书本身的设计并不差。

根据宜家设计师 Jan Fredlund 的说法,说明书每一页都是在两个原则之下设计完成的:清晰和连贯。

1. 清晰

宜家的用户手册的设计,从来都是从「用户测试」这个环节开始的。在此基础上,他们足以设计出清晰的装配手册。

让用户来测试安装,会帮助我们发现潜在出错的地方。这些错误在前期不明显,但是在安装后期可能是致命的。——Jan Fredlund

2. 连贯

宜家的说明书中的插画,是完全从用户的视觉角度来绘制的,完全3D建模,从头到尾完全按照顺序来制作的。这样避免了用户在装配过程中出错。

三、依然存在问题

工具和组件都逐个列举了出来,每个步骤都独立了出来,清晰的线条勾勒出操作的细节,因为没有多余的文字说明,所以全世界各地的用户应该都能看懂其中的示意。

整个说明书已经做的足够条理清晰,其中的同理心和逻辑性几乎达到了令人难以置信的程度。尽管如此,面对没有文字的纯指示性的说明,依然有用户感到困惑不能理解。

撇开网上的吐槽和玩笑,对于这个状况,我开始提出问题:

对于一个设计得已经比较清晰的系统,依然有人为之感到困惑,那么要怎样设计得更清晰一些呢?

四、调研

1. 与用户交流,量化问题

我创建了一个问卷,包含三个问题,然后在线随机发给了40个人。前两个问题分别是:

  • 「你以前有没有用过需要组装的组合家具?」
  • 「你有没有购买过或者组装过宜家的产品?」

这两个问题只需要简单的「是/否」来确定,并且这两个问题是我用来确认这些用户是否有过相关经验,如果有,我才会发送第三个问题:

  • 「按照宜家的家居说明书来装配,对你而言有多容易?」

第三个问题包含5个不同的选项,从「非常清晰」到「非常困难」划分了5个等级。事实上,我随机选取的样本当汇总,绝大多数的用户在按照装配说明书的要求装配的时候,遭遇了相当的困难,或者感到了混乱。

2. 定性分析

在调研的过程中,我通常在获得答案之后,会更进一步采访用户。

通过诱导,我开始了解到他们各自的经历,而之前我所想知道的问题,在这里得到了某种意义上的验证:

我把所有的东西差不多都组合到了一起。最初我认为最糟糕的情况是缺少一些组件,甚至会漏掉重要的大部件,实际的情况是,我为了组合这个包含收纳箱的床,花费了整整一天时间,中间经历了好几百万个步骤。

很多回答和这个差不多。访谈中透露了一个事实,那就是绝大多数用户其实根本不知道完成装配要多长时间,需要多少步骤,他们压根一点准备都没有。正如同他们所说的,通常他们会在这个事情上,耗费一整天时间。

周末我把宜家买的家具组装了起来,按照说明来做的,比其他的同类组装家具要方便不少。

我想我可能是个怪人,我非常喜欢组装宜家的家具!我发现他们的家具组装说明书非常明确,并且非常喜欢这个过程。

访谈过程中我还发现,有过组装宜家和其他同类的组合家具经验的用户,对于说明书和产品本身有相对明确的预期,对于注意事项也更加了解,对于整个组装流程的理解也更加深入。

五、宜家是怎么解决用户的这个问题?

为更多人创造更美好的日常生活——宜家的使命宣言

宜家的业务看起来很简单——为用户提供更加经济实惠的家具。但是他们真实的目标其实更高,要为用户提供可持续性的、功能性强的高品质家具,不是为少数人,而是为所有人。

可是,如果用户连装配的问题都解决不了,就更谈不上使用了。所以宜家也在尽量解决这个问题。

2017年9月,宜家收购了 TaskRabbit ,希望以此为跳板,提升家具装配服务。

可是问题在于,将用户自己装配从宜家产品中移除,是不是也会同时降低用户和家具之间的情感联系,将「宜家效应」彻底从产品中去掉?

六、为宜家的APP改版

这个项目并不是宜家的官方项目,而是一个我自己创建的项目,作为我在 Codaisseur 设计学院的个人项目和作业。

基于我的采访的样本和调研,我最终梳理出来下面这张价值主张的图:

解决方案从桌面端的信息架构开始做。线框图则是从宜家官方网站开始,按照搜索 – 购买的流程来梳理。

我的解决方案主要从3个不同的领域入手。

1. 切换

切换的功能其实并不复杂,它是一个功能切换的按钮。在搜索结果页面当中,用户点击了「切换」按钮,每个产品底部的「购买」按钮就会变成「教你组装」按钮。

其实,选择从这个地方入手,有一个非常重要的原因,那就是用户。当我在梳理流程的早期阶段,注意到宜家网站上的一个重要的数据:

网站首页的浏览量高达21亿。而搜索引擎又是用户获取信息的主要入口,因此我相信在宜家的首页上应用这个设计会是比较合理地优化。如果在后期能够搜集数据,并不断迭代这一功能,应该能带来更好的效果。

这个图标的设计,来自于宜家的说明书,说明书中所绘制的「助手」这一角色,而这一设计也算是向传统内容媒介的一个回应和致敬。

2. 播放器

播放器的设计成败直接影响到整个解决方案的效果。需要考虑到的因素非常之多:

移动端快速预览的功能;

桌面端和移动端的缩略图,搜索和过滤的早期草图:

  • 如何以视频的方式来呈现内容,又同时清楚地向用户表明这不是传统的视频教程呢?
  • 如何在 UI当中向用户反映当前的步骤、上一步和下一步呢?步骤之间的过渡是什么样的?
  • 如何让用户了解到到底有多少步骤呢?用面包屑可以吗?

用户访谈中所凸显的问题:

我在宜家所作的最后的尝试是一款木质高脚凳。我开始以为这个2英尺高的高脚凳很好处理,谁知道到手之后太过于零碎,说明书也看不太明白。

为什么你觉得说明书的指示不够明确?

我很想跳过开头检查手头全部零件的部分,但是跳过之后就很难按照顺序来操作了,到后面我就忍不住即兴发挥了,最后就没法做出来。

通过这些访谈,简单的讲,我就是让说明书制作成易于消化的短动画,通过特定的播放器循环播放。这样用户会更容易确知怎么操作,以及他们做到了什么程度,以及具体要做什么。

在这个阶段,使用原型来进行可用性测试之后,得到了不少反馈,其中最重要的一个反馈,是前一步和后一步的短视频都使用缩略图的形式展现,而不是不能预览的模式。

检查工具和配件,确保没有缺损,用户可以正确装配。所有的这些都应该包含在视频当中,这些对应的是传统纸质的宜家说明书中的检查的部分。

为什么不做简单的完整视频教程?

当我查看教程的时候,必须全程注意屏幕内容,暂停视频,再返回操作,再看视频,这样太容易分心了,很容易错过一些步骤,如果没有适时的暂停,还得倒回去看……

相反,制作成易于消化的短动画,一个步骤一个步骤地浏览,用户更容易掌控,这是更合理的补救措施。

3. 播放控件

当然,我的这些都还只是视觉稿,并未通过开发落地。

整个设计方案最后的环节,是使用类似动画的教程模式,教授用户如何正确装配家具的功能。

家具到货之后,用户可以在 APP 的搜索栏当中,快速点选条形码扫描按钮,扫描条形码,定位到产品页面,通过切换按钮,触发教程模式。

它的核心是让用户通过 UI控件点击切换步骤,或者使用语音指令,诸如「上一步」和「下一步」来快速切换步骤。

在可用性测试中发现,通过移动端设备来呈现的动画教程,比起带缩略图的视频要更加方便。最初我还构思过更加复杂的方案,比如通过 APP 将教程投射到电视或者桌面端上来浏览,后来发现这样太复杂了。

参与测试的人员,还提出使用手势交互可以更快切换。你可以戳这里试试桌面端的高保真原型

七、反思

在整个项目当中,最重要的经验是「任何设计方案都不可能做到全部的事情,优先级很重要。」当我开始策划解决方案的时候,一瞬间有很多想法,但是真正落地能做的事情始终有限。

这是有必要的吗?必须的还是可能的?这个方案是用来解决问题的,还是单纯的看起来很酷?

尽可能少的修改来解决问题,高效,有效,这可能是更好的。

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ikea-effect-ux-case

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 配色 设计流程 web前端开发 AI教程 用户体验设计 设计理论 海报设计 神器下载 字体下载 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里