Video: Using tooltipsWe have successfully added our Rainbow Rose Collection to our shopping basket. We are halfway through our customer scenario. We have picked one boquet, the husband's mother's boquet. We still have one more to go. But while we were looking at this Rainbow Rose Collection webpage, we noticed at the bottom that they were giving credit to their designer. It's like, hey, these brilliant colors were selected by Debra Wisdom, so who is Debra and maybe what other arrangements has she done? Maybe there is something that she's done that I also like and that could be the next bouquet that I purchase.
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.
- 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
We have successfully added our Rainbow Rose Collection to our shopping basket. We are halfway through our customer scenario. We have picked one boquet, the husband's mother's boquet. We still have one more to go. But while we were looking at this Rainbow Rose Collection webpage, we noticed at the bottom that they were giving credit to their designer. It's like, hey, these brilliant colors were selected by Debra Wisdom, so who is Debra and maybe what other arrangements has she done? Maybe there is something that she's done that I also like and that could be the next bouquet that I purchase.
So, let's go ahead and click through to find out what we've got. Here we are, Our Favorite Arrangements From Our Talented Designers. Now, unfortunately, one of the things about this page. And we've already discussed, Is that it doesn't provide me with a sense of place. I have no idea which section of the site this page is located in. There's no indicator in the navigation bar, and there's no breadcrumb. So, if there's information on this page which I think is interesting or important, and I navigate away from this page, I might not be able to find it again.
Now, I came over here because i wanted to see more of what Debra Wisdom was doing, and so I look for her name, and there she is. But I'm not entirely sure what I can click or what information is available to me. And as I move the mouse around, I can see well the images at least appear to be clickable but. Oh, I didn't expect that. If I roll over her name, there's a tool tip and it gives me information about her. In fact, I can get information about all of the designers just by rolling my mouse over their name. Now, there was no visual cue to tell me that that information was available to me. So, I kind of had to discover it by accident.
But I'm glad I did. And it's using a technique that is called a Tool Tip. And Tool Tips are a common way of presenting information that is contextually relevant. Tool Tips work by presenting information in layers. This is additional relevant content or information that is displayed in a way with visual cues that makes it appear like it is above the original page. It suggests that there is depth. The fact that we layer up information also provides us some time cues. If we close layers and we move down through a stack of layers, it's analogous to moving back in time.
So, just as we use the back button in our browser to return to previous pages, we will close layers in order to move down to a prior page as well. So what can we do to improve this page? Well, we know we need to add the sense of place up here at the top, but we also want to give people visual cues for what is clickable. Let's go head over and take a look at the Debra Wisdom link, and here we go, Our Favorite Arrangements. And, oh, now we know that it's in the Our Designers section. So, we are just one click deeper into the site.
Here, now, we have very clear cues. So, each one of our designer names has a dashed underline, and there's a little question mark icon. These two visual cues draw my attention. They say hey there is something here. You can click on this, or you can rollover this, and so people don't have to accidentally discover that there is biography information in Tool Tips for each one of these designers.
There are currently no FAQs about Applied Interaction Design.