Original subtitles

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

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

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

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

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

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

new ones and completely reform the campus. 7

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

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

He was like "This looks great." 10

But he had one question. 11

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

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

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

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

down revealing these paths that people need. 16

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

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

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

Now user experience is meant to be invisible. 20

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

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

So this is what we're aiming for. 23

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

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

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

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

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

So take a look at this alternative. 29

This is Monocle, which is also a News website. 30

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

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

It's never overwhelming. 33

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

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

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

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

always try to pare it down. 38

The second point is consistency. 39

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

So here's an example. 41

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

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

Here are three screenshots from various parts of their website. 44

One is their home page, 45

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

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

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

they also made it work a little bit differently. 49

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

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

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

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

bit older right? 54

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

a bad experience with this website. 56

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

reading patterns. 58

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

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

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

browsing down the left gutter. 62

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

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

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

everything follow this pattern. 66

For example like this website for Bigcommerce. 67

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

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

zigzagging down all the way the website. 70

Now this of course depends on the type of website. 71

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

a website a little bit faster, 73

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

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

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

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

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

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

Instead you have to think about mobile as well. 80

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

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

a phone 83

that's actually more like a portrait shape. 84

This looks really bad. 85

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

onto the length that I want. 87

So this is a really bad user experience. 88

Now this can happen the opposite way as well. 89

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

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

this is the Facebook latest redesign of their website. 92

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

middle. 94

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

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

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

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

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

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

a very good user experience. 101

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

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

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

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

So strike a happy medium. 106

And most importantly test, test, test. 107

Give it to other users. 108

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

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

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

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

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

User Experience design to do bad things. 114

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

or behavior that is beneficial to the company or the designer 116

but it's not necessarily what the user wants. 117

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

So let me give you some examples. 119

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

UK and you bought yourself a sandwich. 121

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

full length from edge to edge 123

right? 124

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

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

It is the worst feeling in the world. 127

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

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

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

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

single time 132

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

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

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

It pops out a lot more. 136

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

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

more for this delivery. 139

Now here's another example 140

that's actually true the evil. 141

This is a Snapchat ad for some shoes. 142

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

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

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

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

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

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

while they're at it. 149

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

sort of charging you for every single little thing. 151

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

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

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

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

at the beginning of the list. 156

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

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

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

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

know right below you filled in a form, 161

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

signing up for. 163

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

every week, please indicate you are inclined to yes 165

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

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

I might click it, I might not. 168

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

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

right? 171

Are you with me? Now 172

we've seen what good websites look like. 173

We've seen what bad websites look like. 174

We've even seen what evil websites look like. 175

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

these four pillars of web design to this project. 177

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

to design a hotel website from scratch.