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, we're back on the home page of the original Hansel and Petal website. Let's continue scrolling a little bit farther down to see what we might be able to improve on on this page. Now down here, we get into the content of the website or the grid area. And this is where we start exposing people to the products that are available on the site. And it looks pretty good. I mean, these are really pretty flowers. But one of the first things that we notice is that we're missing feedback about what can I click on. Until I mouse over and see my cursor change to a hand. I'm not sure if I can click on the image, or if I have to click on the text link. So, we want to make sure that people understand what is clickable. Where can I click on the page and go somewhere for something I'm interested in? You'll also notice we that have these little text badges on top of the products. An item that's on sale, and even this "New!" announcement. Now, that's great information to present, but it's just a text overlay. You can imagine that for some of these colorful bouquets, that "New!" or sale announcement could completely disappear into the photography. So, in this case, we've got a new bouquet, it's under Bouquets and Arrangements for someone special, but we might not notice that.
We want to do something to draw attention to those badges. A very important thing that we do as interaction designers is we help guide the attention of the visitor to the website, but we have to remember that attention is a limited resource. We've only got so much of it, we can't pay attention to everything. And since, we can't pay attention to everything, we end up distributing it across all of the things that we think are most important. And if we think something isn't important or if something is not noticeable to us, well then we don't pay attention to it.
Or worse yet we get distracted by things that pull our attention away from what is important to something that isn't. In this particular case, we want to draw attention to those badges. We want people to notice that the product is on sale, or is new. So, in this case, how can we modify the design? Well, this is just a simple visual cue. In fact, it's not really about interactivity in this case. This is about drawing attention where attention is necessary. And so, with some additional graphical treatment, 'New' and 'Sale' are suddenly visible to us, and they are much more noticeable.
But you'll also notice now that we have great feedback. Yes, you can click on these photos. You can go learn more about the heirloom roses, or yes, you can buy this product. So, we've added feedback, we've drawn attention with badges. And although, we're using exactly the same content and photography, with just two simple changes, it becomes much more clear what can I shop for and what is going to draw my attention.
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.