premiumpacks

iOS Design Changes, the Good, the Bad, the Awful

Some time ago, Apple released its newest OS for mobile, the well known and omnipresent iOS 7. It’s changed from a stylized and pixel perfect designed skeuomorphic user interface to a flat one, with nice effects that let us see what the company wants and what they want to establish in terms of design. iOS 7, without any doubts, has taken over the world; no wonder it already has been installed in 250 million devices across the planet, more or less, 70 percent of its market share.

But this new design, considering it is the first attempt of the company to introduce a new interface in the post-Steve era, has had both opponents and supporters among its users and within the app development community in general. We all know Steve Jobs advocated for a design that almost perfectly simulated the real world, and a key factor of the success of the iPhone and the iPad was, indeed, this continuous hunt for perfection in every detail of the company’s products, and their ability to be easy to use; but Jony Ive, Senior Vice President of Design of Apple, wasn’t very happy with this trend, which tend to be more subtle, flat and full of color, without losing the characteristic pursuit of perfection in every Apple creation. This article will analyze the key aspects of both iOS 6 and iOS 7; it digs into some of the design elements that stand out for their great quality, and take a look at the bad and the awful features introduced in the new mobile OS.

iOS 6: Skeuomorphism Conquers the World

The main characteristic of iOS 6 is its skeuomorphism, and this has its roots in the early stages of Apple as a company. Since day one, Steve Jobs wanted a realistic and easy to use design for all of the products they release since the goal was to make computers available for everyone. Almost 30 years later, mobile devices have conquered the world, and for the first time, the world adopted flat design as a mantra. However, Jobs managed to impose an accurate representation of reality, and his views were against this “squared” parallel universe. He wanted realistic things, in his words, elements that want to make you “lick the screen”. That’s one of the reasons why iOS skeuomorphism was so important it even delayed the release of an important interface change in Apples products. And what’s even more important, he lead the market towards his direction, making skeuomorphism the leading design trend for almost 5 years, and iOS was his war horse.

iOS 7: Flattening Apple

Unlike iOS 6, with iOS 7 we see no man leading markets and imposing realities; instead, we see a company adapting to an overwhelming external trend. However, the company has a reputation to keep, and they cannot afford to follow a trend without making important adjustments to it. iOS 7 style is not altogether flat; it is the mixture of a general flat appearance with realistic strokes, and the help of animated effects (like the dynamic background) give this release a specific presence worth following and testing.

spotlight-search

Image via ars technica

For example, when typing, the keyboard has subtle shadows to indicate action. The general trend style of flat design would disregard this, but usability may be harm if this is done. On the other hand, one might question the need of shadows on an obvious actionable button like a keyboard key, but it’s a cool element and makes the OS stand out. This question in Quora shows how users and developers perceive the new design of iOS 7 and if it is an improvement.

With that in mind, let analyze the good, the bad and the awful of this change.

The Good

The new iOS implemented several design improvements which produce a feeling of fluency from start to end. For example, we can see how the background is elegantly integrated with the typography and the icons. It’s nothing like iOS 6, where we were use to see “blocks” of information, distinguishing pieces of data that relate in no way with one another.

lock-screen-ios6-ios7-comparison

Image via ars technica

Also, the lack of confined spaces for elements allow greater font sizes and a better distribution of items, making you believe that you actually have a bigger screen.

Another great example of simplified design is the Compass app. This app integrates all its elements, flatten them perfectly and still manages to transmit the message correctly. The elements are in place, the interface doesn’t look crowded, and the alignment are awesome.

compass-app

Image via ars technica

The Bad

We have to say that most of the design flaws have their roots in the lack of a defined and complete style. Not being fully flat and letting translucent effects take place make room for different problems, like not knowing how or where to place elements, semantic issues and crowded spaces. Those problems happen with some precise items, and they multiply with some interface elements like the dock in the Home Screen and the Phone app.

The dock, being a special place at the bottom of the home screen where the important apps are placed for easy access, doesn’t quite match with the overall design and breaks the harmony with the rest of the content. It has passed from being an elegant glass shelf in iOS 6 to a rectangular container that has no illustrative purpose in iOS 7. For example, it doesn’t indicate what to do with it to a new user the way the glass dock in iOS 6 did. It’s strange they didn’t consider the possibility of having new clients, as you can see in this article, where Jony Ive explains why there’s no need for extremely crafted design elements.

home-screen-ios6-ios7-comparison

Image via ars technica

On the other hand, the Phone app design is one of the less organized things in the design of the iOS7 user interface. The icons of the “Add to Contacts” (text) and the “Undo” features were placed next to the number, where they actually make more meaningful sense, but makes the screen look crowded. In iOS 6, they were next to the “Call” button, making a better use of the space.

phone-app

Image via ars technica

Note that just by simply resizing the call button, the interface can be altered in order to make it lighter. The example also shows a subtle distinction between different sets of elements, like the tab bar and the keypad. The call button doesn’t necessarily have to be at the bottom. Instead, I placed it next to the number, as well as other important actions to achieve a visually connected interface.

iOS-phone-app-improved

Image via DesignShock

The Awful

Apple messed up in the past; we know that, and they are not immune to do it again. It is, in fact, a necessary part of a product’s lifecycle in order to improve its quality. These awful things are visible in the Game Center and the Newsstand App.

The Game Center is quite an oddly designed app. It specially looks like if it were designed by a special team, one with no connection to the rest of the project. This app stands in the middle of flat, minimal and skeuomorphic trends, but doesn’t use well any of them; for starters, it has a divided layout like the ones we use to love in iOS 6; secondly, the profile pic, the status, the name and the points look like if they were fit in there over the deadline, looking loose and clumsy; third, the balloons – although pretty neat – serve no other purpose than a decorative one; and fourth: why would you need two different icons in different locations to illustrate one single point or action? Beats me…

game-center-app

Image via ars technica

Another thing that has no presentation is the Newsstand. It was introduced with iOS 6 and it was a crafted piece of work in which you can appreciate the wooden textures, the shadows and the resemblance to an actual bookshelf. It didn’t even needed to be a full app; it just divided the screen and appeared, but the Newsstand in iOS 7 is now a full screen app that doesn’t even look like a shelf. Besides, the digital publications look more like stickers than actual magazines or newspapers.

newsstand-app

Image via ars technica

To improve this, gradients can be omitted. Escalated plain colors can do a great work, and the relevant detail is the addition of little stripes across the end of every “shelf” to create the illusion of depth. This not only solves the problem of resemblance, but now the magazines and newspapers look integrated into the interface.

newsstand-app-improved

Image via DesignShock

In conclusion, we’re still in the early stages of the deployment of iOS 7, and it is somehow arrogant to predict how a mobile OS could perform in the near future, having in mind this industry, and especially this market, changes continuously. We didn’t even had smartphones before 2007 or a decent tablet before 2009 for that matters; so jumping into conclusions right now is not the correct way. I guess is up to the future to decide whether Jony Ive was right with iOS7 or if it needs a revamped version.


Featured Deals


Related Posts


Related Lists