优界网

首页 > 产品经理 > 有效地简化导航-Part 2:导航系统

有效地简化导航-Part 2:导航系统

87

0

0

2015-11-27 00:11:56

志志尾 限

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

小编导读:怎么才能做出一个既简洁而又具有预见性的导航?在Part 1里面说,前两步分别是:组织内容,简化导航选项;解释这些选择,降低用户的认知障碍。

然而,我们还需要多做两步——选择正确的导航菜单形式,并设计出来。本系列 Part 2 将展示第三步和讨论哪种导航菜单适应哪些内容。

界面上的导航菜单都为了给用户提供浏览内容的导航选项。这不包括,文章或商品页面里面的超链接,因为它们的主要作用是流量,而不是导航。

主(传统的)导航和次级(备用的)导航之间是有区别的,但很难精确界定。有人说主导航主要是通过点击、悬停来选择或浏览元素据类型,而次级导航在其中某方面有缺失。

传统的导航菜单

传统的导航菜单有以下5种类型,从简单到复杂排序

1. 菜单栏

2. 常规下拉菜单

3. 多栏下拉菜单 (Mega-menu)

4. 分页

5. 动态过滤器

当然还存在更复杂的混合型方案,但是所有混合型导航都能拆解成以上5个类型。现在问题是什么时候该选择哪种类型。

就像 Part 1说的,设计师用3种方式来解释导航选项:标签;标签+图;标签+图+描述。为了降低用户的认知障碍,设计师应为目标用户提供提供足够的信息来让他们理解这些选项。

下面这条经验法则 (rule of thumb) 可以帮你决定什么时候选用哪条规则:越少的选项,需要解释的就越少,所以导航应该尽可能简洁。

为什么有些 widget 更易用,什么时候应该选择这个而不是那个…… 首先仔细看下这5种导航菜单。

菜单栏

几乎每个网站一个横向或竖直的栏来容纳顶级类别。

01-navigation-bar-500

最基本的导航——一个横向或竖直的栏

建议

最重要或最频繁被访问的栏目或类别应该放到这个导航栏里面。

解释

一个导航栏是最简单的导航形式。这个导航栏里面的栏目或类别都是全局性的,可以直接被看见及访问。相比之下,用回会悬停在一个下拉菜单或等待分页加载要访问的选项。

问题

导航栏(横向或竖直)只能放下一小撮栏目,而且还受限于屏幕宽度和方向,它会占据本应该显示主要内容的空间。

下面的截图中,会看到横向的导航也是很好用,它只占据一行空间。为了把它放到更小尺寸的屏幕里面,设计师把导航堆砌在行里面,然而这样就会把主要内容压下去,用户就需要多滚动几次。

navigation-stack-preview-opt

多列的导航就会变得很难用。

在宽屏中,竖直的导航适用于更多的菜单栏目,但它有另一个缺点。它占据的竖直空间本可以更高效地展示主要内容,文章、视频、商品信息……下面我展示并对比它们的效果。

03-navigation-bar-500

竖直导航会束缚内容在宽屏中的展示效果。

这就是为什么下拉、浮动菜单更适合多栏目。它们可以根据需要来显示额外的栏目,把舞台让给内容。

常规下拉菜单

下拉、浮动菜单,被触发的时候,就会出现在内容上面。它的条目都是竖直堆砌在一列里面,由文字或文字+图标组成。

04-dropdown-menu-500

下拉菜单把所有条目竖直堆砌在一列里面。

建议

如果栏目可以很好地用文字表达,并且不会太长,一个常规下拉菜单是最简单而又有效的方案。

解释

与多栏下拉菜单相比,常规下拉菜单有如下优点:

快速加载

多栏下拉菜单需要更多的空间,而常规下拉菜单只需要少量文字。多栏下拉菜单还会干扰用户,至少也会降低他们的浏览速度,因为他们需要花费时间来搞清楚这个布局。相比之下,一个简短的竖直列表就很适合快速阅读和理解。

问题

如果菜单太长,整件事就会变得很奇葩。一个长的竖直下拉列表会被浏览器窗口切掉一部分,这就需要用户不断滚动。有两个方法可以处理这个问题。

把表弄成子类别。但这个方法,如果交互设计得不恰当的话,从一个子菜单到另一个子菜单的导航会让人沮丧。这个问题会在本系列的 Part 3 中说到。

第二个方法就是使用适合屏幕方向的多列下拉菜单。

05-dropdown-menu-500

如果屏幕空间是决定性因素,让菜单适应屏幕方向不错的变通方案。

多栏下拉菜单 (MEGA-MENUS)

有一种很特别的下拉菜单叫做多栏下拉菜单。多栏下拉菜单就是下拉或浮动菜单,但它并不是用一列条目堆砌起来,而是用图片、印刷上的层级、不同的图层来显示选项。

06-mega-menu-500

多栏下拉菜单就是一个更大、更复杂的下拉菜单。

建议

如果选项需要文字+图片,那多栏下拉菜单就是个好选择。

解释

常规下拉菜单不能提供这样的空间或形象化的选项。不管是常规还是多列,与分页相比都会有以下的优点

快速加载

降低认识障碍。分页的话,用户就会思考“哪个是广告?”,“哪个才是真正的内容?”,“导航在哪?”……下拉菜单只会出现在导航,并且出现在鼠标光标附近。

问题

即使是多列下拉菜单,空间也是有限的。如果有很多很多栏目,那分页就不可避免。

分页

第四种显示栏目、类别的方法就是用一个独立页面。

07-separate-pages-500

分页就可以容纳很多子类别。

建议

如果需要文字+图片+描述,分页就是最好的。

解释

用多列下拉菜单来容纳这些内容也是可行的,但也只有描述很短的时候。

问题

把用户带到一个分页来浏览导航选项,而不是内容,这并不是一个优雅的方案。同时用户也会被带离当前页面的语境。但如果多列下拉菜单不足以容纳这么多的选项,分页就是最好的方案。

动态过滤器

动态过滤器是最复杂,最强大的方案,依靠用户的组合他们想要看的内容流。

08-filter-500

复杂而强大,动态过滤器让用户可一组织他们需要的内容。

很多网站只有前3种导航菜单,动态过滤器就没有单独出现。而是作为一个选项附加在主导航上。

Kmart (下图)以下拉菜单开始导航步骤,常规和多列都有。在下一个层级,使用分页来展示产品类别。当用户导航至某个系里面,他们就会看见一个动态过滤器。用以精准搜索。

09-dynamic-filter-500

动态过滤器经常会附加在主导航上。

建议

符合在Part 1里面讨论的元数据类别。可以这样说,前3种导航适合重要和互斥类别,动态过滤器适合把类别整合在一起。

解释

动态过滤器的有点就是可以让用户选择,并及时改变值。而不是在不同导航层级里面前进、后退,用户可以停在一个层级,动态地整合值,直到结果符合他们的要求。

动态过滤器通常是竖直的并不是一个缺点,因为过滤结果并不是前面所说的“内容”。他们仍然是导航的一部分,左边选择的值和右边及时反馈的结果是有动态联系的。

问题

动态过滤器很强大,也很复杂。它们占据更多的空间,需要更多的时间来加载。用户需要去分析这些不同的元素,包括过滤器、结果、结果排序、展示模式,这些使动态过滤器在电脑上造成挑战,就更别说手机上。如果更简单的导航就可以完成工作,就不要使用它。

备用的导航

几乎所有的网站都会选用其中一种传统导航作为它们的主导航。然而,很多还会以备用导航系统作为补充。这么流行的方式也是很重要的。

这里有四种基本的形式:

搜索

A-Z的索引

标签

搜索

搜索让用户从在各个导航层级中抽离出来,把他们直接带到目的地。其中的不同点在于,页面的标题已经由用户手动设定好了。

10-search-500

搜索是在不同层级中浏览想要的内容的快捷方式

设计师会在所有的页面上应用标签、关键字系统,来解释用户和搜索引擎之间的误差,例如错别字、同义词、内容不同的概念模型。换言而知,搜索引擎会尝试猜测用户究竟想要什么。

建议

提供搜索作为主导航的补充,并不等于作为主导航。

解释

用户是否以搜索为主导,关于这点不同的研究有不同的结论。当然,这也会受搜索引擎是如何设计、展现等因素影响,甚至导航的设计太差也会增加搜索的占有率。总之,搜索并不是首要方案。

尽管开发者作出各种努力来避免错误,搜索成功率还是很低。原因是每个网站都会有自己的标签、分类方案、命名习惯。用户不知道这些细节,所以它们经常猜测性地填写搜索请求,这是一个累赘而又不确定的过程,导致很多人只有一、两次搜索功能。在移动设备上尤其明显,因为填写搜索请求的体验更不舒服。

另外一个问题就是,即使搜索结果都是相关,用户也不确定它的完整性。“会不会因为搜索引擎曲解了我的搜索请求而导致少了些什么?”……传统的导航,确立并展现所有类别,同时展示所有相关条目,提供用户所浏览的确定信息。

另外,还会经常讨论搜索的转化率比导航菜单高。其实这可以被解释——浏览和搜索的区别。浏览型的用户会用菜单,而很少决定买些舍呢么,那些知道自己想买什么的用户,就会直接输入并搜索。

然而,搜索能够更有效地找到特定商品,它并不那么流行。

11-search-vs-navigation-500

用户会倾向于使用传统导航,即使是在找特定商品的时候。

用搜索的问题是,不同的详细配置、不同的地区命名或型号,很难说出产品的确切名称。“GS-50 or G-150?”,“这个有额外的电池?”通过动态过滤器,用户可以指定他们想要的功能,而不需要想起具体型号、编码。

另外一个问题就是,搜索会妨碍用户寻找相关条目,如果用户找到他想要的确切条目,他就不会去看其他。而使用动态过滤器,用户就会看到相关的条目,包括一些功能更多或价格更低的物品。

给搜索引擎添加动态过滤器也是可的,这可以结合两种的有点。

总的来说,搜索引擎,特别是有复杂的功能和算法,可以提供很好的结果,但是它本身存在的问题使得它还不如一个经过精心设计的传统菜单。这就是为什么把搜索是作为一个备选方案,它并不是导航的核心。

搜索在用户生成内容 (user-generated content) 的本地应用能更好地工作,因为用户知道他们命名过、标记过的内容。

A - Z的索引 (A – Z index)

一个 A - Z 的索引包括网站上面的所有条目,并按字母顺序排列。

12-index

A - Z 的索引按字母顺序排列网站的所有内容。

建议

不要优先考虑 A - Z的索引。只列出所有的类别页面,比列出上千个独立页面要有用。

解释

A - Z的索引的好处在于大家都知道怎么按字母顺序来导航。但也存在3个问题。

第一,A - Z的索引很适合文字,不适用于图片和描述,有很多时候图片和描述是不可或缺。

第二,选取符合用户期望的词汇也不简单。由于地域、年代、术语的关系,可能会造成用户在错误的地方寻找想要的条目。唯一的变通方案就是,包含同义词。在传统导航中,同义词并不是一个大问题,因为用户不会同时面对大量选项。

第三,A-Z的索引,就像搜索那样,也会妨碍用户发现相关条目。例如,找“eggs and beans”(…蛋和豆),他们就只能得到蛋和豆。在传统导航里面,用户还会见到其他早餐,因为他们的导航线路是“早餐”->“蛋和豆”。

网站地图 (site maps)

网站地图通过主标题、副标题来展示网站的结构。

13-map-500

网站地图展示网站结构。

建议

sitemap.xml文档可以帮助搜索引擎索引索引网站。但是不应该把它视作导航手段。

解释

网站地图通常只包括文字,但是用户需要的是图标、图片、藐似来理解选项。网站地图可以包含这些元素,不过这会加剧另一个问题。网站地图通常会一次性显示所有内容,并不提供筛选。这就会影响用户浏览这些内容、获取信息。

标签 (tags)

标签,可以是关键字,并不需要有父集、子集类别。通常出现在文章末尾。

14-tags

通常会带上“More about”的标签

建议

基于标签的系统在调用额外信息方便做得很好,即便如此,仍没传统的基于类别系统做得好。

解释

在所有的备用导航中,标签最接近传统导航。毕竟,标签本质上就是创造元数据,信息架构的第一步,传统导航的基础。然而每篇文章都有一串标签,你很快就会得到成千上万个标签。

这就是为什么为标签分类这么重要。把这些标签整理成父类别、子类别,设计师就能把一大堆标签结构化成一组组相关的信息。包含这些类别的传统导航可以让用户跳过不想要的组别,直接浏览想要的信息。

很多以内容为基础的网站,会用混合导航 (hybrid navigation) 来代替传统的菜单。这些分类标签一般很粗略,依靠其他的导航模型,如外部和内部的搜索引擎、feeds、社交媒体链接。这类系统可以把用户带到想看的文章,但这很难让用户找到想要的一类文章。为了解决这个问题,一些设计师简单地把他们归结为一系列关键字——“Barack Obama,” “Democrats,” “Republicans,” “health care,” “shutdown.” 用户访问这些标签来浏览他们感兴趣的相关文章。

在传统的导航,用户会按相关的关键字来做导航——News → Politics → US → Domestic policy → Health care。在这个案例中,用户会对这篇文章很感兴趣,因为它论述了美国医保系统,而不是因为它提到“Barack Obama,” “Democrats,” “Republicans,” “shutdown.” 访问父类别就能查看相关文章。

15-tags-500

传统基于层级的菜单,是最精准的导航类型。

基于标签的系统,如果在社交媒体和搜索引擎的补充下,会变得十分有效。但是它作为一种导航方法,像钓鱼,而不是目的性强的搜索。同时,用户不一定依赖搜索引擎、外部链接来浏览网站。他们更倾向在首页寻找信息,所以经过设计的传统菜单还是最高效的方法。

结论

当你要选择恰当的导航方式,底线是很明确的:尽可能少选项,尽可能用简短的信息来解释它们,尽可能简洁的导航。

最大的问题在于是否或怎么使用备用的导航,作为传统导航的补充。

备用的方案不应该是高成本的。而它们本身又有缺点,以至于它们不能成为主导航系统。此外,用户一般不会使用这些备用方案,除非主导航不起作用。

所以,与其投入大量努力去改进、提升备用导航,还不如去设计一个好的主导航。这样就不需要次级导航的出现。

这篇文章的建议都在下面总结了一遍。

选用传统导航

一个竖直的导航栏并不会比横向的差,但他会分散对主内容的注意力,因为它和内容出现在同一块位置。一个横向导航栏更适合顶级类别,只要条目可以放在一行里面。如果一行不够的话,就使用下拉菜单或分页,而不是简单地把它弄成竖直导航。

如果文字就足以解释选项,常规下拉菜单就足够。把长的列表分割成次级类别,或者选用适应屏幕方向的多栏下拉菜单。

如果需要文字+图片,选用多栏下拉菜单。

如果需要文字+图片+描述,那就使用分页。

上面这些对主要、互斥可选类别都很有效。如果可选类别可以合并,那就使用附加在传统菜单上的动态过滤器。

选用备用导航

如果用户知道他们想找的具体条目,搜索或 A - Z 索引就很好用。然后它们都有碍于发现相关条目,不要把它们看得比传统导航更重要。

如果分类内容的成本不会太高的话,基于标签的系统是一个很好的方案。不过它需要社交媒体和搜索引擎的支援。

相关阅读:有效地简化导航-Part 1:信息架构

本文作者:@Anastasios Karafillis ? 翻译:@lyzhie ? 来自:smashingmagazine

 

已有0人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

我要评论 我要评论
  • 刚刚
  • 登录优界网 ×