菜单 关闭

实用导航:它是什么以及如何设计manbetx官方网站手机版

通过 苏珊·法雷尔10月4日,二千零一十五

总结:实用程序导航由辅助操作和工具组成,比如接触,订阅,保存,登录,分享,更改视图,打印。这些活动极大地影响了网站访问者的满意度,用户体验,订婚。把公用事业放在人们期望和需要的地方。


用户工具

实用程序塑造了人们与组织的互动方式,网站,和内容。

网站提供的工具因其规模和任务而异,但许多实用导航区域包括:

  • 联系我们
  • 跟随我们
  • 现场切换器/语言工具
  • 登录/注册
  • 打印
  • 保存
  • 分享
  • 订阅
  • 更改字体大小的工具
  • 查看单页

虽然购物车是电子商务网站的核心功能(你可以说是这个定义特征)惯例要求在实用程序导航中也找到购物车图标。而且,我们都知道,遵循惯例是提高可用性和提高转换率的简单方法。搜索,另一个核心功能,在主要的公用设施区域也很常见。

即使大多数实用导航功能第二的本质上,在某些情况下,它们对人很重要。作为次要的,他们可以被降级到次要(不太突出)的视觉位置,只要这样做符合规则的Web约定,这样用户就可以在需要时快速找到实用程序。

安置

过去,实用程序导航中的项目已嵌入到内容区域中,加入侧边栏,或者卡在导航栏里。近年来,然而,许多工具都迁移到了网页的右上角。这个突出的位置使它们始终可见,而且,一般来说,更容易被注意到。我们经常看到用户在该区域寻找工具,尤其是对于诸如原木 在,搜索,我的 账户.

IBM主页
IBM:主页实用程序导航主要在顶部。中间有以下工具,和接触 底部连接。
IBM导航详细信息
IBM:右上角详细信息

信息网站(以及专门针对新闻和文章的网站部分)通常会拆分实用程序,manbetx官网手机登陆具有站点工具放在右上方,和文章工具内容区域的顶部中心。订阅工具(通讯,RSS社会化媒体,等)通常放置在底部导航区域。分享工具经常出现在文章的开头和/或结尾,manbetx官网手机登陆食谱,列表,以及其他人们最想分享的信息页面。

(一开始,将实用程序导航放在4个不同的区域可能会让人困惑,但请记住,只有信息架构专家才会从“实用导航”和其他形式的导航。对于普通用户,因此,用于不同事物的工具是不同的动物,可以在动物园的不同地方找到,而不会引起混乱。)

开放文化文章页面显示6个实用领域
开放文化:实用程序导航在页面上的典型位置进行分组。

一些组织试图隐藏汉堡菜单(3条水平线)下的实用程序导航或其他单击以显示元素,例如齿轮图标和滑出抽屉。这种整洁的屏幕方法可能会适得其反。,虽然,所以最好测试和监控,以确保您的访问者实际使用这些新的交互约定,并且您没有隐藏太多重要的工具。忽视设计原则是个坏主意,manbetx官方网站手机版即使大公司也在这样做。

建议

  • 提供带有文本标签的图标.人们喜欢图标,但是他们不理解他们,而且很难记住他们。另外,网站使用的图标不一致。不要依赖不会在触摸屏上显示的悬停文本解释(工具提示)。用词,或者是文字和图标,为了方便使用,理解,和翻译。研究人员发现,汉堡包菜单被贴上标签后会被更多地使用。菜单它周围有一个边界使它看起来更像一个按钮,例如。
  • 如果在导航图标下隐藏关键任务工具,则测试理解和交互(汉堡包,椭圆,齿轮,因为人们往往不会点击他们不理解的内容。这些新兴的约定在移动平台上最有效。,用户界面上几乎没有干扰。
  • 人们期望的团体公用事业:位于右上角或它们影响的内容旁边。可以将它们与其他导航结构混合使用,或者在底部导航区域放置一些辅助工具,因为人们在寻找他们需要的东西时往往会非常仔细地观察导航区域。
  • 使控件看起来像控件,并使用典型的名称.
  • 将两种类型的社交媒体图标分开。划分跟随我们分享这个,因为他们长得很像,但他们做的事情却截然不同。
  • 不要疯狂地使用共享工具和共享计数器,因为研究表明人们用自己的工具和方法做更多的分享。一些网站已经放弃了嵌入的社交媒体分享喜欢所有工具,因为视觉混乱和访客隐私的丧失不值得这些工具投入最少的精力。
  • 包括订阅工具.让读者更容易了解功能,作者,和饲料。
  • 跟随搜索工具最佳实践.
  • 不为区域设置使用标志除非只有几个区域设置共享同一种语言(所以大多数读者都会熟悉使用的标志)。在自己的字符集中使用语言的名称相反。
  • 登录注册彼此紧挨着.
  • 使用颜色和按钮强调最重要的操作并将目光引向实用区域。

实用导航示例

CSM在长页面上重复电子邮件订阅表单,但大多数公用事业都在正确的轨道上。
基督教科学监视器
CSM的右上角实用程序包括登录,寄存器,订阅
基督教科学监视器:右上角的细节
通用电气将实用导航放在右上方
通用电气(GE.com)
GE提供了一个区域设置选择器,以下工具:和股票行情显示
GE:右上角详图
《纽约时报》将实用程序导航放在页面的至少10个不同区域
《纽约时报》将实用程序导航放在页面的右侧。
《纽约时报》登入现场切换器,帮助,常见问题解答在右上角联系我们
《纽约时报》:右上角细节
Age(澳大利亚新闻网站)提供了接近内容和胖脚导航的实用程序。
时代:顶部和底部公用事业,订阅在中间
《华盛顿邮报》的顶级公用事业包括账户工具,订阅,现场切换器,以及浏览器主页帮助链接
华盛顿邮报:顶部
华盛顿邮报底部导航区包含以下工具和RSS工具,有帮助和联系信息
华盛顿邮报:底部
日本视频巨头,尼科尼科使用很多导航图标,全部用文本标记
尼科尼科的图标很可爱,但正是文本让他们理解,可译的,在某些情况下,可见的。

与访客一起测试

实用导航在其约定和布局方面变得越来越成熟。每当网络上出现这种情况,利用人们对流行网站的熟悉,跟随他们的领导是很有诱惑力的。最后,虽然,最有用的解决方案将获胜,因此,测试以确保您的导航对您的用户有效,并且您不会隐藏他们需要的工具。

我们提供几门课程用户测试航行,和视觉设计manbetx官方网站手机版向…计数万博官网manbetx下载UX认证.