实际可用性
设计应用程序导航的策略
Dr. Charles Kreitzberg and Ambrose Little
内容
认知的视图
导航是一个隐喻
为什么获取混淆用户
多个页面组成逻辑分区
创建框架
使用导航的辅助功能
需要 Aways
对本软件视图
复制，大专家
卡排序
UX 设计模式
清除入口点
实现
控件
测试、 跟踪，和调整
在摘要
认知的视图
Dr.Watson Charles B Kreitzberg
获取导航权限是设计的最重要的方面之一。导航是的框架屏幕、 交互和视觉外观设计的。最基本的 axiom 是可用性的一个应该使与软件可能，一样容易使用户可以重点首先将它们置于软件的任务的交互。在范围内，导航混乱需要计算出的用户的注意，将受影响的可用性。
导航是一个隐喻
术语"导航"传达旅行了解从位置位置。它建议有时遵循点和指导 （和限制） 如何获取有的基本框架获得点的路径。但，尽管我们谈论免费软件产品中导航，永远不会实际我们任意位置。我们保持在屏幕中的更改与它我们交互响应图像时的一个位置。因此"导航"实际上是一个隐喻，精神游戏我们播放将我们的脑海周围设计。
在大多数人认为有关导航，它们重点菜单方式移动从屏幕到屏幕。但它是很可能编写功能强大的程序围绕单个的屏幕。例如考虑 Microsoft Word。尽管它的广泛且功能强大功能几乎整个程序构建一个单个的屏幕如在如 图 1 所示。
图 1 Deconstructing Word 它 ’s 全部在一个屏幕
正在处理的文档是在屏幕的设计中的中心。工具从功能区中选择应用于该文档，并且更改其内容或外观。当一个工具需要复杂的交互时，它通常弹出子窗口在文档上。子窗口可能模式的一个，则用户必须完成交互并返回到文档之前关闭子窗口例如，插入图片命令。这可能是一个向导，引导用户完成一个过程。或者，子窗口可能无类似同义词库命令，在这种情况下停靠在端当，它可以打开工作时仍然用户文档。
一个简单的好处，一个屏幕导航方法是用户永远不会成为 disoriented。该文档将一直在普通视图中所有时间。用户仍需要了解哪里可以找到这些工具以及它们如何工作，但将永远不会获得 cyberspace 中丢失或想知道其文档出错原因。除了在文字处理程序中几乎通用使用，一屏模式已用于成功图形程序 （如 Microsoft 画图程序和电子表格程序，如 Microsoft Excel。Excel 演示通过用户在该关联的选项卡，可以 图 2 的左下角上看到的上单击时切换活动文档中维护的多个文档的一个屏幕的隐喻一个强大的方法。
图 2 Excel 参阅使用单个的屏幕
没有大量单个屏幕隐喻的简单性中的值。但是，大多数程序围绕多个屏幕 （或页） 的隐喻。一旦您决定设计多个页面周围在表示层，您可以生成大量的混淆。因观察多个可用性测试，我已经是实现每次您执行到新页的用户，运行 disorienting 它们的风险。
为什么获取混淆用户
如果您认为有关该，并不意外 disorienting 导航从屏幕到屏幕。disorientation 意味着用户失去方向。查看 图 3 中两个用户。Bob 正在使用围绕单个的屏幕而设计的程序。Sally 正在使用多个屏幕围绕设计的程序。
查看此关系图，很清楚 Sally 有困难的认知任务。不仅她没有考虑用户的以及在她需要转，但开发内部的指南的复杂过程进一步复杂 Sally 一次将只看到一个屏幕的事实。缺少该地形的一个鸟瞰视图，她需要她了解不熟悉软件的同时一起拼凑她精神模型。这是许多额外的工作，并且它可能导致陡的学习曲线。
图 3 开始混淆的用户
该站点或产品的导航提供以容纳整个设计的表示层。如果您在收到右将就一长方法以提高产品的可用性。当您开始设计导航，请考虑下列建议：
尽可能功能单个页导航
单页比喻是简单和强大。置于页的更多的功能可以提高可用性了是许多提供，以便用户不混淆或 overwhelmed 您注意与屏幕设计。有关单个屏幕设计强大是用户不丢失上下文时它们所查看新的信息。
因 Web，频率与搜索引擎导致用户的内部页，限制搜索引擎优化 SEO 技术，和 clunky 页重绘 HTML 和其原始的 UI 控件的特征的文档方向已成为通用创建很多网页作为标准设计实践。没有顺序没关系大量页面，并可以任意位置，删除该用户的情况下，但它们是极少。免费链接的操作和 World Wide Web 的功能是好以进行浏览的但不会不转换很好地流所涉及的任务中的情况下。
无法实现方式 disorienting 也可以是通常将用户移动页中导致设计比所需的更多页。我已经有告诉我可用性测试它们直接转到搜索框查找他们需要需，而不是尝试采用与网站的导航页的用户。
现在我们可以使用复杂的 UI 控件创建丰富的网页。选项卡、 carousels、 accordions、 工具提示和子 Windows 随时可并且可以减少所需的屏幕到屏幕导航。
认真执行的一个设计做法是避免屏幕到屏幕导航，当我可以。一个简单的示例将为什么显示。图 4 显示了典型的 Web 导航设计。
图 4 典型的 Web 导航
以下公司有一系列为第一页上的列表显示的产品。单击所需的产品名称将产品信息页用户从其他可以返回产品列表或转到第三个页然后查看该担保。
现在让我们看一下导航的单个屏幕版本 （请参见 图 5 ）。在此版本中三个产品提供一个选项卡控件中。单击选项卡上显示产品说明。如果用户单击"保证信息"链接，模式弹出式窗口显示信息。当用户关闭弹出窗口时，他或她位于回初始页。
图 5 A 单屏幕导航模型
当然，选项卡未缩放和如果需要处理很多的选择，以便您可以考虑在列表视图控件或像一轮播更令人兴奋控件。只从该的图表可以看到如何更加简单，第二个导航模型。并且具有优点可以有许多产品选项卡上的链接并为每个显示在单独窗口 （或向导）。您始终回到通过一次的单击与基准，它是获得显示为时弹出窗口处于同一产品。用户会发现得更简单因为它维护上下文。用户永远不会将要获取详细信息页。
当然，我所设计的产品的大多数具有多个页面。别是忘有适合单个页面的功能的数量的限制。并谨慎使用多个页面可以简化用户界面的有意义的方式分组功能。该技巧就是意识到每当您将用户带到新页面您风险丢失上下文以及 disorienting 在的用户，因此我使用它们尽量少并仔细。我认为硬盘分段页面右侧的方式。
多个页面组成逻辑分区
我导航 nightmare 是 humble 的 HTML 链接。（很实际上我的同事 Ben Shneiderman 和 I 帮助 perpetrate 与 HyperTies，pre-Web 超文本浏览器的 nightmare，但这一篇文章另一次) 每当用户在单击一个的链接它们被传输到新页。不仔细设计，导航可以轻松地就像在目录林中丢失。
在设计多页产品时认为硬盘有关如何选择聚合到节的页面。图 6 显示了典型的导航设计页面的组到各部分。
图 6 一个典型的导航设计
主菜单是一系列的选项卡以主页页面和提供三个部分。输入一个节时, 部分菜单将允许您导航节中的页。内容区域或和中，我已显示 multistate 的内容控件。第 1 节具有选项卡控件并且第 2 节的 accordion 控制。
这样一种设计可以管理大量的页。是例如如果您有七个的主菜单部分每节有七个的页面并且每一页有七个窗格 multistate 内容控件，您将有效地将控制 73 或 343 唯一页。和因为无限数量的弹出窗口可以显示每个内容窗格，可以管理大量计算机房地产。如果需要更多的页，您可以扩展使用幻灯片出和级联菜单的菜单。
其中，您需要特别小心是在情况下，如果您发现需要创建外菜单导航。很频繁吸引力要植入到其他位置的用户的页的内容中的链接或按钮。我曾看到过它产生问题的次数。尽可能，保持导航菜单，并使用嵌入式的链接或按钮更改控件的状态，或者创建一个弹出窗口。
导航模型 图 6 所示有一个隐式的层次结构。您可以清楚地看到，如果图表路径。
从 图 7 中图表，可以看到水平导航，从一节的节和节中的导航。有几个问题需要解决的。
图 7 节之间的导航
- 导航从 section 节时，您传递？这取决于您要实现的流程。在大多数情况下最令人困惑的选项是位于部分 （是例如页 A 在关系图中） 的第一页上的用户会话的第一个的访问。可以设计该页面作为一个 entryway 节 （这是一个节 Home"页）。然后我会保留侧栏菜单的状态，因此如果用户保留部分，并返回，他或她可在同一页上。
- What If 需要从 （例如） 页 B 返回到页面 G？
因为如果您断开导航模型将得到混淆用户，则应非常小心。向第一个问题是，原因需要进行两个内部页之间跳。如果用户需要获得这两部分来完成任务，设计可能需要调整。拆分两个内部页之间用于任务是合适效率很低。
我最近运行到这与将数据文件和在日志文件写入的文件传输程序。因为我是在其中映射的磁盘号更改每日因入和签出连接的 USB 驱动器环境中，我需要每次我使用该程序重置磁盘号。我必须转到"部分 A"设置数据文件的位置和设置在日志文件位置的"部分 B"。它是非常不方便和时间。
这样的情况解决方案是放在单个页上的所有磁盘信息，或者，以便用户可以填写它没有导航到第二页如果无法做到的生成一个"卷影复制"第二个磁盘的在弹出式窗口中。
如果是只是一项便利，必须决定如果增加的复杂性是值得的单击要保存用户。这取决于频率用户需要对差值。如果很偶尔会我想去并更简单的导航，并额外的鼠标单击。如果很频繁我会考虑使用水平菜单栏中的页面的一个下拉菜单，以便用户可以找到在一个步骤中内部页。我无法将在其中我想只是传输到另一个内部页用户的情况。星形 Trek 上很好的工作但往往非常 disorienting 软件中。
创建框架
我要重点最后一个区域是可视化设计可以支持易于导航的方式。首先，考虑页面框架所需的元素，显示持续从页面的元素。使面向的用户的最佳方式之一是在可预测的位置中有一致的元素。这些成为 Visual 位置为用户。
大多数的框架的一个重要元素就是页标题。不仅会帮助用户与名称关联页，而且它便于与支持人员讨论。
请考虑颜色以及代码。在前面的示例我用于为颜色代码节 1 的绿色开始部分的浅蓝色和橙色第 2 部分。这些颜色帮助用户了解他或她的部分。我还使用形状和纹理 Visual 设计中支持 color-Blind 的用户。
使用导航的辅助功能
值得包括两个常见的导航帮助是痕迹导航和站点地图。只是不要依赖它们以解决设计问题。许多用户不会查看或了解痕迹导航。但对于那些执行，它们是有用的帮助。可用性专家 Jakob Nielsen 网站上说明越来越多的用户依靠痕迹导航他 useit.com。痕迹导航应反映在导航层次结构，不其历史记录页访问，他还会使的点 （与我完全同意）。
站点地图可以帮助用户了解在导航的版式的但是很少使用。但是，它们应该是导航的包含，因为它们有助于用户获得的所需的鸟瞰视图。只是不希望他们补偿设计问题。
可用性社区中位置笑话之一是每个可用性问题具有相同的应答："它决定"。 遗憾的是的是导航也如此。有几个设计规则，； 大多数都是指导原则和试探法。这就是为什么如此重要研究用户，并了解设计用户界面之前使用的上下文的。
与记住该 caveat，下面是一些建议的最佳做法：
- 最小化所需了解并决定导航选项付出的精力。在轻松需要使用用户界面更好的可用性。
- 使时可以使用单屏幕设计。使用格式、 多窗格的控件、 弹出窗口和向导启用用户尽可能执行的任务，而无需采用横向导航。
- 创建多个页面，请将它们合并到部分。使简单跳从 section 节与主导航控件，并使用辅助控件部分中导航。尽量不要 Go 如果能避免更深入。在简单导航、 更快速的用户将获得熟练程度。
- 请确保从 Visual 角度始终显示关键元素 （如菜单、 标题，和显示所有页的其他信息。用户应具有意义屏幕的某些元素稳定，并且能够使用它们来保持的方向。
- 非常谨慎传输的内部页的另一个用户从一节的内部页的导航元素。可以完成，但易于 disorient 用户。
- 使用痕迹导航和网站图的辅助导航帮助，但不要依赖它们。
- 7.always 考虑未来的扩展。如果您希望在以后合并新功能，决定在开始产品如何您将会扩展以无缝合并新的屏幕导航。
获取导航权限是产品的可实现以确保您的可用性，最重要功能之一。花时间来获取权限，可确认您的设计的可用性测试，而您将看到所需的结果。
对本软件视图
Ambrose Little
导航是大多数软件朋友们授予，获得和为大多数的设计问题，我们往往只是查看哪些其他人正在按照其潜在顾客这些事情之一。我们 imperatives 经理）"使其看起来像 Office"或"使其看起来像 Amazon.com"—but 我认为作为开发人员专注于使程序工作，我们不备用真正考虑设计多长时间。
一些我们包括幸运将实际信息架构师使用我们 （或其他 jack-of-all-trades UX 朋友们）。但即使很多不执行具有专业知识或背景有时我们需要处理作为它们的设计的一部分的导航的图形设计器。令人欣慰的是，有多好资源存在解决的导航，粘滞问题的并且我想介绍几个此处。
复制，大专家
首先，并不总是遵循行业领先正在执行不正确。还有很可能它们实际已花费大量时间和资源的信息体系结构使其右，并因此设置基调哪些用户已进入预期。在一个的意义上他们创建规则，并设置标准、 从而更改有关方式软件的期望应该工作。
也就是说，为 Charlie 点出，则更最好真正了解您的解决方案和处理的元素使用的用户。这些元素包括在您的域中的信息和网站或对象的内容。核心属于了解用户是了解其目标、 用于与您的解决方案进行交互，如果您收到该权限，将进入长方式向帮助您正确地构建应用程序。
可以从在很大的人多了解，但不希望盲目地执行，因为其访问群体可能不同。也许有一个更小的访问群体或者也许您的内容或产品为 theirs 太不同。最佳示例我见过这种差异的之一是尝试模拟 Microsoft Office 功能区 （请参见 图 8 ）。
图 8 Microsoft Word 功能区 (Part of Office Fluent 用户界面) （英文）
为 Office UI 方案行中最新，功能区往往 mimicked 由许多开发人员。问题是功能区似乎放大错误导航设计。如果您不佳执行标准菜单、 选项卡和其他控件，您可以获得离开错误导航设计，但如果影响最功能区时，那么破坏该隐喻。
选项卡应基于用户目标和任务。因此还有一个选项卡用于插入元素、 页面布局选项卡、 检查文档的一个选项卡。然后，选项卡中, 有的命令 （如剪贴板和 图 8 中的字体） 组，其中包括再次用户集中并分组基于相关的任务和操作。功能区使用基于使用情况的数据 （与较小的剪切和复制大粘贴图标），以帮助的用户更多方便地发现和使用更常见的函数的各种规模的按钮。
以是短了大量工作需要设计有效的功能区的样式元素。因此，您应该不调整其盲目地为应用程序作为导航机制。
因此，模拟其他应用程序之前，您必须决定是否它们的设计意义在您的情况下。是否有相同的比例？(Amazon.com 和 Netflix 使用基于许多采用正确的比例好一些的用户数据的建议）。 Office 使用大量的从功能区的 multilayered 组织受益的命令，但如果只需命令的少数典型菜单为可能更好。
是否有相同类型的内容？内容适用于像 Amazon 可能不是正确的选择的环境信息站点的电子商务站点。应用程序不工作所适用的信息的站点。Charlie 讨论当用户试图完成一个的任务在非正式导航模型常见 Web 上可能不是相应，希望帮助用户实现其目标、 不分散注意力，或者关闭兔子漏洞导致它们。
因此，不会的让您？不要失望 ！即使您没有 UX 专家查阅，则一些您可以使用以使您导航更好的方法。一种技术称为卡排序。
卡排序
卡排序是最好是从您目标观众参与帮助您组织您的内容 （ 图 9 显示一个示例） 中获取用户，一个方法。它带有一些相似之处其他利益相关者的参与技术如类负责协作 (CRC) 卡 （一个面向对象的设计或 OOD，技术） 用户案例，以及类似，它依赖到利益相关者积极地参与解决方案设计，并使用卡。通常，它用于组织 Web 站点上的信息，但这些技术可用于帮助组织应用程序中的命令。
图 9 示例的卡排序从 Usability.gov/ design/cardsort.html
则一个用户中心而不是解决方案中心 （或域中心） 方法并因此有助于发现用户实际上与解决方案的交互有意义的设计。我不会进入深度在实际的方法。可以地说，它包括对分类您的材料的用户。有很多资源免费联机 （如usability.gov/design/cardsort.html)，并且实际上有软件程序包以如 OptimalSort 帮助它，大量。但在使用软件之前考虑索引卡方法。专家同意在一起获取真正的朋友们，和使用实际卡将通常产生很好的结果。
UX 设计模式
可能在 UX 设计最佳的资源之一就是模式。不有许多用于从用于帮助将自己，使用关于搜索结果的方面 （元数据） 积极地将它们，筛选到 dives 到在熟悉的模式对话框的模式面板的 Faceted 导航的用户的痕迹导航，设计模式和大量内容之间的任何意外。例如， 图 10 显示了清除入口点图案的采样。
清除入口点
不可能明显哪些人可以或应执行时启动应用程序或访问站点。您需要提供用户清除的入口点一组到应用程序或基于最常见的任务或目标网站。
图 10 清除条目 Points 主示例
不明确的入口点，新的或少的用户可以认为丢失打开应用程序或网站时立即。通过指导清除的入口点的人士，您采取弄清内容可以或应执行关闭的负担。
只有在还或可以发现一组最常见的任务或目标大段的目标观众的这种模式才有效。如果您不能这样，模式实际上因为它获取方式中并不真正指南用户他们想要做什么导致更多的问题。
很重要大多数用户是新的或少的用户，因为，除非相关任务是只相关的任务，普通用户可能会清除入口点的查找得到的方式。
不要将 deceived 到认为它是很明显人们应采取哪些。多主页是的全部内容背后组织必须提供的 smorgasbord，，用户是混淆的左和不知道如何操作或哪里。清除的入口点消除混淆。
实现
清除的入口点模式技巧是成功地识别前的任务或目标。如果使用用户为中心设计，则应已确定作为主要目标，为您的用户的任务。使用该信息来设计您清除的入口点。
如果您没有按照用户为中心设计，需要进行一些研究中，可能同时在内部和外部，以确定用户的关键任务和目标。如果在应用程序或站点已存在，则查看使用日志将是很好的帮助。您可以也通常说明关键任务，甚至是来自功能规范，但您应验证的用户或在最少业务利益相关者以确保您选择的任务是行与密钥应用程序或站点提供的目标。
一旦您已经 nailed 关闭您的关键任务，应考虑所需的显示方式。如果您有多个少数，您应考虑如何可能直观，分组它们但记住这不应在主导航的副本，它确实必须表示关键任务。
在您的应用程序或网站的开始视图中显示任务非常清楚地和集中。应确保以词组这些方面的任务用户正在尝试完成，而不是使用品牌工具名称类似的术语或用户不熟悉的其他术语。如果可以进行通信是理想之选的几个的单词中任务，但可能应该补充名称 abundantly 使得很有帮助说明清除用户可以完成哪些通过选择该任务或目标。
请确保您不创建通过该用户被突然删除陷阱门到您的解决方案结构的中间位置。到达通过选择该任务的目标应清楚地连接到任务 ； 这是一个很好的开始，到一个的向导，但它不必是基于向导的只需进行强连接所选任务之间，并且查看用户到达通过选择该任务。
如果有用户可以直接跳转的子任务，您可以考虑让那些选择主任务时会显示。但是，记住这不应完整菜单或导航方案。
很好的做法以可视方式强调通过不常见那些自动绘制到它们的用户的最常见的任务。此主入口点视图应不能用通常的导航结构的辅助工具 / 信息。隐藏这些立即将焦点入口点。
如果您认为有关该，您看到控件是可重用代码规范化的模式通常只需实现。如果您已尝试执行任何 Silverlight 开发，尤其是 Silverlight 1.0 （或 heavy-duty 桌面的用户界面开发） 您了可能遇到的为您做些什么控件的更高版本感谢。无需手动绘制并处理甚至文本框的基本交互很不容易。
此外，尤其是平台控件 （如在 HTML 规范中的控件创建隐式的标准用户界面模式规则。有很多多的项选择其他选项，但 HTML SELECT 控件已在 Web 上的该 de facto 控件以便将该任务。Rich Internet 的应用程序 (RIA) 平台选项有一半，但毫无疑问这些控件提供在框将最终形成约定将当然，会影响之前的平台控件使用）。有多个更复杂的、 通常有用模式可以在自定义的控件中实现或您可以利用控件从第三方供应商，如 Infragistics 之一。
用于导航，当然，最常见的控件是该超链接为 Charlie 指出需要面向任务的应用程序中使用明智地和甚至谨慎。有简化的类似项，在的组和一个隐式方法指示用户看 （通过当前选定的选项卡） 的内容之间的导航分组的选项卡控件。有 Web 和桌面平台上的飞出菜单控件： 如果您使用这些，小心转不超过三个深度层 （最好是两)，因为花费好一些使用它们 （如在用户尝试 desperately 快速移动侧向从一个菜单到其他） 的鼠标行动不便，这可能涉及为一个意外 Live 的 techies 和向菜单。有标记便于该模式的实现的群控件，页面控制该模式，帮助那些，等的对话框控件的帮助。
tagging 和标记云彩都可以很好的方法创建一个灵活的组织，以帮助用户查找出它们正在查找的内容。它们可以帮助更正式的组织方案，如菜单。图 11 显示了一个示例。
.gif)
图 11 从 Flickr 的标记群
请记住，考虑您选择的控件 （图案）。不要只是使用它因为它是最简单或因为您是非常熟悉它。请参阅在模式目录，以更好地了解的当使用的模式和您可以也使用模式帮助选择指导的实现的 （如果有的话）。
测试、 跟踪，和调整
无论您设计哪些导航和组织方案，将错误至少部分。即使它是右现在，很可能需要将随着时间的推移更改。因此，您需要投资 Charlie 说过，进行可伸缩的导航设计方案，以及灵活的一个。
您不想定期对您的导航结构中进行重大的更改，但应调整它们基于实际使用情况数据和可用性测试。可用性测试是一个不错的选择，因为可以释放应用程序前跟踪问题，； 只是一定要留出空间执行以及根据结果的更改在项目计划中。
如果使用数据 （如 Web 日志或跟踪功能的使用） 用于帮助您了解用户如何使用现有的设计，并相应地进行更改。搜索日志是特别是信息性的因为它们可以作为用户手段来搜索导航表明您的导航方案中的缺陷。如果您不基于 Web 的跟踪使用则考虑创建一个使用跟踪基础结构，以便您能拥有数据备份和通知将来的修改。
后，许多其他担心作为一名开发人员创建好的导航可以似乎有点相当。如果您没有您支配的专家，您可以到自己动手执行此处列出我们所的建议的一些问题。
导航是非常重要，； 它是需要时间和资源将投资。则可以中执行操作增量的模式的帮助，和可以使用强大、 易于读取 primers 像 Steve Krug 未做我认为和 Peter Morville 环境 Findability，及其他。必须使用您的软件的人员将为其 happier。
Dr.Watson Charles Kreitzberg是 CEO Cognetics Corporation (www.cognetics.com)，它提供了可用性咨询和用户体验设计服务。他的热情创建使用和 delight 同时支持产品的业务目标的用户的直观界面。Charles 居住在中心新新泽西州他 moonlights 为执行的音乐家。
Ambrose Little 居住与妻子和中心新建新泽西州中的四个子项。他的被设计和开发软件 10 年以上，honored 是一个 INETA 发言人和 Microsoft MVP。大，他的从技术的设计移动到用户的设计，现在用户体验的 Infragistics 设计器。