Viewers: in countries Watching now:
Dave Hogue has been studying how people interact with digital devices and interfaces for over 15 years, and knows how design can make or break a website. In this course, he shares a hands-on approach to improving interaction design for a better user experience on the web. This course breaks down the components of an example site, from its homepage to categories, content, and the shopping cart, and introduces common customer scenarios that can be used to identify opportunities for improvement. You'll learn how to enhance navigation, gather feedback after interactions, manage content layers, and add features such as infinite scrolling, collapsible modules, and dynamic content to enrich the user's experience. Then compare the before and after websites to understand why these techniques make them more engaging and effective.
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.
There are currently no FAQs about Applied Interaction Design.
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.