贵阳网站设计:实用导航如何影响用户体验设计-极简慕枫

贵阳网站设计:实用导航如何影响用户体验设计

2019-07-23

为了设计一个有效的和用户友好的导航,我们不仅需要考虑如何将我们的内容分组到结构良好的菜单中。使用户能够轻松地找到他们想要的东西,也可以了解到如何设计与站点交互所需的工具。贵阳网站设计

不严格地与内容相关并帮助用户执行不同操作的导航称为实用导航,这是一个讨论较少但非常重要的方面用户体验设计..搜索栏、登录和注册表单、订阅、共享和打印按钮、购物车、上下文菜单和允许用户切换语言或字体大小的工具是实用导航的典型示例。

设计它们并不像乍看上去那么容易,它需要考虑找出我们需要的元素,放置在哪里,以及如何显示它们。确保我们的访客能迅速找到他们并了解他们是如何工作的。

实用程序导航对UX的影响

当我们设计实用导航时,我们需要决定如何让用户与我们的站点交互。我们需要为他们提供一个相互作用结构这符合我们的业务目标,带领用户通过客户之旅,给他们简单易懂的选择,并为他们提供愉快的用户体验。

首先,他们需要能够快速执行他们想要的行动。..如果我们让他们这么做,顾客满意将会增长,并且满意的用户倾向于花更多的时间和更多的钱在网站上。

的主页爱彼迎遵循这一UX原则,其顶部菜单只包含实用工具。这不是通常的解决办法,但如果我们看看Airbnb的不可思议之处增长速率,这是他们的最佳选择。

4个顶部菜单项的目标是4个主菜单项。人物角色谁通常访问Airbnb的网站:那些有兴趣成为一个主机(“成为一个主机”),谁想解决一个问题发生时,他们使用该服务(“帮助”),新的和返回的用户(“注册”和“登录”)。Airbnb的以实用程序为重点的主页还包含一个快速搜索栏,这是一个住宿租赁网站上的重要工具。

贵阳网站设计
第二,用户不需要多余的实用程序,因为太多杂乱会分散注意力和减少注意力。什么工具是必要的,在我们的实用导航,什么不是取决于我们的网站的性质。例如,在博客或新闻网站上添加打印视图是有用的,但同样的功能可能会不必要地分散论坛板或社交媒体网站的注意力。

华盛顿邮报例如,在其单个POST页面上显示实用程序导航的方式与主页上的不同。这样,用户只会遇到相关的实用工具,而不会被他们不想使用的选项所困扰。贵阳网站设计

有3个实用工具导航项目,访问者可能希望使用网站范围内。这些都巧妙地包含在固定的顶部栏(搜索工具、“登录”和“订阅”)中,但是用户在浏览主页或类别页面时不需要考虑与单个帖子相关的选项,比如“阅读列表”。

阅读更多:预期设计-当选择从决策中移除时

贵阳网站设计

第三,用户需要快速了解他们可以在我们的网站上做些什么。..访问者不一定知道他们想要什么,所以我们总是需要为他们提供关于他们所拥有的选择的信息。

如果你看看下面的截图,你会发现“纽约时报”向用户通报3种不同版本的可用性:美籍, 国际,和中国的,中国人的,汉语,同时也使他们能够在三个人之间快速切换..这个智能实用导航的好例子向用户展示了他们自己可能找不到的不那么明显的选项,以一种非遮遮掩掩和优雅的方式。

贵阳网站设计

找到最好的地方

在实用导航中有一些典型的位置,用户可以直观地查找这些工具,因为这是他们在大多数网站上已经习惯的。打破网页设计惯例被认为是糟糕的用户体验实践,尤其是实用导航,在大多数情况下,更多的是关于可用性而不是创造性。

由于在大多数网站中,实用导航是仅次于基于内容的导航,所以它经常被放置在不太突出但仍然可见的区域。这通常意味着(1)右上角的网站,(2)较低的部分页脚。它是遵循这些约定是个好主意,如这里是大多数用户首先寻找实用工具的地方。.

如你所见,路透社将其大部分实用工具定位到这两个典型区域,即站点右上角和基于内容的导航下面的页脚下部。唯一的解决方案是固定的额外页脚与两个实用程序项目,设计师认为是最重要的:“登录或注册”和“最新从我的电线”。贵阳网站设计

有趣的是,额外的实用程序导航区域仍然放置在一种页脚中,用户通常会在其中查找类似的工具,因此路透社的设计者在某种程度上具有创造性仍然遵循web设计惯例来保持可用性。.

贵阳网站设计
贵阳网站设计

构建逻辑结构

如果我们想要建立一个高转换率的站点,将实用工具分组到一个逻辑结构中是至关重要的。这可能是一个挑战,即使我们不想为用户提供许多选项,但是亚马逊将实用导航的复杂性提升到下一个层次。Amazon有一个非常复杂的实用导航,有许多选项,但如果我们经常使用亚马逊,它就不会出现。这就是智能设计的魔力。

他们不仅在用户期望找到的右上角放置实用程序导航,而且还将其划分为三个主要组:(1)搜索栏,(2)与用户相关的信息(搜索栏下方),(3)用户可以在站点上执行的操作。

这很聪明,因为由于购物车或搜索图标等视觉暗示,客户可以在眨眼之间决定要使用哪一组,从那时起他们就可以忽略另外两个组。只有一个组(“您的帐户”、“尝试Prime”、“篮”和“愿望列表”)具有逻辑结构的子菜单,不同的子菜单组被离散但可见的分隔符划分,以帮助用户快速找到他们想要的内容。

贵阳网站设计

创造一个有效的视觉设计

高效实用导航的可视化设计需要遵循著名的设计方法。原则(保持简单,愚蠢)。它是推荐若要为图标提供文本标签,请使控件看起来像控件,并在视觉上强调最重要的操作。通过使用稍微不同的设计,区分实用程序和基于内容的导航也是一个好主意。

有效的视觉设计有两个很好的例子。沃尔玛亚细亚网站。设计师将实用工具导航放在两个网站的最上面,并用与导航其他部分不同的颜色突出显示,沃尔玛的蓝色背景和Etsy的蓝色字体。

两个站点强调具有不同视觉设计元素的最重要的用户操作,沃尔玛使用黄色的搜索和在按钮中的标志,而Etsy给一个谨慎的蓝色边框的登录按钮,并包括一个灰色购物车图标之上的购物车菜单。

这是Etsy在其实用菜单中使用图标的唯一地方,而Walmart则在每个项目旁边显示一个图标,但仍然不会忘记在图标旁边包含必要的文本标签。

贵阳网站设计

贵阳网站设计