Co.Design

Can We Please Move Past Apple's Silly, Faux-Real UIs?

Teague’s Tom Hobbs argues that UI designers need to stop aping real-life bookshelves and suede calendars like Apple does, and go for a new philosophy: Just enough is more.

In recent years, the aesthetic of UIs has followed a dominant ideology that attempts to replicate the physical world. With a handful of software/product updates and new releases in the last few months, we’ve begun to see how it might be time to find a new balance (see Clive Thompson’s article in Wired and Sam Biddle’s on Gizmodo.

As both Thompson’s and Biddle’s articles describe, the philosophy that drives the majority of contemporary UIs is called skeuomorphism. Derived from the Greek words Skeuos, meaning vessel or tool, and morph, meaning shape, a skeuomorph is, according to the Oxford Dictionary, a “derivative object that retains ornamental design cues to a structure that was necessary in the original.” The term can apply to either a physical or digital creation. In other words, it means to replicate the form and material qualities of something that are no longer inherently necessary, all with the objective of making new designs “look comfortably old and familiar,” Nicholas Gessler writes in “Skeuomorphs and Cultural Algorithms.” When applied to UI, the logic here is that it will make the interface more intuitive and usable, as the user will understand how it functions based on their knowledge of the analog object it is replicating.

There is validity to a skeuomorphic approach. To create any good interface, it is essential for the designer to understand the cognitive models that a user brings to any new product. Designers have to take into account the conventions and operational principles of the products and services that the users are familiar with, even if it is simply just to know how to evolve. Clearly a great deal of objects and tools we use could do with the attention of a good designer or design team, but there are also plenty of highly refined design solutions that embody fundamental design principles, conventions, and years of collective refinement that there’s no need to attempt to reinvent the wheel. The e-ink–screened Kindles are examples of how this was done with great success. The products carry over just enough of the fundamentals of editorial design and the conventions of physical books--that took 400 years to evolve--to make it feel appealing to avid readers and comfortable for them to use.

However, how Kindles replicate physical books is very subtle. Kindles do not rely on material aesthetics in quite the same way many skeuomorphs do. The design is underpinned by typographic and layout conventions (i.e., the positions of page numbers and chapter names, for instance), allowing the aesthetics of the UI page to recede enough for the reader to become immersed in the author’s word--a quality, as any good book designer will tell you, the design of a book should facilitate.

Unfortunately, the iPad book app doesn’t achieve this level of sophistication. It’s much more theatrical (as someone probably felt the need to take advantage of that fantastic color screen). The app employs elements like an overly rendered paper texture and faux page-turn animations that make it difficult to become quite as immersed in the prose of an author as the Kindle’s e-ink design allows. In many ways, the iPad book app feels like it was designed with the intention to look simply like a book, whereas it appears the Kindle was intended to feel like a book for those who love to read and want to.

The point is that there’s something that feels gratuitously obvious about the philosophical approach Apple takes to the design of the iPad book app and many of its other recent application designs. It’s very easy for skeuomorphism to become a crutch and a way to justify lazy design decisions: “This is what is familiar to users, and this is what they understand.” Digitally re-creating real materials and analog objects very quickly becomes aesthetics for aesthetics sake. It’s hard to believe that all but a minute percentage of Apple’s user base has a tan-suede–bound calendar or book of any sort, or anything else that looks remotely similar. Unfortunately, these are the characteristics of skeuomorphism that a vast majority of UI designers employ when they use this approach (see Blackberry’s Playbook). Ultimately, it encourages designers to become less critical and less inventive, which is detrimental to evolving new and improved solutions.

While novel interfaces for the sake of novel interfaces are bad--see 90% of old-school flash-based websites--innovative solutions do stem from constructively exploring something new. For this reason, we’ve lost many of the inquisitive thought-provoking gems, like David Small’s early studies of dynamic 3-D typographic landscapes, that looked like they would have long ago spawned new ways to explore and interact with information.

However obvious Apple’s skeuomorphic approach to UI might be, it’s an approach that is hard to argue with. The company is still considered highly innovative, and the success of its products is unprecedented--most would successfully argue that it’s by far the best we have. But aside from aesthetic reaons, it is hard to see how these designs will ever evolve beyond derivative representations. Will they just change color and increase their visual fidelity?

As Kurt Andersen argues in “You Say You Want Devolution” in the January 2012 issue of Vanity Fair, Apple’s approach to UI design may just be another example of the gestalt. He points out that technology has radically changed how we live, but the underlying cultural philosophies that drive aesthetic and visual fashion have remained largely unchanged for 20 years (it’s the first time that has happened, ever). It has been a long time since a car design seemed uncomfortably radical (in fact, we have a ton of reissues instead), and Madonna has simply morphed into Lady Gaga. Like the 27 film sequels that made 2011 the record year for such things, perhaps Apple’s digital re-creation of things we know and love is simply just a sign of the times?

Breakthroughs Can Happen When We Drop Skeuomorphism

The issue is that when people are critical and thoughtful enough to conceive new ways of instantiating interactions, truly interesting things start to happen. Take Soulver, a Mac-based calculator that does away with the standard method of simulating the typical layout of calculator hardware. Instead, the design harnesses the advantages of computers to understand natural language. Rather than entering equations using a grid of buttons, calculations are done by entering phrases: “$45 for dinner + 15% tip” is certainly a lot more intuitive than figuring out the right series of buttons to press to calculate: ((45/100)*15)+45. However, this Soulver is primarily about addressing the function of a calculator, with the layout changing by default. It doesn’t inherently negate using realistic rendering within the UI.

Soulver’s ingenious, natural-language approach to calculation.

Clearly there is lot more to this debate than discussing the merits of rendering real-world materials. For example:, applying textures, highlights, and shadows to give a sense of depth, communicate hierarchy, and indicate elements that are actionable. The arguments that surround this subject have been raging among UI designers for as long as most contemporary designers care to remember--it is tiresomely old. The debate stems from the fact that these graphic techniques are largely completely unnecessary in printed material. Traditionally, well-educated and experienced graphic designers have long opposed the use of drop shadows and faux rendering on websites and in software. These designers have made sound arguments for why this approach is completely unwarranted. However, designing for screens is a different medium that has radically different characteristics than paper and ink. It, therefore, requires a different approach and different thinking.

In reality, designing interfaces has as much of a relationship to the design of physical products as it does to graphic design. As we continue to evolve a new discipline of UI design, careful and judicious consideration needs to be given to applying the principles and techniques of both disciplines. Not only do colors behave differently through a backlit--as opposed to reflective—surface, posters and printed pages don’t have actionable areas. Unlike either physical hardware or printed material, UIs can animate, morph, and transition to different views and layout states. UIs are not static. This is especially true of UIs that are created for ever-improving graphic processors and screens with higher and higher resolutions. This presents evolving challenges that require completely new methods and approaches that are influenced by film, animation, and title design, among other things. In short, based on the practices of a single discipline, to dismiss categorically digitally re-creating real-world materials in UI or rendering buttons to look like physical buttons is naïve and indecorously black and white (even as users become ever more accustomed to digital interfaces and content).

Of course, aesthetics affect function in both good and bad ways. The visual treatment of a UI can inspire emotive qualities that can make a product more attractive and rewarding to use. For example, the nostalgic analog aesthetics that are applied to apps like Instagram and Hipstamatic are what make them so appealing, even if this approach ultimately hinders an “efficient interaction” and optimum usability. While there are interface improvements that the current paradigm of cameras could surely benefit from--radical approaches to new types of cameras like Lytro are very welcome--the current retro-analog focus of much of the digital camera world is irresistibly beguiling (take for example, Fujifilm’s x100 and x10 and Leica’s cameras).

The Backlash Response: Microsoft’s Metro Language

Fortunately though, there are mainstream examples of UIs that venture away from the safety of skeuomorphs. Microsoft’s Metro design language, first deployed on the Windows Phone 7, is an exquisite example of what UIs can be if we free ourselves from being obviously derivative. As a designer, it is hard not to be in awe of the pure and principled delivery of the design language that achieves such an admirable balance between looks and function. Metro is not just design for design’s sake. Using the principles of wayfinding and signage to drive how the design language was conceived, the proposition of Metro is arguably a better consumer play than any of the alternatives.

What is less admirable is that the Metro design language has become the way of justifying the cause of the anti-skeuomorph zealots. While the design philosophy behind Microsoft Windows Phone 7 and more recent instances (Xbox and the forthcoming Windows are successful attempts to create interfaces that leverage the unique characteristics of screens and their graphic capabilities), it is difficult to accept that these are simply contemporary expressions of the Bauhaus (modernist) philosophy. In the book Modernism: Designing a New World, Christopher Wilk writes that the term modernism, despite the strength and breadth of the original movement, today “hides a surprising vagueness and ambiguity of meaning.” Unfortunately, the use of the term modernism is far more likely to apply to an aesthetic than as a philosophy that defined a way of life and the design of objects and artifacts that support it.

The Metro design language is lauded by the anti-skeuomorphers for its lack of ornamentation--a key tenet of Modernist philosophy. However, it’s not really that clear-cut. Compared to the yeehaw suede texture of iCal, there’s substance to this notion. But the large colored tiles and dominant use of icons and pictograms are still the dominant, albeit simple, aesthetic. Sure, these graphic elements don’t use “superfluous” drop shadows and renderings, but they don’t really use space any more efficiently than many skeuomorphic iPhone apps. It is highly debatable whether they need to be as graphically dominant or whether the aesthetic form is purely driven by function. Metro’s graphic elements are largely abstracted representations of their function, so from a modernist point of view, it is interesting to think of what else could be stripped away to enhance their function. The app Flipboard, for instance, is far more stripped back and has far less ornamentation, though there is admittedly more “user content” —magazine covers, photos and so on--to drive look-and-feel. Another better example, from another company not known for their design, is Google’s Gmail.

Really, iCal? Suede?

A key element of Modernism’s drive to remove ornamentation is being faithful to the characteristics of the materials from which the “thing” is constructed. With this in mind, the Metro design language is often hailed as being authentic to inherent visual characteristics of digital screens: Pixels are treated as pixels. In the past, when the square blocky form of the pixel was so obvious and digital colors so distinct and limited, this notion made sense. However, for all but a tiny fraction of devices (especially those that deliver the Metro design language), these days are long gone. Ultra-high-resolution screens have pixels that are so small that they are barely distinguishable without very close inspection. Color is no longer any limitation--for example, 24-bit color pixels produce 16,777,216 possible colors, allowing a pixel to appear dull or bright, matte or shiny. The capability of modern screens and processors means there is no longer any analogy to be made between pixels and materials like concrete, paper, or brushed stainless steel--all of which have a distinct, undeniable, and unshakable aesthetic. A pixel can effectively take on almost any aesthetic and replicate almost any form. If the medium has no inherent visual characteristics, there’s almost an argument to be made that a skeumorphic UI calendar is truer to the key Modernist principle “form flows function” than many of more inventive approaches employed by Metro design.

Certainly, there’s been a very successful attempt to reduce visual clutter in the Metro design language. This clearly follows Dieter Rams’s “as little design as possible” principle. However, ultimately it doesn’t achieve the same level of subdued minimalism displayed by the products Ram’ created for Braun, or, ironically, that Ives has created Apple. Metro’s colored tiles, distinctively refined icons, and black backgrounds create a distinctive visual character that is much more aesthetically vibrant. While this is not quite ”less is more,” it’s certainly nothing to be scoffed at. It’s a bit more like Milton Glaser’s “just enough is more," which is a more workable philosophy for screen UI. And in any respect, this distinctive visual character is entirely necessary when you think of the role the Metro design language plays in manifesting a tangible brand presence for Microsoft in its products, while avoiding the trappings of a heavy-handed corporate identity.

Fussy to the max: iPhoto’s email-sharing interface.

The Value Of Stripping Things Bare

All in all, when creating UIs it is important to have established a strong philosophical point of view, with a clear objective that is supported by a coherent set of principles. But this isn’t where it ends. Of course, it essential for this point of view to have some substance--designers need to be able to articulate how their solutions relate to long-established design philosophies, movements, and methodologies. However, the field of UI design is still evolving in its own right, so the influence of other disciplines of design is just that: an influence. The distinct camps that exist today are largely based on theoretical, subjective opinions. There’s a lot of making and thoughtful critical analysis to be done of the solutions we create before we evolve approaches and philosophies that are truly unique to the discipline of UI design.

To do this, we need to design UIs that are stripped down as much as they can be. This means avoiding superfluous and gratuitous ornamentation, both visually and through how they move. But this doesn’t just mean focusing on “raw” elements that just support function. It is not simply a case of stripping everything back to the point of a handful of elements for the sake of being minimal; that would be simplistic. As with film, there’s an opportunity to delight by incorporating elements that are there purely to serve emotive purposes. This is why the philosophy “just enough is more” is rather more important than just simply “less is more.” It is about scrutinizing everything, so there is a clear, purposeful rationale for every element. This means that all the elements and their layout support the primary objectives of the device and/or application. To do this effectively, it is not possible to achieve success without thoughtfully considering the ways we interact and use products in the physical, analog world. Otherwise designs are just far too cognitively taxing. However, this doesn’t mean just digitally re-creating or simulating analog models for the sake of familiarity--we all need to be constantly checking our metaphors to make sure they’re making sense. We need to be cognizant of how much of the pre-internet world is now completely obsolete and unrecognizable to any one under 20. (Ever watch a perplexed three-year-old try to identity the icon of a rotary phone ?)

At the end of the day, there’s always a temptation to go with the familiar, but the real value is going to be found elsewhere.

[Image: J. Helgason/Shutterstock]

Add New Comment

182 Comments

  • Talentonloan

    Ogg Ogg!  Me Like  Skeuomorphism!  Me like shiny!  Me guess that make me a troglodyte.  Me think that beautiful Icons not bad thing like a raptor eating little brother. Me think Metro-esque design is visual Lunesta.  Me notice that many other non-evolved trogs on shiny picture box feel same. Ogachaga Ogachaga!

  • Samuhka

    There is nothing new in Apples or Windows 8 design. Ther is no Apple style or Metro Style

    I`ve been doing both, Flat or rendered, even Hybrids designs since 2001;

    You don´t have to be a genius to understand that these are just different ways to express and communicate visually.
    You just have to evaluate and decide which one is proper for for the message oyu want to create

  • luke zankich

    "Just enough, is more" = LAZY design. Period. If humans liked things devoid of ornamentation, women would not bother with jewelry or makeup, our cars would be a simple 16 color pallete, we wouldn't bother with architectural elements, our houses would be boxes with plastic siding and flat roofs.  The simple truth is that humans LIKE ornamentation! The success of the iPhone is so much function (it is pathetic compared to Android or Windows Phone), it's success IS due to the skeuomorph design elements. Beyond just liking ornamental design, we need, like you mention, the clue to what a button does. The failure of Metro is as much it's lack of ornamentation as it is the HIDDEN features. Also, let's face it. We enjoy having a cheering photo as our wallpaper. Find me a mother's iPhone who doesn't have a photo of the kids a the wallpaper.  I'm sorry to disappoint all the arrogant know it all's designing modernist UIs, but people just don't like them, it's time the modernist approach be junked and graphic designers learn a little psychology. 

  • David Gish

    You had my attention until you hailed Microsoft's "Metro" UI as a paragon of design. This isn't design for design's sake? What do all those garish colors (straight from the Windows 3.1 palette) convey? In your screenshot, the "Maps" and "Messaging" panes are the same hideous violet, and what do they have in common? They both start with "M"? Oh wait, "Music" is orange... and so is Facebook. How is that a functional use of color? The images for "Desktop" and "Photos" don't convey anything either and could easily be swapped. To discover their purpose we have to read the fine print. And these are all randomly dropped into a faux-Mondrian layout atop equally garish wallpaper from 1971. What, if anything, redeems this jarring eyesore? If this is the future of UI design, give me skeuomorphism any day.

  • Jim

    Nope. Tom Hobbs, you have a lot to learn. Skeuomorphism is not all bad and useful in many ways for cross-cultural UI. Microsoft's Metro style is trendy crap. It was dated well before Microsoft jumped in. Does everything need to be flat and without form? No need for tactile intrigue? Light and shadow are not welcome? I don't want to live in your sterile world.

  • Jimmy Cache

    Agreed. I hear my high schoolers in the background, even as I type this, watching the conference, screaming, 'No!!! It looks like Windows.' And the neon is quite possibly going to be out of style in the fashion world before the 'upgrade' is even available.

  • Joe Wilson

    So just to get this straight, the Kindle & Windows Mobile 7 are being applauded here while Apple is being derided. It seems like a designer's ideology has more weight than the populations preference in this article. The new Windows design ascetic is terrible - TERRIBLE. It employees ugly colors, and about million ways a user can screw up the attractiveness of their UI. I'm not defending 'Find My Friends' overuse of leather & stitching - but the iPad is the only computer my grandma has ever owned and understood. It offers her real value with a minimum learning curve - much of this I think can be attributed to the visuals that jive with real-world interactions she already understands.

    Also, I wouldn't worry about design not evolving while skeuomorphism is popular. Everything evolves & adapts, or it dies. 

  • spacemonkey82

    apple hardware is just beautiful. the software not so much. ios design looks tacky. 
    i am surprised the article didn't mention android design since ice cream sandwich and above design is amazing - really refreshing!

  • Please

    See, your argument would make sense if these things were getting in the way, but they don't. They actually do serve a purpose. All of these things, INCLUDING THE SUEDE (YES, APPLE USED SUEDE!), serve as a natural mapping from one thing to another. So, what if we uprooted the design? You make it seem like we would be more likely to go toward something better without making a strong case. To be honest, I like the suede. It reminds me of an old calendar I used. Hmmm... now I wonder why they used the suede. The functionality will not be destroyed by the suede. It's okay.  

  • Brap

    You said it yourself... technology has radically changed how we live in the last twenty years so it's fair enough if we accomodate that radical mental shift by still using our hands to control our lives. Not everyone in the world is as tech and design savvy as yourself Tom, most of my design clients are useless! So I think it's fair enough if electronic retailers choose to make their products a bit literal to help them sell their constantly more advanced stuff to the masses.

  • Bron Pedulla-Smith

    While I do see the point that you are making here, Apple does go overboard on the realistic designs, there is something to be said about skeurmorphism. They entertain users and make pieces of technology fun to use. The reason Mac OS X became popular to begin with was because it went away from the boring design of Windows 98 and 2000 and brought in colorful new UI functions such as the Aqua scroll bars and buttons. It was simple, yet nice to look at. Do we really want to go back to the black and white of the Wndows Classic theme? I certainly don't. And while I would like to see some simplification from Apple's apps, I still want a design that is not only easier to use, like that calculator app, but also fun to use.

  • When

    I have to say, of all the interfaces you could have lablled 'Fussy to the max', iPhoto's email-sharing interface isn't the best example. All of the necessary fields are presented in a very clear and uncluttered way. No additional guff is displayed. To, Subject, and From fields, the Message Viewer pane, the list of available templates down the right hand pane and the send/cancel gadgets at the bottom. You don't get much clearer than that. A much better example of clutter would perhaps be Microsoft Office's 'Ribbon' interface. It's a visual mess with icons of all different styles and sizes mashed together in no discernible pattern leaving it difficult to find basic functions even when the button is huge. Strangely, Microsoft's Apple division kept away from this for the Mac versions of Office and kept things simple with menus and palettes and did a much better job of presenting vital information to the general user without hiding (too much) more advanced features from seasoned users - it makes a great side by side UI comparison, particularly because they're both from the same company.

  • ghostshadow

    I have to agree with some of the commenters here. While it was a good article, at the same time it seemed somewhat biased because it's assuming Apple is the only company that implements skeuomorphism into their applications.  While I agree, some applications can be rather tasteless with these design elements, some really do offer the user more interactivity.

    iBooks was discussed within the article. I feel the interface benefits the user because it feels like you're actually reading a book instead of text on a blank page without any connotation that you've changed pages. I think some elements don't fair well unless they are emulating real-world items.

    I do think that some designs could do without emulating real world objects, but at the same time, I see the benefits of the use in certain applications. I think that some reservations could be made within design choices to streamline certain designs.  If the skeuomorphism was reserved for only specific elements like switches, buttons, and what not, it might fare well in keeping a concise design throughout an operating system. Some operating systems are somewhat fragmented when it comes to design elements.

    I however don't think it's fair to single out Apple. Too many people are bagging on them because they are popular..

  • Raja

     mm.. it is so easy to use a software if it is having connection with real world objects.

  • Nicevector

    seems like more thought has been put into how you think Apples' GUI is less forward thinking than providing a solution or a better alternative. I think that some iconography is simply more intuitive to start with especially when considering real life objects that are still in use. And how does the Metro design use differ when you consider a shopping bag icon for a store and headphones for music?

  • Skido11

    Only programmers wanted to use computers in the old boring black screen/green text days. Wasn't it Xerox who came along with a fun way to look at things for a Luddite? I've always thought that Apple does well at hooking in the average person who lives in a visual world and likes zing bang wow; and creative types who also work well with images. The PC way always seemed good for programmers that don't want all the flashy goo. So there's a few schools of thought. Perfect. Metro reminds me of going back to black background/green text for those types, and Apple will stick with people who just enjoy having fun with their gadgets and not thinking about it. Seems like a fair world. Choice is still out there.