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.
We've struggled to see the colors that are available in this rose bouquet. We've paused to try and figure out how we select a vase shape, and we've taken the time to change the quantity. So that we can buy one Rainbow Rose Collection for the hard to find price of $29.95. So, I've decided I want this, and I click Add To Basket. Did I get it? Has this been purchased, or is it in my cart? It didn't tell me. I didn't get any feedback. So now, I really have to stop and think, did this work, or I might even click the button multiple times. And in fact, if you take a look up at the header you'll notice that Basket no longer says Basket zero, it was empty before, it now says Basket one. And we completely missed that.
There was no solid information that said, yes, I know you want this product, and you have added it to your shopping basket. Feedback is one of the essential principles of interaction design. And it's one of the most important things that we do as interaction designers. We provide information that acknowledges the person has interacted. It provides status and progress information, that your action was heard, or something is ongoing. Without feedback, people may not understand the results of their interactions.
They may not know that anything has happened at all. I clicked Add to Basket and I did not know whether or not that mixed rose bouquet was added to my Shopping Basket. And because of that, I may be less likely to interact in the future. And in this particular case, it may mean that I actually leave this website. So, how can we improve this page? Well, let's take a look at the modified version of the Hansel & Petal website. So just a quick review. We've got the ability now to see close ups of all of the different colors. We've added content, the price is much easier to find. I can select a Round or a Square vase.
We're using the correct radio buttons here. I can quickly add the basket without having to edit the quantity because it defaulted smartly to number one. And you'll also notice we've got some feedback here, on the button, a rollover state. So, yes, this button is active. Let's go ahead and buy our Mixed Rose Bouquet and, hey, now that is feedback. Your flowers are in the basket. One rainbow rose collection. In fact, it's even giving me additional meaningful information, such as my subtotal and my estimated shipping and handling.
This is feedback that's hard to miss. Not only is it acknowledging my interaction, but it's providing additional information that increases the value of this feedback. And there's one more little piece here. Notice that the basket icon at the top now indicates that there are flowers in your basket. And we've also got the information that there's one item and your subtotal is 29.95. So not only did we have a nice big drawer slide into view that says, this item's been added to your cart. We also have persistent feedback in the header that says how many items are in your basket and what's your current item subtotal.
Now this is feedback that is valuable.
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.