Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 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
So back on the mixed arrangements page for the original Hansel and Petal website. We can tell once again because we don't have any navigation states, and we don't have a breadcrumb. As we scroll down through the page we notice somewhat discretely over here on the right hand side, Previous and Next links. Now initially I wasn't quite sure If this meant that I could control the carousel or if it was related to the content in the grid down below. And as we scroll down, I see there's about 12 bouquets here for me.
But when I click on Next, I think it reloaded the page, are these the same bouquets? Let's see, go back, Burst of Yellow Tulips, go forward not press okay, so Previous and Next are actually showing me additional bouquets. So you see the problem here right? Not only do I not have a good sense of place I really don't have any idea of how many mixed arrangement bouquets Hansel and Petal offers to me. All I know is that I can go Previous and Next and I can see more. And I'm going to have to click that until I reach the end I suppose. Now, why is this a problem? Status and Progress information is a form of feedback.
And remember feedback is one of those essential principles of interaction design. And it's progress information and status information about how many arrangements are available on the Hansel and Petal site, that we're missing. So, if I am in the middle of a process or an interaction, and something is ongoing. I want a status indicator that says to me, I'm still working, please be patient. On the other hand, if I am moving through something that may have multiple steps or multiple pages, I need a progress indicator.
I want to know, how much have I seen? How much have I done? How much remains? How many more pages of flowers could I possibly be looking at? There is an additional problem with the way pagination is currently working on the Hansel and Petal site. That type of really vague pagination actually places a lot of strain on your memory. Now, your working memory is what you're actively thinking about at any one given moment in time, and unfortunately, it's limited. There's only so much that we can put into our memories, and then we start to forget things.
So, how many pages have I clicked into the mixed arrangements bouquet? I don't know, there's no bread crumb, there is no page number, I don't remember. Long term memory, on the other hand, it lasts a very long time, and it's got a very large capacity. But it requires effort to put information into the long term memory. And people just aren't going to do that on a website. They're not going to write down how many pages have I clicked into. They're not going to load a new page and then try to memorize what the first product is.
So, that they remember which page they're on when they see it again. We can do better. So this grid of products, I see 12 lovely bouquets, but I don't know how many bouquets there are. And I can click Next and Previous until I reach the end. But unfortunately I have no sense of progress, and this is taxing my memory. We need a better solution. Let's take a look at what we could do, in the next movie.