Instructor: 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 it 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, the 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 have felt how easy it is
to just squeeze the plastic bottle.
So again, both are actually a kind of 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 the 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 popup form in order
to capture user's email addresses.
Now, this does help the business's 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 popups
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 overcomplicate 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 one percent websites
or if you want to win some awards, 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 the 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 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 the 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 use 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
that UX design would be something like this.
So having a button in a completely random place,
which would 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&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 post the video and check them out if you'd like.
Now, the reason why this is so important is that every time
that 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.
And 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 sub-headings, 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 should be enough
for a new aspiring web designer like you.