Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
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.