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.
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.
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.