All language subtitles for 099 User Experience (UX) Design.en_US

Now, so far we've talked about the three pillars of web design: Color Theory, Typography, User Interface

design and now I want to talk about the last pillar, User Experience design.

Now a lot of people often get confused about what exactly is UX or User Experience?

And one of the best ways I've heard it explained is through the story of the renovation of a college.

So this is a picture of Reed College in the US and let's just use it as our imaginary backdrop.

So this college decided that it needed to undergo serious renovation. Tearing down the buildings, building

new ones and completely reform the campus.

So they invited this well-known architect who is very respected in his field.

He came and he did a great job with all the buildings and the provost was really really happy.

He was like "This looks great."

But he had one question.

"Hey Mr. Architect. It seemed like you've just left lawn across the entire campus. Where are all the path that

people are going to walk on to get between the buildings?" At this point

the architect says "Don't worry. I'll come back in a year and all will be revealed."

So in a year the paths where people need to naturally walk becomes trotted down and the grass gets worn

down revealing these paths that people need.

And it's at this point when the architect actually lays down all the tiles and paves these paths.

So this is kind of the difference between user experience and design. Design

we often think of having an aesthetic, what we think looks good and enforcing that on the user.

Now user experience is meant to be invisible.

If you have a good experience with a website it's meant to be unobtrusive and it just lets you do your

thing and it feels like as if everything is easy and everything is effortless.

So this is what we're aiming for.

And in order to do that we have to think about again five things.

The first is simplicity. Keeping things simple is always better than making it more complex or more cluttered.

So this is a website called Sina and it's one of the biggest News websites in China.

Now every time I look at it though I get a headache because it is just so dense.

There are so many links and my brain gets overwhelmed and I say "Nope, can't do it."

So take a look at this alternative.

This is Monocle, which is also a News website.

But look at how they've managed to chop up the content, provides some interest for the eyes.

There's a little bit of dialogue, some images, some videos, a little bit of text.

It's never overwhelming.

And with that consistent color scheme and typography, it's really delightful to actually read rather

than this experience of sort of hurting your eyes with design.

This is a much nicer user experience because it's simple.

So whenever you're having to choose, should I make it more complex or should I make it more simple,

always try to pare it down.

The second point is consistency.

Keep your designs consistent but also keep the functionality of your product consistent.

So here's an example.

This is the webpage for Xfinity. Xfinity is a really big communications company in the US and they

are responsible for various things like providing TV and providing internet.

Here are three screenshots from various parts of their website.

One is their home page,

the second is their TV offerings and the last one is their News site.

And if you take a look at the top navigation bar not only do you see that they've changed up the design

of the navigation bar between the different parts of their website,

they also made it work a little bit differently.

The buttons are not all in the same place, the search bar moves around.

And that inconsistency means that a user is going to be confused when they go from one part of the website

to another, having to re-learn how to use your website.

If you think about the target audience of this company Xfinity, a lot of them are going to be a little

bit older right?

And having this inconsistent functionality and inconsistent design will really make those users have

a bad experience with this website.

Now the next thing to think about when you're designing your website is to take into account people's

reading patterns.

Now they've looked at how human eyes track a webpage and which parts they look at when they're browsing.

And one of the most common reading patterns is what's called the F-pattern where the eye starts at the

top left of the corner and then it tracks the right and then it flips back again

browsing down the left gutter.

So you have often things like bullet points or pictures or icons, buttons, they're all on the left.

So you can design for this by using the F-layout.

So have the most important parts of your content on the left gutter, have the logo at the top and have

everything follow this pattern.

For example like this website for Bigcommerce.

See how the eye is being naturally accommodated going from left to right.

Now another really common pattern for reading is the Z-pattern where our eyes go from left to right and then

zigzagging down all the way the website.

Now this of course depends on the type of website.

So you have something that's more sparse with more video content or if somebody is trying to browse

a website a little bit faster,

you see them using this layout. And this layout is used pretty famously in the Facebook website

using that Z-pattern to accommodate for people's natural reading pattern.

So have a think about this. Have a think about how people naturally looks at the page and place your

content in that pattern to make it easier for people who are using your website.

Now in today's day and age, it's really important to think about All Platform Design.

It's not enough anymore to just design a website that's meant to go into a desktop computer.

Instead you have to think about mobile as well.

So having a website that scales up nicely onto mobile, what we call mobile responsive, is really important.

You don't want a big website that's designed to take up a landscape kind of screen to be crammed into

a phone

that's actually more like a portrait shape.

This looks really bad.

It's very hard to read the individual links and, more often than not, my fingers are actually too big to tap

onto the length that I want.

So this is a really bad user experience.

Now this can happen the opposite way as well.

So a design that looks much better on mobile but then when it's rendered on a desktop with a wide kind

of screen, it doesn't use up enough of the screen real estate. For example,

this is the Facebook latest redesign of their website.

And you've got all of this empty space that's not being used at all and everything is crammed into the

middle.

This is not very efficient. So have a think about how you're using the available space and make sure

that your website rearranges itself when it's being rendered on a portrait smaller screen vs. a larger

desktop screen. And try to avoid one of my pet peeves in terms of design which is having so many banners

on your website that show up on the mobile version that your content becomes impossibly small.

And even when you're scrolling it's like you're scrolling it on an Apple Watch or something.

Whereas all of this extra content is taken up by warnings and banners and cookies and it's just not

a very good user experience.

But on the other hand, don't go crazy either.

Don't make your entire website just one part like a picture or a piece of text scaling it up massively

like this is also very very awkward because then I have to just keep scrolling until forever before

I can actually read and take in all of the content.

So strike a happy medium.

And most importantly test, test, test.

Give it to other users.

You can employ professional testers to try out your website and give you feedback.

Now if you can't afford that, just use your family and friends. And bake some cookies for them,

get them to test out your website and start getting some feedback on how you can improve the design.

Now finally we've talked a lot about user experience and how to get people to have a good time.

Now some designers though use the knowledge they have about human psychology and User Interface and

User Experience design to do bad things.

And in the design world, we call these dark patterns. So patterns which get a user to perform an action

or behavior that is beneficial to the company or the designer

but it's not necessarily what the user wants.

And this I would say is another form of bad user experience.

So let me give you some examples.

This is a real life example. Let's say that you walked into Waitrose which is a big supermarket in the

UK and you bought yourself a sandwich.

Now when you look at it at the point when you're buying it, it looks like this sandwich is going to be

full length from edge to edge

right?

But then when you rip open the packaging you're disappointed when you find that actually all that's

in the middle is just air and your sandwich turns out to be a lot smaller than you initially thought.

It is the worst feeling in the world.

This is a feeling that I can't stand when my food suddenly gets reduced in size.

It's like as if somebody came along and took food out of your plate. In the digital world,

people do the same thing. The same kind of trickery that's meant to get you to perform an action that

you don't necessarily want and you end up feeling really disappointed and really upset. With Amazon every

single time

I have to re-click the free delivery button which I've earned by buying so much product from them.

But they still try to trick you using the things that we've learned about hierarchy

for example. Here the button that makes the more money "Express delivery" is highlighted in orange.

It pops out a lot more.

It's a lot more likely that you'll want to click on it.

But in all likelihood, you're probably happy with just normal delivery and you're now tricked into paying

more for this delivery.

Now here's another example

that's actually true the evil.

This is a Snapchat ad for some shoes.

But what the designer has cleverly done on the advertising is they've placed a one pixel curved line

on this ad which makes it kind of look a bit like a hair is on your screen. But when you go into that

screen and you try to get rid of that piece of hair, well you've tapped on an avenue.

So the ad takes you to the website and the advertisers make money off each click.

And this is truly a dog pattern because it's just tricking you to do something you didn't want to.

Whereas good design is about helping people do what they want to do and giving them a good experience

while they're at it.

Now the king of dog patterns is RyanAir and it's a low cost airline in Europe which is really known for

sort of charging you for every single little thing.

I wouldn't be surprised if tomorrow they suddenly charged you for using the toilet on the plane.

But here's what the website looks like when you tried to buy an airplane ticket. In order to buy your

airplane ticket you have to go through all of these extra add ons including saying "No I don't want to

buy travel insurance." But look at how they've hidden it inside this big dropdown list and it's not even

at the beginning of the list.

It's actually sorted alphabetically below Denmark for some reason.

And this just makes it so much harder for you to find that option

and for you to actually accidentally end up buying travel insurance.

Now the final example and probably one of the dog patterns I dislike the most is these checkboxes. You

know right below you filled in a form,

you get these checkboxes and sometimes the wording is so confusing that I really don't know what I'm

signing up for.

Like this one: If you would like us to no longer continue to stop not sending you special deals and offers

every week, please indicate you are inclined to yes

by not checking the box. I have no idea what clicking that box does.

I really just... I don't know.

I might click it, I might not.

I don't know what it does. But it's horribly confusing and it's not a good user experience at all.

I will bet you that after I sign up I'm never going to come back to this website again

right?

Are you with me? Now

we've seen what good websites look like.

We've seen what bad websites look like.

We've even seen what evil websites look like.

But it's time to put our knowledge to the test by designing our own website from scratch and applying

these four pillars of web design to this project.

So have a think about what you've learned so far and head over to the next lesson where we're going

to design a hotel website from scratch.