0 1 00:00:03,660 --> 00:00:10,110 The next important thing to remember is that light always comes from above. Wherever light comes from 1 2 00:00:10,110 --> 00:00:11,850 below it looks freaky. 2 3 00:00:11,850 --> 00:00:15,320 So don't do it in your user interface designs. 3 4 00:00:15,390 --> 00:00:18,900 Don't try to go for the Japanese horror style user interface. 4 5 00:00:18,900 --> 00:00:20,190 So what do I mean by this? 5 6 00:00:20,190 --> 00:00:25,680 So when you're creating buttons or other user interface elements, you should always design them so that 6 7 00:00:25,710 --> 00:00:29,670 they give the user a hint as to how they can be interacted with. 7 8 00:00:29,670 --> 00:00:33,880 So we've actually encountered a number of clients who've had issues with click through. 8 9 00:00:33,990 --> 00:00:39,000 So this is usually a buy now button or download here etc. 9 10 00:00:39,090 --> 00:00:44,460 Namely that they don't see anybody clicking on those buttons and a large part of the reason for that 10 11 00:00:44,580 --> 00:00:47,320 is poor user interface design. 11 12 00:00:47,340 --> 00:00:52,530 So let's think about this. When you're looking at a button from the front you should be able to see a 12 13 00:00:52,530 --> 00:00:55,100 slight hint of a shadow over here. 13 14 00:00:55,110 --> 00:00:59,610 And that's because when you have a look at a slice through or a side view of that button, light will 14 15 00:00:59,610 --> 00:01:00,820 come from above 15 16 00:01:00,840 --> 00:01:07,860 shining on it like this which means that this part will cast the shadow down here and it will be darker 16 17 00:01:07,890 --> 00:01:08,940 than the surrounds. 17 18 00:01:08,940 --> 00:01:16,020 But then once that button is pushed in it should be flushed with the surroundings and that shadow no longer 18 19 00:01:16,020 --> 00:01:20,490 occurs and the whole image becomes more uniform in terms of its color. 19 20 00:01:20,490 --> 00:01:26,010 Now the reason why this is really important is because you have to remember that none of us were born 20 21 00:01:26,340 --> 00:01:30,390 with the ability to interact with digital interfaces. 21 22 00:01:30,390 --> 00:01:37,410 Most users will have gone through life interacting with real things i.e. buttons that actually can be 22 23 00:01:37,410 --> 00:01:43,680 pressed and similarly when you translate into the digital world, in order for the user to feel that they 23 24 00:01:43,680 --> 00:01:46,090 can interact with those elements, 24 25 00:01:46,140 --> 00:01:53,220 you have to give them an indication that reminds them of the real world and that comes from user interface 25 26 00:01:53,220 --> 00:02:01,530 design giving them a reminder of how a button on a glass screen is similar to a button in real life. 26 27 00:02:01,530 --> 00:02:07,020 So a lot of times you see apps on the app stores that have buttons that look like this which does not 27 28 00:02:07,020 --> 00:02:09,960 look like a button. That just looks like text. 28 29 00:02:09,960 --> 00:02:11,250 Now say what you will. 29 30 00:02:11,250 --> 00:02:15,990 You know some people might say, "Well you know it's design like this is meant to be minimalist or is meant 30 31 00:02:15,990 --> 00:02:17,090 to look flat. 31 32 00:02:17,100 --> 00:02:22,590 You know I'm trying to be like Jony Ive." But always remember that in design the golden rule is that 32 33 00:02:22,920 --> 00:02:25,220 function comes before form 33 34 00:02:25,230 --> 00:02:31,410 in all cases and whenever you find yourself sacrificing function for form you should always give it 34 35 00:02:31,470 --> 00:02:32,520 a second thought. 35 36 00:02:32,550 --> 00:02:38,980 So instead of having a button that's just text, what can we do to that image to make it appear more clickable? 36 37 00:02:39,060 --> 00:02:45,480 Well the first step is maybe putting a round border around it because round things tend to be buttons 37 38 00:02:45,570 --> 00:02:46,910 and they tend to be clicked on. 38 39 00:02:46,950 --> 00:02:53,910 So very often you'll see iOS designers compromising with this flat design that's currently popular by 39 40 00:02:53,910 --> 00:02:56,310 surrounding the text with a rounded border. 40 41 00:02:56,430 --> 00:03:02,700 But even then, it still doesn't look all that clickable. It doesn't make you want to just go and tap on 41 42 00:03:02,700 --> 00:03:03,310 it. 42 43 00:03:03,300 --> 00:03:05,250 So how else can you improve this? 43 44 00:03:05,250 --> 00:03:11,820 Well you can add gradients and you can add shadows. That makes the button look a little bit more rounded, 44 45 00:03:11,820 --> 00:03:18,090 a little bit more 3D like it's protruding out of the screen making it more enticing and more likely 45 46 00:03:18,090 --> 00:03:19,150 to be clicked on. 46 47 00:03:19,170 --> 00:03:23,280 And the last design I'm going to show you is where you've got a drop shadow, 47 48 00:03:23,370 --> 00:03:28,020 you've got a gradient, you've even got a little image that indicates to you what will happen once you 48 49 00:03:28,020 --> 00:03:34,380 click on the button and that button is far more inviting and hence far more likely to get clicked on. 49 50 00:03:34,380 --> 00:03:39,870 This might not be important if you're designing the button for people to look at your privacy policy 50 51 00:03:39,870 --> 00:03:46,020 for example but it does matter if this is your buy button or this is your download button. 51 52 00:03:46,020 --> 00:03:52,430 If this is linked to your revenue and people can't identify that it's clickable, then you won't get those 52 53 00:03:52,440 --> 00:03:53,590 results you're looking for. 53 54 00:03:53,700 --> 00:03:56,000 So think about the designs in your app, 54 55 00:03:56,100 --> 00:04:00,110 so are your designs representative of the real world? 55 56 00:04:00,240 --> 00:04:08,790 And this relates to one of my biggest gripes with the flat design that was popularized since iOS 7. 56 57 00:04:08,790 --> 00:04:15,780 Now before if you remember iOS 6 and previous, the iPhone home screen used to have buttons that were fully 57 58 00:04:15,780 --> 00:04:16,650 3D. 58 59 00:04:16,650 --> 00:04:22,860 They were these glossy glassy little globules that look really really clickable and they looked like 59 60 00:04:22,950 --> 00:04:28,870 real things and they gave you great subconscious cues as to how they can be interacted with. 60 61 00:04:28,890 --> 00:04:30,340 And then came iOS 7 61 62 00:04:30,360 --> 00:04:34,910 and there was a huge design overhaul to go for this flat appearance. 62 63 00:04:34,920 --> 00:04:36,060 Now what does flat mean? 63 64 00:04:36,060 --> 00:04:41,840 It means that when you're looking at it from the side it's virtually like a piece of glass. 64 65 00:04:41,850 --> 00:04:44,460 It's exactly like what you're holding your iPhone. 65 66 00:04:44,460 --> 00:04:46,130 It's just a piece of glass. 66 67 00:04:46,350 --> 00:04:48,000 There is no gradient, 67 68 00:04:48,000 --> 00:04:53,700 there is no shadow to indicate to the user what is a button and what is not a button. 68 69 00:04:53,730 --> 00:05:00,360 And so if you have a look at this screen for example the passcode screen, what is the difference between 69 70 00:05:00,420 --> 00:05:08,180 this and passcode which we know is a label and does not do anything, and the emergency and cancel button? 70 71 00:05:08,270 --> 00:05:10,310 There is literally no difference. 71 72 00:05:10,400 --> 00:05:15,860 So for somebody who has never used an iPhone before, or for somebody who is a little 72 73 00:05:15,860 --> 00:05:16,760 bit older 73 74 00:05:16,970 --> 00:05:24,410 or for somebody who is a little bit older-- the only indication is that they can read that cancel is 74 75 00:05:24,530 --> 00:05:25,150 a verb. 75 76 00:05:25,310 --> 00:05:28,250 They can only hope to guess what these things do. 76 77 00:05:28,280 --> 00:05:29,930 And that's not what design is about. 77 78 00:05:29,930 --> 00:05:36,440 Design is meant to give the user conscious and subconscious clues as to how you should be able to interact 78 79 00:05:36,530 --> 00:05:37,820 with the digital world. 79 80 00:05:37,820 --> 00:05:42,480 So despite all the hype around flat design, I'm not a big fan. 80 81 00:05:42,560 --> 00:05:50,050 And in my opinion what will happen in the future is subtle gradients, subtle shadowing, subtle contrast. 81 82 00:05:50,120 --> 00:05:57,350 So if you look at the folders and the files in your Mac OS-- in your Mac OS, you can see that it's not 82 83 00:05:57,350 --> 00:05:58,920 completely flat. 83 84 00:05:58,940 --> 00:06:06,860 This folder looks like it's a little bit 3D like it contains something and that indicates to me that 84 85 00:06:06,890 --> 00:06:11,260 if I click on it I should be able to open it up and there should be something inside. 85 86 00:06:11,300 --> 00:06:18,350 That just shows me that it's not just text or not just an image, that it can be interacted with. And I 86 87 00:06:18,350 --> 00:06:23,960 know that there's a lot of designers who think that flat design is so hip so trendy but actually you 87 88 00:06:23,960 --> 00:06:26,150 know if you think about it it's not. 88 89 00:06:26,150 --> 00:06:28,760 We've been using flat design for ever. 89 90 00:06:28,970 --> 00:06:35,200 In the days of 8 bit graphics, we couldn't afford to put contrast and gradient and shadow onto the screen. 90 91 00:06:35,210 --> 00:06:37,220 This is a videogame called the trill of Oregon 91 92 00:06:37,220 --> 00:06:40,530 for those you guys you remember and it is flat design. 92 93 00:06:40,550 --> 00:06:46,460 So there is nothing trendy about this design concept and I firmly believe that we'll move away, we'll steadily 93 94 00:06:46,460 --> 00:06:54,110 move away from flat design and go towards a version that's more akin to what Google does which is material 94 95 00:06:54,110 --> 00:06:54,570 design. 95 96 00:06:54,590 --> 00:07:00,370 So if you remember the old Android OS it was pretty much designed to be completely flat. 96 97 00:07:00,590 --> 00:07:07,370 And then Google decided to go-- and then Google decided to change their design concept to make everything 97 98 00:07:07,370 --> 00:07:10,080 slightly more material like. 98 99 00:07:10,100 --> 00:07:10,820 And what does that mean? 99 100 00:07:10,820 --> 00:07:16,800 That means that you know things should look like pieces of paper and card on screen. 100 101 00:07:16,800 --> 00:07:23,090 And so when you look at Instagram where your photos show up, it should look like it's appearing on a 101 102 00:07:23,090 --> 00:07:27,050 piece of card and not completely flush with the screen. 102 103 00:07:27,050 --> 00:07:29,960 Your buttons have a subtle hint of shadow. 103 104 00:07:30,020 --> 00:07:37,610 Your app action bar also has a little bit of contrast below just a hint of interactability. 104 105 00:07:37,760 --> 00:07:41,840 And I reckon that digital design will steadily move towards this model. 105 106 00:07:41,840 --> 00:07:47,420 Now my predictions might not come true but at the end of the day you're designing to achieve certain goals. 106 107 00:07:47,420 --> 00:07:49,640 You're not just designing to make it look pretty. 107 108 00:07:49,640 --> 00:07:51,210 You want to achieve-- 108 109 00:07:51,230 --> 00:07:57,140 you want to architect certain behavior in your users such as clicking on certain buttons or knowing 109 110 00:07:57,140 --> 00:08:01,100 how to interact with your app without you having to explicitly tell them. 110 111 00:08:01,220 --> 00:08:07,190 And I always urge students to have a look at how they design their user interface and see if it is intuitive 111 112 00:08:07,190 --> 00:08:12,230 to their grandmother or their grandfather. Would they know that this is a button that should be clicked 112 113 00:08:12,230 --> 00:08:13,170 on etcetera.? 113 114 00:08:13,400 --> 00:08:14,860 So look back at your designs, 114 115 00:08:14,870 --> 00:08:15,620 think about this. 115 116 00:08:15,620 --> 00:08:23,150 How well do you mimic the real world in your designs and how well are you able to convey the interactability 116 117 00:08:23,210 --> 00:08:24,840 of your app to the user?