WEBVTT 0 00:00.540 --> 00:08.040 Now, so far we've talked about the three pillars of web design: Color Theory, Typography, User Interface 1 00:08.040 --> 00:13.600 design and now I want to talk about the last pillar, User Experience design. 2 00:13.740 --> 00:19.520 Now a lot of people often get confused about what exactly is UX or User Experience? 3 00:20.460 --> 00:27.720 And one of the best ways I've heard it explained is through the story of the renovation of a college. 4 00:28.410 --> 00:35.640 So this is a picture of Reed College in the US and let's just use it as our imaginary backdrop. 5 00:35.640 --> 00:41.550 So this college decided that it needed to undergo serious renovation. Tearing down the buildings, building 6 00:41.550 --> 00:45.500 new ones and completely reform the campus. 7 00:45.570 --> 00:51.660 So they invited this well-known architect who is very respected in his field. 8 00:51.780 --> 00:57.540 He came and he did a great job with all the buildings and the provost was really really happy. 9 00:57.540 --> 00:59.240 He was like "This looks great." 10 00:59.700 --> 01:02.710 But he had one question. 11 01:02.790 --> 01:10.470 "Hey Mr. Architect. It seemed like you've just left lawn across the entire campus. Where are all the path that 12 01:10.470 --> 01:15.090 people are going to walk on to get between the buildings?" At this point 13 01:15.090 --> 01:20.810 the architect says "Don't worry. I'll come back in a year and all will be revealed." 14 01:20.880 --> 01:28.320 So in a year the paths where people need to naturally walk becomes trotted down and the grass gets worn 15 01:28.320 --> 01:31.540 down revealing these paths that people need. 16 01:31.800 --> 01:37.790 And it's at this point when the architect actually lays down all the tiles and paves these paths. 17 01:38.370 --> 01:43.230 So this is kind of the difference between user experience and design. Design 18 01:43.230 --> 01:49.820 we often think of having an aesthetic, what we think looks good and enforcing that on the user. 19 01:50.040 --> 01:54.000 Now user experience is meant to be invisible. 20 01:54.000 --> 01:59.790 If you have a good experience with a website it's meant to be unobtrusive and it just lets you do your 21 01:59.790 --> 02:05.490 thing and it feels like as if everything is easy and everything is effortless. 22 02:05.490 --> 02:07.690 So this is what we're aiming for. 23 02:07.860 --> 02:12.120 And in order to do that we have to think about again five things. 24 02:12.120 --> 02:21.000 The first is simplicity. Keeping things simple is always better than making it more complex or more cluttered. 25 02:21.000 --> 02:27.570 So this is a website called Sina and it's one of the biggest News websites in China. 26 02:27.570 --> 02:33.320 Now every time I look at it though I get a headache because it is just so dense. 27 02:33.480 --> 02:39.030 There are so many links and my brain gets overwhelmed and I say "Nope, can't do it." 28 02:39.540 --> 02:42.270 So take a look at this alternative. 29 02:42.330 --> 02:45.630 This is Monocle, which is also a News website. 30 02:46.020 --> 02:51.510 But look at how they've managed to chop up the content, provides some interest for the eyes. 31 02:51.510 --> 02:55.290 There's a little bit of dialogue, some images, some videos, a little bit of text. 32 02:55.680 --> 02:57.330 It's never overwhelming. 33 02:57.360 --> 03:03.960 And with that consistent color scheme and typography, it's really delightful to actually read rather 34 03:03.960 --> 03:09.300 than this experience of sort of hurting your eyes with design. 35 03:09.300 --> 03:13.720 This is a much nicer user experience because it's simple. 36 03:13.770 --> 03:18.700 So whenever you're having to choose, should I make it more complex or should I make it more simple, 37 03:18.810 --> 03:21.720 always try to pare it down. 38 03:22.000 --> 03:24.710 The second point is consistency. 39 03:24.790 --> 03:31.320 Keep your designs consistent but also keep the functionality of your product consistent. 40 03:31.390 --> 03:33.140 So here's an example. 41 03:33.190 --> 03:42.520 This is the webpage for Xfinity. Xfinity is a really big communications company in the US and they 42 03:42.520 --> 03:48.130 are responsible for various things like providing TV and providing internet. 43 03:48.130 --> 03:52.090 Here are three screenshots from various parts of their website. 44 03:52.090 --> 03:53.440 One is their home page, 45 03:53.440 --> 03:58.320 the second is their TV offerings and the last one is their News site. 46 03:58.420 --> 04:04.420 And if you take a look at the top navigation bar not only do you see that they've changed up the design 47 04:04.420 --> 04:08.360 of the navigation bar between the different parts of their website, 48 04:08.530 --> 04:11.160 they also made it work a little bit differently. 49 04:11.170 --> 04:15.460 The buttons are not all in the same place, the search bar moves around. 50 04:15.580 --> 04:21.880 And that inconsistency means that a user is going to be confused when they go from one part of the website 51 04:21.940 --> 04:25.850 to another, having to re-learn how to use your website. 52 04:26.050 --> 04:31.210 If you think about the target audience of this company Xfinity, a lot of them are going to be a little 53 04:31.210 --> 04:32.680 bit older right? 54 04:32.800 --> 04:38.530 And having this inconsistent functionality and inconsistent design will really make those users have 55 04:38.530 --> 04:41.440 a bad experience with this website. 56 04:41.440 --> 04:46.270 Now the next thing to think about when you're designing your website is to take into account people's 57 04:46.270 --> 04:47.770 reading patterns. 58 04:47.770 --> 04:54.020 Now they've looked at how human eyes track a webpage and which parts they look at when they're browsing. 59 04:54.190 --> 05:00.580 And one of the most common reading patterns is what's called the F-pattern where the eye starts at the 60 05:00.580 --> 05:05.370 top left of the corner and then it tracks the right and then it flips back again 61 05:05.500 --> 05:07.360 browsing down the left gutter. 62 05:07.570 --> 05:14.020 So you have often things like bullet points or pictures or icons, buttons, they're all on the left. 63 05:14.170 --> 05:17.280 So you can design for this by using the F-layout. 64 05:17.380 --> 05:24.490 So have the most important parts of your content on the left gutter, have the logo at the top and have 65 05:24.520 --> 05:26.800 everything follow this pattern. 66 05:26.800 --> 05:30.340 For example like this website for Bigcommerce. 67 05:30.340 --> 05:35.560 See how the eye is being naturally accommodated going from left to right. 68 05:35.920 --> 05:42.610 Now another really common pattern for reading is the Z-pattern where our eyes go from left to right and then 69 05:42.610 --> 05:45.370 zigzagging down all the way the website. 70 05:45.370 --> 05:47.670 Now this of course depends on the type of website. 71 05:47.680 --> 05:52.540 So you have something that's more sparse with more video content or if somebody is trying to browse 72 05:52.540 --> 05:54.440 a website a little bit faster, 73 05:54.520 --> 06:01.050 you see them using this layout. And this layout is used pretty famously in the Facebook website 74 06:01.180 --> 06:05.520 using that Z-pattern to accommodate for people's natural reading pattern. 75 06:05.680 --> 06:10.810 So have a think about this. Have a think about how people naturally looks at the page and place your 76 06:10.810 --> 06:16.680 content in that pattern to make it easier for people who are using your website. 77 06:16.700 --> 06:21.760 Now in today's day and age, it's really important to think about All Platform Design. 78 06:21.940 --> 06:27.330 It's not enough anymore to just design a website that's meant to go into a desktop computer. 79 06:27.490 --> 06:30.700 Instead you have to think about mobile as well. 80 06:30.790 --> 06:37.990 So having a website that scales up nicely onto mobile, what we call mobile responsive, is really important. 81 06:37.990 --> 06:45.070 You don't want a big website that's designed to take up a landscape kind of screen to be crammed into 82 06:45.070 --> 06:45.860 a phone 83 06:45.940 --> 06:48.700 that's actually more like a portrait shape. 84 06:48.820 --> 06:50.110 This looks really bad. 85 06:50.110 --> 06:55.500 It's very hard to read the individual links and, more often than not, my fingers are actually too big to tap 86 06:55.510 --> 06:56.680 onto the length that I want. 87 06:57.190 --> 06:59.700 So this is a really bad user experience. 88 07:00.670 --> 07:03.220 Now this can happen the opposite way as well. 89 07:03.670 --> 07:10.030 So a design that looks much better on mobile but then when it's rendered on a desktop with a wide kind 90 07:10.030 --> 07:14.550 of screen, it doesn't use up enough of the screen real estate. For example, 91 07:14.560 --> 07:18.270 this is the Facebook latest redesign of their website. 92 07:18.430 --> 07:23.980 And you've got all of this empty space that's not being used at all and everything is crammed into the 93 07:23.980 --> 07:24.750 middle. 94 07:24.760 --> 07:31.260 This is not very efficient. So have a think about how you're using the available space and make sure 95 07:31.260 --> 07:39.210 that your website rearranges itself when it's being rendered on a portrait smaller screen vs. a larger 96 07:39.240 --> 07:46.980 desktop screen. And try to avoid one of my pet peeves in terms of design which is having so many banners 97 07:46.980 --> 07:53.010 on your website that show up on the mobile version that your content becomes impossibly small. 98 07:53.160 --> 07:57.480 And even when you're scrolling it's like you're scrolling it on an Apple Watch or something. 99 07:57.480 --> 08:03.360 Whereas all of this extra content is taken up by warnings and banners and cookies and it's just not 100 08:03.360 --> 08:05.590 a very good user experience. 101 08:05.730 --> 08:07.830 But on the other hand, don't go crazy either. 102 08:07.830 --> 08:15.870 Don't make your entire website just one part like a picture or a piece of text scaling it up massively 103 08:15.870 --> 08:21.960 like this is also very very awkward because then I have to just keep scrolling until forever before 104 08:21.960 --> 08:25.080 I can actually read and take in all of the content. 105 08:25.110 --> 08:26.630 So strike a happy medium. 106 08:26.700 --> 08:29.430 And most importantly test, test, test. 107 08:29.430 --> 08:30.820 Give it to other users. 108 08:30.960 --> 08:35.960 You can employ professional testers to try out your website and give you feedback. 109 08:35.970 --> 08:40.800 Now if you can't afford that, just use your family and friends. And bake some cookies for them, 110 08:40.800 --> 08:46.800 get them to test out your website and start getting some feedback on how you can improve the design. 111 08:46.800 --> 08:51.840 Now finally we've talked a lot about user experience and how to get people to have a good time. 112 08:51.870 --> 08:57.900 Now some designers though use the knowledge they have about human psychology and User Interface and 113 08:57.900 --> 09:04.670 User Experience design to do bad things. 114 09:05.130 --> 09:13.410 And in the design world, we call these dark patterns. So patterns which get a user to perform an action 115 09:13.410 --> 09:17.790 or behavior that is beneficial to the company or the designer 116 09:18.120 --> 09:20.960 but it's not necessarily what the user wants. 117 09:21.030 --> 09:25.450 And this I would say is another form of bad user experience. 118 09:25.470 --> 09:27.510 So let me give you some examples. 119 09:27.540 --> 09:32.790 This is a real life example. Let's say that you walked into Waitrose which is a big supermarket in the 120 09:32.790 --> 09:35.880 UK and you bought yourself a sandwich. 121 09:35.880 --> 09:40.560 Now when you look at it at the point when you're buying it, it looks like this sandwich is going to be 122 09:40.560 --> 09:42.510 full length from edge to edge 123 09:42.510 --> 09:43.410 right? 124 09:43.470 --> 09:49.320 But then when you rip open the packaging you're disappointed when you find that actually all that's 125 09:49.320 --> 09:55.540 in the middle is just air and your sandwich turns out to be a lot smaller than you initially thought. 126 09:55.610 --> 09:57.910 It is the worst feeling in the world. 127 09:58.000 --> 10:02.840 This is a feeling that I can't stand when my food suddenly gets reduced in size. 128 10:02.940 --> 10:07.770 It's like as if somebody came along and took food out of your plate. In the digital world, 129 10:07.770 --> 10:13.770 people do the same thing. The same kind of trickery that's meant to get you to perform an action that 130 10:13.770 --> 10:20.430 you don't necessarily want and you end up feeling really disappointed and really upset. With Amazon every 131 10:20.430 --> 10:21.110 single time 132 10:21.120 --> 10:26.550 I have to re-click the free delivery button which I've earned by buying so much product from them. 133 10:27.060 --> 10:32.310 But they still try to trick you using the things that we've learned about hierarchy 134 10:32.310 --> 10:39.060 for example. Here the button that makes the more money "Express delivery" is highlighted in orange. 135 10:39.060 --> 10:40.860 It pops out a lot more. 136 10:40.920 --> 10:44.000 It's a lot more likely that you'll want to click on it. 137 10:44.700 --> 10:50.880 But in all likelihood, you're probably happy with just normal delivery and you're now tricked into paying 138 10:50.880 --> 10:53.040 more for this delivery. 139 10:53.040 --> 10:54.260 Now here's another example 140 10:54.270 --> 10:56.230 that's actually true the evil. 141 10:56.400 --> 10:59.410 This is a Snapchat ad for some shoes. 142 10:59.760 --> 11:08.340 But what the designer has cleverly done on the advertising is they've placed a one pixel curved line 143 11:08.460 --> 11:15.090 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 11:15.090 --> 11:19.140 screen and you try to get rid of that piece of hair, well you've tapped on an avenue. 145 11:19.170 --> 11:26.550 So the ad takes you to the website and the advertisers make money off each click. 146 11:26.550 --> 11:32.020 And this is truly a dog pattern because it's just tricking you to do something you didn't want to. 147 11:32.250 --> 11:37.770 Whereas good design is about helping people do what they want to do and giving them a good experience 148 11:37.800 --> 11:39.400 while they're at it. 149 11:39.420 --> 11:47.250 Now the king of dog patterns is RyanAir and it's a low cost airline in Europe which is really known for 150 11:47.580 --> 11:50.720 sort of charging you for every single little thing. 151 11:50.730 --> 11:55.880 I wouldn't be surprised if tomorrow they suddenly charged you for using the toilet on the plane. 152 11:56.580 --> 12:03.150 But here's what the website looks like when you tried to buy an airplane ticket. In order to buy your 153 12:03.150 --> 12:08.370 airplane ticket you have to go through all of these extra add ons including saying "No I don't want to 154 12:08.370 --> 12:13.920 buy travel insurance." But look at how they've hidden it inside this big dropdown list and it's not even 155 12:13.920 --> 12:15.170 at the beginning of the list. 156 12:15.180 --> 12:18.920 It's actually sorted alphabetically below Denmark for some reason. 157 12:19.530 --> 12:23.650 And this just makes it so much harder for you to find that option 158 12:23.820 --> 12:27.910 and for you to actually accidentally end up buying travel insurance. 159 12:28.330 --> 12:34.930 Now the final example and probably one of the dog patterns I dislike the most is these checkboxes. You 160 12:34.930 --> 12:36.660 know right below you filled in a form, 161 12:36.670 --> 12:42.130 you get these checkboxes and sometimes the wording is so confusing that I really don't know what I'm 162 12:42.130 --> 12:43.120 signing up for. 163 12:43.330 --> 12:49.720 Like this one: If you would like us to no longer continue to stop not sending you special deals and offers 164 12:49.750 --> 12:53.150 every week, please indicate you are inclined to yes 165 12:53.170 --> 12:57.440 by not checking the box. I have no idea what clicking that box does. 166 12:57.460 --> 12:59.160 I really just... I don't know. 167 12:59.170 --> 13:00.490 I might click it, I might not. 168 13:00.490 --> 13:06.490 I don't know what it does. But it's horribly confusing and it's not a good user experience at all. 169 13:06.490 --> 13:10.440 I will bet you that after I sign up I'm never going to come back to this website again 170 13:10.510 --> 13:11.390 right? 171 13:11.410 --> 13:13.210 Are you with me? Now 172 13:13.240 --> 13:15.850 we've seen what good websites look like. 173 13:15.850 --> 13:18.130 We've seen what bad websites look like. 174 13:18.140 --> 13:20.650 We've even seen what evil websites look like. 175 13:21.100 --> 13:27.520 But it's time to put our knowledge to the test by designing our own website from scratch and applying 176 13:27.520 --> 13:31.460 these four pillars of web design to this project. 177 13:31.510 --> 13:36.190 So have a think about what you've learned so far and head over to the next lesson where we're going 178 13:36.190 --> 13:38.860 to design a hotel website from scratch.