第一站 - 轻松上网从此开始!

上网第一站

当前位置: > 运营 >

网站设计改版的故事:设计的灵感 + 用研的力量

时间:2013-05-26 19:00来源:网络 作者:yangyang 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
前言:年初沉浸于工作中的重点项目,都快忘记写文章了,惭愧。分享既是学习,没有分享就没有学习的机会,2013年应该继续多写。同时也总结了2012年的写作,发现我

 

 

  前言:年初沉浸于工作中的重点项目,都快忘记写文章了,惭愧。分享既是学习,没有分享就没有学习的机会,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

 

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕