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.
Okay, so we're back on the original page. Let's focus on the navigation bar here. How it's located in a very traditional position. It's a horizontal navigation bar at the top of the page. But one of the first things that we notice once again is that we're not getting any feedback on the hover or the rollover here. We know that they're links, because it's at the top of the page and it looks like a navigation bar. But we could be providing some additional feedback. Before we go too far into talking about the navigation bar, let's just quickly review some best practices for navigation bars, for links and for buttons.
We've already seen that there were some problems with links in the header. Throughout the site, we want to make sure that we're using labels that help people understand where the link or button is going to go or what it's going to do. We want to make sure that we avoid being vague or ambiguous or confusing with any of the labels that we put on navigation and buttons. It also is often helpful to use active verbs. We find that that encourages people to interact more often. It lets them know what they're going to be doing. Not just what they are going to be seeing, or looking at.
And finally, it is very helpful to use different visual states to indicate the availability and a selection. This is really important feedback. And remember, feedback is one of the five essential principles of interaction design. Now that we know what our best practices for navigation are, and we've identified some of the problems that we have here, let's just quickly run over to the modified homepage and take a look at what we did in terms of providing some additional feedback. This is not really a dramatic change, but it's a subtle visual cue that let's people know. Yes, this is the navigation element that you are thinking of clicking on.
Now you've probably noticed that the navigation between the two pages behaves a little bit differently and in fact the original navigation is a little bit of a problem. Yes, this is the navigation element that you are thinking of clicking on. Now you've probably noticed that the navigation between the two pages behaves a little bit differently and in fact the original navigation is a little bit of a problem. First thing, as soon as I mouse over the navigation bar, you see these drawers they pop into view instantly. But there are also nested navigation. What we are seeing here is what's called a flyout navigation So whenever there are choices within a category it flies out to the side.
The problem that we have is I have to keep my mouse within this very narrow space in order to access my additional choices. So if I'm interested in mixed arrangements, and I want to go say look at mixed roses, oop, I just moused out of that space and the navigation disappears. Or anytime I move, like orhcids? No, not orchids, nope. Not spring, nope. I want roses. Okay, there we go. That narrow little area is what's often referred to as a mouse channel. It's that skinny little region that you have to very carefully move your mouse through in order to get to content on the other side, As soon as you move your mouse out of that space, the content disappears. And this is obviously not a good experience.
They're often found in nested navigational systems and menus. So unfortunately, we run into these quite often on the internet. Closely related to the mouse channel problem in this navigation bar, is our ability to actually get our mouse accurately to the next link, or hitting a target. In the previous Interaction Design Fundamentals course, we talked about Fitts Law and Meyer's Law. Which essentially is a mathematical set of formulas that tells us that it's easier for us to click or tap on things that are larger and nearer. And although that navigation drawer is not very Far away, we have to get to it through a very small space.
That's what makes it much more difficult for us to accurately hit that target. So let's just quickly review the nav bar from here on the original site. It's exactly where we think it should be. We do have nested navigation, but it is tricky to use. We have to be very careful with our mouse. But, it's not providing very much feedback for us. Let's take a look at how we improved that. So, over here on the modified site, once again because of best practices, for navigation links and buttons you see that we've got hover states. We added them to the header, we added them to the navigation bar, but you'll also notice now that we've changed the way we access the nested navigation Within the arrangements navigation option.
Instead of having flyout menus, we now have a large drawer navigation. This has two benefits. One, it's very easy for us to mouse into this space, I have a very large channel in which to move my mouse. You'll also notice that it exposes all of my options so I don't have to look at just one set of menus at a time. I can open up this one drawer and I can see oh popular flowers, and tropical flowers, and orchids, and mixed arrangements. I can easily move my mouse to get to any of those.
Now there's one additional change that we made here on this site and it's a subtle one. You may not have noticed it. Let's go back and look at the original site for a moment. And as soon I move my mouse into the navigation bar that menu appears. In fact if I move my mouse quickly over it you see it blink into view. Now if I'm moving my mouse from somewhere in the body of the page and I'm trying to get to a link that 's up in the header. As soon as I cross over I get that blink and that blink can be distracting On the modified version, we have an improvement. If I mouse over, notice the drawer doesn't pop into view. Only the arrangements hover state shows up.
I actually have to slow down and pause in order to open that drawer. That means this drawer is not going to get in the way by blinking into view when I am not trying to open the drawer. That technique of pausing briefly before we show or open a navigation drawer is called hoverintent. And it's a coding technique, and it allows us to display the content after a brief delay. So I can mouse over the navigation bar, without the drawer popping into view.
I only show it when people are slowing down and placing their mouse over that area. This minimizes that undesirable display of extra content or additional content Simply because the mouse has moved close to the active zone. So, on the modified home page, we've implemented hover intent. I actually have to slow down my mouse and pause before the draw comes into view. So, let's just briefly talk about what we did here to make the navigation bar a better experience. On the original site, it's all the same navigation options. But, the fly out menu was difficult.
So, we've added feedback, we've added timing delays, and we've added a large navigation drawer to make it easier for us to mouse into and make a navigation selection.
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.