Original subtitles

Welcome back to our next lecture.

And in this one, I want to give you a quick introduction

to the field of User Experience design

or UX design for short.

And I say introduction, because UX design

is actually a huge field with many designers

actually being specialized, UX designers.

And so in this lecture,

we will really just scratch the surface of UX design.

But still, I believe that all web designers

should at least have some idea

of what UX is actually all about,

why it's important and of course also

how we can improve the User Experience of our interfaces.

And to start, let's try to understand

what User Experience actually means.

And to do that, we can use a very popular quote

by Steve Jobs which is,

"Design is not just what it looks and feels like,

but design is how it works."

So here, what it looks and feels like is basically

what the User Interface is all about.

So the User Interface is basically the visual presentation

of any digital product.

And so therefore it's all about the layout of the design

as well as the typography, colors, icons,

and other design elements that we use.

And in the end, it's also about the overall personality.

So, kind of a feel and the vibe that we give to our design.

So that is what the part of, "Looks like

and feels like", is all about.

It's about the User Interface.

But then Steve jobs actually said

that, "Design is how it works."

And so that, "How it works,"

is what refers to the User Experience.

So in a nutshell, User Experience is simply the experience

that a user has while they interact with a product.

And so when we think about and design the User Experience

of a product, we ask questions like,

does the application feel logical and well thought out?

Or does the navigation of this app work intuitively?

Or even questions like,

are users actually reaching the goals

that they wanted to achieve by using this product?

And of course that again only really scratches the surface.

There is a lot more to do when we think about,

and when we design the UX.

And speaking about design, let's now talk a little bit more

about User Interface and User Experience design.

So as designers, we can of course design

both the User Interface and the User Experience.

So if UI means the user interface,

then UI design is essentially

what makes an interface beautiful.

And in the same vein, if UX is the User Experience,

then UX design is what makes

an interface useful and functional.

That makes sense, right?

And so this is what this lecture is all about.

It's about learning some rules to design interfaces

that are easy for your users to use.

Now, there is this strange analogy of UI versus UX,

where the UI is supposed to be this glass ketchup bottle,

which is aesthetically pleasing,

but doesn't really work in many situations.

On the other hand, UX is supposed to be represented

by the newer plastic bottle that is easy to squeeze.

So the one that is easier to use.

However, if we actually think about this,

this analogy, doesn't make a lot of sense.

Because in reality, both of these bottles

can actually be called a User Interface

because they're both interfaces for the user

to get some ketchup, right?

They do however, create completely different experiences.

And I'm sure that you too have experienced this kind

of situation here at some point in your life

when you used this kind of ketchup bottle.

And also you might've felt how easy it is

to just squeeze the plastic bottle.

So again, both are actually a kind of the User Interfaces

but they do create completely different experiences.

One is more pleasing and the other one

is many times a lot more frustrating.

But I think that this is actually a nice example

of how different User Interfaces

can create completely different

experiences for the user.

But anyway, comparing UI design and UX design like this,

so by comparing these two bottles

and saying that one is UI, and the other one is UX,

doesn't make a lot of sense anyway.

Because UI design, is actually already

a big part of UX design.

Or in other words, UX design

can really not exist without UI design.

Because a well-designed User Interface

is already contributing a lot

to a good experience for the user.

And in fact, many of the things

that we have talked about in earlier lectures

are actually also part of creating a good User Experience.

So again, it's not just about visual design,

but really creating an experience,

which has both the User Interface in mind

and the experience for the user.

And so here again, you can see

that UX and UI are really deeply intertwined.

And so it's actually quite hard

to separate these two topics completely.

Now, when we think about and design,

the User Experience of a product,

it's always all about goals.

So a website or an application exists for a certain reason.

So a user has a certain goal for visiting a page

and the business has a certain goal

for creating that page in the first place.

Because if neither the user

or the business would have a certain goal,

then there wouldn't be the need

for that page to actually exist in the first place.

Right?

And usually the goal of the user is

to simply use a certain product,

to find some information or to buy some product.

While many times the goal

of the business is to sell something,

No matter if it's an actual product

or simply selling advertisements.

And this is extremely important because basically all

that UX design is for, is to align the user's goals

with the business goals.

Or in other words, the goal of UX design is

to fulfill both the goals of the user and the business.

So, as an example, let's say that the goal

of a certain user is to design websites faster.

And the goal of some other business is

to sell design kits for design tools,

such as Sketch or Figma.

And so here, good User Experience design

will design a product that makes it really easy

to both the user and the business to fulfill their goals.

So in this case to create a transaction

between the business selling some design kits

so that the user can design their websites faster.

Now, one extremely common example

that you will see all the time

is to highlight one option in a pricing table like this.

And the designer does that because

it makes it easier for the user to decide

which is the best option to choose.

And on the other hand,

it helps the business maximize their revenue.

Because usually the option that is highlighted

is the most expensive one, or also the one

that they know will sell the best

and make them the most money.

So again, here, the user has to goal

of quickly deciding which is the best option.

While the business of course,

has the goal of maximizing revenue.

And so here, the user's goals seem

to be aligned with the business goals.

So this I would say, is good UX design.

And finally, another UX example that many companies use

to maximize revenue is to use a pop-up form

in order to capture users' email addresses.

Now this does help the business' goal,

but in many cases, it actually makes

for a really bad and annoying User Experience.

And it many times also doesn't help the user reach his goal.

And so in this case, the goals are very clearly not aligned.

Now, this doesn't mean that you can never use pop-ups

but you have to be aware

that it's actually not good UX design.

And like this, there are of course,

countless other examples of bad UX design.

Such as hiding a button to cancel a subscription

on some page that is almost impossible to find.

But anyway, I think this is enough theory

on UX and UX design.

And so let's now go over some practical UX guidelines

that had no real place in previous lectures.

And the very first one is that you

should not create over complicated layouts.

So there is no need to reinvent

the wheel like this, (chuckles), for example.

Instead, you should use patterns

that users are already familiar with

instead of trying to be original.

So, there's absolutely no need to be original

because creativity is quite overrated in web design.

Now creativity might be important for the top 1% websites,

or if you want to win some award.

But the everyday designer like you and me

should simply use patterns that are used

on most of the websites out there.

So there's absolutely nothing wrong

with using well established patterns.

Because remember a website exists

because users want to reach a goal.

And so if a page looks familiar,

it will help the user navigate to page faster

and therefore they will reach their goal faster as well.

Now, as a result of this, many websites

do look the same or are quite the same.

But again, there's actually not really

anything wrong with that.

So familiarity with your layout

is way more important than being original.

Okay. Never forget that.

Next up, always make your call to action,

which is usually a button,

the most prominent element on the screen.

Here, for example, the reserve button

is quite difficult to find and so this will create

a frustrating experience for your user.

On the other hand, here of course,

it is pretty clear how you can reserve a booking.

So all you have to do is to click this button.

It is really clear because the button really stands out.

It's really prominent.

And so, that's basically also what we learned

in the lecture about visual hierarchy, right?

Also make sure that the button describes exactly

what will happen when user clicks it.

Because this will once again, make sure that your users,

can reach the goal faster and more easily.

Now the next rule is a very simple one,

which is that you should use blue text

and underline text only for links.

So that's super important because users are so used

to the pattern that links are blue or underlined like this,

that you will really confuse them

if you ever used underlined or blue text

anywhere that is not a link.

So in this second example,

that blue and underlined United States text there

very clearly looks like a link to you as well, right?

But well, here it is actually not a link.

And so this is very confusing and frustrating.

And so don't do that,

Next up, if you use animations in your design,

make sure that they actually have a purpose

and that they are fast.

So don't use animations just because you can,

because that might leave users confused.

And many times it simply doesn't look professional.

Also make sure that your animations are fast,

like between 200 and 500 milliseconds.

Because otherwise your users will perceive the interface

as being slow and sluggish.

So no one wants to wait for some animation to finish, right?

Just take a look at this image here, fading in

for two whole seconds.

That looked really sluggish, right?

Like, not professional.

On the other hand, the next animation

only takes 0.4 seconds.

And that looks just right if you ask me.

So, follow this rule whenever you do want

to place animations in your design.

Next up, when you design a form,

it should be very easy to scan.

And so in order to do that, you should align your labels

and fields in one single vertical line,

just in this example here.

And another one about forms is that

you should always offer good feedback for all the actions.

So whatever happens after a form is submitted,

should clearly be stated in your interface.

Because otherwise that might be very frustrating.

So for example, if this form here

would successfully send an email,

the user would expect to know that by the end, right?

So you should display some kind of banner

saying that your email has been sent.

You should not just leave your user hanging and wondering

if the email was actually sent successfully or not.

And the final rule for usability of your interface is more

about web applications, which is the law of locality.

And what the law of locality says is that,

basically whenever you have a button for a certain action

in your user interface, you should place that button

wherever that will actually create an effect.

So in this example here, which is a simple to-do list.

A new task will be added to the end of this list.

And so therefore that is where the add task button

is actually located.

So this is what good UX for an action

in a web application looks like.

While bad UX design would be something like this.

So having a button in a completely random place,

which will then create an effect

that is completely detached from the buttons location.

Now, of course, this doesn't really apply

to the typical call to action buttons

that we have on something like marketing websites.

But I still find it important

to mention these rules here anyway.

Now, if you want to know even more like this,

then please just let me know

in the Q and A area of this video.

But now we're actually quickly gonna move on

to some UX rules for the actual content of a website.

And that's super important because the actual content

is yet another area that really influences

the way that users use your website.

And so therefore we really need

a couple of rules for creating content

that creates a good User Experience.

And first of all, what you should do is

to write a very descriptive headline on your main page,

which focuses on the keywords that best describe

what your business actually does.

So as always, here are a couple of examples of that.

And if you read through these headlines,

you will see that they actually really tell you

what the business is all about all in one sentence.

Now, many websites are actually way too vague

or even too fancy here.

And so please don't do anything like this.

So for example, if you just read the headline

of this website, which says,

"Join the solar energy revolution."

Well, what would that business really be about?

So again, the main headline of the website

should really, really convey what the business does

or what the website is all about.

Because once more, this will help your users

reach their goal faster.

Because how can they reach their goal

if they are not even sure what the website is all about

or what the business even does.

Now, when you're actually deciding

about the content of your website,

make sure to only include relevant information

and also to present it in an efficient way.

So cut out all the fluff that you don't really need,

like irrelevant images, text, illustrations,

buttons, and so on and so forth.

So everything that makes it onto the page

should have a very clear purpose.

And these two websites here

actually do that really, really well.

So you can pause the video and check them out if you'd like.

Now, the reason why this is so important is that

every time did we add an additional piece of content

to the page, it will compete with all the other information

that might be actually more relevant.

And so in order to help your user understand

what the product or the service is all about,

make the content 100% clear and relevant.

Now this doesn't mean that your website

needs to be like super minimal

and completely stripped down to the bare essentials.

But just make sure that you don't include any fluff content

that doesn't really add to the overall message

that you're trying to convey.

In following the same line,

you should also use simple words for the actual text.

Everyone prefers to read text that is simple.

So avoid complicated and smart sounding words.

And even more importantly, avoid technical jargon

that might be relevant in your particular industry,

but that your users might not even know about.

So some people think that doing this makes them sound smart

or knowledgeable in their field,

but really what it does is to confuse your users.

And you don't want that.

And now finally, because I know

that you're probably tired of listening to me.

So the last one is that if you have a long text,

then make sure to break up that long wall of text

using subheadings images, block quotes, bullet points,

and other things like that.

And doing this is important because it will make the text

actually look more interesting to read.

If the user sees just one big wall of text,

you can be pretty sure that they are going to just skip it.

But if you do something like you see here on the right side,

then that looks way more interesting.

And so I believe that there will be a

way higher user retention on this content.

Okay. And that's actually it for this lecture.

I hope that you found it useful

and that you learned a couple of things

and especially new things

about this huge field of UX design.

Again, we really just scratched the surface here.

But this would be enough

for a new aspiring web designer like you.