Intro to UX Design: Usability Principles for UX/UI Designer (+Figma Wireframe Exercise) | Christine Vallaure | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Intro to UX Design: Usability Principles for UX/UI Designer (+Figma Wireframe Exercise)

teacher avatar Christine Vallaure, UI/UX DESIGN, FIGMA + CODE

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Promo

      1:24

    • 2.

      Demystifying: What is UX/UI Design?

      6:01

    • 3.

      Introduction

      1:44

    • 4.

      Real World References and Mental Models

      5:36

    • 5.

      Jakob’s Law – Other Pages

      6:09

    • 6.

      Consistency Is Key

      3:29

    • 7.

      Hick’s Law – Choice and Limitation

      4:30

    • 8.

      The Magic Number Is 4 !

      3:55

    • 9.

      Page Positioning & Scanning Patterns

      6:00

    • 10.

      Feedback and System Status

      5:13

    • 11.

      Error prevention

      6:58

    • 12.

      Error Handling

      4:21

    • 13.

      A Word About Dopamine and Ethical Design

      6:29

    • 14.

      Course Material Download

      1:42

    • 15.

      --> EXERCISE: Co-working space wireframe

      1:56

    • 16.

      Part 2: UI Design

      0:32

    • 17.

      Thank You

      0:36

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

2,258

Students

13

Projects

About This Class

Intro to UX Design: Usability Principles for UX/UI Designer

Hello, I'm Christine, a UX/UI designer.

Today we're going to learn about the principles of user experience design. 

In this course, I combine concepts, real-life examples, and practical exercises to make sure it's not just theory but a skill you can apply to your wireframes, web and app designs right away.

  1. Real-world references and mental models
  2. Jakob's Law - other pages
  3. Consistency is key
  4. Hick's Law - choice and limitation
  5. The magic number is 4 !
  6. Page positioning & scanning patterns
  7. Feedback and system status
  8. Error prevention 
  9. Error handling
  10. A word on dopamine & ethical design

This course is for you if you're new to UX design, want to brush up on your skills.

© moonlearning.io with moon learning

Meet Your Teacher

Teacher Profile Image

Christine Vallaure

UI/UX DESIGN, FIGMA + CODE

Teacher

Hi, I'm Christine Vallaure, founder of moonlearning a UX/UI design Figma learning hub. . moonlearning is my pet project that has turned into a full-time job, and I couldn't be happier about it. I love talking, teaching, and writing about UX/UI design and Figma, always encouraging UI designers and developers to be curious about each other's work.

Besides video tutorials, I also offer live and online workshops and speak at conferences and meetups. Connect with me on Twitter, LinkedIn, YouTube and via my newsletter, so I can keep you updated on future moonlearning adventures.

You will find a small selection of some of my original moonlearning courses here on skillshare. Content is shortened and adjusted to the skillshare format. Enjoy!

www.moonlearning.io

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Promo: [MUSIC] Today we're going to learn about usability principles. In this course, I combine concept and real-life examples to make sure you can apply them to your designs and wireframes right away. We will learn why real-world references are the basis for your setup, what mental models are, and how to create them. I'll introduce you to key principles like Jacobs Law, Hicks Law, and tell you why four is the magic number. We will learn about consistency, system status, and why de-cluttering is key. I will show you common scanning patterns that will take your design to another level. Finally, we'll dive into one of the most important but often neglected topics of UX design, error prevention and error handling to ensure that your user experience is running smoothly no matter what. In the end, I tell you the little secret about why social media is so addictive. This course is for you if you're a total beginner or an experienced designer and want to brush up your UX skills. This is a class by molearning.io. 2. Demystifying: What is UX/UI Design?: Please note that this is a two-part course. So you might either be watching the part about UX principles or the part about UI principles, ideally you combining the two of them. In any case, I want to make sure that you're very clear about the two different terms and what it means to combine them. Once you start diving deeper into the world of UX/UI, you will notice that there's a lot of noise and discussion around these terms. What exactly they include, whether or not UX and UI should or should not be combined in one term. Let me shed some light on that from my point of view and experience. No doubt, UX design is where you will begin the journey. What does UX design include? In short, you'll try to understand general patterns, behavior, and expectations. All of that to create an overall structure and order of how the product should work. As an outcome, you'd usually have some sort of skeleton and a form of wire-frames and flowcharts that outline a product or feature you are suggesting. Another very important job of UX design is testing and iterating throughout the life-cycle of a product. There are no finished online products ever. While user experience, as the name states, tries to improve the overall experience the user has, user interface design deals with the actual layout elements. Now the flowchart and wire-frames previously designed come alive. A good UI designer usually has an excellent idea of what happens during the UX process and vice versa. During the UI process, you will then define style guides, color, typography, components and the general layout for all responsive design. You'll most likely create a prototype that will be tested, which is where you link back into UX design. Just as we work hand in hand from UX to UI, you'll need to do the same from UI to development. When it comes to development, you'll hear about two major parts. Front-end development, where CSS and HTML, the so-called markup, is written, and this is where the interface that we see is created. This is what interests us as UI designers. Then there's the so-called back-end. This is where the code is written. That could be JavaScript, Java, Python or any other language. It does not really bother us as designers. This is where all the logic behind the scenes happens. We, UI designers, rarely have much to do with this. Front-end and back-end are obviously connected and there might be frameworks in place dealing with front-end like ReactJS. But all of that can safely be left to the development team. You do not need to code yourself. You should however understand technical requirements and basic principles of front-end design as a UI designer. This will help you in setting up your files and designs the right way. Now, in a large company or busy project, you might just deal with the UI design. You might just set up designs in Figma and that's it. You will however, still have overlap with UX design as well as with development and need to know your basics. You might also work as a UX designer only. In that case, you will most likely not do any design work, but you'll be busy with research, strategy and testing, and defining new features. You will, however, still need to be aware of how interface design decisions will impact and influence user experience. If you're working in deep user research, you might just do that actually, but usually you'll be so lucky and say hi to designer once in a while. In some cases, however, especially in smaller companies or freelance projects, you might wear many hats. When we talk about UX/UI design, it's usually this sort of area that you see highlighted here. You'll probably start with some research, setting up personas and setting up your own wireframes. You will then translate those wireframes into design and hand them off to development. Most UX/UI designers tend to lose a bit of the in-depth part of UX design. That is true. But it is not a big deal in straightforward smaller projects. This is also the area that I will be dealing with during those two courses. Please note that in-depth UX research is not a part of this course. It is true that in some job postings, the term UX and UI are often confused. You might see UX design advertised yet they're asking you to set up anything from wireframes to finish handle files. If ever in doubt, just draw this simple diagram here on a sheet of paper, and show your potential client or employee where you are operating and make sure this is the area they're also looking for, and not only a buzzword they were using. Also, let's be honest, it's usually not a straight forward process where things get handed down. Also in most company they don't even intend it to be that way. They'll always be a lot of back and forth and a lot of discussion. This is actually a good thing because only when UX, UI and development work hand in hand, really great products come alive. Don't listen to the gatekeepers. Find your passion, and enjoy the overlap and learning from different fields of digital design. 3. Introduction: Today we'll be looking at key UX design principles in a very practical way so that you can use them right away on your wireframe and designs. Now the principles that I will be introducing to you today, are based on the famous Nielsen Usability Heuristics, as well as my own experience of over 10 years of UX, UI design and a lot of books and research. Now before we start, I wanted to mention one thing. There is always a lot of discussion about whether UX, UI is one thing going hand in hand or two completely separated tasks. I am a strong believer that user interface, user experience, as well as front-end development, are one big love story and not a fan of gatekeeping at all. In this course, you really find that we're looking at the areas where UX and UI design overlap. Even though in your work you'll probably have one main focus. In the end, we're delivering one product to the user. If that is for you, then we'll be looking into the following subjects together. We're going to look at real-world references and why they create mental models. We're going to talk about Jakob's law and other pages. Consistency is key, Hick's law and the choices of limitation. Why the magic number is really four. Page positioning and scanning patterns. We'll talk about feedback and systems data's, error handling, error prevention and in the end, I'm going to tell you a little bit about that magical thing called dopamine. 4. Real World References and Mental Models: Even though we're designing digital products, real-world references are crucial. Real-world references are a big topic in the so-called Nielsen heuristics. It basically states that the match between the system and a real-world convention is necessary for logic and understanding. When we say referencing the real world, that goes much further than just using familiar symbols. As early as 1943, long before the Internet and the Nielsen Norman heuristics, Kenneth Craig, a philosopher and psychologist, wrote the nature of explanation, where he talked about a thing called mental model. A mental model is basically the idea of how something will work. People create mental models based on past experiences and store them like concept in their mind. They expect new and similar experiences to follow the same pattern. If there is a mismatch between a mental model and the so-called conceptual model of the product you're building, then users will first of all, not really understand it or take a lot of effort to do so, and in the worst case, they might just reject it. If you however manage to uncover those familiar patterns, that is usually done through research or investigation, then you can use them and create a smooth transition between the mental and the conceptual model. They're not going to be identical, and that's just fine. You will lose some of the old and add some of the new, but you'll have this familiar core to build upon. A good example for this is a registration process. You might have had this before. You download an app, and the first thing you get is a registration's screen to fill out all the information and sometimes even your credit card details before you have even seen a single thing. How did that make you feel? Imagine you're going into a store and at the door before you even enter, you're stopped. You're asked to fill in your personal details and give your credit card number. They're going to tell you they want to see it just in case to make sure it's all covered in case you later decide to buy. You'll probably find that a little strange and uncomfortable, and frankly said, just unnecessary. Because in your mental model it works like this, you enter a shop, you look around and choose a product. Once you have chosen that product, you decide to pay or register, in our case, in order to then receive your chosen product or service. It's a much more natural approach to prompt registration in an online shop once a user decided to buy or test something. To stay with our shop example, it's important to note that the mental model is not only strict behavior, but also social rules that we learned. If I enter a shop and the shop assistant is busy, then they will probably give me a quick nod or smile just to let me know that they saw me and they're just finishing what they're doing. In our online shop, this could be translated into a simple progress bar while our content is still loading. This is the same for forms that are already filled out, stuff that are placed into my shopping cart, and then went to look at something else. I expect that ought to be remembered just because in real life, I learned that it works that way. Also, make sure you use real-world language instead of technical terminology. Instead of click to submit, use something like, buy now. If your content is too precious, then at least give people a little peek. You see that with many news portals, you can browse the headlines, but to read further, you're prompted to buy a membership or pay otherwise. Surprise, like a real-life newsstand. Now it's important to note that using real-life conventions does not mean real-life mimicking. As you saw with our shop example, we only use the mental model. We do not recreate a shop in all its look and feel online. Also, makes sure that the chosen patterns are based on solid research and testing. I cannot stress that enough. Never assume that your understanding or mental model matches that of the user. Sometimes, however, you might have your reasons for throwing overboard those conventions all together, or your product might be so radically new that your research shows that there's not really a strong mental model to build upon. In this case, you're basically creating a new mental model. This is usually done through training. Training could be something really simple, like onboarding screens or video tutorials. That could be something really small or an intensive course. You will still be using elements such as the user's language, social rules, and certain embedded mental models. As usual, everything is possible, but you need to be aware of the path you're designing for. To sum up, use real-world references. Base you design on existing mental models. Real-world references does not mean mimicking the real world. If there is no underlying mental model, then make sure to train, educate, and onboard the user to create a mental model. 5. Jakob’s Law – Other Pages: Besides Realworld, other websites and apps are the main place where people create mental models about how things are supposed to be working. Jakob's law, coined by Jakob Nielsen, state that users spent most of their time on other sites, hence they prefer your site to work just like any other side they are already accustomed to. Let's say, I am asking you to find a person on Facebook or LinkedIn or any similar new community page. You have not used that page before, but you were probably still be looking for a search bar. You would roughly know what it would look like, namely a place to type and a button to call the search action. Sometimes, you might not even need that button because you already learned that you press "Enter" to activate search. Now, we ask your 90-year-old grandma to do the same. Chances are that you're more comfortable and much faster in completing the task as everything is already familiar to you. If all sites follow a certain convention, but you rake those convention in too many places on your page, then you're asking the user to commit quite a bit of time in order to figure out how things are working. Don't turn your users into a 90-year-old grandma for no reason. Let's have a look at a typical structure. Usually, we start with the header that contains information such as the logo and by the way, we learned, whenever we click on that logo, we get back to home. Besides that, the user will be looking for the navigation in the header, things like a search symbol, login buttons, buy now buttons, and checkout and, of course, they would be expecting things like changing the language for the whole page as a feature in the header. You obviously don't have to put all of this in your header if it's not relevant. If you're selling one little product somewhere on your page, then you do not need a Checkout button in your header. Sometimes, you might also see that people add a contact information or something to set up a video call to the header. If this is the main purpose of their business, then this is really important to have it in the header. You can play with it, but you should stick to the basic rules. Right below the header, we usually find an area called our hero area or our main intro. What that does, it communicates the main idea of your page. This is the space to really shine, explain your idea, product or service and you will also offer a call to action asking users to buy or sign up in this area. This is also the place to go wild. Here, you can be really creative. You can have videos, you can have animations, you can just have amazing imagery or text, but this is the place where your brand comes live. Below the hero section, you find the content. This is all the details, all the info, and everything that you want to tell the user about. Again, here we do follow Jakob's law still. That means if I have a text and I underline a word in the text, the user will assume I can click that and it's a link. If I show an accordion, I expect it to open and close. Forms, users will try to fill out and so on. My advice would be to stick to those basic rules of learned behavior, as well as established as solid visual hierarchy. Within these boundaries, you can really do whatever you want. At the very end of your page, you'll find the footer. The footer is always the last element. Here, you'll see how powerful Jakob's law is because users will always expect things like contact details or info they did not find in the header at the very end in the footer. Most of the time, they'll just scroll down to it if, for example, they're looking for your location. That's why adding Google Maps right on top of the footer is usually a good idea. This is also a great place where people look for links to pages such as job posting about section in case you didn't include that in your header and, of course, links to pages such as terms and conditions and imprint. Now, that doesn't mean that you cannot break or play with those conventions or invent something completely new. You even should break them otherwise, all pages would be the same. But do it with deliberation and purpose towards your users needs. Just moving your shopping cart and search bar at the bottom left might not be that revolutionary, but simply confusing. Before we finish, let's look at a real life example. Here, we have the Slack website and you can see that here is the header and for example, talk to sales and try for free as the main menu points. You can see, you can really bury that. Then here, we have our big hero sections where we see what Slack is, we get call to action again to try it or to sign in and as we scroll down, we get the content and we can see that it really nice animations explaining different features. Here, we have little tutorials how to get started, and we finish down here with the footer, where we have again, links to all the important parts of the page. Let's sum up. Users spend more time on other pages, hence, they expect your site to work just like any other. Use patterns that users are accustomed to. These patterns can be structural, like the page structure or the overall layout, as well as behavioral. For example, that buttons are clickable. Feel free to break those patterns, but do it with deliberation and purpose towards your users' needs. 6. Consistency Is Key: Consistency is a key principle of UX design. Consistency means that the same words, elements, and actions, must mean the same and follow the same conventions to be predictable and learnable to the user. There are two types of consistency in UX design: internal and external consistency. An example for an external consistency will be a learned convention in your field. Like in a shop, you would see a little shopping cart and expect to find your saved goods there. A button, you expect it to be clickable and actionable. A burger menu, to show you more menu options. Plus, as we know from Jacobs law, we did not only learn what they do, but we also learned where to expect them. Like the shopping cart and our burger menu, we would expect this to be found somewhere on the top right corner in our navigation. Now the internal consistency, on the other hand, deals with everything that we design within our own website and our own brand. For example, a button, you might have chosen a specific highlight color , in this example, we're using an orange as our highlight color, so we're teaching our users something here. We're basically linking the color to an action, so if you would now use this orange for a headline that is not clickable, it will confuse the user and we would also water down the strength of this signal color meaning. If you would however use it on a link within a text, that will make a lot of sense because that link is actionable and clickable. Across your page, you'll have many call to actions, so we need to make sure that they're consistent in look as well as in wording. We can also create a button as a primary button as you see here in our highlight color and a weakened secondary version for something that we still want to highlight, but is not our main priority. This consistency goes across all of your design and is usually set in the so-called style sheets in our design. This is elements such as color, typography, hierarchy and spacing, as well as general layout elements such as cards, icons, or images. This consistency guarantees that our user interface is predictable and learnable to the user. One could argue that this consistency is really something that's developed in the style sheets in our UI design and not UX. However, I strongly believe that this consistency and the system behind it must be core of your UX design. Let's summarize, same words, elements, and actions must mean the same. External consistency means already established conventions by the user. Internal consistency means the visual and functional consistency within your product. Make sure to create a design system containing relevant guides to define consistency in all areas. 7. Hick’s Law – Choice and Limitation: In order not to overwhelm the users, it's important to minimize choice. Hick's law states that the more choices offered, the longer it will take to make a decision. This decision time increases logarithmically. We obviously don't all have the same reaction time. It depends a lot on things like our IQ, if the page setup is familiar, or if we have even used it before. But in a nutshell, less is faster. Note that Hick's law only applies to fast decision making, things like picking a product out of similar products. If it is about in-depth decision making that involves research, such as what car you would buy or what university course you would take, then Hick's law does not apply. The other exception is ordered lists with known items, something like picking a country or a language. As long as it is in order, alphabetically or numerically, and familiar to the user, it will be easy to navigate as the user will be looking for a specific item. Hence, Hick's law does not apply. To avoid overload, always run your setup through this checklist in your head. Clean. Do I really need this item? Cluster. Group similar items together. Also consider that a group of similar items can be moved to a whole new page or a submenu page. Hide. Can it be stored away until needed, like in a Show All button? This concept is called progressive disclosure. A great example is pricing blocks. All unnecessary information is cleaned out, and you're just giving a few relevant options. We have a set of three different price ranges and within those ranges, we have a clear hierarchy. We obviously see the most dominant, the price, then we see some of the features included, and the call to action for each of them. Once you're interested in one of the offers, you can click the little link saying "more", and you'll be shown all the up to now hidden extra information. When talking about limiting choice, it might be tempting to just offer one. They can be define in some situations. However, choice, when presented in the right way and amount, also gives the user a feeling of being in control. A great example of reducing choice for mixed content that you might actually use quite a bit without even noticing is the three little dots. You'll find them in your browser, or a lot of times in articles or social media. If you click on them, you get more options that you probably not going to use all the time but are still relevant. Sometimes however, you might have a page where you need to include all the information and all the details. This might be because of legal reasons, or because it is a purchase such as a phone contract or opening a bank account, where you really want the user to be aware about what they're buying and to make sure they get the right one. This page is a great example about how this could be done. Again, I have no relations to this brand or page. I'm simply showing you this because I think the UX is excellent. Here, you can really see the principle of clean cluster and hide. You can see that a lot of what was cleaned away already here by making those drop-downs, and then it was clustered into those three models that we can choose from. Then down here, you can still see there's a lot of information, but everything was clustered really, really nicely, given a headline, and you can see that within each of these categories, there is no more than maybe five items. Then we have the third aspect of hide. This is a really great example of progressive disclosure, and you can click and you can see that it then gives me, once I'm interested, all the additional information I'm looking for. To sum up, the more choices, the longer it takes to make a decision. That does not apply to complex decision making, nor does it apply to ordered lists with known items. Always try to follow the clean, cluster, and hide method to optimize. 8. The Magic Number Is 4 !: How many things can we actually remember? Sooner or later, when working in UX, you will come across the so-called Miller's law that states, our working memory can, on average, hold seven items, plus or minus two. Well, not really. Actually, Miller's law is a bit of an urban legend. Psychologist Alan Baddeley, in 1994, reviewed Miller's work as he felt there's something odd. Surprised, he found that it was not actually a paper, but a talk by Miller that coined the famous law. It was more like Miller was thinking out loud about this theory he had. It was not based on solid research. Baddeley and some others, like Nelson Cowan, went back and did some more research. What they actually found was that the magic number was four. Four is the amount of things that an average person can store in their working memory. A good example of this is phone numbers that we usually group into threes or fours. Let's look at something more UX related. Here is a navigation and it has eight navigation points, so it looks quite crowded. According to Miller's law, this would still be okay. But let's be honest. It just is a little too much to grasp and remember. Let's see what happens when we apply our new rule. I broke it down to the minimum of points that I need for my navigation to be working. Now, I still ended up with five. It already looks much better, but I think we can still improve it. We could, for example, add some hierarchy. What I did here is I took out a contact and decided that this is my most important point in the navigation and made it into a call to action. By the way, when positioning those items, users tend to remember the first and the last item best. This is a finding not by me, but by Hermann Ebbinghaus, who called this the serial position effect. Sometimes you might not be able to strictly narrow things down to four. For example, if you are having a toolbar in a software. What you can do here as a great example is that you group them, add some whitespace, and also add some icons. Now in our example here, if you needed to add some more navigation points to the top layer, you could do this by adding some more here to the left with the logo, leave some space in the middle, and then have your navigation on the right. The important thing is there's some sort of structure or strategy on how they're grouped. In our example, however, I decided to add them as a sub-menu. It's also much clearer because now I have everything that has to do with service under one point. In that moment, the user can forget the rest of my first layer navigation and concentrate on this. Also, if I wanted to add some more navigation points later on, that would not be a problem and I would not have to change the whole setup of my navigation. If it becomes too long, I would, however, add some icons or some structure to give a better orientation. Let's sum up. Seven plus minus 2, called Miller's Law, is a bit of an urban legend. On average, our working memory can hold four items. Use visual hierarchy to create groups of maximum four. For example, whitespace or adding a call to action can be a good form of doing that. Adding icons or images might be a good solution for longer list items. 9. Page Positioning & Scanning Patterns: Research by the Nielsen Norman Group found that 80 percent of users only scanned any new website they came across. With eye-checking technology, different scanning patterns were identified. They depend on different factors, such as the content you're displaying, the user's background, and their knowledge. I would like to introduce you to some of those patterns today. You are not obliged to follow those patterns. There are other successful websites out there that use a completely different approach. You should, however, be aware of the patterns as they result in the familiarity, so it can be a very smooth way to introduce a user to your page, allowing more focus on the actual content as the overall structure is familiar. Before we start with the actual patterns is important to mention reading direction. When reading in a language that moves from left to right, users will also start to scan that way. If they read from right to left, then it's just a contrary. As most languages are written from left to right. This is the most popular approach online. It's also the language I'm most familiar with and design in, so I will use this one for my example. Nevertheless, if you are targeting another specific reading direction, make sure to adapt. Users usually scan informational passages with the so-called Z pattern, whereby they scanned from left to right, then go down and then scan again from left to right. Here is an example of a typical Z pattern. You'll find this a lot in hero sections. The important thing is to always end in a call to action. You will find many pages like this with a call to action on the left-hand side. Now you could interpret this as an extended Z pattern, a so-called zigzag pattern. But research suggests that because users expect the top left to be the logo and the navigation, it's often ignored on the first view so users focus right on the content. This could lead to something like this called the Golden Triangle. That you're using eye-checking technology, you're not going to know whether it's one or the other, but the important thing is that they're based on the same principle and they end up with exactly the same design. Also note that our scanning points are made up of text, imagery, and call to action a trio made in heaven. In text-heavy pages such as articles, however, we scan in the so-called F pattern. This means we start at the top again, scan to the right, but then go down, scan to the right again, but not as far as the first time, and from there on, we scan vertically. The F pattern is misunderstood quite a bit. It's not about scanning whole pages. It really is about pages that are really heavy in information, such as articles, especially on smaller devices like phones. The last but one of the most important patterns I'd like to show you is the so-called layer cake scanning. That shows a fixation on headings, subheadings, and imagery, so anything you make send out by visual hierarchy. According to Nielsen Norman Group Research, this is the most effective way for users to scan a page. Again and again, a good example about how UX and UI really go hand in hand. By entering this page what's probably going to draw your attention most is the large headline that will tell you right away what a topic is about. You'll also see a call to action that is in the highlight color so you can subscribe to something. Then you have a text with highlighted words. If you scroll, you'll get little blocks so they tell you there's UX principles, Figma, and code basics, and then as you scan along, you'll get more chunks. Here, for example, you get the chunks of the headline and then the revealed information. The way you're going to scan this is probably from the largest most prominent feature to the small details once you're interested in the headlines. Let's go through it step by step. What are the things that we can use to generate the scanning pattern and draw attention? Well, step 1 is to use strong headlines. This means strong headlines in wording, very clear and also in hierarchy like make sure there's a hierarchy that already defined in UX, what are the important things and what are the categories below? Only by scanning the headlines, I should already know everything that's happening on your website. The next thing is highlighting keywords. Also make sure that you use links, here, for example, that are descriptive. Don't do stuff like click here and then just underline to here really use the information and make it stand out. Use bullets, icons, and other graphic shorteners. Present a conclusion first, so-called inverted paragraphs. Make sure the user comes in and already gets the great benefit if they're still interested, they'll keep on scanning. To recap, our patterns, the Z pattern is for informational content, such as your hero sections, or the introduction, everything that's like quick and on one look and usually where you want a call to action. The F pattern is for content-heavy pages, but really talking here about articles, text-heavy information, especially on small devices like mobile phones. Layer cake scanning is really about how to structure your whole page from top to bottom and it's all about creating a hierarchy. 10. Feedback and System Status: Visible system status helps us to empower our users. The user should always be informed about what's going on and be given immediate feedback to any action. Think of it as an elevator button. Imagine you press it and absolutely nothing would happen. You'll press it again and consider it broken. However, simply by lighting up, you understand that your action was understood and the elevator is on the way, it's just going to take a little while. It is the same or even more so online. Every action needs a feedback. This feedback can be a visual feedback, like an audio feedback, a beep, a haptic feedback, that's like when your phone is vibrating, when you get a message, or it can be a visual feedback. System status feedback can be divided into four categories: constant feedback, possibility feedback, action feedback, and empowering feedback. Let's look at number one, constant feedback. By that, we mean feedback that is always communicated to avoid frustration or moment of surprise. Examples would be something like the Internet connection, battery life, or it might be the remaining time. Banks, for example, use this when you're logged in as they would lock you out automatically after being inactive for a certain amount of time. The second kind of feedback is the so-called possibility feedback. This basically highlights all the interaction one could have with the page. This is things like you hover over a link or a button and it changes color slightly to show that it is clickable. It could also be a whole box changing appearance like color or shadow when you hover, indicating a possible interaction. Or things like an input field that you can click or calendar icon when you hover over it, it would expand. The third form is classic feedback to action, like when clicking on a drop-down or on a button submitting a form. Whatever the outcome is, you need to keep the user informed. Possible outcome could be the following , indicating waiting time, like a loading bar or a countdown or something similar indicating that there is something happening but it just takes a second to be loaded. This is really important that you have that in the background, even if in your test things are super fast and there's almost no time for loading. This might be very different on other devices or other Internet connections. Another outcome might be that the action is completed. This might be obvious like a new pages is showing up or a drop down opened. But sometimes it's not that obvious, like when you're submitting a form. Then you would just need to show a short confirmation success message that can be as simple as a tick, or a well-done, or thank you. The third outcome is that something goes wrong. In that case, you need to make the user aware of it. You need to show an error message and they suggest a solution on how to solve this. Now the last kind of feedback is a little different, I will call it the empowering feedback. It basically means that at any stage we let the user know where he or she is, how to move backward and forward, and how to leave any situation. Examples for this could be a clickable breadcrumb indicating where we are. Also in a checkout or sign up, you will see highlighted steps of the process showing the user the current position. There's more psychological reasoning behind doing it in such a way and breaking everything up in smaller little chunks. However, it is also really great simply for orientation. Understanding what is going on at every step of the way not only makes your users feel in control, but also creates a sense of trust that gives freedom to explore your product further. Let's sum up. There are four main categories of feedback: constant feedback, this is something like communicating the current battery status, possibility feedback, I'm indicating a possible action to the user, like I'm showing which areas are clickable on my website, action feedback, commenting on a user's action, so this is once the user took action, filled in a form, clicked the button, I'm communicating success or error, for example, empowering feedback, where am I? Always showing clearly where the user is and how to navigate to any desired area. 11. Error prevention: Error prevention is one of the most important usability heuristic. It's often overlooked, but it makes all the difference. What are the common ways to avoid errors? I want to show you three categories. The first one is remind to prevent, the second one, suggestions and constraints, and the third one confirming actions. Let's start with number 1, remind to prevent. This means that before an error or an unpleasant result could happen, you give a little shout-out to your users. An example would be that your phone reminds you that your battery is running low way before it actually runs out. Also note that here, besides just going back and charging your phone, you're offered another solution, like putting it into a low-power mode if you're on the go. This one-click solution is really helpful and we will learn more about this when talking about error handling. Remind to prevent could also be something like a reminder that a class you signed up to is starting or that you have to confirm an appointment. Let's face it. Pop-ups are annoying, so you only want to use it if your user would otherwise lose access or miss out on something. Ideally, give users a chance to opt-in and out of such reminders. Number 2, suggestions and constraints. Without noticing it much, you'll be using this all the time yourself. Let's look at a simple booking example. As usual, I'm just using this example with no relation to the company. I'm just showing you some great real-life UX. What auto-suggest does, is really great when I start typing. Let's say I'm going to go to this place de Berlin, and I'm not quite sure what it's called, something like branden, and then I see already what it could be, so it's Brandenburg. Let's say I still type this in the wrong way. I put brandinbur and it will still work out what I'm looking for. This is really, really great because otherwise I would just have put it in, written it the wrong way, and then I would have ended up with no search results. The suggested results is something of a system that works in the background. You don't need to define what the suggestions are, but you need to design the space for them in your wireframe, and then make sure that design and development plans and test this feature accordingly. Let's pick that and move on to our next thing, which is the constraints. Now, a calendar is a good example for constraints. Because here I need to pick a starting date and an end date. Now my end date of the booking cannot be before my starting date. Well, this sounds really obvious. But to be honest, this is something where a lot of errors happen if you just let people type in the dates. We then just move on to the last filter they gave us and here you can also see that I don't need to type in just a number, but I can already filter. For example, if I would add pets, then it could automatically filter out all the flats where pets are not allowed. I'll only get the results that I can really work with. This is a really great example of a smooth user experience that prevents a lot of frustration later on. Our last one is confirming actions. By clicking a button you usually already confirming an action. However, there are action with larger consequences. So you want to make really sure that your user is aware of this action. Here, for example, I have the page where I host my website and they obviously don't want people accidentally deleting their websites. What they do if you go to the lead is they, first of all, call it Danger zone to make it pretty clear. Then if I click on Delete this site, they ask me to enter the name of the page that I'm about to delete. I click here only once I entered a name, I'll just call it my page test here. Then the delete button becomes active. Another example is sending something like newsletters where you would get a summary of what you're about to send and to how many people and then you would need to confirm. These dialogues are great but make sure to use them for very selective actions. Only use them when things can really go wrong and have a big impact. Now, in most cases, you can cover the obvious and prevent most errors. The ones that still happen, you can work on and handle them appropriately. But you might be designing products where error prevention is crucial. Like a finance product or even more so a health device. In that case, error prevention must be an absolute priority and you should have a clear strategy working your way down from areas where most damage could happen to nice to have or smooth usability. Fixes might be quite small but effective. Something like an alert saying, "Do you really want to transfer amount X if it's above a certain threshold? " It's also really effective to give users a summary to confirm before purchasing. This is what a lot of airlines do for example. This is not only nice for the user because they get an overview and don't book a wrong flight and need to handle all the stress of changing it, but it's also really great for the merchant because things like chargebacks and client handling is a very expensive and labor-intense task. Really map your error prevention as a team. Error prevention starts with a good UX. It's designed for in your UI and executed in development. You need to be in the same boat. Let's summarize. Use alerts to prevent errors, but only if users otherwise lose access or miss out. Be careful with that one. Use suggestions such as auto-fill and constraints to guide users and eliminate slips. Add a layer of confirmation when dealing with destructive actions or large marketing distributions. Create a hierarchy of error prevention for error-sensitive products, such as medical products. 12. Error Handling: Whenever possible, we will design to prevent errors. There is, however, no way to get completely rid of them. So let's plan for eventualities and help to recover errors. Error handling happens pretty much everywhere on your page, but forms, filters, and all kinds of input and interaction are the critical areas to look out for. I would like to introduce you to the three-step plan of error handling introduced by the Nielsen Norman Group. Step 1 is recognize, step 2 is diagnose, and step 3 is recover. Let's go through them step-by-step and start with recognize. I will use a simple sign-in form here for my example, but you can use this method on pretty much anything to handle errors. Note that the form is already set up in a way to prevent possible errors. For example, I'm already showing at the email and what format it would need to be entered. But let's say that the user still types in an error. Step 1 is now to recognize this error, meaning I clearly inform the user that an error has happened. There's different ways that you could do this, and it's actually recommended to combine more than one signal of error recognition. In my example, the outline not only becomes red, but it becomes slightly thicker. I'm also adding an additional warning icon. Why? Because even though red, for most of us, is the most obvious sign of an error, we must design also for people that might not see color. Hence, the field border thickness changes and I added an alert icon. Step 2, diagnosing the error. In this step, I need to clearly tell the user what actually went wrong. So I'm saying the email entered is not correct. It's very important to use plain and simple language in this step. However, I can still do better. Let's see what we can improve with step 3. Recover means, instead of just telling the user, this is wrong, I can tell the user, hey, why don't you solve it like this? So my error warning could be something like this. Email must include an @ symbol. Once the user sorts the error, our error message would disappear and we can even add an extra little tick to show that now everything is working well. Another area every page must have for error recovery is the so called 404 page. If you're new to this, 404 is a default page that users get sent to when clicking on something that does not exist anymore, like a dead link or if they enter an incorrect URL. It works after the same three-step principle. One, recognize, your page was not found. Two, diagnose, and that is not so crucial here because it goes a bit hand in hand with recognize, but you could say something like the page you're looking for does not exist anymore or was moved. Three, recover. This is really important. Always show your menu on the top, so users can navigate back to wherever they want to go or also offer a call to action that brings users back to your homepage. There's also really funny examples about 404 pages out there, like this cute one here by Pixar. As you can see, you can be creative with it. Keep it simple, but make it your own. Let's summarize. Errors will happen so make sure you design appropriate error handling. Use the three steps of error handling. Recognition, there is an error; diagnose, what is the error; and recover, how can I get back on track? Try to use more than one way to identify errors. For example, color alone is not enough as not all users might be able to see it correctly. Don't forget your 404 page. 13. A Word About Dopamine and Ethical Design: How you set up your design to trigger dopamine release actually plays a major role. Let's find out a little more. What actually is dopamine? I will explain this very briefly and simplified because as you can imagine, there is enough material for a PhD or actual several PhDs when it comes to dopamine. Dopamine is a chemical produced by our brains that plays a major role in motivating behavior. Dopamine gets released when, for example, you eat comforting food, finish a task, have a rewarding social interaction, or accomplish something. Is this good, happy, or rewarding feeling you get? Dopamine makes you desire things and it makes you want to repeat them. Pretty much everything you do releases dopamine, even brushing your teeth. But it's the level of dopamine that makes a difference. In short, the more dopamine your brain expects from an activity, the more motivated you are to do it and to repeat it. When it comes to UX design and dopamine, there are three main areas of interest to us. One is celebrating little wins, two is completing a task, and three is the so-called reward prediction. Let's start with the obvious. There is no area to show the effect of dopamine in UX better than social media. Cognitive neuroscientists have shown that rewarding social stimuli, such as laughing faces, positive recognition through likes and messages, gives us almost a rush of dopamine. Every like on social media is like a little win and releases dopamine. People can get really addicted to it. Also, the endless scroll of images on Instagram, for example, leaves you with this craving of completing the task and wanting yet more and more dopamine. Research in reward learning and addiction also shows a pattern called reward prediction. Something that actually was used in casinos and is now used more and more online. When we get an unexpected reward, we get a high dose of dopamine. We also learn that in certain situations, there is the possibility of that reward and we start anticipating. Actually brain scans research has shown that anticipating a win stimulates our brain more than the actual win. It's that famous moment in a roulette game when the bowl circles before making the win. You can see that in a lot of movies, they put it on a slow motions to extend that feeling of anticipation. Now what happens is that you already get the dopamine in the reward phase while playing the game and not even winning yet. If you lose too many times, however, dopamine drops and you stop. Slot machines, for example, are designed in such a way to keep you just hooked in this sweet spot between anticipation, loving, and winning, just enough to carry on. Now, many apps use the same pattern to keep you engaged. If we think there might be a random reward, we keep on coming back for more and more. For example, the little bubble on your chat message does just that. We pick up our phones all the time because we know eventually this little being and this little bubble will be there. Some social media apps even have an algorithm that withhold likes. You get irritated, keep on checking, and then it feels amazing when they all get released suddenly. You hold this anticipation like with the slot machine and then boom, comes your price as an influx of social appraisal. Sounds all a bit scary? Yeah, I think so too. When the product is designed in such a way to trick the user, then we call that dark UX or dark patterns. There's more examples such as hiding costs, default tick boxes, etc. Why am I telling you all of this then? Well, because you as a UX designer can also play a part in how products are built. It's great to know and even important to know what makes the users click, because then you can use it appropriately. There's a strong movement now calling for so-called ethical design. I strongly recommend that you dig a little deep into that topic and find the place where you feel comfortable. Here are some free resources; humanebydesign.com, humanetech.com, and darkpatterns.org. As usual, I have absolutely no relation with those pages whatsoever. I just find they have very valuable content to be shared and they're absolutely free to start your research. You will also see that you can use a dopamine effect in very nice ways just to make little tedious tasks just a little bit nicer. Let me give you an example. It is not as spectacular as Facebook or Instagram, but very effective. When we give feedback like error feedback, it's usually negative feedback like something went wrong here. There is, however, a lot of power in the positive feedback. For example, getting all the rules about passwords right, is really annoying. Usually, you type one and then you get an error for forgotten symbol or word too short, you name it. This is a very clever way of solving it here. By giving immediate positive feedback whenever you fulfill one of the requirements, users feel accomplished and the process becomes much smoother. You're basically creating tiny versions of likes. Let's sum up. Certain UX design can trigger dopamine release, mainly through celebrating little wins, completing a task, and reward prediction. Dopamine motivates the user to come back for more. Positive feedback is a great way to help the user through necessary but tedious tasks. Consider ethical design solutions always. 14. Course Material Download: You may want to work alongside me, so I prepared some files for you to download. In the course, you're taking simply navigate to Project and Resources, and there you'll find all the information and the link where you can download the material. Or you can navigate to my profile where you'll also find a direct link to the download page. In this page, you'll find a variety of downloads. You can simply pick the course that you're currently taking and then just click "Download" and it will automatically download the file for you. To open a Figma file you downloaded, it's important that you have a Figma account. Inside your account, navigate to new and press "Import", you can then choose a file that you would like to open. It might take a moment as they're quite large but once you imported them, they will be on your account and you do not need to repeat this process. I am working with Google fonts for most of my designs so if you're working with the Figma app, then you don't need to do anything. All Google fonts are preloaded automatically. If you want to work with Figma in the browser, then you just need to search the font that it's showing you as missing for example Poppins I use a lot, and then you can directly download this font, install it on your computer and you're ready to go. All resources are free for existing students and you do not need to enter any additional information. You can of course also download any of the other files in case you're interested, so under general I always add anything that I think might be useful so there is for example, a Bootstrap template and then a list with links for inspiration, books and blocks that are really great for UX UI design. This list of downloads is steadily growing, so make sure you come back and have a look from time to time. 15. --> EXERCISE: Co-working space wireframe: Let's put all this theory into practice. I prepared a Figma file for you. In this file, you'll find the exercise when you open it on the first page. Our exercise is that we're going to build a wireframe for a small open office co-working space. In the brief, you will find an overview of the things that they offer, so things like the pricing and different sections that the client wants. Now in real life, we would obviously have much more research personas, in-depth information, especially about the users before starting the wireframe. However, this is an exercise to really just put your principles to use so we will take a shortcut and I'll give you all the information in the brief, and we will just take that for granted right now. You can also see a first setup of a wireframe for the project that, however, our client was very unhappy with because the UX was not right so we're here to improve the UX of the given wireframe. As we don't have any other research results, we're purely going to rely on the principles that we have been learning about today. Feel free to reshuffle, add, delete, move around, or start completely from scratch. Really try to make this into a first draft that you could go back with to the client to discuss and start some testing. On the second page in the file, you'll find the solution that I prepared for you. Now it's important to note that there is never such thing as one perfect solution in design. The solution you came up with might be just as good or even better than mine. What I'm providing you here with is just an inspiration so you see how I would handle those problems and solution that I am suggesting. You can really take this as critical or as curious as you would like to. 16. Part 2: UI Design : If you enjoyed this course and the exercise, then I recommend that you jump right into the second part of this course here on Skillshare, simply look for moon learning and you'll find all the courses. You will find at the very bottom the UI design course, which is the second part of the UX UI intro. In this class, we're going to bring alive the wireframe that you were just building and learn about all the principles of UI design. 17. Thank You: Well done for finishing this course. Feel free to reach out to us at moonlearning.io. We're always interested in hearing your feedback. You will also do us a great favor if you could just take a minute and leave a review right here. If you enjoyed this course, then also make sure that you have a look at our additional courses. At moonlearning.io, we cover all subjects from the very foundations of UX/UI design through to Figma and even some code basics. Make sure you visit our website moonlearning.io where you can also sign up to our newsletter.