由于种种原因,用户要求对整个系统进行改版,改版时间相当仓促,项目组整体上下包括客户也对此事有不同的看法,整个改版方案由客户牵头,我方负责实施。改动涉及面广工作量大之余,抽空对改版前后进行可用性及PET进行简单分析总结,提升对产品的用户体验方面的布局设计能力。
本文参考http://uedc.163.com/4327.html此文章总结的方法,拿改版前后首页来进行对比分析,
参考文章认为“首页之所以难设计,我认为因为它不仅要解决用户“能做”的问题,更多时候要解决用户“想做”的问题。“能做”对应的是可用性,相对容易解决,专家评估、可用性测试可以很有效地帮助设计师;而“想做”对应的是PET(Persuation,Emotion,Trust,说服、情感、信任)…浏览首页的用户基本分为两种:有目标的用户和无目标的用户。Alan Cooper的“目标导向”理念告诉我们,用户的目标驱动任务,有目标的用户直接开始“任务”,我们只要为他们解决可用性的问题。而那些无目标的用户,他们只是随便逛逛,需要首页的PET足够好,将此类用户“转化”成有目标的用户,尽量避免他们“流失”。”
服务无目标的用户的模块(如上面例子中的红色区域),并不是说不需要可用性,只是在设计的难度上,要把PET做好更难更需要思考,而可用性要求较容易满足。反之亦然。
比如京东商城中的促销模块设计,是很典型的服务于无目标用户的模块,PET要求能表现产品质量好,价格便宜,买的人多,存货不多等等难以表现的信息;而可用性只要求商品易浏览,可点击等,任何设计者都不会出错。
旧版布局:
新版布局:
新旧版设计中可用性与PET协调问题:
1. 旧版按照1024×768分辨率设计的,已进入界面第一感觉就是头部占用过多的空间,而信息量极少,可用性与PET皆须改善。
2. 新版按照宽屏版设计,在做设计前主要对市面上主要的SNS网站进行调查,如人人网、weibo等进行调研,而在客户方面对于系统的用户也做详细的调研,只确认主要面向的用户群体为企业用户,至于用户企业的习惯调查完全没有做;
3. 在新版UI设计时客户偏向于大图标、页面内容丰富的方向设计,也就是侧重于PET,兼顾可用性。
4. 新版首页的前几版可用性没有考虑好,导致后来反复调整页面,调整系统的可用性问题。
关于新旧版首页的可用性探讨
- 关于尊重习惯用法:
新旧版首页皆采用3栏式布局设计。
旧版的网站头,包括主导航,全局导航,搜索,LOGO 基本尊重用户习惯,但是网站头以及导航栏目占用的空间过过,进入首页时的用户体验大打折扣;
新版的网站头,包括主导航(浮动),搜索,LOGO 基本尊重用户习惯,浮动式的导航以及后来增加的快捷按钮菜单要优于旧版;
- 新版的主要信息布局在第一屏内出现,此点要比旧版体验要好;
- 旧版的首页主要区域内容突出容易识别,而新版则有内容繁琐堆砌的感觉;
- 新旧版首页整体布局皆采用3栏式布局,以页面栅格进行设计,新版的页面留白要处理比旧版好;
关于新旧版首页的PET探讨
1. 关于新旧版表现品牌和产品服务类型。
采用5秒测试方式对新旧版首页进行对比:
给一个新用户(目标用户)看首页设计5秒,让Ta说出:
这是什么网站?
新版:不像信息门户也不像社区。
旧版:社区。
这个网站提供什么服务?
新版:信息、社区有关的内容服务。
旧版:社交服务。
首先吸引你的是什么内容?
新版:中间超级的链接、天气…
旧版:动态信息
这个网站和类似竞争对手有什么不一样吗?
新版:…
旧版:无
你对这个网站和它的服务有没有兴趣?
新版:…
旧版:…
2. 关于吸引人的图片和标题。
新版中采用大量的图标来展示,用于吸引用户眼球。
3. 使用非对称的设计,有主有次,展现丰富性。但注意,非对称设计会增加认知负担,降
4.新旧版均采用醒目的数字提示,对信息的刷新有效提高用户的关注。