用户交互设计:避免让用户在网站上迷路

任何位置都能明确“我在哪里?这里有什么?从这里能去哪里?” 

小时候,童话故事都告诉我们,迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向,我们发明了各种导航工具,大到卫星定位系统,小到指南针,人类在这一事情上,极具创意。

在网站上迷失方向,虽然不是什么生死攸关的事,但会带来许多负面影响,如:用户体验下降、任务不能完成,用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置,并帮助他们制定更好的查询策略,增进对内容的理解。

 在制定解决方案前,先了解他们为什么会迷路:

1、  当人们不能理解信息时,会产生迷惑

2、  人们在查询过程中迷失,不知道下一步该做什么

3、  人们可能会在网站中失去方向感,无法回到以前的页面,甚至是首页

 

图1

比如在图1的这个网站中游走,你容易陷入进退两难的境地。上图中,两个点击打开的页面,都没有导航信息,甚至没有任何离开当前页面的出口。 

4、  人们在在信息系统中偏离了方向,分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点,可以参考交互指南之《突出重点,一目了然》

 

图2

图2中的登录页面,可谓琳琅满目,信息的丰富程度毫不逊色于首页,难道设计者的目的,是希望用户放弃登录这个主要任务,去往“更重要”的地方吗? 

你也许会想,让用户不要迷路,不是非常简单的事情吗,我只要在所有页面中放入全局导航,使他们能在网站的核心内容之间移动。然后放入面包屑,让他们了解自己所处的位置,一切不就完事大吉了。 

但事实上果真如此吗?全局导航也许能帮助用户了解你网站的核心内容,但在具体的任务中,比如图3中的淘宝全局导航,如果放入在挑选商品或支付的页面中,恐怕非但不能指引用户,还会干扰到任务的完成。 

 

图3

 小心,别让自己陷入导航系统的过度设计中去。我们所要做的,是使用人物角色和场景作为参考,确定人物角色会选择的到达内容的最佳路线,而不是提供所有线路,更不需要将网站的全部结构复制到每个页面当中,造成页面信息负担。好的导航系统让人们感知不到它的存在。就好象在观看体育比赛时,裁判会做出许多正确的判定,而我们往往忽略他的存在,但一旦裁判员做出了一个错误的判决,就会引来场上观众的一片唏嘘。 

那么,我们应该怎样做,才能保证用户不在网站中迷失呢? 

首先,我们要帮助用户定向,也就是确定“当前位置”。

即便GPS卫星定位系统如此强大,它都必须随时在地图上标明我们的“当前位置”,才能真正为我们导航。而与现实世界不同的是,在网络世界中没有南北之分,也没有地理位置,我们必须利用导航系统的各种因素,来为用户创造可以判断当前位置的情景: 

1、  重视网站的品牌信息

用户应该一直知道自己在浏览什么网站,将组织的名称、标识、和身份识别图放进网站的所有页面中,是达到此目的最显著的方法。 

2、  细节创建情景

我们可以通过页面内标题、页面文字,向用户传递当前位置的信息。浏览器标题和URL也是用户进行判断的依据。当前导航选项的高亮状态,也是常用的方式。 

3、  面包屑

“面包屑”也是标明当前网站位置的好工具。此外,面包屑还能传递网站结构信息,以及记录用户的访问足迹。 

4、  逃生舱模式

逃生舱模式也是帮助用户确定当前位置的一张底牌。也就是在网站的所有页面上设置统一的出口,无论什么时候,点击这里,都可以回到首页。大部分网站都把逃生舱设置在网站LOGO上,已经成为惯例了。 

其次,根据用户需求,确定导航模式。

用户的需求决定了我们应当放置何种导航链接。在不同类型的页面,用户所产生的问题不尽相同。我们需要预测这些问题,然后在设计导航的时候,也问自己同样的问题。 

一般情况下,用户会问:“我在哪里?”“我在这里能做什么?”“我还可以去哪里”;在电子商务网站,他们也许会问,我该如何找到想要的产品信息;具体在某一产品,他们也许会问:“我该如何联系客服人员?”“我到哪里可以找到相关产品”。 

我们所要做的,并不是想出所有可能发生的问题,相应的,我们也不可能把所有问题的答案都放入页面当中。这个时候,人物角色和场景,将发挥很重要的作用。对于不同的页面,弄清楚每个用户角色要去哪里,放置他们最需要的导航。比如:你的人物角色需要随时从一个栏目跳转到另一个栏目吗?如果是的话,请保证顶级栏目的链接一直可用。 

一旦确定了用户想要到达的内容,就要思考达到这一目标所需要的最简单、最容易的方案。比如在图4中,也许你的人物角色需要的,只是一个“下一组”链接。

 

图4

 最后,通过压力测试检验页面的导航能力。

怎么样测试这个页面的导航能力呢?

(1) 随机从你的网站上选择一个页面;
(2) 把这个页面打印成黑白的,并把页面头部的浏览器地址栏和下面的版权及公司信息部份去掉;
(3) 假装你是第一次进入这个网站,并试图回答下面的问题(详见下列问题列表);
(4) 在一张纸上写下你所想的和答案;

问题列表:

1、这个页面是写什么内容的? 在页面的标题处画一个方形或在纸上写清楚;

2、这是个什么样的网站? 把网站的名字用圈圈起来,或者自己写在纸上;

3、这个网站主要的版块是什么? 用x标识;

4、这个页面中主要的版块是什么? 用三角形围着x来标识;

5、我怎么样到达这个网站的首页? 用H标识;

6、我怎么样才能到达网站的顶部呢? T来标识;

7、每一组链接分别代表什么? 把页面上的主要链接圈出来,并写下标识;

D:用来标识更多,详细介绍及这个版块的子页面等;

N:在同一版块的其它相邻页面;

S:在同一网站上但不相邻的页面;

O:离开这个网站的页面;

8、你是通过怎么样的路径到达这个页面的呢? 请写出你到达这个页面的路径,选择1>选择2>选择3…

让你们团队的其它成员或熟悉你网站的朋友也与你做同一试验,大家象跳伞一样的进入网站中的任意一个页面,然后把回答记在纸上,你就可以看出导航存在的问题。

时间: 2024-10-29 11:44:46

用户交互设计:避免让用户在网站上迷路的相关文章

用户交互设计:软件安装一般页面流程

文章描述:用户交互设计:软件安装一般页面流程. 混乱的安装界面和不畅的安装流程把前来拜访的用户拒之门外,也使软件的功能得不到充分的定制和发挥.由于对互联网产品的爱好,我经常安装软件,在这之中发现许多不好的地方,在这将共通的内容提出来分析一下.   现有软件安装一般页面流程: what's new页>>许可条款页>>选择组件>>软件大小信息,选择安装路径和快捷方式显示位置>>安装进度页>>附带推广软件页,和立即运行.开机启动.设为首页.显示新特性等

用户交互设计:手机产品交互设计样式

文章描述:用户交互设计:手机产品交互设计样式. 很多人都说,手机产品交互限制因素很多,过小的屏幕分辨率,过低的系统性能,过慢的网速,过弱的电池续航能力等等.但是在限制中还能做出优秀的设计,才显得弥足珍贵,就像风靡Symbian平台的gravity一样. 其实,我认为手机产品交互设计还是有很多想象空间的,它不仅仅是界面交互,而是跟空间.跟时间.跟触觉.跟视觉.跟听觉.跟嗅觉的交互,而且随着技术的推移,相信界面的可扩展性也会越来越好,不管是电子纸(ePaper),还是投影技术应用到手机上,都会让手机

交互设计影响因素:用户精力与注意力的应用

以人为本的设计,不能不考虑普通人在一般任务执行中的耐受力问题.因为人的精力有限,再强大的需求,无力去完成也是枉然.精力的有效转化率,是衡量交互设计品质的重点. 1.公式 精力一般由脑力和体力构成.针对互联网产品,脑力居前(非生产类网站的体力消耗很低).而脑力的组成又分为注意力.理解力和记忆力.本文将尝试以注意力为例分析交互设计的特点和注意事项. 注意力本身可以集中.分散和转移.集中一般出于明确的需求.潜在的兴趣;分散则由于信息干扰和不可控的时间;转移一般发生在需求探索阶段. 以网站信息结构内的各

网页界面交互设计:系统的用户体验的衡量标准

文章描述:精益用户体验(UX):摆脱只注重结果的工作(留意互动机构的区别之处). By Jeff Gothelf from SmashingMagazine.com翻译&编辑:DamnDigital, (转载请说明翻译来源, 尊重我们的努力) 网页(以及交互设计,界面设计,等)传统上是基于可交付的形式来执行.框架.网站地图.流程图.内容清单.分类系统.原型和规范文档(又称"The Spec"),帮助定义网站在其起步阶段的执行.这些结果构成了一个系统的用户体验的衡量标准. 随着时

交互设计:避免针对用户出现的设计错误

一.如何理解本条内容: 一个"简单"和"复杂"的例子 在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多程序要实现的预判和"非基础功能点"让开发人员望而却步不情愿去实现.相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑,开发人员更倾向于直接给到一个只能容许的操作行为,其他非法请求全部报错:"程序是严谨的,他错,我报错,以不变应万变.简单一点不好吗?"程序员们甚至笑言:"考虑

浅析Windows Phone 7之用户交互设计

在今年2月15日巴塞罗那的Mobile World Congress 2010大会上,微软终于正式宣告了其下一代的智能手机平台Windows Phone 7 Series(目前已经更名为Windows Phone 7).这半年来,随着各大媒体对于Windows Phone 7的关注度的日益提高,大家对Windows Phone 7的了解也越来越多.同时,为了能够在广大开发者在Windows Phone 7正式上市前顺利的开发出Windows Phone 7上的相关应用,微软也已经在这两个月陆续的

交互设计细节:当用户需要的时候提供帮助

文章描述:交互设计实用指南系列(3)-适时帮助. 任何一个交互过程的操作,对于用户来说都有学习成本,谁也不能保证所有人都可以准确无误地走完一个流程.交互设计师在设计时应该考虑适时地给用户相应的帮 助,这一点非常重要.适时帮助,是指在用户使用流程中,在需要的时候能及时地得到帮助:反之,在不需要帮助的时候,不要出现信息干扰. 不及时的帮助会造成用户使用进程中断,或者增加用户达成目标的难度.无效的帮助则可能给用户造成干扰,影响用户完成任务. "适时帮助"是一个偏正结构,首先是帮助,然后制约条

互联网产品设计:交互设计和感性用户

文章描述:交互设计的理性Vs.多样的感性用户. 和一位视觉设计师讨论UED分工的时候,他说:"交互设计做的就是逻辑."听起来似乎没错:互联网交互做得最多的就是点击.跳转.无论target到另一个page是_self还是_blank,无论信息架构的sitemap,还是导航,似乎交互做的就是一个纯理性.高逻辑的活儿. 直到有一天向臭鱼请教一个产品的设计时,我才意识到被忽视已久的问题. 这个产品大致需求是这样的: 一个图像上传产品.用户可以设置一张显示,也可以设置一周自动轮换.每个选择会为用

扁平交互设计更加符合用户体验

当我们没有智能手机.ipad也没有电脑的时候也许不用考虑各种需求设计了,当然这是玩笑话,随着互联网的发展,交互设计的作用越来越重要,未来的 日子必将围绕用户体验展开.为什么小c会这么自信的说呢?很简单,如果你认定客户就是上帝的话,那么用户体验的初衷就是服务好客户,最终得到收益. 扁平化设计来势汹汹 互联网并不是一成不变的,随着各种智能设备的多样化,交互设计也越来越受商人们重视,由于扁平化设计比其他设计更平易近人,更加容易处理的优势得到业内的热衷.同时移动互联网向着低配置.高效能的方向前进发展,我