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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.