Navigation

 

Wayfinding

Wayfinding refers to the ways in which people and animals orient themselves in physical space and navigate from place to 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 elements:

 

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 mislabeled routes.

These include but are not limited to dead reckoning (using course and speed to determine position),

map...

The Hereford Mappa Mundi, about 1300, Hereford Cathedral, 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, Volume 1.

compass,

Jack Sparrow's Compass

astronomical positioning

 

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 star.

Sextant: a navigation instrument that is used to establish position by measuring the height of stars from the horizon.
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 the sextant.
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 angle.
Screw to regulate small mirror: piece of metal used to adjust the horizon mirror.
Glass filter: colored transparent substance.
Horizon mirror: small polished glass plate that reflects light.
Glass filter: colored transparent substance.

 

and, more recently, global positioning.

GPS

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.

http://en.wikipedia.org/wiki/Global_Positioning_System

 

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:

  1. Understand the organization of the site
  2. 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:

  1. Where am I now?
  2. Where did I come from?
  3. Where can I go from here?

Here are a few methods to help site users answer the three basic questions

  1. Provide a simple hierarchical tree structure.
  2. Allow easy movement to important site components.
  3. Provide a home base.
  4. Use recurring navigation tools on all pages.
  5. Provide page numbers for sequential pages.
  6. Provide and update feedback that shows where the user is in a site (e.g., a breadcrumb trail).
  7. 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 page. 

  1. What site is this? (Site ID)
  2. What page am I on? (Page name)
  3. What are the major sections of this site? (Sections)
  4. What are my options at this level? ( Local navigation)
  5. Where am I in the scheme of things? (“You are here” indicator)
  6. 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 object.

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 see:


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 context cues.

"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:

 

Button bars

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 laid out:

 

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:

 
http://www.creativebloq.com/web-design/website-navigation-4132549

http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/

http://www.awwwards.com/websites/navigation/

http://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/

 

Navigation patterns (Windows Store apps)

http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx

 

Applies to Windows only

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.

 

Hierarchical pattern

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, section, and details pages in a Windows Store app 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 of content.

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.

 

Flat pattern

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 below.

 

flat navigation examples

 

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.

On-canvas navigation

 

header, back button, section headers, and tiles as navigation elements

 

  1. 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.

  2. Section or category labels

    These labels move the user to different sections or categories of content.

  3. 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.

 

Bing News app showing header, section label, and link to more details

 

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.

 

 

accessing the nav bar

 

Commonly, section or category labels are in the navigation bar, as in Hulu Plus.

 

hulu plus app nav bar

 

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.

 

espn app nav 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 page.

 

vevo app nav bar

 

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.

 

fresh paint nav bar

 

Semantic zoom

Semantic zoom makes scanning and moving around a view fast and fluid, especially when the view is a long panning list.

 

sample app in zoomed in view, then zoomed out view

 

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 five sections.

 

semantic zoom in Great British Chefs