易用的淘宝店铺导航设计
作者:武彦如
来源:《艺术科技》2013年第07
        摘要:分析了淘宝店铺导航的构成,指出易用的导航设计对提高转化率有重要作用,提出了建立易用的店铺导航结构需要注意整体信息的架构、组织、协调,并论述了如何以人的体验为依据进行导航视觉设计。
        关键词:淘宝;导航;易用性
        淘宝店铺导航就像是现实中商场、超市的导视系统,如超市分为生鲜区、粮油区、日用品区等,生鲜区又包括水产、蔬果、肉类、速冻区等,好的区域组织和导视设计能够帮助顾客顺利到自己想要的商品并结账,好的店铺导航也能够使身处茫茫淘宝中的顾客成功到自己的需要的商品并下单。导航承载着整理、归纳店铺商品信息的功能,是提高访问效率和店铺成交转化率的重中之重。与线下商铺实体交易相比,淘宝上有更多选择的可能,线上交易的消费者更缺乏耐性,任何一个使令人迷茫、不悦的因素都可能使顾客瞬间流向其他同类店铺,所以清晰、易用的导航就显得更为重要。
        1淘宝店铺导航概述
        由于互联网的兴起而兴起的网站导航,帮助上网者到想要浏览的网页,想要查的信息。在网页中,浏览者通过点击某些功能按钮实现信息的跳转,所以淘宝导航并不仅限于一般理解中的商品分类,而是包括任何将消费者引导向具体商品的渠道。
        按照导航所处的位置,可以将导航分为顶部导航、侧边栏导航和自定义导航三类。顶部导航通常包含着商品分类、信用评价、搜索栏、自定义页面(如店铺介绍、购物须知)等;侧边栏导航通常位于左侧,包含商品分类、、热销排行、其他链接(如手机店铺、友情链接)等;自定义导航可位于页面中的任何位置,通常以图片或文字加超链接的方式实现,常用于活动介绍。这些形态、位置不一的导航设置共同为顾客提供更便捷的购买路径。
        2淘宝手机店铺建立易用的导航结构
        2.1信息架构的确立
        信息架构是淘宝网店导航设计的开端,信息结构是导航的基础,合理、清晰的信息架构能够使导航梳理店铺结构、有效传递信息、促成消费转化的功能最大化。
        信息架构要注重逻辑性,比如在商品类目中一共有多少类,是否存在子类。在理清逻辑的同时也要考虑到导航的深度与广度问题,广度设计的效果通常要好于深度设计。互联网设计中有一个三次点击原则,指的是层数太深不利于用户抓取信息,如果通过三次点击还不能够完成预期目标,会导致用户的放弃。店铺导航也应尽量使用扁平化的结构,因为导航的深度每增加一级,顾客就需要多一次点击,在层层复杂的结构中容易迷失方向,使整个导航系统的复杂程度倍增,设计的友好程度打折。但也应注意广度的铺设也应适当,如顶部导航不能单纯依据淘宝规定的页面宽度铺满,大量信息的同时展示会让顾客感到选择的压力,从而影响进一步浏览的信心。
        2.2内容信息的组织
        以商品类目为例,商品类目通常在顶部导航和侧边栏导航中都有出现,如何组织和呈现商品类目,直接影响到客户浏览和选择的顺畅度。对于经营商品种类较单纯的店铺,如专门经营化妆品的店铺,分类时可按功能分或按品牌系列分,两者兼具的分类呈现能够满足用户多维度对比品牌、价格、产品功能等的需要。而对于经营产品种类、品牌复杂的店铺,做好分类则成为一个重点中的难点。
        对于商品分类,建议采用即时贴分类方法,有助于分类的建立和完善。即时贴分类法的进行首先需要准备即时贴,将信息分别写在即时贴上,先请三到五人进行自主分类,然后对各自的分类结果讨论,总结出参与人员都易于接受的分类方法,以作为商品分类建立的重要依据。就像在草坪设计时不事先规划穿越的路径,而是根据一段时间行人踩踏的痕迹来完成铺设,建立起真正符合用户习惯的商品分类方法。
        在商品分类进入到实际的建立阶段,还需注意不同的顾客重点关注的信息存在差别,如新客户关注品牌、产品、服务等信息,而老客户则更关注店铺的更新、促销等时效性强的信息,以老客户占比为多的店铺宜将上新信息放在突出位置。
        2.3各类导航的协调
        协调各类导航之间的关系,须以顾客业已形成的浏览习惯为基础。例如很多卖家为了追求页面的美观,在首页第一屏放置大尺寸的图片轮播,同时为了整体的宽屏感而删除首页的侧边栏模块。其实顾客早已习惯了从左侧栏到商品分类、等导航信息,存在且能及时出现的左侧栏是保证访问效率的重要导航模块。追求美是人类的天性,但如果美观影响到了易用,应以易用为重,因此侧边栏不宜删除,并且应当放置在左侧,有时为了配合整体
风格左侧栏可适当下移,但不宜过于偏下拖长顾客的寻时间。
        协调各部分导航还应保持一致性,例如左侧栏在首页和详情页都有出现,模板允许分别设置这两个位置的左侧栏,那么为保证顾客的思路不被无谓的差别所误导、耽误时间,各级别页面中的左侧栏设计应保持一致。
        3呈现易用的导航视觉设计
        导航的视觉设计是信息的可视化而不是炫耀技巧,好的视觉设计一定是能够快速引导顾客做出下一步选择的设计。从用户体验角度讲,淘宝网从属于整个的互联网,顾客在网络生活中长期培养的简单易用的访问习惯,在淘宝购物时也应受到重视。如果买家需要可以去思考下一步该点击什么,这样的导航设计就是失败的,所以视觉设计时易用、友好是比美观更基本的要求。在这一前提下,进行导航视觉设计时还有以下方面应注意:
        3.1把握视觉规律
        导航设计要传达卖家最想告诉顾客的和顾客最想了解的信息,这是人与人以界面为媒介的交流,准确把握人的情感规律,可帮助提高传达的效率。视线跟踪技术的研究表明,画面
中如有某一区域权重过高,会导致浏览视线在权重高的区域内徘徊,例如通篇的黑白文字中有一张彩的照片,会很大程度吸引浏览者的视线。这一原理可利用在淘宝店铺导航设计中,如卖家在促销时,常以相同规格图片+标题+价格为单元排列构成促销信息导航,每一单元的视觉权重相等,然而真正能够带动店铺销售的爆款往往只有一两款,利用视知觉原理,可适当加大目标爆款的权重,使顾客在无意中将目标锁定在此。
        3.2协调彩配置
        导航配是店铺整体配的环节之一,风格应从属于整个店铺彩设计,呈现和谐、统一的视觉效果,如食品类店铺使用橙黄系,IT类店铺使用金属灰风格等。但如何凸显导航在店铺中的导引作用,还有以下几点应注意:首先是导航部分的彩与整体页面的彩有所差异,包括相、纯度、明度等方面,如在整体调是暗红的页面,顶部商品分类导航的背景可使用金、黑,既不与整体冲突,又能够使顾客快速发现导航的存在;导航的背景颜要与文本明显区分开来,保证文本清晰、易读,如白底浅粉的文字,会造成识别困难;在导航背景与文字的组合上,还需考虑传递给顾客的情绪,黑背景大红文本易于阅读,但用在母婴用品的店铺导航就不合适,因为其搭配情绪过于刺激。
        3.3理清图文关系
        图像和文本应用在网店导航中都是实现战略经营的手段,图像通过视觉效果吸引顾客,文本则以内容成为决定网店是否吸引人的重要指标。绝大多数网店都以经营实物类商品为主,卖家往往急于通过各种渠道向消费者展示商品图片,但鉴于导航的作用,图像方式在顶部、侧边栏导航中应慎用。如图片+超链接的方式是许多卖家为了页面视觉美观大量使用的导航方式,但漂亮的图片不等于成功的视觉营销,在用户眼里以文本为主、简单、不华丽的分类导航才是更有效率的方式。而在自由导航中,则可加大图像的分量,因为顾客不是程序员,密密麻麻的文字令人生厌,这时图像的应用更能吸引顾客的眼球。
        另外flash等动态图像实现手段会为导航增不少,但同时也会影响页面反应速度;动态图像十分抢眼,负面效应就是容易造成对顾客视觉上的骚扰,弄不好就会画蛇添足。在确定是否使用动态图像的问题上应该考虑使用动态图像的必要性,是否能够起到强调信息的效果,假如只是为了炫酷的效果,建议最好不用。如果决定使用,动态的效果要把握在一个合适的度,切忌喧宾夺主。
        4结语
        正确认识店铺导航系统的性质和作用,建立合理、有效的导航构架,以简洁、清晰的视觉设计将一套易用的导航系统呈现在顾客面前,将有效提升顾客的浏览体验,提高成交转化率,促进淘宝店铺的长远发展。
        参考文献:
        [1] 百度百科.导航[EB/OL].http//baike.baidu/view/425408.htm.
        [2] 李世国,顾振宇.交互设计[M].北京:中国水利水电出版社,2012.
        [3] Kalbach J.Web导航合计[M].李曦琳,译.北京:电子工业出版社,2009.
        作者简介:武彦如,女,山西太原人,太原工业学院教师,江南大学硕士。