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.
The idea is that it will make the interface more intuitive, by replicating analog objects.
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.
The iPad book app isn’t as sophisticated. It’s far more theatrical.
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?
It is hard to see how these designs will ever evolve.
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.
UI’s require completely new methods influenced by film, animation, and title design.
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.
The Metro design language is often hailed as being authentic: Pixels are treated as pixels.
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 professed by Dieter Rams. 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.
The philosophy of “just enough is more” is more important than just “less is more.”
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]