17/12/2013 - admin

iOS 7 Icon Colors: improving user experience

iOS-7-colors Colors in iOS7 are part of a “trend” that has both detractors and backers since its release this year. First, those who rightly criticize it, argue flaws in some defining aspects of the OS, hard to ignore for the design community; on the other hand, those who support Jony Ive’s experiment, tend to play the “nobody cares” card, which is a little sloppy but still accurate in the way that regular consumers don’t care about this, focusing instead in other aspects of the product like the fact that it’s a novelty. In this article,  we’ll show you how Apple implemented colors in iOS7 icons, how it affects and benefits the usability of the OS and identify those icons that need an improvement, and improve them!

Color Usage in iOS 7 icons

Since iOS 7 is the first release, it is the first time Apple uses white tones more than black. Big white spaces have given the general appearance a hint of lighting, improving the visibility of elements created with vibrant colors and giving the OS a clean ambiance, making room for other colors to express. The varied range of colors used is not problematic in parts like the Compass or the Maps icons; in others, like the Game Center or the iTunes Store, they couldn’t be worse. Apple has taken advantage of gradients, which provide an interesting insight of a unique pseudo-flat style which, coming from Apple, has become a new trend in no time. However, some of these gradients do not match the rest of the icons; for instance, some icons have a bevel like gradients (in a clear remembrance of past times) like the Messages, Camera or App Store icons; others have regular gradients, those which work as a part of the icon like the Weather, and those that have no gradients at all like the Reminders, the Calendar and the Photos apps. Black is subtly used in some details of the design, specifically in the case of the Camera, the Clock and the Compass. In general, the company applied brighter colors, even in parts that can be better portrayed with black and subtle transparencies. Gray tones become relevant since they replace the color black. control-and-notification-center   The rest of the color palette is used throughout the entire OS, laying emphasis on blue, pink and purple hues, maybe with the interest of transmitting a sense of composure, playfulness and professionalism at the same time.

How it affects usability

ios-7   To establish how usability can be affected, it’s important to know how a color affect people’s minds. On a regular basis, colors tend to generate different effects on particular people; for example, red is used to stimulate blood circulation; yellow activate the nerves, orange increases energy levels and blue has a calming power. Diverse studies have shown, that, for example, placebo pills were more effective if they were colored with warm colors instead of cold colors. Another curiosity is that the color blue is more effective on reducing crimes than yellow if it’s adapted to streetlights. In the case of iOS 7 icon colors, the use is kind of excessive. The design team (or teams) haven’t focused on a specific set of colors, but instead they have elected basically every color in the palette. Now, that isn’t necessarily wrong: they somehow managed to create a great final product, but, as I’ve stated before, it seems that the whole project was divided into smaller parts, maybe to make it faster, and some parts of it have been created for one team with great design skills, leaving the other part in charge of some not-very-skilled team. This is remarkably important to point out since the design differences are huge between icons, and for the trained eye, they are awful, even offensive. These differences can be noted by comparing icons like the game center and the compass, which portray radical design differences both externally and internally. You might notice poor design in the Newsstand app and even in the settings icon, which after reading this article by Joshua Topolsky in The Verge, is very possible you start seeing differently (as an actual over burner).

What can be improved

Regarding colors, there are plenty of aspects we can change, but of course, it goes along with everyone’s tastes and preferences. In the examples portrayed below, I opted to flatten the icons and change some colors which, in my opinion, don’t match quite well with the rest of the design. Also, I don’t think the gradients used are awful; I think the problem lies on the lack of a defined style. Do you want to use gradients? Great! Use them in every icon or in some parts of every icon; you don’t like gradients? Great! Flatten everything, but avoid mixing both qualities. I truly like the flat style to the point of extreme simplification, but don’t get me wrong: it does not mean getting to a point where the message transmitted by the icon gets incomprehensible. It means getting rid of useless parts of icons, like some decorative shapes that pollute the design. So for that reason I won’t keep the gradients. Regarding transparencies, I have no complaints about the ones being used across the OS. I think they look nice, and they were created and implemented in a correct way, making some elements stand out. Let’s see how to improve the icons of the Passbook, Game Center, Settings, Newsstand, Safari, Calculator and Weather apps. The Passbook app is cool on the inside showing the different cards in a completely flat style, but its icon could be improved by integrating it with the rest of the design, simplifying icons (like the tea cup, and the video recorder) and by removing all the gradients that serve no informative purpose... before-after-passbook   The Game Center icon is not even understandable. It needs to be changed for something that relates to actual games, specifically to the digital experience of gaming. I was not a fan of the iOS6 version of the Game Center icon, which seems a bit crowded, containing icons within icons, and I was not even a fan of the app’s design in general. But it had the quality to represent, at least, gaming. With this app,  it’s important to find universal symbols that could transmit a unified message of “Game” “Center” and “Digital”. I use one of those: a game controller. before-after-game-center   The Settings icon could be less of an oven burner and more of a gear. Simplifying the gears could do the trick quite nicely. before-after-setiings   The Newsstand icon can be replaced with an actual newsstand; I mean, is not that difficult, is it? It would look cleaner, organized, and even brighter, unlike the actual icon, which is crowded with unorganized magazines. We can add the magazines or not, or put actual previews of the magazines, books and subscriptions each user has. before-after-newsstand   The Safari icon can prescind of the gradient, the compass scale and reduce the size of the needles. The only problem with this app is that already there’s another compass in the interface. before-after-safari   The Calculator icon could be improved by softening the colors. This app is already flat, but it would look better with smoother monochromatic colors.. before-after-calculator   The only change in the Weather icon is the removal of the gradient in the background and the transparencies in the elements. This app is universal, so there was no need to change the iconography since its message is well illustrated by the use of the cloud and the sun. before-after-weather   All of these improvements were made with the help of this cool iOS7 GUI set created by Design Shock. Subtle changes are possible and necessary in the latest version of iOS. These are simple improvements that will enhance usability by making icons more understandable than ever. We hope these changes come along with a new update of iOS.


Leave a Reply