This article looks at some of the most notable examples of the style that Apple is making popular on the iPad in iOS, and weighs up the pros and cons. Is skeuomorphism the future of interface design?
It is a style that Apple have been been utilizing for a long time, but lately seem to be pushing very hard. In particular on the iPad, which is a veritable smorgasbord of skeuomorphism.
This is without a doubt the hot topic at the moment when skeuomorphic design is being discussed or debated. With the release of OS X Lion, Apple decided to bring the look and feel of Calendar for the iPad to it’s desktop counter-part iCal.
Some people love it, and others hate it. But the interesting thing about this example is that it used to be different. So unlike with most designs, we actually have the simple, clean version to directly compare it to.
Reason 1.0 was released in 2000, and unlike most existing DAW (Digital Audio Workstations) at the time, it featured a heavily skeuomorphic interface. Not just the dials and sliders on instruments, but the whole interface emulated a hardware rack and could even be flipped over to play with the virtual cabling.
76 Synthesizer isn’t the first app to appear on the iPad that mimics the look of classic synthesizers and other instruments. Garageband from Apple, for example does it’s fair bit of that too. But we chose 76 Synthesizer because it is arguably the prettiest app out there doing it right now.
76 Synthesizer is a joy to use, and it just wouldn’t be same without it’s realistic, textured interface. It could be argued that this is because it’s not strictly a productivity app, so a big part of it’s appeal is in it's immersiveness, and the experience of using it.
iBooks for iOS simulates a lot of the elements of reading physical books, from the wooden bookshelf that all of your titles appear sit on, to the action of turning pages, and being able to see what’s on the next page gradually before you’ve actually completed the action, just like real books.
Apple were careful not to compromise on usability in iBooks, by allowing you to simply tap the edge of a page to turn it, rather than requiring the swiping action every time, it actually made the experience easier than turning a real page. Which is very important, especially on the iPhone version when it could potentially happen 100’s or 1000’s of times per read.
The Calculator app for Mac and many other calculator apps, have all decided to emulate the layout of real, physical calculators. Which when you think about it, is a bit of a head-scratcher.
From a usability stand-point, there isn’t actually any reason to emulate a small digital screen, or to have big number buttons on a desktop calculator app. All desktop or laptop computers have some some kind of keyboard for inputing numbers. And it isn't any easier to click big buttons with a mouse, than use the keyboard.. so it can only come down to design for the sake of familiarity.
The OS X dashboard and it’s widgets are intended to provide the user with information quickly and easily, much like glancing down at the dashboard of your car whilst driving. So it’s understandable to see that the OS X dashboard is ripe with skeuomorphic designs.
Widgets resembling real world objects allows us to instantly recognize their purpose, and differentiate them from each other. We can quickly associate the yellow square as a sticky for jotting down notes, and the analogue clock for the reading the time.
The design principles behind Metro are similar to those of the Swiss style and Minimalism. Basically, the content should always be the star of the show, and there shouldn’t be any superfluous graphics, text or effects. The Metro style also favours big interaction areas, rather than small buttons.
Text plays a big part in the Metro design style. It isn’t as some people believe the most important thing (we’ve established that that is the content!) but it should clean, elegant and hierarchical. Text in Metro interfaces usually utilizes size to differentiate importance.
One thing Metro definitely doesn’t condone is skeuomorphism.
"Metro is our design language. We call it metro because it is modern and clean. It is fast and in motion. It's about content and typography. And it's entirely authentic."Microsoft
Microsoft’s upcoming Windows release has been announced, and we can see from the consumer previews that it is heavily adopting the Metro design language.
Windows 8 is designed for both touch interaction on tablets, and phones and mouse interaction on desktops and laptops. Although the default setting is the Metro design view that can be seen in the screenshot to the right, Windows 8 will also feature the classic desktop view that current and previous versions of Windows use.
Thanks for reading, as always we’d love to hear your thoughts! Where do you stand on the skeuomorphic front, do you love the attention to detail, familiarity, and visual treats of a good skeuomorphic design? Or do you agree with the Metro design language, and believe that content should be the focus, and eye-candy is completely unnecessary?