Applied Interaction Design
Illustration by John Hersey

Working with navigation


From:

Applied Interaction Design

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: Working with navigation

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.
please wait ...
Watch the Online Video Course Applied Interaction Design
1h 49m Beginner Jul 11, 2013

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.

Topics include:
  • Defining a customer scenario
  • Improving navigation
  • Working with content in grids
  • Establishing a sense of place on category pages
  • Exploring infinite scroll and pagination methods
  • Using tooltips to deliver contextual content
  • Working with light boxes and layers
  • Improving form structure
  • Handling errors and presenting effective error messages
  • Comparing the original site to the enhanced site
Subject:
Web
Author:
David Hogue

Working with navigation

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.

 
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.

* 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 Applied Interaction Design.

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.