Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Beginner
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.