Forward-Facing Interfaces – Treating Pixels as Pixels
Drew McDowell
There’s a schism happening in the world of interface design. Seeing that we design interfaces every day, it’s important that we take note, if not take sides. The debate is over a design concept known as skeuomorphism, and while the discussion is, by definition, cosmetic, it gets to the very core of how we interact with the physical objects of the past and the digital objects of the future.
What the heck is skeuomorphism?
- skeuomorphism
- a derivative object which retains ornamental design cues to a structure that was necessary in the original
Apple has been the ultimate abuser user of skeuomorphism. It’s evident in almost every app they’ve baked into the iPhone and iPad.
The calculator app looks like an escapee from a Texas Instruments factory, with rounded, beveled, glossy buttons on a textured plastic body, positioned beneath a black-and-white (green) LCD display. The Newstand app features printed magazines and newspapers resting on a wooden shelf. The iPad’s calendar app is “printed” on an embossed-leather desk calendar complete with torn paper remnants still visible from the previous month. The music app features a volume slider with a machined metal knob, as if pilfered from the JVC tape deck in your attic. Heck, the light-reflection on the knob even shifts as you tilt the phone!
Everywhere you look in iOS is textures, reflections, drop-shadows, beveled-edges, and any other gimmick to make you look at a digital button and make you believe it’s a physical one. That’s skeuomorphism.
What’s the alternative?
Microsoft, meanwhile, (emerging from around the street corner singing “When you’re a Jet, you’re a Jet) has introduced a daring new design language with Windows 8 and Windows Phone 8. The interface, formerly known as Metro, is hallmarked by large, flat, brightly-colored “tiles” with simple icons and even real-time information filling each tile. Microsoft isn’t the only one making waves. Google too has intro’d a new design language (Holo) characterized by flat icons and stark colors.
Why are we talking about phones?
We at Red Sage aren’t software developers, we’re web developers. But the line between software and web-ware is blurring rapidly, and smartphones have become the frontier for hardware and software technology.
So what better way to illustrate how software design has influenced web design than by looking at the homepages for Apple and Microsoft themselves?
No surprise on Apple’s homepage. Just take a look at the main menu: subdued colors, glossy reflection, translucent plastic glow, beveled edges and lettering, rounded corners, and just a soupçon of drop shadow. The glamour shot of the iPad has a slight reflection on the bottom, as if the whitewash background is actually made of glass. The four callout buttons at the bottom are somewhat akin to the menu: rounded corners, beveled edges, gradient shading, drop shadows. Check, check, and check: skeuomorphism run amok.
Microsoft’s homepage, however, takes a cue from its new software design philosophy: a colorful bold logo; floating text menu; large, bright, geometric descriptions; striking product photography (though virtually no shadow or reflection on the background); callouts of colorful imagery on flat, straight-lined buttons; other sections of the page overlaid on large blocks of color.
So what’s wrong with skeuomorphism?
It’s easy to see why Apple adopted skeuomorphism so heavily with the iPhone (not that they invented the philosophy by any means). The iPhone was a revolutionary product. It brought powerful new tools to the fingertips of geeks and grandmothers everywhere. And in order to make it easy to understand for people who’d never before operated a touchscreen device, the developers inferred the function of each app by likening it to the familiar physical counterpart that preceded it.
But it’s 2013 and people are no longer strangers to computers and touchscreen devices. You don’t have to make an on-screen button scream “Hey, I look like that thing on your VCR! Push me!” to make people realize it’s a button. Gadi Amit, designer and President of NewDealDesign, says of digital contact lists that commonly use the visual likeness of a rolodex: “I’m old enough, sure, but some of the guys in my office have never seen a Rolodex in real life. So these metaphors that were, in the early days of the computing revolution, relevant to assisting people in bridging the gap between the physical and digital worlds, are no longer necessary. Our culture has changed. We don’t need translation of the digital medium in mechanical real-life terms. It’s an old-fashioned paradigm.”
In fact the practice of making a visual connection between two totally different ideas, while useful in the beginning, can lead to confusion and frustration. Legendary designer Yves Béhar balks at the iPhone’s aforementioned Newsstand and iBooks apps: “The digital bookshelf doesn’t really work like a bookshelf. You’re throwing all this extraneous visual noise at me and it’s confusing. My brain, which is used to the physical bookshelf, is confused because of the differences in usability. It’s cute, but not particularly useful.”
In what you might consider evidence of reverse-skeuomorphism, digital interfaces have become so ubiquitous that even analog objects, the very objects to which these digital interfaces pay aesthetic homage, are starting to embrace digital interfaces themselves. Even thermostats, of the most commonplace of domestic items, have moved from dials to levers to buttons to touchscreens. It’s only a matter of time before most every TV remote, coffee-maker, and car stereo replace their single-function buttons with multi-tasking touchscreen interfaces. It isn’t hard to see the benefits of this when you think of all that can be accomplished with a blank screen and the right digital interface.
For example, Microsoft’s new aforementioned Windows operating system strips away all vestiges of physical objects in order to display the most relevant, current information in an organized and beautiful interface, with an emphasis on customizing every aspect for each individual.
This is the kind of versatility that digital interfaces offer. Every millimeter of a screen can be changed to deliver users the best information and the best experience possible. This is especially important when you consider that, while the physical world is infinitely large, your connection to the digital world is limited by the screen size you can fit in your pocket, or on your desk.
To portray pixels as plastic is to betray their potential.
Prologue
What should I do?
Nothing at all. Just know that the brilliant minds here at Red Sage think about this kind of stuff every day in our never-ending quest for innovation and quality.
Sources:
Images of Windows Phone 8 from Microsoft.com
Image of Android taken from android.com
Quotes from Co.DESIGN article: Will Apple’s Tacky Software-Design Philosophy Cause A Revolt?