网站用户体验分析:页面导航原则

  著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划,将面包屑撒在来时的路上,虽然当月亮升起时,面包屑被鸟吃掉了,但是现在的互联网设计师们从这个故事中找到了灵感,设计出不会被鸟吃掉的固定“面包屑”。

  

  图1:互联网上各种各样的面包屑

  汉赛尔和格莱特为了在森林中找到回家的路,撒下了面包屑,这是一种导航方式,如果没有被鸟吃掉,无论走到森林的任何地方都可以知道如何从当前的位置走回家去。在互联网信息爆炸的今天,互联网的设计师们在网页上设计出各种各样的固定面包屑(如图1)也是为了不让用户迷失在信息的大海中,给予用户的一个导航的方式。Apple是大家公认的用户体验最好的设计公司,我们来看看apple.com是用什么方式完美地完成用户导航需求的。

  页面导航原则

  

  图2:apple网站itunes新功能介绍的面包屑

  图2是apple.com上面itunes新功能介绍的面包屑。一共有两个元素:节点标签和箭头。

  节点标签:有apple的logo、itunes和what’s new。且节点标签有不同的样式,what’new用了Bold的样式。每个节点标签中间都用箭头隔开。箭头:是一个有方向指向的符号。

  面包屑这种方式完成导航需求的方式为:

  1、通过最后一个节点标签告知用户当前位置;2、面包屑整体从左到右告诉用户来到当前位置的固定路径;3、除了当前页面的节点标签,其它节点标签均可点击,可以让用户回到上一级页面(可以回到最初起点的作用)。通过这三点任何用户都不会在网站中迷失方向。

  

  图3: apple网站itunes新功能介绍的页面

  然后我们再对照这个面包屑所在的页面(图3)从上往下的各种导航方式的元素进行分析,看页面除面包屑之外是如何自我完成导航需求的:

  1、首先导航菜单栏上的logo告诉用户在apple的网站上,导航上的菜单分类告诉用户这个网站一共有多少个维度,菜单上被选中的Itunes,告诉用户当前处于itunes的菜单维度下。

  2、接着是itunes的页面导航栏,大大的标题itunes告诉用户下面的内容都是讲itunes,右边的itunes的页面菜单导航告诉用户itunes页面的内容分类,其中不一样状态的what’s new告诉用户目前选中的是这个类容,下文内容是在这个分类下的。

  3、最后是这个页面的标题What’s new in iTunes,表示当前页面的内容是按照这个标题全面铺开内容。

  上述导航元素也清楚地告知了我们1、用户当前位置(当前页面标题);2、来到当前页面的固定路径(从上往下的导航路径布局和元素);3、如何返回上一级页面(每个导航菜单均可点击,除了当前页面标题)。其中涉及到3级导航:apple网站主导航、itunes类别导航和what’s new 内容导航,每一级导航都有导航菜单和被选中的状态。将每一级导航的起始点用箭头链接起来,如图3所示→→,形成了一个和实际存在的面包屑一模一样的页面路径。告知用户是如何来到这个页面的。

  从上述页面中的面包屑样式分析和页面自己的内容分析,可以看出整个页面里所有的导航方式所要传达描述的信息是一致的,那么我们可以归纳出页面导航原则:1、告知用户当前位置;2、告知用户来到当前页面的固定路径;3、可以让用户返回上一级页面。

  页面导航原则指导设计

  1、符合页面导航原则的设计:

  

  图4:Nestle.com

  

  图5:Nestle.com

  我们用导航原则来检验nestle.com的导航设计,这个页面通过页面标题“baby foods”告诉我们当前位置,通过网站logo,二级导航栏中选中的“Brands”,左侧三级导航栏选中的“Baby foods”,告诉我们这个页面的固定路径是从home,选择brands分类,再选择Babyfoods。且导航栏的每一个分类都可以被点击,可以让用户返回到上一级。这个页面完成了导航所需要的所有信息传达元素。我们也可以明显地找到页面中的:→→的页面路径。图4是根据它的面包屑的节点标签元素,将页面中的相同元素找出来,这些元素都已比较明显的样式表示选中,与相同信息不同状态的内容区分开来,导航布局从上而下形成了包含与被包含的关系,图5是将这些选中的元素用箭头连接起来,这样就找到了页面中的的页面路径。

  

  图6:amazon.com

  图6是在amazon浏览到web navigation的搜索结果页。图中将隐藏的页面路径和实际存在的面包屑都标示出来了。面包屑的每个节点标签在页面的其它导航方式中都有被选中的状态,且自上而下,从外到内形成包含与被包含的关系,从而形成一个隐藏的页面路径。这里使用的导航方式和前面都不一样,不止用了导航菜单,还使用了树形的级联菜单的方式。当前页面也不是用页面标题,而是直接用的实体面包屑的最后一级节点标签的强化样式。这个页面通过不同的方式完成了用户的导航需求。

  2、其它符合页面导航原则的新型样式:

  

  图7:Booreiland

  

  图8:John Lewis购物网站

  

  图9:wowhead面包屑

  3、不符合页面导航原则的设计:

  

  图10:meilishuo.com

  Meilishuo的一个杂志内容页面,没有实际存在的面包屑,那么我们寻找其它导航方式,如上图网站logo、导航栏、页面标题等,如箭头所指,我们会发现页面路径少了了一段。我们不知道从首页去了什么分类,然后来到“所在杂志”。这样用户想找杂志所在的上一分类就找不到了,回不到上一级。这个页面的导航原则就没有满足,用户在此处就会迷失。它主要少了主导航条没有选中当前所在内容分类,从而让路径断了一节。

  小结

  设计师的创意是无限的,但是用户的导航需求是固定的,任何样式,只要能够符合导航原则的几点要求,就可以完成用户的导航任务。更加简便的方法就是只要能在页面元素中找到这个页面的页面路径,就相当于满足了导航原则。这样的原则和方法既可以用来检验我们的设计是否达标,也可以用来指导我们对导航方式的设计。

时间: 2024-09-16 03:35:23

网站用户体验分析:页面导航原则的相关文章

SEO与网站用户体验分析

学习seo的人都会隐隐约约的把网站的用户体验放在很主要的位置,而做的时候却很少在乎,即使在乎也不知所以然,那么seo与网站用户体验的关系怎样来看待呢,我们应该怎么做呢?看下文: 1.seo与网站用户体验的概念 seo是搜索引擎优化,是面向搜索引擎的. 网站用户体验是指网站的可用性.根据用户的习惯,心理等等设计的,符合人机交互,符合人体工程学的网站是用户体验好的网站.网站用户体验是面向用户的. 2.seo与网站用户体验的关系是对立统一的 a.seo与网站用户体验是对立的 从seo出现的那天起,就已

做好网站用户体验的十大原则

中介交易 SEO诊断 淘宝客 云主机 技术大厅 网站的用户体验是一个网站赖以生存的根本.一个网站没有良好的用户体验是留不住用户的,同时也无法取悦于搜索引擎.所以要想让网站成为您网络营销的利器,那么网站的用户体验就不能忽视,而且要做强做好.要想做好网站的用户体验要从哪些方面去考虑.要遵从哪些原则呢?接下来优赛SEO就简单的谈谈自己的一些见解和看法: 第一:增加界面用户易用性 有人数网站的点击次数最好在3次左右,点击距离也不能离首页太远.事实上这样说并没有错,用户在多次点击才找到自己想要的信息当然会

网站用户体验设计:页面间的跳转

在网站中,用户当然希望一步操作就完成自己需要完成的任务. 但是事实上,这是不可能的.毕竟网站的目标用户是一群人而不是一个人,目标用户之间的操作习惯必然会存在着很大的差异,况且,目标用户对产品的期待也不同,在网站中往往存在着几个相似或者相关的功能去满足用户在不同场景下的不同需求. 通常,用户不得不进行几步操作去完成网站中的某一项任务.而操作步骤的实施,往往会以连续几个页面的更替与跳转来实现.这些页面之间的跳转,所依附的应该就是这个网站的结构. 网站既然存在着结构,用户就不得不花费一定的成本去学习该

12306网站用户体验分析

  请问哪个电子商务网站可以不做优化.没有广告.不使用任何网络营销手段.网站功能极其普通.页面设计令人摸不着头脑,并且伴随着不太理想的用户体验却仍然能够达到几亿流量?今天就来分(吐)析(槽)一下这个网站,抢不到票的同学,是时候转给12306看了. A:1~2~3~0~6~!(此时大家异口同声.) 12306网站的用户体验有口皆"悲",就算你没有实际操作过,也许应该也有所耳闻.但经历了2013年末的那次大改版后,无论是网页设计还是用户体验,12306网站与之前的版本确实大相径庭. 比如网

网站用户体验分析:解读眼动的12个误区

学术界和商界对眼球追踪技术应用(以下简称眼动)的关注度,每隔一段时间便会出现一次高潮的讨论.随着技术的革新和推广,越来越多的用户研究行业人员开始在产品设计和研发过程中引入眼球追踪技术,尝试读懂用户眼中的产品和体验. 但是由于对眼动技术认知的不足.信息的不对称,导致对该研究方法的误区不断出现.本文将列举一些用户研究领域对眼动的误区,并试图解答正确的应用. 1 "先做个眼动,看看用户在看什么?" 对眼动有所了解的人,通常会向研究员抛来这样的问题.假如盲目地接下这样的任务,不经过需求细分和策

网站用户体验分析:小议国民性和Web设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 本文意在通过对当代中国民众的共性和心态上的思考,从更加人性化的角度考量和设计web产品的用户体验.之所以称作"小议",一是因为"国民性"这个题目很大,也很敏感, 几篇文章无法说尽;再者本人阅历有限,个人观点的bias难以避免;同时,也希望引发大家的一些反思.而"Web设计"则指网络上的用户体验设计的各个方面(图1). 阅读全文 图1:用户体验的4个元素 前言 国民性这个议题,自然没有那么简单,泱泱大

网站用户体验分析:浅谈图片优化的方法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽.那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片最精简呢?下面我就个人经验,来简单介绍一下图片优化的方法,首先我们了解一些图片方面的知识: 1. 矢量图与位图. 矢量图:缩放.旋转不失真的图像

网站用户体验分析:以用户视角出发的表单之旅

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 用户使用发布表单,就像是一次旅行.旅行的目的是否能达到?过程是否让人满意?这些都决定了用户会否再来这里. 一.那么为什么要以用户的视角呢? 作为设计师,你是否遇到过这种情况: · 我们额外加一个填写项,用来收集用户信息吧; · 我们的表单之所以复杂,是因为我们希望用户多填写内容,这些内容都是有用是; · 我们的表单应该在这最重要的一步出现,这

网站用户体验分析:数据可视化6步法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 [编者按]本文来源@百度商业UED 在当前互联网,各种数据可视化图表层出不穷,本文尝试对数据可视化的方法进行归纳,整理成6步法. 一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事物的数值,我们暂且将其分别定义为指标和指标值.比如一个性别分布中,男性占比30%,女性占比70%,那么指标就是男性.女性,指标值对应为30%.70%