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
In the Interaction Design Fundamentals course, we discuss the three types of models. The first is a Mental Model and this the way a person thinks that something should work. This is the expectation and the experience that they bring with them. I have an idea about how it should work to build a custom bouquet. The Conceptual Model is the way the design and development team approaches the functionality. In other words, how they design it to work. How is this actually going to happen in the interface, and then the System Model is the way it actually works we could say under the hood.
So, with Mental Models in mind, let's take a look at the three sites and compare the changes that we made. The Mental Model coming into Build-a-Bouquet is that I am going to see an array of flowers, which I do. I'm going to be able to choose the ones that I want, which I can. The number that I want, which I can, and the color that I want. So, it works in the sense that it's doing the things that people think it should do, but it's not doing it in the most efficient way possible, and in fact, this may not be the way they expect it to work. The functionality is here, we see the System Model behind the scenes The Conceptual Model is pick the flower quantity and pick the flower color. But it just doesn't quite match the Mental Model.
Remember when we talked about the Gestalt principles of proximity and similarity, we just don't have the information grouped the right way. So, we made some improvements to the site. We regrouped the information, so that people can say, this is the flower that I want. We made it much easier for them to understand exactly what they were selecting. We are closer to the Mental Model here. I want this flower. I want this color. I want this quantity. And at the bottom of the page, we're showing them a flower total, and a total price.
This is definitely closer to the Mental Model, but there was still that one problem. If I'm building a custom bouquet in person, I'm probably walking along and I'm literally picking up the flowers that I want and putting them together in bunch in my hand. I see the flowers that I have selected together. That's the mental model, so we made a third version of build a bouquet where we tried to create that type of an experience. Here are all of the flowers you can include in your bouquet, here are the flowers you have included in your bouquet. And this version now using Gestalt proximity and the similarity and using Mental Models of I have gathered these flowers into a bunch. We now have an experience that is much closer to what people would expect. Now, all three of these versions of Build a Bouquet were functional. You could build and purchase a bouquet in any one of them. And there were some design decisions that we had to make along the way. There were some trade-offs.
This particular version of Build A Bouquet, has very, very strong associations between the imagery, the name, the color and the quantity. And there's only one instance of it on the screen. So, that's very, very clean. This version has flowers where you can select and flowers you have selected. But there are two pictures of Calla Lilies, two names of Calla Lilies and two different prices here. This still works because these are clearly the flowers I have selected. But we made a trade-off. We decided that showing this information together was more valuable than having duplicate information on the screen.
These are design decisions that we have to make all the time. The customer scenario, understanding the context, and understanding the interaction design principles, all help us understand what are the benefits and what are the potential weaknesses in different design decisions.