By now most iPhone and iPad users have updated to the new iOS 7 and have been shocked, dismayed or just mildly surprised to find that the overall visual themes that were so familiar are now, mostly, gone from user-interface. There are brighter colors and more animations, but the most heralded design change is drift away from a “skeuomorphic” design.
The term skeuomorph was most unknown to the general public a few years ago, but now most people understand it to be the a design element which is used to falsely mimic another material or object. The fake wood paneling decals on station wagons is a skeuomorphic design to make it look as though the sides of the car are wood. The buttons depressing and popping up on my various scanning apps are all examples of skeuomorphic design. Though it’s most talked about with computer visual interfaces now, it’s actually been around for quite some time. In the late 1800’s ancient clay pots were found that had fake rivet designs molded into them, imitating the build construction of similar metal pots.
Apple designer Sir Jonathan Ive’s design changes have purposely moved towards a brighter and “flatter” design, tossing aside graphic skeuomorphic elements which imitate real world objects. In the old iOS graphics you’d often find textured buttons that looked like they clicked up and down, green felt and brown leather with intricate stitching in the background and different colors paper to “write” on.
I was initially dismayed to hear about Sir Ive’s changes. Most of the apps I’ve made are purposely skeuomorphic in design. I like the idea of a virtual object emulating a real-world object. I wrote about my app design process for Boing Boing a while ago where I built and app that imitated a unique real-world object.
But the more I use iOS 7 the more I recognize and see vestiges of skeuomorphic design or at least real-world emulation throughout Apple’s universe. The challenge with any discussion about design is deciding where design ends and function begins. Just because an object’s design doesn’t strictly duplicate the design of previous device doesn’t mean there are not elements of skeuomorphism to be found. That being said, here are 8 interesting examples of the elements and designs of real-world physical objects still being imitated and referenced in Apple’s latest user interface:
Papers Tabs in the Contacts App
Though the app itself no longer has the outlines of alphabetical “paper tabs” along the right-hand side, the app icon does show still display the alphabet list along in a vertical line down the screen in the exact place paper tabs would normally appear. There are a million ways to navigate the alphabet, but Apple’s contact app still largely keeps the functions of a personal paper phone book my grandmother might have sitting on her phone table. Yes, there used to be tables designed for sitting and talking on the phone.
As the Wikipedia page about skeuomorphic design points out, skeuomorphs can be auditory as well as visual. The click sound that you hear when you take a picture with your iPhone is imitating a physical shutter clicking in a real film camera. It’s not needed, but it still makes most people think, “Ahh, I’ve taken a picture!” Other default sounds also harken back to a day when devices were more mechanical than digital. The click sound of the keyboard keys and the old telephone ring are two other examples of the many different skeuomorphic sounds scattered throughout iOS 7.
Okay, so the Newsstand app isn’t exactly the most popular feature on most iPhones and iPads but it does exist and people do use it. In previous versions it resembled a nicely finished wooden bookshelf that collected dust. Gone are the shadows and wooden texture, but now it resembles the light gray metal magazine display shelves you can in many libraries or airport gift shops. Though it changed color, let’s fact it: it still looks like a physical rack for holding magazines.
Video Record Button
Let’s stick with the camera for moment. When you move over to video the button that’s used to record video is a large, red, round button. No, the button doesn’t look exactly like a rounded thumb button made out of plastic, but the red circle contained within an exterior circle is awfully reminiscent of most camcorder record buttons you’ll still find in use today.
On/Off Slider Buttons
There are a number of simple On and Off buttons scattered throughout the default iOS apps that have had their false metal texture removed so that they no longer appear to be little posts you flick back and forth. But that being said, these On and Off buttons still resemble physical switches which need to be moved to the left or right to activate them. Maybe they’re now white plastic switches instead of metal switches, but they are still sliding switches.
Passbook is an odd app. There is no special skeuomorphic texture or graphic, but the functionality is that of a physical object. The icon and the movement of pages inside the app are clearly reminiscent of moving pieces of paper in and out of little slots as one might do when organizing a travel wallet. I find the emulation of sliding paper up and down to be a little bit disorienting and downright befuddling in some cases. In this case the use of a skeuomorphic function actually detracts from the usefulness of the app.
It could be argued that most elements of graphic user interfaces still harken back to some sort of physical object, and I think icons are a special case. A page of icons isn’t really that much different from a wall of large, clunky push-buttons you might find on a 1970’s mainframe computer. Each button accomplishes or starts one task.
What I find most fascinating about the new iOS 7 icons is that most of them contain imagery reminiscent of the out-dated physical objects they simulate. The Camera, Clock, Compass, Phone and Email apps specifically have icon images representing real-wold analog equivalents.
Within these apps there are more icons and designed buttons referencing a variety of nearly-forgotten objects. For example, the button for “Voicemail” is represented by a little image of a cassette tape reel. And to write a new note or start a new piece of email you still click a button which has a stylized picture of a piece of paper with a pencil.
Along with the design of the icons, I’m happy to see that the icons themselves still turn a few shades darker when they are being pushed in. This is arguably another skeuomorphic design element where the icons are emulating what a real-world button might look like when it is pressed. Like the camera click and the tapping of keyboard keys, the shading of buttons is still an important piece of feedback that’s required when one is simply tapping on a glass surface.
The Other Apple Apps
Update: As of mid November 2013 most of the other Apple apps have been made less visually interesting by having most of their skeuomorphic elements removed. There are, of course, thousands of developers who still have apps that do include skeuomorphic designs, such as my own Naughty or Nice Scanner app for iOS and even Android devices.
Though all the default apps have been redesigned to be “flatter” (and visually uninteresting in many cases), some of the most popular apps directly from Apple are still waiting to lose their skeuomorphism. The iBooks app, though not included as a default app in iOS 7, still has the wood grain shelf features. It’s interesting that Apple chose to ignore the design of this feature, given that its other media types – Video and Audio files – are almost identical in the way that you might select them: by name, by author or artist and by visually looking at the covers.
The Podcast App still has some radio needles and knobs and other oddly mechanical looking features, though it isn’t entirely based on a skeuomorphic design. The Find My Friends app, much to my delight, has not been updated and still has the leather texture with the stitching!
Goodbye and Hello to Skeuomorphism
As an app developer I tend to like skeuomorphism because it allows me to quickly connect with the user with an interface that just “feels” familiar. Most of my apps are for parents of small children. Busy parents don’t have time to read complex instructions or to try to explain things to children. They need something simply and obvious.
I also think that children are wired to naturally understand their physical world. By using skeuomorphic design in most of my apps I’m actually reinforcing how the world works. If a child knows that a button appears to go “in” when pushed, then that’s what should happen.
Whether you love it or hate it, skeuomorphism and the simulation of real-world objects in virtual user interfaces do serve a certain function and will probably continue to do so for many years to come.