基于用户认知的购物网站导航系统交互设计准则


基于用户认知的购物网站导航系统交互设计准则

程萍1,蒋晓2

(1.江南大学,无锡 214122)

摘要:从认知心理学的角度出发,对比和分析购物网站不同访问用户在进入网站时的不同背景、目的和情境,总结出网购用户自上而下和自下而上两种不同的认知加工过程,基于这两种不同的认知加工过程,进一步对购物网站导航系统进行分析,归纳出两大类具有针对性的导航类型,并提出这些不同类型导航的交互设计方法及准则,使其灵活应用于购物网站的设计中。

关键词:认知心理;购物网站;导航系统;交互设计

Interaction Design Guidelines of Shopping Website Navigation System Based on User Cognition

Cheng Ping1,Jiang Xiao2

(1.Jiang Nan UniversityWu Xi

Abstract: From the perspective of cognitive psychology, it contrasts and analyses different backgrounds, purposes and situations of different users that visit shopping website, and summarized top-down and bottom-up these two types of cognitive processes the buyers showed. With further analysis of navigation system of shopping site, it summarizes two categories of directional navigation for shopping site based on these two different types of cognitive processes. Then put forward different interaction design methods and standards, make sure it can be applied in navigation design of shopping website flexibility.

Key words: cognitive psychology;shopping websitenavigation system; interaction design 

网上购物,就是通过互联网搜寻商品、订购商品,继而进行网上支付或者线下支付,最终购买到目标商品的一系列过程。随着网上购物行为的流行,各种网上购物平台也如雨后春笋般涌现,B2B、B2C、C2C以及独立的网络商城和团购网站琳琅满目。而网上购物用户面对着五花八门的网站和商品难以抉择。在当前这个用户体验至上的时代,交互设计作为一门关注交互体验的新学科颇受设计届的重视。交互设计以用户在使用产品时的心理、行为特征为出发点,致力于让产品易用、好用。对于交互设计来说,对认知心理和用户使用心理的掌握和正确判断无疑是产品设计成果的关键因素之一。各个购物网站在数以亿计的用户考验和众多对手的竞争中(去掉“也”)面临着重重挑战。网上购物平台只有深入了解用户的认知行为特征,抓住用户的真实需求,提供清晰、精准的导航系统引导用户,让用户快速找到想要的商品,愉快舒适地完成购物过程,才能得到用户的青睐,在业界能有立足之地。

1 购物网站访问用户认知加工过程

2012年1月16日中国互联网络信息中心(CNNIC)在京发布的《第29次中国互联网络发展状况统计报告》显示,2011年,网购用户总规模达到1.94亿人,网购使用率提升至37.8%。如此大规模的群体中,一部分是购物网站的热度访问者,他们的访问频率十分频繁,不管有没有需要购买的东西,他们都会上购物网站逛逛;很大一部分是中度访问者,他们只有在有需要购买的物品时才访问购物网站;有一部分用户是轻度访问者,他们只在某些特殊情况下访问购物网站,比如网站在搞促销、特价活动时;另外,还有极少部分属于僵尸用户,他们也许只在网上购买过一次物品,或者根本没有购买过,只是访问过一次,但是由于对网站各方面体验的不满以至于再也没有访问过购物网站(如表1)。对于不同的用户,在不同的情境下他们访问购物网站的目标与需求都不同,心理认知特征也就不同。

表1购物网站访客类型

Tab.1 Types of visitors for shopping website

购物网站访客类型 访问特征
热度访问者 访问频率十分频繁,不管有无购买物都访问
中度访问者 有需要购买物时访问
轻度访问者 特殊情况下访问(如打折、促销活动时)
僵尸用户 只访问过一次,由于体验不好停止访问

 

1.1自上而下的认知加工过程

在认知心理学中,知觉自上而下的加工过程是指知觉者的期望、知识理论或概念,引导知觉者在模式识别过程中的信息选择和整合,知觉者对将要出现什么样的物体往往都建立了某种预期[1]。在日常的学习、工作、生活中,我们要面对大量的信息,而由于视听觉、精力等各方面能力的限制,我们只能接收到部分有限的信息。我们的目标会过滤我们的感知:与目标无关的东西会被提前过滤掉,而不会进入到意识层面[2]。例如,我们想要到超市购买些零食为明天的郊游做准备,这时,即使超市里的好东西各式各样,但由于时间和精力甚至是资金的有限,我们会直奔零食区,而其他商品都会略过。这种即是自上而下的认知加工过程。

同样,我们把对象设定为访问购物网站的用户群体:有部分用户在访问前就已经有明确的购物目标,他们很清楚自己要购买的是什么,并且出于对目标购买物及其相关知识的了解,他们完全清楚购买物的概念及特性。基于对目标购买物的明确,该类用户访问购物网站时会直冲目标物,已有目标的引导下寻找,此种情况下用户的认知加工过程即为自上而下的(如图1)。

图1 访客自上而下认知加工过程

Fig.1 Top-down cognitive process of visitors

1.2自下而上的加工过程

知觉自下而上的加工过程在认知心理学中是指知觉者从环境中微小的信息开始,将它们以各种不同的方式加以组合,以形成知觉(包括模板匹配、原型匹配、特征分析三种方式)。同样是到超市中购买零食,超市里的零食五花八门,我们可能根本不知道自己究竟要买哪种,只有走到零食区慢慢寻找,扫视货架上的所有种类,寻找符合郊游和自己口味的零食。这时,我们寻找具体零食种类的过程即为自下而上的。

用户在访问购物网站时,时常会有不能确切说出自己想买什么,甚至根本不知道自己想买什么的情况。比如想给母亲买件生日礼物,但又不知道具体买什么,此时用户只能基于对母亲喜好的了解以及生日这一条件来寻找符合的物品,这情况下用户进行的是自下而上的认知加工过程(如图2)。

图2 访客自下而上认知加工过程

Fig.2 Bottom-up cognitive process of visitors

事实上,用户某次访问购物网站的认知过程并非只是单一的自上而下或者自下而上的,在整个过程中自上而下和自下而上是相互交替出现的。就如上面所举给母亲买礼物的例子,虽然不知道买什么,但肯定会选定在老年女性物品中,这属于自上而下过程。接着再在该类物品中浏览挑选,则属于自下而上的过程。

基于用户认知特征的购物网站导航交互设计

网站导航系统主要分为嵌入式导航系统和辅助性导航系统。其中,嵌入式导航系统包括全站、区域和情境式导航;辅助性导航系统包括网站地图、索引、指南(如图3),搜索也是辅助性导航中非常重要的一种[3]。辅助性导航系统属于网

图3嵌入式导航系统和辅助性导航系统

Fig.3 Embedded navigation systems and Supplemental navigation systems

站基本等级系统以外的部分,它们提供辅助性的方式寻找内容和完成任务。在用户使用导航的过程中,要保证让用户能够知觉到产品的变化与自己的意志吻合,能够控制产品的变化过程,获得期望的结果[4]。导航系统对于Web至关重要,购物网站也不例外。基于访客自上而下和自下而上的认知特征,相应地对购物网站搜索、全站导航、区域导航及网站地图等不同类型的导航进行设计,将更有针对性地满足用户的不同需求,引导他们进行每一步操作,同时也为用户增添了许多入口。

2.1 基于用户自上而下认知特征的导航交互设计

前述自上而下认知过程的用户,他们有明确的目标,对目标购买物有比较清晰的定位。针对此种认知特征的用户,购物网站中的搜索功能作为辅助导航系统的一种就起着很大的作用。

在各个购物网站的首页,我们都能看到位于页面顶部的搜索框,这很好地满足了第一类用户的需求。他们一般会立即在搜索框中输入与目标购买物相关的搜索词进行搜索,其他内容对他们的干扰比较小。首页上的一个搜索框,以及简单的搜索结果列表是否就能满足用户了呢?当然不是,实际上用户的搜索过程也并非那么简单。图4是用户在进行搜索时的实际过程。

图4 用户搜索流程

Fig.4 User searching flow

从该过程中可看出用户在搜索过程中也会遇到各种问题,要满足他们的实时需求,导航的交互设计应遵守以下准则:

1. 显示搜索结果数目。让用户知道搜索出多少结果,可估算出大概要浏览多久,从而进行下一步操作的选择。

2. 结果过多时窄化搜索。若搜索结果过多,应该提供可以让用户窄化搜索结果的工具,如过滤器和排序方法。过滤器可缩小搜索范围、精确搜索目标的特性,而不同的排序方式可以将更符合用户需要的商品展示在前面,两者都能更好地帮助用户进行筛选。

3. 在结果页中提供搜索框。从上图中用户搜索的流程可知,若用户对搜索结果不满意,则将修改搜索词重新搜索,因此应该让搜索框无处不在,让用户时刻都能进行搜索。

4. 在结果页中显示搜索词。让用户看得见自己在搜索什么,另外以备要修改搜索词时有所参考。

5. 搜索结果为零时,让用户不会不知所措。“没有搜索结果”、“搜索结果为0”等这样简单的一句话展现给用户是不负责任的,这会给用户带来压力和紧张感。为用户提供一定的搜索技巧或者改进搜索建议会显得更加体贴与友好。

以购买女包为例,搜索及相关辅助导航的交互框架设计如图5,图中标注序号即为上述设计准则的对应运用。

图5搜索交互框架

Fig.5 Interaction design of search

2.2基于用户自下而上认知特征的导航交互设计

进行自下而上认知加工过程的用户由于对目标购买物不明确,因此他们需要购物网站辅助他们完成购物。相比较进行明确目标进行搜索的用户,这类用户通常通过浏览来做选择,导航系统中的全站导航、区域导航及网站地图可以帮助他们整理碎片化的信息,从而完成购物。

全站导航通常是网站中单一且一致的导航元素,因此单单从首页常很难识别出全站导航,只有通过不同子网页的访问才能判断出哪个导航才是全站都有的。全站导航的设计中有两点是十分重要的:首先,应该保证其在每个网页中的位置、内容、视觉风格一致统一。保持一致的导航结构有助于人们将他们现在所处的位置和下一步可能的选择进行形象化的处理, 并减少猜测[5]。全站导航作为认知过程自下而上的用户的重要引导工具,一致性是其必要特质。另外,全站导航中应包括到达网站中不属于内容层次的重要元素的链接,在子网页中还应包含返回首页的链接。图6分别为凡客诚品、京东商城、淘宝网及ebay的全站导航。

图6全局导航实例

Fig.6 Examples of Main navigation

不同购物网站的区域导航有不同的特点,甚至同一购物网站的不同页面上区域导航也不尽相同。购物网站中区域导航有很大的灵活性,但在设计中仍然要注意几个准则:一最好位置固定不变。虽然不像全站导航那样必须位置统一,但由于购物网站的区域导航通常都是商品的类目,犹如超市中的指示牌一般,它一直为户提供方向,所以固定的位置能使其在用户心中树立起指引方向的路标的形象。二是避免过深的层级关系。区域导航的每一栏下通常都有下拉层级关系,以便用户细化选择的区域。然而过深的层级关系首先在操作上就给用户带来很大的不便,其次也增加了用户思考与选择的难度,降低了操作效率。三在不同的情境下可以适当地改变其样式。不同的子页中区域导航的样式可适当有所不同,以更加匹配当前页的内容。如图7淘宝网的区域导航在不同类别的子页中就有所区别:玫瑰红代表女性用品、深蓝代表男性用品、褐色代表家装用品、绿色代表美食,这样从色彩上给用户营造一种情境,这样的设计不仅实现了可用性,同时在情感上也很好地满足了用户。

图7淘宝网区域导航

Fig.7 Local navigation of Taobao

网站地图通常展示信息层次的顶端几层,它在购物网站中被广泛应用。网站地图通常位于购物网站页面的中部或者底部,不同网站略有不同,但内容上通常为商品类目信息及服务帮助类信息两方面。Ebay网还专门设立了“网站地图”页面(如图8),整个页面以网站地图形式进行导航。对于自下而上认知过程的用户,由于目标不明确,需要各方面的信息辅助他们完成物品的搜寻。网站地图

 

图8 Ebay网网站地图

Fig.8 Sitemap of Ebay

在内容上提供更宽广的视野,将商品大分类之下的顶端几层具体类别展示出来,远比区域导航更加自然,给予那些对大概念含糊不清的用户很大的帮助。简单的基于文本的轮廓格式,由于它的条理清晰、下载速度快、易于维护的特点,堪称完美[6]。购物网站由于规模大、细分类目多,网站地图这样的辅助性导航是必不可少的,尤其对自下而上认知过程的用户来说功不可没。

3 结语

导航系统是任何网站最重要的交互元素,时刻需要用户与之交互的购物网站更不例外。对于网购用户来说,交互好的导航系统可以引导他们找到想要够买的商品,并顺利购买。对于商家来说,交互设计优良的导航系统可以促成更多的销量,也就意味着更大的利润。导航系统的关键作用决定了,它的设计会极大影响人们访问购物网站的交互体验。在互联网中,人们并不单纯是理性的、有条理的、寻求信息的生物体,网购用户在不同的情境下会显示出不同的认知特征,不可能只是自上而下或者自下而上的,在同一次访问中用户会在不同时刻交替出现自上而下和自下而上的认知加工过程。因此,对应用户两种不同的认知加工过程,购物网站各类型导航的设计应遵循相应的交互设计准则,并将其组成一个完美的导航系统,才能全方位、相辅相成地让用户得到舒适和顺畅的购物体验。

参考文献

[1]  Kathleen M.Galotti.认知心理学[M].吴国宏,译.陕西:陕西师范大学出版社,2005.

[1] Kathleen M.Galotti.Cognitive psychology[M].Wu Guohong,Translated.Shaanxi:Shaanxi Normal University Press,2005.

[2]  Jeff Johnson.认知与设计——理解UI设计准则[M].张一宁,译.人民邮电出版社,2011

[2]  Jeff JohnsonDesigning with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules[M]Zhang Yining,TranslatedPost & Telecom Press,2011

[3]  Peter MorvilleLouis RosenfeldWeb信息架构[M].陈建勋,译.北京:电子工业出版社,2008.

[3]  Peter MorvilleLouis RosenfeldInformation architecture for the world wide web [M]Chen JianxunTranslatedBeijingElectronics Industry Press,2008.

[4]  常海,蒋晓.交互设计中的用户控制感研究[J].包装工程,2010,31(4):29-31.

[4]  Chang HaiJiang XiaoResearch on the Control Sense of User in the Interaction Design [J].Packaging engineering,2010,31(4):29-31.

[5]  徐延章.网页导航设计艺术表达特征分析[J].包装工程,200930(4)  177-178.

[5]  Xu YanzhangAnalysis of the Artistic Expression Characteristics of Web Page Navigation Design [J].Packaging engineering,200930(4)  177-178.

[6]  Penny McintireWeb视觉设计[M].叶永彬,译.北京:机械工业出版社,2008

[6]  Penny McintireVisual design for modern Web[M]Ye YongbinTranslatedBeijingChina Machine Press,2008

 

收稿日期:2012-02-26

作者简介:程萍(1989 -),女,江西上饶人,江南大学硕士,主攻工业设计、产品交互设计。