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.