Designers, Shadows are Totally Fine in a Flat UI.
Why you still can (and should!) use shadows - even if Apple doesn’t.
This time, just a year ago, nobody knew about the terms “skeuomorphism” and “flat design”. We complained about the kind of leathery design of some apps on iOS and OS X, but in general the UI of Apple’s mobile operating system was just fine. Then in just a few weeks everything changed and suddenly flat design was _the_ new style everybody was talking about. Google did an excellent job pioneering this new design movement, but what about apple? Apple panicked, fired the king of skeuomorphism Scott Forstall and replaced him with Jony Ive to bring a minimal and flat design to iOS.
Apple’s introduction of iOS 7 has been the biggest change to its mobile operating system since the first appearance of the iPhone. Gone are the heavily styled apps, texturized backgrounds, rich drop shadows and big buttons. The new iOS 7 style is characterized by colorful light gradients, no shadows, lots of whitespace and the absence of rich pressable buttons. While I can applaud Apple for a few changes (no more leather textures) I don’t really get many of the design decisions made by Jony Ive (and his designers).
Shadows
It seems Apple has stripped iOS 7 completely of all (drop) shadows. Partly that’s a good thing because Apple really has overused shadows. The calendar icon is a nice and prime example of an improvement over iOS 6.
But as with the calender icon, Apple has decided to strip all shadows of the whole operating system. And that’s the problem. I don’t know how they came up with the idea that shadows are not “allowed” in flat user interfaces. Shadows help to differentiate between two objects and in some cases, understand that one is above another object. It helps to tell the user the hierarchy of elements. In the case of the calendar icon for example, the red banner clearly is above the white paper.
The new Home Screen
Let’s look at the new home screen. Previously shadows were used to seperate app icons from the custom background. This is essential to the idea of interchangeable, customized backgrounds. Because users can change their home screen to every image they want, it is the duty of the operating system to adjust accordingly. Pre-iOS 7, shadows were used to achieve this. If an icon accidentially has the same color as the background, (light) dropshadows help to tell them apart. Let’s see what happens in iOS 7 if you have a white (or very bright) and black (or very dark) background
Yeah that’s right. Thanks to the new “no shadow”-policy of Apple, icons like the calendar icon or the clock seem to disappear and be the same as the background. There isn’t a clear and visible difference between the icon and the background. At first this doesn’t seem like a huge issue because who in the world is using a solid white oder black background, right? Yeah, that’s right, but I’ve found out that this is a main issue why the new home screen looks and feels so weird.
A user has to be able to quickly find and focus on the app he wants to open. The new home screen makes this process much harder thanks to no shadows and differentiations between app and background image. This not only affects one color backgrounds but also very vivid images with similar colors to the new icons.
It wouldn’t be difficult to solve that problem. Indeed, Apple solved it a few years ago with (drop-)shadows. Just add a subtle (grey) glow around the edges and it is much easier for the user to understand the interface.
Much better. To see that such a subtle shadow is really usefull for image backgrounds, let’s have a look at the following mockup.
A small change - a big impact. Its much easier to find and focus on icons in the right mockup. I’ve also added the same subtle shadow to the app names because they are also very difficult to read in some situations.
Maps
Even in apps like Apple’s own maps app, shadows have completely disappeared. The white bar below is on top of the maps layer. As the map itself uses quite bright colors, it’s difficult for our brain to distinquish between the map and the control elements. If you add the same shadow we’ve used on the homescreen it gets much easier to see the line where the maps end and the control panel begins.
I’ve also added a shadow to the adress/search input, because without it doesn’t look like something you can interact with. It doesn’t look like you can click on it and enter a text.
These were only two very basic changes done in a few minutes and you can see the impact yourself.
Bottom Line
I really don’t understand why Apple has completely stopped to use shadows in their latest UI work. While Google and others use subtle shadows to enhance their interface and make it easier for the user to understand, Apple seems to have forgotten about that simple but powerful technique.
What do you think? Have you something to add? Send me a tweet.
