"User experience" has become a buzzword in recent years, and users and companies are expecting more and more from their software. As a developer, you need to stay ahead of this trend by understanding and applying basic UX principles and best practices. This course will show you ten practical tips that you can start using today to improve the user experience of your software.
Amber is a Microsoft Certified Trainer and Microsoft Certified Professional Developer with 15+ years experience working with and teaching Microsoft technologies. She also focuses on professional skills, bridging the gap between techies and non-techies. For her work as a training leader, Amber received Training magazine's 2013 Emerging Training Leader award.
Alignment Welcome back. In this module, we'll see one of the simplest, but most impactful things you can do to improve user experience. To quickly recap where we are, Marc, the creative director at Ubiquitous Insurance, has issued the Dev Team a challenge to rethink their mockups for the intranet project refresh they're working on. During the last review he said, "the mockups look like they were created by developers, " and told you to rethink them, keeping in mind that user experience is everything. You and the Dev Team don't really know where to start with those instructions, but luckily you met Milla, the UX intern, who has agreed to give you some tips. You've set up a short meeting with her where she's going to teach you the first tip, which is alignment.
Proximity Hello again, and welcome back. In the last module, we talked about how alignment can make your designs stronger and more unified. In this module, we'll see proximity, which is another subtle, but powerful way to organize your design and improve the user experience of your software. To introduce this principle, I want to take you to a restaurant. Let's look in on these two. What would you say the relationship is between the two of them? Is there one? Do they know each other? Okay, what about now? What would you say their relationship is? A couple, coworkers, did they just meet? We'll never know, but I think we can all agree there's some sort of relationship between them now. And why did we make that conclusion? Well, it's because they're closer together in that second picture. And with that introduction, be sure to come back in the next clip and we'll talk more about how this works.
Consistency/Repetition Hello again, and welcome back. In the last couple of modules, you and the Dev Team have been getting some great tips from Milla about how to improve the wireframe designs for the intranet refresh program you're working on with Marc. Let's check in with them. Nice hair Milla. Thank you! I was getting tired of pink. I thought it was time to change it up. How's the dev team doing? They're catching on, I think you'll be happy with your next review. What's on your agenda for today? Today we're going to talk about consistency and repetition. Ooh, good one! Let me know how it goes. I'll be at the Apple Store if you need me.
Contrast Welcome back. This module is about how to use contrast in your designs to make information stand out, to add visual interest, and to give your pages a "wow" factor. Take a quick look at this picture. Did you notice the contrast? You probably did, as it was pretty apparent in that example, but even if the difference was more subtle our brains are hardwired to pay attention to contrast of all kinds. The reason for this, is because as humans have developed over the centuries, this has been a key part of staying alive. Being able to quickly recognize irregularities or predators in the environment, could mean life or death, so we've become very good at seeing contrast and reacting to it. Our brains also love a lot of contrast, because the differences are so stark. When something looks very similar to something else, our brains have to work a little bit harder to see if it's really contrast or if our eyes are just playing tricks on us, so a blunt contrast like this slide actually lets your brain relax a little bit because the differences are so obvious.
Color Hello, and welcome to the module about color. In the upcoming clips, I'll show you the basics about color and how to use or not use it for best effect. Color is an amazing thing. It's also a very complex thing. You'll know this if you've ever picked out paint colors for your house, for example. And yes, there really are about 100 different kinds of white. You make decisions about color every day, maybe small decisions like choosing what color to where, or for bigger decisions such as what color of car to buy. Color is everywhere in our lives. There is much to know about color. If you were in design school you could spend several semesters studying the nuances of colors, words like these shown here on the slide. For the purpose of this course, though, I'm going to stick to the basics of what you need to be effective with color.
Typography Welcome to the typography module. This one is going to be a lot of fun. The role of typography is fascinating, and also huge, just like color, and it's come a long way over the years. From the old printing presses, to typewriters, to modern computers with thousands of fonts, there's never been such a variety, and it can connote so much, from fun to serious, old fashioned to ultra modern. I found this quote from Ellen Lupton, "typography is what language looks like, " and it's so true. It's not really a design principle like some of the other things we've been talking about, but it's absolutely a critical part of design and user experience. Let's look at the fundamentals.
Visibility Hello again, and welcome back. In this module we're going to talk about visibility, meaning what your users see, don't see, and how they act on those things, but let's first drop in on Marc and Milla. Hey Milla, how are the developers doing on the wireframes? They're coming along, I just have a few more things to cover with them. Today we're going to start with visibility. Great, keep me posted. I'm anxious to see what they've been working on. The principle of visibility states that the usability of a system is greatly enhanced if elements are clearly visible to the user, meaning that if you expect your users to use your system they have to be able to see the things you want them to see. Obviously, which I say jokingly, because it does sound obvious, but you'd be surprised how many things get in the way of this visibility. There are three major concepts to cover here, the first being the "fold, " and then scrolling, and finally banner blindness.
Understandability Hi, and welcome back. In this module we're going to talk about understandability in software, meaning, are your users getting from your software what you think they are getting. First, some idioms or common sayings from the United States. You better grab a hat or umbrella, it's raining cats and dogs out there! Really, it's raining cats and dogs, how is that possible? Don't worry, in the U. S. that means it's raining really hard. Here's another one. Let's not try to boil the ocean. We'll start small and then grow over the next two quarters. Boiling the ocean, really? What would that look like, and what would it do to the rest of the planet? Again, not to worry. This means don't try to do too much at once. These self-propelling shoes are the best things since sliced bread. What do shoes have to do with sliced bread, or bread at all? Translation: This is a good idea or invention. Now before you start to think you clicked on the wrong course, this really does relate to user experience. Come back in the next clip to learn how.
Simplicity Welcome back. In this module we'll talk about simplicity and how that applies to software. I came across a quote recently that I really liked, "elegance is not the abundance of simplicity. It is the absence of complexity. " Elegance and simplicity are intrinsically linked. Simple things are perceived as more elegant, more expensive, and more desirable. Case in point, which of these two meals looks more expensive to you? Did you pick the one on the right? Why do you think that is? The one on the left actually has more food, about 3-4 times as much food, but even regardless of what the food is, I think most people would agree that the one on the right looks more expensive. The reason for this is simplicity. The plain white plate on the right contrasts with the one on the left that's kind of busy with blue patterns. The placement of food on the right allows for clean, white space, which we'll talk about later. The plate on the left has a few smudges of sauce around the edges that don't look too purposeful, and then a red dot of something on top, whereas the plate on the right looks purposeful and well-placed. Let's look at another example. Which of these clothing stores seems more expensive or prestigious to you? For a lot of the same reasons we just talked about, I'm guessing you said the one on the right. It's simpler, right? There's lots of space, zero clutter, and all the outfits and mannequins are purposely placed. Simple means elegant, expensive, and professional, whether you're talking about food, clothing or software, it'll take you far. Ironically, simplicity can be a complex goal to achieve. To help, you should ask yourself these two questions: Does it make the task easier, and does it add value? If not, don't do it.
Keeping Users Informed Welcome to module 11, Keeping Users Informed. In this module, we'll talk about the importance of letting your users know what's going on with your system and their overall position in it. Hey guys! Last topic before you review with Marc. Let's get to it! If you remember back to our very first module in this course, we said user experience was all about how users feel, and hopefully by now you've realized how true that is. How many times have you been using software and felt like this? The system hangs, it loses your information, or you have to dig around to try to find the information you need. It can be very frustrating, right? There's not really a "principle" that applies to this, but the general concept is that users should always know what's going on with the system and their position in it. In the upcoming clips, we'll cover some of the ways that you can keep your users informed about what's going on, including welcome messages, progress bars and steps, navigation and breadcrumbs, and confirmation and error messages.