 All right, so now we have Mark Miller talking about the science of grade UI. Thank you. Welcome everybody. Glad to have you out here with me. I'm Mark Miller. I work for DevExpress. I am ready to go right into my slides. So I'm going to share my screen with you guys and see how this looks for you guys over there if you can see it. Looks like it's working. So science of great user interfaces and great design. We're going to talk about this very quickly. I've collected some of my favorite guidelines. That's me right there. We're in my super cool superhero look over there. My emails in the bottom left in my Twitter handles there as well, Miller Mark on Twitter. I've been writing developer productivity tools for about 30 years. I've been researching great design for about half of that time, about 16 years now, and I'm Chief Scientist for the IDE Tools Team at DevExpress. The product that I spend most of my time working on is Code Rush for Visual Studio. So that's a little bit about me. Here's what we're going to hit, and I think we're going to hit these things pretty quickly. We're going to talk about emphasis and importance, contrast and readability, proximity and layout, borders and spacing, and fill and corners. So emphasis and importance first. So emphasis is the ability to make information appear important, and here are some of the ways that we can do this. So to some degree, you could look at this and say, well, I can see that one way I could characterize this is saying, well, most of the text is referenced is rendered in one way, but portion of it is rendered a different way. So that's one of the ways that we can do it. It's just by being different. And we can also do things with contrast, saturation, shadow, that sort of thing. So emphasis is the ability to make information appear important. Keep this in mind as we move forward. Now I know some things about some superheroes. I know about Batgirl, I know about the Hulk, I know about Scarlet Witch, and I know about Superman, all right? I know about their powers, and I know about their secret identities, and I know about their chances of beating me in a battle. And let's organize the information that we know. So I'll create a table and we'll put some columns, headers here for the information. We'll put the Batgirl here, secret identity, Barber Gordon, chances of beating me in a fight, 100%. The Hulk, main powers Hulk smash, secret identity, Bruce Banner, chance of beating me in a fight, about 50%. If I catch him on a non-Hulk day and I sneak up. Scarlet Witch and there's Superman. So this is the information that we have here when we're talking about the things that I know. But the question here is, can we separate this presentation into two different groups of information? One of the groups, the high importance data, and one of the other groups, the low importance data. And I want to give you a second to look at this and think about that question. How do we separate this information into two different groups? And here's what I did. If you're looking at the text and thinking, well, which parts of the text are important and which ones are not, then you're missing a really important concept. And the important concept is that everything on screen is information, even the borders, right? Even the background. Everything on screen in an interesting presentation is information. And so the question is, what's important and what's not is a good question to ask. The reason why, well, we'll take a look at it as we move forward here. We'll see it in a second. Everything here in this table, if we zoom in on it and go in even closer, notice that the width of the border lines is equal to the width of the fought stroke. Also notice that the contrast is the same as well for both of these. The contrast between the line or the text font, the text and its background is the same. It's black on white. So in this presentation that we have here, the emphasis is the same everywhere. Experiment, we might take the border lines and say, well, let's really emphasize those. We'll use two techniques. We'll use, will you keep us to the high contrast and we'll make them even bigger. And let's deemphasize the other information, which we identified as important by making it a little bit lighter and lower in contrast. And continuing the experiment in the opposite direction, we can create a table where emphasis matches importance. And then we can take a look at these three and ask ourselves a question, which one of these three is easier to read the data? And if you're like virtually everyone, you're gonna say the answer is this table down here, right? And in this table, emphasis matches importance. So earlier we said that emphasis is a way of making the brain think that information is more important, right? And we also said that everything on screen is information. Well, now what we can do is we can use this guideline, emphasis matches importance, to create things that are presentations that are easier to read. So that's guideline number one. Here's an example right here. I'm playing Yahtzee with the kids. We roll the dice out on a brown dice on a brown table. And I'm like, wait, what? In low light. And I'm like, what did I roll? A better fix to this would be create dice that have high emphasis, such as this, the high contrast on the important information. Contrast and readability. So I've got a question here. This slide asks the question, does this text seem hard to read on top? And on the bottom it asks the question, does this text seem easy to read? And again, if you're like most people, the answer is, yeah, the text on the top, it seems harder to read. And the text on the bottom does seem significantly easier to read. And the question is why? If we extract the saturation, remove the saturation from this presentation, you'll start to see something kind of interesting. The text on top is, well, it's still there, but its perceived brightness is essentially equal to the brightness of the background. The takeaway here is that we're not reading in color. We're reading essentially in black and white on the perceived brightness spectrum. And what that means, the implication of this is, is that text needs to be high contrast in order to be easy to read, sufficient contrast from the background on the black and white spectrum. So we want distinct text from the background in black and white. The next guideline, proximity and layout. Actually, I think I may have a couple of things in here. The first concept is friends, enemies and others. And so I've got a photo album here and I've got some pictures of some cute puppies and I just wanna organize them in my photo album. So I'm gonna put this one up here and then I'm gonna take another look at a next photo and I'm gonna say, okay, where should I put that? And if you're like most people intuitively, we're like, well, let's put it with the other one. So okay, we'll move that over there. Let's look at another photo. Oh, more cute puppies. Okay, we'll put that right here. And then we'll take a look at another one of the photos I've got at all. Does it go over here? Or does it feel better over here? And then if I've got this picture of a house, does it go with the puppies? Does it go with the cat? Or does it maybe go right here? Kind of an interesting example, but it's to illustrate a point that friends' information that is contextually related feels better and is more readily digested and understood when that information is close to other friends. And similarly, it's more easily understood when it's far away from the enemies. So that's what we wanna do. When we're looking at information, we wanna identify friends or closely contextually related pieces of information. And we wanna identify enemies as well. Here's an example in real life. Which button do I press to go to the 30th floor? I'll let you think about that for a little bit. And maybe you're thinking, okay, Mark, that's not fair. You zoomed in really close, right? I wanna see more. I'm like, okay, but if you were blind, you'd just get what your fingers were touching. This would be it, but I'll give you more. Here's more. Which button do I press to get to the 30th floor? And now I think you may be starting to see the problem, right? One of these buttons is a friend of the label that's next to it. And one of these buttons is an enemy to the label that's on its other side, right? In other words, the button to the 30th floor is the enemy of the 29th floor label. And yet they're equidistant apart. It's what I call a proximity violation, right? So we wanna follow that guideline. Here's another example. Which way to Fort Worth, right? And here's an example where the enemies are close to the friends, right? So Fort Worth, the arrow pointing to the left, that's not for Fort Worth, that's for Justin. In fact, how many people do you wanna bet came to the sign and they turned the wrong way? Because that arrow pointing to the left is so close to Fort Worth. Yeah. Kevnick out there in the chat room says, geez, who couldn't figure that out? Couple ways to fix it. One is to follow the proximity guidelines, put the friends close together. So put Fort Worth text next to its arrow. Here's another way to do the same thing. Here's another way we could do it, where we could keep things in the same place but use a background color change to indicate how our friends are contextually grouped together, or we could use a borderline. Out of all of these, the one in the upper left is my favorite because it's scalable for multiple cities and requires really no changes to any of the printing mechanics for creating these signs. So there's the original and there's our fix over on the right. So friends close, enemies apart. These are the proximity guidelines. Borders and spacing. So I had this question a few years ago. The question is, well, I've got my text and I wanna put a border around it, but where do I put it? I couldn't find any guidelines for this out in the real world. And based on my research, I still think there's nothing out there that describes the answer to this question. I'll show you what I came up with. And this is based on a fair amount of research, including research in the way we recognize and understand the letters and actually the parts of the letters. Those come from something called the feature detectors in our brains. So when I say the parts of the letters, I mean the crosses and the curves and the endpoints. And here's what I came up with. Well, actually before I show you that, I'll just clearly show you extremes, right? Sometimes I'll go to extremes when I'm researching a problem. Here's an extreme right here where it just simply, it looks and feels too far away. And here's another extreme where it just looks and feels too close. So we know the answers between these two. Here's what I came up with. I take the distance of the space, the width of the space between two letters and I multiply that by 1.5. And I simply add that to the sides. Excuse me. And I also add that up to the tops and bottoms as well. And that is the answer to the question. It's far enough away that our letter detectors won't ever confuse it for a potentially another letter next to the ending letters of the text or the beginning letters of the text. It's far enough away, so we won't confuse that. Which means our cognitive load is down, which means it's easier to read, okay? But it's not too far away, right? So it's just in there at this nice, nice close distance. Now, there are ways to get it even closer. For example, if I change the contrast of the line, notice I've still got it the same thickness. This line is as thick as the stroke width of the fonts. I can bring it in closer. I can also change the thickness. I can maintain the same contrast and just make it super thin or to both make it both lighter in contrast, lower contrast and make it thinner if I need to really get in tight. So those are two different ways to get to kind of violate that rule. So when I do this presentation in front of a live audience, I'm often, I'll bring this slide up and I'll say, hey, what do you, which do you prefer? The one on the left or the one on the right? And virtually everybody says the one on the right. And I say, okay, what do you prefer here? Just doing our A-B testing. Everybody says the right. And I'm like, which one do you prefer here? And around here about 97% of the folks in the room, 95 to 97% say the one on the right still. And the takeaway here is that the guideline for borders is that they should be thin and low contrast. Call it an example with the border. I've actually seen real examples of borders on real websites and other UI that have a thick high contrast border. That's incorrect. That's the one on the right. Sorry, the one on the right is the way to do it. Fill and corners. So I've got two stars in the middle of the screen. And the question here is which star looks bigger? The one on the left or the one on the right? And if you are, if you're like most people, you're going to say the one on the right looks bigger. In reality, they actually are constrained by the same bounding boxes. But the one on the right has got rounded corners. And as a result has about 34, 35% almost more pixels than the one on the left. The takeaway here is that if you want icons to be easier to see and you're constrained by the size of the icon, like in a particular box, like 16 by 16, use rounded corners for the icons. Salience. So salience is a really kind of interesting topic. And the idea of salience is what does your brain consider important? Why is that an important question to ask when we're talking about good design? Because whatever your brain considers important, that's what you're going to kind of be working on, well, focusing on, right? And so the question is with this particular shape, what do you find most important? Do you find the curve in the back? Maybe these curves in the front or this point right here? And if you're like most people, you identify this section right here as the most important part of this particular shape. The takeaway here, and it's supported by research, is that sharp corners are considered salient. In other words, we naturally infer that they are important when we look at them. And if we do sharp corners and they're not really important, then we're kind of like, well, I'm not sure what's going on and there's a little bit of confusion. Hollow versus filled. So this question comes up, which is better? A hollow button or a filled button? And I start going through all the different ways we can evaluate this. For example, how many pixels are visible excluding the text? And with the hollow button, we've got about 1,000 pixels and with the filled, we've got about 10,000. Okay, how many shapes do we have to process? Well, for the hollow there too, you've got this kind of outer rectangle and an inner rectangle. You could argue that both of those have to be processed. And with the filled, you've only got one, like that. Now you could also argue, well, wait, maybe it's not shapes, maybe it's just corners. How many corners do they have? Well, the hollows got eight because this and this are both corners. And at some level, we're processing this inside of our minds, right? And if we're processing it, then you can argue cognitive load is a little bit higher. Whereas the filled's only got four corners. Peripheral image, and this is actually the most important in my opinion, if not the most important, the second most important criteria, what does this look like when you're not looking at it? And here, the peripheral image kind of looks like this because we don't have acute sharp vision in our peripheral vision. The filled looks like this, so we can still see it and identify it as a button. From my perspective, the one on the right is more desirable, especially for an important button that leads me on the path to something critical that I'm designing user interface for. For example, I might be designing user interface for a website and clicking this button means more sales or more registrations or more signups. The graphical message here is that the border is important, whereas here, the button is important. So from my perspective, filled wins all the way across the board, all the way across these different ways of evaluating, so the question of hollow versus filled, the answer is filled. So my conclusions are based on this research is that when you have a choice between a hollow button or a filled button, the filled is the better choice. If you, the only exception to this, I'm gonna stay on this for a second, the only exception to this is for a path that you maybe don't want the customer to take. For example, a cancel button, right? Or the less likely path. You might do something different or you might make it less without saturation, for example. But in general, I would always go with a filled button and I'd use saturation like we've got over here in this example on the right and maybe no saturation or a lower level of saturation for the less desired path. Corners, again, round corners are better because we, corners are salient. And so we don't wanna call attention to the corners. We don't want a button that says the corners to this button are important. We want a button that says the button is important. And then with the call it example that we saw before, not only do we not, not only do we wanna have a border that's thin and low contrast, but we also wanna have a borders that are rounded except for where we're pointing because where we're pointing is important. That's the salient piece of this whole example. And so the better call out example is on the right. So corner sharpness needs to match the importance. All right, wrapping up. So I grabbed this example, found this out there on the internet and there are a number of issues with this that can be fixed. And we've talked about some of them here in this session. But one of the biggest issues is that of contrast. We have text that is low contrast on, we have essentially white text on a light background and it's hard to read. It's maybe not so obvious when you look at it the first time, but when you go back and you look at the rules and you come back and look at this and or if you look at a side by side of something that's essentially the same interface but redesigned using the guidelines, you can start to see, oh, okay, I'm getting it, right? I'm getting to see that the one on the right is far more easy to consume the data in than the one on the left, right? And so there are, these are some of the guidelines. Like I said, this is a very fast condensed course. There's more out there, which I'll tell you about in a little bit. I wanna summarize everything we've talked about though up to this point. What we've learned, every on-screen element is information but not every element is equally important, right? So understanding and taking a moment to ask the question, what are the most important pixels on screen or dots of ink in the presentation and what are the most important and what are the ones of lower importance? Emphasis should match element importance. For readability, we need sufficient contrast on the perceived brightness spectrum. That means black and white. Physical proximity should match contextual proximity. That means French should be close and enemies of the French should be kept far apart. Borders should be thin and or low contrast and no closer, this is a guideline, then 1.5 times the space width. And you can break that guideline if you go super low contrast on the border or you make it super thin. Get it closer if you need to. Buttons should be filled and unimportant buttons can be filled but with a lower contrast against the background. Corner should be round except for important corners which can be sharp. Where can I learn more? There's a website out there called sgui.com. It stands for Science of Great UI. That's a site I've got out there. It's mine and I've got a free course out there that you can sign up for by email to learn more. Also, if you go to deviq.com you can get the full on Science of Great UI course. And we've got a free offer for .NET conference of viewers courtesy of DevExpress. Everybody who's watching and goes to this URL between now and tomorrow night the 26th of September at midnight GMT can get a free copy of the product I work on, Code Rush. If you're working Visual Studio, this may be of use to you. And with that, I believe I'm done and you can answer questions. Hello and we're back. So this was an awesome talk and the feedback on the stream has been awesome. Like I think not only myself but everyone included was learning lots of things about UI which we get to, we don't get to think about it every day. So really cool. Some people were asking about if you're gonna share your slides, they wanna share with students and things like that. So are you gonna post it somewhere? I am not gonna do that. I have like a, I suggest instead going to the sgui.com you can get material there. And sometimes I'll give away a PDF at conferences. I'm gonna be speaking at Dev Intersection coming up. I've got like a full day workshop, I think there maybe. And I know I've got three courses there as well. And so people can come to those as well if they wanna get those PDFs that I give away. Cool. Well, but people will be able to watch this video on YouTube and channel nine later, so. They can certainly do that. All right, thank you so much for joining us and it was really a great talk. All right, thank you.