As a part of my Master-thesis “ANALYSIS OF THE GRAPHICAL USER INTERFACE DESIGN ON OPERATING SYSTEM” at IT-University (in the spring of 2016) – I made an analysis of the icon design on two operating system.
Background: Apple introduced iPhone in 2007, followed by the iPad in 2010, and with the introduction of new devices and different screen sizes – the graphical user interface had to adapt to new standards and situations. The largest operating system software corporations (e.g. Microsoft, Google and Apple) have today changed their design language, visual appearance and icon design of their graphical user interface design into a more minimalistic design style.
In this post, I will only compare Apple’s icons design on iOS and OS X.
iOS
On iOS (e.g. on iPhone), Apple uses squares with rounded edges, where the icons are placed within, and the shape have the size of a finger (see figure 1).
The brilliant and vivid color on iOS helps the icons stand out, so that the users notice them against the background. The color help attain attention from the user and enhance aesthetics.
Conclusion: On iOS, all the icons have the same shapes, icon design style, and the same color palette for a cohesive and consistent user experience.
OS X
On OS X (e.g. on MacBook Pro), the icons have different design styles, color and shapes (see figure 2).
Some icons – such as iBooks, iTunes, Safari, Photos, Dashboard, Launchpad, App Store – have a round shape in form of a circle with simplified abstract symbolic icons (see figure 3).
iMovie have the same graphic design style as the two icons above, but in a star shape (see figure 4).
The realistic style icons – such as Photo Booth, Preview, iPhoto, Garage Band, Mail – employs a more detailed illustrative design style with perspective and light sources (see figure 5).
The next group of icon design has an abstract metallic looking design style – called skeuomorphic design – placed in different shapes (see figure 6).
The idea of skeuomorphism is to make digital graphics resemble their physical counterparts to make them look familiar for the user and thereby help the users understand how to use technologies and interfaces by applying some prior knowledge to them. The skeuomorphism graphics often includes effects such as reflections, bevels, gradients and drop shadows, and uses realistic faux materials such as simulated wood, fabrics, metal and glass to imitate the real-world materials.
On OS X, different color are being used on different icons, (as can be seen in figure 3, figure 5, and figure 6).
Conclusion: On OS X, the icons don’t have the same consistent user experience (e.g. regarding shapes, icon design style, and color) as can be seen on iOS.
Finally, with the multiple options and possibilities today for the human-computer interaction, a well-defined graphical user interface design (with the included icons) can be one of the solutions from the operating system software corporations for giving the user a cohesive and consistent user experience on multiple devices, in spite of the increasingly digital ubiquity and complexity that happens around us.