来自《界面设计》外文翻译资料

From the Designing Interfaces books

The author:Jenifer Tidwell

Getting Around:

Navigation, Signposts, and Wayfinding

The patterns in this chapter deal with the problem of navigation. How do users know where they are now, where to go next, and how to get there from here?

I call navigation a “problem” because navigating around a website or application is like commuting. You have to do it to get where you need to go, but itrsquo;s dull, itrsquo;s sometimes infuriating, and the time and energy you spend on it just seems wasted. Couldnrsquo;t you be doing something better with your time, such as playing a game or getting some actual work done?

The best kind of commuting is none at all. Having everything you need right at your fingertips without having to travel somewhere is pretty convenient. Likewise, keeping most tools “within reach” on an interface is handy, especially for intermediate-to-expert users (i.e., people who have already learned where everything is). Sometimes you do need to put lesser-used tools on separate screens, where they donrsquo;t clutter things up; sometimes you need to group content onto different pages so that the interface makes sense. All this is fine, as long as the “distances” that a user must travel remain short.

So, less is better. Letrsquo;s talk terminology for a minute and come back to this concept.

Staying Found

Letrsquo;s say yoursquo;ve built a large website or application that yoursquo;ve had to break up into sections, subsections, specialized tools, pages, windows, wizards, and so forth. How do you help users navigate?

Signposts are features that help users figure out their immediate surroundings. Common signposts include page and window titles, web page logos and other branding devices, tabs, and selection indicators. Patterns and techniques such as good global and local navigation links, Sequence Map, Breadcrumbs, and Annotated Scroll bar—all described in this chapter—tell users where they currently are, and often where they can go with only one more jump. They help a user to stay “found” and to plan his next steps.

Wayfinding is what people do as they find their way toward their goal. The term is pretty self-explanatory. But how people actually do it is quite a research subject—specialists from cognitive science, environmental design, and website design have studied it. These common-sense features help users with wayfinding:

Good signage

Clear, unambiguous labels anticipate what yoursquo;re looking for and tell you where to go; signs are where you expect them to be, and yoursquo;re never left standing at a decision point without guidance. You can check this by walking through the artifact yoursquo;re designing and following the paths of all the major use cases. Make sure that each point where a user must decide where to go next is signed or labeled appropriately. Use strong “calls to action” on the first pages that a user sees.

Environmental clues

Yoursquo;d look for restrooms in the back of a restaurant, for instance, or a gate where a walkway intersects a fence. Likewise, you would look for an “X” close button at the top right of a modal dialog and logos in the upper-left corner of a web page. Keep in mind that these clues are often culturally determined, and someone new to the culture (e.g., someone whorsquo;s never used a given operating system before) will not be aware of them.

Maps

Sometimes people go from sign to sign or link to link without ever really knowing where theyrsquo;re going in a larger frame of reference. (If yoursquo;ve ever found your way through a strange airport, thatrsquo;s probably what you did.) But some people might prefer to have a mental picture of the whole space, especially if theyrsquo;re there often. Also, in badly signed or densely built spaces, such as urban neighborhoods, maps may be the only navigational aids people have.

In this chapter, the Clear Entry Points pattern is an example of careful signage combined with environmental clues—the links should be designed to stand out on the page. A Sequence Map, obviously, is a map; you can use Overview Plus Detail(Chapter 7) to show maps for virtual spaces, too. Modal Panel sort of qualifies as an environmental clue, since the ways out of a modal panel take you right back to where you just were.

Irsquo;ve compared virtual spaces to physical ones here. But virtual spaces have the unique ability to provide a navigational trump card, one that physical spaces canrsquo;t (yet) provide: the Escape Hatch

. Wherever you are, click on that link, and yoursquo;re back to a familiar page. Itrsquo;s like carrying a wormhole with you. Or a pair of ruby slippers.

The Cost of Navigation

When you walk into an unfamiliar room, you look around. In a fraction of a second, you take in the shape of the room, the furnishings, the light, the ways out, and other clues; very quickly you make some assumptions about what this room is and how it relates to why you walked in.able to

Throes answer Then you need to do what you came in to do. Where? How? You might be immediately-or not. Or maybe youre just distracted by other interesting in the room.

Similarly, bringing up a web page or opening a window incurs a cognitive cost. Again, you need to figure out this new space: you take in its shape, its layout, its contents, its exits, and how to do what you came to do. All of this takes energy and time. The “context switch”forces you to refocus your attention and adjust to your new surroundings.

Even if yoursquo;re already familiar with the window (or room) you just went into, it still incurs a cost. Not a large cost, but it adds up—especially when you figure in the actual time it takes to display a window or load a page.

This is true whether yoursquo;re dealing with web pages, application windows, dialog boxes, or device screens. The decisions that users make about where to go are similar—labels still

剩余内容已隐藏，支付完成后下载完整资料

来自《界面设计》

作者:Tidwell珍妮弗

出行：

导航、路标和路径查找

本章中的模式处理导航的问题。用户如何知道他们现在在哪里,要去哪里,以及如何从这里到达那里吗?

我叫导航浏览某个网站或应用程序“问题”,因为就像上下班。你必须做你需要去的地方,但它是乏味的,它有时让人生气,你的时间和精力花在似乎浪费了。你不能做得更好,比如玩游戏或者做一些实际工作做了什么?

最好的通勤是根本没有的。拥有一切你需要在你的指尖不去很方便。同样,大多数工具“触手可及”接口方便,特别是对于intermediate-to-expert用户(即。,人已经学会了一切)。有时你需要将很少使用工具在不同的屏幕,他们不要杂乱的东西,有时你需要组内容到不同的页面,界面是有意义的。所有这一切都是美好的,只要“距离”,用户必须保持短的旅行。

所以,越少越好。让我们谈谈术语一会儿,回到这个概念。

待发现

假设你已经建立了一个大型网站或应用程序,你必须分解为部分,部分,专业工具、页面、窗口、向导、等等。如何帮助用户浏览?

标志的功能帮助用户找出他们的直接环境。常见的标志包括页面、窗口标题,网页标识和其他品牌设备,标签,和选择指标。模式和技术,如良好的全球和当地的导航链接,序列图,面包屑,和注释本chapter-tell中描述滚动栏——所有用户目前在哪里,而且往往他们能去的地方只有一跳。他们帮助用户保持“发现”,他的下一个步骤。

路径是人做的,它们以自己的方式向他们的目标。这个词都非常容易理解。但人们确实很从认知科学研究的专家,环境设计,网站设计研究。这些常识性的特性帮助用户路径查找:好的标志

清晰、明确的标签预测你要找什么,告诉你去哪里,你希望他们是迹象,你从未离开站在没有指导的决策点。你可以检查这个走过后的工件你设计和路径的所有主要的用例。确保每一个点,用户必须决定下一步去哪里签署或适当的标记。使用强大的“呼吁行动”在第一用户看到的页面。

环境线索

你找厕所的一家餐厅,例如,或一个走道相交一个栅栏的门。同样,你会寻找一个“X”右上角的关闭按钮一个模态对话框和标识web页面的左上角。请记住,这些线索通常文化决定,有人新的文化(如。的人,从未使用过一个给定的操作系统)并不会意识到它们的存在。

地图

有时人们从标志,标志或链接,链接没有真正知道他们会在一个更大的参照系。(如果你曾经发现你在一个陌生的机场,这可能是你所做的)。但是有些人可能更喜欢画面的整个空间,特别是如果他们经常有。在严重的签名或者人口建立空间,如城市社区,地图可能是唯一导航艾滋病人。

在本章明确入口点模式是一个谨慎的例子标志结合环境的链接应该是用来在页面上脱颖而出。序列图,很明显,是一个映射,您可以使用 详细概述(第七章)来显示地图为虚拟空间,。模态面板有资格作为一个环境线索,由于方法的模态面板带你回来你就在哪儿。

我在这里相比,虚拟空间到物理的。但虚拟空间有独特的能力提供一个导航王牌,一个物理空间(还)不提供:逃生出口

。无论你在哪里,点击这个链接,你回到熟悉的页面。就像拿着一个虫洞。或一双红宝石拖鞋。

导航的成本

当你走进一个陌生的房间里,你看看。在几分之一秒,你带形状的房间,家具,光线,方式,和其他线索,很快你做出一些假设这个房间是什么,以及它如何与为什么你走了进来。能够阵痛回答你需要做你来做的事情。

在哪里?如何?

您可能会立即或不是。或者你只是被其他有趣的在房间里。同样,抚养一个web页面或打开一个窗口产生认知成本。再次,你需要找出这个新空间:你在它的形状,它的布局,其内容,其出口,怎么做你来做什么。所有这一切需要能量和时间。“上下文切换”迫使你重新调整你的关注和适应新环境。即使你已经熟悉的窗口(或空间)你进入,它还增加了一个成本。不是一个大量成本,但它增加了都当你图在实际时间显示一个窗口或加载一个页面。

这是真的你是否处理web页面、应用窗口对话框,或设备的屏幕。用户做出的决定去哪里是类似这样的标志仍然需要阅读或图标解码,用户仍然会让信仰的飞跃通过点击链接或按钮他们不确定。

此外,加载时间影响人们的决策。如果用户点击一个页面,需要很长时间才能加载或加载失败总共可能会气馁,并可能会关闭页面之前,他发现他来。(所以,有多少观众栏视频播放器花费你吗?)同样,如果一个网站的页面需要一个长期长时间加载,用户将不太可能探索该网站。

是有原因的,像Google这样的企业,努力工作让页面加载尽可能快:延迟成本观众。

保持距离短

知道有成本从页面跳到页面中,您可以了解为什么重要的是要保持的跳下来。当一个常见的任务需要许多页面跳转,尽量减少一个或两个。

但真正的效率收益来自应用程序的结构。最恶心的事情之一设计师所能做的就是强迫用户进入多级子页,对话框等等,每次他需要完成一个简单的和日常任务。(更糟糕的是引导他,告诉他他不能完成它,因为一些失踪的前提,并送他回起点)。你可以设计你的应用程序,以便最常见的用例的80%可以做在一个页面中,没有任何上下文切换?(或者只有一个?)这很难与一些类型的应用程序。

一个特定的工具太大放在你的主页吗?试着缩小:消除控制,缩短标签,把单词变成图片,或使用专门的表单控件,节省空间。太分散,当结合其他主页?试着缩小它,隔离空格,或把它在一个偏僻的地方。你可以使用进步的信息披露逐渐在同一页面显示更多的内容吗?你可以使用模块标签或手风琴默认隐藏一些内容吗?有时适当的埋葬一个跳转到的页面里面的功能,如额外的20%遗留的任务你可以轻易的80%。也可以在你的应用程序,简单的演讲比储蓄更重要一个或两个跳跃。你可以把额外的“门”背后的冷僻的功能(也使用80/20规则)。像往常一样,尝试不同的设计,可用性测试他们如果你有任何疑问。

为网站设计规范

这是一个好事从它的视觉设计单独的导航模型。这样做可以帮助你更加灵活和故意思考如何设计页面本身。

但是网站有一定的约定关于视觉的导航功能,并忽略它们可能是不明智的。全球导航几乎总是顶部或左侧显示一个网页,有时两者兼有。很少,可以发现在这位置会导致页面大小和水平滚动的问题,除非设计者使用液体布局。两个相对较新的方法脂肪中发现全球导航菜单和站点地图页脚模式。在这些,整个结构层次的网站是给用户看,屏幕空间的成本在页眉或页脚。如前所述,这些模式将多级导航模型转化为一个完全连接。

当一个网站的访问者通常登录会员,网站可能提供一套实用程序右上角的导航链接。用户倾向于在寻找工具在网站上与他们的存在:账户设置,用户配置文件,注销,帮助,等等。

看到登录工具模式。常见的关联导航在链接是嵌入在或接近内容本身,将物品一起thematically-is“相关文章”一节或面板。新闻网站和博客使用这个很多:当用户阅读一篇文章,一个边栏或页脚显示其他文章讨论类似的主题或同一个作者写的。

标签、用户定义和系统定义,可以帮助支持关联导航和相关文章和链接。标签云支持局部“脱颖而出”的一些网站,特别是在文章的数量非常大,细粒度的话题。(在较小的网站和博客,他们不工作。)更常见的导航技术是最后一篇文章列表的标签,每个标签是一个链接导致一系列的文章,分享标记。

当一个网站利用社会媒体,更多的导航选项发挥作用。前面一个网站可能有一个消息框,链接用户最近发布的条目。内容游戏排行榜

显示最常见的共享或评论,而最近喋喋不休指导用户进行对话。和社会联系和分享小部件直接连接用户社交媒体服务。

布局:

1.清晰的入口点

2.菜单页面

3.金字塔

4.模态面板

5.Deep-linked状态

6.逃生出口

结合传统网站布局和模型,我们得到了这些模式:

7.脂肪的菜单

8.网站地图页脚

9.登录工具

接下来的几个工作模式以及“你在这里”标志(如可以一个设计良好的全球导航)。

序列图、面包屑和注释的滚动条也作为内容的互动地图。

带注释的滚动条的目的是为平移和缩放模型比为多个相互关联的页面。

10.序列图

11.面包屑

12.带注释的滚动条

面向动画过渡帮助用户停留的,因为他们从一个地方移动到另一个。视觉把戏,仅此而已,但很有效的保护用户的他在哪里,发生了什么。

13.动画过渡

剩余内容已隐藏，支付完成后下载完整资料

资料编号：[26116]，资料为PDF文档或Word文档，PDF文档可免费转换为Word