首页设计的可用性和PET

标签: 首页 设计 可用性 | 发表时间:2011-02-27 16:39 | 作者:D.A. BEAsThAnG
出处:http://ucdchina.com/rss/all

网站的首页是一个让人头疼的东西。有时它看起来很简单:首页就是网站内容的整合,一个产品经理随便从网站里拿点东西出来,就能堆出一个看上去靠谱的首页。也正因此,它往往非常麻烦:很多人都可以发表自己的见解,而这时交互设计师的一些手段(比如流程图、概念图等),在面对首页设计时也难派上用场,以致最终陷入到无尽的争执中。所以,本文希望寻找一些实用的方法一定程度上帮助设计师来决策,也让大家在争执过程也有些共同的依据。

首页之所以难设计,我认为因为它不仅要解决用户“能做”的问题,更多时候要解决用户“想做”的问题。“能做”对应的是可用性,相对容易解决,专家评估、可用性测试可以很有效地帮助设计师;而“想做”对应的是PET(Persuation,Emotion,Trust,说服、情感、信任),可能涉及到心理学,人种学,营销学等陌生的知识,交互设计师在这方面就不再是专家了,但一些经验和方法仍可以有效,下文中会讲到。

将可用性和PET分开考虑

浏览首页的用户基本分为两种:有目标的用户和无目标的用户。Alan Cooper的“目标导向”理念告诉我们,用户的目标驱动任务,有目标的用户直接开始“任务”,我们只要为他们解决可用性的问题。而那些无目标的用户,他们只是随便逛逛,需要首页的PET足够好,将此类用户“转化”成有目标的用户,尽量避免他们“流失”。

所以我将浏览首页的用户分为这两类,针对两类用户不同的特点来进行设计,会让我们的思路变得清晰。

一些现实例子

谷歌首页

对于搜索型产品,所有用户都是有明确目标的,即便首页是多么“死板”,因为没有任何干扰,用户都可以迅速进入自己的任务。所以谷歌首页没有任何PET的内容

赶集网(或58同城)

这类网站的设计也完全服务于“有目标的用户”,把“无目标用户”无情地抛弃,本人觉得这种设计并不是最高效的方式,因为毕竟浪费掉了大量用户。

京东商城

对于电子商务网站,存在两种典型的用户情景:

  1. 理性消费者,想要找的东西很明确,或者挑选的范围很小,这就要求首页有很好的可用性,帮助他找到商品,如下图中的蓝色部分就是服务这类用户。
  2. 冲动型消费者,并不知道自己需要什么,只是随便看看有没有合适的或促销的东西可以买,这就要求首页有很好的PET,吸引用户点击,如下图中的红色部分就是服务于这类用户。

倘若京东商城不考虑无目标的用户,也许首页就会长成下面这样:

对于想找商品的用户,也许更方便直观了,而对于没有目标的用户,就只能离开了。

人人网

对SNS类网站来说,用户大多数时间是在“随便看看大家都在干什么”,当然也有时,用户来到首页进行发表日志,上传照片等目标明确的操作。

讨论:“随便看看”是不是一种用户目标?

我觉得不是,“随便看看”不能直接驱动任务,故不能用来测试产品可用性;在可用性测试中的任务设计时,随便看看不能作为任务。“随便看看”的过程中,用户决定要做某件事了,这才是用户目标。

澄清一些可能存在的误解

服务无目标的用户的模块(如上面例子中的红色区域),并不是说不需要可用性,只是在设计的难度上,要把PET做好更难更需要思考,而可用性要求较容易满足。反之亦然。

比如京东商城中的促销模块设计,是很典型的服务于无目标用户的模块,PET要求能表现产品质量好,价格便宜,买的人多,存货不多等等难以表现的信息;而可用性只要求商品易浏览,可点击等,任何设计者都不会出错。

首页设计中如何协调可用性和PET

  1. 在设计之前,调查分析网站用户,是“有目标”的多,还是“无目标”的多,以确定页面上两类模块的比例。
  2. 一般网站同时兼顾两种用户。但“可用性“和“PET”这两点,存在天然矛盾,前者要求页面清晰,而从后者的角度来说,清晰意味着死板,后者要求页面丰富,而从前者的角度来说,丰富意味着杂乱。故在设计时要注意权衡。
  3. 为解决上述矛盾,那就要求“可用性模块”和“PET模块”要明确区分,可以识别,不能相互掺杂。让两类用户能第一时间关注到需要看的部分。
  4. 可用性是基础,一定要先做好,PET是更高要求,属于上层建筑,切不可为上层建筑放弃基础。

设计首页的可用性

  1. 应该尊重习惯用法的时候,不要擅自创新,如采用用户习惯的网站头,包括主导航,全局导航,搜索,LOGO。如下图。
  2. 若有更多导航–如电子商务网站的商品分类–须在第一屏内出现,突出且易识别。导航中的信息架构,在需要时可用卡片分类法对导航内容进行分类。易迅网的商品分类导航,在左边第一屏最显眼处。
  3. 首页整体布局规矩,使用网页栅格系统设计页面,允许页面有合理留白。、
  4. 尽量保持页面架构简单,最好不出现两列和三列混排的设计。
  5. 首页的模块中使用尽可能简单的列表,简单列表更容易被理解和读懂,且设计运营开发成本低。当然,“非对称列表”也有优势,见下图,设计师应该根据用户类型和设计目标来灵活运用。

设计首页的PET

1. 清晰表现品牌和产品服务类型。这首先实现PET中的Trust,只有用户第一时间了解网站品牌和服务(特别是一些大品牌),才能 够立即建立用户的信任。但这个实践起来却相当有难度,特别是一些全新的服务,篇幅小了说不清,篇幅大了用户直接略过。这里只能介绍一种方法来验证此目的有没有达到:

5秒测试:

给一个新用户(目标用户)看首页设计5秒,让它说出:

这是什么网站?

这个网站提供什么服务?

首先吸引你的是什么内容?

这个网站和类似竞争对手有什么不一样吗?

你对这个网站和它的服务有没有兴趣?

然后让用户仔细浏览该首页,再纠正上面的答案。

2. 使用吸引人的图片和标题。说白了就是标题党,虽然这招定被广大设计师唾弃,但它的效果绝对不容小觑。

3. 使用非对称的设计,有主有次,展现丰富性。但注意,非对称设计会增加认知负担,降低可用性。见上文。

4. 利用好数字来说服用户,因为数字“不会说慌”。

4.1 电子商务网站中,限量限时促销。如下图中的易迅网首页的截图。

4.2  电子商务网站中,突出价格和价格对比。如下图中团购网站的首页。

4.3  用数字来突显“丰富的概念”。如下图是网易爱拍首页的设计。

5.  在首页显示其他用户的活动来说服用户(其他用户购买记录,评价,晒单等)。调查显示,让用户信任一个站点的最有效途径,就是在线其他消费者的意见。

6.  另外,视觉设计上要符合产品和服务的定位,在情感上与用户拉近距离。

7.  页面更新频率,用户需要适时的刺激。太频繁的更新,不仅浪费资源和成本,用户也要不断适应,增加学习成本;而长时间不更新,也会让用户慢慢失去粘性,转化率降低。

 

源地址:http://uedc.163.com/4327.html

相关 [首页 设计 可用性] 推荐:

首页设计的可用性和PET

- BEAsThAnG - 所有文章 - UCD大社区
网站的首页是一个让人头疼的东西. 有时它看起来很简单:首页就是网站内容的整合,一个产品经理随便从网站里拿点东西出来,就能堆出一个看上去靠谱的首页. 也正因此,它往往非常麻烦:很多人都可以发表自己的见解,而这时交互设计师的一些手段(比如流程图、概念图等),在面对首页设计时也难派上用场,以致最终陷入到无尽的争执中.

网站首页的设计

- - 标点符
网站首页的设计是一件非常让人头痛的事. 虽然她看上去很简单:产品经路随便从网站里拿点东西出来,堆出一个看上去靠谱的页面. 也正因此,它往往非常麻烦:很多人都可以发表自己的见解,以致最终陷入到无尽的争执中. 首页的设计相对于其他页面要难的原因是,其他页面更多的是解决用户“能做”的问题,而首页的更多要解决用户“想做”的问题.

浅析网页界面设计-首页

- 多二度 - 所有文章 - UCD大社区
开宗明义,无论是对于一篇文章、一场会议或一部专题片,还是对于一个网站 来说,都是必不可少的. 那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述、副标题),而能够为Title和 Description提供进一步诠释的就是网站的首页. 页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标.

内容首页设计经验

- - 坏脾气的小肥
前些日子,有位老同事来和我讨论频道首页的设计,这才想起来我原来是做媒体的,以前还画过不少内容页面原型. 悲惨的是,我对内容页面的理解在转型产品后才渐渐成熟,以前画的那些都挺平庸. 做媒体的又有几个人去研究内容界面的交互心理呢. 过去从实践与反省中得来的经验之谈,不妨讲讲. 第一条和界面设计没关系,和定位有关系.

可用性设计建议——《点石成金》读书笔记(上)

- 俊客 - 所有文章 - UCD大社区
阅读评分:4.5分(满分5分). 短小精悍,在用户行为、导航设计、主页设计、可用性测试等方面,作者都提出了观点和可行的建议,适合于互联网产品/Web设计人员和前端开发人员. 两小时,你能了解到的真的是最初级最初级的内容,这本书只管扫盲,不管精进. 结合项目读,边看边试,会有更大的收获. Krug可用性第一定律:别让我思考.

可用性测试中的任务设计方法

- 嘉慧 - 网易用户体验设计中心博客
可用性是用来衡量产品质量的重要指标,从用户角度来判断产品的有效性、学习性、记忆性、使用效率、容错程度和令人满意的程度. 可用性测试是在迭代设计中不断获得用户反馈,根据用户反馈不断优化产品设计的一种方法. 其目的是是建立评价标准,尽可能多的发现可用性问题,并指导产品界面的设计和改进,尽可能地提高产品的可用性质量.

最小化可用性设计(Minimum Usable Design)

- - 所有文章 - UCD大社区
似乎是蛮久没有这样周末独自在家安静的做做博客了. 生活终归需要张力,一周一周的忙碌,到了周末哪怕会寂静的有些无聊,感觉上也蛮有趣的. 今天这篇小短文有点儿意思,英文原文一遍读下来觉得没有什么不显而易见的东西;翻译了一遍,然后回过头又看一遍原文以及评论当中的观点,才尝出一些味道. 就当作引子吧,有兴趣的朋友不妨再去看看原文及评论.

增强应用“可用性”的10条设计原则

- - 酷勤网-挖经验 [expanded by feedex.net]
 来源:CocoaChina移动观察   2011-12-25. 众所周知,如果开发者想发布一款iOS应用,必须提交苹果应用商店审查. 苹果可能以各种各样的理由驳回你的申请,所幸苹果也把审查的规矩讲很清楚. 通过审查的必备条件之一是你的应用必须有很高的“可用性”. 你可以去查这份叫做 iOS Human Interface Guidelines的指导手册,更方便的是直接阅读从中提炼出的10条精华小贴士.

Think Aloud-适合设计师的可用性方法

- - TaoBaoUED
Think aloud 是可用性测试中常用的一种方法,它是由IBM公司Clayton Lewis  在1982年在 《以任务为中心的界面设计》书中被阐述,同时引进到了可用性领域,1993年由前苹果研究院VP的Jakob Neilson在可用性工程这本书中再次推出. 使用 Think aloud方法,需要提供给被测用户待测的产品或界面原型,要求被测用户根据指定任务操作产品或界面,与此同时,即时地说出使用产品界面时的想法、感受和意见.

首页大屏广告交互设计探讨

- 章明 - 所有文章 - UCD大社区
用于大型活动推广,频率控制在一季度或一年度一次为宜. 尽量让每位用户都注意到这个活动. 把对活动不感兴趣的用户的干扰降到最小. 从我们监测的历次大屏广告点击数据来看,广告的点击在首页总点击的占比分布在2% – 20%之间. 这意味着:有至少80%以上的用户对活动并不感兴趣,他们中大部分是带着明确目的来网站使用特定产品的.