User Tools

Utilities shape how people interact with your organization, website, and content.

网站提供的工具因其大小和使命而有所不同,但许多公用事业导航区域包括:

  • 联系us
  • 跟着我们
  • 区域设置切换器/语言工具
  • 登录/注册
  • 打印
  • Save
  • Share
  • Subscribe
  • Tools for changing font size
  • 查看单个页面

虽然shopping cart is a core feature of e-commerce sites(you could say that it’s定义功能),会议呼吁购物车图标在实用程序导航中找到。而且,众所周知,following conventionsis an easy way to improve usability and increase conversion rates.搜索,另一个核心特征,也经常在主要公用事业区域发现。

即使大多数利用性导航功能也是如此中学本质上,在某些情况下,他们对人们很重要。次要,它们可以将其降级到次要(不太突出的)视觉展示位置,只要这符合统治Web约定,使用户可以在需要时快速找到实用程序。

放置

In the past, the items in the utility navigation have been embedded in the content area, put in a sidebar, or stuck in a navigation bar. In recent years, however, many of the tools have migrated to the top-right corner of web pages. This prominent placement makes them always visible, and, in general, easier to notice. We often see users looking in that area for tools, especially for items such asLog正在搜索,我的Account

IBM主页
IBM: Homepage utility navigation is found mainly at the top, with following tools in the middle, and联系链接在底部。
IBM navigation detail
IBM: Top-right detail

Informational websites (and site sections dedicated to news and articles) often split utilities, withsitewide toolsplaced top-right, and文章工具内容区域的顶级中心。Subscribetools (newsletters, RSS, social media, etc.) are often placed in bottom navigation areas.Sharing工具经常出现在文章,食谱,清单和其他人最有可能分享的信息页面的开始和/或结尾。manbetx官网手机登陆

(At first, it might seem confusing to place utility navigation in 4 different areas, but remember that it’s only information architecture geeks who think of these things in terms of “utility navigation” vs. other forms of navigation. To the average user, tools that are used for different things are therefore different beasts and can be found in different parts of the zoo without causing confusion.)

Open Culture article page shows 6 utility areas
Open Culture: Utility navigation is grouped in typical places on the page.

Some organizations try to hide utility navigation under hamburger menus (3 horizontal lines) or other click-to-display elements, such as gear icons and slide-out drawers.This tidy-screen approach can backfire那though, so it’s best to test and monitor to make sure your visitors actually use these new interaction conventions and that you haven’t hidden important tools too well.即使大公司正在为此,忽略设计原则也是一个坏主意。

建议书

  • Provide icons with text labels。人们喜欢图标,但他们不明白他们并难以记住它们。加上网站使用不一致的图标。不要依赖在触摸屏上不会显示的悬停文本解释(工具提示)。使用单词,或单词和图标,以获得良好的访问,理解和翻译。研究人员发现汉堡包菜单在标记时使用了更多Menu和has a border around it to make it look more like a button, for example.
  • 如果您在导航图标下隐藏关键任务工具,请测试理解和互动(hamburgers, ellipses, gears, etc.) because people tend not to click on what they don’t understand.这些新兴会议在移动平台上工作那where there is very little distraction in the user interface.
  • 组utilities where people expect them:无论是在右上角还是它们影响的内容旁边。可以将它们与其他导航结构混合或放入底部导航区域中的一些二级工具,因为人们倾向于在寻找所需的事情时密切地看待导航区域。
  • Make controls look like controls, and use typical names for them
  • 分开两种类型的社交媒体图标。划分跟着我们from the分享这个,因为他们往往是相似的,但他们做了非常不同的事情。
  • 不要与共享工具和共享计数器一起疯狂,因为research showspeople do more sharing with their own tools and methods. Some websites have dropped embedded social-mediaShareLike工具完全,因为视觉杂乱和访客隐私的损失不值得最少的参与这些工具所获得的。
  • 包括订阅工具。读者可以轻松遵循功能,作者和饲料。
  • 跟随search-tool best practices
  • Don’t use flags for locales除非只有几个分享相同语言的语言环境(因此大多数读者使用的标志将是熟悉的)。Use the name of the language in its own character set代替。
  • Put登录报名彼此相邻
  • 使用颜色和按钮来强调最重要的行为并将眼睛吸引到公用事业区域。

公用事业导航的例子

CSM repeats the email subscription form on long pages, but most utilities are in the right rail.
基督教科学显示器
CSM's top-right utilities include Log In, Register, and Subscribe
基督教科学监视器:右上方细节
GE将实用程序导航右上角
通用电气(GE.com)
GE provides a locale selector, following tools, and stock ticker display
GE:右上角细节
纽约时报将公用事业导航放入页面的至少10个不同区域
New York Times puts utility navigation on the right side of the page.
New York Times puts Log In, locale switcher, Help, FAQ, and Contact Us in the top-right corner
New York Times: Top-right detail
The Age (Australian news site) provides utilities close to content and in the fat-footer navigation
年龄:顶级和底部公用事业,中间的订阅
华盛顿邮政的顶级实用程序包括帐户工具,订阅,区域设置切换器和浏览器主页帮助链接
华盛顿邮政:顶部
华盛顿邮政底部导航区包含以下和RSS工具,提供帮助和联系信息
Washington Post: Bottom
日本视频巨头,Niconico使用大量的导航图标,所有导航图标都标有文本
Niconico的图标是可爱的,但这是使它们可理解,可翻译,在某些情况下可见的文本。

与您的访客进行测试

公用事业导航在其惯例和安置方面变得更加成熟。每当在网络上发生这种情况时,通过遵循其领导,利用人们熟悉人们的熟悉程度令人诱人。尽管如此,最具可用的解决方案将获胜,因此测试以确保您的导航为您的用户工作,而且您无法隐藏他们需要的工具。

We offer several courses onuser testingnavigation那和视觉设计that count towardUX认证