请告诉用户“你在这儿”

设计师通过导航结构帮助用户浏览网站,但仅有合理的导航结构和功能还不够。导航不但要告诉用户接下来去哪儿,还要告诉他们当前在哪儿。网站里的每一个页面都有可能是用户看到的第一个页面,因此每一个页面都应该有足够的场景信息,引导用户迅速找到去往目的地的路径。

通过页面搜索来浏览网站就像是在陌生的城市里随便下了一站车。有效的标志是非常重要的。图片源自RK Photography

商场走廊的墙上常常会贴上地图告诉人们他们现在在哪儿,为他们辨明了方向。图片源自Britain W.

用户不总是会走正门

在搜索引擎的帮助下用户可以在网站里随意浏览,因此提供当前所在位置的提示十分重要,这样用户才不会迷路。即便他们是通过首页进入到网站,在浏览其他页面的时候也需要方向的引导。

位置标识让用户浏览目标页面时更放心。与火车站类似,网站的位置标识包含色码、亮度、符号、箭头、路径,以及位置名称。在用户感到迷惑、担心,或是迷路的时候,这些标识可以帮助他们确信接下来该去哪儿。

让用户一眼看出网站主题及当前页面主题。网站里的位置标识常常通过导航、图标或者菜单的外观变化来实现。面包屑导航和页面标题的作用尤为明显。购物结算流程和应用安装向导也倾向于以步骤名称和数字为用户导向。

典型的“你在这儿”机制

LOGO和品牌:LOGO可以告知内容的归属,且和首页关联。另外,注册商标、调色板、签名字体等品牌元素也能激发用户对一个组织机构信用度的认知。通常LOGO和品牌位于网站页面的左上角;这个位置很容易被用户一眼看到,不管用户用的是哪种设备。

导航的变化:当用户选择了某个主题的时候,与导航相关的链接或图形元素(分页选项卡、按钮、符号等)在视觉上会有更显著的变化,通常以颜色高亮、或者移动的方式呈现(有的时候为了突出效果两种方式会同时使用)。

主题:左对齐的标题符合从左向右阅读的规律,能让用户快速获取关键信息。一组不同级别的主题也可以让用户马上了解到其他内容和路径信息。

窗口(页面)标题:在搜索引擎结果、RSS订阅、新的RSS阅读器、书签、历史记录列表中,HTML标题位于每个窗口或分页的顶端。独有的描述性标题表明了其归属、信息组织方式以及页面的特定内容。

URL适当、可读的网站地址对链接地址的分享,网站的信用度、辨识度,以及撤销操作功能有举足轻重的作用。它揭示了网站的信息构架,帮助用户在场景中更好地了解网站内容。

面包屑面包屑的链接路径清晰展示了信息层级(当前所在位置及如何返回)。和URL一样,面包屑也能告诉用户刚刚浏览过的路径,并且更具探索性。

场景线索:无论从时间角度还是网站的信息构架方面来看,日期、标签、图标以及其他符号标志也常用于帮助我们在恰当的场景中更好地展示信息。

视觉设计的变化:彩色编码、品牌变化、及其他一些明显差异都可以作为位置变化的标志。网站中的彩色编码(主色调随网站区域而变)常常伴随着风格迥异的内容。例如,杂志、新闻网站、还有许多组织机构会通过颜色和品牌的变化来区别不同的特性、部门、产品系列等。

步骤:通常,购物结算步骤以及其他的顺序任务流被赋予了每一步的名称和序号,以告知用户目前是第几步、要执行什么任务。这些步骤标识一般位于页面的水平上方或者垂直展现在左侧。他们帮助用户了解整个任务流有哪些步骤、目前处于哪一步骤,激发用户的正确预期(让用户明白下一步是什么)。

网站BBC新闻通过(1)logo和品牌,(2)导航条的变化,(3)主题,(4)场景线索让用户明确当前所在位置。这个页面的标题和URL包含了文章的标题和网站的名称。

麻省理工大学开放课程的网站有非常明显的位置标识:(1)品牌,(2)导航条的变化,(3)面包屑导航,(4)主题、页面标题及URL。但是这个页面遗漏了一个重要的可见性信息,时间场景。

页面标题和URL对展示信息场景和位置也很有帮助:

麻省理工大学开放课程网站的页面标题为:Readings | Introduction to Technical Communication: Explorations in Scientific and Technical Writing | Comparative Media Studies/Writing | MITOpenCourseWare(路径很长,但是展示清晰、关键词明了)

其URL为:http://ocw.mit.edu/courses/comparative-media-studies-writing/21w-732-5-introduction-to-technical-communication-explorations-in-scientific-and-technical-writing-fall-2006/readings/

该网站中,教科书的出版日期(1995-2003)暗示着文章已经过时,但URL中却有意提供了课程的时间(2006)。这里最好能在页面里具体展示出课程的时间,好让学生们知道这是一篇老旧却依旧经典的文章。页面底部(整个网站皆如此)的版权信息虽然给出了2001-2015的提示,但这个时间范畴对于科技内容来说太久了。

纽约公共图书馆网站的黑色导航条选中任意一个主题后,被选中的主题颜色由黑变红。这一变化展示了导航条的层级结构和内容信息。网站的LOGO、品牌以及可以来回切换主题的导航条都对用户当前位置的展示起到了积极作用。

在复杂的网站信息结构中展示最深级导航条的变化是有难度的。但面包屑导航做到了。欧洲太空总署网站的复杂构架和面包屑导航向用户展示了清晰的位置标识。(尽管还是有点令人困惑,理由是2014年拍摄的照片被归属到2015年——有可能2015年是照片的发布年限。)

为有效的位置标识进行测试

很多网站的位置标识由于太不起眼而导致无法有效地传达位置信息。设计师对自己设计的网站结构了如指掌,不需要刻意的位置标识,因此设计师眼里的网站设计与其他人是有差异的。相反,对于网站的访客——新用户或偶尔访问的用户——来说,一切都是新鲜有趣的。因此,一个对设计师来说很明显的位置标识不一定能被访客注意到。人们很容易忽略细节。

什么时候测试

现有网站随时可以。

对于新网站的设计,最好在视觉进展到高保真阶段前就执行好测试。列出所有网站在正式运转情况下能干扰用户的真实内容,尤其是广告、动效、照片,因为这些设计元素最能影响用户注意力。

怎么执行测试

向测试者展示网站不同层级的页面,每次展示一个、不提供导向帮助。

对测试者提问:“假设这是你第一次访问这个页面。你知道自己处于网站什么位置吗?”

若测试者给出反馈(正确或错误的答案),接着问:“你是怎么知道的?”

若测试者不确定,再问:“你会希望这里有什么样的标识帮助你找到当前位置?”

若测试者还是不清楚自己在哪儿,继续提问:“为了弄明白自己在哪儿,你通常会怎么做?”

避免把导航路径设计成死胡同。有时URL也会因打不开而毫无作用。这种情况下,给出几个位置链接、让用户尝试去访问感兴趣的页面,而不是只留下一个空白页面,这样用户可以重新计划新的浏览之旅。该网站页面向用户表达了歉意,并建议用户重新检查网页地址;此外,还提供了索引链接、网站的全局导航、检查网站状态的路径、以及联系网站工作人员的链接。无结果的搜索结果页的处理方式也与此类似。

总之

只有让用户参与测试才能确保网站的导航路径设计是否正确无误。如果测试结果显示用户只是漫无目、这儿看看那儿看看、或是原路返回,说明你的网站构架还是存有问题,要么是位置标识不够突出、放错地方,要么是导航层级、页面标题等不够完善或有误导性。

有关历史记载

有趣的是,对用户在“多维空间(复杂的网站构架)中迷路”的担心在万维网之前就催生了许多富有创造性但却很复杂的解决方案。乐观的是我们现今的网站已经运用了一些实际可行的微创新,并且用户可以通过返回按钮回到自己熟悉的领域。

 

译者简介

小媛,神经认知语言学硕士  现从事互联网产品设计  热衷于用户体验和交互设计

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部