Viewers: in countries Watching now:
Dave Hogue has been studying how people interact with digital devices and interfaces for over 15 years, and knows how design can make or break a website. In this course, he shares a hands-on approach to improving interaction design for a better user experience on the web. This course breaks down the components of an example site, from its homepage to categories, content, and the shopping cart, and introduces common customer scenarios that can be used to identify opportunities for improvement. You'll learn how to enhance navigation, gather feedback after interactions, manage content layers, and add features such as infinite scrolling, collapsible modules, and dynamic content to enrich the user's experience. Then compare the before and after websites to understand why these techniques make them more engaging and effective.
There are a few other things happening on this page that make it a less than ideal experience. Although all of the information about caring for orchids is here. There's a few other things that I just don't understand. Like, I don't know if I can actually buy these orchids or not. Or, if these are just different types of orchids, that this is information on how to care for them. And then there's this odd little floating Download link off to the side to the page, and I'm not entirely sure what I'm going to be downloading. Am I getting a copy of this information, or I'm getting a copy of these images. I don't know.
So we need to clarify this. We're making people work too hard to understand the information on this page, and to understand what they can do. Cognitive Load is a term that we use to describe when we make people work to understand information, make decisions, or solve problems. In fact, we make them work too hard. Especially when the computer or the design has the opportunity to do the work for the person. Closely related to the idea of cognitive load is cognitive friction.
This occurs when we have to put in more effort than we should and it slows us down. This page is a really good example of cognitive load and cognitive friction. I can read all of the content, but I have to do a lot of scrolling to see it. I can guess that I can buy these orchids. But I have to click through to find out. I can guess what I'm going to download. But I actually have to click the link to see if my guess is accurate. We're forcing people to think too much about the experience, so how do we improve this? Well, let's take a look at the modified site and see what we're able to do.
Once again, we're establishing a much better sense of place. I know I am in the Care Tips section. We've got a good bread crumb, and we've got the page header. But now notice I have Print this Page and Download care instructions as a PDF. Now I know exactly what's going to happen here. We understand in this case, the context of the experience. This is the type of information that people may need to take with them, not just come to the website and look up. If you're buying the orchid as a gift for someone, you may want to print this out and give it to them with the orchid.
So they know how to care for it. I no longer need to guess if these orchids are for sale. The prices are indicated, so I know I can buy it, and how much it's going to cost. I'm able to open and close all of the information. Making for much better reading experience or I can simply open the one section that I'm most interested in. Such as do I live in a cold environment that is not good for orchids? So I can quickly get to that one piece of information or see all of it. This design, although these changes are relatively subtle. Reduce the cognitive load and the cognitive effort necessary to understand the content on this page.
And the fact that we understand the context of the experience that I may need to take this information with me. Has influenced the links that we are presenting, as well as the presentation of the content. This is simply a much more convenient page for people to interact with.
There are currently no FAQs about Applied Interaction Design.
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.