优化网站导航条让用户更快找到需要的信息

2016-02-17 03:58 5 1 收藏

下面是个简单易学的优化网站导航条让用户更快找到需要的信息教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - 平面设计 】

让用户更容易地找到需要的信息,可以对网站的信息架构和站内搜索进行分析和优化,而另一个能对用户起到很好引导作用的就是网站的导航功能,所以这篇文章主要分析用户对网站导航功能的使用情况,并在此基础上合理地优化网站的导航设计。

之前已经介绍过为了让用户更容易地找到需要的信息,可以对网站的信息架构和站内搜索进行分析和优化,而另一个能对用户起到很好引导作用的就是网站的导航功能,所以这篇文章主要分析用户对网站导航功能的使用情况,并在此基础上合理地优化网站的导航设计。

网站导航的作用

网站导航的最终目的就是帮助用户找到他们需要的信息,如果说得详细点,那么可以概括为下面3个用处:

1. 引导用户完成网站各内容页面间的跳转。这个是最常见的,全局导航、局部导航和辅助导航等都是为了引导用户浏览相关的页面;

2. 理清网站各内容与链接间的联系。即对网站整理内容的一个索引和理解,这个最常见的应用就是网站地图和内容索引表,展现了整个网站的目录信息,帮助用户快速找到相应的内容;

3. 定位用户在网站中所处的位置。这个在面包屑导航中得到了充分的体现,它帮助用户识别当前浏览的页面与网站整体内容间关系,及其与网站中其它内容的联系和区分。

网站导航的分析

通过分析用户使用网站导航功能的情况,可以来评估网站各导航功能设计上的优劣,这里主要从导航的利用率实现度有效性符合度4个方面进行分析:

利用率

网站导航的利用率,即用户使用各类导航功能的情况。最直观的分析方法就是使用点击热图,具体可以参考我之前的文章网站点击热图,也可以使用页面覆盖图(Overlay),Google Analytics上面默认提供了网站首页的Overlay:

优化网站导航条让用户更快找到需要的信息,PS教程,图老师教程网

从图中可以区分网站首页各区域导航功能的使用情况,包括顶部导航,侧边栏的各导航模块等。如果是独立的导航索引页面,我们可以查看这些页面的浏览次数(Pageviews)访问量(Visits)等指标来分析它们被使用的情况。比如你通过点击我的博客顶部导航中的网站地图进入了分类导航索引页面,会看到该页面的URL地址为http://webdataanalysis.net/site-map/,我们可以在Google Analytics上面通过filter来查看该页面的访问情况:

优化网站导航条让用户更快找到需要的信息,PS教程,图老师教程网

通过比较各导航页面的这些指标我们可以分析得到用户对导航功能的整体使用情况以及各导航的使用比例或使用偏好。

实现度

我们需要知道当用户试图使用导航功能时,有多少用户真正点击导航中的链接或者有多少用户进行了下一步操作。所以这里可以分析各导航页面的点击转化率(CTR),即用户在导航页中的点击次数/导航页面被浏览的次数,其实上面页面覆盖图指直接给出了页面中每个可点击对象的点击转化率,你可以将它们汇总就是整个页面的点击转化率,也可以查看导航页面各链接的点击转化率。但Google Analytics上面无法提供一些子页面的覆盖图,只能选择其它的工具或者试图监控导航页面所有的点击事件。

另外一种分析导航功能实现度的方法就是通过离开率(Exit Rate)这个指标,如果一个用户进入了导航页面后直接离开了网站,那么导航的功能就没有实现(当然如果用户返回了上层页面或者回到首页,导航功能同样也没有实现,这些操作无法体现在Exit Rate)。比如我的博客的分类目录导航页面,该类页面的URL地址都会包含/category/,所以也可以在GA上面直接filter出来所有这类地址,我们看看这些页面的Exit Rate情况,如下图:

优化网站导航条让用户更快找到需要的信息,PS教程,图老师教程网

这里因为缺少导航页面Exit Rate的评判基准,所以我无法判断我的导航页面效果到底如何,有兴趣的朋友可以在下面的评论把你们的网站或博客导航页面的Exit Rate贴上来看看,大家交流比较下。

有效性

与网站的内容页面不同,导航页面的目标是让用户更快地找到想要的信息,我们不需要用户过久地停留在导航页,正如Google的口号:We may be the only people in the world who can say our goal is to have people leave our homepage as quickly as possible(让用户尽快离开自己的网站)。

所以对于导航页面而言,页面平均停留时间(Avg. Time on Page)越短,则该导航页的质量就越高(当然用户要有点击才行)。页面平均停留时间也是GA中分析页面的基本度量,上图也有显示。

符合度

或者称为导航的效果,用户在使用导航功能找到相应的页面后,是否对该页面提供的信息感兴趣,或者说这些是不是他们想找的信息。

假设用户在使用导航功能后找到了需要的信息或者完成了预期的任务,那么在行为可能表现为在使用导航后继续在网站停留了一段时间,或者用户最终到达了任务的成功页面或网站的目标页面(如用户完成注册、电子商务网站下单或购物成功等)。所以我们可以使用导航的后续停留时间任务完成度目标转化率这些分析度量来衡量导航的实现效果到底如何。

导航设计的优化

基于对以上4个方面的分析,我们可以对网站进行针对性的优化。

a) 提高有效导航的利用率,将用户最常用或效果最佳的导航放在最醒目的位置;

结合上面的分析,将那些利用率高,效果好的导航功能放到醒目的位置,让用户更方便地使用这些功能。

b) 去除无效导航或者无人使用的导航,精简网站设计;

导航功能并不是越多越好,只要提供够用、有效的导航就行,结合上面的利用率和实现度,将那些没人使用或点击转化较差的导航功能进行精简。

c) 提高导航描述与对应内容的关联度,不要误导用户,赢得用户的信任并保持用户对网站的兴趣;

不要试图去做标题党,如果一个导航页面拥有了较好的利用率和实现度,那么千万不要辜负用户的期望,为他们提供相符的高质量的内容,这样才能真正地留住用户。

d) 优化导航页面内容的组织和展示。

如果有效性不高,用户经常需要在导航页中逗留一段时间才能找到自己想要去的地方,那么也许导航页就失去了其最根本的价值。如何更好地展示导航的内容可能是一个复杂的问题,涉及信息设计、分类、排序等多方面,或者有些网站设计师能想出一些别出心裁的展示方式来吸引用户的眼球,这里直接上张图吧:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

优化网站导航条让用户更快找到需要的信息,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

好了,我对网站导航的分析优化说完了,你是否还有更多高见,欢迎在下面评论分享。

来源:http://www.tulaoshi.com/n/20160217/1578283.html

延伸阅读
标签: Web开发
    创建导航条     如果不使用框架,可以在每个页面设置导航条,导航条设一组链接按钮,供浏览者选择使用。按钮有多种形式,下边介绍由鼠标经过图像变换按钮的组成的导航条制作:(导航条在页面顶部)     “鼠标经过图像”是当访问者用鼠标指针指向该图像时,该图像发生变化。   ...
微信头条怎样使用才能更快找到热点   方法/步骤 1 要想更好地使用微信头条,手机上首先要有搜狗搜索客户端,大多数朋友的手机上应该都会有,小编是第一次使用,所以从头至尾的跟大家分享。首先搜索微信头条就会出现搜狗搜索客户端,下载安装。安装完成后手机上搜狗搜索和微信头条都存在了,实际上从哪一个进去页面都是一...
标签: Web开发
不少朋友通过各种方式问我要 Blog 顶部的滚动导航菜单的代码。其实也没什么特别的,但既然有需求,我就还是把这部分代码整理出来,供大家参考。 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html&nb...
标签: PS PS基础
最终效果 步骤 步骤2,创建导航背景,下面忘记写了,颜色是#5a5a5a 设置灰色块的图层样式,内阴影+渐变 设置完渐变的时候效果出来啦 好,复制背景,行距是3px 为导航条写上标题 下面设置圆圈的样式 图层样式设置完毕把图层不透明°设置为70% 加上箭头得到效果 最终效果

经验教程

588

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部