实用程序导航:它如何影响用户体验设计
为了设计有效且用户友好的导航,我们不仅需要考虑如何将内容分组为结构合理的菜单以使用户能够轻松找到所需内容,还需要考虑如何设计所需的工具与网站互动
搜索栏,登录和注册表单,订阅,共享和打印按钮,购物车,上下文菜单以及允许用户切换语言或字体大小的工具是实用程序导航的典型示例。
与内容不严格相关并可以帮助用户执行不同操作的导航称为实用程序导航 ,它是用户体验设计中讨论不多但非常重要的方面。
设计它们并不像乍看起来那样容易,它需要考虑找出我们需要的元素,放置在哪里以及如何显示它们 ,以确保访问者可以快速找到它们并理解它们的工作原理。
实用程序导航如何影响UX
我们需要为他们提供适合我们业务目标的交互结构 ,引导用户完成客户旅程,为他们提供易于理解的选项,并为他们提供愉悦的用户体验。
在设计实用程序导航时,我们需要确定我们希望用户如何与我们的网站进行交互。
如果我们允许他们这样做,则客户满意度会提高,令满意的用户倾向于在网站上花费更多的时间和金钱。
首先, 他们需要能够快速执行所需的动作 。
这不是通常的解决方案,但是如果我们看看AirBnB令人难以置信的增长速度 ,那将是他们的理想选择。
AirBnB的主页遵循此UX原理,其顶部菜单仅包含实用程序工具。
AirBnB以实用程序为重点的主页还包含一个快速搜索栏,它是住宿租赁网站上的重要工具。
前4个主要菜单项针对通常访问AirBnB网站的4个主要角色 :有兴趣成为主持人(“成为主持人”)的人,想解决使用服务时发生的问题的人(“帮助”),新用户和旧用户(“注册”和“登录”)。
例如,在博客或新闻网站上包含“打印”视图可能会很有用,但相同的功能可能会在论坛面板或社交媒体网站上造成不必要的干扰。
在实用程序导航中需要哪些工具,哪些不取决于我们网站的性质。
其次, 用户不需要多余的工具,因为太多的杂物分散了注意力并减少了注意力。
这样,用户仅会遇到相关的实用工具,而不会受到他们本来不想使用的选项的困扰。
例如,《 华盛顿邮报 》在其单个帖子页面上显示的实用工具导航与首页上的显示有所不同。
这些内容巧妙地包含在固定的顶部栏中(搜索工具,“登录”和“订阅”),但用户浏览首页时不必考虑与单个帖子相关的选项,例如“阅读列表”页面或类别页面之一。
访客可能希望在整个站点范围内使用3个实用程序导航项。
访客不一定知道他们想要什么,因此我们始终需要向他们提供有关他们所拥有选择的信息。
第三, 用户需要快速了解他们可以在我们的网站上做什么 。
这个出色的智能实用程序导航示例向用户显示了他们不太可能会以一种不太引人注目且优雅的方式不太明显的选项。
如果您查看下面的屏幕截图,您会发现《纽约时报》向用户介绍了3种不同版本的可用性: 美国 , 国际和中文 ,并使他们能够在这三种版本之间快速切换 。
找到最好的地方
违反网页设计惯例被认为是不良的用户体验做法,对于实用程序导航尤其如此,在大多数情况下,实用程序导航更多是关于可用性而不是创造力。
在实用程序导航的典型放置位置,用户可以直观地找到这些工具,因为这是他们在大多数网站上已经习惯的。
遵循这些约定是一个好主意 ,因为这些约定 是大多数用户首先寻找实用工具的地方 。
这通常意味着(1)网站的右上角,以及(2)页脚的下部。
由于实用程序导航在大多数网站中仅次于基于内容的导航,因此通常将其放置在不太显眼但仍可见的区域。
此处唯一的解决方案是固定的额外页脚,其中包含2个实用程序项,设计师认为这是最重要的:“登录或注册”和“来自My Wire的最新”。
正如您在下面看到的, 路透社将其大多数实用工具都定位在这两个典型区域中,即网站的右上角和基于内容的导航下方的页脚下部。
有趣的是,额外的实用程序导航区域仍放置在页脚中,用户通常会在该页脚中寻找类似的工具,因此路透社的设计师在某种程度上颇具创意,但仍遵循网页设计惯例以保持可用性 。
建立逻辑结构
这是智能设计的魔力。
亚马逊的实用工具导航非常复杂,有很多选项, 但是如果我们经常使用亚马逊,情况就不会如此。
即使我们不想为用户提供很多选择,这也可能是一个挑战,但是Amazon将实用程序导航的复杂性提升到了一个新的水平。
如果我们想建立一个具有高转换率的网站,将实用工具分组到一个逻辑结构中至关重要。
他们不仅将实用程序导航放置在用户希望找到的实用工具的右上角,而且还将其分为三个主要组:(1)搜索栏,(2)与用户相关的信息(在搜索栏下方) ),以及(3)用户可以在网站上执行的操作。
只有一个组(“您的帐户”,“尝试Prime”,“购物篮”和“愿望清单”)的子菜单也具有合理的结构,并且不同的子菜单组被谨慎但可见的分隔符分开,以帮助用户快速找到他们想要的。
之所以如此聪明,是因为借助购物车或搜索图标之类的视觉提示,客户可以眨眼之间就决定要使用哪个组,然后就可以忽略其他两个组。
创建有效的视觉设计
通过使用稍微不同的设计来区分实用程序导航和基于内容的导航也是一个好主意。
建议为图标提供文本标签,使控件看起来像控件,并在视觉上强调最重要的动作。
有效的公用事业导航的视觉设计需要遵循著名的KISS原则(保持简单,愚蠢)。
设计师将实用程序导航放置在两个站点的最上方,并用不同于导航其余部分的颜色,蓝色背景的沃尔玛和蓝色字体的Etsy对其进行了突出显示。
在Walmart和Etsy的网站上可以找到有效的视觉设计的两个很好的例子。
这两个站点都使用不同的视觉设计元素来强调最重要的用户操作 ,沃尔玛使用黄色作为“搜索”和“登录”按钮,而Etsy为“登录”按钮提供了谨慎的蓝色边框,并且在“购物车”菜单上方包括一个灰色的购物车图标。 。
这是Etsy在其实用程序菜单中唯一使用图标的地方,而Walmart在每个项目旁边都显示一个图标,但仍然不要忘记在图标旁边包括必要的文本标签。