There has been much talk of the so-called “flat” design of Jony Ive’s group.
iOS 7 is anything but flat.
Look closely at what Apple unveiled at WWDC showcases and you will see this new UI has depth beyond anything we have experienced before.
Once you get past the “oooh” moment of the parallax effect, you will get a sense that it is communicating an entirely new dimension to the user. Elevation.
Where does this leave us?
Instead of popping up modal views with a completely opaque “back” button where you are expected to remember what was “back” there, now you have a visual clue as to what that is and your new place in the overall navigation stack of the app. The blurred and color enhanced backdrop tells you you haven’t entirely left the last view, and once dismissed you will find yourself exactly where you would expect.
Floating buttons or badges also now convey that they are separate entities from the background, making them more readily identifiable as dynamic elements or elements that can be interacted with.
Gone are the borders and bezels that once denoted the edges of tappable regions for buttons on your device. On such small screen sizes their diminutive size often makes such borders useless anyways and users simply do their best to get a fat finger as close as possible to the center of it. In this sense, the colorful text iOS 7 introduces a better mode of actuation, a target.
As a developer one of our usual tricks is to artificially enlarge the tappable region of buttons and elements by adding a transparent region beyond the borders and bezels in order to reduce the visual real estate used by the control yet making it easier to tap.
The trick works very well, but it doesn’t make the buttons ‘feel’ any larger to the user. They still squint a little while they press them.
Pushable buttons themselves are as much a skeuomorphism as leather-bound address books, and in the age of ubiquitous hyperlinks we have become just as comfortable with nearly every single bit of text doing something when we touch it, even if it’s to go look it up in a dictionary.
There are many that don’t realize even the Status Bar itself is tappable if there is a scroll view on screen, which I would consider a UI design failing. Odd because iOS is typically known for it’s discover-ability. The integrated Status Bar and Nav Bar I suspect will only add to this confusion.
Apps now launch from their icon, which for the first time creates the illusion that apps are running like windows on top of the SpringBoard itself like a window. You might want to reconsider the design for that launch image.
The new UI does feel more alive, though it is a lot more than a cute party trick it does convey a lot of clarity as an interface. That’s hard to do with such a small amount of pixels on a mobile device, which brings us to the great de-cluttering that is iOS 7. Fewer borders and bars and dividers and lines and delineated areas.
As a dev I like this especially, because a clean interface is also lot less work.
The new full-screen edge-to-edge design maximizes the available area for user interaction.
Grouped cells never actually reduced the tappable area in iOS 6, they just made it look like it did. Unfortunate, but well illustrates the visual waste that is borders and bezels.
One more thing … in iOS 7 half-point lines (i.e. 1 Retina pixel!) and thin fonts abound. That means if you are designing for retina and non-Retina you are no longer simply scaling things by 2x. You actually need different designs for these two devices. Same goes for fonts, the thin fonts will not look nearly as good on non-Retina, possibly unreadable to users with poor eyesight.
Annoying from a Dev perspective, but on Retina it does look very elegant.
Given the hardware requirement for 7, we just happen to have hardware now capable of crunching data fast enough to bring these complex graphical elements to life smoothly. Blurs, alpha transparency, transforms, shadows and multiple views visible at the same time all place a relatively heavy load on the device. The new chips can handle it.
Pay careful attention to your app icon design! The corner radius changes for 7 and the jury is still out if we’re going from 114×114 icons to 120×120 icons.
Stay tuned for more on how 7 will handle this issue…
Why wait for 7?
Truth be told, we can do all these new effects now with iOS 6. On the higher end devices like the iPhone 5 at least. It’s a lot more work, but possible. You don’t have to wait for 7. The parallax effect for example, means tying in to the accelerometer, calculating and then animating the views yourself.
If you are going to design an App in the new iOS 7 style, you need to go beyond simply removing borders and gradients and explore the use of targets, simplicity and especially depth as new means of communicating with your users.
Context is everything.
