DESIGN RULES: Fundamental Principles + Practices for Great UI Design | Joe Natoli | Skillshare

DESIGN RULES: Fundamental Principles + Practices for Great UI Design

Joe Natoli, Coaching & Training for UX Designers & Developers

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
51 Lessons (5h 12m)
    • 1. Introduction: What You'll Learn

      3:08
    • 2. First: Design is Design is Design

      16:37
    • 3. Stop Solving Other People's Problems

      7:25
    • 4. Why Form Doesn't Follow Function

      11:16
    • 5. Balancing Form and Function: Prescription vs. Description

      7:06
    • 6. Form Follows Function is NOT a UI Design Prescription!

      7:43
    • 7. Every Force Evolves Form (So Don't Follow the Prescription)

      4:44
    • 8. Less is More: Small Screens, Big Challenges

      6:41
    • 9. Five Rules for Small Screen Design

      5:38
    • 10. 09 Balance Creating order

      6:03
    • 11. Case Studies: Improving Balance in UI Design

      6:38
    • 12. Rhythm: Establishing Reinforcing Comprehension

      4:43
    • 13. Harmony: Shaping the Parts Into a Whole

      5:50
    • 14. Using Harmony to Create Directional Flow

      2:49
    • 15. Case Study: Using Harmony for Better Form Design

      4:00
    • 16. Dominance: Directing User Focus

      5:57
    • 17. Using Dominance to Increase Focus and Decrease Cognitive Effort

      5:21
    • 18. Creating Dominance with Size, Negative Space and Contrast

      5:42
    • 19. Alignment: Leading the Eye

      4:22
    • 20. Case Studies: The Power of Alignment

      5:26
    • 21. Proximity: Showing Relationships

      4:36
    • 22. Using Proximity to Make Cognition Faster

      2:46
    • 23. Using Proximity to Make Browsing Easier

      4:35
    • 24. Color: Getting Viewer Attention and Communicating Emotion

      5:02
    • 25. How Color Influences Interaction

      7:57
    • 26. A Word on Color Theory

      4:07
    • 27. Choosing UI Colors from Common Associations

      4:07
    • 28. Choosing UI Colors for Emotional Impact

      6:42
    • 29. 28 Choosing UI Colors from the World Around You

      4:15
    • 30. Choosing UI Colors from Brand Colors

      4:03
    • 31. 30 The Power of Contrast

      2:55
    • 32. Using Contrast to improve readability, attention and focus

      7:41
    • 33. The 3 essential functions of contrast in UI design

      2:54
    • 34. How to Determine Appropriate Color and Contrast

      4:51
    • 35. Typography 101

      2:43
    • 36. Creating Emotional Impact with Typography

      3:52
    • 37. Choosing a Font isn't Typography: The Power of Pattern Recognition

      3:08
    • 38. The Importance of Proper alignment, leading and kerning

      8:44
    • 39. Seven Rules for Great Typography

      14:43
    • 40. Five Rules for Choosing Imagery

      12:11
    • 41. Imagery DOs and DON'Ts

      8:07
    • 42. Working with Icons

      4:35
    • 43. Four Core Types of Icons (and Choosing the right type)

      6:04
    • 44. Five Rules for Effective Icon Design

      6:50
    • 45. Dealing with Data

      8:45
    • 46. Five Rules for Great Data Design

      5:27
    • 47. Simplifying Visual Information Part 01

      4:10
    • 48. Simplifying Visual Information Part 02

      9:13
    • 49. Separating Content from Controls Part 01

      6:53
    • 50. Separating Content from Controls Part 02

      6:15
    • 51. UI Design Mantras Recap

      6:16
29 students are watching this class

About This Class

When it comes to User Interface (UI) design, your job — whether you're a designer, developer, UXer or a mix of all those things — is to make sure that no aspect of someone’s onscreen interaction happens without explicit intent. The UI design choices we make have to reflect the user’s motivations, expectations, environment and possible actions.

All of those things manifest themselves in the User Interface — so what people see on the screen is usually the sum of their understanding about what this is and how it works.

So what we show them has to do a hell of a job communicating what’s there for them, how it’s organized, how they get to it and what they can do with it once they do.

The principles, practices and real-world techniques I'm going to show you here are the same ones that have informed graphic design for hundreds of years. And while that may sound like blasphemy to some of you, I guarantee you'll see why and how they apply equally to the world of digital design  especially for mobile devices and their small screens. 

I'm going to give you 50 lessons packed with timeless, ironclad, unchanging rules for good UI design that you can apply to anything and everything you ever work on. Trends will come and go, and it won't matter: your UI will still be useful, usable, appropriate and relevant for its users.

You'll learn how to make it easier for people to interact with what they see on the screen – whether they know what to tap, swipe or click, and whether what happens meets their expectations and moves them closer to their goals. You'll learn how to create and apply hierarchy, color, contrast, typography and gestalt principles to design appropriate visual cues so people know where and how to take action.

I'll show you how to make good visual decisions for even the most challenging applications, from simplifying complex visual information to designing with data. My goal with this course is to give you everything you need to know to make great UI design decisions, no matter what the content, context or product may be. 

From this point forward, you'll be equipped to make strategic, impactful User Interface designs that communicate, guide, encourage, motivate and educate. Anything else is decoration, and decoration has a very short shelf life.

By the time you finish Design Rules, you'll be able to do much more than create a more beautiful User Interface. Instead, you'll be able to design a UI that truly works for the people who use it. One that it allows them to easily figure out where to start and how to get what they need — quickly, efficiently and intuitively. 

Of course, it'll also just happen to be beautiful ;-)

Transcripts

1. Introduction: What You'll Learn: when it comes to user interface. Design your job. Whether you're a designer, developer, UX or a mix of all those things is to make sure that no aspect of someone's onscreen interaction happens without explicit intent. User interface design choices that we make have to reflect the users motivations, expectations, environment and the possible actions that they may take. That's a tall order, but I'm going to show you how to do it in the lessons that follow. All of those things I just talked about manifest themselves in the U. Y and user interface. All right, so what people see on the screen is usually there's some total of their understanding about what this is, how it works, how to use it. So the things that we show them on the screen have to do a heck of a job communicating what's there for them, how it's organized, how they get to all of it, and especially what they could do with it. Once they do the principles, practices and techniques I'm going to show you Here are the same ones that have been formed graphic design for hundreds of years, and while that may sound like blasphemy, to some of you, I guarantee you'll see how and why they apply equally to the world of digital user interface design, especially for mobile devices, and they're very small screens. I'm going to give you 50 lessons of timeless, ironclad, unchanging rules for good. New I designed that you can apply to anything and everything you will ever work. I promise you that trends will come and go OK, and it will not matter. Your user interface designs will still be useful, usable, appropriate and relevant for users. You'll learn how to make it easier for people to interact with what they see on the screen , whether they know what the tap or swipe or click, and whether what happens next. After that meets their expectations and moves them closer to their goals, you'll learn how to create an apply hierarchy. Color, contrast, typography and gestalt principles to design appropriate visual cues so people know how and where to take action. I'm also going to show you how to make good visual decisions right for even the most challenging applications. Whether that means simplifying complex visual information to designing with data charts and graphs. My goal with this course is to give you everything you need to know to make good You. I design decisions no matter what the content is, no matter what the context of use is, and no matter what kind of product it is right from sight toe app to enterprise system. From this point forward, after you take this class, you're gonna be equipped to make strategic impactful. User interface designs that communicate, guide and courage motivate and educate. Anything else is decoration and decoration has a very short self life. By the time you finish design rules, you'll be able to do much more than create a beautiful user interface. You'll be able to design a user interface that truly works for the people who use it, one that allows people to easily figure out where to start, how to get what they need quickly, efficiently and intuitively. Of course, that interface may also just happen to be beautiful. If you're ready to learn, let's go 2. First: Design is Design is Design: welcome to design rules, visual design principles for great You. I design. I'm Joe Natoli, and I will be your erstwhile guide to all things you. I related. The place I want to start is with this quote from Massimo Vignali, who says, If you could design one thing, you can design everything. Here's why this is important to me. That principle has guided every thing I have ever done in my design career. Vignali believe that if you are a true designer, if you are a true problem solver, if you approach design as a problem solving discipline, who's directives come from human behavior? What people understand, what they will act on, what motivates them, which is an understanding of why people react the way that they due to things that they see why what we see visually informs our expectations and guides our actions. If you understand that if you understand the relationship between human beings and what they see, you can apply that Teoh anything you ever have to design. I firmly believe that I followed that principle for nearly three decades now, and it has taken me, as you will see from graphic design to user interface designed to user experience design. So keep that quarter mind as we go through this. Now, as I just mentioned, I started out as a print designer. Okay, I went to school for graphic design. I started my career in 1989 which feels like a 1,000,000 years ago has a graphic designer all I did okay. When I moved to you and UX design a few years later, I was running my own firm at the time, all I did was I applied the same principles of good design that I used to design and print the same things I learned in college the same principles that have guided designed for hundreds of years. Okay, that stuff hasn't changed. People will tell you that the rules have changed. I am here to tell you that they haven't. So we didn't call it UX or you Why? Or new media or interactive designer any of those things. Okay, we just called it design. And as I said, design is solving problems, not drawing pictures. So although everything we're gonna talk about in this course is certainly visual in nature , the visual, the decisions you make, the why off the work that you're doing is based on the problem. You are trying to solve the challenge of trying to overcome the behavior you are trying to motivate in a user so it can state universities. I mentioned I was taught, designed as a problem solving discipline, which means you're asking, does the design serve the purpose of its existence? Okay, Does it communicate? A brand message? Doesn't inform somebody, does it educate them? What does it do aside from sit there and look pretty? How should it be perceived and received by the viewer by the audience, by the person who needs to understand and interpret what we're delivering? Why does that matter to anybody? Okay, and that's that. That's a $1,000,000 question that we ask in you X pursuits all the time. Why do we care? Why does anybody care? Ok, why does this matter to users? Why does it matter to the business? Which brings me to this which I probably heard 1000 times in the four years I was a college . And that is if you don't have a good solution, you don't have a good problem. Here's what that means. If if you can't come up with a compelling solution. A good design than it means You haven't spent enough time figuring out what it is you're trying to accomplish with the design. What is it supposed to do? What is it supposed to do for the organization that you're putting it out there? Four in the first place? What is it supposed to help the user do? The viewer? The participants, however you want to look at that. Okay, What is it supposed to do again? If it was only supposed to sit there and look nice than it would be hanging in a gallery on a wall and we would go look at it and say, Uh hey, looks nice. That's not designed. That's decoration. And as you'll hear for May, those are two different things. What I want you to understand is that the principles of good graphic design are the same principles that dictate good you I design. I want you to sit with that for a minute because when I say this out loud, invariably to ah crowd of people, half of the people in the audience get this look on their face like they just ate something that tastes really terrible. It it's like a moment of what? What it seems like. Blasphemy, all right, because everybody has this idea that the world of digital design and APS and sites and systems is completely different than the world of traditional graphic design print design. It is not true. It's never been true. And despite what the media and any number of so called experts will tell you, it's just flat out false. Okay, the principles that we follow for good you I design in every article you're ever going to read comes directly from the principles of good traditional print based graphic design. Okay, let's move on. I've used those same principles for some of the clients that you see on this screen, okay in particular for their brand identities, thes air logos. You can see that there's a wide variety of visual approaches here, and that's not because I'm interested in creating pretty unique, different, innovative graphics for each client. It's because every client has a very distinct personality. There's a brand message they're trying to convey. There are colors that are meaningful to their audience. There are certain fonts, typography, typefaces that send a very specific message or evoke an emotion around who they are. So all these look very different for a reason, and I'll go through a couple of them with you. Work strategy at the Top Left is a technology company. They wanted to communicate that the work they do is tireless. It's not tied to technological trends. They're consultants. That problem solvers. Okay, so there had to be something in there that says were forward thinking were well versed and technology. But it also needed to say where calm were steady, were reliable. Okay, we are here. We stay the course, no matter what comes and goes, were just sort of calmly here. The Helvetica used their Helvetica knew that is communicates that the fact that everything is lower case communicates a sense of humanness, of friendliness. OK, it takes everything down a notch. Um, it's less formal. It's approachable. All right, so everything you see there's on purpose the color scheme in particular, blue is very typically associated with tech. We used this sort of lime green yellowy color because it's sort of a non typical shade for that room. So we wanted to imply something about the fact that this is a different type of organization. Jump over in that same road to boo, which is a brand. Four babies essentially okay, it's it's, Ah, a peril brand. Four infants. So you're trying to appeal to a parent's sense of, of fun, of, of play, of imagination, of comfort, of all the positive things that get associate ID with kids in their innocents and there natural inclination to be drawn towards characters. Andi illustrations, right? So it sort of reflects all that go down to the Metro squash logo right below it, for example, fast moving this everything. The fact that everything is slanted, okay, suggests movement. This is literally on organization for squash players, and you see some movement in the M where we actually have a ball that that is moving in motion. So all those things are meant to communicate something subconsciously about the sport. What I'm trying to get across Jews that all the visual decisions you see are purposeful. There's thought behind them. We didn't just pick these colors out of a hat because we thought they looked cool. We picked those colors because they were commonly associated with the sport. We used movement and a Tallis ization. If that's a word of the typography of Metro squash to suggest movement, we wanted something in the mark that suggests the sport. Okay, so even if nobody recognizes that is a squash ball, that's okay. We're still getting the idea across Management architects below that this is a husband and wife architect team. We wanted to say something about the fact that there are two people. Same last name, right, family oriented, perhaps in some way didn't matter that we communicated. It was husband, wife. Just that the two work together. They're intertwined. As you can see, the second M is built out of the negative space of the first M. We've got the name and their architects. Okay, so all these things communicates visually and suggest things visually to the people on the receiving end. All of that. All the principles that have just sort of thrown out there about why these were designed the way they were entirely relate back to how we design a user interface. There has to be purpose in the visual decisions we make. The same absolutely holds true for everything I have ever done that falls under the category of traditional graphic design. Okay, from print pieces like the one you see at the top, left to posters to labelling for local craft brew to corporate literature to adds to restaurant advertising to business cards. Okay, it's all the same stuff. You think about what it is you're trying to convey. You choose appropriate color schemes, fonts, images, etcetera, etcetera to send that message. And you do it in a way that that particular expression is unique so that it says something specific to that brand to that company and to that viewer, that audience, that user the same absolutely holds true for magazine design. This is ah, magazine that I helped found a short while ago. Ah, and when we did the interior layouts and the cover and the things that you see here, the goal waas to keep this active to break boundaries, to make things visually interesting enough, um, that it sort of felt interactive in a way right enough to keep your eye moving enough to keep you engaged with the content. So here's a case where, although the design principles certainly come from print design, we were also thinking about the fact that in a digital age were introducing a physical artifact, which, because it doesn't move and you can't tap things you can't interact with it in the same way can certainly be a little more boring in some ways than something on the screen. So in this case, we tried to bring a little of them depth and movement and interactivity of you I design to the printed page. Here's an example of how color contrasts and typography, um, effect the emotional impact of print design and you're going to see you, Seymour. This related to interface design. What I want you to notice is this the colors in blank canvas and that typography there. Those subtle colors are picked up from this photograph. Okay, every single one of those shades exists in that photograph. That's a subtle thing. It's not something anyone would out really notice. You wouldn't look at this layout and say, Oh, well, they obviously got those colors from different shades and little pixels, parts of the photograph. But that's exactly what we did. The reason we did it is because of subconscious mind actually picks up on that relationship . The only reason I point this out to you is to hammer home the idea that nothing in a you are design should ever be arbitrary. We don't ever make decisions just because we go. Oh, that looks cool. All right, that looks cool doesn't help anybody do anything. It doesn't provide any emotional impact. It doesn't promote understanding. It doesn't encourage someone to turn the page or click that button or tap or swipe or download or share, or do any of those things these little details matter and the reason why you create them and how you create them matters even more. You can take this all the way to something that is three dimensional and physical, these air trade show Booth says. Some of you, I'm sure have seen now could use hang up a sign and say, Hey, we're working concepts, blah, blah, blah whatever. Instead, the graphics here, their size, their relationship, the way that they're organized. Even how the color scheme works in terms of hierarchy is organized in such a way to bring your eye through this three dimensional display in a very specific order. The high degree of negative space you see on the bottom rose on the left for example, between those lines is very purposeful. Your eye follows those points. It's drawn to those points very quickly. That's Ah, that's an instantaneous, instinctive reaction. Everything you see here is done based on what we know as designers about cognitive response . Why people look at things, why they look at them in a certain order on why they react to what they see again. There's no principle in anything you see here that is not or should not be applied to user interface design. Same goes for apparel. If I design a logo to put on a shirt, which is what this is, it should also contain some of the same principles visual interest, points of tension, which you can see the give the good, the U X. They're all sort of touching that outlines square in various ways. Those air points of visual tension, and they're there on purpose because you're I naturally goes to those points When things touch. That's tension. That's an old concept, but it's reused in a lot of modern systems. Sites, interfaces, mobile app, xgames, you name it. Okay, so I'm trying to show you here is how this stuff applies to uh, traditional physical products as well as their digital counterparts. So when we get to an actual interface, okay, we apply the same principles. The reason this looks the way it does, the way the fonts are, the way they are. The reason it's open and airy. And the only two real colors were using is a blue on a red to call out the most important calls to action on this screen, which happens to be the search. These decisions are not arbitrary. We're not using a big screen full of color because this you why in particular is data intensive, its data heavy, even the grays. You see, you're very muted. Okay? The reason for that is we want the content, which is most important thing on the screen to come forward. Okay, These are conscious visual decisions. So the very first of many you I design mantra is you're going to get throughout this course . Is this just like the quote we started with from Osmo Vignali, where we said if you could design one thing, you could design anything I want you to remember. This design is design is design is design is designed, is designed okay, whether it's graphic or industrial or architectural or visual or user interface design or UX design or information designer interactive design. All right, we could go down the list. It is all the same thing you are starting with what needs to be accomplished. You are starting with how human beings react toe what they see and why. 3. Stop Solving Other People's Problems: I want to ask you some questions here, and I want you to be honest with yourself about T answers. Do you start the design process by looking at themes working in Bootstrap, Right? Do you start out by saying, OK, what themes are available to me if you're designing a website? WordPress to say what themes are available to me, right? A lot of people do that. A lot of people work that way, and I'm gonna tell you why. That's a bad idea. Don't look at themes. Here's the reason themes look very nice. You can go to dribble right now and see billions of themes that people have created. You can go to any number of third party sites that sell themes for various content management systems for application and mobile app frameworks. There's no shortage of visual themes, all right. The problem is, while they look nice, they don't offer any explanations of the what the how and the why These collections don't tell us anything about the problems they were created to solve. They show us what they look like, but there's no understanding that we get of why those colors reused. Why that typography was used. Why the buttons air that size? Why the sliders work the way they do. We don't have any idea how those decisions were made to use those examples and to implement those examples. So we're looking at pretty pictures, but we have no sense of whether what we see is appropriate and appropriate. My friends is the magic word. Someone else's you I as someone else's you, I it's not yours. Here's another question. Do you start the design process by looking at the work of other designers? Right, You go to dribble or you go to be Hance or any of those other places and you look at people's work. Pinterest right is full of you. I designs people say, Hey, I've I've redesigned Facebook for the 6/1000 time or I've redesigned Twitter or have redesigned Apple's iTunes for the six millionth time. Yeah, I'm being sarcastic for a reason, but this is common and you're not alone. But if you do this, you're making a mistake. Okay? Don't look for inspiration. I want you to understand that you will not find the inspiration you're seeking by looking at the work of others. Let that sink in for a minute. Okay, think about what I just said. You will not find inspiration looking at the work of others. The reason you won't find inspiration is because what you will find is someone else a solution to someone else's problem. The problem you have to solve belongs entirely to you, to your client, to your users. What they designed. That Interface four has nothing to do with your situation. I don't even care if it's the same kind of product. It is still not your situation. It is not the business problems you are there to solve. It is not the user concerns that you are there to address its someone else's solution to someone else's problem. Can't hammer that home enough. So instead I want to give you a piece of ancient eternal wisdom that I firmly believe in. And that is this. Do not seek to follow in the footsteps of the wise seek what they sought. Very wise men by the name off Matsuo Basho said that it was true in his time and it is absolutely true in yours. Next, how many of you start the design process by looking at current you I trends. Flat design, anyone still hanging around? No, it's got to be flat or it's gotta be, you know, minimalistic. Or it's got to be chrome bliss or any one of those things. Don't look at trends, either. Okay, flat design, for instance. And I pick on flat design a lot. It's there is a widespread trend. It still gets a lot of air. People are still talking about that. We're still sort of obsessed with everything being flat, which is fine. But the problem here is that designers are adopting the look ah, flat design without considering whether it's appropriate for the situation or whether people will understand what they see. This idea of less is more has been taken to an extreme flat design without visual afford. Ince's the things that tell us how to use something based on cues that we're used to seeing without those afford Ince's. It's very difficult for us to understand that what we're seeing is interactive. Okay, we see a lot of this is where buttons don't look like buttons, things that are tap herbal or clickable or swipe herbal or whatever the case may be, often don't look like they are interactive that they offer no visual cue that says, Hey, I do something right, Swipe me, tap me, Click me whatever it ISS That's an afford INTs that's incredibly important. And every single day I see a dozen arm or examples of APS, sites and systems who do a horrible job of communicating interactivity. People can't interact with something if they don't know it exists all right, and that is the essential difference between design and decoration. A designer thinks very hard about the appropriateness of the visual decisions that here she makes, and those decisions are informed by research by investigation. By fact, okay, by doing some legwork to figure out who were doing this for what they need out of it, what they will respond to, what they will understand. A decorator, on the other hand, relies on his or her instincts as to what looks good and what doesn't. Most designers who have never learned the timeless principles of design are in this category. They're doing stuff based on instinct. While that looks good, feels good, and in some cases they're able to do that simply because they have natural visual telling. Good designers, quite frankly, are born with visual talent. You have to have that component in order to do this. But it is also equally true that someone who is maybe a poor or New Yorker designer can absolutely become a great designer if they pay attention to the things that you see on the left here. Because without that thought, without that underlying motivation, without an understanding of what we're trying to accomplish, you're just decorating. So being a designer has everything to do with understanding context of use, which means you understand what people are here to do you understand why they're here to do it. And consequently, that helps you to understand what visual cues you can create to guide them through that process, to help them through that process, to make it easier or simpler or faster, or any number of things okay, which of course, relates back to good user experience. So design mantra and number two is this. Stop solving other people's problems. Your situation is yours. The context of use your designing four is yours. Your users, your clients, your product, your work flows, etcetera, etcetera, etcetera. Don't get caught making things that have nothing to do with the problem you're trying to solve 4. Why Form Doesn't Follow Function: I want to talk to you about one of the most often repeated and most misunderstood phrases ever in the history of design of any kind. Form follows function. You may have heard this and you may not have, but this is a common refrain. And a lot of times, quite frankly, we hear it from people on the engineering and programming and development sides of the equation, because this is taught largely still in engineering school, in development programs, in programming courses. I still hear it all the time. But the fact that matter is it's a poor interpretation of something that was said many, many, many years ago in like a lot of things. Once it gets handed down, it gets corrupted on the surface, form follows function seems to make a lot of sense, OK, which means the way that something looks should be determined by its purpose. But that's an oversimplification in terms of you I design. It typically gets applied like this. We gather at words and quotes for a reason. The products requirements from the client. OK, in other words, they tell us what the requirements are supposed to be. They give us a big laundry list and we go do it. We gather them like we're picking stuff off trees, which is a very poor approach to do anything. But that's another argument for another time. So we gather the products requirements, and then we determine the aesthetics of the U. I based on those functional requirements. Here's what the system has to do. And here's what the visual should look like. Based on that function out, it's treated like a 1 to 1 relationship. It's not that simple. It's not that simple, because in my experience, this approach delivers products that fail. They're not purchased the not used, and they don't deliver a shred of our oi to the company that created them. Why why does that happen? Well, because form follows function has been co opted to mean something It doesn't. It's been bent to serve people's individual goals and needs and, um, aspirations. It's been misinterpreted to mean something that it absolutely does not, as you will see, and it's been misapplied. Okay, the way that it gets applied in products results in things that are very hard to use for human beings. So this is a lot like if you ever heard of the game of telephone? Alright, we played this when we were kids. I don't know if kids still do this, but we used to. The deal is one person starts. Okay, Person number one in this little illustration here says something to Person number two. Person number two. Then says it. Two. Person number three. Person number three passes it down the line to purse number four. The deal is, by the time it gets the person number six, the phrase usually changes. And it's not what the original person said anymore. That's what's happened with the phrase form follows function. So in order to understand how to properly apply this principle because there is a relationship between form and function, absolutely. But you need to understand how this came to be because I also want you to know how it came to be so very, terribly misinterpreted. Louis Sullivan started all this in 18 96. He was an architect. This is an intense human being. He laid down this edict right, and you could almost hear someone saying this or typing in all caps, right? It is the pervading law of all things organic and inorganic of all things, physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head of the heart of the soul that the life is recognizable in. It's expression that form ever follows function. This is the law intense guy. And this is kind of how he laid down this edict from this very strong, powerful way. Right? And here's what happened to that. Sullivan was essentially a rebel. Okay, at the time, technology tastes economics. Everything was changing. The world was influx at that time, and the forms of late 19th century buildings were still based on the ancient Greek and Roman architectures. So what was happening is there was a backlash against that. All right, against tradition, we've seen this all throughout history. All right, you guys, we're seeing it now with mobile APS versus desktop APS, right? We're like, Hey, that's old, it's It's done, it's over. Everything's got to be responsive. Everything's gotta be mobile, etcetera, etcetera. The same kind of thing was happening then. Solvent. Believe that a new form for buildings was needed, one that was derived from the function of the building instead of historical precedent. He was saying, Look, why are we following all these traditions? We should be basing our design on the function of what it is that we're designing which hey , in theory, makes all the sense in the world and the new forms that he was talking about, essentially, what became the modern structural steel skyscraper, right when you're in New York City or L A or Chicago, um, are all across the globe. Actually, you see, you see these incredible, towering modern structures. That's where ah lot of this came from. Enter the intern Frank Lloyd Wright, who I'm sure is a name that most of you know, right, was an intern for Louis Sullivan and his thing. What he came to believe was that Foreman functions should be one joined in a spiritually union, right, took Sullivan's idea and evolved it. OK. He was stressing the need for integration between form and function. His application of that principle was a Guggenheim museum, which I'm sure a lot of you have heard of. The spiral shape of the building was intended to allow visitors to easily view the artwork inside, which is why it looks like this. That's why the interior looks like this. As you walk, you move through the museum and you're following one single simple path. And everywhere you go you are seeing the art without having to go through a maze or venture off the path. To this day, it's a brilliant example of good design, right, understood context of use. How do people interact with art in a museum? What is the best way to eliminates all other distractions? Right of trying to find your way you're trying to figure out where you are are trying to see things. What if you could just walk and see things as you move? No effort. All right, that's good design. So Frank Lloyd Wright started us down the right path. Extremists, however, as I'm sure you know, I always find a way to take us off the path. So there was a ripple effect of this. In 1908 an Austrian architect named Adolf Loos proclaimed that architectural ornament was a crime, A crime, by the way. This was a reaction to the extreme ornamentation of the time, so he was against anything that was visually pleasing. He just thought it was frivolous. Okay, silly more modern architects like Lake Corpus Hier, Walter Gropius, Miles Vander Rohe adopted both. Ornamentation is a crime and form follows function as moral principles, and what these guys did, they applied it to design. Here's where this starts to creep into visual design. This is the important part. Modernism in architecture emerged from both those principles. The goal was to determine the form of buildings solely from functional requirements, not traditional statics. Then a guy named Walter Gropius founded a little club called the Bauhaus, which I'm sure some of you heard of. His whole thing was. Architecture begins where the engineering ends. Think about this for a second. What he was essentially saying is that design begins where the engineering ends in, that engineers can only do so much okay, their their job is very specific. It's to the underlying structure. It's smart. It is smart design. It's smart planning, but there's a whole other component of this. This is huge in relation to your understanding of design and how it should work. The Bauhaus was a school of multi disciplinary design, industrial design, art, typography, graphic design, photography, architecture. They touched it all form in their eyes, had to reflect the function of the product. Communication and meaning should never be sacrificed in favour of visual design choices, meaning design, not decoration. Where have you heard that before? Artistic devices, in their opinion, were used on Lee to increase the utility of the work. If that doesn't sound like the modern definition of user interface designed for digital technological products, I don't know what does. So Bauhaus in term was the foundation for modern graphic design, right? The connections between color and shape. The principles that you're going to hear about in this course were started by men like Paul Klay, Mosley Kandinsky, clean, powerful typography. Herbert Buyer was the man who introduced these concepts spatial relationships, integration of shape, color and typography, putting everything together. Moholy Nagy was the driving force behind that. The core principles of visual design that we're gonna talk about like harmony, balance, rhythm, proportion, symmetry, synthesis. Joseph Albers of the Bauhaus pioneered all this. What I'm trying to get across you is that the principles that you need to understand and be able to apply in an interface come directly from this source. Modern graphic design is the foundation of you I design. And if you do not own the book on the Left Universal principles of design, I strongly suggest you pause this video and go get right now it is absolutely indispensable . There is no principle in this book that has ever not been true in the history of the world . So it is worthy addition to your library, and I strolling suggests you pick it up. As recently as Microsoft's radical change in interface design that you see here on the screen, these principles are behind all of it now. That was certainly a flawed implementation and execution, all right, but I applaud the effort because they were starting to think very hard about how people use things and the impact of mobile devices on desktop use. Right, once we get used two different paradigms, our expectations of how things work, change. That's Microsoft trying to say, Okay, how do we reinvent this? How do we re imagine this? And they did so believe it or not going back to a lot of these foundational principles. So you I design mantra number three is formed, does not and should not follow function the to have toe work together remember what rights says spiritual union as one as high mind that as that sounds, it's absolutely the truth. The two things affect each other. One does not trump the other. They have to work together, and when they don't, people have a hard time using things. 5. Balancing Form and Function: Prescription vs. Description: Okay, Now I want to talk to you about how to balance, form and function. And that means understanding the difference between using form follows function as a prescription versus a description. Now, before you get the idea that there is no point to all of this that I'm just yammering on about things and hey, when do we get to see visual stuff? Here's what you need to understand the thing that will make you a great designer. The thing that will make the designs you produce truly useful, usable, valuable. The thing that will elevate you above your peers. The thing that will make you better at what you do than anyone else is your understanding of why you make the visual decisions that you make. Okay, that is the only thing that separates you from anybody else. So it is tremendously important toe have the right mindset towards how you go about designing something. If you don't have this part, you're gonna be just like everyone else who just does stuff arbitrarily gets, you know, mediocre to terrible results and has a hard time in their life in their career in their work. And you just never produce anything that does what you hope it will do, All right. So stick with me. Let's go through this. Here's what I mean by description and prescription On the description side, when we consider form follows function. That means this beauty Onley results from purity of function, not ornamentation now. But it looks like it means that we favor simplicity over complexity across the board. This comes from the belief that form follows function in nature all right, which it doesn't. The prescription side of this says that aesthetic considerations and design should be secondary to functional considerations. All right, this is the one that's gotten us into so much trouble. I guarantee you that most of you taking this course have had a discussion with an engineer , a programmer developer, a product owner. Whoever where their entire emphasis is on the text side is on the underlying program underlying functionality, the underlying data capture. In other words, the last thing on their lists is the you. I writes the last thing they're looking at, the last thing they care about This is largely where this comes from, because this is how they were taught design and development and product development works. This has been around for a long time. It is still taught in development and engineering and programming curriculum, So a description side in nature, it sort of looks like this. Alright, variations in form allows some species to succeed, survive and flourish, which means that due to competition for resource is some variations of forms are more successful than others. It's the way the food chain works, right. Certain animals thrive and survive and eat the others because they're not built to survive the attack right or they're not made to withstand the elements. When a fish is out of water, it dies, All right, that's what we're talking about here. That's a variation in form, specific to context, specific to environment. If you compare that to how we approach product design, it means that variations in form of the products we design are competing for sales right. At the end of the day, most businesses are trying to make money right there, selling something so the winner is usually the one who's variations in form, and the integration of the most appropriate function delivers the most relevant, appropriate and valuable experience to the customer, right we use something, we go. Wow, I can't believe I've lived without this for the last six months. Those experiences come from the successful integration of form and function, right, This variation in form that is in context with what people want from on the prescription side, it gets approached like this. It becomes dogma, becomes these blind things that that we follow, right. We have to prioritize functionality over all other design considerations, including usability, ergonomics and aesthetics. This is what frustrates the hell out of most UX people You, I designers and many front end of operas who have, you know, human centric sensibilities. It's an insistence that aesthetic considerations and design should be secondary to functional considerations. Again, this is something that is taught explicitly to software engineers. Okay, to developers, to programmers, it's changing as as the world evolves and as information gets better, and as we're all sort of realizing that the bar is higher than that. But you have to understand where this deep bias comes from. I'm telling you all this so that you're aware of it. When you have these arguments, you can save yourself. Okay, I know where that's coming from. and you can calmly address it with the ammunition I am giving you right here in product design, right? Designers and developers are led to ask a very wrong question. And that question is what elements here don't specifically serve a function and should be removed again. There's emphasis on functionality. It's the wrong question. Prescriptions like this treat symptoms, not problems. And as I said to you earlier, design is problem solving. Okay, taken to its logical conclusion if the form of a design was ruled solely by its function. If that zoning we cared about, then every functional item would have one and only one design solution. Everything would look the same. Everything would be the same. All right, Whether you're a snake or a turtle or a bird or an elephants, you would be shocked at the same store. Every element would ultimately have the same design, right? Body, shape, size, gender. None of it would matter, you know, be wearing, you know, brown suits, black shoes, it shirts and ties. All right, this is literally the outcome of that kind of thinking, and people don't see it for what it iss. That means that instead of something specific to an organization like this who sells kitchen cabinetry. Write instead of picking colors and typefaces and images that are specific to the product. We're trying Teoh cell toe what we're trying to communicate to create something that's unique to this organization, this brand to give them a voice. Okay, all those things, every Web design would essentially look like this. All right. There would be no reason for different logos styles for different fonts, for different colors. Um, they would all be the same. We would use this approach for everything. But as we know, that's not the gig. That's not what we're here to do. And we also know through experience that it doesn't work. The thinking here goes that before in objects form could be changed. It would need to serve a different function. So if a website is website is website is a website, none of that would change until it became something else. Like a mole app, which concurrently means that all mobile laughs would look like a well, All right, you see the problem here 6. Form Follows Function is NOT a UI Design Prescription!: So here's reality. Check number one Users are most often frustrated and confused when they're confronted with visual form that strictly reflects technical function. Okay, just because an industrial system looks like what you see here, with all these mazes of myriad pipes and connectors and junctions and all sorts of stuff here doesn't mean you create the interface in the same way. So what we often see is something that follows Alan Cooper's model of implementation centric design that comes from his amazing book called About Face. And it works like this. We have an implementation model in design, okay, that reflects a technology means that what we design is solely based on function. It's usually done by engineers for engineers. Now I'm being facetious. But okay, it's it's development centric. It's all about the underlying system. On the other side, we have what we know to be a mental model. This reflects the users understanding of what they see right. This is what they're used to these air, the visual cues that say Okay, I think I know how to use that in between is what we call a represented model what Cooper called a representative model. That's what design and development create now that creation, that design and development, that implementation, the closer it is to the users mental model, the better the user experiences all right, which also means that this manifests itself in the user interface. The closer the you I decisions are toe what people expect. The conventions, they're used to the visual cues that say, This is how this works, the better you exes. But a lot of times, as you know, stuff falls on the other end of the scale towards implementation ball. That's how we get ourselves into trouble. So here's the critical question. Do you need to know the mechanics of how something works in order to use it? Do you need to understand how the electrical circuitry behind the dashboard on your car works? How all those things communicate to different parts of your car? To deliver that information to the dashboard? Do you need to know the underlying structure of that in order to be able to use the dashboard? No, you don't. You don't need to know all that underlying stuff, So why do we follow the prescription? Because it's easier to design software that falls implementation model. That's why it's easy. We create a button for every function. We create a field for every input. We create a page for every single step a transaction, right. We create a dialogue for every module of code. It's a 1 to 1 correlation. It makes logical sense. It's easy. OK, it's a three inch curb. That's how you get things that look like this or this or this or this. Okay, this is pure functionality is designed based on pure function. There is no leap past. We need to put something on the screen that represents this, and that's all the further it goes. And that's why all the things I just showed you are very difficult to use. SharePoint. Okay, I talked to a client every month about SharePoint. Not the same client, either. I can't even tell you how many times in my professional career that SharePoint has been the function of why I was there to help a client, because it's this massive, functionally rich beast. But even in its current incarnation, okay, which is much better design wise, A much better ux wise. It is still very much an implementation model. There's an item on the screen for every functional element. And that's a Sfar. As it goes, it's prettier. That's about it has uses. We don't care how it works. We don't need to know. We don't want to know. Our focus is on the experience, specifically our expectation of that experience. We have a mental model that predicts the experience. It tells us what we can expect when the U I sticks close to that mental model uses easier when uses easier. We buy, we download, we share, we promote. We do all the things that organization wants us to dio to bring value back to them. Okay, And again, we Onley do those things if they're easy and that we sense perceive, understand that they're valuable. So here's reality check number to form should be determined by success criteria not by function, not by personal aesthetic preferences. Okay, by what constitutes success, why will people use this? Why does that matter to them? Why will the visual cues on the screen provide the guidance and information they need to take action? We're interested in outcomes, not features, and again, when you are talking about you, I design when you are defending your you I design. These are the things you need to speak to. That's why I'm giving you all this stuff. You need to have this stuff in your arsenal so that you can communicate with those folks on the technical side so that you can communicate with product owners and project managers and stakeholders in a language that makes sense to them. Form follows function on Lee works in situations where something has only one function. All right, which is true of nothing in this universe. People don't necessarily use things the way they were designed to be used. Take a look at this screwdriver on the screen, right? We all know that's for its for turning a screw. But think about this 1st 2nd what other things could you use that for? What else could you use it to? Dio? I'm sure you thought of things like, Well, I could pry a can open or I could use it, um, to put a hole in the wall. Or I could use it, God forbid to injure somebody. Right? There are all sorts of things that this tool do that it wasn't designed to do. And that's because convenience trumps best practice every single time, so it's a matter of asking the right questions. What aspects of the design features, functions and form are critical to success when timer resource is air limited? What design tradeoffs would least harm the design successes? You all know that you rarely have enough time or budget horror or approval in a lot of cases to do the kind of work that you need to do right to do design right or to do it well , meaning that both aesthetics and functionality to different degrees may have to be compromised. Their trade offs. You have to make that you must make what visually communicates value form follows. Function might dictate, for example, that all enterprise systems should look the same, which, unfortunately, they often dio for that all user interfaces should look the same despite the audience. Despite the subject despite data differences, would you design a first person game in a financial management app to look exactly the same ? All right? No, they're two different things to different audiences to different purposes. Two different sets of contents, two completely different things that exist for different reasons. So reality check number three is that function is only a single, isolated aspect of what drives and influences for its only one part of the picture. It can never be the entire motivation behind designing something and those of you who are developers who are naturally leading from a development perspective. I want you to really read this and think about it and think about everything we said here, you have to make your decisions based on all the criteria of success and on all the principles that you're going to see later on in this course function is a small part of that. 7. Every Force Evolves Form (So Don't Follow the Prescription): The truth is that every force evolves a form. This was first said by mother Anna Lee, who was a founder of the Shaker movement in America. The Shakers air, probably most famous for their style of furniture, which reflected this sensibility that every force that impacts on something evolves, how it looks. And as designers we designed with constraints were up against time rep against budget. We're up against tools were up against technology. We're up against underlying platforms and limitations and database issues and band with issues and all sorts of things. So every force that impacts what we do plays a role and what it looks like when we're done in any project for any kind of product, there are multiple forces that affect the design and development process. Okay, audience needs client desires, ethical obligations, right? Are we gonna do the right thing here? What could harm people? What dark patterns might we introduce that, you know, might get people in trouble? Aesthetic inclinations? What are people's personal opinions about what looks good? All right, that warms its way in there more often than we would like to admit technology constraints or limitations. What will this particular CMS platform Do what will this mobile app framework allow us to do? What? What does Google's material design platform dictate? Is the smartest thing in this situation because people are already familiar with it, used to it cultural presuppositions, right? We do. We really understand what this word means. Two people from different backgrounds with this label means will they understand what that icon means? Functional requirements. What actually has to happen? What what tasks and activities to people need to undertake? How does data get entered, stored, save, manipulated, etcetera, Material Properties? What are we talking about? We're talking about a six inch screen. Are we talking about a 50 inch TV with user interface? Are we talking about a laptop? Are we talking about the dashboard in my car that has a digital screen in it? What are the material properties with the physical form of this? How much time do we have to do any of this work, right? Is it? Do we have six months, or do we have two weeks to completely difference? Sets of constraints? What's available budget? How much can we spend on this, internally or externally? How much is the client paying us to do this. All right? All those things absolutely affect what we do. Available resource is how many people do we have? And do we have enough people to conquer all these things? The form of a digital product is also the result of an elaborate balancing act between you , I design information architecture front and HTML and CSS. Middle tier logic back and data structures and programming and processes. All these things together absolutely have an impact on what? The final you I is. Okay, so you can't just go off and say All right? I think the u I should look like this without talking to any of the people responsible for all these things on the screen. All right. It's a collaborative effort. It has to be There are too many moving parts here. And you as a u I designer, in addition to the principles that I'm going to teach you here in addition to the examples I'm going to show you and the things I'm gonna teach you how to be able to do you have to do all that in the context of these forces that are acting upon what you do that. Maybe limiting or constraining what you do so don't use form follows function as a prescription. If you do that now, stop it. Pure function is rarely the most important factor of success, no matter. Ah how vehemently, some folks responsible for underlying functionality will argue otherwise. Instead, you gotta focus on the relative importance of form and function when making design decisions. That criteria should inform the balance between those two things. Remember that every force of balls form again and again and again. The tradeoffs you'll have to make require you to be flexible. You got to be mindful of how this effects your success criteria. You should allow the description off form follows function to guide your efforts. It's an aesthetic guide. Objects with different functions should also look different. Aesthetically, beauty can and does come from function. By the way, a gaming app shouldn't look like an enterprise system right context. Each one has a different function, and that function is what helps to define what makes it successful. So finally, your I design mantra Number four is that every force evolves for 8. Less is More: Small Screens, Big Challenges: I want to start here with a quote that many of you will be familiar with. And that is this from Jurassic Park by Jeff Goldblum's character, Dr Ian Malcolm, who says, Your scientists were so preoccupied with whether or not they could that they didn't stop to think if they should. This, to me, is extremely representative of modern user interface design, particularly when it comes to Mobile APS. As much as we talk about simplicity on small screens, as much as we talk about a mobile centric approach or mobile first approach, I still see situations where there is just too much everywhere, not just in terms of volume of content or volume of information, but also in terms of animation. Okay, in terms of all the clever ways that we can go, Wow, look how cool that is. And in many of those cases, no one is really taking a step back and go, Oh, wait a minute. We know we can do this, and we know it's exciting and cool for us, But should we really do it on a small screen like the Apple watch? Less truly is Mawr Research has shown us that visual complexity can obstruct a user's perception within 50 milliseconds of exposure. What, you to read that again? 50 milliseconds? You know how fast that is. That means that if instantly it feels like too much. If instantly it feels like, Oh my God, I'm going to figure out what all this stuff is. Before I could do anything, they're gone. You lost him, all right. As exciting and innovative as this product is this Apple watch. The reason it hasn't taken off to the degree that I think Apple certainly expected it to has everything to do with its form factor and how it's created. As simple and self obvious as a lot of these icons are, it is still a lot to deal with in a very small space. That's a fact, and that's not going away. So if it looks too complex, we assume that it's hard to use. Or at least it's time consuming to figure out how to use. Even if it truly isn't, that doesn't matter. What I'm trying to get across you is we make a split second decision based on what we see. It doesn't matter if reality is Hey, you know what this is really sip. It'll take you five seconds to figure out. If that's the perception, we will never take this step to figure it out. But I want you to understand that this is not about simplicity. For the sake of simplicity. This is about making clear, immediate impact via ruthless editing. That means we're Onley, including what's useful for the task at hand. You've heard me talk about progressive disclosure what's important to me right now. The key, however, is not to go too far in your pursuit of simplification, and I'm gonna pick on flat design again. Common your eye elements like buttons, menus. Common actions are a very significant part of what makes a site or a nap useful. This chrome, so to speak, is often minimised in favor of increasing valuable content on screen. That's a trend that has turned into an approach, a mandate of some sort, and it's a little backwards. In theory, I get it right. There's a noble pursuit. It's logical, but in practice it can be dangerous. It could be counterproductive on it can have the exact opposite effect of what we intend. All right, here's what I mean. Take a look at the example on the right, Um, is from a site called Menagerie, which you will see again. By the way, As as nice as this is, it's well designed that typeface choices air well considered. The negative space is well considered. Take a look at that, especially at the bottom, where there is this horizontal line with the words shop now now, although a lot of people will probably tap on that to see what it does. That shop now doesn't look like an interactive element. It's the same color as everything else. It's very small. It's understated. It does not say in its appearance. I do something. In other words, it probably needs to be a button because a button says, you touch me, I do something that's accepted understanding That's convention. That's the users mental model that I talked about in the last lesson. All right, we have an idea of what things are and how they work, and the minute you forced me to reevaluate my mental model or learn a new one, the minute something doesn't conform to my expectation. I have trouble. I promise you, because I've seen enough of this myself that if you put this site in the usability lab, people gonna have trouble with this. They're gonna say like, Well, how do I find the products? I guarantee you on my eyes, OK, I guarantee you hiding elements can be costly. I caused without labels, for example, are much worse than labels alone. Alright, designers often believe that icons or pictures provide a greater degree of recognition while saving the screen space. Logically, I get it. But in fact, those things often go on used because they're vague. If I don't know what this is, if it doesn't fit my model of what something means or I've never seen that icon before, right and I'm supposed to understand what it means, it's gonna confuse me. Less chrome, less guidance, less labeling, less navigation, less whatever means that users have to work harder to discover those things, particularly when it's hidden beneath a gesture. If an opportunity and interact isn't visible, people assume it isn't available. One thing I see constantly is that the designers and developers assume that because all these gestures air available that people will automatically know that they exist. OK, take a look at that that list on the right. These are common gestures built into most mobile APS sites and systems. The problem is, there's a lot of research around the fact that no one knows all of that. There may be a handful that are common to people, and the rest of stuff is hidden. And what I'm seeing is a trend where designers and developers are making everything on Lee accessible by gesture. Well, guess what? If you don't know the gesture, you're not gonna access anything because you don't know it's there. That's irresponsible, To be honest with you, okay, it's It's just it's sloppy. It's it's poor design. It doesn't take in consideration that you'll have people of varying skill levels in various levels of familiarity, right, and it absolutely flies in the face of accessibility of any kind. It's lazy. Don't do this. Expecting users to discover an interaction by trial and error is a recipe for abandonment. They'll get pissed off in the leaf 9. Five Rules for Small Screen Design: So here are five rules for you to follow. For small screen design number one, focus on context of use. There's that phrase again. When are people using this app for this site? When they're stressed when they're bored, when they're busy when they're lost, the available features and functions, whatever you build in there and the way that they work the way that they look, their degree of accessibility, the position of priority they take on the screen should fit the situation. What is the context use? When are they doing this? And what are they doing in that moment? Where they trying to accomplish number two? Simplifies, simplifies. Simplify. Yes, that's a joke that it's there three times. Okay, Each screen should contain one primary action no more. That means every screen should provide something useful, meaningful and valuable. This makes the product easier to learn, easier to use easier for you to add to later. And I also want you to abandon the idea that the number of screens or steps matters because it doesn't all right that this comes from the idea that people you know will only creek three times before they give up its it like it's a desktop thing, right? We've been hearing that for, I don't know, 15 years. It wasn't true then, and it's not true. Now. People will tap, click, swipe 1000 times if every one of those actions delivers something valuable back to them. I'm showing you the lift screen on purpose, because while a lot of people use it, there's just way too much going on here. I have no immediate instant sense of what I'm looking at. I sort of get the sense that there's a car that's 12 minutes from my location. But what about these other cars? Are all those cars available are only some of them available? And in this interface, you actually have to tap, or you can tap on these cars to get information. What happens when they overlap like this one on the far right now? Can I tap both of them? I can't this little these little icons down below lift four seats, 12 minutes plus sixties. What if I don't know what that means? Does that mean there's a car with four seats? What's to between that? And plus, aside from the seats, it's getting to something but It's making me work to interpret what that ISS the set pick up. That's great primary action, Big and bold and Purple has the most contrasts. Well done. That's the way that should be okay, But there are a lot of sort of ambiguous things happening on this screen that all are sort of working against each other to some degree as to you know, how to figure out what's going on here. Number three. You half the design for thumbs, not fingers, which a lot of designers do, um, designed for thumbs, right? Can people use their thumbs to do the majority? The work? The right answer to that question is, yes, it's always yes, it should always be. Yes, Stephen Hoover did some amazing research on mobile device usage, and he found that the vast majority of people rely on one or both thumbs interact on their phones. OK, that means you have to place menu items frequently, use controls and common actions when an easy thumb reach. That's the reason you're now seeing a lot of bottom menus navigation that use on APS and and mobile sites, because that's where our thumbs are related to that you also have to design for fat fingers controls and their associated tap targets should be a minimum of nine millimeters, which is 48 pixels in diameter. Anything smaller than that is really difficult to tap with any accuracy. And here's what happens with people if they tap on it once it doesn't do anything because they missed the target. Their immediate assumption is not. I missed the target. Their immediate assumption is to stand. Thing doesn't work. Anything smaller than 48 pixels makes it very hard to tap easily and accurately. So you need to provide ample space between targets so that users don't accidentally tapped the wrong target. I showed you live screen a minute ago. You see how those cars overlap? Here's what's happening there, Developer is saying, Well, that's actually where those cars are. That's what the map data tells us. The right question to ask. There is how do we represent this stuff? How do we make sure there's always X amount of space between icons so that people can always tap on one together? It doesn't matter at that point how geographically accurate they are. What matters is that I can tap and get toe what I need to get to so that Ah, pop up or whatever can tell me. Hey, this car is 20 minutes away from you. Okay? Minimize the need to type. Even in the best of circumstances, typing on a phone is a pain, right? And in quite frankly, even on a larger screen, even on a tablet is still a pain because of the position your hands, because you have to hold the device and use it at the same time. In most cases, it's not like we're gonna laptop with laptops on a surface, and you don't have to hold its weight while you type. All right, so this is difficult, period. It's a slow process. It's almost always filled with errors, so the less it's needed, the better. That means you keep your form short and simple. It means that you're ruthless about removing unnecessary fields. It means you use auto complete, personalized data wherever possible, unite the app for members who you are what you did. If you do something all the time, it should remember those things as well. You want to make technology doom, or so that the user can do less So you I design mantra number five. As part of our little introductory segment here is on small screens, less is more. 10. 09 Balance Creating order: we start our journey into organizing visual information with the principle of balance. Balancing any layout means that you're arranging the positive elements and the negative space as you'll see, so that no one area of the design overpowers the other. Unless, of course, it's supposed to balance. Make sure that everything works. Everything fits together. Remember what I said about form and function and the idea of a spiritually union? As Frank Lloyd Wright said, The idea is that they're integrated. They work together, they support each other. Balance is a big part of achieving that. When a design is unbalanced, it means the individual elements are competing with the whole. They call too much attention to themselves. Our focus is on the trees, Okay, the individual parts instead of the forest, the whole, the entire thing that's being communicated. That's the difference between a layout that looks like this. Okay, you see those lows large, weird areas of negative space between the elements. They're not consistent. They're different in size, with widths between elements are very different. So you're I naturally goes to those darker shapes. OK, those pieces, your eyes focused on the shapes as opposed to how everything That's their works together. Compare that to this where everything is very ordered, structured, balanced noticed that the negative space the channels between each item are the same with that suggests a relation that automatically says through the eyes and to the brain. These things are interrelated and makes it a lot easier to see how everything works together. All right, I'm gonna show you a concrete example of that Smashing magazine did a recent redesign, and unfortunately for a design organization that should certainly know better attention is drawn to the individual elements. Instead of clarifying how they're related to each other, there's a lot to look at here. And because of what they've done, in particular with negative space between elements, it's very difficult to sort of look at this as a whole. Related items don't hold together because there's too much separation. The symmetry that they're using here notice how there's a split down the middle and the layout is purely symmetrical. On both sides, it doesn't provide any balance because the gaps between elements are too numerous. There's too many of them and they're too large. So what you see is essentially this again the eye picks up on every single one of those darker elements that you see there and our focus constantly gets pulled back to each of those individual shapes because of the varying negative space that surrounds them. That prevents us from quickly scanning from quickly reading and, most importantly, from comprehending what we see because we're distracted. That's a subconscious thing. It's an instinctive thing, but the brain and the eyes are constantly singing back to these individual elements. Like what? What, what? Instead of focusing on group group group group group and quickly understanding what's there now, the way to solve this isn't with the radical redesign. We don't have to radically reimagine everything on the page here. All we have to do is adjust the negative space between elements to balance things, to create groups of related information as opposed to individual elements, all screaming for our attention. That would look like this. OK, and I'm gonna show you a side by side comparison. But for right now, take a look at this. Everything is a lot more segregated in its own category. The knave items hold together. Most importantly, these articles okay, we have the person's picture their name, the article title, The links below two comments. The tags, performance service, workers, checklists. They all hold together now as a sort of one element, and that's has everything to do with the amount of negative space around them. So let's look at these side by side. No show you the difference. Here's what we had before and here's what we have now. Now, before I show you the abstracted version of this, that makes this a little clearer. Just take a look at that. Okay? Does it feel like everything holds together a little bit better? Does it feel like there's two chunks of articles one on the left, one on the right, as opposed to disparate elements that may or may not be related? This is small change, but to the subconscious, to the way the eyes and the brain work together. This is a very big deal. This shaves seconds off cognition. It also prevents the back and forth that I talked about before, where people will feel aggravated or confused or fatigued. And if you're in a usability lab testing situation, they won't be able to tell you why they feel that way What they'll say is something generic like this page doesn't work. It just doesn't work for me. It's hard to read or some other generic statement that essentially said, Something here is bothering me, but I don't know what it is, all right, and here's what it is, this tripping them up. We've got a bunch of individual elements that again are sort of all floating in space, not holding together very well. Now look at the option on the right, you see the difference. Closing those gaps turns a series of objects into a group of objects. That's how we perceive things. These abstractions is a way of demonstrating how the eye and the brain actually worked together to perceive things. They're chunks of related information on the left. The I. It has to dig through and perceive 46 different visual elements with the quick redesign is not really a redesigned but the adjustment on the right. The eye perceives 25 visual elements. Ah, lot less cognitive work, which clarifies the relationships between things, so reducing cognitive effort by improving balance goes a long way in delivering positive user experiences again. That's not something anyone is ever gonna be able to articulate to you, but it is most certainly there, and you have to watch out for this. 11. Case Studies: Improving Balance in UI Design: The job of balance is to create order and signal relationships in layouts like this. This is the Drudge Report, which has been around for a long time in his notorious for its purposeful bad design. Um, and you know, there's an argument to be made that, Hey, it's been around for a long time and it hasn't really suffered. But that doesn't mean that it can't be improved. That doesn't mean that it couldn't be easier to use. That doesn't mean that it couldn't be even more meaningful to its audience. There's really kind of no excuse for that. Everything could always be better. So just saying, Oh, well, it's been that way forever and it works. It's a poor excuse. You can always serve your audience better. And here's how the Drudge Report could do that by making very, very minimal changes. Here's where we are, is what we got right now. If we took that same layout and did this, where all three columns are the exact same wit from left to right, the padding in each column is exactly the same. Take a look at the one on the left. See that middle column? It's much narrower than the other two. In addition, there's not a whole lot of padding inside those columns. And because everything is so close together at the edges of the columns, it's sort of blends together like one big thing, as opposed to reading as three columns of information, the layout on the right, with the additional negative space specifically between those rules between each individual item that separates things that provides balance This then this, then this. Then this. Then this. It allows us to really quickly in milliseconds scan through this and get that. Okay, this is one piece of information. This is another. This is another. This another right. This is one story related to one topic. This is the next topic. This is the next topic. So on and so forth. So what? The existing layout looks like if we abstract it is this. You see the volume of noise. There, you see how everything sort of is too close together. There's a lot of vibration, almost where everything is sort of screaming for attention. Even though those large areas of photographs are heavier and certainly stand out, there is still a hell of a lot of competition because of all the positive and negative shape interplay that's happening there. Everything is way too close together. Compare that to this. You see the difference. It's not a radical change, Okay? We didn't radically change anything. But we did do is provide some order. We provided some visual evidence that certain things are related and certain things are not related. Small change. But it makes a big difference now if we take this one step further. Okay. This is our improved layout with improved balance, improved negative space. If we take that and get rid of the rules, we get this. See the difference? A lot less visual noise. So that begs the question. What are those rules really doing? Are they providing anything? Are they really providing any value? No negative space can do that job by itself. All right. The channels that are created vertically and horizontally are enough for the brain to separate things and again quickly step through and say one topic Next topic Next topic. Next topic Cognition is a lot faster and again, I want to stress that we didn't make any radical changes here. People often believe that Oh, well, this has to be completely redesigned. That's not always true. Sometimes a very small shift in a layout is enough to improve. It is enough to make a quantum leap in user experience stairs where it looked like with the rules and again with the improve space. And here's a little like without the rules much cleaner, especially because the text is underlined. The links are underlined. Already. Those extra rules are just distraction. They don't really serve any purpose logically. Okay, a designer or developer will think themselves well. If I put a rule around this that automatically separates it, sometimes that's true. In cases like this, it does the exact opposite. It simply creates more visual noise for the eye to contend with, Right? So this is what balance is all about. Three columns, three channels of negative space. Everything is ordered, everything feels balanced, and that balance improves cognition. Here's another example in a content heavy layout like this, where there's a lot of text line images, a lot of things to look at. Balancing negative and positive space is a mission critical kind of thing. Okay, you've got a lot to deal with in an organization is saying no. We have to say all this stuff immediately. We're not willing to sacrifice any of it, which I'm sure none of you have ever had to deal with, right? They want it all up front. So you say. Okay, how do I best segregate this? Especially when you've got multiple layers of navigation like you see here. Balance in this instance allows users to quickly scan, identify and group related visual elements. Okay, so what you get is this chunks of information each one held together by their closeness to one another, but also similarities in shape and size balance between those those negative space channels we talked about. And I'll show you exactly what I'm talking about in a minute. Okay? But as much as there is here, it still feels balanced. You can sort of still see what's related to what the negative space here is. Working the signal visual hierarchy using size, using weight, using alignment. And we will touch each one of those principles during this course. So what you're looking at from a negative space perspective is this thes boundaries air working to define and group visual information. So here's a situation where the negative is actually more important than the positive thes channels that you see here. All right, These dark areas lead the eye through the land. If you follow those arrows, this is what happens. You go across and down constantly across and down, across and down, across and down, across and down. So that balance that we've created with these shapes OK the attention that we've paid to how this information is positioned, grouped and how the containers work. All works toe again. Speed cognition, improve our ability to quickly scan, read, understand, comprehend and eventually act on what we see. So, design mantra number six is that balance creates visual order and signals relationships. It is the first principle of good design and the one you should always pay attention to. 12. Rhythm: Establishing Reinforcing Comprehension: The next principal I want to talk to you about is rhythm, which is exactly what it sounds like. Rhythm occurs when the intervals between elements okay, we looked at negative space a minute ago. Rhythm occurs when those intervals are predictable when they're similar in size, when they're similar in shape, when they're similar in length, when elements repeat at regular intervals, the visual rhythm that's created speeds, identification and users ability too quickly and for what those elements are and understand what they do. I'm gonna give you an example. Here's Lincoln on the iPhone Success as it were. Here's how rhythm works in this situation. Again and again, I want you to think of rhythm in terms of music. Okay, when you listen to music, there's usually a meter. There's a time signature where you go. 121212 or 123123123 Okay, there's a rhythm. Take any popular song and tap it out and you'll get a rhythm. So in this layout, rhythm works like this. 123123123123123 You see that those elements because they're all related because they're all the same type of information. Follow the same rhythm person's picture, their name and a summary of the message. Constant consistent. Repeated. 123123123 two or more of anything in a layout when they're related. Okay, when they're the same size, one of the same shape, when they're the same font, when they are visually treated the same way. And, of course, when their meaning is the same two or more of anything in those cases implies related structure. These things go together. These things work together. These things perform similar functions. Okay, that's how rhythm is communicated in the layout, even in something is dense. And as visually complex as this is, there is most certainly rhythm present. And it works like this. We're gonna start at the top left. We're gonna go across, and we're gonna go down. All right, so take a look at the top left menu. 1234567 Those seven elements are related. There is a rhythm there because of their proximity to each other because of the negative space between them, because they're all the same size and essentially the same shape, right? That's rhythm. Go to the right. Same thing. Three related elements next to that same thing. Three related elements down here in the main knave. It happens again. Navigation under that same deal, breadcrumbs Underneath that same deal, the filters and options on the right hand side also have their own rhythm. The navigation on the left. Same deal. There's a rhythm implied there. Noticed that numbers two through five are closer together, so the rhythm changes slightly there. But because it's in the same spot because it falls directly underneath. And because the relationship between those four things are consistent, the rhythm is maintained. Okay, there's a break. There's a There's a course between the verses, but it still works. So this happens all over this layout and you have rhythms within rhythms. Okay, it just keeps happening. This is what allows us in addition to the principles of balance that we talked about. This also allows us to move through something quickly. All visual design, good visual design has rhythm. The rhythm is either consistent or it's broken. When it's consistent, we have a greater understanding almost instantly of structure of how things are related, of how things are organized, of how we get to other parts of the interface. But here's the thing. If you create structure, you also have to control it. And I want you to keep that in mind because the other principles that we're gonna go through in this course are the means by which you control that structure. Setting out rhythm is fine, but if, for instance, on a screen like this, there is a ton of visual information, you have to work a lot harder to control that structure, to control how it appears to control, how people move through it, ah, and to control the degree of complexity that people have to contend with as they move through things. So Design mantra seven is this. Visual rhythm speeds, comprehension and use. Never forget that, just like a song. Get your toes tapping her in your head goes react that that that that that that that that it's the same thing except that happens visually, the eyes in the brain moved through and respond to that rhythm in order to quickly understand and comprehend 13. Harmony: Shaping the Parts Into a Whole: the next principal on our list is harmony. Harmony happens when visual elements relate to and complement each other. Harmony is a big, big part of what holds individual missed together visually to form a greater cohesive whole . Remember, we talked about not seeing individual elements and seeing the layout or what's on the screen as a whole. Harmony is a big part of that. As you will see, harmony comes largely from rhythm, which we just talked about and also from repetition, which, of course, is a contributing factor to how well rhythm works. Or doesn't this repetition reemphasizes visual elements that connects and creates areas of attention? I'm gonna show you how this works. All right. Take a look at these shapes and how they are aligned in work together. These blocks and this text are working in harmony with each other. That's because the blocks are aligned on both the horizontal and a vertical access. There would be no harmony here if the shapes and the texts are. The placement of those things was random. And what I want you to notice is how the text is aligned to the edges of the block by the same amount of negative space in each instance. Okay, here's the negative space between each. You see how it's exactly the same everywhere. The space between the edges of the text and the edge of the shape is the same as the distance between the shape and the next shape. It's consistent that harmony is. What creates a unified whole is what creates the relationship between the text and the blocks of what holds this all together. It's like glue. Here's an example in a layout. OK, take a look at this quick mobile app if you break it down to its parts. What you have are a series of shapes, all aligned by common distances. You see the same thing happening here that we just saw in the previous example all those gutters. Those areas of negative space are exactly the same. Notice how in the top two boxes, the upper shaded portions are exactly the same. The lower shaded portions are similar as well, and even when the length changes, that consistency that harmony in the negative space between them is what holds them together as similar elements. So one way to think about harmony is that it's a visual echo. Different elements echo other elements. Attributes carry through a layout. I'm gonna show an example of how that works. You saw this layout in the very first lecture when I introduced the idea that, hey, print design is an awful lot like interactive design in this layout for Dinosaur magazine. Notice how the shape of the text okay, the overall negative and positive shape of the text on the left echoes the shape of the image on the right. That's how you create harmony in a layout that's a visual echo. That's an obvious example, of course, of a visual echo. And the way that that presents itself in an interactive layout can be this obvious. But sometimes it's a lot more subtle like this, all right, there's a lot going on here, but there is still a tremendous amount of harmony, and here's how that breaks down. If we take a style. Okay, let's ghost this out a little bit. If we take a style like shop, men's at the top at the very top left. That typeface that's chosen there. That big, bold black typeface is not only used here, it's used in smaller sizes and department style size price all the way down that left. Now that's a visual echo. That's harmony now by popularity of top. It's this magenta color that is echoed as well in men's tees, right? The subheds that you see in the left. Navis also echoed underneath each product description where the prices are. That's a visual echo. Same goes for newest of the top. It's Ah, big bold typeface. But that blue is echoed elsewhere in the view all links next to the categories in the individual sub categories under each category. The Zen Echo. It's similar, I wish we want you to pay attention to these little grey bars between the categories on the left. Casey, this little arrows that just put there that's harmony as well. That's consistency and how those things were treated in how they're delineated and how they're separated from each other. Harmony also happens in how the images, air treated, noticed that they're all the same size and same shape with a blue box that communicates whatever the sale percentage happens to be in the bottom left. Same thing every time. That's harmony. That's visual. Echo also noticed that the second and fourth items in each row have a slightly darker background. That, too, is harmony, and it's also rhythm and it's also repetition like we saw before. These are all the things that allow us to sort of quickly move through this layout. And finally there's harmony again in the descriptions of each product. So the size, the shape, the placement of everything is also harmonious. Everything is working together in a very purposeful way. There are no accidents here, Okay? Everything I just showed you didn't happen arbitrarily didn't happen because someone said, Oh, that would look cool. This is all very purposeful. And I think that after you get through this course, you will be able to see in different layouts in different, um screen you. I designs. Even if it looks good, you will be able to tell the difference between something that is purposeful and something that was just done because someone's decorating. They thought all this would look cool. 14. Using Harmony to Create Directional Flow: harmony is also directional. I'm going to show you an example from my own website for goes this out. Everything here is designed to lead your eye from left to right and then down, left to right, down, left to right, down, left to right. Okay, Every element that you see on the screen is very purposeful. If we start from my logo all the way to the social media icons on the right, even though there's a huge gap because they're literally right across from each other from left to right, the eye goes that way from one element dead spacing between next element. Your brain wants to make connections between things. That's what it does automatically, it says. All right, here's this thing. What's next? Constantly. So when you designed things in a harmonious way, you are playing to your brain's natural ability. Same thing with a naff here, left to right, all the way across similar elements. Similar size echoes okay, go down. One collaboration and guidance to drive Houston R. A. Y left to right. See how my head and the other person's head and the other bald head three ball guys right on the right hand side. You see how they're all pretty much in line with each other. And if you go all the way to the edge of that photograph, you notice that the last points that that last guy's head there's a ton of plain white negative space above it that is purposeful to because that completes the left to right movement. Okay, you're I naturally goes to that big dead spot. We're going bald head, bald head, bald head and that extra dead space sort of reinforces and kind of makes your I go there. That again is harmony. That's direction. That's purpose. Same thing with this little tiny arrow that I have in between the text and the image. It's a tiny, subtle little thing, but it forces again the brain to notice it and go. OK, we're going right. We're going right. Same thing with this headline Down below goes immediately to a promotion, which is Hey, here's a free thing you can go get and then you go down, right? So all I'm trying to get across to here is that all these decisions are purposeful. They're not arbitrary. I didn't wake up and say, okay, I want to design something that looks nice. No, I said, How my pulling somebody through this layout. How do these elements work together in harmony Toe pull people from left to right and down the page. Here's another example. We have all seen a search field. There's a directional flow. There's weight. That happens. The fact that that search button is very high contrast or a dark color white text it definitely jumps out. It comes forward, so to speak, individual field that pulls you from left to right. There's a logical flow cause and effect that to is harmony. That's a logical flow of information that is created visually. 15. Case Study: Using Harmony for Better Form Design: There are a 1,000,000 articles out there right now about good form design, and they're all excellent. Okay, Most of the stuff I read about how to design a great form is very solid. But the thing that they never mentioned in a lot of cases is how harmony and direction works. To pull that off only illustrate that for you. The first thing is that these fields are the same with, and if you go across both, if you combine the width of those two, top feels they're the same as those longer fields below. That's harmony, even though those 1st 2 fields are different lengths than the ones below it. Their combined with is the same again. That's harmony that matters. The submit button. The width of that is what we call a purposeful anomaly. It's different than everything else. It's a totally different with than everything else. That's what anomaly is, by the way, in case you're not from there with that term, it means something that breaks the pattern that is completely different than everything else. Okay, so the fact that that with his shorter is important and call us out because I see a lot of forms where the action button the interactive component. The thing you're supposed to click on or tap on after the form is often the same with as the fields that actually decreases usability. It actually provides a poorer user experience because the visual cue that says here's what you act on is not nearly as clear as it is when the interactive component is treated very differently than the input that exists above it. That anomaly is important. That difference is important. I also want you to notice that the height of these fields is the same, and the height of the button is the same as the fields as well. So even though this anomaly, we also retain some little element of consistency to tie it together, that's similarity. And height between the button and the fields is enough to say this goes with this. You'll also notice that the vertical distance between the fields is consistent, but it changes again when you get to the submit button. And even though that change happens, there's harmony in that changes well because you'll see it repeated. If you go up to the 1st 2 fields, the horizontal distance between those two fields is the same as the distance between the last field. In the submit button, that consistency is important. So if you use a gap of a certain size agutter of a certain size, negative space padding, whatever you want to call it, if you do it one place, you should always be looking to echo it somewhere else. That's harmony and again, as we said in the last section, there is also rhythm here. 1212121 to write. The rhythm of the label on the field is repeated at consistent visual intervals. Those last three words are important, consistent visual intervals, which is harmony. So the sum total of all this working together is that when you hit a page where this form exists, your eye does this across down across, down, across, down. All right, that's the pattern. That floor was established through balance, rhythm and harmony. The fact that we are reemphasizing style, shape and alignment enabled this flow, and by doing so, we allow people to get through the form really quickly, which makes it feel easy to use. So you I design Mantra eight is good. Design has held together by harmony by visual echoes by the combination, off balance, rhythm and repetition. Those three things working together create harmony. 16. Dominance: Directing User Focus: Our next principle is dominance, which means commanding, controlling, prevailing over all others, right? Big word, powerful word and also a very powerful parts of the principles of visual hierarchy, right, signifying importance also of progressive disclosure, saying this is more important. Do this first, then this. Then this, then this. If you look at this photo, there is obviously a dominant element here. Okay, these funky looking shoes take up a significant portion of the screen. Real estate. They're big, they're bold. They're dominating the screen. Your I cannot help but go back to them. You know, if you're trying to read this stuff below it, not the same time. This is dominant as well, even though it's much smaller and takes up a lot less of the frame. Look at this photo. Can you stop yourself from looking at that camera in the center? No, you can't. Why? Because it's surrounded by a ton of negative space. Even though that wood is something visual that we can perceive and see and look at, it's sort of the same. It's consistent. It's sort of a regular repeated pattern from left to right in the entire frame. But in the center. You've got this weird shape that doesn't conform to anything around it and is surrounded by similarity. Okay, it's an anomaly. Remember that word? This camera is an anomaly in this picture, so size does not matter. That's what I'm trying to hammer home here. How big something is does not necessarily signify its dominance. Dominance is not a matter of size. It's a matter of contrast. It's a matter of placement. It's a matter of appearance, and we're going to dig into this. What's the first thing you see her? Where is your attention drawn? Pretty obvious, right to that image on the right hand side that has all the blue and the texture and all these overlapping lines. That's the area of most contrasts. Even though it's the largest thing on the screen, it's also the most full. It's the most saturated. It's the most visually complex area of the screen, so you automatically go there. Dominance is achieved by emphasizing one or more visual elements, and this has got a lot going on there. There's a lot of intersecting lines. There's color in and out. There's areas of gray, there's areas of black. There's areas of white. Okay, all those positive and negative shapes. All that interplay is creating dominance. There's so much complexity that we can't help. But look at this creates a focal point where most people will instinctively go. At first glance, that dominance can create an entry point in the design. It's a starting point from which you lead the person to the other parts of the screen. Remember everything we've looked at up to now, especially in the last example of the four. You are purposefully leading people from point A to point B on a screen. That's a big part of what dominance does. It shows us where to start it screams start here. It's a lot like Have you ever seen a sign with a big red dot on it that says You are here right when you're trying to navigate towards something dominance, that the same thing tells you where you are right now or where you should start. Dominance enables and directs the flow that we're talking about. So from a primary dominant element from your starting point, design flows achieved by creating elements with secondary and tertiary dominates other words. Dominance decreases, the more elements you add, and you do that in a purposeful way. You make sure that there's one leading element, and you make sure that everything under its has a specific hierarchy from most important to least important dominance relies on contrast, clear differences. Individual field, which this layout has in space, from the bright orange bar at the top to the image below it to the very crisp, clear black texts with lots of negative space around it below all those areas of contrasts , suggests differences. Now, in terms of the dominant element, you can't help but look at the very top and that image together. That's where the most color is. That's where the most activity visual activity is on the screen. So you're I can't help but go there. That's dominance, so that gives you context. Here's the date of this article. You get the image that says, Here's what this articles about and then you go down to the headline, which set your expectations as to what the content is about. By creating a dominant element like this, what you're doing is you're revealing what's most important in your design. What is going to immediately send a signal or get somebody's interest. What is this? What's it about your showing people where to look first and overlay a motile right and pop over like this accomplishes the same thing by darkening everything else in the background. Your attention is immediately called to that middle box, that little circular illustration at the top because its a unique shape, it's It's an anomaly visual anomaly. There's that word again from everything else. Your eyes immediately drawn to it, and then we got a big, bold headline, Beautiful Spaces. Then we have some very calm grey texts below it, and then we have a next button at the bottom. This goes again. The flow goes from top to bottom from most dominant element, which is that circle to the least domine element towards the bottom. Your eyes lead through this in a very purposeful way, and here's I want you to notice again that next it's a button. But it's more sort of, Ah, visual treatment that extends from left to right, even though it's big. Even though that's a big area of color, it is still not the most dominant element. Why, because has a lot less contrast than that circle up above and contrast to something you're going to hear a lot more about 17. Using Dominance to Increase Focus and Decrease Cognitive Effort: when there's no clear dominance between elements, they compete with each other, and when they compete with each other, we have a hard time focusing on things. Here's Apple's stock app. There's a ton of contrast here all over the place, between the white text on a black background between the green tax and the black background between the red text on a black background between the red buttons, seemingly buttons and the green buttons. OK, everything is competing with everything else in that top row for your attention. Without a dominant element on the screen, you just have to work very hard to find their own entry port. Now they're trying, in this case, to highlight one stock right by that lighter gray border that highlights the Apple stock. The problem here is that not enough. That is not enough to clearly separate that row from everything else. There's no dominance here. That's a very subtle signal, and all that does is ADM or visual noise doesn't clarify. It just adds another element for the eye to contend with. Here's another example. Macy's Everything is read. Everything is red on black with white text. All these things compete with each other. Nothing is important here. Even the ad below the Web Busters piece is competing with the sales measures at the top. The one day sale is competing with your navigation. It's all the same, all right. It all runs together. There's no dominance here. Everything is equally important. Everything is screaming for attention. And because the degrees of contrasts, the ratio of positive to negative elements, everything here is consistent. Oh, it through. It's all the same. So there's no dominance in that layout was important about all This is the fact that we are wired as human beings to conserve effort. That means the least amount of work to us is what we're going to do. And that least amount of work may be moving on to another design, another screen, another site, another app. The lack of dominance is a large part of what causes people to abandon things After hitting one single screen they get. There they go. Okay, I don't even know where to start with this. They may think that consciously, they may think it's subconsciously in either case when there's no clear dominance was no clear flow when there is no clear hierarchy. People bail. I'm not doing this is too complex, and again they won't be able to explain it in those terms. They'll just say it's too busy over here that layoffs too busy. That's what that means. It doesn't mean there's too many things. It means that there is no clear dominance. So how can we make the area focus more dumb? How can we move this into the realm of clear hierarchy? Well, by doing this, okay, whatever I highlight is the thing that I am trying to focus on as a user. So when I highlight something, why not darken everything else? You see the difference that instantly creates a dominant element. I am looking squarely at the thing that I just touched. Everything else doesn't go away completely, because in this instance we're looking at stocks, so the context is important, or at least on some level, being able to soar. To see surrounding information is important, which is why we didn't get rid of it completely. And like the other redesigns that I've showed just so far, this is subtle. It's a tiny little change. It doesn't require ah whole lot of effort, but it pays a big dividend. How do we do that with the Macy's layer? Right? This is even more complex, even more gone here. Well, again. It's really not that hard if we make some changes to how we treat things. If we get rid of the separation between that top knave bar and the ad at the top of the limited time savings were just a tap away. Keep them all a consistent background. Okay, make a rule. That says, Here's how this works. There's always just text. It's all a red background, it reads, is one element. And for the store in terms of their strategy, their business strategy, their purpose. This is the most dominant element, or should be the most dominant alone page, because what do they want you to do? They want you to buy. So that limited time savings message and that shop now button are the things that they absolutely want to call your attention to. First Red, black and white is the most contrast you can ever get. With any color combination, it's unbeatable. So to do that at the top as one single element is an absolute wind. There's nothing on the screen. It's ever gonna be stronger than that. What maintains its dominance is the fact that the navigation items are all great out. Forget about the writ. Okay, so that it's not as important as the stuff above it. It's still there. It's still visible. Still, Lives is still really comes forward. It's clear, but it's not competing with the area of intended dominance with the area of primary focus. Same thing with the ad below instead of that big, stark white background, which screams to the I Hey, look at me, it's still there. There's still a lot of contrast. You can still see it. The shop now button stands out nicely from that black background, but there isn't so much contrast that it screams for your attention. OK, do you see the difference? We go for an area of absolute dominance, and then we step it down as we go through things he offers of primary importance. The navigation is of secondary importance. The ad, the Web busters ad and the ads below it are of tertiary importance. You establish order by starting with a dominant element 18. Creating Dominance with Size, Negative Space and Contrast: now greater size does equal greater dominance. But, as I said before, size is not the only way to create dominance. More contrast also equals more dominance. If the smaller shape has more contrast in a larger shape, guess what the small guy wins. It's the contrast Trump's size every single time. It's also true that more negative space equals more dominance, even though that big border contains MAWR stuff. It's bigger. There's more of it. That trap negative space in the middle focuses your eye on that center square. So let's look at a couple more examples. Which element is most dominant here? Pretty obvious, right? This gigantic red image in the center is totally dominant because it's got the most contrast. It also has the most color saturation. And in addition to the contrast between the picture and its background, there's also a high degree of contrast between the text on the Left Air Jordan flight suit and the red background that it sits on. Okay, so this winds automatically what elements most dominant here pretty obvious as well. This image has the most contrast. It's the area of the most color, and it it absolutely separates itself from the stark white behind it. Alright. Google did this from Day one on purpose, and it's why the perception is that this is so easy to use also because there's only one thing on the screen essentially of primary importance. In that search, Everything else is set very far apart in proximity from the search action. But this single image approach creates instant dominance. There is no question where you're supposed to start on the page because the search is always right below it. Which element is dominant here? A little tougher, right? This continue but is most on, And the reason for that is because it's a visual anomaly from everything else. OK, take a look at all that's going on here, even though there's a lot of contrasts in those images down below, they're not big areas of flat color. There's still a lot of activity inside each one of those images. This button stands by itself because it's the only one of its kind on this page and is surrounded again by a very dark color. The contrast between those two things goes a long way and saying Hey, do this. How about here? Answer is none of them. OK, nothing here is dominant. It is all of equal visual importance from size, the negative space to how balance and rhythm and harmony is applied to how color is used. They all just sort of work against each other. They're all screaming for attention. All right, if we look at this stuff, all these things are pretty much the same. All right, the user testing sign up, get paid to test pricing and sign up. Watch a demo. They're all essentially the same size, same color use, same amount, almost of each color in each instance. All right, nothing really stands out because they're all sort of the same. These three things. There's a constant ping back. Okay, I'm going from logo, Two buttons, two buttons, Alotta buttons. You're going in a loop, and you're I can't settle on any one thing. All right, this big area, this huge photograph is calling a tremendous amount of attention to itself, and it's absolutely fighting with those buttons are on top of it because there isn't enough contrast, and there's way too much detail. These photographs. There's a 1,000,000 little areas of positive and negative space from the folds of that person's shirt to the lace detail on the other woman's red shirt, to all the shelves behind it all that all those block areas that get created their shapes all over the place. Then you're putting text on top of it, and you're creating even mawr interaction between positive and negative space. There's a 1,000,000 trap spaces in that text and detail of the photos running behind it right the edges of her shirt or her hair or the M that runs across the woman's mouth. Hore insights and that run across the other woman's mouth. Thes air. All very bad decisions. Nothing stands out. Nothing is purely dominant because there's just too much activity everywhere. Too much interplay between positive and negative, too much interplay between shapes and color. How about this? Which element is dominant here? Same answer. None of them All these things will be every element on this screen. They're all of equal size, pretty much equal contrast. Variance is pretty much consistent, and that nothing really stands out as heavier are bigger or darker or having more negative space around it, then the other elements. There isn't enough of a difference between all of them to separate them, to create that dominance that we keep talking about. Okay, these are just a bunch of seemingly unrelated elements. There is no balance here. There is no rhythm here. There is no harmony here. There's no consistency. There's no repetition. There are no visual echoes. Everything is different, Everything is separate, Everything stands on its own. And everything is calling for our attention. Poor design, poor user experience. So you design Mantra nine is that dominance is what directs user focus. You must lead people through the layouts that you create. You must provide a starting point, an entry point, a clear signal that says you start here and then you move this way from individual, almost like forms to entire layouts. You have got to create visual hierarchy and you do that by starting with dominance. 19. Alignment: Leading the Eye: next up alignment. And although the principles I've showed you up to now are certainly important rate, we talked about how critical dominance is. But I'm going to tell you this in terms of situations where you're responsible for improving something. Okay, existing designs, redesigned situations, update situations, upgrade situations. Alignment is the most important visual design principle I can teach you because it's the one I see broken most often. And it's also the one where if you change nothing else but alignment, the improvements in usability and user experience are staggering. Okay? And I mean that by metrics. Okay, you see things like timed completion or increase in conversion, and salespeople actually get through the check out process. Um, the numbers shoot up dramatically if you do nothing but improve alignments. And I want to walk you through this even if you do nothing but use proper alignment, your designs will be infinitely more useful, usable and understandable, which also, of course, makes them more valuable. Here's a great example. This is a form from Viterbo or however you pronounce that university. I see a lot of forms like this. I'm sure you see a lot of forms like this, especially in older legacy systems. Ah, and institutional enterprise type stuff. Here's the problem with this. There are a 1,000,000 entry points. There are a 1,000,000 starting points for elements. Last name, gender, state ZIP codes, cell email, Grad year. Everything starts at a different point. These are all areas that the I reads, fixates on and jumps between. It is very hard toe land someplace to settle someplace and to quickly move through reform like we've seen in previous examples because there's no common starting point. So what that looks like if we abstract it is this. You see how everything is just sort of randomly scattered. See how the fields are. Nothing is aligned with anything. The labels on a line that feels online. There's inconsistencies between spacing all over the place. There's no balance. There's no rhythm, there's no harmony. There's also our dominance. Right now. There are too many visual pass that catch the eyes attention, and none of them are working together. Okay, see all the different starting and stopping points. Every one of those arrows is something that the brain and the eyes have to look at and move on. Look at and move on. Look at and move on is trying to make relationships, and there's just too much to deal with. By properly aligning these fields and labels like this, we create fewer paths for the eye to follow. Doing this makes hand eye coordination of scanning into inform completion in this case much , much faster. Okay, big difference. You seomin entry paths we have. Now, what do we got? 123456789 Where God only knows how many we had previously. You'll also notice that the ends of each form are consistent wherever possible. Okay, Those green arrows, it's not enough just to align. The left edges were also being conscious of where the right edges wind up, right? The more alignment we have across both sides, the better the easier this is to use, the quicker someone consort of scan it and get through it. So we went from this with all these multiple pass for the eye to check out and follow even those outlines around everything to this where we only have a few visual paths to follow. You see the difference, and again I want to harp on these outlines and I see this all the time. Designers and developers have a tendency to want to enclose everything. Everything has to be in its own box. Those rules, those lines. Those boundaries do nothing but create more visual noise. Okay, They serve no purpose. You don't need them in a situation like this. The negative space between those fields, the negative spaces between the labels on the fields of proximity. Those things all worked together. Toe Hold everything together. Okay, So just adding those boundaries is visual noise. Don't do it. Get in the habit of not putting a rule or a line or stroke around anything unless you absolutely, positively have to because there's no other way you can figure out to separate it. 20. Case Studies: The Power of Alignment: Here's another example of the power of alignment. There are several issues going on here, and this is This is ugly, no doubt. But it's a great example because it's likely there's really poor visual hierarchy. OK, we don't know where to start. There's no dominance here. There's no balance. There's no rhythm. Everything is just kind of thrown together and it all melts together. It's all too close to everything else. It's all too similar. There's no clear grid structure. We've got random proximity, random alignment all over the place. There's no dominance. Okay, all the elements have nearly equal visual weight and importance. So if we tackle this and we do nothing but change some of the alignment and the negative space, we get this. Aligning the elements that are related by contests immediately creates visual order. This allows the viewer to see, read and understand a lot more quickly, with a lot less physical effort and mental effort. So here's what we did. We created a bunch of consistent entry points where things line up with other things. If you do nothing but that that allows people to see and perceive a lot more quickly. Here's another example. So another oldie but goodie. This is a situation where I lost a battle with a client who said, No, no, no. All this stuff has to be on the home screen and this was years ago. As you can probably tell, it's a little dated, but it's a great example because and this was before responsive design, admittedly so that you wouldn't be able to pull this off to the same degree in a responsive layout. But again, I still think it's a really good example of how this works, what we did here. The reason this still is fairly easy to look at. The reason things air still sort of segregated in chunks has a lot to do with how we treated alignment and that works like this. There are a 1,000,000 things in this layout that align with other things. If you start at the top from the logo that e the middle horizontal line in the E goes straight across all the way to the right side, you'll notice where that arrow is. Where that line is that the Ian next city of that center line absolutely follows the tops of the letters and aligns with the tops of the letters, which also aligns with the bottom of the letters in Search the Baseline and also aligns with the top of the search box. Same deal of navigation, Same baseline. Straight across this second line of the description here leads directly to that woman's I. That's not a mistake that's purposeful. That's one element pulling another. When we look at photos, we have a tendency to fixate on focal feature, specifically eyes and mouths when their faces involved. All right, so we're playing on that. We're making sure that one thing is in proximity with another and is generally aligned with each other. So that's your eye goes in a very personal direction. Same thing with a top of the next line to the rule that starts on its left. Same thing with the first line of the paragraph on the left to the learn More. There's a relationship there. If we start with the top of this iPod all the way across, you notice it aligns with the baseline of call centres, user needs and events. Rich media aligns with the baseline of witness and users, which pulls you to that photograph on the right. The bottom of this little go link aligns with the top of that globe icon on its right and so on and so on and so on. There are a 1,000,000 of these relationships, okay, all over the place. And this is just the horizontal stuff. Okay? Even these logo's at the bottom. The tops of the logo goes and aligns with the baseline of that text in the centre aligns with the baseline of the text on the right. The bottom of those logo's aligned with the top of that shape that's in the footer area. All this stuff matters. We do the same thing vertically. If you go from the logo at the top. The right side of those circles aligns with the left side of the text. Blew it about us. The side of that. You, if you can believe this allies with the text below it. If you go toe those little blocks a test on the left, it goes right in the center of the Owen announces the left of the agents search the middle of the M, the left of the N in a line below it, the edge of the A and easier. The edge of the R and forensic and the edge of the E and the X Century logo all the way at the bottom. Now we're getting in the crazy territory. I get that we do this all over the place, right? As you'll see every one of these areas, something aligns with something. I'm not going to force you to walk through every one of them. OK, but I want you to notice the's relationships. This is an extreme example, to be sure, but every single one of these decisions is purposeful, and every one of them goes a long way in allowing the I to create order for the brain. These things matter. These relationships between elements matter a great deal. So you I design mantra 10 is this. When end out a line, everything with everything else, the more relationship you can make, even between seemingly unrelated items, strengthens the overall visual layout. All of those passive alignment that I just showed you matter, the more alignment that you have in your layouts, even between unrelated items, the stronger that design will be, the more usable it will be, the more useful it will be and the easier it will be to absorb, comprehend and act on 21. Proximity: Showing Relationships: proximity is the distance between every visual element on the screen. We use it to signal relationships between those elements. Do you see a trend here? We keep talking about relationships. We keep talking about how elements work together to create a crease of whole or to create an experience or to move people through contents. All right, relationships, relationships, relationships. That is what user interface design is about. Creating relationships, establishing meaning elements that are visually close to each other are perceived as a single group. They're related by context of use. So if we see circles that a group like this, they're all visually close to each other, the amount of negative space between them is exactly the same. Their proximity to one another, in other words, is exactly the same. Unrelated items, on the other hand, are visually separated. They're far from each other like this. If we put a circle way out here on the right or another one way out here on the left, or another one in the center or another one down here towards the bottom or another one way down on the bottom, cut off these air, visually separated not only from each other, but from the other grouping that we already have on the screen that says These are unrelated to those other things. They're not related in context to each other. They're not talking about the same thing. They don't do the same thing. They don't take you to the same place, right or they don't show you the same kind of content. So we've got a group and we've got a bunch of unrelated elements, both to that group and to each other. The job of proximity, as we said, is to describe relationships. This is perceived as one group. Okay, all components are related to each other. Similar shape, similar size, similar proximity. Negative space is consistent all the way through. As opposed to this. This perceived as two groups where each set is different from the other. That giant gap between the two sets. That's a difference in proximity. That difference in proximity, says these air not related. Now I want to show you something else. Proximity often beats color and contrast in terms of dominance, in terms of importance in terms of establishing hierarchy. OK, and here's how these two groups are separated further by color, and contrast. We got one set on the left that's darker, all right. A lot more contrast than the set on the right. But here's what I want you to notice. Even if we vary the items with more contrast, even if each group contains a few items that have more contrast than the others, proximity is still signalling these air to different groups. So the color differences, the contrast differences here don't matter. We're still reading this as two groups now. What this may communicate is these darker items, or somehow of more importance than their peers, all right than their friends. But overall it's still holds together as two groups. Even though we've changed. Contrast, we use proximity to create context. I showed you this layout a minute ago, right? The difference between where it was and what we changed. We changed alignment, but we also changed the negative space between elements. The negative space here on the left on the initial layouts is pretty much non existent. All this stuff reads as a big chunk of information with a few holes here in there. Okay between it and I'm oversimplifying to make the point on the right you can see that the increase in negative space starts to separate things. Okay, we start to see individual elements as groups, as items that do different things that signify different things that take us to different places that difference in proximity. Those differences in proximity create the context. What this is, what it does, how it's related or unrelated to everything else around. So we use proximity to group or separate related visual elements. Doing so creates clarity again. If we look at that old layout, we abstracted. We get something that looks like this. It all blends together. We see it all the same time when we increase proximity and use it appropriately, locate either group or separate things instead of the eye seeing this jumbled mess, it sees this all right. We see the individual elements were able to clearly separate one from the other, which also means we can scan and bounce through this hell of a lot more quickly because it's all separated because the things that are related to each other are really close together, and the things that are unrelated are far apart. 22. Using Proximity to Make Cognition Faster: So what we're getting at is that proximity mace cognition a lot faster. If you look at this layout, okay, the distances between things. The proximity does an amazing job of separating things. Start with the left naff and its proximity to the Samsung Blue and the Samsung Lewis proximity to the navigation items on the right. You see that distance in the centre. Those two areas of similar proximity does an amazing job of separating the distance between the navigation item support in business. Log in and sign up from sign up to search to cart. Those differences in proximity create relationships. It says this stuff. These are all your secondary options and they kind of work together in the layout itself, From the distance between TV and home theater to that image, from appliances to the top of that phone image, this visual gap up here is working to separate those two things. The edge of that image to the bottom of the screen does the same thing. The distance from the left edge of the screen to those headphones does the same thing. All these gaps, even on the right side, between the phone and the headline and the text and links. All these things are working to not only separate things in terms of context, but also to direct your focus right. The reason you can bounce around this real quickly and go from the knave to the image to the headline to the links is because of all that negative space and because of the way that it's used from support to the headline to the right side of the screen swore that a headline ends to wear the right side of the screen to where the link ends the distance between those links and the very next image all that is purposeful. The distance between the text here, right? You see, there's a gap between the headline and the description by a sense Land Galaxy X radio. The gap between that text and limited time offer exclusions apply the gap between that and the hyperlinks below it. Every one of those elements is slightly different in terms of context, but notice that they still hold together as a unit because their proximity is closer than the proximity of everything else on the screen. To them, there is an invisible border all the way around that text area. There is invisible border all the way around that image. That's proximity right negative spaces, creating purposeful differences that tell us what goes with what we've got. Related groups of information. Here's Group one hears group to Here's Group three. Here's Group four, Here's Group five and here's Group six Content relationships to each other and how things are unrelated to each other is made very clear. 23. Using Proximity to Make Browsing Easier: proximity also makes browsing a lot easier. Here's Walmarts landing page for electron ICS TVs. Okay, I'm shopping for TVs and I go to Walmart, and there's a lot to contend with here, all right, and there are lots of visual problems. There are lots of color issues, contrast issues, text issues, that there's all sorts of stuff going on here. But again, I want to focus on is proximity. So what we've got right now looks like this. There's a 1,000,000 disparate elements, all competing with each other because they exist at random intervals. Again, there's no balance here. There's certainly no rhythm here. As you can see, there's no harmony, and that proximity is all over the place. The gaps between the big TV images at the bottom, for example, and description below them. Off that TV. There's a mile between those two things. There's nothing about that that suggests one is related to the other. Those are the types of things you're looking up for that you need to fix. There are no obvious groups here, so if we take that and improve the negative space everywhere and and tweak the proximity, we get something that looks like this. Immediate difference. I'm gonna show you these two side by side, but for right now, take a look at the difference here. Is it more obvious what goes with what it is? Okay, I heard it on. The TV is down below in that bottom row down there. One of the things that we did is we simply move the descriptions up so they're closer to the bottom of those TVs now. The other thing that happened in terms of proximity is we changed the distance between those TV's as well, so it's consistent, so you have a rhythm happening. TV description, TV description, TV description, TV description, TV description. That's rhythm. 12121212 at the top, those blue TV icons with the yellow one at the end. There's rhythm there now as well, the texts below it and you'll see in a minute I'm gonna show you that the old version again . There's a huge gap between the icon and the label, right? But now we've got rhythm. If you go from Icahn, the label icon label, if you go from left to right. 12121212 same thing in all of these navigation areas. The differences in proximity between all these things make a monstrous difference in how we perceive them as being related or unrelated. Everything here, all the changes we made serve a very important purpose. They separate groups of related elements. So here's what we had. And here's what we've got now. So from the fact that I cheated in two places and added a fairy leg gray behind the ad banner at the top and behind the filters in the center of the screen, I'll admit that that's a cheap. But I couldn't help myself. It was driving me crazy. It's like a disease. I have to. I just have to do certain things. Um, what you'll see if you go from left to right is that changing those gaps all right and pulling things that are related closer together and moving things run related further apart makes a massive difference in sort of being able to get through this faster. Right? Isn't it easier to scan isn't easier to move from one thing to the next, the next to the next the next. You don't have to figure out what goes with what you know. So again, if we abstract these two shapes, what we've got on the left looks like this we've got on the right Looks like this because the proximity of those things we even moved these text areas closer together. A swell the space between texts. We made the left to right, margins consistent. That creates shapes, and it creates a single shape instead of a bunch of shapes or shape of the ragged edge. This is how the brain perceives things. The more you do this, the simpler the things individual field becomes, the easier it is for the brain to quickly go. Okay, that's that. Got it. That's that. Got it. That's that. Got it. So we went from a series of individual, unrelated elements to a group of related information. We went from a very scattered navigation menu on the left. In this case, all those things are related to a category which is shipping and pick up to moving them all closer together so that they sit there as one category of stuff. This is all shipping and pick up. Why? Because it's all closer together and it's further away from the navigation below it. Same thing with the icons and labels that told you about across the top. We went from two disparate elements separated by distance to one element that holds together that says, This describes this. The label describes the icon. Why? Because they're closer together. So you I design mantra Number 11 is that you should always be striving to group and organize related content with proximity. 24. Color: Getting Viewer Attention and Communicating Emotion: color matters, my friends. And that is because color gets attention in the mobile lapse on your phone. You're probably used to seeing this little red circle. Okay, in this case, 64 emails you haven't read, which is pretty common for me, Unfortunately, all right, in this situation, what color is doing is it stirs an emotional response. It suggests associated meaning there's a couple of reasons for that. Number one. We're all used to these little symbols on our mobile phone That red is an urgent color in and of itself. So the emotional responses I got to read this stuff. I'm gonna do this. They're gonna do this now. The reason that happens is partly because the color association triggers dopamine in your system. That says, Hey, you have to go Look at this. That's why we all can't put then our funds. Why? We're checking it every five minutes. You know I don't have anything to have anything. All right? The associative meaning, of course, is that there is an action you need to take. You see it again in the apple email app. Now, the reason I'm showing you this is because in order to prevent confusion and meaning that color has to be used consistently, right? So in this case, every app on our phone uses this same symbol for there's something you need to pay attention to. There's something you need to do. If all these APS used different colors in that circle, the meaning wouldn't be is clear. And even if we knew that that circle signifies, you know that you need to do something, there would still be a stumble every single time you look at your phone because the brain has to reinterpret the pattern when that color is the same everywhere, when it's the same red circle, same white number on top of it, same white text on top of it. We don't have to think about it. We just respond instinctively, and it allows us to move quickly. So to get the desired emotional response, color has to be used appropriately in the Vero App. You'll notice that they take a very subtle color approach. Okay, here, we've got this sort of muted greenish color. Ah, and some instructions share your first post. But again, what I want you to notice is that the color pops out that little plus symbol at the bottom comes forward from its background. Once you start using this app, that's the signifier. They're introducing a symbol and a color that essentially says to the brain, This is how you use this. Once you see that and it's repeated over and over and over again in different screens, you know what it is. You know what it means. I also want you to take a look up top where that magnifying glasses. See little red dot next to it. You see how that stands out? See how it sort of screams? Hey, look at me. That's a hint as well. They're doing that so that you pay attention to that area so that, you know, here's where the search function is. Okay, so in this case, they're using color to call attention to the parts of the app they want you to see. Soundcloud is forever. Associate ID with this color that oranges used them their splash screen, as you see here and throughout the app. So here's a situation where when color is used consistently across the board and association forms Oh, that's soundcloud, right? You know it before you even see it that visual cue sticks with you. Color is also used to communicate. Okay, the right colors draw the ID of the most important areas on the screen. As you see here, this is from a design firm in Amsterdam noticed the red in the center. What they're doing here is they're calling your attention to a job they did for a very high profile client, which happens to be Nike. So there are three case that he's here, but the one they want you to see is highlighted. Its rid. It stands out from everything else. Your eyes drawn there with you wanted to be or not. Color could also maximize readability and minimize optical fatigue, which it is certainly doing their notice. How the white type really stands out from that background color also delivers symbolic meanings that support and enhance the visual experience of a design so color again is used to evoke emotion. Notice how, and this year I colors used very differently. These air, all sort of earthy colors. There's a nice cream background, they're very traditional. We've got this maroon and gold color. It has a feel of an old label. The topography certainly contributes to that. But all I'm trying to call your attention to is that color is used very differently to represent this brand, this product compared to what we just saw for Amore forward thinking, cutting edge design organization that's doing really cool stuff for forward thinking Retailers like Nike. Big difference. Big difference in the way this feels, and color has a lot to do with that. In both cases, the job of color is to please the eye okay to make us feel a certain way and essentially make the eyes in the brain happy. It's sort of a visual gift, okay, that sustains our visual interest. When color is pleasing to us, we have a tendency to fixate and look a little longer and spend a little more time with things. 25. How Color Influences Interaction: at the same time, Color is also very, very functional. Interaction cues are called out by color. So if you take a look at this tweet from one of my favorite accounts, do you X drinking game? Good stuff. If you're not following this, you should, if nothing else, that I give you a good smile every day. All right, so here's how color is used across Twitter. If we ghost this out, you can see that the color elements come forward and they all signify different things. They all communicates different visual accused that we have become accustomed to and therefore know how to use at the top left. You got this error, which is an interaction. Q. That's how you go back to where you were. Right below that we've got a hashtag US drinking game that is also an interaction que it tells us this does something. If you touch it down below, we've got a your l interaction. Que what I want you to notice here is that they're all treated the same. Same color, same blue. If they chose different colors for the back symbol at the top for the hashtag, and then another one for the Earl. This experience wouldn't be is consistent, Okay? And it wouldn't be as effortless when you use it. You would literally have to think about it every single time. If these colors were all different on the right, the symbol to create a new tweet. That's another interaction que down below that we've got a state change. Now here's what I want you to notice instead of blue, we've got rid. Why is that? Think about it for a second. The reason is because it's a different type of interaction. In this case, the state change isn't anomaly compared everything else. Everything else is an interaction that takes you somewhere else. This just says, Hey, something's changed. Therefore, we use a different color to signify. And, of course, down at the bottom of the navigation area, we have another inaction Que which is the home symbol that takes us to somewhere else. Color creates connection, creates continuity. I'm gonna show you what I mean by connection and continuity. He co which is this website. It's another design organization, uses color to reinforce the user journey. Okay, here's what I want you to look at. Take a look at the AP U I on the left. Notice how the majority that you guys this red color to show you an example of a nap that they built. Now, when I tap that to read the case study, I get this. So here's that they did the landing page of that APP. Case study uses the same color scheme that we saw in the APS you I design right from the preceding screen. So the red that they showed us that was actually part of the U I they designed is used in their landing page of the case study that reinforces connection. This is the next step in the journey from where you started that communication is really, really important. That idea of connection, that idea of continuity that's what enables us again, toe effortlessly intuitively move through something without having to think too hard about it. That's how colors supports interaction and user experience. This says, Hey, you're in the right place. You went exactly where you thought you would go. Color also implies meaning colors subjective. Our perceptions and our biases affect what it says and what it does to us. We all have different reactions to color based on our upbringing, our culture, our language and the things we've been exposed to. Some colors have universal appeal. Others are specific to geography, culture and experience. Here's an example off a to do list. Now this is very heavily based on color, that using it to signify things. We've got categories on our to do list that Aaron Blue the one that's currently selected Eyes in Red. We've got a green color for the item that's checked off on the left and then you've got the list below it, which goes from red to yellow, signifying urgency. Okay, The thing at the top is of utmost importance. That thing towards the bottom is of least importance. Now here where I am in the United States, that makes perfect sense because that's a color scheme that exists in other places that we're familiar with. Even a stoplight, a traffic light in the street. Okay, goes green, red, yellow, green is all systems go, Everything's good. Yellow is Hey, it's not urgent, but pay attention and red is Stop what you're doing right now and pay it says you do this. Okay. That is not necessarily the case in other parts of the world. So while this makes sense to me, it's it's entirely possible that it may not make sense to someone in another part of the world. So I point that out because it's something you have to be cognizant off when you choose colors, especially when you associate color with meaning in an interaction. Your color selection has to be appropriately useful and meaningful for your audience and for your users. So you got to do your homework here at a research. Got a test? When you use color, it should highlight. OK, it should not determine. And here's what I mean by that. Color should never be the sole differentiator of things in the user interface. Take a look at Airbnb and I'm gonna show you an example of why Now, if you look at the reddish pinkish color, log in with email, notice that it's using that button and look below in particular. Okay, where you have links to terms of service, privacy policy gets refund policy except our center. Here's what that would look like to somebody who has some degree of color blindness. How hard is it to read that stuff at the bottom. Okay, it's gone. It almost doesn't exist. The log in with email button degrades significantly. All that contrast dies of separation from the background dies. And right now this is very hard to look at. So this is a case where color for someone who has perfect color perception, it works. But contrast is lacking, and because contrast is lacking if we go toe the right again, somebody who is color blind has a hell of a time looking at this and and a hell of a time understanding what the hierarchy of information is. And it's just more cognitive effort, because contrast is very poor, as you can see, so colors helpful. But it can't ever be the Onley way. You separate information, so color should highlight, and it should guide for extended screen situations. When people are staring at a screen for a long time, you always want to use light, muted background colors. If I had a nickel for every time I saw over saturated color in a user interface, particularly even in enterprise situations where people spend in a long time staring at the screen, I'd be a very rich man. This fatigues, the eyes Instantly. You have to remember that refracted light from a screen blasting into your eye fatigues your eye muscles, so be kind to your users. Stick with light, muted background colors. Bright saturated colors should only be used as visual accents. Okay, we looked at Twitter a second ago. Notice how everything is sort of very low contrast. That's black and white. And then we've got a blue that stands out very simple, very subtle. Here's another example. OK, we've got a to do list. Notice how the color that's used there is very, very subtle. But what I also want you to notice is that nothing here is dependent on color. If that blue wasn't there, you would probably still be able to use this. Okay, because of size, because of contrast because of the visual manner in which controls are treated. Okay, Contrast. Does most of the work here and we're gonna talk about contrast later. But I just want to point this out. Color again is used as an accent, and there is nothing about using this app that is dependent on your understanding or seeing these colors properly. So the rule there following here is you start with one dominant neutral color, which is this black, black and gray, and then you add an accent color, which is blue. 26. A Word on Color Theory: Now there's no shortage of classes, courses, articles, books that will talk your ear off about color theory. Here's my thing about And I learned it. I went to a formal design school in a formal design program that was very rigorous. And we learned everything there is to know about color theory, right? So don't get me wrong. Color theory is useful, but it's also a giant pain in the ass. Okay, It just is. You're never gonna have the time. You need to fully understand color theory, much less apply it during a project. All these prescriptions that say, Well, you have to think about this and look at the color wheel and look at the correspondent comes. It's a tremendous amount of work that nobody has time to do. I don't care what you tell me. You can argue. That's fine. You're still gonna be wrong. All right. No one has time for this, so we're gonna cut to the chase. This is the color wheel and some basic color theory, and it's a pain in the ass. Okay, you can find this anywhere on the internet right now. You can go to Google and Google Color theory, color theory reference. And you can download a 1,000,000 things just like this that do an excellent job explaining how colors work on the color wheel and, you know, analogous colors. Complementary color is trying to color split company colors. I think that's all fine and it's all great. But I'm not gonna waste your time with the here. The question to ask instead is. Are you using color correctly? And here's what that means. Our colors use sparingly. Do your colors reinforce or interfere with hierarchy and content? OK, do they help me understand how things are organized? Or are they obstructing my ability to understand what's going on again if they're too many colors? If color is not consistent, that's what happens. Is the color scheme used consistently when I developed something? When I say OK, interactive elements are this color state changes are this color Buttons are this color and my using that consistently from screen to screen to screen to screen his color, use functional or is it just decorative? And here's a hint. It should be functional almost all the time. Our job as designers, as you X folks is to communicate, is to impart meaning is to provide guidance. Okay, is to enhance understanding. Color use has to work toward all those things. If your pick and colors years ago that looks nice, you're picking the wrong colors for the wrong reasons. Does functionality depend on color? Remember the Airbnb thing I showed you with color blindness? Okay, if I can't see that color properly, am I going to have a harder time using this app or this site? If the answer is yes, you need to rethink how you're treating color and also how you're dealing with elements like size and contrast and other things. Always ask yourself, Would this be just as functional For someone who's color blind there plenty of good resource is and articles about color blindness on even tools that will allow you to simulate what your interface will look like to people with varying degrees of color perception issues. Here's an example, Then this is an older version of Facebook's sign up page. Certain types of color blindness make it difficult or impossible to see common red error messages. Okay, this red here, so someone who's color blind would be difficult to see, but here's how they're mitigating that these in colors and symbols together in order to get the user's attention. Notice the big error shape that says, What's your name? Noticed the exclamation points in the circle. If this red goes away, we still get those errors. They still show up. Those symbols were still there. The contrast is still very high. We're still going to see them, even if we can't see the red color. Okay, so this is a situation where you use other things in order to make up for the fact that hey , someone may not be able to see this color. So you I design mantra 12 is you should be using color to communicate an influence interaction. It has to do much more than just look pretty. 27. Choosing UI Colors from Common Associations: Okay, So if I told you to ignore color theory and the color wheel Joe, where the heck do I start? Well, I'll tell you. First, you consider common associations when you're choosing color. Every color has certain universal associations, for the most part. Now, of course, these very a little bit, depending on your culture, your geography. Exeter, etcetera. But for the most part, these things were true. Black usually communicates authority and power. It's timeless. It's cool. It's brooding, right? It's usually signifier of counterculture in some way. Arts music artists where black, where moody were intense. Designers were black, right? Bad guys were black. Whatever it is, there's intensity okay to black that is sort of timeless and universal. White, on the other hand, is usually used to signify innocence and purity. It's cleanliness, it's sterility, its surrender, its peace. And that's usually international. Okay, those things air universal, the white dove, the white flag. These things are always used to communicate the idea of piece of calm read. On the other hand, as alarm and urgency, its attention, its intensity, the warning of danger and that intensity is also used often to communicate love. These three colors in particular, provokes strong emotional reactions. Okay, and that is why a lot of times you see them use black, white and red, as I said a minute ago, are the highest degree of contrasts in color combination that you can ever get. And there used a lot because they demand our attention. They provoke intense emotional responses, so these three things are most definitely universal. Across the board, Pink usually signifies romance, gratitude, grace, admiration, harmony, compassion. And it's usually unfortunately, stereo typically associate ID as female. Now, I don't personally believe that that's universally true, but it is a common association, and that's why we're calling it out here. Blue is thought to be peaceful, tranquil because it's reminiscent of the sky or the ocean. It's often used in business to suggest technology and innovation, and blue is traditionally thought of as a male color. Again, this is not absolutely true across the board, but the male association is very common. Green is often used to suggest nature. It's an organic color. It's calming, It's refreshing. It's relaxing. Hospitals, in particular from psychological perspective, use what they call green rooms, usually a very light, pleasant shade of green because it has a calming effect on the brain. So there's a case where color is used in a very functional way. In a real world environment, yellow usually suggests optimism, happiness, warmth and, as because of its association with sunlight. Okay, we associated with positivity with joy. With hope. Purple is often associated with royalty, with wealth, with luxury with sophistication. It's also typically considered feminine. Ah, and romantic in a lot of ways. And finally, brown is usually also like green, thought to be reminiscent of nature of the earth. K soil richness, home friendship, genuineness, solidity. Brown is calming in a lot of the same ways that green is. It's sort of a slow and steady, earthy, grounded color. So when you're thinking about colors for your you, I a good place to start is with these common associations. For the most part, they will not let you down if you start from here and sort of work outward. Okay, varying shades of all these different colors. You will usually find something that signifies what sure after that sends the emotional message and gets the response that is appropriate for what you're putting out there 28. Choosing UI Colors for Emotional Impact: So you also have to consider emotional impact. Seeing red, as we said, has physiological impact has been proven to increase blood circulation. Breathing metabolism. This provokes instant response when you combine it with the very urgently drawn typography here with this intense illustration, Children with guns all right, the overall emotional impact of this is very powerful. The's Reddit elements demand to be noticed. The contrast is created here is screaming for attention. Red also signifies importance and priority, like a to do list. All right, here's a situation where Red is being used to communicate a very urgent message, but at the same time it's more about importance and priority. This is not the same emotional intensity of Wow, this is really bad. You have to do something about it. This, when combined and contrast ID with the colors that exist in this photograph is a much more subtle way of communicating urgency. Or in this case, it's Red, which is a charity that works to fight AIDS. So same urgency, but a much difference implementation of that message. Here's another example where overall everything is sort of black and white. We've got a little bit of color in this centre. But notice those red areas in the logo at the top and at the bottom, where it says Sign up now and save 15%. Where did your eye go? It balances between logo and the bar logo and the bar logo in the Barlow in the bar. They're doing that on purpose. Your I cannot help but go to those areas because number one, they're anomalies. That red doesn't exist anywhere else in the interface right now, except for those two places. OK, so they certainly stand apart. But the second reason is the combination of red and black and white makes those elements really come forward. Really stand out. Here's another example. This is a to do app on the Google Android platform. Notice that big red header at the top. OK, notice the big red plus button down at the bottom, which is how you add a new event. It is impossible to take your eyes away from those areas. You also see it in the list in those icons. All right, on the left, next to Growth team, next to reading list in the middle next seven days. Finish monthly growth report. See that little red bar at the side. It's not very big. It's not taken up a whole lot of screen real estate. But it's enough to drag your eye over there and say, Hey, look at me, pay attention to me. That's important. That's priority. So blue, as we said, tends to have a calming, inviting effect to do its associations with sky and water. So when you see something like this all right for a tech company expertise, look at that. It carries a very significant emotional message. It's calm. It's like, Hey, we know what we're doing, But it's not screaming at you. It's not boasting its not going. We are the best company you've ever heard. That's not the tone of voice you hear in your head. When you look at this, you hear it in a much more calming weight. And color is influencing that voice in your head, that subconscious voice in your head when you read this all right. What you're hearing sounds like this. Helping more than 200 finance and leasing companies worldwide streamline their business operations to achieve maximum efficiency. Learn more about how we have helped companies in their quest to grow and lead right, calm voice. The blue and the typography, of course, has everything to do with that. Why we're communicating. Trust banks used this. Technology companies use this across the board ist and the blue thing really started. By the way, with IBM, they were the first to use blue and technology, and they were known as Big Blue for quite a while. But that blue was the symbol of reliability, of trust. Okay, of something you could absolutely depend on and that's been carried over into the field of technology as a whole. Citibank No late fees ever. Same thing. Look how much blue we've got going on here, right from the card itself to the bar, the top to the text area on the left, to the sign on button. They're carrying that through blue. It's calm. It's steady. It's reliable, trustworthy when you see lighter blues there usually a little more open, a little more friendly. Darker shades are very suggestive of security, of trust, of solidity, of reliability, no worries. Here's a perfect example. Reason. A very dark blue for ah, home alarm company. Home monitoring. Live watch advanced home monitoring. Simple low price. All right again, security is what's being communicated here. We've got your back. There's nothingto worry about. You can trust us. Green, as we said, is often associated with nature, success, growth and money. Here's how green is used in interface. Robin Hood App, which is used to monitor investments and stocks, uses this really nice calming, pleasant light green everywhere. Notice how there's no deviation. You don't see any other accent colors. There's black, grey and green, and that's it. Throughout this entire thing, Green sits right between warm and cool, which makes it really well balanced a za color. So that feeling of well balanced worms its way into your brain. When you look at it, you feel call. We're talking about some sort of important here, like managing money. So what do we want to do for our users were going to make them feel calm. We want to make them feel in control. We want to make them feel like good things are happening. Okay, so this color what I'm hammering here is that this color is very purposeful. It feels fresh, it feels new and in Western culture in particular, As I said before, it signifies all is OK. Green is go green is good. Green is positive. All right. That's why it's being used here. Now take a look at this by way of example, there are three states in a transaction. When you execute something, it's either failed Which is the red on the left pending. Which means OK, we're getting their butts. Nal is not quite okay yet. We're not finished. We're not done to the far right where we go. Success! It's green. Your payment has been processed successfully. These air three states that result from a transaction and in order of severity they go from bread to yellow. Degree red is failure Bad pay attention. Something went wrong. Yellow is Hey, pending We're working on it. Almost there. Green Done. Awesome! Finished. Good job 29. 28 Choosing UI Colors from the World Around You: the other way. You choose color as you look at the world around you. Okay, there are color combinations in every image. You see whether it's a photograph on a screen or, you know, I'm sitting in my office right now. All the things surrounding me, there are color combinations all over the place. Everything you see contains the four color variations that are required for good. You I design. And here's what they are. Shadows, mid tones, highlights and accents. If you take a look at this image on the right, there are shadows in the darker areas of that bull. Okay, so if I was using any type of image editing application, I get taken eyedropper and say, All right, I'm gonna sample that color in the shadow. Let's say I start there. Then I sample this mid tone. That's in the same bull notice. It's in the same blue family. It's slightly lighter now. I say. Okay, I need a highlight. So I sample a lighter area of that same bull, and now I want an accent, color and anomaly that stands out from all those things. All right, so I choose an accent, which happens to be this green in one of the alms. Then you see what's happening here. I have a color scheme. I've got my darkest darks. I've got my midterms to get my highlights, which could all relate Teoh chrome to varying degrees of information. I could use one for the navigation bar. I could use one as a call out inside text, like maybe that highlight color. And then I could use the accent color for all my hyperlinks or for my buttons. OK, in a few seconds, I've just started with something. I took an image and said, Okay, maybe it's this. How did those colors feel to me, and can I get the range that I need? So you pick something like this and you try it. Let's look at a few more examples. Great photograph. Now you may react to this on medically and think that's really cool. Part of the reason you're reacting to it is because of the color scheme used here in the variations in color que photographers see color extraordinarily well, and I am of the firm belief that most photographers I would also make excellent you I designers were they taught how to lay out things on the screen because there's sense of color and contrast and composition is excellent. All right, So what would we do here? Well, we could pick a shadow color from this dark brown in the concrete structure. Here, we could pick a mid tone from a similar area. We could pick a highlight from this area around the window here, and then we get picking accent color out of that blue. You see those colors. You see how there's a subtle variation. The shadow in the mid tone in the highlight, are all in the same family, which means the base color for your user interface. All come from one basic shade, their variations on a single shade. Then you pick an accent that you use for visual interaction. Queues for highlights for areas where you want to suggest interaction. Action where you want users to do something. Okay, tap something clicks something. Swipe something. Here's another example. Ordinary photograph guy, and it's high looking at his watch. Who cares? Well, there's a lot toe learn here from the color scheme that's used again. We can pick a shadow from the dark area. This tie we can pick a mid tone from his shirt, which is a bit of a variation on that grayish color. We can pick a highlight again from a different area of the shirt, and then we can pick an accent color. Notice how that accent, if I choose this from this brick really comes forward. Okay, so again, we've got a basic scheme. Foreign interface, our darkest darks. The shadow, for instance, could be used for text. All right, this is all a body texted your read. The mid tone could be used as a background on the navigation bar at the top or in the footer. The highlight could be used as a call out color to call out certain boxes of text, for example. And then the accent color is our buttons. All are hyperlinks, right? We see how this works. Let's look at another example again. We choose our shadow from somewhere along one of these stocks. We have this nice sort of dark teal color. We've got a mid tone, which is a lighter variation of the same thing. We've got a highlight from another area and we've got an accent. All right, so all we're doing is experimenting and pulling colors. From what we see 30. Choosing UI Colors from Brand Colors: another place to start the brand's colors. Here's an example. This is the logo of Walter's Chlor. Most organizations have a brand color scheme that they'll want to start with, and usually that is at least a logo, if not a logo, plus other things. They've produced a Scooby, everything from print based brochures to websites to email communications Tuapse to whatever it is. While that's a good place to start, here's the thing I want you to be careful about. You gotta wash using large areas of those same logo colors, exact same logo colors on screen. That's because they're often much too saturated. So companies will say, Here's our brand colors used these nine times out of 10. Those brand colors are way too intense, way too saturated for screen use because, as I said before, they cause I fatigue. So here's what you do about that from this local will pick a shadow. Okay, The darkest color here is obviously this dirt great, but it's not black. That's good. Okay, it's still dark enough where there's enough contrast, but it's not solid black. It's not gonna scream in anybody. We'll pick a Mentone out of this logo Here's another good choice. It's got enough color. It's very subtle. It's not. Supersaturated will pick a highlight. Okay, now your natural inclination would be to say, All right, I'm gonna use that pink in the center, as my accent color right makes perfect sense. It's an anomaly. It follows the same thinking that we saw in the previous examples. Here's the problem with that. This is way too saturated, even in a shape that's only this size. Thistle square its way to saturate. Okay, it's 86% saturation, and it is absolutely going to fatigue the eyes. If you sort of stare at the edges of that square, does it feel like the screen vibrates a little bit, your eyes bouncing between the white and the pink right? It's almost vibrating at the edges, where you don't see a clean line. That's because of the saturation, all right, so what we can do is take the same color and just knock the saturation down a little bit. If we take it to 72% it's much better. A lot less vibration. It's less saturated, and it just sort of sits there nicely and quietly. All right, didn't take much, but you'll notice that that vibration at the edges isn't happening anymore. Here's another example. Bright Sparks Early Learning Centre. Right? We take a shadow from that brown, which is a good place to start. We take a mid tone from the body of the owl. We take a highlight from the ring around the eye, and we taken accent color from this leaf. We have it at the bottom here, and just for the heck of it will take another accent color from this pink in the word bright. That brown is okay, that's 40% saturation. It doesn't scream. It holds really well. The edges air clean, clear, crisp. Alright, it's working. The mid tone is too saturated. 87% it started, do the same thing. It's very fatiguing on the eyes. All right, so if we took it down to 50% that would be a lot better. This highlight OK, 90% saturation is not going to scream at us. It's not gonna cause I fatigue. We're good with that. The Saxon colored way too saturated. 86%. So again we knock it down. This is much better. It's 58% still stands out. It's still acts as an anomaly against the other colors, but it's much easier on the eyes, this pink too saturated, 77% saturation. And by the way, these saturation values, if you were to look at hue, saturation and brightness, which is HSB and just about any image editing program oh, are designed program you ever use. You can see these values, all right, this is to saturate it 77%. We knock it down to 58%. It's much better again notice that the accents still do what they're supposed to do. They stand out from the shadow of the mid stone. In the highlight. They call attention themselves, but they're not vibrating. They're not screaming at you, and they're not causing your eye muscles to work overtime. So you I designed one for 13 is that you should be choosing color based on three things. Associations, emotions and brand 31. 30 The Power of Contrast: I want to talk to you about the relationship between color and contrast. Specifically the power of contrasts in the way elector explain it is this amuses classic image of Mohammed Ali when he knocked out Joe Louis in a boxing match. If color starts something, if color starts the fight, so to speak, contrast finishes it. Color may get your attention made. Start you down a path. But contrast is absolutely what wins that battle contrast is what keeps you there. Contrast is what makes sure you notice those things that are important. Contract is what ensures that you take the right action that you win the fight in the natural world around us, your eyes and your brain are always working to notice contrasts and notice the edges of things to notice differences from one level of contrast to the next. So let's say you're sitting on the beach. You're staring out at this beautiful scene right here. Here's what your eyes air doing and your brain is doing, even if you're not aware of it. You are wired to look for differences, individual fields. So you know, if you're sitting on the beach somewhere, just checking out the scene, watching this little ships sail by toes in the sand. Here's what's happening with your eyes in your brain. They're working. Your brain is telling your eyes to look for those differences. Right now, it's noticing the boundaries, the edges between your toes and the color contrast of the sand and the water around it. It's fixating on those boundaries. It's also fixed, setting on the boundary between the water and the sand. It's also looking at the edges of the waves today, the caps that are being kicked up. It's also checking out the edges of the rocks as compared to the ocean around it. There's contrast there in those shapes in those edges from one to the other. It's also looking at the bottom of those rocks against the water Around it. At the same time is looking at the top of that froth of the wave to the water that's behind it. It's also looking at the horizon, the difference between what looks like the edge of the water and the sky, or those trees and the land that's off to the right there. It's also seeing the shape of this boat, this yellow boat that's their against the sky. It's also noticing the shape of these trees in the land in the distance. It's also seeing the trees that are behind that, even though the contrast is less, it is still noticing them. OK, so this is happening all the time. Any time you look at something, your brain is working overtime to detect those differences, even though you're not aware, it's how we make sense of what's around us or what's in front of us. 32. Using Contrast to improve readability, attention and focus: this contrasts that constant scanning. The noticing of those differences enables readability. Text is easy to read when we're using stark, complementary colors, right, black on white, instantly readable. No problem. Even when we have a design where text is the brightest element where we have white on black . That also reduces Istrian because it focuses attention. There's a myth that white text on black is harder to read than black text on white. It is simply not true, unless that text is so small that the differences between the white characters and the black background isn't obvious enough. When a text is too tiny, it's too hard for the I t. Identify those boundaries and for the brain to perceive them. Now, if we have a lack of contrast between the text in the background like you see here, that causes eyestrain because our eyes don't know which color to focus on. If you've ever used a camera with an automatic focus feature, have you ever seen the instance where the lenses trying to focus that's going in and out of focus in and out of focus? Trying to find a spot, you hold up your smartphone right, your iPhone or your Samsung or whatever it is, you'll see the same behavior as it tries to auto focus. It'll be fuzzy for second and then it'll focus. This is what's happening with your eyes in your brain. When you look at something that lacks contrast, you're bouncing back and forth between the two things all the time because you can't settle on one thing. There's no dominance. And just because colors or complementary doesn't mean that contrast is appropriate if both colors air too bright as they are here, I strain again. Is the results right? I talked about saturation in the last section when saturation is too great. Same problem. It's very hard for us to settle on one thing because they're both screaming for our attention. Contrast is also used to draw attention. The areas of highest contrast draw our attention first, and contrasts should always be applied according to importance, which means that primary content, primary actions, the things that you absolutely need people to focus on and the things that they need to be able to focus on should have the most contrast. So if I'm designing something and I have a big gray square like this. That's where your eyes drawn, because the only thing on the screen if I add a gray bar in the side that dark gray square will now because it's a shade of the background color. And because it's lighter and there's more contrast, it's drawing your attention. Okay, it's framing your view if I add a white area and then add some text there. Now, your eyes are drawn here because of the contrast that exists between that background, the white background and the screen's background. The dark gray, your eyes and your brain are working to detect those edges. And wherever the difference between those edges is the most pronounced. That's where your ago's. What's important about that is that contrast directs Focus, which means wherever you apply. The most contrast is where the user's attention will be drawn, which also means you have a responsibility as a designer, and that is to be absolutely sure that that elements the most important thing on the screen because of it isn't you're directing. Users focus in the wrong place. Okay, take with this Dollar Shave Club home page. Where does your I go? It certainly goes to that image causes taken up a tremendous amount of screen real estate, but it's also drawn to that texts, right? The white text. DSC has what you need to look, feel and smell your best because it's white. It stands out from the darker background. There is a 1,000,000 edges there where there's very stark contrast. You're I naturally goes there. Same goes for the get started button below that that orange really stands out from the background. It's not the color that's doing that. It's the contrast. Here's another example calming steady blue color we talked about before. What's happening here? Notice how? It's not as clear. There's lots of areas of contrasts. Okay, from the edges of those images, we got two big screens in the background. We got two laptops. We get a box of some sort docking stations sitting between them, and then we've got three products down below. See how each one of those products stands out from the background. There are too many focal points here. Then we've got white text on a darker background in the center there, trying to put this ghosted square over the images and then we've got a learn more button that really doesn't have enough contrast because there's too much noise, too much visual stuff going on around it. There are too many areas where light meets dark. Okay, there, 20 borders, too many edges, too many things to look at. Remember the beach example? I showed you the eyes constantly scanning and fixating on all those areas. The more places where there is a huge difference between this edge in that edge, the more difficult it is to focus on anything to read, to understand, and consequently, toe act on what you see. What really needs to come forward in this layout is this. Learn more, but that's the most important thing on the screen. That's the call to action. That's what people are really there to do. Okay, and it's also what the company wants them to do because they want to sell product. But it's obscured by all that visual noise around it. There's not enough contrast between that and everything else, right? So we're directing their attention to things that they are not here to see and are not here to use. If you design with contrast purposefully, you're keeping the users focus where it needs to be on the core content or court action that they need to take. That's where the most contrast should be. Perfect. Example. UX Pins Landing page Where's your eye? Your eyes on that headline and your eyes on the action below. Start a free trial. OK, your eyes. They're immediately drawn to the field where you put in your email and the button assists start free trial. Why? Because they stand out from the surrounding background. The contrast between the grey and that white, the gray in that blue, is massive. So when you look at this, you're gonna constantly go to two places that headline in the field in the but headline field button headline field button. The other stuff. There is simply supporting texts, but that's where you're going, all right. So it's a good example where secondary contents, secondary actions and everything else should have lower contrast by degrees. Even look at the knave of the top smaller text, smaller areas it fades, it recedes to the background. It's not nearly as important or nearly as prominent as the headline and the call to action . How about here is the core content of core action really stand out. No, it doesn't. There's way too many areas of contrast here. This is very nice to look at. Don't get me wrong. The color's air pleasant. These shapes are interesting, but everything competes with everything else. All that visual noise at the top in that image competes with the button, partly because notice that they use the same color. Also in that blue button in the center, word says Explorer ancestry D n A look up top that blue exists all over in little spots in an illustration. If you go down to the bottom, that green bar plus the orange get started button those colors exists up top. Okay, there variations of the same shades. If we gray this out, look what happens. What stands out? That image, This young woman's picture a top is what stands out. Plus that headline Discover what makes you uniquely you. What really needs to stand out are those calls to action 33. The 3 essential functions of contrast in UI design: so contrast, perforce three essential functions. Number one. It draws users attention to the essential components of the interface. If you look at this example, this is from he co again. We saw them before we turn information into experiences people care about. Their is on Lee. One place your eyes going here, and that is on that huge black wave. Whatever it iss, all right, there's a ton of negative space around it. There's super high contrast between the background, the text, the background and that little arrow. As tiny as that is, it still commands a lot of attention and the background and that big wave unmistakable. So your attention goes right there, and the overall effect is, Hey, there's more down here. Number two contrast helps you understand relationships between on screen elements in this for the contrast between the background and the field colors and this little exclamation point icon and the bubble, the word bubble next to it, where it says you have entered an invalid email address. Please try again. Even if we remove that color, the contrast is still super high. So, yeah, there's a color here that calls our attention, but what I want a hammer home to you is that the color is not what's doing the job. The color is not what's commanding your attention. It's the contrast. Contrast also communicates hierarchy. Okay, signifies importance within and across multiple sets of visual information. This is Amazon music. If you look at this screen, where's your I go to the featured artists to logic every day. Why? Because there's a ton of contrast here. All that open space, all that open white space where you see his head sort of cocked in there in an angle, and then we haven't you see logic every day. New single, super high contrast, black and white. You cannot avoid looking at that spot, so they're doing their job. They're recommending something. They're getting you to pay attention to the stuff they want you to see even when it changes . And the use color, all rights, not black and white anymore. Megan Trainor No excuses. Your eyes still goes there. Why? Because there is more contrast in that area than there is anywhere else in this screen. Even when we add more color, even when there's more darkness, same deal. There is still higher degree of contrast in the shapes that are happening there in the color areas, in the shadows that are happening there than anywhere else on the screen. That's how they use this approach consistently. Unit famous changes Even if we use different color shades, even if we vary the shadows in mid tones and highlights, it still works the same way. Hierarchy importance this first. So you I design mantra. Number 14 is contrast. Always wins. Remember what I said at the beginning? If color starts, the fight contrast finishes it. 34. How to Determine Appropriate Color and Contrast: so I want to give you a quick tip on determining appropriate color and contrast. Okay, color and contrast depend entirely on context, and I want to give you an example. What I mean by this. This is an older version of Gmail, but I use it because it's a great story. There's a guy that wrote an article that I took this from and, God forbid, if I was able to find it and properly credit this guy. But it's brilliant. When you look at this, the entire experience of using Gmail is strictly contextual, which means there's only one reason for you to be here, especially in this screen. Okay, when you hit this screen, there's only one reason you're doing this, and that is to send an email. So if there's only one reason for you to be here, there can really only be one called action. And that is send color. And contrast in this case clearly indicate what an aware that called action is located now , In the article I referenced, one of the interesting things that this gentleman was talking about is the fact that that symbol, that's sort of weird paper airplanes shape really has no literal bearing on what we're doing. We're not. We're not sending anything through the air, OK, and there's no label on. It's not a button that says Send. So why does it work If it's so abstracted from what we're actually doing? And there's no clear label, why does it work? It works because of context, and the context again is that there's only one reason we're here. There's Onley. One thing really that we're going to do once we compose this email, and that's we're going to send it. So color and contrast in this case is entirely dependent on context on how it's used. That has everything that do with appropriateness with whether or not it's the right call. So how do we tell of contrast? Is appropriate right and something that's already designed? Well, it's pretty simple, actually. You take that interface, whatever it is, and you turn it to great. You gray everything out and you see what still stands out. Now here's again. It's a fairly older version of Gmail, but I like it because there's a lot here. There's a lot to look at. There are a lot of things there so are calling for our attention. But certain things stand out. Okay. The composed button stands out red on white again. Super high. Contrast the blue search bar at the top. Super high contrast the dark headlines of the messages I haven't read yet. High contrast. So what happens if we remove the color? Still works OK, important elements still stand out. The contrast didn't change the order of importance. The hierarchy, the things that really stand out to me did not change. That means color is secondary. Contrast is what's really doing the work here. Here's another example. Eyes is fast company. There's a lot of color here, obviously, but does contrast work well for great up pretty much the same, right? Nothing changed the order of importance of elements on the screen. Didn't change are I didn't suddenly go somewhere else once we remove the color and again, that's because the contrast is doing the job of focusing our attention. You can take any mobile app and do the same thing. Here's ah, banking app is the color doing the job here is a contrast. Doing the job here. Well, if we great out, you can see that it's a little too reliant on color. Okay, the hierarchy is still there. It's not like this is suddenly unusable. It's not. But the primary actions disappear. Everything sort of blends together. There's no area where I go. Z yeah, that's it. That's what I'm here to do. Here's another example. Very subtle app for sleep. If we gray this out, what happens? It's OK. View this goal still stands out that button down at the bottom. The headlines sort of still stand out. So it's not bad. This sudoku app is. Take a look at that. If we gray this out, what happens? Everything kind of runs together, right? We lose the new game and archives. The two links in the center that were really dependent on color to make them stand out just sort of disappear. Okay, there's not enough contrast between them in the background, so this kind of fails. If you look at the Nike app, which, unfortunately they don't make any more, this is a great example of excellent contrast, because your first thought of looking at this would be while they're using color really well, those colors really stand out colors, not what's making this work. It's contrast. See what happens if we gray that out? That order of importance, the order of hierarchy, the order in which we look at things, the clarity of the different calls, the action, the clarity of the interaction cues does not change. It doesn't diminish its not any less easy to use. Nothing is less obvious. All right, contrast is doing the job here. That's appropriate contrast. 35. Typography 101: Let's talk about topography now, just like the printed page is all around us. 95% of what we see on screen is text based language. I point that out because it underscores the importance of typography and how dependent we are on the letters we see in just about everything that we use. I want to start by giving you a quote from email router who's a famous typographer, he said. Today we're inundated with such an immense flood of printed matter that the value of the individual work has depreciated for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer, his task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him. So look at that quote. What's he saying here? He's saying, Look, there is so much stuff out there competing for our attention. There's so much printed matter, typography, letters, words all around us, for our harassed contemporaries simply cannot take everything. There's print today. It means information overload. Okay, It means there's too much to deal with to read, to look at, to absorb, to interpret. He's saying it is the job of the typographer or designer in this case, which is you to divide up, organize and interpret this massive stuff so that people can, you know, find what they're interested in now. This was true in his time. This was 1969. Okay, is the attribution for this quote and he was talking about printed matter. If we take this same statement and replace printed matter with online matter, read it again. It's still absolutely true. Same deal. Same problem, Same solution. Here's another one. Typography has one plane duty before it, and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose. So again he was talking about printed design. He was talking about writing. If we take those same things and replace them with current terminology, this statement is still absolutely true. There is nothing more important than typography. There is no situation in which typography is not responsible from making sure people understand what they see. This, my friends, is the importance of typography, of letter forms of words and their relationship to other words and paragraphs and their relationship to other paragraphs, and that is what we're going to explore here. 36. Creating Emotional Impact with Typography: typography creates emotional impact. I want you to take a look at something, and I want you to think about how you hear these words. What's the voice in your head when you read them? Here's how I hear that game changing innovation, right or something like that. That's a cheesy version, but that's it's It's forceful is bold, game changing innovation and then below it. Virtual try on and frame recommendation technology for eyewear retailers, much calmer. The typography used here. The fact that it's all caps, the fact that is condensed, the fact that it's big and bold and thick is what does that and then blow it lower case thinner. It's a little more friendly. It's little calm. Here's another example. The story of Evert, 45 in April 1945. Ever. It leaves for the Value Ridge on foot, looking for his brother, who is in hiding a grueling journey, a life that is hard to imagine in today's world. This is why every journey was made available on YouTube and instagram. Okay, this is how you're hearing it. Are you hearing some variation of that? It's a much calmer voice. There's a lot of space between the words. It's calm. OK? Even a call to action is calm. Start Evert story that has everything to do with the typeface that they shows here. How about this? We will not let hate win. It's intense, but it's not screaming. It's making a powerful statement, but it's it's sort of calm and steady in the way that it makes it. That is everything to do with this choice is Helvetica of some flavor. How about this? The boat, Based on the story by Nam Li adaptation by Matt Hyun. Produced by SBS The Boat. It's intense. It's hand written, this little distressed. It signifies a humanness that also signifies some tension. Like something bad is happening in this story. The situation is very tense. The choice has everything to do with that typographic forms. Here are what communicate that there's another one. Gun violence by the numbers. Read the things below. Okay, those little squares. On an average day, 93 Americans were killed with guns on average. There in nearly 12,000 gun homicides a year in the United States. Alright. Very strong, Bold, powerful statements. All caps, condensed text. You hear that? In a certain way you interpret it in a certain way. Your emotions are tweet by how those letters look. Topography also serves a functional purpose. Appropriate typography choices create readability, accessibility, usability and visual balance, all of which work together to form effective, understandable visual communication. Take a look at this screen. The world today see everything in subscribe today. Notice how the world today is a big sand serif font. That's the big bold proclamation. That's the thing that we want you to see. This is context for everything you're going to read. Here's what's going on in the world today. Set your expectation. If you go down, you see October and remember 2015th. We've got interview Euro bangle dish those air categories. But notice how that text in the text below its Silk Road for the 21st century China's inroads to the West notice how that all reads differently. If you go from text to text, the text, the text, there are layers of information and the size of that text in the treatment of that text, its color, the space between headlines and sub heads, the size differences between the navigation above and the body text below. All those things are working together to move you through the information to communicate 37. Choosing a Font isn't Typography: The Power of Pattern Recognition: what I want you to understand is this. Simply choosing a funt is not typography. Anyone can choose a fund. Okay, you can go to def want dot com or any number of free fun websites. There's eight million of that's easy, but not everyone knows how to treat text as visual design. That means you're purposefully utilizing size, weight, space and style combinations to establish visual order to signal relationships, to enhance understanding. Simply choosing a fun does not automatically do any of those things. So typography is not about choosing fonts. It's about purposefully combining letter forms to create an optimal reading experience, which also delivers appropriate emotional impact. Remember examples I showed you before and how you hear those things that is part of the job of good typography. Now that has a hell of a lot to do with pattern recognition. And here's what pattern recognition is. We see the letter H. We recognize it. We know what that is. We've seen it 100 times before. We understand that those two vertical lines crossed by a horizontal line, at least in English alphabet. That's an age if we abstract it a little bit with a different type face. We still recognize it. Why? Because the pattern is largely intact. The more we start to abstract the pattern, the harder it is to recognize the shape. Okay, this is why font choices aren't necessarily typography, because weaken, choose a fund that's visually interesting. But the more abstracted the pattern gets, the harder it is for us to understand and recognize what we're seeing. So here's a full sense. This is proximate nova. It's a san serif font is very readable. Common patterns right th is look like common. H is e r. Right. We get it. We've seen this 100 times before. No problem. We can read this quickly now. Same sentence in a slightly different fun patterns are a little bit abstracted. There's a small lag in cognitive time to understand that here it is again takes a little more effort to read because of the weirdest senders and D senders on some of these letters . Also, the gaps between some of those letters is wildly inconsistent. Gas between words is inconsistent. You're going to see that later. But I call it out because a lot of fonts that are created are done by folks who really haven't given any thought to how consistent the spaces between letters and words needs to be and all heart bond. That's amore later, but I just wanted to call to your attention. We abstracted further. You see the difference. You see what's happening here. It's a little harder to read and look at. And when we get to this point, there's a lot of work the brain has to do, even if you can read it. Even if you can figure out what it says, your brain has to do a lot more work. This is the importance of choosing the right typeface, especially in situations where people are spending a lot of time on the screen that clarity and maintaining that pattern recognition is extremely important. 38. The Importance of Proper alignment, leading and kerning: good. Typography also starts with good alignment. Here's why. That's important. And I want you to compare two different types of alignment. Okay, here we have an example of left align text with what's called a rag, right? That means the letters on the right never wind up in the same place that's called a ragged right. Or again, the abbreviation is ragged, right? I want to compare that to this, which is center align text, which I see a lot off, and I'm hopefully going to show you what? That that's a bad idea. Alright, but for now, take a look at these two things side by side, which is easier to read, which feels faster to read. Which do you feel like you can move through quicker? In most cases, that's gonna be the one on the left. And here's why. There is a common starting point. Every single line begins in the same place. So once we figure out the pattern once we read from left to right on the top line, we get the I and the brand goes. This is where the line starts, and it automatically goes there at the end of each line. We don't have to think about that. It just happens. It's reflex. By contrast, when you have a center aligned text like this where you have a ragged outline on both sides , the starting points are all over the place. Your brain has to do work at the beginning, off every single line. It has the hunt and find the beginning of line and then go and then hunt and find and go and hunt and find and go. It's 2 to 3 times to six or eight times the effort. All right, you're making people work toe. Understand what's in front of them. There is nothing good about this. And if I've said it once I've said it 1000 times, paragraphs should never be center aligned like this. Never, never, ever. Don't do it. If you're doing it now, stop doing it and promise me that you will never do it again. All right. You've all seen this before. I'm sure some of you have probably seen it. The space between letters is called Koerting, and current ing is extremely important to good typographic design. It's critical to legibility, readability and comprehension. If you look at this example on the right. The reason. This is sort of hard look as because the spaces between letters varies. It changes. Sometimes there's a lot of space between letters. Sometimes they're jammed up close together. Even if you read the words your physiological makeup, the way that your brain is wired, the way that you're instinctively built to do things will keep you fixating on those gaps and those changes over and over and over and over and over again. It's a lot like we said about contrast. You can't help but noticed those differences. It's distraction so good Kern ing eliminates that, and I was taught to spot good current ing like this. The space between letters should be filled with the same volume of water and the supplies to the space between words as well. So again, if we look at this example to the right, what do you notice? Look at all the differences, all the gaps in what's happening there. Okay, it's all random. It's all over the place. It's not the same in any two consecutive places. So were you to sort of fill up those areas, you'd have a different volume of water in every year. Quick example already picked this fun out of a hat. The current in here is off. It's inconsistent. And here's how you can tell if I do my thing where I sort of fill those gaps with water. You see the differences in how much blue, how much area there is in between letters over here. The current is really loose here. It's good. That's pretty good that that distance is about what it should be. Couple loose gaps here. Tight gaps here. Really tight gap here. This is pretty goods consistent with that first H Indian. The this is a little loose. This is a little loose. These are loose and the words basing the way my instructors would say, this is you could drive a truck between those words, Okay, but that's how you recognize this. Now, by comparison, the current in here is OK now want you to notice the length difference from left to right in that line. Even though office three letters and okay is two letters, you see the difference in the length of that line. It's much easier to read. The Quran in here is OK. Your brain automatically goes from one to the next. Next, next, the next letter without ever stopping to notice those gaps. Because that's what happens. It's like being interrupted. Okay, it's like someone covering your eyes. Or if you're trying to walk down the street, it's like someone standing in front of you every two seconds. Okay, you have to keep stopping to take a look. Notice a difference now in situations down below, where you haven't are and an end together like incurring K E R N. There's nothing you can do about that gap there. It's always gonna be larger, and that's okay. A couple anomalies here and there are all right that's natural in the letters. If the rest is consistent, the I and the brand will sort of overlook those and keep going. Now I want to talk about letting letting is the space between lines of text in terms of your I design, we often call that line height. Okay, that's how it's identified normally in CSS. Increasing letting makes text easier to scan and easier to read, which makes comprehension a lot faster as well. In those three paragraphs, and I just put up there, notice the space between them those air resting points I read, and then I stop to read, and then I stop. Those stops are tremendously important to cognition. It's why there should always be space between paragraphs, no matter what you were taught in your English composition courses. Okay, I don't care what anybody has to say. This is infinitely easier. It's a lot less cognitive effort, and that's because it serves to visually group related Chunks of information we absorb were stopped. We absorb, we stop. It's how things are meant to work naturally. So if we start with a paragraph like this, everything is close together and there's no division between paragraphs. Sometimes you'll see an indent, all right, there's a lot of that, but that Indian is not enough. Two separate ideas. So this is kind of tough because everything is together and it's sort of a lot to deal with . Now. If we change that and add some space, look at the difference. How much easier is it to move through this right? A lot easier, because those spaces allow us to read and rest and read and rest and read and rest. Those rests are important. If nothing else, they ensure that we don't become fatigued when we're dealing with a lot of information on the left. How we're perceiving this is as one bold lined at the top and one big chunk of information . It all blends together as one big visual chunk. This is how we perceive things as opposed to this version, where what we see is a headline and lots of individual related lines were able to break it up. We're able to move through it were able to see the relationships between lines. It doesn't all mashed together as one thing. All right, this is how you reduce cognitive effort. I'm hammering this because people fix it on the idea that you I design is about how things look. It is also about how easy it is to utilize what we see and what's on the screen. That is all part of user experience. Now, one more thing. I want you to take a look at. Check out the spaces between paragraphs. Remember the principle of proximity. Look at the lines of the paragraph, see how they're much closer together. Those gaps are a lot smaller than the gaps between paragraphs. That's the principle of proximity. He in action, my friends and that first paragraph. These five lines all work together. They're part of one group. The next five lines all work together. They're part of one group. Proximity is used to separate these groups of information. And the reason I'm doing this is because I want you to understand that all these principles , all these things I'm teaching you never exist in a vacuum. You never just have one principle that applies to you. I design. It's always a combination of multiple things at play. So has you learn these things. I'm trying to show you how to also apply them. They all count. They all matter. They're all in play all the time when you were designing. So what? I certainly hope you get from all this, is you. I design mantra number 15 and that is all. Typography should be purposely designed lettering choices. Font choices should not ever be arbitrary. Pay attention to the letter forms that you choose along with what they say, what they suggest and what their impact is on comprehension and readability. 39. Seven Rules for Great Typography: all right, I'd like to wrap up our work on typography with seven rules for great topography. First rule, two typefaces, maximum gnome, or that means no more than two font families. Character widths and weights of each font should be complementary to the other, and I'm gonna show you an example. What I mean by that. Avenir and Georgia fonts, for example, have similar character withs, and that is what creates visual harmony. So here's Avenor book and here's Georgia. What I want you to notice here is that the character with are basically the same. OK, the distance between letters. The Kern ing is relatively similar. You can see what the parallels are here. That kind of visual harmony, even though they are two different fonts, is what allows them toe work together as a pairing. And, of course, it also creates some visual interests. At the same time, these fun pairings need to have some visual differences. Otherwise, there's really no reason to use the second fund at all. If these were both Sarah fonts or if they were both San serif fonts, for instance, there really wouldn't be much reason to use them both because he'd be very similar. So what you're trying to do is create some visual difference, some interest. But at the same time, there has to be some visual harmony in order for them to work together. So here's some examples of what to do and what not to do in terms of font pairings. If you take a look at the mobile version of the W b. A l news app, which happens to be a new station here in Baltimore, here's what you're going to see. 123456 different styles of fonts here. Okay, instead of two, they've got six. What happens is the whole thing feels disjointed. There's no sense of unity or harmony, or under the principles that we've discussed so far. It's all very disparate. It's all different. Nothing holds together as a group of contextually related information. Here's another example The Montasser Tick website. We got 123456 different styles of typography and again as a result, when you look at this, nothing really holds together. There's no clear signal that says this is the headline of this article. This is the subhead. This interactive element belongs here this text goes with the article, it all starts to feel like unrelated information, so this does not work. Now let's take a look at two good examples. This is a regal Cinemas Theatre app, and what you'll see here is that there are 12 typefaces. Okay, two styles repeated in different sizes, very clear visual hierarchy, and you can see that there's a relationship. Okay, it feels a lot cleaner. If they had used six funds here, the overall effects would be like looking at, you know, 40 pieces of disparate information. Instead, it's very clear it's well ordered. The hierarchy and organization and how things are related to each other is very clear. Here's another example. A news app. Same deal. We get one typeface used for the headlines and another used for all supplementary information. Consistent. Simple. Not a whole lot to think about. And that's why it works. Rule number two. Limit lined with when line lengths are too wide, the eye has to work a lot harder to track the text, meaning that following in finding the beginning of the next line becomes difficult. That makes reading and comprehension a lot more difficult and a lot slower. The common standard in generals. About 60 characters per line. But for mobile devices, it's less. It's about 30 to 40 characters per line. Now it's example, these Air two different mobile screenshots on the left. You've got a character count of about somewhere between 50 and 75 characters. You can see how small that is. Imagine this on your phone. It's going to be pretty tough to read. By comparison. If you look at The Washington Post, we have between 30 and 40 characters a lot simpler, a lot bigger and much easier to read and comprehend. Here's a Web page from a government website. Take a look at this 131 character's way, way, way too dense. It is very difficult to read anything this wide, Quickly, easily, efficiently, accurately. Quite frankly, what happens is a lot of times as you read from left to right, the brain will actually forget some of what it reads, and people will find themselves reading the same sentence over and over and over and over again, feeling like they didn't comprehend it if that's ever happened to you. This is one of the reasons why that occurs. Compare that to these mobile screenshots, where in the case on the left, we have 29 characters from left to right Really big, really simple and on the right here we have 40 characters from left to right again. These are both really, really easy to read, So both approaches work. Rule number three Choose readability overall else text will be used at various sizes in your interface from headlines, the body text, the form labels the buttons that data to etcetera, etcetera center. You get the idea. As such, the typefaces you choose have to be readable at all those sizes, which means you should absolutely be religious about testing your interface in its infancy in the early stages. Not to mention the fact that users will view your design are different devices with different screen sizes and different resolutions. All right, so you have got to test as early as possible your assumptions about what sizes ah, and fonts and line widths that you're going to use. Your citations should have enough weight that the letter forms don't degrade. At small sizes. They start to fall apart. They sort of look pixelated. So for example, if you look at this selection of different sizes and weights, you can see that as it goes down, it gets a little tougher to look at. This is the kind of thing you want to do very quickly when you're thinking about fonts. All right, set a paragraph, do a quick version and just look at the image on your phone. You don't even have to code a page your enoughto to build anything. Just take a screenshot of your layout. Look at it full screen on your phone in your photos app. You'll get a very quick sense of weather. Earnhardts. Your sizing in weight is appropriate. Here's an example. This is Thea Drudge Report, which we saw earlier. This is where it looks like on a laptop device. Now that's bad enough. OK, it's bad enough that this text is so small and it's underlined and it's really ah, poor choice on mobile. It's infinitely worse, of course, that they didn't really. I work very hard to implement a mobile version of this, but you could see how bad that IHS Okay, there's no way anyone can read this. No way anyone is going to read this on a small screen. Not gonna happen. Here's an example from the Android website. Here's what it looks like on a laptop screen, and here's it looks like on a mobile screen. In both cases, this is pretty good. Now I will say that on the mobile version, I would like that to be a little bit larger, but I'm splitting hairs over all that works. It's clean, it's readable, and it's working. Rule number four Choose ledge ability. Make sure every letter form that you use. Every font that you choose is clearly distinguishable in your typeface. And here's what I mean by that Beware of l's that look like eyes. For example. In the word illustration, take a look at the 1st 3 characters, those air practically the same letter. The only difference is that the yells air slightly higher. That's still presents an obstacle to clear, easy, quick comprehension. Some funds also have poorly specified current in which I mentioned earlier, which can make it our next to an end look like an M, such as this example in burnish and it's b u R N I S H. However they are in the end, are so tight that it looks like an end Bum ish, definitely not was intended here or an F and an l can look like an H in flickering okay. Perfect example. See that? That's just pour specifications incurring in the fund itself. And if you don't have a good way to adjust that and in code, you basically don't. Ah, it's a bad choice. Okay, so you want to avoid things like this that create misunderstanding or misreading. I've said it before, but it bears repeating. Most free fonts aside from Google, finds have horrible turning. So if you're downloading free fonts to use, be wary. There's example from Bob Dylan's website. Typography here is excellent. They've done a really good job creating hierarchy between the headlines between details like that date there on the body copy. While this all works together very well because the same typeface, for the most part, they also do an excellent job differentiating between navigation between headlines between the links at the top, they see that Bob Dylan newsletter button, and then you see search and lyrics different font. Set aside those air anomalies. They're different from everything else, and they're treated differently from everything else really well done. And again, this is indifferently readable. And if you look at this on a mobile device, it's even more so, just very clear, very crisp, and at the same time it has a lot of character. Rule number five used space between paragraphs said it before saying it again. It's that important visual breaks between paragraphs give the I a place to rest, and that rest actually speeds up understanding and comprehension. There is a widely cited study while back that found a good use of white space between paragraphs and particularly in the left and right. Margins as well, increases comprehension by almost 20%. Generously, space content is easier to focus on an easier to process, so increasing the space between the lines of text makes those lines easier and faster. To read, you're letting should be at least equal to half the character height. Okay, if you look at the lines between these spaces on the right, you'll see that that height is about half the height of the characters in the fun. All right, so that's kind of how you judge it. Use that as your barometer. Here's an example from the Butler Snow commercial litigation section of their website. Look at this is a big curtain of Texas, a big blob of stuff, and it is very difficult to sort of chunk it out and read it quickly. That's because it all runs together. There are no arrests. There are no stops. Doesn't work. By contrast, if you look at this article on medium, you'll see that there clear segments of information. Clear chunks. Here's the headline. Here's the subhead and here's how the paragraphs work. All those spaces work together to actually make it really quick to read and comprehend and move through this very quickly. Rule number six Ally in text elements in the layout using their baselines. When you have multiple text elements on a single screen, they should all share points of common alignment. Even if those chunks are unrelated. Keeps the layout ordered. Makes it easy and very quick to scan. On this slide, for example, the baseline in the text on the right from the last slide is aligned with this baseline. You see those points of alignment even though they're two different things, even though I'm using one as an example. When I construct my slides. I am very careful to try whenever possible, to align the bass lines of text that order, just like the alignment principle I showed you before. That principle in typography works the same way. It helps us get a clearer, quicker mental picture of what's organized and where, and allows us to bounce around and move through things much faster. Those relationships are really important, even if their subconscious rule number seven is to use styles to visually differentiate content. When you're choosing a typeface, you want one that has at least three styles regular, italic and bold. You use those styles in your designed to different J between types of content, and so far I've showed you lots of examples. Where that happens, the most common being headlines sub head and body copy. Sometimes this can remove the need for more than one fun entirely. All right, you may just choose one typeface, one fund. Every little of information can be signified with styling. Here's how that works. Let's say you're working with Droid serif, which is this fun and you say OK, headline is going to be big and bold like this. I'm a headline hinting at what's to come. Use the same fund for the subhead, but instead of bold, it's italic. Okay, I'm a subhead, giving you additional clues as to what you're about to read. Finally, we get to the body copy. It's the same font, but it's regular. We use a Tallis ization on one word might, in this case, just to call it out as an accent. Okay, but you see how those three things certainly work together because it is same font family. At the same time, they each stand out in a very distinct manner because of the way they're treated. If I could encourage you to do one thing and one thing Onley with typography, this would be it used. These three styles bold, italic regular to differentiate content types to further strengthen those chunks of related contextual information. Otherwise, you get sort of a big curtain off similar looking stuff that people can't really differentiate between and won't bother to slog their way through. Take a look at how styles were used here. Let's start at the top left, where you see top articles. That's a style that signifies category underneath it. Here's a style that signifies item on the right. In the article, we've got a style for our headline. We've got a style for the article credit who wrote it? And we've got a style for body. All right, What they do within the body of the article is they use another subhead style to break up the content, okay, to call it out and say, Here's what this little mini section is about Now could they do that? Using the same size and just making it bold? Sure. But that slight size difference is enough to call attention to itself and say this is a new topic. What this does, when repeated throughout an article, is it allows people sort of quickly scan, get an understanding of what it is they're about to read and make a quick decision as to whether or not they want to invest their time reading it. This is the power of styles 40. Five Rules for Choosing Imagery: okay. While the topic of imagery is enough to fill in entire course by itself, I do want to give you some basic ground rules for choosing and using images in your interfaces. So sort of a quick shot across the bow. But I think it's important to at least touch it. Number one. Any time you choose an image, you have to make sure that it serves a purpose. All right? And make sure you truly understand what that purpose is, more so than a lot of things you will ever using. A layout Images have a lot of emotional power. They send a message, and sometimes they can unintentionally send the wrong message. Okay, so you have to think about what message that image you choose is sending. What message does this image that I'm showing you right now? Send. This is someone is standing in the face of opposition. That tattoo on the wrist for my people sort of helps tell the story, right? Someone is standing up for something. Maybe they're standing up for a certain ethnic group that has been persecuted in a certain part of the world, right? This conjures images automatically of what might be going on here. And when there's text and image on a page, people typically gravitate to the image first. So again, that image has a lot of power, and it speaks in place of the text. That's their before anyone has read a single word. You have to pay attention to what emotions? Your evoking, how that image supports and reinforces the content. Howlett guide people. How would instruct people how it get them to do something or think about something? Does that image strengthen and deepen the understanding of the content, or does it interfere and distract from it? If the image is too strong, in some cases, it can overpower everything else. Here's an example. Take a look at this cover of Time magazine. What is that image say to you? Particularly given the context in which it's created right? I'm sure you're familiar with the movie Black Panther that just came out, and this is the actor playing the lead role. But aside from being a comic book movie, the historical cultural significance of Black Panther has a hell of a lot to do with how African American people are typically portrayed in arts in movies and historically, the history of racism in the United States in particular, right? So this image combined with that text a hero rises. This speaks volumes. It not only says something about this actor and him maybe his conviction about the role about the importance of the movie. It also says something about the historical context that the movie addresses. Same thing happens here. They're making a quick parallel between the race riots of the 19 sixties and America in 2015. Okay, that image speaks 1000 worths young African American male running from a horde of policemen . He is outnumbered, his outgunned. He is clearly no matter what he may or may not have done in some danger. All right, so one image tells a massive story, and it carries with it a lot of additional significance, a lot of implied meaning. You have to be really, really conscious of that to make sure that those meanings those possible associations are what you intend. There's another example. Government shutdown looms amid confusion in Congress and political articles in particular. Image choice is really, really purposeful. You will never see an image of a politician used by accident. The editors think very deeply. About what message? That name is sense. They took this picture of Paul Ryan where he sort of looks like. Okay, there, too. In that for a reason. Combined with the headline. All right, they're trying to send you a message. Something is wrong here. And governments, you know, Speaker is as frustrated as anybody else. Or maybe they're trying to suggest that, you know, he's trying to put one over on people. If you look at his expression, it could be either or it right here. He's upset or he's sort of scheme in a little bit right, contemplating something, point being. That image is very purposeful. The expression, the shot, that the huge amount of negative space off to the right, which really forces you to focus on his face, is very purposeful. Number two, Whenever possible, you want to focus on people and not things were wired to recognize and connect with their fellow humans. All right, you want people to see themselves using what you're promoting. So an image of one of us using a product will always carry more weight, more residents than an image of just that product It is a mistake I see all the time websites will show like here's the software here, the screens. If you show a person using the app with an expression on their face that says, Wow, I can't believe how simple this is. That's infinitely more powerful, right? We connect to other humans the way we're wired. Images of people looking away from the camera also tend to work best, because that makes it easier for us to imagine that we are that person. When someone is staring directly at the camera and opposed forced smile, it feels fake. It feels disingenuous, and we sort of can't put ourselves in that scenario. When someone looking away from the camera, we have an easier time imagining that that person is us. Okay, there's some really good examples for Verizon. You have people in the workplace, people at home. And even though we know that those air staged pictures, they feel more real, and it's easier for us to put ourselves in the place of these people. All right, Here's another example. JBL is doing the same thing, this young woman running listening to her headphones, we may be able to see ourselves in that situation. Rule number three cropping can absolutely change meaning. Okay, how you crop an image. What parts you cut out has a dramatic impact on how its proceeds. And unfortunately, this is something that I see used a little too often in a way that objectifies people in particular women. And I think that's underhanded. It's bad, it's disrespectful and it needs to stop. I'm going to show you an example. This comes from Fast Company, which is a magazine that ordinarily I have a lot of great respect for this young lady was chief product officer, I believe of startup. Okay, it's an idea that she found it. She's very sharp, very brilliant. She's got a lot of attention for good reason. She's incredibly good at what she does. So had they used a shot of just her face, we can assume something's about her. She seems confident. She's forward, thinking she is undaunted by challenge is right. She looks sort of bold and brave there. That's one thing. This is another. Now I know this is really subtle, Okay, but pay attention to how they shot this and how the shadow falls on her shirt OK, It's kind of a cheap shot to me. And it cheapens the image because what it does is it takes the focus away from her face and moves it to her physical attributes. Here's another example. If we look at this young man's face, yeah, he's a model. He's, you know, sort of good looking, and he's obviously well styled. But that is very different from this. Okay, these are two completely different messages being sent right. Which brings me to number four, which is never go for the cheap shot we touched on this a minute ago with cropping, especially if it's sexist, all right, this is so overused and it's cheap and it's degrading, and I want to see it stop. I can't say that enough. If in any way what you're doing reduces a human subject to an object, it's bad, it's shallow, it's in poor taste, and it's also look gonna be quickly for gotten Now. The example I'm using on the right comes from Design Observer, who's an organization that should absolutely no better because they're designed organization anyway. They wrote an article about this photographer, this guy Ryan Wiedemann, who took photographs in his cab for 30 years, which is really it's. It's fascinating work because you see a lot of different types of people, this sort of 30 years study of humanity. So the work itself is great. Here's the problem. They chose the lead with this shot, all right, and they did it for a reason to get people. Look at it the way that that dress is cut the fishnet stockings, a suggestive pose. Come on. I mean, it's It's cheap, It's a cheap shot. It's It's all major, look, And it it really to me. I keep using the word sheep, but it cheapens the value of that photographer's work as well, in my opinion, Okay, they could have very well used this, which is an equally interesting shot and suggests a lot of things about what exactly is going on in the back of this cab. They could have used this, which is another fascinating shot, which tells you that he had some interesting characters back there. The sort of voyeuristic nature of how this is cropped tells you something about what went on are, but they could have done these other things they did not really have to lead with that sheep shot and they did. And that's really, really unfortunate. American apparel is another example. Okay, these images are disgusting, and I'm sorry to be showing them to you for those of you who are offended and if you are, you should be these air very young girls and suggestive poses in very scantily dressed situations. And it's cheap you're talking about, apparently talking about the quality of your garments. This has nothing to do with that. This is Look at these young girls, right? It's disgusting. Don't do this. Don't objectify. Empower. There's a huge difference of your writing an article or you're creating an apparel line for women who serve girls who surf. There's a big difference in showing this shot, and this shot two completely different things. The one on the right is respectful. It's powerful, it's aspirational. It is full of positive things. With one on the left cheapens that young girl to an object. I can't say this enough. Do not do this. Number five. Do not forget the power of illustration. Take a look at this image on the right. Could that be any more powerful? Take a close look subject being censorship. Do you need text to explain what's happening there? No, you don't. It's easy to forget that illustration could be much more impactful. A lot of cases than photography, particularly when the subject is something we see a lot and as a result, are numb to okay. We've seen the same types of photographs images over and over and over again, and you sort of start to tune out things that you're familiar with so illustration could be more relevant. It could be more appropriate to its content. It can provide powerful emotional support to an editorial opinion like this does. We're talking about censorship. This says some inherent things about how hurtful that is, about how painful it is about what types of things are being impinged upon. Here's another example. They could have put a ton of tax on this page. We could have seen yet another image photographic image of Donald Trump, you know, with look on his face that suggests he's had too much to eat and his stomach hurts, you know, are throwing a tantrum. But they did this instead. Simple. Direct, Quick. Wow, Powerful. Okay, we get it. We know what exactly what this is about without having to see a whole lot. And it's fresh. It's new. It's a different take on a very tired theme at this point. Here's another example. This is done by my good friend Dave Plucker it. So I had to give him a shot up because he's brilliant again. It's a simple image. It says All sorts of things abouts this person, Um, and it also gives you some inkling as to what the article is about in a single simple image . Look how powerful that iss all right. And this is how it showed up on the cover of The New Yorker. They didn't need to tell you anything about it. They just lead with the image they trusted that the image would do the heavy lifting of communicating what's inside, and it most certainly does. 41. Imagery DOs and DON'Ts: to wrap up this section. I'm going to give you some quick imagery, do's and dont's, and you should know that these come from Google's excellent material guidelines at the girl on your screen. I could have come up with a bunch of rules for you. The fact of the matter is, they've done an excellent job illustrating what you shouldn't shouldn't do. So I am simply echoing what the brilliant folks A to Google have already done. Do show an actual person when the reference to that person is specific. Okay, this is order confirmation for, Ah, you know, tickets reservation for an artist for performance. Now we see that actual person that's confirmation that, yes, I'm going to see you. You also want to use illustration when specificity isn't possible or doesn't apply. Okay, in this case, I have an order confirmation, and maybe there is no particular artists. There's no particular human being that I can show here. There's also no good way to represent all the different types of maybe performances or events are vendors or whatever it may be at this event. So in this case, were just used an illustration tickets just sort of confirm. Here's what you did. You bought a ticket. Do look for images that represent until realistic stories. Take a look at this shot, right? So obviously have a father and a child on the beach. The child happens. We're looking at the camera, but the father is looking away. This looks and feels real. The fact that his hair is in his face, the child's hair is flying all over the place. The angle of the shot doesn't feel too posed. All of this feels like a real world situation, like a story like an event, this taking place as opposed to this. OK, it's opposed stage stock image and it feels fake. And if he kills unemotional, everybody smiling. OK, but your brain goes OK. I know they sat down and posed exactly like this again and the one on the left. As I said before, you can insert yourself in that story. You can feel it. You can feel the air, you can feel the wind. You get a sense of what that setting is. Like the war in the right doesn't standing except creepy people smiling at me. If you're referencing a specific product, do show that specific product. I know that sounds crazy that I even have to say that out loud, but you'd be surprised how often that never happens. I look at software websites all the time, for example, and what blows my mind is they do not ever show screenshots of the interface. They don't ever show people what it is that they'll be using, and that's the first question on everybody's mind. Am I gonna be able to use this? What's it look like? How does it work? Show the product. Don't, however, default to generic literal stock photos? So it's, you know, it's like a stopwatch. It helps you manage your time. Like forget the metaphors. Show me the product. This generis sized stock stuff doesn't do anybody any favors. When you're trying to communicate the features and benefits of a specific product. Do use color and composition to create a focal point that communicates. Meeting the pink here, that post it note is an anomaly, and it's not dead center. It's off to the left. It's framed by a bunch of similar things, but everything about that composition is interesting. Look at a because it's not perfectly centered. It's not perfectly symmetrical and be the color and contrast draws your eye to a specific spot, as opposed to making the user hunt for the hidden meanings in your image. Look at all the stuff here. Okay, there too many elements there, too many possible interpretations of what this could be of what it means of what's happening here is the article about coffee. Is it about the tablet that uses it about a cluttered desk is about people who can't clean up after themselves? Is it about starting with a blank slate, using photographs and multiple tools to create a solution? What is it OK, there? Too many interpretations, too much going on do use elements with Onley, a few meaningful elements with minimal distractions. There, two very big focal points here, these towers in the bridge, it disappears into the horizon. The color scheme is very, very, very simple, a swell that creates power. That clarity creates instant recognition, and it has an impact, as opposed to obscuring the point of focus, which also obscures meaning and diminishes power. There's a lot of stuff overlapping here. We don't really know what the point is. We can't quite make out anyone image. There's just too much visual noise going on here, Okay, So clearer. Simpler is better. Do strive for clear visual focus, which communicates the concept at a glance. You look at this, you know exactly what it's about, right? Has something to do with air travel. Obviously has something to with commercial airplanes. I get it. I'm there. No problem, as opposed to using a photo whose lack of focus makes the image meaningless. There are a 1,000,000 planes here, but the composition and the angle at which were showing the planes is kind of strange. There's a lot of reflection. There's a lot of weird shapes. It sort of takes some work to figure out what you're looking at. Right. When you compare this to the image on the Left one, there's no question what the topic is. One like. Okay, it's so Is this about traffic on the runway or those planes? Yeah, I guess. Those planes. So you're making people work to figure out what's happening, and that is never a good thing. Do build a narrative imply an interesting, informative story. Here's someone who's thinking about their day ahead. Their plans have got a planner on the right. They got a pencil. They've got some note pads. They've got a calendar in front of them. All right. There's an implied story here about I'm trying to figure out what my schedule looks like as opposed to this. A calendar icon. It's an image without concepts, or it doesn't convey mood. It doesn't convey anything about, you know, maybe the brand of the product. And there's no context for this. Like, what am I doing? What I'm using the calendar. Why do I need a calendar in the first place? Right, so one starts to tell a story. The other is just a implied concept. Narratives and stories have more weight and get people's attention. Do show a product and people in the context of a real world situation. If we have a piece or a website that's about car seats, this is a powerful image. Shows the child in the car seat. The mother, you know, interacting with the child. They're both happy. They're having fun, which means in general everything is relaxed. I got this product. I'm using it. I don't think twice about it as opposed to this. When you show a product in its user. This this baby disassociated from that context. It's not very interesting. The image on the left suggests how this product may fit into your life and how it becomes easily integrated into. It's not something you think about and life goes on, you know, as it is on the right. It's just like here's the products. We love our products so much. It's all about the product. The baby in it is an afterthought. Okay, so one leads again with a story and a narrative and context, and the other just says, Here's our thing. Give us your money. Also taking with the tone of these images on the left, All those tones are very warm yellow rids, you know, it's a very warm tone. Overall, this image on the right is very cold. It's pale, even that baby skin is very pale. Everything is very sort of weirdly saturated that magenta and the shirt sort of screens out . There's just lots of bad, weird things happening here, one of the best references I've ever seen for stock photos, and it's growing every day because photographers contribute to it is stock snap dot io. It is free. I'm noticing that people are using these images more and more, and I use them as well. Quite honestly, The quality of the photographers in their work on this website are so good in that you always sort of get what we're talking about. Here you get narratives, you get stories, you get context as opposed to just generic shots of people doing things. Okay, So look for that. When you look for images when you to choose images, look for that implied story that implied narrative. Look for something that supports the overall message you're trying to send. 42. Working with Icons: I want to start a conversation around icons with this quote from Jason Harris, who was an intern program manager at Microsoft. He says part of the user experience effort around Outlook 98 was improving the menu and toolbar structure. One of the problems we noticed again and again among non expert users was that people didn't use the icon toolbar at all. With the exception of the delete icon, which was familiar from the Windows 95 shell, people use the menus to reply forward and to create new messages. Okay, so people were ignoring the icons in the APP, and they were literally taking the mouse and going to the menus to find the text menu item for what they needed to do. So here's how that played out. Microsoft tried several solutions to get people to use. The icons are in. This is a screenshot of what it looked like At the time they introduced new icons. They changed the position of the icons that tried him in different spots. Okay, maybe it's that people don't see them. They placed the icons directly under the menus. The commands came from, As you see here, notice how in this menu. Check for new mail address book. Find items empty delete items. Notice how the icon precedes the text. This is Microsoft trying to get people to associate the icon with a command, right, so that when they saw it again in the menu, they would never think about what it was. But it didn't work. OK, nothing changed. People were still ignoring the icons, so they made a very small change to the user interface. They added labels to the most important toolbar buttons. Ah, so that's what these things mean instead of just laying them out, they're a bunch of images side by side. They added labels. The result was, there is significant increase in use of those icons across users of all skill levels because now there was context. Now people understood what all that stuff was before they were ignoring it because they didn't know what each icon meant, and they had no sort of quick, easy way of figuring it out. That was the birth of what we now know as the ribbon. And as I'm sure most of you also know that ribbon, love, love it or hate, it has been in place for a very long time. Icons are great in particular because they make excellent touch targets when their size large enough. For example, 48 pixels, they're very easily activated. This also makes it very easy to hit them with a desktop or a laptop cursor. That 48 pixel with is big enough for a finger, a thumb and, of course, pointer. I can save space. Their compact size means that more icons link to critical function out. It can be displayed in a relatively small space. For example, the home screen on your iPhone. Or if you have an android, it's sort of the same deal, even though these have labels. What happens is, after a few times you start to associate the icon with its content, and we're getting a lot of stuff in a very small screen, and it's not overwhelming, and we can easily, quickly make sense of it all. By the same token, here's a to do app called to do ist that I use, and it works the same way. Whenever you add a to do item, you get these elements underneath it. It's done. I can change the date I can create a comment. I can create an alarm. I can edit it. These are all common icons. I've seen them before. Another APS. Therefore I know what they mean. And again it's safe space. It allows me to look at multiple to do items at the same time as opposed to if I saw the to do item, and then every one of those icons had to be explained so space saving and efficiency is an important component here. They're also when they're done right, they're quick to recognise. Okay, if users have familiarity with the chosen icons and they've seen or use them before, it's fast. If you look at the music player on the left, we know what those symbols are from way back of those of us who used physical stereos. Okay, on on a tape deck, Fast forward, reverse play pause. Stop their common elements. We know what they are. Interface on the right again, those air common icons. We know what the calendar means. We know what you know. The x means to remove something so you're icons should clearly convey meaning. The group of icons that you see here work because they're familiar. All right, With the exception of younger first time users, we all have a great deal of previous experience with these on a daily basis. As such, we recognize them almost instantly. We don't have to think about what they mean or what they do. 43. Four Core Types of Icons (and Choosing the right type): there are four core types of icons you need to be aware of. The first are similar icons. Okay, these air useful for simple, easily understood actions and concepts. A right turn left turn. Very simple. No smoking again Clear, direct, simple visual metaphor is based on a real world object. This one in particular, I think, speaks for itself, right it It hints at the danger of sticking your hand into machinery and the you know the illustration. There's a little gruesome, but man gets the point across immediately. Symbolic icons represent an action and object or concept at very high abstraction. The hamburger menu, for example, that we all take for granted didn't really mean anything when it started it. It sort of sort of suggested a menu in that there were three lines of stuff, and then the hamburger thing came about because it sort of looks like a hamburger. There's a patty between a top and a bottom bun, but that's still a very high level of abstraction. It took time and use for all of us to get used to it and figure out what it means. The lock icon is another great example. We all know what a lock is in real life and what it does. However, in the digital realm of APS and sites and systems, it's become a metaphor for things that we can or cannot do, or things that we want to prevent other people from seeing or editing or manipulating in some way the printer as well. Not every printer looks exactly like this, obviously, but the visual metaphor is close enough to the real world objects that we sort of get it so high. Abstraction but still very solid, comprehensible, meaning example. Icons use images of things that exemplify or commonly associated with an action, an object or concept. When you see this image of an airplane, you kind of know what it is, and there certainly variations on that, all right, but it's the reason you see that kind of symbol on a highway sign, right? We get the metaphor. We know what's there. Here's another one. When you are supposed to cut something, you see that that scissor icon is sort of half hidden by a dotted line. This is the line at which you're cutting. Here's the scissors. It's a real world object. The male metaphor that you have on your phone or some variation thereof, depending on what kind of fun you have. That envelope is almost now instantly associate ID with email. Even though there is no physical envelope, there's no physical letter being delivered. The metaphor still stands. An arbitrary icons bear no resemblance to the represented concept. Their meaning has learned through repeated exposure. The USB symbol pretty much means nothing to anyone, but we've seen it so often that we know what it stands for. Now most people, myself included, don't really know what that combination of symbols actually means other than Okay, maybe it suggests hooking up different types of peripherals through a single connection type, but it doesn't really tell us anything. The Bluetooth icon. Same thing. Okay, this really doesn't bear any physical resemblance to what a Bluetooth signal looks like particular, because you can't see it. But this became the symbol for Bluetooth, and at this point, we all know what it means through exposure through use. The symbols for male and female okay are abstracted versions of physical characteristics of human beings, but at the same time it's not really literal in any sense of the term. But again, we've learned what the symbols mean. Overtime through repeated exposure. Icahn Choice starts largely with the environment that they're going to be used in APP. Icons should obviously be based on commonly used android icons or IOS icons. Things that we know things were recognized, things we've seen before. Laptop software icons should be based on commonly used Windows icons or Mac OS icons or uncommonly used software on those platforms. Okay, Microsoft office. Google Chrome context is really important. We base our understanding on what we've seen and experienced already. So you're trying to build on people's knowledge. You don't want to introduce a slew of new stuff that has no bearing and no relationship or doesn't leverage users. Existing knowledge of the device or the platform that they're already using website icons, by the same token should be based on commonly used icons, along with those used by competing or complementary sites. Again, our expectations are formed by everything that we use, so every website that we've ever been to you know, if we use Amazon five times a day, we expect some commonality between that and the business software that we have to use two completely different things. But our understanding a solar understanding particular when it comes to visual icons and their meaning that meaning is assumed based on past experience. Here's a good rule of thumb if you spend more than 15 minutes trying to choose an icon to represent something, and I can probably will not work in that instance, if you have to think that hard about it, you probably better off with a label. And the thing about labels is that label plus icon is hard to be all right. A text level goes a long way in properly setting user expectations and enabling that person to predict the results of the interaction. This icon, for example, with this be obvious to a new user what this icon means, what it does, or is this better? Okay, where the added label clarifies both meaning and functionality, Here's what this does. Now there's an association. So what happens if this is an enterprise app, which it is? On every screen we see that icon that combination. Pretty soon we're not reading the label anymore. We sort of know what that icon does. The point here is that you don't ever want to assume that everyone will automatically know what this means because that pop out functionality that new window functionality is illustrated in multiple ways across multiple laps. There, many variations of this icon. So you can't assume that the one you choose will be obvious to everyone. When possible, use a label so you I design mantra. Number 16 is that icons must be both recognizable and memorable. 44. Five Rules for Effective Icon Design: while there's an awful lot I could talk to you about regarding icon design, there are five sort of hard and fast rules that I would like you to follow when you're designing an interface and they are number one. Keep the visual or perceived size consistent. And here's what I mean by perceived size. Icons that occupy the same pixel space on the grid are not necessarily perceived as being the same size. So even though they're mechanical dimensions are alike the way that we perceive them eyes very different. So you check optical size with shapes. What you're looking for is equal visual weight, and I'm gonna give you some examples of that. Let's look at three icons. Technically, these are all the same size in terms of dimensions. They occupy the same space on the grid. However, they're not equal. They don't have equal visual wait. For starters, you can see the icons themselves. Don't take up the exact same amount of space within that block that's allocated to them. You can see that the widths are different, the heights are different, and those differing widths and heights cause a change in perception. Now, why is this important because when you have icons of varying visual or perceived waits, your unintentionally directing focused towards some of them as opposed to others. And remember what we've said all along. Any distraction in the U. I pulls the user away from the work they're trying to do. Okay, so any distraction is a bad distraction. Another way to tell the perceive size is off is by checking the width of the rules or the strokes that are used in the icon. When rule with varies at the same overall pixel dimension. Like these examples, those icons will be perceived as being different sizes. If you look at this first icon that rule right, there is an 18 point rule. If we look at the arrow, that's a 26 point rule, very different. Okay, if we look at the birthday cake here, that's a 16 point rule. So once again, while they occupy the same dimensions on the grid, they are not perceived to be similar sizes and everything I've showed you about harmony and balance and alignment comes into play here. These differences disrupt all those principles. Number two. You want to keep the level of detail in your icons consistent. More detailed icons will attract to use attention first, because they appear to have more visual weight than the others. So let's look at these three. There's a heart. We've got a book and we've got a word bubble. The I will fixate on this book because there is more detail inside that icon, right? More positive and negative space interplay, mawr elements. And again, you have to be cognizant of this because of one of those icons. Truly is maybe more important than the other than this. Convey a purposeful way to sort of draw the eye there. But nine times out of 10 it's only gonna interrupt the person's ability to sort of quickly scan. So you want to be consistent with how these work Number three eliminate unnecessary detail in the icon. Extra visual elements on Lee make that icon more difficult to perceive, even if it's composed of recognizable objects. I want you to think about context, context of use. Think about what really needs to be there and what doesn't. Here's an example. Let's look at three icons from an email application. My question to you is this. If I'm working in an email app. Do I really need to see the envelope icon? The context is that I am already working in male. My brain knows that, so I don't really need to be reminded of it as such. That envelope is extra detail. It's unnecessary. My contact has already established. OK, so all I really need are these smaller icons themselves. Number four don't mix and match styles. A silly is this sounds. I've seen mixed visual styles of icons in app so many times I've lost count. For example, don't mix, outline and fill styles in the same app or the same site. If we have an edit icon that is, you know, essentially a black fill or a color filled with some white highlights, you don't want to combine it with two other images that are sort of the exact opposite. Now, the caveat to that is this. Changing from outline to fill for Ah, hover state or an active state, however, is okay. You can see the difference between those three. So if that pencil icon in its default state looks like this now, they all match. Now they're all similar and then in a hover or inactive state. It goes to that, Phil. That's all right, that that's an indicator that tells me what I just did or where I am. There's nothing wrong with that. But in their default resting state, they should always look the same. Stylistically. Number five don't reinvent the wheel. Do not kick clever with icons. All right, if the concept or the action depicted is common or nearly universal, stick with the established accepted icon used to represent it. Anything else invites confusion and becomes a cognitive obstacle. This consistency is what allows us to move through things quickly without having to think too hard. Let's look at three icons for printing. This first icon is instantly recognisable. We've seen that before. It looks like a typical printer. We've seen some variation of this type of icon to mean You can print this a 1,000,000 times , is familiar. It's common. We don't have to think about it now, the 2nd 1 which depicts sort of, ah, Xerox type workstation, one of these big behemoth office machines. While it's technically accurate, it's not something we're used to seeing, and because of that, it doesn't work. It's not what we expect. It's not an instant Q and instant signal that we automatically recognize. And the same goes even more for this last icon. These air print rollers. It's a piece of paper literally going through print rollers. So what you're showing me are the guts puff of any printer is a roller and paper goes through it. Nobody needs to know that. OK, we don't need to know how the guts of something works in order to recognize it. So this is an abstraction from convention from what we typically see, and it does not allow the instant recognition that is part of good user experiences. We don't need to think about the icons we see. We need to recognize them and move on. So if you're doing things like this, you're making people think way too hard about what things mean. Stick with established convention. Don't reinvent things that don't need to be reinvented for the sake of being clever 45. Dealing with Data: Let's talk about dealing with data, and I want to start with this quote. The greatest value of a picture is when it forces us to notice what we never expected to see. And that's John Tukey, who wrote a book called Exploratory Data Analysis. It's Ah, a little stiff, but it's an excellent read. Ah, and here's the deal. What he's saying is really important when we get into data display and those of you who work with enterprise af specifically internal apse or self service portals reporting things like that, you know the volume of data. OK, you know how extreme it gets. You know how difficult it can be toe wade through it. So the value of standing it up in the interface is this. What you put up there is Onley valuable if someone can quickly understand or decode and act on what they see. So how you present data matters a great deal, and that's what I want to get into here. I want to introduce you to the concept if you're not familiar with it off the three legged stool, and this comes from an excellent book called Designing Data Visualizations from Noah Alinsky and Julie Steele. It's an excellent read. I strong suggest. If you work with data special and you work with a lot of charts and graphs and tables grids , I strongly suggest you read this book. It's excellent. So the relationship between information creators and users kind of looks like this. It's called a three legged stool. You have data you have a designer is the person who's responsible for standing up visualizing that data in the interface, and then you have a viewer. The relationship between these three things works like this. If the relationship is strictly between the designer and the viewer, it's usually persuasive. If the relationship exists directly between the data and the viewer, that's usually an informative relationship. If the data exists between the designer and the data, then that is usually visual art, meaning it's only for them, all right, and I'm gonna get into each one of these and explain what I mean. But for right now, keep this model in your mind. The persuasive model is between designer and viewer, as we said, and it usually means that it represents a specific point of view. Whatever gets stood up, whatever gets displayed in the interface is meant to change an opinion or reinforce an existing opinion, and the bias that exists there can sometimes be unintentional. If you take a look at this graphic, it's an infographic. You know, Americans are 25 times more likely to be shot and killed with a gun. This is a very specific point of view from an organization that is advocating stricter, smarter gun laws in the United States. So whether or not you agree with that position isn't the point. The point is, the designer and the originator and the creator off this content wants it specifically to be persuasive. That is its purpose. The next type is informative in an informative relationship. There should not be any bias. The relationship is specifically between the data and the viewer. Okay, you can take Google analytics, for example. It's a neutral presentation of facts. There are no implied opinions or assumptions or persuasion happening here. It's not trying to convince you of anything it's meant to educate as opposed to persuade. But you still have to watch out for bias because the things that you stand up, the order in which you place them what you show 1st 2nd 3rd can unintentionally create bias and that you're directing attention to certain categories of data. Certain metrics, certain measures, certain standards. So you have to be careful here. These air, usually broad and deep data sets and their distilled or introduced in stages progressive. Okay, so again, Google Analytics is a great example of an informative data relationship. And the third relationship is the visual art relationship, because it only exists between the designer and the data. What happens normally is that encoding takes precedence over D. Cody. In other words, there's more attention paid to how clever and how cool and how interesting can we be when we create this graphic is a self serving proposition from the people on the creative side. When it's intentional, the intended outcome is usually just enjoyment. When it's unintentional, it can have very serious, very negative consequences. And that's the part I want you to be wary of when you designed something that looks like this. As impressive as this is, as interesting as it is to look at, if someone has to use this data to make a decision, they're in trouble. There is way too much the process here. It is really extremely difficult to get a handle on the data relationships that are represented by all those sort of spider Web connections in the middle there. Way, way too much volume is too high, the visual density is too high, the visual complexity is too high. So while this is interesting, it's really not of use to someone who has a decision making need. And the reason I'm harping on this is because I see this kind of stuff starting to pop up in enterprise organizations with, you know, big data concerns. Big data is great, all right. It's amazing that we have all this stuff at our fingertips, But if you don't stand it up in a way where people can actually consume and understand it and act on, it is visual art, So context of use should dictate visual form. What does the viewer need to understand how quickly or easily do they need to understand it ? If we look at books, sales by category, let's say someone says Okay, here's a pie chart showing book sales. Does this really tell us what we need to know easily? Is it easy to figure out Or is this easier to figure out at a glance? You can see when you look at the bar chart the performance of each category. You can see what's higher and lower. It's much quicker to figure out the volume in each case when you look at that pie chart on the left. Those slices are so similar that it's very difficult to get a quick handle on you know whose leader in the category and how do they all stack up? So the form you choose has everything to do with what the viewer needs to understand and how quickly they need to understand. You should be asking what matters most, what matters most to us what matters most to the viewer. Remember, data can be persuasive needs to be. So if I'm in an enterprise organization, I'm looking at revenue reporting Departmental Revenue 2018. So I'm looking at this chart. Here's quarter 1/4 to quarter 3/4 for, and then there's a total with the departments. Here's the thing. All these numbers aren't really created equal because they're not all of value to me. Ask yourself this question before I show you the next piece. If you're a manager in charge of increasing revenue, obviously you don't want to lose money. You want to make money. What numbers here are most important to you? I give you the answer. These negative numbers are most important because it shows you where you're falling off. OK, it shows you where there's danger. It shows you where. Of course, correction might need to be made. So showing this chart in this way where all the negative numbers are automatically highlighted makes a massive difference in that person's ability toe act. On this data, they can more quickly come to a conclusion like Oh, cheese! There are a lot of instances here. We need to do something about this. That's the power of standing up data in the right way visually, And it's something that we really need to start paying more attention to ask yourself. Do the visuals accurately reflect the numbers? If we look at this chart subscribers by month, I see this kind of stuff all the time. It's three dimensional, and it's tilted on an axis. How easy is it to make a comparison across all those categories versus this? Okay, there's no good reason to be clever for the sake of being clever. All that fancy stuff on the left serves no purpose. It's decoration. It's visual arts. The version on the right tells us what we need to know. It enables the right types of comparisons. The visuals accurately reflect the numbers. So if you're doing this kind of stuff on the left, stop it. Go simple. Go flat and air on the side of accuracy. How easy is it for somebody to tell what's what. Here. So you I design mantra Number 17 is that context of use should dictate visual form when it comes to data design. 46. Five Rules for Great Data Design: I like to give you five rules for great data design their simple there quick. And you should absolutely keep these things in mind the next time you're faced with putting data of any kind in an interface number one data is only useful if it can be understood. If I don't understand it, I can't act on it. If I cant act on it, it is practically worthless to me. It doesn't matter how good it looks. Data is not the goal here. Data is a tool that helps us understand and make change in the world. Goes back to the big data thing. I said in the last lesson. All the data in the world is useless if I can't make sense of it visually. So data without design is noise number two. Never forget that you are designing for other people and they're not you. You have to design for their identity for their motivation for their language, you have to design for the learned social contexts that they operated. That means color associations, icon recognition, reading patterns, etcetera, etcetera, etcetera, data designed au is often an afterthought. We pick a reporting package and we say Okay, that's great. Do it. You have to apply the same rigour that you do with every other aspect of user interface design, where you're thinking about the people on the receiving into this stuff, and whether or not any of this is going to make sense to them if they're gonna understand it. So the user's background the users context of operation there needs their level of understanding is tremendously important. I can't say this enough. You are never designing for you on the heels of that number three you are designing for their context of use. As they said. What amount of information does that person need in order to understand or act? Is it a lot, or is it a little? What motivations is that person coming to the table with? Why do they need to see this in the first place? What's their job, where they're responsible for? How did those motivations influence how useful or actionable that visualization is? How much time do they have to spend with this information? I see this all the time as well, particularly because I work a lot in the health care and financial industries where there is a tremendous amount of data in every system. However, what you find is that people in specific roles and positions inside the organization typically need 12 or three data points in order to set their priorities for whatever this issue is in orderto act in order to decide what areas they need to look at more deeply. So there may very well be other supporting, detailed data that they need to see. But very rarely do they ever need to see it all at once. Up front, they need to see some summary data points that point them in the right direction where they're making the best use of their time. Okay, where they're only looking at things that affect the issue at hand. So think very hard about the context in which the person consuming this visual data is operating it. The core question you need to be asking yourself is how quickly will what they see be useful or effective? Number four. The usefulness of any data decreases when its volume increases. This is a universal truth, my friends, the more information in any given view, the harder it is for viewers to find what they care most about or are depending on in order to act. It also makes it harder for them to find what you need them to see. You want to reveal knowledge and facilitate insight instead of overwhelming with volume. Once again, never default to a full data set. Think about how much at each level of their decision making process they need to have exposure to. And by the way, these air conversations that you should try to have with the people who are consuming this data, you want to sit down with them and say, Hey, what do you do during the day? When you look at this stuff, what do you looking for? What do you feel like you need to see first? What do you need to see that dictates what you do next? Who do you need to share that information with? How much of it do you need to share it? Other people? All these questions will help point you to the correct volume of stuff that you need to expose at any given time on the screen. And finally, number five. The more brainpower required to decode your visualization, the less that's available for understanding it. You must respect this. I cannot hammer this home enough. Every single label, every shade, every dimension of data that does not directly contribute to your main message or to the viewers Core goal is noise. It's useless. It's stuff we have toe wade through in order to figure out what's going on. This is a simple relationship, and I do not ever want you to forget it. If I have to use this much brainpower to decode what I see to figure out what it is and what it means then I've got Onley this much left for understanding it. So if I waste all my energy trying to figure out what the hell I'm looking at, I have very little left to make good sound informed decisions again, you must respect this. 47. Simplifying Visual Information Part 01: So now I want to talk to you about simplifying visual information on the screen, particularly where data is concerned. Let's assume that you're working with a typically Gerrish. That's the only word for this bar chart that has all these all this sort of visual noise happening. We had a background. We got drop shadows. We've got three dimensional bars we got. It's all sorts of stuff going on here. This is way too complex for something that is so simple. So in seven moves, I'm gonna show you how to make this a lot less cluttered, easier to read and quicker to understand. Ready? Let's go first and foremost remove all backgrounds. There's no reason for that goofy tiled whatever it is back there to be there. It's just noise. It's unnecessary. Number two removed redundant labels. Take a look at the labelling. Here at the very top, we see smartphone users by age group on the left percentage of total population. At the bottom again, we see users by age group. That's the same thing that's already said at the top in the title smartphone users by age group. I got that. Now take a look at the fact that there's a color key down at the bottom blue 16 to 24 red 25 to 34 etcetera, etcetera, not take a look at the chart. That association is already there. The bar, the blue bar with 16 to 24 under it. You're already telling me that information, so the key below is useless. It's unnecessary. It's redundant, so we remove it. We already know that this is percentage of users by age by each age, so the percentages on the left speak for themselves. We don't need a label for that. We also don't need to reinforce relationship between the age and the color. It's already lined out there. It's labeled clearly already. Those extra labels are just noise, so we take them away. Next we remove unnecessary borders and containers. Those boxes surrounding this are redundant. There's no reason to have a box around the whole chart. There's also no reason to have a box around the data area. It's just additional noise. You see how this is starting to become clearer? Easier to look at simpler, but we're not done yet. We're also going to reduce colors. We're gonna highlight the most important data using a separate color for each age group really serves no purpose, because the only thing we really want to know is how these age groups compared to each other. And we probably want to know which age group has the highest use. So all these bars could be the same color in this case, Gray so that we can make the highest category, which is 25 to 34. Stand out, goes along with everything I've been saying so far. Show me what I absolutely need to know first and give me all the other data and make that most important think about how this data is going to be used to take it one step further. We get rid of those three d effects that shadows the drop shadows, the three D modeling, all that stuff. It serves no purpose. It's noise. So we get rid of it. It's starting to get simpler. You see, we take it one step further. We visually separate the labels in the lines from the data by making those rules thinner and making the numbers on the left and the numbers at the bottom. A shade of gray as opposed to black. When you do that, when you reduce the visual contrast of the labels and guides, what happens is the data itself starts to come forward. Now our focus is more on those bars where they fall and what they mean. But we're actually not done yet. We also remove every extraneous line in every extremist label that we confined. Do we really need those bars and those labels on the left side? Not really, because in many cases, and I've seen this in plenty of reporting packages, we can put the percentages inside the bar. So the first bar, 61% 2nd bar, 64% and all we need are those labels at the bottom that tell us what the age ranges are. You see how much simpler this is. It's quick, It's fast. We can look at it, get it, move on. We got rid of all that extra stuff that was doing nothing but calling our attention to it and pulling us away from understanding the data in front of us 48. Simplifying Visual Information Part 02: Now let's use some of those principles to fix a really cluttered you. Why, This is a beautiful example of what typically passes for state of the art. An enterprise software. I hate that term with a passion Number one. It's an old term number two. It's still being used as if what we're looking at here is some sort of modern marvel of interface design and efficiency, which it most certainly isn't. This is riddled with visual clutter, and we're gonna fix that. So here's our starting point. Okay, here's the interface as it ISS. You can see that there's a lot going on here. There's a lot of information jammed together tightly. It's all very small and very tight, and it's all blending into each other. There's no clear differentiation between things, so the first thing we're gonna do is we're gonna increase the negative space. If you look at this, all those areas of magenta that I just highlighted. Look at the randomness. Remember what I've told you about alignment and proximity? In particular, there's no consistency in the distances between items. There's no clear separation that groups thes things. This is one group. This is one group. This is one group. It's sort of all runs together because the negative space is very haphazard. We change that. We're and make it more purposeful when you increase the padding just about everywhere, you start to get clearer chunks groups of information, which makes it easier to quickly bounce and scan and look at what's here. So here's what we did in this instance. We increased the container margins on all four sides everywhere, every single area, every single container, more space inside the margins. We also increase the margins after each paragraph and line height, extra space start to separate those things. We also increase the padding inside containers, cells, fields, buttons. Any type of enclosure here has a lot more padding, a lot more air inside it. That again allows us to focus on the label. If you even look at those buttons at the top, save, refresh at it. Mood. Close the air between the edge of the button and the the word itself. The label goes a long way in allowing people to sort of quickly read and understand. Second thing we're gonna do is remove all the unnecessary rules and containers. If you take a look at this. Look at all the outlines on these containers. Everything has a rule around it, which, because of the way that they're using color and because the contrast here is really, for the most part, unnecessary throws. Rules aren't really doing anything. They're not separating anything. They're not really helping us move through this. They're just extra visual noise. They're unnecessary. So we're gonna take him out, see the difference. All those groups still hold together the chunks of information, the left hand, navigation, that information tree in the middle, those tabs in the center, the grid based data towards the bottom. They are still holding together as chunks. Without those rules, we still see separate sections without those rules. So what we did here is we removed any unnecessary rules we could find. Instead, we use negative space and alignment to create those visual groups. Just like we learned very early on in this course, we removed the rules from existing enclosures that already have background colors. Okay. Areas like that left hand blue vertical navigation, the sub navigation, the hierarchical tree next to it. The tabs next to that. Okay, the rules are unnecessary. When you have a background color that's already defining a shape, the rule isn't necessary. We also used color instead of rules wherever possible, if weaken different, shaped by color. If we can differentiate by shade, you want to do that first. We visually separated the navigation areas, made a very distinct change between what's navigation and what's content. We also lightened any rules that must be used OK, in a couple cases here, like the rules around the fields, for example, or, for instance, the separation on that tree menu. You can see there's a white rule around that box, right? We changed it from a harder, dark grey rule to a light rule. It's barely there, but it does help separate things. So if we have to, you feel like we have to use a rule to visually separate something. You make sure that it's contrast is much, much, much lower than the content that it delineates. Next, we're gonna separate labels from content in tables and forms. If you take a look at this interface, all this text is treated the same way, from the navigation at the top to the three tiers of navigation right below it to the breadcrumb trail that happens to all the way down these menus. It's all the same fun. It's the same size. It's the same case. It's all lower case. It's the exact same color you have. Tow work to visually separate labels, from content controls from content. Okay, interactive elements. They should be treated visually differently in some way. When all this text is the same size, same font, same treatment. It makes it much harder for us to quickly get through this because we have to read everything cause it's all the same. It's all calling for attention. So here's we're gonna dio we're gonna change the case and or the color of navigation menu items. We made them all caps. If you look up at the top at Content administration, user administration, system administration and the sub categories below it, those air all caps now all capital letters, they're also lighter. We change the shade so that they don't have as much contrast as the content text on the screen. We also changed the case in the color of button labels. If you look at every re yellow button here, you'll see that those air all in capital letters now as well. That starts to help separate them from the stuff we need to read and or understand. We also made the field labels lighter than the text inside the fields. So if you look down where it says portal display rules editor in this center, look right below that word says Rule collection, name, rule collection, I d. Those air the labels. They should be lighter, then the fields next to them so that the content in the field comes forward. That's where our focus should be when the label is a gray and it recedes a little bit, that increases our ability to focus on the content on the stuff that we need to read, understand, act on. And finally, we adjusted the contrast between the heading and the content container backgrounds. In many cases, there were backgrounds behind things, and backgrounds were a little too dark, little too saturated, and they were competing with the labels. You want to make sure that the heading has come forward and the backgrounds receipt. You can see that where we have in the tabs in the center Master Rule collection rule collection. We made those actually lighter. They were a dark font before on a blue background. Now there are white fund on a blue background. They come forward much more. They're much easier to look at, much easier to read because there's more contrast between them. Finally, we're going to separate primary, secondary and tertiary actions. Interactivity. Okay, interaction, choices. So here is we're gonna dio we're gonna take these buttons. In particular, there are four choices at the top. This fortress is at the bottom. All of these things are not equal. You can see that they started to sort of gray them out. Right? Refreshes active, closes active. The other two are grayed out. Add if expression at the bottom is active, the others a great out. Right? So there are some primary actions here, obviously and there's some secondary actions the design, the treatment of those buttons should reflect that level of priority, that level of importance. So what we're gonna do is we're gonna make the primary action always. Ah, high contrast button. It is always the yellow, but and it always appears to the far left the primary thing that it's very likely the user is going to do on the screen is always the first thing. It's always a button. It's always yellow. The secondary or tertiary actions appear next to it. On the right has low contrast buttons or text links to see how we treat those other buttons . They're great out. They're simpler. They don't have any color attached to them. And where possible, you make them text links instead of buns. If you can get away with that, the contrast of tertiary actions or Quaternary actions should decrease gradually for items of less importance. If you compare the buttons at the top to the buttons at the bottom, look at the bottom where it says, add if expression Look at those other two buttons. They're still higher. Contrast the ability to move an item up or move an item down those air secondary actions. They should sort of come forward a little bit. Compare that to the top. Okay, where we have refresh edit mode close. Those are technically coronary actions. They're not nearly as important as those other things. They won't be used as often as those other things, so we treat those differently. Contrast decreases their of less importance. Finally, unrelated functions should also have a different visual appearance and be separated in proximity. So anytime actions are unrelated, you want to take care to separate them with negative space from the unrelated actions that may be sharing, you know, the same similar space. So what I hope you're getting here is you. I design mantra 18 which is that simpler is better. 49. Separating Content from Controls Part 01: So let's talk about separating content from controls, which I touched on a minute ago. When there are too many choices on the screen, it's easier for people to choose. Nothing too much is just that too much. So if we look at this example, this is, you know, a website called the Business of Fashion. Everything here competes with everything else. It is all the same amount of contrast. It is very hard to tell the difference between things that are interactive and things that are just content meant to be read everything. Here is a link from the social media links at the top to the article snippets at the top to that logo in the middle, to the navigation below it to the article on the left to the motile pop up that's happening in the centre joined. Now all these things are fighting for our attention. So what happens when someone is overwhelmed like this? They will typically just leave the page because there too many things asking for their time , even if the constant is something they're really interested in. When this kind of overwhelmed happens immediately, people bail and the thing is they will not be able to tell you afterward. Were you to ask them why they bailed? They'll just say that. I don't know. I just couldn't find anything. I was too busy, too. Busy is one of those things right? When you hear that, it means that there's no distinct path. There's no separation between items that are interactive and items that are simply content to be absorbed. Red. Understood. By the same token, when everything is interactive, nothing is interactive. Most marketing landing pages look like this. There are a plethora of buttons. Take a look at how many interactive calls the action there are here. OK, every one of these is a call. Even that headline in the middle is called out because it's so high contrast in a way that it feels like Here's something else you should look at. OK, but we have buttons up at the top left. We have navigation at the top, and you know it's explore intelligent designs free forever. Take a trial. We love small businesses and entrepreneurs watch our tribute you. There's a little tiny called action running across the top. Call us plans and pricing. Take the tour, watch the video. Why we're number one. All this stuff. Okay, There are too many invitations to interact. And when that happens, none of it may as well be interactive because people are not going to choose any of it. Content should always be clearly separated from controls. Let's look at another example. This is crafted studio. Take a look at all this text from the knave at the top, near two layers of navigation stacked on top of each other than when you get down into the text. We've got the same textiles again. 70% increase in conversion rates. CMS website design All those bullets. They're treated the same way as the Navis treated. It's the same font. It's the same size one happens to be black and one happens to be white. That doesn't matter. The brain perceives those things as being equal. So we've got confusion between what I can tap or touch, click, interact with and what is simply static text. We've got all these logos at the bottom, sort of separated and called out to themselves. We got a big banner on the right side that that is a completely new visual style. A band you know Here we're here. Let's chat. That doesn't look like anything else. Plus, we've got three blue buttons. We got a phone number at the top. We've got get 50% off your order below that. And then on the left we've got get free quote Now. There are too many points of interaction, and it all sort of blends together with things that aren't interactive. The lesson here is that interactive elements should always be distinct from their content counterparts. Let's take a look at a mobile app. This is truly a which I happen to be using right now because I'm trying to sell my house. But truly a works like this. There's a lot of confusion between what's content and what is actually interactive. When I can tap and click on this button up here, start searching. That's a control. The next line. Open homes in San Francisco, California That looks like content, right, because it's just a line of text. Guess what? It's interactive. If I tap it, it does something. This is actually a control. It's just a image. There's no indication that if I tap that image, something will happen now I may trigger that behavior by default. But there's no overt clue that says, Hey, I do something aside from that hard icon, which I expect to be interactive because that's, ah, icon that I've seen before That's learned behaviour. I know it probably allows me to favorite that house below that we've got content. Here's the price of the house here, some details below that. We've got another line of content, but it's in green. It's in green, just like that. Button up the top that says, start searching. That implies interactivity. You've set a cue that says in English. Green is interactive, but then you don't follow it because that line is not interactive fight tapping a touch it , nothing happens. And remember, the black line of the top Open homes in San Francisco, California, is interactive, so the paradigms here are sort of all over. The place is no consistency and finally has some controls of the bottom. But again, they're black, they're gray. So number one the established cues are not consistent. And number two once a Q is established, they don't follow. Let's look at another example from a different app. In this case, we've got some pretty clear controls up the top of this image. The X, the heart icon, the share in or forward icon. We've got the picture image icon at the bottom. It tells us there 50 images to look at those things because of their placement because of their similar treatment. All say we're interactive, We do something now, Once they introduced that paradigm, they follow it pretty well because we've got another set of controls, similar looking icons, even though they're a different color at the same time, I still would like thes to be in a color differentiated from the same gray that is used at the text below. So now we've got new open house that appears to be content, but it also appears to be a control of some sort. Which is it again. We've got control down here because if I tap on that, it is actually a link to get pre qualified. That takes me to 1/3 party lender link that says, Hey, do you want financing? We can help you, but they don't follow it. Okay, again, you're sort of mixing and matching the cues as to what's interactive and what isn't. And these down below. Now these are obvious controls because they're anomalies. They're done in a color that doesn't exist anywhere else. They're huge buttons, different text style for the label. It's very clear. But again, even this is all over the place. Both APs need to do a better job of separating interactive control from content, making it really clear that here's the stuff that does something. Here's the stuff you're just supposed to read. 50. Separating Content from Controls Part 02: one of the ways that you do this is that you work to separate primary and secondary actions . And you heard this from me previously. Economy clarity Focus is created by differentiating primary actions. So if we have two options saving, cancel right out of the box in bootstrap, for example, just to pick on something right out of the box, every interaction is a button. Okay, in most templates in most libraries. So if you have choices, save, cancel, whatever their buttons, they're blue buttons, they're there to default style. And what happens is typically the design development teams will leave those defaults. What do you think happens as a result of that? I'm sure some of you are saying it to yourselves. What happens is a lot of times people hit, cancel when they mean to hit safe, and in cases where the state isn't save where the data isn't saved within that session. And believe me, there are a lot of them. Despite what you may think, they lose all their stuff and have to start again. That is bad, this destructive. And it insurers that people probably will not try a second time if you piss them off. So the better way to treat this is like this. The primary action is always a button. It's got the most contrast. It takes up more visual space. It's distinct. The secondary action is text. It's not a button. It's not anything resembling a button. There is no question, visually, that here is the primary thing you here to do. Here's the secondary thing you're here to do. That kind of differentiation is really, really important for ease of use, for efficiency and for accuracy. The same principle applies when there are tertiary or even quarter Neri actions. So if we have three options, we can create a file. We can save a draft of an existing file, or we can cancel what we're doing. In that case, we still treat them as three distinct things. But we work to establish hierarchy where the primary action is still the most important. That will look like this. The create button again because it's blue because it's solid because it has. The most contrast is the primary action save draft is the secondary action, so it is still a button shape, which makes it more important, then cancel. But it's all grey. It's what we call of her diss, referred to as a ghost button. It's white. It's got great texts. Grey outline. Still, they're very subtle, very simple, but it still reads like a button. And finally, the tertiary action is canceled. It's just text. Do you see how the visual hierarchy decreases from primary to tertiary? So think about that every single screen you design when there are multiple interactive controls, multiple interactive cues work to differentiate the primary actions. Sometimes, if you do nothing but this in an enterprise application, ease of use, skyrockets, accuracy and completing forms, skyrockets and even just getting people to go through the workflow and do all things they're supposed to do often increases as well. This is a very big deal. Let's look at an example where content is again mixed with controls, interactive things, air mixed with non interactive things and flat design is taken to sort of a ridiculous extreme. Now, from a visual design standpoint, this is nice to look at its very well designed. It's attractive, however, there is some very serious flaws and what they've done, and I'd like to walk you through those first of all this whole details looks like a button , right? It's got a rectangle around it and it looks like a button, but it's not. It's content. It's a headline. It doesn't do anything you can tap or click on this all day long and you'll get nothing. So the customization, whole details, those air, both just headlines, and they're visually treated like buttons. This is someone being clever for the sake of being clever. All they care about is what it looks like. Wow, that looks pretty good. I'm gonna do that. But it sends the wrong signal to people who are trying to use it. That's the first thing. The second thing is that these controls previous, next at the cart there, indistinct same goes for the drop them and use their very subtle. They're barely there, and there's nothing about them that signifies clearly that they do something where people figure it out. Yes, but because of the extreme subtlety here, people will confuse what's interactive and what's not, and it won't be able to quickly and easily act on this. So how do we fix that? Well, we do a couple things. Number one. We use common conventions. There's no reason for a previous and next, but convention for pagination is this. You got a narrow on the left to go back in and air on the right to go forward, and in between you've got the number of screens that are there. So again, don't reinvent the wheel stick with convention. Those buttons are unnecessary, and all they do is compete with the other loans on the page. That's 1st 2nd increase. The contrast in these drop downs to separate and emphasize them as interactive controls make them stand out little more from the background so that it's clear. Also, we added a border and some padding to this add to cart button to separate and emphasize that it's an interactive control. When a button spans the entire width of a column of a space and the grid, it doesn't look like a button anymore. It looks like a decoration. It looks like a headline background. All right, so that extra space that enclosure around the button make sure that we read it as a button . And finally you will notice that we change those headlines up their whole details customization. We remove that rule so now, there's no question that that's just a headline. It's just a category call out. This is an example of clear separation between what's content and what's interactive control. So we look at them side by side. Here's where we were. Here's where we are. Do you see the difference? There is no question in that second option, what is interactive and what isn't because the core action, which is add a cart, is very clear. Those drop down stand out the headlines air not competing with anything else that previous next isn't competing with anything else. We can focus on the product we're buying and the action we're taking right now. So you I design mantra number 18 is that you should always be working to separate content from controls. 51. UI Design Mantras Recap: So we're at the end of our journey together, and I would like to leave you with a recap of all the you I design mantra as I have given you thus far. First design is designed is design is design is designed t. OK, what you are doing is problem solving. Never lose sight of that. You are designing, not decorating. There is a difference. You are communicating. You're facilitating understanding. You are guided. Number two. Stop solving other people's problems. Remember that the work that you are doing and user interface design of any kind in any aspect is specific to your industry. Your problem, your audience, the context in which both your organization and those users operated Number three form does not and should not follow function. Pure functionality should never dictate what something looks like. What should dictate. What something looks like is the context in which a person needs to be able to use it, their level of understanding whether or not they're going to recognize what they see, understand it and be able to use it. Number four. Every force evolves form every aspect of working on anything right down to the politics in your office dictate what final form looks like, which means you have to adjust the way you work along the way to accommodate those forces. Number five on small screens, less is more One of the greatest ways ever heard this put is if you're moving from a large six bedroom house to a two bedroom apartment, you can't take all your stuff with you. It's not gonna fit. By the same token, any time you are migrating a large AP or large enterprise system to a mobile app, you have to be really cognizant of what really needs to be there. And in general, when people are dealing with small screens, they only have so much time, attention and ability to use what they see. Number six Balance creates visual order and signals relationships. When you're arranging elements on the screen, you want to strive for balance That allows them to move through it in the right way. That allows them to sense what's related to what along with what it means. Number seven visual rhythm speeds up comprehension and use. Remember what happens when you have repeated rhythm. Remember those examples I showed you? 121212 As much as that may seem like an afterthought, it's a tremendously important component of everything you will ever design. Number eight Good design is held together by harmony, just like there needs to be harmony in a relationship in a friendship, harmony in the workplace. There also needs to be harmony in you. I design so that all the elements work together with each other as opposed to against each other. Number nine Dominance directs. User focus. Never forget to pay attention to the most dominant element on the screen, and whether or not it is your intended point of focus, Number 10 went in doubt. Align everything with everything else. The power of alignment is a massive force. It is one of the most potent tools you have to create Excellent You I design and positive user experiences. Number 11 group and organized related content with proximity just like alignment. This is a big one many times if you do nothing but pay more attention to negative space, putting more space between things that are unrelated and less space between things that are related, ease of use, skyrockets, user experience becomes infinitely more positive, no matter what the interface looks like. Number 12 always used color to communicate and influence interaction. Color should never be subject to personal opinion. You should never pick colors because they look cool. And you should always be cognizant of the fact that refracted light from a screen combined with heavy color saturation typically makes it very hard to use an interface. 13. You should be choosing your colors based on associations, emotions and brand. Those are your starting points for choosing colors in the interface. 14 contrast always wins. Remember what I said about color and contrast of color starts. The fight contrast finishes it. There is nothing more powerful. 15 typography should always be purposefully designed. This is about much more than simply choosing a funt. You need to be aware of what those letters say, what they communicate and whether or not the letter forms and the fonts that you choose enable pattern recognition and readability. Number 16 icons should be both recognizable and memorable. Remember what I said about reinventing the wheel? If there is a common associative icon for an interaction, don't straight from that. Stick with what people know and understand. Number 17. Never forget that where data is concerned, context of use should always dictate visual form. What do I need to do with this data? What are the most important things I need to understand? What do I need to act on? Focus on those things? Number 18 simpler is almost always better. That is true in life and it is most certainly true. In interactive you I design and finally you. I design mantra number 19 Always always, always be working to separate content from controls. You want clear differences between what people can read and see and what they can act on. I truly hope that this course and these mantra is will be helpful to you in your next you I design endeavor, and I wish you much success in everything you do.