(7) Visual Design for UX Designers

1. Introduction & overview: I think cause seven, we're going to talk about visual and information design. This course can be taken as a standalone course, and especially might be useful for people who are doing UX design or research and want to learn a little bit more about visual design. It can be taken as a standalone, as I mentioned, as part of a ten part series. Second, planning the ten courses in this series means you can choose to sit the exam for the British Computer Society Foundation Certificate in user experience and become an accredited UX practitioner. Hi, I'm tenure length from peak XD. So a little bit about me. So as you can see, I've got a bunch of qualifications. But to be honest, most of what I've learned, working in the field for over 20 years as a UX designer. So hopefully throughout this course, I can impart some of that knowledge with my colleagues, Sophie, who's gonna go through some of the design principles with you. So our mission at peak XD is to empower others to improve the world through human-centered design. This is a little bit about what we do. We do research, journey mapping, service design, where you do UX design, wireframes, information architecture testing, and of course we do UX training. So what does my team know about UX between us with completed either 500 UX projects since 2003. So you're going to hear from myself and my team today about visual design and hopefully we can impart some of that knowledge to you based on our industry and consulting experience. This course builds on what we've covered in our first three courses about understanding your users or understanding the problem space before we get into the solution space. In course one, we also covered all the different components and things you need to know about your users. In courses 2.3, we covered user research methods and then how to document your user research findings to build empathy with your stakeholders. Then in Course four, we talked about how to involve users and stakeholders in the design process and also the ideation phase and the importance of prototyping that equals five. We talked about how to design your information architecture and navigation, but understanding your user's mental model. Then in our last course six, we talked about interaction and foams design. If you don't have a good knowledge of how to understand your users, I encourage you to complete these courses first as applying every design method and principal will only go halfway to create a good online experience. The other half is understanding your users and then mental models. So what are we going to cover in this course? So first of all, we're going to talk about Gestalt theory. You're going to hear from Sophie, she's going to cover some of the principles of human perception. She's also going to talk about design principles. Part one, we're going to focus on hierarchy and alignment. And then in part two, we're going to talk about repetition, balance, and contrast. So we'll also talk about some of the visual elements, things like color, typography and iconography. And then I'll talk about human cognition and UI design. We'll also cover things like information design and how you design the words on a page. And also cover the visual design process from wireframe right through to the visual design. Now have a look at these sides. I want you to write the following sites and give each of these are writing 1-10 based on how credible they look to you. To have a look at this one, give it a rating 1-10 chest, your first gut reaction might be a note of it on a post-it note or something. What about this one? This is one of my favorite websites, links, cars. How would you write this out of ten chez is trustworthiness and credibility. What about this one? How would you write this one? So I can probably guess what your answers would pay. But what do you think you're basing your assessment of trust and credibility on how you, based on the knowledge of the organization. Most people make judgments about the credibility of a website based largely on the visual design. So it's really important to have a credible looking website. It helps build that trust and credibility. So your x is not just about usability, it's not just about that ease of use. Uses often make predictable or irrational decisions and choices. So visual designs and aesthetics are crucial for making that emotional connection with your users and really building that trust and credibility. So what is visual design? Visual design is effectively the practice of devising grids, laying out pages, choosing color palettes, and developing icons. You might get asked for this definition if you're sitting the assessment for the BCS exam. So this is the definition according to the BCS. So some of the fundamental principles of visual design that you really need to be aware of. Pay for proximity, alignment, repetition and safe a contrast to try and remember this acronym park with a C PARCC to help you remember these things. Next, Sophie's going to talk to you about Gestalt theory. 2. Gestalt Theory: Hi, my name is selfie Smith and I'm going to take you through a gestalt theory in this lesson, which, which are some principles of human perception. Gestalt principles are principles or laws of human perceptions. They form the basis of many of the design rules that we know and use today. They describe how we as humans tend to group similar elements, recognize patterns, and simplify complex images. When we look at objects or websites or interfaces of any kind. In the twenties, it was a group of psychologists from Germany who developed a series of theories about visual perception known as these Gestalt principles or the Gestalt theory. They were looking at the way people create meaning of all the inputs they get from what they read, look, scan, and upset. And they found that there are certain ways that our brains tend to organize all this input to create meaning. These principles, they help us understand how humans typically game meaningful understandings from what we see, which will help us as UX designers. Because what we want to create is meaningful interfaces and interaction points. The key premise in Gestalt theory is that as humans we have limited capacity to process input and will always search for the most simple, relevant way to interpret what we see. Gestalt theory states that humans are looking for patterns, structure, logic, and form when we look at something. And we also tend to organize the inputs into groups. Construct meaning of the whole by looking at the individual parts. But at the same time, we tend to perceive the whole as more than just the sum of the parts. So when we look at websites or any interfaces, we just look at it at one. We don't see all the small elements at first. These principles are pretty important for us as UX designers. We can use them when we design interfaces because we want people to be able to easily understand what they see and get them to get a sense of what they can do on this side. And we can design more effective experiences when we understand how people actually group content they see. We can use this knowledge to organize content or on websites and other interfaces. So it's easy for users to understand it. Let's have a look at the six principles. They are proximity, similarity, figure-ground, closure, continuation, and enclosure. Let's have a look at proximity. First of all, the proximity principle states that optics are perceived as related and part of the same group if they are close together. So this is all about closeness. We can take advantage of this principle by grouping similar information such as similar sections within the same page or web applications, buttons related to input fields and so forth. When we do usability testing, this is actually one of the most broken principles that we see. First of all, things that are close on a website I actually unrelated or the other way around. Things that should be related and moved too far away on a webpage. Webpage. Let's have a look at some bad examples. First of all, in this example, we've got an example of a phone where the instructions are too far away from the fields where they actually relate to. So if users are looking for help or can't have a, have a problem of some kind. They have to then go up. They can't just see it straight away or nearby. This is a bit the same. We've got a form where all the instructions, there's like five instructions up the top and then lots of input fields. And again, because they're not move close together, the use of won't perceive them as being part of this same form. Here we've got the other side of the coin. This is an example where things that are close actually unrelated. So because the green button here is close to the search bar, we assume that they are related, that we can press the green button and then we can do a search. In fact, they're not related at all in this case. And when users search for a supplier, they enter in the texts in the search box and then they just click the green button because it's a common convention that you've got the search bar and the action button there. So the green button, in a better design, the green button should have been moved away or it should have been the actual search buttons. Have a think about here how much the post your life lumbar support is. So that's the Ottoman, the middle to the left. What's the price of it? Is it the 3099 to five or is it the 44, 95? Most users will actually assume that it's the 39, 95. And part of the problem here is that the price is in close proximity to the item. And as we know from the proximity principle in Gestalt theory, atoms that are close related or close in proximity of each other is perceived as being related. There are other problems with this as well. We've got the same background color of the price and the item that creates that connection again and the enclosure. So we've got almost like a border around the price and the item. Have a look at the red dresses on this side and try to have a think about what description relates to the image. Is it the one up here, the monochrome, or is it down here? This text? So most users actually assume that it's this text up here, as you see in this example. So this is how our brain would group it because it's close to the red dresses. It kind of creates that grouping of content there. As a matter of fact, on the website content-wise, this is how it's meant to be grouped. So you see that on the right side. So what could have been done here? You could have added a bit more whitespace and not put in a header here between the images and the text, but put the header up here, the images, the prices, and then a bit of descriptions. Proximity is what helps users understand content. And here we've got a brilliant example from Airbnb where they've grouped the content and instantly we get an understanding of how elements fit together. On this page, there are clear sections where content is placed in proximity of each other and then creating this relationship between the content. Here, again, we've got an example from a new side where they've used clear sections for the different types of content without reading anything, just skimming it, we get this sense of the different types of content. The next Gestalt principle is similarity. And how does this apply to UI design? Well, the similarity principle states that optics are perceived as being related and as part of the same group if they share the same characteristics. So when we design interfaces and we want to convey a relationship between elements, we could try and give them similar characteristics. So, for instance, by using colors, shapes, layouts, then many people would perceive them as part of the same group, even though they might not be in proximity of each other. So let's have a look at some examples. What's wrong here? Well, there are two call to actions on its side that does the exact same thing. Yeah, they are a bit hard to find. So the orange Apply Now button doesn't look like a button in any way. It, first of all, it breaks the conventions for how a button should look like. And then we've got the green register, your interests button. And because they don't look similar, users won't mentally create that connection between the two, causing the site to seem more cluttered than necessary. This is another example. So this is from a ticket sale page that was redesigned. So this is before the redesign happened. Here. To understand the ticket prices and the selection options, users have to look at every single section to kinda understand what's going on. We've got different colors, we've got different numbers in the input fields, and we've got different prizes. So it creates that very confusing look. So let's have a look at how this was redesigned. This was a new redesigned ticket purchasing flow. And we've got, we've used the principle of proximity. So the price options are close to each other. And then again, similarity. They look like three predefined ticket prices. As users will easily understand that these three options are related. And then underneath we've got the option to input your own amount that is visually different from the predefined prices, but it's still grouped in the same screen fitting topic of choosing an amount. Here we've got the similarity principle in use. This is a price section where all the different price options are lined up in a similar way where you can easily compare. The third principle we're going to look at is figure-ground. The figure-ground principle states that humans tend to separate the figure from the ground. So the main figure is what we focus on. The rest is perceived as background. In UI design, we can help users create that focus by highlighting something and almost treating the rest as a background, we need to create that focal point. In this example, we've got a broken principle, broken figure-ground principle. There are no elements on the page that really stands out. There's lots of colors, boxes, there's not a lot of whitespace. So the users don't really have any guidance as to what they need to be focusing on. This might cause some cognitive overload. In this example, the design guides the user using the figure-ground principle and emphasizing it. So when we know that people perceive elements and as either the object of focus or the background, we can use that to draw attention to an element. Here uses will focus on the professional plan as the foreground and see the rest as a background. And the designers here have really emphasized that figure-ground is stable when objects are distinguishable from the background and the background has this interests. The next Gestalt principle is closure. The closure principle states that the brain fills the missing parts to get a complete figure, a complete picture. There needs to be enough inflammation for people to fill in the missing part. Because we built on our prior knowledge and experience to establish that sense of meaning. So there needs to be something for people to recognize in order for them to create that understanding of the whole. Here we've got a good example from Netflix. And even though we see only the first few movies, we understand that there are more options to the right. So closure is at play here because our minds fill in the blanks of what to expect beyond the first few movies, we've got experience with it, we've seen it before, it follows a convention as well. In addition to closure, proximity and continuation is at play as well. Closure can be used when we need to convey a message or reinforce a concept within a small space, we give users limited information and then we sort of expect them to understand and find meaning in it. Examples of this are icons, are notifications. There needs to be simple and stripped down to that basic elements to help people quickly understand their meaning. But at the same time, we can't strip away too much information because then there wouldn't be enough for users to create that hole, that closure themselves. The next principle we're going to talk about is continuation. The continuation principle states that objects placed on a line or curve are perceived as more related than the ones that are not aligned. In UI, continuity is used when certain elements suggests that we should direct our attention to a specific place or direction. Examples of this can be thumbnails in a gallery, a slide of images or drop-down menu. So when you see a group of elements like photo gallery, sliders, tabs, or even simple lists. You may now notice that they are using continuation, this principle of continuation. Objects. We can use it in UI when we place objects nearby and then thereby we got the user's eyes to jump from one to the other, one to the next. Example of this is Uber Eats, where we've got continuation that play into places. We've got the menu up the top, whether it's has sort of continue out of the screen. And then again, the latest Steal the restaurant and rewards and so forth. Continuation works not only for horizontal movement, though, it can also lead the eye vertically through a composition, compelling us to scroll through and view items. So, you know it from Instagram and Facebook and lot of social media use this principle of continuation to kind of get us hooked. In this example from Airbnb, we've got consistent elements that are neatly align and grouped into cards, which then guide the eye down through the listings. The last gestalt principle is enclosure. The enclosure principle states that objects that have a border around them are perceived as more related. Here we got an example where the products are grouped by audience. We've got the personal and the business audience. And color is used to enclose the content for each of these target groups. Because the principle of enclosure is used, the content within the frame can have different visual expressions, but still be understood as related because of that overall enclosure of the, that the content for that particular audience. On mobile, we often see the principle of enclosure being used. Because here, content is often presented in cards, could be here as notifications or it could be news articles, or on social media. We see it as well. On this sports news side, enclosures used in two different ways. We see in the articles, the articles themselves have a border around them, thereby indicating that the image and the article belongs together. And further, the content in the bottom is enclosed by use of color. You get the sense that all the content in the black area is related. You don't need to read the header to understand that. We can use the Gestalt principles and this knowledge about how we as humans perceive objects and elements on a website to organize content and thereby guiding the uses to what we want them to see. We can help them achieve their goals by providing this sign that reduces the cognitive load and thereby enhances the meaning of the overall interface. So in the next lesson, we're going to talk about the first two design principles which are hierarchy in alignment. 3. Design principles - Hierarchy & alignment: In some are we gonna go through five design principles and they are hurricane, alignment, repetition, balance, and contrast. In this lesson, we're going to talk about hierarchy and alignment, two important design principles. We're going to start with hierarchy. Hierarchy is what creates organization and why is it important? Yes, people actually need help. Focus to know where to look first, helped to figure out what is important on his side. The way users comprehend or read content is often scanning. So we can enhance the scanning behavior by providing a clear hierarchy to help users focus on the main tasks. On the side, brain lies. A lack of visual hierarchy prevents the brain from scanning and zoning in on areas of interests. If we can quickly understand what we see, we become frustrated and will likely to leave the side again. Well, this is a bit of an exaggerated example. This totally lacks any visual hierarchy. The elements on this page, it's sort of competing for the user's attention. And we have no clue where to look. What do we need to focus our attention on? What is important? We have no clue. And we have to remember that people don't read. They scan and they tried to find what vaguely resembles what they're looking for. So how do we design for hierarchy? First of all, it's about arranging elements according to importance. It's the way we emphasize and elements in order to influence the user to look and interact with a certain item. First, another second, and yet another third and so on. We can direct viewers attention by using size, visual weight, color, and position can also create hierarchy by grouping similar elements in proximity of each other to suggest this relationship between information or functionality. This is based on the Gestalt principle of proximity. We know the brain perceives content in proximity of each other to be related. Okay, what's the key information on this side? Imagine you've done a search for government tenders as you do. What do you think you'd do? Most users actually told us they would just download results. Maybe they would go down in the bottom and have a look there. But again, they wouldn't really have a clear place to go. Again, we remember the hierarchy is what helps users find the key information in the right order. So what's the key information on this page? It's actually, there are no results that match your selection. The design of this side doesn't guide the user to the key information. The use case here is that users want to purchase a ticket to a performance. When we tested this side, uses all select the date and then time, and then they went directly to the Continue button. Nearly all uses miss there. How would you like to select your seats? As it wasn't expected and in the line of sight as they moved from time to the button. Here's an example of great hierarchy. This website is text-only, but with a different font sizes, the lines to separate content, the grouping of similar content, and finally, color. There is a clear hierarchy. On this website related content is grouped into different sections in this selection where they select their calendar categories. And all the categories has clear headings and this creates this visual hierarchy. In this AirBnB example, related content has been grouped. Each tile with a home has its own grouping of elements as well its own hierarchy. The image is what draws us in. Then we've got the headline hardest studio apartment is. So they've used size to draw us in. The prize is underlined and bold. Ratings are enhanced with color. Key information like number of guests, type of home is grayed out with less visibility. So the visual elements, they've really worked with, the different visual elements, the topography, the size, the colors, and the underlining to create a clear hierarchy, let's talk about alignment next. Alignment is what creates a sharp, unified design. Proper alignment is one of the best ways to make your designs look professional and make it feel like the user interface is deliberately designed. Obviously, at the left we have pretty poor alignment. And the example to the right we have a nicely aligned website example. Our brains, love patterns. So aligning elements on your side really allows the user to easily see that order and structure. This is important when doing wireframes or the final visual designs. There are different types of alignment. You can align left. Sensor or ride, or bottom or top, Alonzo, your content. On a website, we like to align elements with one another so that every element, whether that's texts, images, buttons, and so on, has a visual connection to something else on the page. Horizontally or vertically. It tightens the design and makes it less messy. It can also be used to create a sense of connection between elements that might not be close together. You might not have thought about it. But underlying, every website is an invisible read, or at least they should be. And this helps create that alignment on the website. The grid is always the same throughout the website, but it can be used in different ways. You can place elements in different ways on that same grid to get the desired expression. No matter if you're doing a sketch or a wireframe or more polished design, establishing that layout is key. So you want to have a think about what the margins should be. What are the number of columns? What should the gutter width? B. So that's this spacing in-between the content and the column width as well. In any design program like Adobe or Sketch or Figma, you can set up your own grid structure. You can try different setups. Normally. For a desktop HD, typically you'd have 12, 12 column grid. So that's sort of the standard, but you can always move away from that to do something different or to create another expression. Sometimes you would work on a website that already has an established squid structure. So of course you're just going to use that one. Once you've established your structure, you can then start adding elements to that structure, ensuring that the elements are aligned to other elements on that page. So play around with placing the elements to create that interesting effective layer with a clear hierarchy. Distribution of elements is another aspect of alignment. So here we've got some elements. It looks like they've just been thrown in. Could be images, it could be text, it could be buttons. So a way to tighten that off is to work with this function in the design program that you're using. So that distribution vertically and horizontally to create that order and sense of organization. On the side, here, we've got a much clearer, cleaner look and it looks more professional. On this side, we've got a bit of a complex expression. There are not many of the content elements or section that aligns with anything else on this side. So you can see that the horizontal alignment up here is quite good. And then we move to the next section. Is that aligned? So we've got the two articles, but then these three pathways doesn't really align with the rest of the content. If we look at the vertical alignment, we've got these sections here, the health and well-being. See if that aligns with anything down the page here doesn't really align. So a way to tighten up this design is to make sure that some of these elements up here is actually aligned with the, some of the articles down there that would create a much calmer and more ordered look. In this example, they've actually tried to break the grid. So there is an underlying grid structure on this website as well. But to create that connection between this section up here and the other types of content down here. They've overlapped the different sections to create that flow and dynamic on this side. So scroll and not to scroll here. That's the question. Would use the scroll here, would you scroll? We get this sense from this horizontal whitespace that the page is probably ending right there, we get that sense of completion. There is more content on this side. So this example just show that, shows that we want to avoid this horizontal whitespace because it creates that sense of completion for the user. Uh, 2018 studies showed that users spend about 57% of their page viewing time above the fold. 74% of the viewing time was spent in the first two screen fulls. So the users were actually stopping at the first two sections. But to avoid this, we could, as we saw in the other example, try to have overlapping elements across the site to create that flow down the side and not create that sense of completion. Next up, we've got the rest of the design principles. And they are repetition, balance, and contrast. 4. Design principles - Repetition, balance & contrast: In this section we're going to cover the design principles that are repetition, balance, and contrast. Let's start with repetition. Repetition is what unifies a design that has lots of different elements. So the principles of repetitions or patterns simply means that we reuse the same elements, are similar elements throughout the design. Repetition of certain design elements in a design, we'll bring that clear sense of unity, consistency, and cohesiveness. By repeating elements of a design, you immediately, immediately create that sense of familiarity or identity and give users a sense of consistency and cohesiveness. Repetition can be done in a number of ways. You can repeat the same colors, buttons, styles, interaction patterns, typeface's shapes for the graphic styling or other elements of a design. Often companies, is that there's a design system defining the button styles, the interaction patterns, the icons, the typography, etc. So these elements can be repeated throughout their products exactly to create this sense of cohesiveness and identity in their products. Consistency is the result. So when you repeat the styles, so you've got only round buttons and not square buttons. You've got the same college Throughout the same topography and so forth. You avoid that messy user interface. Let's start with some bad examples. Gosh, this is one of those examples of websites that are so bad, you almost think they don't exist. I've included it just for the fun of it. To make a point. The lack of any repetition and coherency here is just outrageous. It's so inconsistent. It got lots of colors, lots of fun. It's got capital letters, lowercase. It's got buttons and call to actions all over the place. It's all just looks like it's been thrown in. It's wrong on so many levels. How is the button consistency here? Have a look. So we've got three different blue buttons and they've all, first of all, they're not aligned to the input fields that are related to. But they've got different visual styles, some R-square, some more rectangular. They've got different topography inside it. And again, different visual styles of the buttons. We've seen this example before. There's actually two buttons on this side. So the orange button style looks like actually the visual element used on the bottom here. Let's explore. The green button. Looks like an actual interactive element. Consistency in the styling here would be helpful for the user. Here's another example of just an inconsistent website where the headers are different, their upper and lowercase. We've got underlining on text that's not links. So that's the convention that underline text is the link that's not been used. And basically, it just creates that very cluttered impression of this side. Here we've got a simple but good example of repetition. There's consistency in the color scheme. The button styles are all similar. So we've got, it's got this gradient color, rounded buttons. The card designs also has rounded corners and got consistency in terms of the headers and the body text throughout the design. In this example, we've also got good example of repetition. We've got the visual elements, the three stripes that are repeated throughout the site. We've got consistent color scheme, same fonts used, and then we've got the purple donate buttons for donation. And then the other action buttons are yellow. So in this case, they use the purple color button to make it really stand out. They've actually broken that repetition of buttons styles here. Let's have a look at the principle of balance. Balance provide stability to a design and impacts appeal. Balanced plays an important role in exactly the appeal of a website. Balance has to do with the visual weights of the elements that you place on a side. The way we lay out elements on a page to create that feeling of balance, of calm. We don't want the design to feel it sort of tipping over r, because when websites are balanced. Users get this sense of stability and just calm. There are two main types of balance. We've got symmetrical balance and asymmetrical balance. Symmetrical design, layout elements on an equal weight on either side of an imaginary center line. This form of balance often brings a harmonious feel too aside. And this is the most common type of balance when it comes to websites. Balance through asymmetry is when we create balanced by using tension. So we deliberately plays the elements not on an equal weight of one side of the center, but we place it in an interesting way on the website, creating that tension, but still a sense of balance. Here we've got a site that's not so well balanced, so there's huge chunks of whitespace. The one image that's been put on there, the one item just kinda tips the design over. It feels like it just doesn't feel very harmonious. This is an example of a symmetrically balanced website. Everything on this side is a line around the center axis. Even the texts is center aligned throughout. Another example of balanced through symmetry, while we've got all the elements center aligned, it doesn't have to. The headers and the hero images doesn't need to be all center aligned for it to be sort of a balanced website. You can still just have an overarching balanced through either symmetry or asymmetry. This is an example of balanced through asymmetry, it can be used to create a more dynamic expression. Here, balance is achieved by using elements of different sizes and weights in combination with whitespace to create a design that's more dynamic, but still got that sense of balance. Here the balance is achieved through pushing the grid structure. We actually have a pretty straightforward left aligned sort of main section. And then there's some play with the fonts to create a more impactful design. So this is a website from innovative industries. So this sense of dynamic and asymmetry ties in well with the whole brand experience. Next design principle we're going to go through is contrast. Contrast is the most effective way to create, emphasize an impact with your design. When a design really stands out, or God forbid, pops, as some would say, there's most likely some contrasts involved. Contrast plays an important role when it comes to organizing information on a page. It helps the user to the important content and tasks. Contrast is also very important when it comes to accessible design. Creating accessible designs, contrast can make it difficult to read content, especially for people with visual impairments. You can create contrast when using two elements that are total opposite. This could be big or small font sizes or bigger small elements. Here we've got an example where the header is huge compared to the three sort of call to actions. So that's just a subtle way of using that contrast to create that first impactful impression. Again, here we've got contrast in size. They've been playing with different size texts, images to create contrast. Contrast is also used when we mix classic and contemporary funds. So here when we've mixed Serif font, so that's the curly sort of two fonts with a san serif fonts, this strain type of font. So that's a contrast that creates some dynamic as well. Mailchimp is using that makes a type phases in their designs. So they got their headers as Cera fonts, and then they've got the body texts as a mosque where sans serif font color is also an effective way to create contrast. E.g. a. Call to action buttons that stands out or color to draw attention to something on the page. These sites have both used bold colors to create some impact example of good contrast to mainly contrast through the use of color. In the example of Spotify, we've just got the contrast through the use of color. So we've got that green contrast color standing out from the rest of the background. We can also create contrast through the use of whitespace. Basically the negative space or the whitespace, as it's often called, is the area of the layout that is left empty. It can be around the objects as here on the right, for instance, around buttons or text in general. But it could also be the place within the button as the example on the left, whitespace is kind of a breathing room for all the objects you lay out on your page on your screen. As with other user interface elements, you as a designer need to understand the role whitespace plays. And then you can experiment to find the right balance of it to fit with the rest of the elements. Mass to go from Interaction Design Foundation stated that whitespace is like a canvas. It's the background that holds the elements together in a design, enabling them to stand out. The initial shock is almost too much for many. On this side. It's kind of a fun example, so I included it. Anyway. The content and layout is so overwhelming on this side. And when you break it down, it's all due to the lack of whitespace. So there's no where to focus and rest your eyes. The users are just all over the place and the elements on the canvas is just overwhelming. It's thrown in. Here, we've got poor use of whitespace. It's almost like this accidentally been created some whitespace because the lack of items in store. But nonetheless, this creates an imbalance in the design. Here we've got some good examples of how whitespace really allows the content to breathe. You're not overwhelmed. You can kind of go commonly from one section to the other. And another point to make is that white space doesn't have to be wide. It can be a colorful canvas. Next up, we've got a section on visual elements. We're gonna go through color typography and iconography. 5. Visual elements – Colour, typography & iconography: In this part of the course, we're gonna go through some of the visual elements that we can use in the visual part of the design process. So that's color, typography and iconography. And we're going to start off with color. Color is quite a powerful psychological tool to engage users in a product design. Color indicates which elements are interactive, how they relate to other elements, and also their level of prominence. Important elements should stand out the most as here, where it's clear that there's a clear call to action. A yellow button that pops up. Texts and important elements like icons should also meet eligibility standards when appearing on colored backgrounds. So they should still be legible and clear. The buttons, the icons, and all the elements really that you put on that canvas. Color also sets the mood of a design. So for instance, here we've got three different websites, and it's clear that they all branded quite differently with the use of color. The first one, which is quite vibrant and very energetic. And then we've got the one in the middle which has a more organic vibe to it. It's kind of tone down earthy colors. And then we've got Lorna Jane, one of her ranges. That's more sort of a soft, feminine tone to it. So you can create an atmosphere of elegance, of warmth or tranquility by using the right color scheme. Or you can convey that image of more playfulness and youthfulness. There are many considerations when choosing colors for design. The success of the color choices depends on the viewers comprehension and appreciation of color, depending on their background, their past experiences. Also they taste. When we start using color in our designs, we have to be aware of cultural differences. Just an experiment here. What color would you associate with death? Interestingly enough, that's quite different from one culture to another. So in Western and Japanese culture, that color is black, whereas in Chinese and Hindu cultures, it's why in South American cultures, it's green. So that's just an interesting way of looking at color. What does red mean to you? Again? In Western cultures, it means danger. It means cheap and a bargain. Whereas in Chinese culture, it means success and wealth. In Western culture, a share market at might have stocks that go up are shown as green, which is good, and ones that are going down as red. Whereas in China, the stocks that increased in values might be shown as red as that's a sign of success. And well, it's quite interesting here you can go into this website and then you can see this overview of the different cultural meanings of the different colors. It's always good to check back when you're using colors. When we design with color, it's good to know that there's actually a science to the way that color works. You've probably all seen this before 100 times, 1,000 times in primary schools and right up to now. But we're just going to go through the basics again. We've got the color wheel, which shows the primary colors, yellow, blue, and red. And then we've got the secondary colors, which are equally mixed between the primary colors. Then we've got the tertiary colors, which is how secondary half primary colors. Then again, we've got the different ranges of the warmer, the hotter, the cooler and the cold colors combine colors from the color wheel in different ways. So one of them is to have a monochromatic color scheme. That's why you choose one color and then different variations of that color. You can also have a sympathetic color palette. That's when you use color close to each other on the color wheel as this instance here where we've got earthy colors in both cases. If you want to create a more dynamic expression, you can use complimentary colors. That's when you use direct opposite colors from the color wheel. And the colors will then sort of intensify each other. We've got two examples here. You've got the vibrancy on the left, and then you've got the more toned-down version, the ride. So the complimentary color can be both used in a more vibrant and bright fashion, but also if you work with it with a more toned down color palette. There's a few different tools out there that you can use to have a goal and have a play around with the different color palettes. Canva has cool one on their site where you pick a, pick a color and then choose whether you want it to be monochromatic, complimentary or whatever you want. And then it gives you some examples of color combinations based on that. So you can go in there and have a look at that. Adobe has another Hello, pick up a color tool where you can experiment with the different combinations of color you can choose if you want it. Analog monochromatic triad complimentary. As you've seen, there are way more combinations that I've gone through here today. So if you want to kind of dig into it, you can, you can go to Adobe site and have a play with it and see what kind of pellets comes out of it. So color is also important for accessibility in our designs, we want to ensure good contrast. This is especially important for any device that will be used outside. For a mobile app, a ticket machine, and so forth. Not only for visual impaired or people with other impairments. We always want to put dark foregrounds against light background or the other way around. Actually a good contrast is often created by pairing complimentary colors. But the trick is, or the tricky part is that if the saturation is too high, it can create this visual vibration, as you often know from having red and green. So we want to avoid the red and green together or a bright blue on a bright red background. We never want to use color alone to differentiate between items. We know that ten per cent of males are colorblind and it's about 1% of females that are colorblind. So here to the left, we have an image of these hats. And that's how it looks like for most people. But the images to the right is what it looks like for people with different forms of colorblindness. They can basically not differentiate the items from each other. Have a look at this design and then have a think about how you could improve this design based on the knowledge you've had so far of color. In this example, red and green are the only way to indicate whether the iPhones are available at your local store or not. So if you would call a blind, what would this look like? It would probably look like and you wouldn't be able to differentiate it. So what we could do to make this design more accessible, we could not only show it as red, but we could show it maybe as a Red Cross and then a green tick. So at least then you'll have two different variations, two different ways of showing the availability on that side. As UX or UI designers, it's handy to know that there are different color systems, although you're probably not going to use both of them, are you going to mostly be using RGB? So as a general rule of thumb, the RGB color system is used only in digital designs and when we're designing for the web. So this is a color system that programs like Figma Sketch, Adobe are using. This includes designing websites and imagery and graphics for websites and social media. So everything digital. Think RGB. So that's in the settings. If you want to use those design in print, you'll have to then convert them to CMYK color. And if you want to go more into that, and now you know it exists, so you can dig more into that if you want to know more about it. Great, Let's move on to typography. Typography is the art of arranging letters and texts in a way that makes the copy legible and clear and visually appealing to the radar. Topography plays an important role in user interface design. When you're designing a product, it's crucial to be able to clearly communicate its intent and purpose to the USA. And this is commonly done by using text. Good typography will establish a strong hierarchy. It will provide graphic balance to the website and also set the products overall tone just as colored us. Typography should be guiding and informing your users, optimizing readability and accessibility, and ensure that excellent user experience. So there are different kinds of typefaces, which might be fontanelle. So there are serifs, there are sans serifs, and there are more decorative scripts styles and then there's slab serifs. So the serif fonts have that, those small little decorative strokes, also known as the serifs. And then we've got the stanza of the second F. Send me with that means without in French. So the san serif type faces are those without those little curls. Script typefaces imitated handwriting. The letters are connected. Then we've got the slab serif, which is basically a part of the family, but it's got like thick block-like serifs. It's a bit bolder. The surf dates back to the 1400s. And the reason they have these tiny feed is actually because of stone carving. So back in the day and when people need to carve out Latin letters in stone, the designer would usually paint the letters with a paintbrush. And then the stonemason would have to carve it out from that painting. And that stone carving created these serifs on the letters. Today. Most Books have serif letters, are serif fonts because it's easier for the eye to read if something we've gotten used to. Whereas on, on websites, serifs are not that common for body text. The only place we are the most common place we see it is on new sites. So for instance, here on the guardians website, we've gotten a serif font used as both header and the body text. The serif font, the mood is the stable, respectable, timeless, formal, traditional and elegant font. And some of the examples Times New Roman, Georgia, Palatina, and Garamond, and some of their subfamilies. So the sheriff has four different types of families. So there's old style, transitional, modern, and the slab serifs. So if you want to, again go into further detail, you can do that. Here's an example of how Cera fonts have been used on websites because they have more detail, they tend to work better with larger sizes. So for instance, as here, headlines, their work well with smaller web copy made with a sans serif font. The san serif is simple, the sensible straight-forward type face. We know it in Helvetica. One of the common sort of design type phases, REL to Homer or other Diana, the sensor of again, has four different types. Those are the grotesque, the new grotesque, the humanistic, and the geometric. And they all have their distinct character sets. In general, most websites use the serif fonts. It's very neutral, it's easy to read, and it's very legible often, and it won't offend anyone if you like. The sounds I have can also have a really clean look to it, as here in the combination of whitespace and that contrast, it really makes an impact. Script typefaces imitated handwriting where the letters are connected. Script should be used in small doses when appropriate because they are hard to read. So it's better to use as a decoration or just as a graphic element. The mood typeface is like more feminine, personal, elegant, and pretty. But again, it's hard to read, so it's better just to put it in as a decoration. The slab serifs, their entire family with the thick block serifs. Slap Sarah was originally developed for news headlines to increase legibility and impact. And that's what this lab set of doors. They are primarily used for large headlines, but rarely in body takes. So as you see here, an impactful headline and then again a Sarah body texts. But that headline really stands out. The mood of that is sort of important. It's to show a bold, impactful and design and its intention grabbing some of the typefaces. We know. American typewriter, alphas lab and sealer slap, using both san serif and sans serif fonts together is now a common practice in UI design to keep the interface on it though, and to keep it a bit more streamlined. We don't want to use more than maximum three funds. And we want to keep the decorative fonts to a minimum. Remember again, as always, the best font choices are ones where the reader is actually not, no, don't notice the font but the message. Alright, let's have a look at this great example. How many different fonts do you see in this example? We've got Script typefaces. We even got Comic Sans, which is a no-go for all designers pretty much. We've got really, we've just got inconsistent use of fonts here. So using the same funds and would really tighten up this design and create a better hierarchy. Some guidelines avoid title case because capital letters at, like punctuations, lowercase, it's easier and quicker to read. Don't make it more difficult than it needs to be. Don't use script. All capitals are slower to scan. And lots of underlying text is hard to scan as well. It's important to consider text size as well. A good rule of thumb is to double or half the size when changing quite sizes. E.g. if you're using 32 pixel for the header, then you 16 pixel for the body texts to create contrast. Or at least that's a good starting point to double the header. We also want to consider line height. So to the left, the design looks kinda cramped and this sentence really shows that it's important to get that right line-height in your designs. The letter spacing or the kerning is the space in between the letters. It's important to get the right amount of that letter spacing in your design so it doesn't feel like crammed and it makes it hard to read for the USA, line length is quite important as well. And the width, the width of your textboxes, It's better to have shorter lines to improve legibility. And it's faster and more comfortable to read. A suggested line length for onscreen as 60 to 80 characters based on a screen size of 1,440 pixels and font size to 16. For more mobile, it should be around 35 to 45 characters per line. Alignment. We've talked about it before. We want to align left for better readability. If your center, It's okay. If you don't use more than three to five lines, when it gets longer than that, you can see how to the left. We've got that center alignment and it makes it really hard to read. Whereas on the right, we've got that better readability. Justification is especially important for people with dyslexia. Fully justified texts can create these rivers of whitespace, which makes it hard for them to read. So it's fine for print. For like news paste papers for instance, where you can adjust the kerning but not in digital. Let's talk about iconography. We've talked about iconography before when we were going through the Gestalt principle of. So, when we use icons, It's often to convey a message or communicate an idea in a limited amount of space. When we do that, There's a few things we need to be aware of. We need to always support the icon's with words to enhance the meaning. So for instance, on your phone you've got all your app icons, but you always got that label underneath, telling you what that app is about. They should also be meaningful to most uses. It has to convey enough meaning for users to make that connection and make that closure of what the meaning of that simple is. So here we've got a task list, an example of a task list, where it's just like three dots on a red circle, which doesn't really convey that meaning of a task. So instead, we could design it as a paper with a pen. Another thing to think about is that symbols or icons are often culturally specific. They can mean different things in different cultures. So for instance, in Australia, there was an airline that launched a flight to Korea and they were handing out this white carnation flower. But they just didn't think about the fact that in Korean culture this flower is a symbol of death. So that didn't go down that well. Lastly, the icon shouldn't be too detailed because then like the whole point is to have a simplified message in a little amount of space. So just make it simple. Many icons are universally adopted as the cases with these icons we've got here, we've got the lock for security, we've got the play button, we've got the floppy disk, which might have lost the connection to the original item of a floppy disk. But we know that it means save. Even, even younger people know that even though they've never seen that item before, there are other icons that are less commonly understood. So these are some examples here we've got the, the hamburger menu. And then next to that, That's another type of menu called the kebab menu. You've got the burger and the kebab. They, even though they commonly use, they're not always commonly understood. Here, we've got a good example of the use of icons where they're clear, they're legible and they've got that label underneath. Next often we've gotten a lesson around human cognition and UI design. 6. Human cognition & UI design: In this lesson, we're going to cover human cognition and UI design. So let's talk about the concept of affordance. So this concept is basically where physical characteristics influence or imply how the object can be interacted with. So I have a picture here of a joystick. So you can give this to a three-year-old and you don't really need to give instructions. It's fairly intuitive and obvious how to use it. The physical characteristics suggests where you put your hand when you press things like that. So when we talk about web design and designing UIs and systems, we have this concept of affordance works pretty obvious to the user. What you have to do away. You have to go based on the characteristics of that object. So here's an example of poor or four months. I went to this website last week. I was looking for something and I couldn't I couldn't work at how to interact with a search. So I'm clicking on it thinking, Oh, when I click on it, it'll pop out with a little white box that I can talk. And it wasn't until I sort of basically went into it and clicked around it that I realized that, oh, that's where you have to top. So there was poor affordance. It wasn't clear to me where I had to type in this example. Now imagine you've gone and G internet banking one day and I've asked you, Do you want to complete the survey? So this is a screen and I got presented. And have a think about what do you think you'd likely click on on this screen? So have a look, see what you think. Where do you think you would click? So if you're like me, you clicked on the giant big Close button because there's only one button, right? You can't go wrong. You don't have to decide. You don't have to really read the button because there's only one to choose from. So this is a good example of it's good affordance. But in this case, It's a bit misleading and the visual flow of the page is directing even that giant big arrow is pointing to the buttons. So my I and my attention is really focused on that button. So I don't really need to read it because it's pretty clear what to do. But in fact, what the button does is closed the survey. So in fact, what you had to do was click anywhere on that banner that help us help you, and that's where you would do the survey. So that example I just showed you is an example of visual flow and where your eye is sort of move through the page and where they're drawn to. For visual flow, the natural flow for the screen for most people around the world is left to right, top to bottom. So most users start on a web page or a screen or a system, and I go to the top left of the page and they work their way that I read everything top to right, left to bottom. But they sort of naturally work through that page and generally end up at the bottom right. So you think about something like a form, your logical place to have a next or submit button is generally that bottom right of the screen. For some cultures, for instance, Arabic, where they might move from right to left, it might be a little bit different. But for most cultures, most Western cultures and many Asian cultures, it's left to right, top to bottom. So have a look at this example. This is a site that we tested. How do you think users might move through this page? So for instance, in this example, they had to choose the performance date and time. So once I pick the date, then the time, 08:00 P.M. What do you think they did? You're probably right if it gets that, they all went straight from that IPM goal bad, right to the gold Continue button at the bottom. But what most people missed is that bottom-left, how would you like to select your seats? So luckily, it wasn't a big issue because most people miss this. But the default was what most people want to do anyway, which is choose their own seats. But most people dismiss that. So think about where could you move that? So that was in that visual flow. So you can potentially move the how'd you like to select your seats underneath the time they ate PM so that your eyes are actually moving through that and you're more likely to notice it when you are moving towards that Continue button. So that's a fairly simple fix. Here's another example. This is a nice example of good visual flow. So in this example, people are searching for a staff member. Now a lot of people just want to type in a name and click Search. But as they are, as they taught in the name, their eyes have to move through these other fields, keywords, division, location. Now they can just ignore those if they want, but they actually might help narrow their search so the eyes moving through them, they're more likely to notice them. So this is an example of a good visual flow. I'd like to talk about skeuomorphism. Now, this is where an object in software mimics the real world counterpart. So this is an example of skill morphism. In this example, we've got the old notes application in Apple iOS. So in here, the notes pads looks like a real know peg in the real-world. It's trying to simulate the real-world experience. So we have a yellow notebook. It's got lines on that like in the real-world. And basically it's pretty clear what you have to do. It just works like the real-world versus the new notes application is pretty much just a blank screen with a couple of tools and icons at the bottom. So it's not at all intuitive on how to use this. So this is an example on the left, a skeuomorphism. Sometimes these are also called usual metaphors. And there are certain advantages to using visual metaphors. Metaphors can put abstract concepts into concrete terms and makes it a little bit clearer on something like the note pay if you haven't used it before. And makes it easier for people to understand how to use or interact with that. It creates it familiarity if you like, it's more comfortable. And it makes a system a little bit easier to remember as well. And it can be a little bit more motivating, a little bit less intimidating if you like, and encourage action because it is more intuitive. But there are some disadvantages. So I want to go through those as well. It can be helpful, but really only for inexperienced users. So that example of the notes application on iOS, well, most people with an Apple iPhone are pretty familiar with how notes works now. So you don't really need all of that extra lines and clutter and color. So the other issue with it is it can create functional limitations dictated by the real-world object. On a notepad. When you get to the bottom of the page, you have to turn the page to start a new page. So with the notes application, you can just keep going, but uses might think, Well, hang on, I'm at the bottom of the page. Maybe do I have to start a new file or a new page? So sometimes the limitations they might expect will apply in the digital world when they in fact they've done. It also adds clutter to the designs. So you've got all those lines and extra color, a lot of noise that it's not as clean if you like. And it may not also cross cultures, different languages or ages or generation. My favorite example of this is the floppy disk. Some of my child's is I'll look money, That's the save icon printed. This is basically an example of a visual metaphor. In many years ago we used to use floppy disks to save things. So it's become a metaphor for saving and it's an icon that's still widely used in 100 years time. They'd probably going to be going, what is that thing anyway? But it's a standard if become a convention and it's a metaphor for saving things. The other thing I wanted to talk about now is reducing what we call cognitive load, but don't make me think, uh, Steve Krug says, in this idea is that the user shouldn't have to remember information from one part of the system to the other. So here's a toy example. Find a training organization to locate a registered training organisation, registered to offer the Certificate four in celebrant. See their contact details, please visit training.gov into the qualification code CHC 46. Oh, man, there's a lot of stuff here to remember. Do you think most people would be able to remember all this once they click on that link. Probably not. So you shouldn't force users to have to remember lots of information like this because they simply not going to be able to. And it just puts a lot of stress on the user's. It's unnecessary. Don't make me think, as Steve Krug says, Here's an example as well. I went into gets my invoice for my tolls for work purposes. So I went in and I looked at my tag number and I looked at my husband's tag number. Okay. Yeah, I know which one it is now. Then I went to export because I wanted to download it. Then I went in here and then it had the basically I had to put in the tag number. So it didn't even let me select from the available tags and their account. I had to go back. And then I thought, okay, now worked it out. I'll go back and I'll copy it and it wouldn't even let me copy it. So I had to remember the number when I didn't export. So this is a poor example. You don't want to have to make users remember a really large number and have to type it in or remember which a candidate is. Why wouldn't let me create a nickname yet? My told my husband's told tenure or something like that. And then let me just select from a drop down, so reduce the amount of thinking that I have to do. So what we wanna do is present information in meaningful, distinct chunks. So we're going to group things into chunks that makes sense to the users. And we wanna make supporting tools and information readily available. Things like currency converters or some sites. Now even just say Hey, we noticed you are in Australia. Would you like to say everything in Australian dollars? And unlike awesome, it means I don't have to get a calculator out or use my brain to convert it every time I click on an item. So things that reduce the amount of thinking that you'll use this have to do. Now I want you to watch the following and tell me what do you notice. Imagine you want to take out travel insurance. You want to go for a few days to Vanuatu. And how to think about what you'd expect to happen. You go in here, you select your destination. You select your start date, end date. What do you think's going to happen when you click on the Get quote? So do you think it would go to a new page? Do you think he would fly out something? So have a look and see. Alright, it's done, finished. What happened? It's nothing happened or did it? So you might not have noticed in the middle of the screen, those three dollar values in red actually updated just as you clicked on the get quote. So if I go back a little bit, why that last little bit again, see if notice it changed them. So this is an example of change blindness, where users often don't notice changes in state, small little things or parts of the page that update which they don't notice. They often get confused when they do something in the page doesn't appear to change in any way. We've done testing on financial sites and they've changed things and the users have said things like it's something happening or they've changed that an option in the insurance and it says a guess that might affect the price, but it wasn't clear. So this is an example of that. So why is that? I want to talk a little bit now about what we call foveal and peripheral vision. So our foveal vision is our central vision. It's f one to five degrees that you're looking at, where everything seemed really sharp focus and it's bright colors. And then we have things in our peripheral vision that are on the side. And things in that sort of peripheral vision, maybe a bit duller and color and they're fuzzy so you can hold a book out to your side, but you're probably not going to really be able to read that book. So our peripheral vision guides our attention and often competes without central foveal vision. So the design implications for us is that we want to avoid moving or scrolling texts because these compete with their attention. So you're trying to focus on something in the middle and something's flashing on the side. We also want to use familiar patterns so that detectable by peripheral vision. So if I'm looking for a search bar, for instance, I'm looking for a little magnifying glass or button next to us in a white box where I'm gonna be at the top in a search term. So that's a pattern that's my brain is familiar with. I can't see the details of that pattern, but I can see enough of the shape of it. To God my attention to that. We also want to minimize the visual noise. All of those things on the page needs to have a purpose because it competes for attention. The ABA, design implication is when we use in page tabs. So people often don't notice tabs within a page. Here's an example of a website we tested a few years ago. In this example, we asked people to go to something that required them to find insurance. Judy now normally lead people that match in a test session. But we wanted to prove the point that even when we lead them, they still couldn't find it. So a lot of people just went through this page and I just didn't see the tab on the right insurance GD. And the reason for that is this. This is basically what the brain looks like. So when you're looking at a computer screen, let's assume that you are about 45 cm from the screen, one to five degrees. Focus is equates to about 4 cm or so on the screen that are in sharp focus. Effectively, this is what your brain sees. So you can understand looking at this sort of simulation, why people could easily miss those tabs when they're not boldly colored because they're not looking for them. So what does that mean for designers? It means we want to show as CTAs or our calls to action. Things that you want to use this to do are really prominent. We want to have strong buttons. Use strong visual cues. Really, really good affordance, big, bold, strong colored buttons that really has strong hierarchy. We also want to ensure that the tabs are prominent and it's so close to that five-year-old view, that central view. So I like to reverse the color treatment of the tabs. In the example on the left, which is from the side, I'll just show you. People would fail to find that eligibility tests that link flooding in the middle of the screen. So it would be better as a button if it was really important that you wanted them to do. And the tabs on the left, I didn't say that. So on the example on the right, this is the old site for National Australia Bank, but it's a good example of how the tabs are. The color is inverted. So the, the active tab that the one they are on his watch, and the other tabs that they can potentially choose a dark so they match more likely to be noticed by your peripheral vision. Thinking about peripheral vision, what do you think might be the issue here? So you've gone in here and having a look. So what sort of on the edges of the screen that people might miss? So basically, other than menu on the left, that little icon for the search on the right be easily missed by people for their peripheral vision because it's very small and it's not a pattern that people are familiar with. Paypal a set and a familiar with what we call the menu burger. And they're really used to using that on a mobile. But on a large computer screen, I would generally not use that burger menu. So this was obviously an issue because they put this little thing, a solution. Did you know you can use the search? Well, it's not a great solution. Just use a convention of a patent. Put a little white box next to it. That's a solution, but not a great one. So that means we want to use familiar patterns detectable by a peripheral vision. So things like a text input box next to the search button and avoid many burgers on large sites. Now, I want to talk a little bit about user confidence and entering personal details. So people should be confident using the application. There's a lot of scans that they now, people are becoming more and more nervous and weary of putting in their personal information. So you need to build that confidence. So how do we do that? We can use things like iconography or images to show the site is secure. A lot of people don't know how to determine if a site secure using the HTTPS or little padlock icons in the browser. Sometimes browsers like Chrome will tell you if the site is not secure and they give you a big warning and people will freak out because their certificate expired. So on your side, it may be secure, but that may not be clear to users. So this is an example of Internet banking. We did focus group E is ago and people raved about the little padlock in the internet banking. And it's like, well, it's internet banking for a large bank, of course it's secure. But that little padlock picture of a padlock on that log on just made them feel warm and fuzzy, gave them that assurance. Here's another nice example when they're going to put their credit card details in for this prize lottery site. People might be a little bit nervous with that. Especially older people are less savvy people. So again, it's gotta how we secure your information and you hover over that in a little box, comes up with instructions. It may not mean a lot of things to people, but having all that information there just helps build that assurance that you are taking security seriously. Now when you're asking for people to enter in personal details, you have to provide a clear value proposition. If you're asking them to register oriented detail as they go, Okay, what am I getting out of this transaction? So here's an example, not a great one where I use airport parking when I'm traveling for work. And all my details are saved, I log in as a customer. And when I go into here, it asked me for my phone, taught all my other details that I remember except my phone type. And I'm thinking, why do I need my fun and taught to pack my car? I don't like what? I can't see any valid reason why they would need that. Which set of effects my trust with them. I'm like, What are you gonna do with that information? Why do you need that? It's not clear to me. Here's a nice example when I go in here, but basically you can type in any address and people go, Hang on, I'm typing in an address might not feel comfortable. I'm looking at property values to say the sales history for property. Now you might say, Oh, I'm not sure about that, but he says here, why do we need to address now in this case, they actually required by government authorities to record the details of who they're publishing that data too. There's a valid reason government regulation that they need that. Again, they've just explain to me why they need that address. It would probably be better if that was at the top of the page. But at least they've got that information. The other thing we can do is what we call gradual engagement. So basically done ask someone to marry you upfront. We want to gradually build that relationship and build that trust. And then we need to provide a reason for them to provide their details. So I went to a website called tent world. I purchased some camping equipment. Add didn't really want to login or register and I might not want to do that. I'll just check out as a guest. But then at the end, it gives me an option that says, Hey, activate your account. I'm like, why would I want to do that? It gives me some valid reasons as to why I can check the status of my order and I can come back faster next time. So it's giving me some reasonable ideas as to why I should register. And all I have to do is basically click a button and put a password, I'm done. So it's not too much of a commitment then I'll asked me upfront to register. This is what we call gradual engagement. In our next lesson, we're going to talk about inflammation design. 7. Information design: In this lesson, we're going to talk about information design and we're going to focus on web content Riley, and readability. So here's a diagram that pretty much shows the information flow. It has many different elements. You might think, Oh, we'll just put the words on a page and people will read it and it will be good. But it doesn't work that way. So you might put words on a page. But all of these different things affect how they interpret that, their perceptions of that subject matter, the technical environment and physical environment which they operate, the social environment, the goals, all of these things might affect how they interpret or process that information. So if you think about something like COVID vaccination information, when that first came out, you probably remember there was a lot of contention about that. So think about all the things, how these elements change for this particular topic. So perceptions of COVID, vaccination information. When that came out, people had different perceptions on now preconceived ideas. There are different physical environments. Lots of things were happening. People took different actions, so different social environments. Some people lived in communities with lots of that anti-vaxxers. Others might have lived in mind, maybe a scientific sort of household. So they'd predispositions might have been different. Information flow is not always sort of how we intend it to be. Just be aware that it has many different elements. So I now want to talk about how uses view content. So people are generally read, they scan. And we want to enhance that scanning by providing clear links, headings, short phrases and sentences, and lots of short paragraphs. When people say large paragraphs of text on a screen by almost real away in horror. So we don't want that. We want to make it easy for them to scan it and basically find what they're looking for. This is from Steve Craig's book, Don't make me think. It's an oldie, but an excellent book. What we designed for. Sometimes our stakeholders are all we have to put all those words on the page we designed for everyone reading everything left to right, top to bottom. But the reality is they're skipping all over the page. So they're not always looking at the content you want them to. They often scanning for links and keywords. Now sometimes when people will read, there are different reading patterns that people have. One of the common ones to be aware of is what we call the F shaped pattern. So as I mentioned, people don't read they scan but they often scan and F shaped pattern. I might read the first line or two of texts. Then I might scan down. They read a couple of words from the next one, and then I might just scan down and see keywords. So here's some examples of that S-shaped pattern. Not the only reading pattern, but it's a very common one, especially for things like search results pages. You can see here from eye tracking how people are looking at the pain. Now, you might say, oh, unlock web content biodata, I need to do this segment. However, you might be still writing instructions for an application or software. So when we have instructions, we want to make sure that we move things like instructions to tooltips. A little question marks on the side or help. Or even error messages will talk about error message later. But sometimes we still need to word those instructions in a way that people can understand them. We also don't want to include unnecessary instructions. Don't tell people how to suck eggs. Basically, people aren't stupid. They know some common conventions. So don't tell people to use how to use things when it's pretty obvious. So we want to make sure that the design itself should indicate what actions are available to users. Designs should speak for itself. The user shouldn't have to read instructions on how to interact with that design or that user interface. So here's an example to access the site, enter your username and password into the fields provided. No, I would never have got that from that pet. So here's an example. Most people are familiar with a login pattern. I'm not suggesting you do this, but you could probably even get rid of the labels, username and password and paper would still know what to type in because it's a very familiar pattern. So just lose the instructions on how to login. Maybe just put a heading and what they logging into. So don't include what I call superfluous instructions that aren't really necessary and just add visual noise and clutter to the page. So you might think that people don't read instructions, and that's often true, but they will read instructions when they get stuck. So think about your own situation. Have you ever bought a piece of furniture from ikea or a toy for your child and you're trying to assemble on Christmas Eve and you think, Oh, I didn't need to read the manual, I can do it without that. And then you start to put it together and then you go, Oh, I'm stuck. What do you do then? Then you grab the manual. So people do look for help, but only when they get stuck. So when they come to a web form, they go, I don't need to read the instructions. I'll just fill out this web form. Then they get stuck and then they look for help. And they look for help at the point of confusion. Sometimes however, we want to give them advice or things that are going to help them through that process. Before they start. And it's really hard because if you put those instructions at the top of a phone, people will just ignore them. So this is a good example of from asic website. When we changed our business name. Basically, I was presented with this. So before I started the prices, it had a checklist of things, things to be aware of because it's a government website for registering your business. He kinda thing I probably should read these things. And having a checkbox made me read them much more likely. So here are the things you need to be aware of. Anyone could go through and just pretty much check all these checkboxes without reading it. But by checking the box here implies you're agreeing to these things. So you read each of these instructions, you click on the check boxes and it won't let you proceed. It grays out the button until you selected all those checkboxes. So this is a good example of how you can sometimes provide instructions at the style of a process, especially if they need certain documents or if they need to have done certain things before they start that process. Now when we're writing content, we want to use what's called the inverted pyramid. So we want to put the important stuff upfront. So it's almost the opposite of academic writing, where we have our introduction, method or approach our results and discussion and we're building to a conclusion. With web content writing. We want to flip that on its head. We want to start with the conclusion. What people want to know, then what do you want them to know? What all the other little things that legal thing you have to put on their terms and conditions, things like that. So I have the really important things at the top of the page that are going to help users achieve their goals. And obviously that comes back to what are the user's goals and who are the users for this page? So always think about that when you're writing content. Who is the audience for this page? And what are they trying to achieve? I'm going to show you a little video now. So pretty clean. Have you gotten into steaks? I frequently asked questions, just ask to ramble on, doesn't actually say in this section. You will be able to answer this and that just rambles on assists and click here for this last question. So as you can see here, there's a lot of superfluous text. This is a frequently asked questions. They get 1,000 calls a day. Yes. So I would hope that your FAQs or base and all the calls you some of your questions have been answered yet. Okay. Where are they answered? If you can't find the information, go to the act. Well, good luck with that. Trying to read information from a government act. And then at the very bottom of the page are the three little links where the frequently asked questions can actually be found. So most of that text is superfluous. Gf is my scientific label for that superfluous GF. Below we redesign that page. We now have the three links for the FAQs because I had so many FAQs that are categorized by the time whether it was starting or ending a tendency. There were lots of little things like how do I change a light bulb? Who has to pay for that? So lots of little specific questions. But by categorizing them, That's why they did that. So we had those three links first and then if you can't find it, then go off to these places. Another thing you can do with content is used what we call expand collapse or show hide panels. These are really useful way, especially work well on mobile because the user has control as to what content they say and what they would like to see expanded. So this is a nice example. Here's another example of an expanding panel. This is the turn data discovery portal that we worked on. Again, we did lots of user research. We talked to ecologists and researchers. And we found that one of the things that scientists are colleges wants to know this is a metadata or data about data. So it's a place I can go to find any ecological data. And what we found is the things that they all wanted to know. We put there at the top of the page and then the things that I need some users wanted to know, we hit in these expand or collapse panels. So again, make sure you put labels on them like show and hide for accessibility. And make sure there's a strong visual cue like it's a good affordance of the whole area's clickable, like a border around it or shading or color, things like that. So this is examples of expanding panels. Now I want to talk a little bit about literacy and readability. Now this is a bit tragic I think, but about 14% of Australians have very poor literacy, and it's very common in other Western cultures as well. This doesn't mean that they're stupid or dumb. And anyway, it's just that people have different backgrounds or they might have learning disorders that may have made it hard for them to read or things like dyslexia, things like that. The general public websites. What that means is we want to generally write that content targeted at a sixth grade level, which is about us of a 12-year-old. So that sounds pretty scary. But just think if you've got a general public audience. So if you've got a banking website or a government website for government assistance, you want to make sure that that content is targeted at about a sixth grade level. In Australian government, the web content style guide says it's a fifth grade level. So that's can be hard to do. So how do you actually assess that? So there are different, what we call readability scales, which determined the readability of texts. So this is one of those example called fries. In this example, you take three paragraphs of texts. You average the number of syllables over 100 words and the number of sentences per hundred words. And then you chat that for that three paragraphs on this grid on this chart. And then it shows you that it's a college level which is university, or whether it's a fifth grader, et cetera. So that's that's one way to do it. That's the hard way to do it, but that's the background theory behind it, is a couple of other tools you can use, even just basic Microsoft Word. If you go into the options, you can click on readability statistics and then do a spell check. And at the end it'll pop up and give you the reading ease score. So that's using a method called Flesch-Kincaid instead of fries. This is one of my favorite tools. This is called Hemingway App. A lot of copywriters uses tool. With this tool, what you do is you get your texts from your website or whatever you're wanting to test and you paste it into this middle area. And the only thing I don't like about this tool is that it's not crystal clear way to paste your texts. So you paste your text just over the text that's already there. And then it automatically gives you a score on the right-hand side. So this text here is grade six readability. And what's really useful is you can edit it in line. So you can go in here and you're gonna go, okay, that sentence in dark red shading, that's very hard to read. Let me go and change that. And then you can see in real time how that's changing. Then you can go, okay, I'll get it down to a grade five level by removing a couple of big words. So sometimes it's hard to get it down if you've got words like Australian government, they're big words. And I will affect the readability, but it can't get with it. If you call it Ozzie and gov, that's probably not the best way to go hit. So there are terms like that that you just never gonna be able to avoid. Next, we're going to go through the visual design process. 8. Visual design process - from wireframe to visual design: Now we're going to talk about the visual design process, mainly about how we can use mood boarding to go from black and white wireframe into an actual visual design. We'll focus on mood boarding as a way to establish a visual style for our designs. And we'll also talk about style guides as either a tool in the process or as a way to document those styles. Mood boards are collections of visual materials to show ideas and concepts. It's not something we are very familiar with in UX, but it's a popular technique in the broader design world and other creative fields. Mood boards are great for creating visual directions for your design and allowing you to effectively share these ideas with others. They meant to transfer the right mood and bring those more emotional aspects of the design forward. Unlike wireframes and prototypes, mood boards don't show the detailed picture of a future project. But more again, those emotional and sort of broader colors, the topography and the imagery and so forth. So why do we even bother with moodboards? First of all, it's to save time and effort in a few hours or maybe less. Designers can create this visual guide for clients. When we present a concept. And mobile can easily be edited so it saves both time and effort. It's also a good way to involve clients in the process. We can get ideas from clients and try and understand what they want out of the project. They can actively participate in the selection of styles and samples. And it's an easy technique and it can be done if you're a non designer as well. You can also do it to understand the project. So you can do mood boarding on the client. What does the brand look like now? The demographic, maybe add to your personas. What are the visual style? What do they love? What do they use? What do they see? Can also do a mood board on the client's competitors. So what does the competitor sites look like to avoid doing the same? So most importantly, we do move boring to get inspired and establish that visual direction. It's a good way to find ideas and inspiration for that visual direction of your design. The mouth focus, your mood board is the easier your visual design process will be. As UX designers, we might create a mood board for interface elements, for iconography, for topography of a color. Let's have a look at some examples. So mood body helps us figure out how to go from wireframe to the visual design. So this is just an example, sort of a simple example. We've got the wireframe on the left and we've got the sort of more file UI on the right. Let's try and break that down a little bit. So far in UX, we've focused on the functional aspects of design. Which type of interaction elements do we need? What is the flow of the site we'll call to actions? Do we need to include when we start mood boarding, we start to establish that visual direction for our design. And this is a simple wireframe for a find a pet website. And let's have a look at how the mood boarding process helped guide the direction of this design. So first of all, there was some keywords established, so those were cheerful flowy in retro. This site was a pet website and it's aimed at families with young children who are looking for a pet to join their family. So therefore, these very cheerful flow, your retro vibes was chosen. This is an example of a one-page mood board. Based on those keywords. Based on those keywords, we can start sourcing inspiration. So this is a collection of some screenshots from other websites. There's some photos that indicate that visual direction of the design. It doesn't have to be super-complicated. You can take a few images. It doesn't have to take a long time, but sourcing, like just a little bit of inspiration before you start doing your design will be helpful. Once you've collected this inspiration, you can start breakdown and analyze the design. Then use that as your guidelines. So for instance, we don't want to copy the design, we don't want to copy the inspiration sources we've found. We want to understand what they did and why they did that, and then copy that, then do that. So here couldn't do a bit of analysis. So there has been. They've used large colorful blocks as backdrop for each section. They have. The straight lines are broken up by overlapping elements. In this case, the socks that elects flowing out everywhere. And then they've got rounded buttons in the design. And then the use of color blocks, there's hardly any white used. Okay, so how might this mood board help us create that UI for this website? So we have that black and white wireframe and then we're going to apply those different elements that we saw in a mood board. So we've applied the large colorful blocks as back to backdrop for each section on the pet website, the straight lines sections are broken up by overlapping elements, in this case some shapes and some dogs. We've used those rounded buttons and rounded tiles. Then we've used color blocks. There's hardly any way. So that was the result from a simple mood board exercise and then applied to that wireframe. It's all summarized in a very brief simple style guide as well, where we've got the button styles, the headlines, the colors, then a few of the visual elements used in there. Okay, So let's break the process down a little bit of ethanol. You can brainstorm three visual keywords. So there could be brand values, basically keywords that reflect the brand and gives you some direction. So during your UX research and analysis, you have most likely discovered lots of insights from your users about what they like, about the brand. What are the sort of the mood the brand gives him and what is it supposed to do? And we can use that research when we then describe those keywords. We can do some mind-mapping or word associations or brainstorming on words. Then together with or without a client's, we can determine those keywords. Some examples here of sort of emotional keywords. Cheerful, competent, Joyful, curious, and so forth. Next, we want to decide which mood boards that we need. Do we need interaction elements, or is that already established? Do we need color, a new color palette, or typography, or a mood board on layout. So often there might be like a full-blown style guide, in which case we probably don't need a lot to do a lot of mood boarding. But other times I might be like half. We've got this button, does that button styles, this color palette, but there hasn't been, there still some elements missing. Yeah, So if there's anything missing is a good idea to then saw some inspiration for that, that we want to just get creating and create a mood board of examples that reflect these keywords. We can screen grab, we can get some photos. And remember again, a mood board that's focused is a bit more efficient than just having lots of different sources pointing in different directions. So it's a good idea to refine the options, the best possible outcome. So rather three focused references then a bunch of different ideas. Lastly, we want to analyze a mood boards. We want to break it down and understand what makes these examples good examples. What characterizes this inspiration that we've sourced? We don't want to copy the design, but we rather create our own design based on some good ideas. So examples of this could be the layout. It's got wide margins or narrow margins. Do we have what type of topographies use if that's of interest. It might be the way that the site is balanced or it might be the hierarchy that we like. So yeah, we can, we can source that inspiration and then break it down. Let's have a look at another example. It's, again, it's about turning something played into something more emotional and visual. Going from that black and white to something more colorful. This is like a proper UX sketch, very early sketch just outlining this microsite and the elements on it. Then we move into the wireframe stage where we go into Figma or sketch. And then we start placing our elements on the grid that we've laid out. Then we can start creating those, those keywords that ties in with the brand. In this case, Quirky, library and dynamic are some of the words. Then we can start doing the mood boarding. So here's a mood board for UI elements. So a bit of inspiration for that. We've got sort of cartoonish buttons and colored frames with whitespace and so forth. So we break it down. There's some inspiration about layout and imagery used. And then colors. Again. In this case, we've got two color imagery. The use of bright neon colors to evoke that sense of emotion and feeling. It's a bit more sort of emotion and a bit more feeling, feeling stuff in this phase of the process. Now based on those that breakdown that analysis, we can then start applying that visual style to our wireframe. We can do it section by section. So we start out at the top and then work our way down. In this phase, we could also be establishing a style guide at the same time. So I'll talk a bit more about style guides innovate in this phase as well. There's some good resources out there that you might want to use. So free images can be sourced from Unsplash, pixabay pixels, nappy.co and stock snap. Just to mention a few icons to use icons in a design. There's lots of free ones out there. The Noun Project D, I can say it, and Ionic columns are just some examples. And then fonts again, if we want to have a custom font or just a font that fits our brand and what we want to get across, we can download fonts from Google font, font fabric, Adobe fonts, and there's plenty more out there. Let's talk about style guides. Style guides defines the consistent patterns, the interface elements and the visual styles such as the fonts, the colors, the iconography used in the designs. Clients often have style guides. Sometimes they are more extensive, sometimes there are hardly any. Sometimes, as a UI designer, you'll have to work with the client to develop a more extensive style guide. There are various way to approach and interpret these style guides. If there is an existing style guide and defined elements already, then that's where you got to start. As tall guy can also just be a work in progress next to your wireframe, why you test out styles and you gradually refine as you go. So it's almost like if you go back and forth from your wireframe and then you're sort of elements design, interactive elements design. They also use as the end of the process to then document the design for others to use. So it might be a deliverable along with your wireframe. And you're more visual designs that can be very specific and show pixel perfect measurement for certain elements. Or they can be more loose and offer more broader guidelines. With visual examples, there's no single right or wrong way to do these style guides. There just needs to be understood by others. It's important to remember that they are living assets and they keep, keeps evolving with the design. Here's another example of how the headlines and the imagery all plays together in the design as well. Got the icons, the use of imagery of what's the style of imagery use, and the color codes and the quote styling as well. Other times there's a more extensive style guide as this Medecins Sans Frontieres style guide, branding guidelines online. So as it says here, the visual identity system is a way of ensuring consistency across all the communication channels that we use. So this is a global brand and it's got like local hub. So just to ensure that consistency across the globe, they've developed this quiet, extensive brand guideline. So it has like downloadable assets. So we've got the logos and then how the logo is applied. When to use logos, when to use symbols, what not to do in the design and what to do. It's also got color. One of the main colors and what are the secondary and tertiary colors? It's got typography and then composition as well. Structure, images, maps, pictograms, and examples of how this all comes together to communicate the brand. So as a designer for this project, you would have to go into this side, download the assets, and then look through and then ensure the consistency with the brand guidelines. So in this case, you probably wouldn't do a lot of mood boarding. You would just go, go straight into it. Next up ten is going to give you a bit of a summary about the lessons that we've gone through. 9. Summary and key lessons: Best job at a summary now, for course seven on visual and information design. So what is visual design? Remember that definition? It's the practice of devising grids, laying out pages, choosing color palettes, and developing icons. And that's the definition according to the BCS. So the fundamental principles of visual design, the really important ones you need to remember if you are sitting there, BCS, exam, proximity, alignment, repetition, and contrast. So remember that acronym park PARCC? Again, they're the fundamental ones according to the BCS, they probably are others as well, but these are the ones they deem to be most important. Sophie talked about Gestalt principles, principles of proximity, similarity, figure-ground, closure, continuation, and exclosure. She's also talked about other design principles such as hierarchy and alignment, repetition, balance, and contrast. Sophie talked about the visual elements of color, typography and iconography. I then touched on the concept of affordance. This is where the physical characteristics influence or imply function. So something like a joystick is really obvious to a three-year-old how to interact with that. We touched on metaphorical and skim office and where an object in software mimics that real-world counterpart. So just remember those terms as well. And reducing cognitive load. And I talked about the user shouldn't have to remember information from one part of the system to the other. Let me test on information flow and web content writing. So he talked about how information flow has many different elements. Then we talked about information design in terms of web content writing, attached on literacy and readability and how to measure these. We've talked about some of the red writing for the web principles are how users read content. And we talked about the F shaped pattern. Then Sophie talked about the process moving from the wireframe through to the visual design and how we do that. In our next course, number eight, we'll talk about usability evaluation, including design heuristic.