The new iOS 7 has radically changed the way user interface is conceived on iOS. Indeed, the change has been so radical that along the past few months many not so positive comments and criticism could be found on the web. Now that iOS 7 has officially shipped this is starting to change and many voices are expressing true their enthusiasm. Even the rush to updating to iOS 7 does not seem to stop, so that it is already clear that iOS 7 will be a huge success in adoption.
In any case, apart from any criticism that one may have regarding how iOS 7 looks and feels, it is clear that it marks the beginning of a new era for mobile interfaces. After several weeks of use and learning through WWDC videos, I am going to summarize here what, as far as I understand, gives iOS 7 its definite character and makes it a radical change.
About being flat
You can hear a lot of talk about “flat UI” surrounding iOS 7, and in a sense iOS 7 is flat; but it is not just that. If the change brought from iOS 7 were just going beyond skeuomorphism, it would have not been so radical a change, as the plethora of flat UI apps already existing for iOS 6 (and android) can prove. As an example, take the new Evernote release for iOS 7:
It is surely a flat UI app, but does this seem an iOS 7 app? Certainly not. Still, reviews about evernote have been raving and all of them (that I have read, that is) have praised evernote for being a great iOS 7 app. Now, it looks more like an Android app to me. Even the most basic tenet of iOS 7 interface design – which is: content before all else – is not really respected, as the Evernote home screen shows. But this post is not just about Evernote, and if you look at this link, you will find several more examples of iOS 7 apps that would feel home on an Android phone (along others that are pretty good).
So, let’s start with the basics. If you want to design a great iOS 7 UI, you will need to take four principles in consideration:
It is not just about being flat. iOS 7 is about clarity, deference, depth, and detail.
Clarity is a seemingly simple yet complex word. Clarity can be associated with the following qualities (as they are registered in the New Oxford American Dictionary):
- easy to see or hear
All of those qualities are there in the apps made by Apple for iOS 7, and you can clearly see throughout the whole iOS 7 redesign how those qualities are really a strong mark of iOS 7 user experience.
Coherence: coherence is attained through several means: e.g., the now famous Yve’s icon grid; a new color palette; a completely redesigned icon set; etc. Even the new system icons have been designed in a way to make them look good with the new system font!
Intelligibility is the quality of something that can be understood. This is evident in the effort to give user content the most important role to play (see also the concept of deference), and even more, to present user content so that the most important information is the most evident. A great example of that is the weather app.
Intelligibility has also to do with the clear separation between user content and active elements, UI controls. And with the choice of using text for buttons: nothing comes close to text when it comes to intelligibility, of course. To be noted that the main point behind the decision of using purely textual buttons, i.e. of the removal of buttons’ borders, is intelligibility: no borders means more space available for useful information.
Intelligibility has also got to do with another key concept in iOS 7 redesign: that of context and of always be in context. This is so crucial that I will come back to this later (or in a later post).
Being easy to see or hear may appear something close to being intelligible, and indeed it is, but it carries a more specific meaning with it. Particularly this is visible in the new iOS 7 feature that allows the user change the system font size. This is attained through the use of text styles in place of the older font face qualifications (e.g., bold face): now we have headers, titles, and so on. And this is made possible by an overall redesign of the typography system in iOS 7.
Sharpness: A noteworthy feature of iOS 7 new typography is its adaptive rendering of type: at smaller sizes, a type is rendered with a kind of boldening correction; at larger sizes, it is rendered with a lightening correction. This makes for a great, sharp effect which is possibly not so easy to notice. Have a look at this picture, where the central columns represents how a normal, regular typeface is rendered on iOS 7 compared to how the same typeface is rendered in plain and bold styles. This should be a clear example of sharpness.
As to transparency, this is one of the main tenets of iOS 7. Just look at the new Control Center, or at navigation bar and toolbars and the way they let you see through them a blurred image of your content. This is not just for fun, since it gives a completely different look to the UI, where it somehow “adapts” to user content, and it changes so that is appears more in tune to it. Another great example of coherence by the way. But the main tenet behind the use of transparency is context, as the Control Center case makes clear.
Now, I will not make any attempt at defining or describing “purity”, the last quality I have listed for clarity. But is it not true that iOS 7 home screen looks really pure with all those whites and pastel colors?
Now this post has become long enough so that I will move on to the rest of principles behind iOS 7 redesign in a new post.
Enjoy for now the clarity brought by iOS 7.