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.
And here we are back on the original homepage one last time. We've got just a little bit of content at the bottom of the page, let's take a look at how we can make this better. These banners, they're actually working fine, we're not going to make any changes to those. This is good content. But the footer, we have some issues down here. Now it's a very simple footer, and in fact we're just repeating the navigation at the bottom. We could actually make the search engine optimization, or SEO, a little bit better for this website. By exposing more of the deeper navigation, particularly for the most popular areas, or the most commonly visited areas.
But the real problem with the footer here is this Sign Up link. One, it's just very vaguely labeled. Now remember one of the best practices for navigation and for buttons is to be very clear and let people know what is going to happen. In this case, we just have Newsletter Sign Up. But the worst part of this is that, when I click into this field to add what I assume is my email address, it's pre-populated with Newsletter. And in fact, I now have to completely backspace over and delete that text before I can put in my own information. So now I can Sign Up.
But I had to delete the newsletter text in order to do that. Clearly, we don't want to make people work to sign up for a newsletter. So how can we improve the footer on this website? Let's take a look at what we did on the modified version of this site. And once again, we're using the same content, but we've added some functionality here. You'll also notice that we added in some social media and social networking. This has just become so prevalent throughout the experiences on the web. When people see things that they like or that they want to share, we just have instant access on every page to do that.
We've also changed the way the sign up for special offers works. We're using a much more descriptive label and now I can sign up and I don't have to erase that place holder text. I can just start typing directly. And finally we'v added some more information to our footer in these links by repeating the navigation. Exposing some commonly requested links or common destination. And so our search engine optimization may be improved by having a more meaningful footer as well.
So, on the original site, we took a very simple footer, and we made it a better, more meaningful footer with better functionality. And with added functionality . for social media and social networking.
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.