Join David Hogue for an in-depth discussion in this video Working with content in grids, part of Applied Interaction Design.
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.
- 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