设计的灵感 + 用研的力量

标签: 交互设计 | 发表时间:2013-05-05 18:14 | 作者:yoyo
出处:http://www.yixieshi.com

前言:年初沉浸于工作中的重点项目,都快忘记写文章了,惭愧。分享既是学习,没有分享就没有学习的机会,2013年应该继续多写。同时也总结了2012年的写作,发现我很多时候是对自己感兴趣的各种文章、现象,在写设计笔记与思考。有时思维种种,并没有总结到很踏实。以后会改进,多采取灵感文+实战文的写作节奏。

今天,是一篇实战文。

讲的是设计师通过灵感,发现问题,思考问题,面临挑战,和用研紧密配合,解决问题,达到目的的一个故事。

是一个完整而严谨的设计改版的故事。

Here we go.

2012年负责腾讯开放平台应用中心产品,第一次认真看这个产品,总觉得哪儿不对:


01

以上页面,我看到了一个主要内容页,有banner区域,导航在左边,中间是App内容,右边有排行榜。继续往下看:


02

拉下页面,看到上图,开始有点迷糊。因为这个页面往下的走势,没有能给我一个理解。信息和内容的布局有点凌乱。导航与内容区的对应不齐,让我阅读效率偏低。


03

再往下拉页面,就到了上图。这个时候阅读的无序开始增强,我看到了各种信息满满地堆积在页面上。左边导航结束后,开始堆积内容,且出现在我完全没有预期的位置。中间的App内容模式一致,没有重点。广告又让格局再乱了一点。到了这里,我已经很难有效阅读内容了。

很多设计师都知道,用户阅读网页,是不会逐字逐句地读。他们会扫描,快速找到重点,然后再根据自己的兴趣和选择进行阅读。重点可以是一段加粗的文字,一个图片,一个巧妙排版的文字段落等等。

这个页面没有给我一个扫描的逻辑和乐趣。所以我的阅读没有舒适感。

我对这个网页的阅读顺序是这样的:


04

如上图,我开始是阅读1处,个人信息;然后往下读到2处,导航;到了3处,内容区,因为App的展现形式非常一致,没有重点,我就快速略过了3处;很快扫了下4处,不感兴趣;直接跳到5处,看了排行榜一下,很快就阅读完了。

这个网页的目的,很简单,是希望用户去探索,点击App,并安装,然后玩。但是现在的布局并没有让我有这样操作的冲动。肯定有问题。当然,我只是一个用户,一个阅读案例而已。后面的用研,我们邀请了用户来做眼动仪测试,会看到更多的阅读模式。

所以这里,设计师的灵感带来一些重要问题:


05

以上只是部分问题,但是简单明了,需要修改设计。解释下我右上角的标记,我认为这个网页在内容的消耗上有问题(这里是一个方法论,主要阐述我的一个想法,所有产品设计都是在内容的创造、消耗、传播上的设计)。右下角是我认为这个网页在设计上应该得到修改的点:用户场景,信息架构,交互设计,视觉设计,设计细节,用户情感。

设计师的观察,灵感,和结论都出来了,然后呢?

作为服务千万级用户的平台产品,光是灵感是没有说服力的。在以上应用中心页面中,所有布局,内容排列,都有很严谨的商业策略和数据压力。任何盲目的修改,都会有极大的风险。

怎么证明自己的灵感?怎么证明自己的判断?

用研。

这次产品改版,有两次用研点很关键。

第一次是眼动仪测试与分析。我们请应用中心的用户来进行眼动仪测试,希望了解用户的阅读模式,并印证我们之前的判断。


06

如上图,我们把整个应用中心页面分解为各个模块,然后通过眼动仪来帮助我们观察用户的阅读模式。


07

如上图,可以看出每个用户阅读的顺序不一样。但是通过分析,我们发现虽然阅读顺序不一样,但是结果是一致的。用户都像我之前阅读那样,快速阅读,找不到重点,忽略了App内容这个重点区块,对整个页面布局没有清晰认知。


来看看结论:


08

部分结论如上图:除了第一屏其他页面曝光量少,说明用户对首屏后面的内容不感兴趣;用户的粗略浏览,随机无序点击,使应用中心点击量低,安装转化率低。


这里再补充一下应用中心产品背景:

1,应用中心这样的产品需要的是高点击量和高安装转化率配合。

2,高点击量需要引起用户的兴趣,让他们乐意去探索。

3,高安装转化率需要让用户准确关注到他们感兴趣的内容,这样才能保证用户点击App后会安装。

有了用研结论,就有底气了。各个合作方基于我们的判断和用研结论,同意开始改版。

我们的交互很就出了一个交互改动稿:


09

交互改动稿很简单,直接针对用研结论中的问题,并尝试解决。顶部导航让信息架构更清晰。每个内容模块也开始更规整。在和产品同事交流的过程中,我们也把之前页面中完全被淹没的影视和读书两个区块列入重点优化计划(后面视觉稿可以看到细节)。

这个时候,在细化设计前,我们又做了第二次用研来再次确认设计师的灵感。方式是请用户来测试我们的Demo,结论很快出来了:


10

11

如以上两个图所示,用户的反馈很一致,对改版后页面模块的区分,信息架构的认知等我们关注的点,都有非常正面的反馈。


接下来,我们的视觉开始对这个新架构进行视觉设计,力求内容第一,展示清晰,增强用户对应用中心的认知。设计稿如下:

12

第一屏简单明了地给出整个页面的结构。用户看第一屏就能清晰知道,顶部导航是全局导航;往下是banner以及主推信息展示区;再往下,页面开始分左右两块,左边是主内容区,主要展示App内容,右边是排行榜。

用户看到这个架构,就能有预期,这个页面往下,其实是在重复App内容区和排行榜的左右结构。认知非常简单。

另外,对App内容区,我们把主推的App放大,并加入社交元素和更多详细的解释。这样的设计安排极大地提高了用户对App的认知和兴趣。(目的是提高点击率和安装转化率)

13

到了第二屏,先看右边,用户还是如预期地看到了各种排行榜;左边内容区,还是一个模块一个模块地展示内容。特别是在中间模块,我们还为了用户阅读不疲惫,用了竖版的排列方式,让阅读体验更有趣。


14

第三屏的重点是给影视和读书一个特别的展示。首页这里,我们不能把影视和读书做太重,因为这两个特殊内容区块还是整个页面的一部分,不能拥有喧宾夺主的华丽。但是我们给予了这两个区块略微不同的设计感,这样让用户更简单认知到这两个区块的不同。

这样改版的结果呢?

首先,感官纬度,你是不是认为更清楚,更漂亮?

其次,看数据:


15

如上图数据结果:

1,整体转化率的增加,与更合理的整体架构、更合理的局部排列相关。

2,影视和读书的增长,一方面是因为全局架构更清楚,用户会往下浏览;一方面是因为略微调整的设计让这两个内容区块有了差异化,吸引了用户的注意力。

3,横导航的类目页点击增长,符合我之前的判断:竖导航点击率一般是从上往下逐步递减的,而横导航效果会好一些,如果配合适当的设计细节调整,用户的注意力可以被我们引到横导航任何地方。

数据自己说话,改版成功。

回首整个改版过程,其实下图中红色部分用研的参与和贡献非常突出:

16

我对这个设计案例的总结是:


17

如上图,重点是:

1,全局页面的改动,改局部的时候,牵一发而动全身,需要设计的全局观。

2,坚持设计师的原则和方法论,有信心,不惧压力。

3,设计与用户研究的紧密敏捷配合。

4,设计产出的正结果,可以提升所有人对设计师的信任。


谢谢读到这里。

之后我会从正式改版,局部创新,小设计流程,设计思考等更多纬度来写设计文章。:)

Stay tuned.

相关 [设计 灵感 力量] 推荐:

设计的灵感 + 用研的力量

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
前言:年初沉浸于工作中的重点项目,都快忘记写文章了,惭愧. 分享既是学习,没有分享就没有学习的机会,2013年应该继续多写. 同时也总结了2012年的写作,发现我很多时候是对自己感兴趣的各种文章、现象,在写设计笔记与思考. 有时思维种种,并没有总结到很踏实. 以后会改进,多采取灵感文+实战文的写作节奏.

36例网站的设计灵感

- - Jackchen Design 1984
设计师在定位一个网页的时候如何设计出人性化的界面是需要反复思考的推敲的. 在信息爆炸的现在,网络已经融入到每一个人的生活中. 如何在大众审美疲劳中给其惊艳的设计并非一件容易的事情. 而对于现在所有科技企业中,做的最好的当然是苹果公司. 设计就要不拘于限制,不拘于任何的限制,要敢于尝试,要让艺术和科技结合,要有美学的设计构架.

81个给你灵感的创意广告设计

- Edgar - 创意悠悠花园
分享:81个给你灵感的创意广告设计,如果你认得广告的标识相信都不难理解,希望其中有你喜欢的,或者可以给你带来灵感的. Read the rest of 81个给你灵感的创意广告设计 (0 words). © emilo for 创意悠悠花园, 2011. Post tags: 创意广告, 灵感, 设计.

50个手绘风格网站设计灵感

- vele - 互联网的那点事...
在时间奔逝的许多年后,当我们的N代过后,网页和网站会停留在哪个词句里. 人们会用什么样的标签来定义这个标志性的时代符号. 网站出现其实没多少年,往后的互联网会是什么样的天马行空,会华丽的去展现还是快速凋谢停滞. 未来我们都不知晓,只是活在当下,就要去体会设计的极致魅力. 因为,此刻的美丽可能就是一个时代的最华丽的绽放.

50个给你灵感的手绘网站设计

- Kione - 创意悠悠花园
如果你有一定的手续能力,那么你应该尝试一下手绘一个网站试试. 不过如果你会Flash那么应该可以很容易的把你的手绘稿变成网站的,今天就分享:50个给你灵感的手绘网站设计,希望其中有你喜欢的,或者可以给你带来灵感. Read the rest of 50个给你灵感的手绘网站设计 (51 words).

33个给你灵感的iOS手机软件界面设计

- emilo - 创意悠悠花园
其实采用了IOS系统的手机也就是iPhone,那今天分享: 33个给你灵感的iOS手机软件界面设计,希望其中有你喜欢,或者可以给你灵感. Read the rest of 33个给你灵感的iOS手机软件界面设计 (29 words). © emilo for 创意悠悠花园, 2011. Post tags: 手机, 灵感的, 界面设计, 软件.

34个获取设计灵感的好地方

- 平 - 帕兰映像
哪位同学没有遇到过设计瓶颈的,请举手. 在那些你无法用鼠标将象素组合起来的日子,你或许能从某些地方获得灵感. 我们准备了一张清单,在线的或离线的,里面涵盖了各个方面,logo,图标,艺术,潮流,新奇的想法,通过它们,你的思维将被激活. 现在放松,放飞你的思考,让我们带你看看这15个充满创意的网站,10本必读的书和9件事.

45个给你灵感的漂亮信笺设计

- 远走正飞 - 创意悠悠花园
如果今天你可以收到一封来自远方朋友的信件,你会是什么样的心情呢. 今天分享:45个给你灵感的漂亮信笺设计,希望其中有你喜欢的,或者可以给你带来灵感的. Read the rest of 45个给你灵感的漂亮信笺设计 (138 words). © emilo for 创意悠悠花园, 2011. Post tags: 信笺设计, 漂亮, 灵感.

创新贴心设计的灵感觅取

- Yiding - 腾讯CDC
  日常生活中,我们接触的所有东西无不经过了设计,有些看起来是那么的好看,而用起来是那么的槽糕,后悔不堪当初为了什么而买;有些看起来是那么的平凡不起眼,但功能上的精心设计,贴心到让你觉得就是那么自然,几乎感觉不到这个物体的存在,觉得本来就是这样用的. 所以我们生活中是需要那么多的必备用品. 好的产品体验,不会让人觉得不舒服,而是让人觉得就是那样理所当然的使用,说夸张点就是引起我们的占有欲,将其设为必备用品,就是非常成功的设计产品,而后成为经典.

视觉灵感:30个漂亮的的网站设计

- 小明 - 博客园-首页原创精华区
     在客户签合同之前会从我们的网站了解我们, 所以公司的网站设计对合同的签定与否很重要. 30个漂亮的的网站设计 灵感展示,会让你大饱眼福. 英文原稿:Visual Inspiration: 30 Beautiful Web App Site Designs. 出处:http://www.cnblogs.com/xiaoyao2011/.