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