Interaction Design Fundamentals
Illustration by John Hersey

Effective navigation


From:

Interaction Design Fundamentals

with David Hogue

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Effective navigation

Effective navigation, or moving around within a Web site, application, or game, is essential for findability, and successful interactions. Only the smallest Web sites and applications consist of a single page or screen. The vast majority have much more content and functionality, spread across many pages. People move among pages or screens three main ways: the navigational system, the search system, and through contextual links in the body of the page. All three of these must work together, and they all rely on having an effective organizational system.
Expand all | Collapse all
  1. 2m 47s
    1. Welcome
      1m 17s
    2. Who is this course for?
      1m 30s
  2. 15m 51s
    1. What is interaction design?
      2m 11s
    2. The origins of interaction design
      8m 47s
    3. What interaction designers contribute
      1m 5s
    4. Understanding the interaction design process
      3m 48s
  3. 10m 16s
    1. Tools and techniques used by interaction designers
      4m 15s
    2. Documents created and used by interaction designers
      2m 12s
    3. Professional resources
      1m 33s
    4. Fields of study that underlie the work of interaction designers
      2m 16s
  4. 9m 39s
    1. Consistency
      1m 52s
    2. Perceivability
      2m 16s
    3. Learnability
      1m 5s
    4. Predictability
      1m 43s
    5. Feedback
      1m 21s
    6. How the principles form a system
      1m 22s
  5. 14m 53s
    1. Understanding the context of experience
      2m 21s
    2. Understanding need and motivation
      4m 15s
    3. Designing to meet needs
      5m 53s
    4. Persuasive design
      2m 24s
  6. 20m 36s
    1. Gestalt principles
      5m 0s
    2. Designing with grids
      4m 18s
    3. Guiding visitors with sequence, steps, and structure
      4m 19s
    4. Understanding design patterns
      6m 59s
  7. 26m 29s
    1. Effective navigation
      8m 37s
    2. Searching and filtering
      8m 10s
    3. Contextual relevance
      5m 25s
    4. Sense of place
      4m 17s
  8. 20m 16s
    1. Defining sensation and perception
      7m 10s
    2. How people respond to color
      5m 14s
    3. How people respond to motion
      6m 3s
    4. Establishing visual hierarchy
      1m 49s
  9. 31m 6s
    1. Defining cognition
      5m 53s
    2. Cognitive biases
      2m 45s
    3. Communicating with labels and icons
      4m 40s
    4. Framing choices
      3m 20s
    5. Mental models
      5m 17s
    6. Understanding cognitive load
      9m 11s
  10. 25m 31s
    1. Defining behavior for interaction design
      2m 7s
    2. Perceived affordances
      6m 26s
    3. Inputs and sensors
      5m 9s
    4. Designing for clicks and taps
      7m 33s
    5. Providing opportunity for direct action
      4m 16s
  11. 19m 58s
    1. Defining feedback for interaction design
      3m 31s
    2. Deciding on a feedback format
      5m 34s
    3. Place, time, and meaning
      5m 25s
    4. Error handling and messages
      4m 30s
    5. Feedback cycle
      58s
  12. 1m 51s
    1. Reviewing the big picture
      1m 51s

please wait ...
Watch the Online Video Course Interaction Design Fundamentals
3h 18m Beginner Feb 10, 2012

Viewers: in countries Watching now:

Interaction design focuses on creating interfaces, systems, and devices revolving around user behavior. In this course, author David Hogue sheds light on designing effective interactions for any digital medium. The course explores the interaction design process, explains how interaction designers work and the tools they use, and details the five essential principles of interaction design: consistency, visibility, learnability, predictability, and feedback. The course also introduces basic psychological concepts and examines the roles of context, motivation, and perception in a design; offers navigation best practices; and shows how to design for motivation and behavior and provide feedback to visitors.

Topics include:
  • Understanding the origins of interaction design
  • Understanding gestalt principles
  • Designing with grids
  • Understanding design patterns
  • Exploring how people respond to motion and color
  • Communicating through labels and icons
  • Framing for content and decision making
  • Understanding mental models
  • Avoiding cognitive overload
  • Defining behavior for interaction design
  • Designing for clicks and taps
  • Understanding the feedback cycle
  • Professional resources
Subject:
Web
Software:
Dreamweaver Fireworks
Author:
David Hogue

Effective navigation

Effective navigation, or moving around within a Web site, application, or game, is essential for findability, and successful interactions. Only the smallest Web sites and applications consist of a single page or screen. The vast majority have much more content and functionality, spread across many pages. People move among pages or screens three main ways: the navigational system, the search system, and through contextual links in the body of the page. All three of these must work together, and they all rely on having an effective organizational system.

The most common way to represent the structure of a Web site is through a sitemap, sometimes also called the site architecture. This diagram shows how pages are organized in the overall hierarchical structure of the site. Although there are many ways to get to pages in a Web site, the sitemap only illustrates the navigational paths among the pages. Sitemaps do not show all of the possible links among all pages, because it would become a very complex, and probably illegible, diagram if we tried to show that. The sitemap is best for capturing the breadth, depth, and structure of the site.

But good structure and organization is more than just a sitemap. We also need to deeply understand the content and information on the site, and how it's organized. Classifying and categorizing information has traditionally been a more specialized information architecture task, and on very large Web sites, this is still the case. Categorization is identifying the groups or categories of information, and classification is assigning the information to the appropriate categories, and then adding descriptive details.

We use what is called a taxonomy to record the hierarchical categories. A great example comes from biology, where we all learn how to sort living things into kingdom, phylum, class, order, family, genus, and species. Just as every creature on earth can be classified with this system, all information on a Web site can be classified into structured categories, and we represent that information structure with a taxonomy. For example, when shopping for shoes, there is a hierarchical structure to the information, and this is reflected in both the sitemap, and the navigation of the Web site.

From the homepage of the store, we can choose Shoes, Men's, Athletic, Running, and we see an assortment of shoes from which to select. This is a taxonomic system for shoes. Additional descriptive details, called metadata, can help us find what we want more effectively. These details are actually not part of the hierarchical categories, but they are important for helping us navigate and search more effectively. Metadata include tags, labels, descriptors, and attributes. These additional data help us narrow down large sets of information to smaller sets that are more relevant.

For example, once I have arrived at men's running shoes, I may be faced with hundreds or thousands of choices. How will I find the best pair of shoes for me? I can narrow down my choices with filters, such as size, color, brand, weight, and price. Thousands of possible shoes can be quickly reduced to just a dozen or two, which is much easier for me to review, and I know that I am more likely to find something that matches what I need. The navigational system of a Web site or application, and the ability to search, are global features; they're always present and available, no matter where we are on the site.

Contextual links vary from page to page, but they are always identifiable, even though they usually appear within the content and functionality. Although the appearance of the navigation system and contextual links may differ, there are some underlying techniques to ensure they are findable, usable, and effective. The navigation system itself is placed in a location on the site that is stable and consistent throughout. We often see navigation bars running horizontally across the page in the header, or a navigation column running vertically down the left side.

But on mobile sites, the navigation may be rolled up into a menu button, or placed at the bottom of the page, below the content. Where we choose to place the navigation, and how much we choose to make visible, depends on the depth and complexity of the site, the expertise of the people using it, and the device on which it is most often viewed. We use a horizontal navigation bar when a large number of categories is unlikely, and when the persistent visibility of the navigation is helpful to people. Horizontal navigation is constrained by the width of the screen on which it is viewed, and they often have drawers or dropdowns that open to expose the lower levels of navigation.

We use a vertical navigation column when there may be a large number of categories, and when being able to see the navigational hierarchy is helpful. Vertical navigation can include and show many categories, but a long list may disappear below the bottom edge of the browser window, which we call falling below the fold. Vertical navigation often opens up like a file tree to expose the lower levels of navigation. We may also collapse the navigation into a menu that must be opened with a click or tap.

We do this for small screens with limited space, or when people are experts with the site, and do not need the navigation visible at all times in order to be efficient. Navigation systems can be complex, and we often see hybrids that combine both horizontal and vertical location, but all navigation should help people understand where they are, where they can go, and the organizational structure of the site. The most common way to present contextual links in the body of a page or screen is with text links, buttons, and tabs.

Test links were traditionally blue and underlined, and in the early days of the Internet, people were explicitly instructed to click here, to teach them how to use links. Now people understand text links, and they have learned that just about any text that looks different from the text around it may be a link. We no longer need to adhere to the blue and underlined rule of the early days, but we still need to ensure that text links are distinct from the surrounding content. Buttons and tabs are common graphical links, and they should have hover, or over, and down, or pushed, states to provide feedback when they are clicked or tapped.

We will go into this in more detail later. When content is presented as a sequence of pages or screens, such as a photo gallery, or a set of product reviews, we often navigate through them using both an index page, and with next and previous buttons, or pagination controls. The index page uses links to jump directly to any page or screen. For example, a grid of images lets us choose which image we want to view, and a list of articles lets us choose which we want to read first. We don't have to start at the first item in the list.

Next and previous buttons are also contextual links that help us move forward or backward, one item or page at a time. These buttons may be placed near the relevant content to make it clear what will be changing. For many years in Web design, new content was simply added to the bottom of an existing page or list, so we thought of the top as being the oldest, and the bottom as the most recent, such as comments on blogs. But social networking sites have changed our expectations of time when information is presented vertically, because the newest posts and comments appear at the top, and the older content is lower on the page.

We still see both of these arrangements in use today, so make certain you understand the expectations of your audience when you choose where to put the newest content. One of the most common concerns about the navigation system is depth. Site owners often ask, how deep is this site? How many clicks or taps does it take to get somewhere? You may hear generalized statements, such as, more than three clicks is too many, but rather than concern ourselves with counting clicks or taps, we should focus on the person's perception of progress.

In other words, if every click or tap makes sense, feels like it moves the person closer to their goal, and if they never ask, why am I not there yet? Then the site is not too deep. If it takes eight clicks or taps to get somewhere, and every click or tap felt right to the person, then it's okay. However, when people start asking, am I there yet? How much farther? And why is this taking so long? Then there is probably a problem with the depth and organization of the site, or the sequence of steps to complete a task.

An organized navigation system helps people find what they need. As long as we feel like we're moving forward toward our goal, and each click or tap makes sense, then the structure and depth is good.

There are currently no FAQs about Interaction Design Fundamentals.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Interaction Design Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.