[00:00] Quick, what did you eat for lunch yesterday? While you're recalling that, what are your plans for the next week? What month is it? What's the title of this video? Are you sitting down? If you're able to keep up with those questions, then great. But were you also able to pay close attention to how that chair you're sitting in feels against your skin? Or the temperature in the room. Maybe, but maybe not. And while you're thinking about those last two things, were you paying close attention to the exact positioning of every joint in every single one of your fingers this whole time? The human brain can do a lot of things from recalling information, detecting the sensory input, working out complex calculations, and even visualizing things that don't exist yet. However, sometimes there's just too much going on at one time. This concept of in use mental facilities is something called cognitive load. It basically refers to the amount of used working memory. As for what working memory is, you can sort of think of that as short-term memory, or the part of the brain where we store and manage active information.

[01:02] In other words, things that are currently on your mind. If a task is very complex and requires all of a person's focus, it has a high cognitive load. If the task is simple, such as just standing still, it has a low cognitive load, which means your brain is free to do other things while you're standing there. You probably experienced this concept yourself. Try as you may, there's a limit to the number of things you can actively focus on at a single time, whether it's paying close attention to something with your eyes or trying to work out a complex concept in your head. Time spent on one mental task means you're not working on another. So what does all of this have to do with design? Well, if we designed visually complex screens and applications, then we're making it harder for our users to interpret our content. And as we've stated, complex things generally result in higher cognitive load, which means that your audience may miss something important or misunderstand a crucial part of the application. Also, a higher cognitive load in an application just flat out, makes it harder to use, and can impact user enjoyment or even retention. If everything within an interface is crying out for your user's attention at once, nothing will get your user's attention.

[02:08] This means users will miss important alerts, information, and even alarms because they simply blend in with the rest of the noise. When trying to keep cognitive load in check, there are a few concepts to be aware of. The first of which is visual clutter or visual noise. Think of visual clutter as unnecessary visual elements that distract from other more important elements. An interesting thing about visual clutter is that it's highly contextual. The positive or negative impact of a visual element is largely defined by the other elements on the same screen. For example, say you're tasked with redesigning a screen that's showing the running state of a bunch of things. Each box on the screen represents the state of a thing. There's a lot going on here, but let's focus on just the colors to start with. Is red important? Normally, red is associated with errors and problems, and the text on the red boxes makes you think so. But if that's the case, why are the greens so vibrant? Is green important? Is blue important? So many questions.

[03:03] All these strong colors are competing with each other. So we'd say the screen has a fair amount of visual clutter. It's difficult to determine what's important since everything seems important. Really the underlying information in your application is important, it's the reason your users are looking at it in the first place. So we should probably try to tone things down a bit. Let's say we talk to our user and get more details. They tell us that green means everything is working as expected. Blue means a thing has turned off and thus not running, while red is a fault of some sort that requires some user attention. Well, red could probably stay red, that seems important, so it should stand out. Green on the other hand, means things are working as expected. Think of the last time a doctor, utility provider, or mechanic called you unsolicited to say, yep, everything's working just fine. That probably doesn't happen. So why have such a strong color when everything is working as expected? Maybe we switch to white instead, since that's the background color. Then again, it doesn't have to be white. We could pick a light gray or really any color that blends in with the rest of the screen.

[04:06] Sometimes it's nice to have just a hint of color contrast when compared to the background. The off state is interesting. Since we have texts, we could just use the same color as the running state, or maybe just a slightly different gray, just so it stands out from the running state. Now, I already said red is fine, but we could even tone it down a bit if we wanted. Since the other states are using more muted colors, now we really don't need the red to be as vibrant. Then again, there's nothing wrong with keeping the red vibrant, if it's important. So we play with the colors a bit, and things are starting to look nicer. But really more than just color can add visual clutter to a design. It's anything with a strong visual presence. So things like animations, gradients, shadows, even strong borders and lines can have an impact. Now, that's not to say you can't use these things, but just like you saw with the colors, they can have some impact on visual clutter. And the more instances of these elements you have, the worst off you're probably making things. So you need to figure out how the inclusion will impact the rest of the screen.

[05:03] Speaking of borders, our example here is making a fairly heavy use of them. Since we use colors for states that are visually distinct from the background, do we even need the border? Probably not. Already our screen is looking a bit more under control as we don't have a bunch of strong visual elements demanding our attention. But we do have some other issues which lead us to our next topic. But before we do, let's recap. Key points for a visual clutter are noise, strong colors are distracting, so only use them when necessary. Try not to overuse lines or borders as those can also be distracting. Again, use them when they're important. That also goes for shadows, gradients, and animations. Those are rarely a good idea, so be sure to use them sparingly. Where visual clutter focuses on the presentation of content, organization is all about how content is laid out. As a little tip, grids are very intuitive. Most folks can look at content organized into a grid and inherently understand lot about the relationship of the content based on where it is in the grid. This is great because you'll be able to use the white space to help distinguish things that should be grouped together from things that shouldn't.

[06:07] If you're unfamiliar with the term, when we say white space, we don't literally mean change the color to white. Rather, white space represents the empty space on the screen. When you're trying to position things on the screen, if you leave a large gap between the content, that white space can be used to signify that those things across the gap are not strongly related to each other. That also means you can try to group things up when they are related. So how does this apply to our in progress screen? Well, easy. We almost have a grid here, we just need to reorganize it. The labels on the right can simply be positioned as if they're in a column. Right now there's an odd gap between the top and bottom half of those right hand labels. If that's to signify a separation, then we can keep it. If not, then maybe we bring the two groups closer together. The labels on the left are trickier. A, B and C are smaller and positioned almost in a column. It seems to imply that those are related, which makes me think that D isn't directly related, since it wasn't given the same treatment.

[07:04] So maybe we add a gap there. Debatably, we could probably stack A, B and C into a column. Again, it depends on context, so we'd have to talk to our users to better understand. Since this is just an example, we made our point about organization already, let's wrap this up by reviewing our key points. Grid layouts are very easy to understand. Where your content is positioned is incredibly important, as placing content together or grouping signifies a relationship while adding white space between content signifies that there isn't a strong relationship. Another thing to keep in mind is consistency. Consistency is largely about maintaining expectations. Departing from those expectations stands out and demands attention from the user, which might be unwarranted or unnecessary. <v Narrator>People notice when something</v> doesn't quite match an earlier pattern. <v Narrator>Inconsistency stand out</v> and can be distracting. <v Narrator>Ultimately, that distraction</v> can have a negative impact on cognitive load as the user approaches the unfamiliar pattern. <v Narrator>See what I did there?</v> Pretty distracting, right? On the visual side of things, if a user learned a concept already through one interface, then applying the same concept on a very different looking piece of interface later can be confusing.

[08:11] Consistency also has some further benefits, being consistent can save you design and build time if you're using similar approaches and looks. Furthermore, a consistent user interface is generally more professional looking than messy inconsistent designs. This is the reason why webpages always use consistent means of navigation. If a website has a North dock banner with links, clicking one of those links won't relocate the banner to the bottom of the browser. We already talked about organizing elements in a grid. That grid approach also helps build consistency. Users can figure out what a normal layout in your application looks like if common interfaces are always laid out and presented in a familiar way. Even text is right for inconsistencies, different fonts, inconsistent sizes, and even conflicting terminology can be distracting. So how does our project line up with consistency? Well, we're very inconsistent with our font usage. We appear to be using a mix of size and weight. Also, some labels are larger than others.

[09:04] This is creating a really busy screen. So, let's make some changes. Also, since we were just talking about organization, there's some ambiguity with the, A, B, and C labels. If that's to imply that the three are related, then maybe we should just move them to a stack since that's more consistent with what the other labels are doing. We don't have any notes from our users suggesting that labels with different width or height hold any significance, so maybe all the labels should use the same dimensions. We'll move D over to keep it separate from the labels on the left. Again, there appears to be a reason to split them up, so we can try moving D to a separate column to maintain that separation. All right, wrapping up here. So inconsistencies are distracting. Consistent design patterns can save time because, well, you already figured out how you wanted to do it before, you may as well, try to take a similar approach. And consistent designs are generally seen as better organized. Next we'll talk about copywriting or how we use text. Any texts that's visible in your application, it needs to be useful. There are probably some key pieces of information you're trying to deliver to the user.

[10:05] So any text that doesn't directly serve the delivery of that information risks as coming off as competing visual noise. There's an old saying about less is more, implying that the scarcity of something can be valuable. So don't be shy about questioning if a piece of text is worth keeping. Thus brevity is important. If you do need some text, make sure it's concise and gets to the point. So how does this apply to our screen? Well, it doesn't really because there isn't a whole lot of text in the first place. To make our next points, let's look at a different example. Imagine we have a pop-up that allows us to turn something off, and it looks a little like this. The popup has a lot going on for what it's trying to accomplish. First it's repeating information. In multiple places, it's stating the same thing about turning a machine off. Additionally, the buttons at the bottom are using more text than they really need to. And as a result are fairly complex, even though there's only three words there. The pop-up is asking a user to confirm. So a simple, no and yes for our two buttons will suffice.

[11:05] Also the yes button is red, which stands out. This is unrelated to copywriting, but the standout color makes the buttons seem like that's the preferred option, but is that really the case? Hard to say without talking to our users, so maybe it's best to just use the same color for both buttons right now. Next, what's with the capital letters? Is there a reason to use all capital letters? Not really, if anything, I'd say it makes some areas harder to read such as the description in the center. But to be honest, the description seems unhelpful anyways. The title on the pop-up is posing a fairly simple question that doesn't really seem to need any further explanation. If we needed to add a warning or additional pieces of information, then sure, a description would help. But in this case, it really isn't adding a whole lot of value. Since this is our first time seeing the pop-up, let's compare the before and after. Here, you can see the difference between the two and how they are both saying the same thing, yet one is far simpler and would take less time to read. Let's wrap things up with our key points.

[12:05] Try to only use text when necessary, and brevity is important. So remember the saying less is more, and copy should be easy to understand. You want to avoid jargon or overly complex wording. And that about wraps up our talk on cognitive load. In this lesson, we talked about some visual concepts that can have a strong influence on cognitive load. Hopefully now you're aware of these concepts, and can better account for them in your next project.