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.
So here we are on the home page of the original Hansel and Petal website and, remember we're, shopping for a, set of bouquets. And the first one that we're looking for is, a mixed flower arrangement. This is going to be the husbands, gift for is mother, for mothers day and, he's decided that he is going to buy some mixed roses for her. So lets just go ahead and jump into our Mixed Roses page. Now, when we land on this Rainbow Rose Collection page. The first thing we really want to talk about is what does this page need to do for the customer? What are their expectations of the information and the functionality that they're going to see? What's the context of the user experience? And what's motivating the person? In fact, let's talk about that for just a second.
What is motivation? Well, we define it as a force that initiates, directs, and sustains our behavior. It's what drives us. It's what makes us do things. It makes us behave and it's what makes us interact. Now, people can be motivated for a lot of different reasons and for many different things. In this particular case, our customer is motivated to buy a series of gifts for people that he loves. And there's going to be certain pieces of information that he is going to be looking for, to determine whether or not this is an appropriate gift. And as we look at this page, we start to see not very much, right? Rainbow Rose Collection, it's 30 long stem roses, six of each, of each, what? I assume that these are the colors over here, but what are those colors? I get to select a vase clearly.
I've gotta look kind of hard to figure out, oh there it is, there's the price, it starts at $29.95. We're not setting up the information in this particular page to help people make a decision. We're not even talking about interactivity at this point, we are just talking about whether or not we can support the behavior of the visitor to the site. We're not giving them enough information or enough of the information that they need. Let's take a look at how we can change that.
We'll go over to the improved version of the website, and once again, we're going to drop directly into our Mixed Roses. And the first thing that we notice, other than the fact that we have a much better sense of place. Is there's the price, nice and big, I can tell this is a reasonable price. I'v got more detail, I now know that the roses are cut and packaged and shipped all in the same day. I see the colors, Peach, Blush, Pink, and Red and White and rose. I still get to select my vase, they've even included some Care Instructions here on the site for how to take care of the roses once they've arrived.
And they know that I'm shopping for different types of flower bouquets. And so they even offer some suggestions at the bottom of the page for other things I may be interested in. Clearly, the amount of content on these two pages sets a much different context. We have to understand what the person expects, what is driving them, and what they need. On the original website, we simply failed to provide a sufficient amount of information. But on the modified website, we're able to provide much more information and its much more likely that this information will help the customer make a decision.
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.