Wayfinding refers to the ways in which
people and animals orient themselves in physical space and navigate from place
Wayfinding is often used to refer to traditional
navigation methods used by indigenous peoples. In more modern times, wayfinding
is used in the context of architecture to refer to the user experience of
orientation and choosing a path within the built environment, and it also refers
to the set of architectural and/or design elements that aids orientation.
Researcher Kevin Lynch coined the term in his 1960
book "Image of the City".
"The Image of the City" was the result of a
five-year study on how users perceive and organize spatial information as they
navigate through cities. Using three disparate cities as examples (Boston,
Jersey City, and Los Angeles), Lynch reported that users understood their
surroundings in consistent and predictable ways, forming mental maps with five
- paths, the streets, sidewalks, trails,
and other channels in which people travel;
- edges, perceived boundaries such as
walls, buildings, and shorelines;
- districts, relatively large sections of
the city distinguished by some identity or character;
- nodes, focal points, intersections or
- landmarks, readily identifiable objects
which serve as reference points
In 1984 environmental psychologist Romedi Passini
published the full-length "Wayfinding in Architecture" and expanded the concept
to include signage and other graphic communication, clues inherent in the
building's spatial grammar, logical space planning, audible communication,
tactile elements, and provision for special-needs users.
Historically, wayfinding refers to the techniques
used by travelers over land and sea to find relatively unmarked and often
These include but are not limited to dead reckoning
(using course and speed to determine position),
Hereford Mappa Mundi,
England. A classic "T-O" map with Jerusalem at centre, east toward the top,
Europe the bottom left and Africa on the right.
Table of Geography, Hydrography, and Navigation, from the 1728 Cyclopaedia,
Jack Sparrow's Compass
To identify location of a town or hill or ship on a
map it is necessary to know the coordinates of latitude and longitude. Latitude
is determined by measuring the angle between the horizon and the North
|Sextant: a navigation instrument
that is used to establish position by measuring the height of stars from the
Index mirror: large polished plate that reflects light.
Telescope: optical instrument made of lens that magnifies objects.
Telescope clamp: reinforcing circle.
Eyepiece: lens the user looks through.
Telescope printing: lens adjustment.
Frame: structure that serves as the base for the different parts of
Graduated arc: graduated edge of the arc.
Locking device: apparatus that holds the sextant in place.
Drum: graduated button used to take measurements.
Index arm: type of ruler that determines direction or measures an
Screw to regulate small mirror: piece of metal used to adjust the
Glass filter: colored transparent substance.
Horizon mirror: small polished glass plate that reflects light.
Glass filter: colored transparent substance.
and, more recently, global positioning.
The Global Positioning System (GPS),
is currently the only fully-functional Global Navigation Satellite System (GNSS).
More than two dozen GPS satellites are in medium Earth orbit, transmitting
signals allowing GPS receivers to determine the receiver's longitude,
latitude, and altitude.
Since the first experimental satellite was launched
in 1978, GPS has become an indispensable aid to navigation around the world, and
an important tool for map-making and land surveying. GPS also provides a precise
time reference used in many applications including scientific study of
earthquakes, and synchronization of telecommunications networks.
Developed by the United States Department of
Defense, it is officially named NAVSTAR GPS (Navigation Satellite
Timing And Ranging Global Positioning System).
The satellite constellation is managed by the United States Air Force 50th Space
Wing. Although the cost of maintaining the system is approximately US$400
million per year, including the replacement of aging satellites, GPS is free for
civilian use as a public good.
Screen Navigation Basics
Navigation is an important element of site usability. Successful sites have
navigational schemes that are easy to use and understand. Visual design cannot
overcome poor navigation design.
Navigation refers to all of the ways that users can move around a site
and understand where to go. Navigation design is revealed in the appearance and
functionality of the menus, links, buttons, and toolbars on your pages.
Generally, it is difficult for site users to perceive the
structure because only one page is seen at a time. That makes it difficult to
place a single page in the context of the remaining site content. Hyperlinks
make is likely for users to get lost unless obvious and understandable landmarks
are provided. Two challenges in designing the navigation scheme for our website
are to ensure that users
- Understand the organization of the site
- Can move around easily.
Well-designed navigation provides quick and easy movement between the various
components of a website. The navigational elements on every web page should
answer these basic questions:
- Where am I now?
- Where did I come from?
- Where can I go from here?
Here are a few methods to help site users answer the three
- Provide a simple hierarchical tree structure.
- Allow easy movement to important site components.
- Provide a home base.
- Use recurring navigation tools on all pages.
- Provide page numbers for sequential pages.
- Provide and update feedback that shows where the user is
in a site (e.g., a breadcrumb trail).
- Provide on-demand aids that illustrate the user's
location within a site (e.g., site map, table of contents).
Krug's Trunk Test
Steve Krug provides an acid test for good Web navigation which is
called the Truck Test. The following questions should be answered from every
- What site is this? (Site ID)
- What page am I on? (Page name)
- What are the major sections of this site? (Sections)
- What are my options at this level? ( Local navigation)
- Where am I in the scheme of things? (“You are here”
- How can I search? (Site search and Internet search)
A rich set of graphic navigation and interactivity links within your Web
pages will pull users' attention down the page, weaning them from the
general-purpose browser links and drawing them further into your content. By
providing your own consistent and predictable set of navigation buttons you also
give the user a sense of your site's organization and make the logic and order
of your site visually explicit. In this example the rich graphics and many links
offered by Heathrow Airport immediately draw the reader
into the site:
Provide context or lose the reader
Readers need a sense of context, of their place within an organization of
information. In paper documents this sense of "where you are" is a mixture of
graphic and editorial organizational cues supplied by the graphic design of the
book, the organization of the text, and the physical sensation of the book as an
Electronic documents provide none of the physical cues we take for granted in
assessing information. When we see a Web link on the page we have few cues to
where we will be led, how much information is at the other end of the link, and
exactly how the linked information relates to the current page.
Even the view of individual Web pages is restricted for many users. Most Web
pages don't fit completely on a standard office display monitor (800 x 600
pixels), and so there is almost always a part of the page that the user cannot
Web pages need to give the user explicit cues to the context and organization
of information because only a small portion of any site (less than a page) is
visible at one time:
As the Web page designer it is up to you to provide these functional and
"Going back" and going to the previous page
All hypertext systems share a common feature that has no direct precedent in
print media: going "back" through a series of links you have previously visited
is not the same as paging "back" through the preceding pages of an ordered
sequence of pages. When users click on a hypertext link in a Web document they
often are transported from one Web site to another, perhaps even from one
country to another. Once made, the hypertext link is bidirectional; you can "go
back" to the Web site you just left by clicking on the "Back" button of the
viewer. Having hit the "Back" button, you can move to the new Web site again by
hitting the "Forward" button:
For the information designer hypertext links are a mixed blessing. The
radical shifts in context that links create can easily confuse Web users, who
need organized cues and interface elements if they are to follow and understand
hypertext links from one Web page to another. This is particularly true when
users need to be able to follow (or at least recognize) an ordered sequence of
documents. Notice in the diagram above that although the user has entered the
second Web site at page 6, the site is an ordered sequence of pages.
If the standard Web browser "Back" and "Forward" buttons are augmented with
"Next Page" and "Previous Page" buttons built into the page, the user will have
interface tools to navigate through the information in your site in the sequence
you intended. Button bars can also display location information much as running
chapter headers do in printed books:
Unlike the "Back" and "Forward" buttons, whose functions are relative only to
the pages you have seen most recently, "Next Page" and "Previous Page" buttons
in a document are fixed links you provide to associated documents. By providing
paging buttons and links to local home pages and contents pages you give users
the tools to understand how you have organized your Web site information, even
if they have not entered your Web of pages through a home page or contents page.
The buttons don't prevent people from reading the information in whatever order
they choose, but they do allow readers to follow the sequence of pages you have
Button bars are also the most logical place for links back to your home page
or to other menu pages related to the current page. A button bar can be built
with text-based links or a series of individual button graphics at the top or
bottom of the page:
Navigation patterns (Windows Store
Using the right navigation patterns helps you
limit the controls that are persistently on screen. This lets people focus on
the current content.
The navigation in Windows Store apps is based on
two patterns: hierarchical and flat. An app can use one or the other or a
combination of these patterns.
This pattern makes Windows Store apps fast and
fluid. It is best for apps with large content collections or many distinct
sections of content for a user to explore. Most Windows Store apps use a
hierarchical system of navigation.
||Hub pages are the user's
entry point to the app. Here content is displayed in a rich horizontally
panning view allowing users to get a glimpse of what's new and available.
The Hub consists of different categories of
content, each of which maps to the app's section pages.
Section pages are the second
level of an app. Here content can be displayed in any form that best
represents the scenario and content the section contains.
The section page consists of individual
items, each of which has its own detail page. Section pages may also take
advantage of grouping and a panorama style layout.
Detail pages are the third
level of an app. Here the details of individual items are displayed, the
format of which may vary tremendously depending upon the particular type
The detail page consists of item details or
functionality. Detail pages may contain a lot of information or may
contain a single object, such as a picture or video.
Many Windows Store apps use a flat navigation
pattern. Apps such as games, browsers, or document creation apps use this
pattern to let the user move between pages, tabs, or modes that all reside at
the same hierarchical level. Unlike the hierarchical pattern, there is
typically no persistent back button or navigation stack, so moving between
pages is usually done either through direct links within the content, as in
the first example below, or through the nav bar, as in the second example
This pattern is best when the core scenario
involves fast switching between a small number of pages or tabs, for example,
in web browser apps like Internet Explorer, ebooks, and games.
- Header and back button
The header labels the current page and is useful
for wayfinding. The back button makes it fast to get back to where you were.
- Section or category labels
These labels move the user to different sections
or categories of content.
- Other targets
You can use tiles, arrows, buttons, search results
or other customized targets as navigation elements. In some games you can
find examples of navigation elements with interesting shapes.
The top app bar
By swiping from the top or bottom edge of the
screen, a user reveals the app bars. The top app bar is also called the
navigation bar, or nav bar. You can place navigation elements in the top app
bar so that more screen area is available for the content in your app to
shine. Alternatively, you can place navigation elements on the canvas if users
frequently need them when using your app, and if having them on the canvas
doesn’t negatively impact the app experience. You decide if navigation
elements belong in the top bar or on the canvas.
Commonly, section or category labels are in the
navigation bar, as in Hulu Plus.
Many apps use the top app bar to provide
shortcuts. For example, in the ESPN app, a user can navigate to a gamecast
page by clicking a scoreboard above the section labels in the top app bar.
The top app bar can also give users a preview of
the content on the target page. In the following shopping app example, you can
preview the product images in the app bar before diving into a product detail
We encourage you to push your design further by
using the app bars in creative ways. In Fresh Paint, the top app bar goes
beyond its dedicated navigation function and doubles as a painting toolbox.
Semantic zoom makes scanning and moving around a
view fast and fluid, especially when the view is a long panning list.
For example, in Great British Chefs, the hub page
has a spotlight section followed by five visually rich, horizontally panning
sections. The app uses semantic zoom to make it easier to jump to each of the