How Print Design is the Future of Interaction
This post describes “How Print Design is the Future of Interaction,” a talk I gave at SXSW Interactive on March 12, 2011. The slides from the talk are available to view on Slideshare, and you can see some of the discussion that followed on Twitter here.
Intro
There are three areas that I covered in the talk. First, how the visual language of UI has evolved and been shaped in to what we find in the interfaces we are familiar with today. Second, I’ll discuss why I think a new approach to the visual design of interfaces, influenced by Print Design, is emerging and necessary. And finally, why I think Print Design is an important influence to the next evolution of UI, and what we (as UI and Interaction Designers) can learn from the discipline of Print.
When I talk about “Print” here, I’m not interested in the literal transfer of printed media on to screen, like we see in some applications which try to recreate the exact textures and layouts of newspapers, for example. What’s interesting for me is the broader practice of designing for print over the last few hundred years, and the resulting principles of design and information communication which they’ve refined. It’s those fundamental principles of Design which I think have a huge amount of relevance and are important to Interaction and UI Design.
A brief history of Interaction Design
If we trace the history of modern User Interface, it all begins with Vannevar Bush’s Memex machine. In a 1945 letter to the editor in The Atlantic Monthly, Bush described a machine built in to a desk, that would allow its owner to store, annotate, and link documents and media. The interface to the desk was two displays; one would display information, the other was a surface for taking notes, annotations, or linking to other material. The machine would help humans organize large collections of knowledge, and is regarded by some as one of the original blueprints for the modern web.
At the very least, the Memex was an important inspiration for the first computer designs at SRI and Xerox PARC, which formed the foundation for the PC’s we use and live with today. In 1973, the first graphical user interface was built at PARC, using the desktop as a metaphor. The UI introduced windows, icons, menus, file management, and tool palettes. Looking back at the screenshots of this first GUI, the designs feel familiar even now. In 1974 PARC developed a What-You-See-Is-What-You-Get cut & paste interface, and in 1975 they demonstrated the first pop-up menus. The desktop concept was pushed quite a bit further by 1981 in the commercial Xerox Star PC interface, which was an important influence for the PC UI’s created at Microsoft, Apple, NeXT, and Sun Microsystems. In the 80’s and 90’s, the metaphor was extended (with much less success) to include other tangible objects and environments such as offices, bookshelves, doors, hallways, people, animals, and even streetscapes in Magic Cap and Microsoft BOB.
Fast forward years later to modern PC interfaces and you can see those same initial metaphors and design patterns have firmly cemented themselves. The increase of resolution from 16 to 32 bit saw UI rendered in increasingly greater detail. The extra pixels and colors gave our metaphors the textures of real materials, including bevels, glows, shadows, reflections and gloss. Controls are rendered as knobs, switches, dials, tools, and three-dimensional buttons to evoke the familiarity of their analogy counterpart.
The extreme rendering of interface elements has become sophisticated, but hasn’t subsided. Media, like books, photos and music, are packaged and presented with outdated details, shading or textures to simulate the look and feel of real world artifacts. While most mainstream UI’s rely on simulated texture, drop-shadows and lighting effects to mimic the materiality of their metaphors on an upright 2D plane, some concept interfaces like Bumptop push the desktop metaphor deeper by adding a 3rd dimension to the desktop, and physics to the icons to allow them to move more realistically across the desktop surface. On the web, the Web 2.0 aesthetic streamlined and cleaned up the look and feel of the desktop, but the metaphors and textures remain. As computers have become faster and resolution surface higher, the focus of visual UI design has been on polishing metaphors rather than exploring other approaches: more detail, more shine, more texture, more depth, more shading, more transparency. It’s as if we are trying to rebuild the physical artifacts around us inside of our computers. But that approach makes less sense today than it did 30 years ago.
Because of bandwidth constraints and limitations of rendering technologies, UI development on the web saw a different approach from UI on the desktop. The focus on the first web sites was on delivering only the most essential information, which came in the form of text and links. Over time, websites added more information and more content, such as photos and videos, so the design of websites has been primarily focused on improving the organization and interactivity of that content. Rather than recreating and polishing physical control metaphors, the web polishes the information instead.
Artifacts and Information
The first interfaces were built on a need to communicate what they were. They were like a desk, but better. They were completely new, so an approach of direct representation was appropriate. To understand that a word such as “ok” was a new kind of action; surrounding it with the texture and shading of a button made it clear that it should be pressed. Today however, most onscreen content is assumed to be interactive. The literal analog affordance is no longer necessary, and yet, it’s the default path that so many interactive experiences follow. We don’t need to make an eBook look like a book for people to understand how to use it. The book isn’t the cover and binding, it’s the images and the text that make the story. Similarly, a movie doesn’t need to look like a DVD on a shelf to understand that it belongs to a collection, and an audio mixer doesn’t require cables and knobs to be capable as a tool, and a Notebook does not require leather and a spiral bind to be familiar. In the early days of interaction design when software concepts were best explained through heavy handed metaphors, the familiarity of these objects and textures was appropriate. However, the rendering of artifacts has outlived its usefulness as the definitive approach to UI design. As Designers we should be critiquing it for what it often is: shallow, meaningless, and often distracting from the information it surrounds.
“Leather buttons…feels very much like real leather buttons would feel: Tacky. It feels wrong and it is wrong. It’s kitsch. If you favor style over function to make something look like something it is not, you are not a product designer, you are an illusion artist.”
- Oliver Reichenstein
“Chrome arises from a chronic case of object-envy. We like interacting with physical objects in the real world, goes the reasoning, so it will presumably be more pleasant to interact with computer software if it pretends to be a physical object too. But why?
- Steven Poole
Functionally speaking, the use of analog metaphors are at best limiting, and at worst, misleading. I expect that my digital and networked content has new and superior capabilities compared to that of my physical and unconnected content. The new interfaces that are needed to support these emerging interactions continue to break down the usefulness of any surrounding analog metaphors, if they aren’t outright hindered by them. For so much digital content, there is no good metaphor to render anymore – the content is just information, text and images – so new approaches to visual UI design are needed. In an age where our interactions are information-based rather than tool oriented, a visual communication language that is hinged on arcane artifacts is no longer relevant. The value of interfaces today is the information it wants to present, not the physical vessel that the information once resided.
“…a networked, digital, interactive copy of, say, the Tao Te Ching is simultaneously more and less than the one I keep on my shelf. You give up the tangible, phenomenological’isness of the book, and in return you’re afforded an extraordinary new range of capabilities. Shouldn’t the interface, y’know, reflect this?”
- Adam Greenfield
This change in value deserves a change in expression. Interface mechanics themselves are no longer something that needs to be explained or reinforced. As interaction designers, our role of making UI’s familiar as tools has shifted to one of communicating vast amounts of connected information. It tilts the form and function balance from a focus on how things work to how information and meaning is conveyed. The visual quality of UI is critical, but, today we owe more to the existing look and feel of digital devices to the engineers at SRI and Xerox Parc, than the early leaders of information design such as Paul Rand, or Massimo Vignelli...
Learning from Print
As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. The movement of the International Style – or Swiss Style – in particular established a way of thinking that is particularly relevant to challenges that concern Interaction Design now.
The International Style rallied against the overuse of ornamentation, embellishment, illustrations, and decoration that was common in graphic design prior to the 1950‘s. Functionally, the International Style created a foundation for thinking about information that is very useful for UI Design: a mathematical grid for organizing information, a tight structure, iconography that is recognizable and memorable, simplicity and clarity through the fierce reduction of clutter, authenticity, objectivity through photography, and a keen attention to detail. Even as Graphic Design has continued to evolve, those principles of design persist as a foundation in contemporary Print Design practice today.
In 1999, Jakob Nielsen stated that “Anything that is a great print design is likely to be a lousy web design. There are so many differences between the two media that it is necessary to take different design approaches to utilize the strengths of each medium and minimize its weaknesses.” I disagree. The design principles established through the history of Print Design are also true for Interaction. In our exploration of the differences, we’ve forgotten how much they are the same. They are both about clarity in communication and simplicity through systems. I believe we can learn from Print Design and apply to Interactive experiences:
1. Hierarchy and Structure with Grids
“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”- Mark Boulton
Much of Interaction Design is about reducing complexity. A grid system organizes information in a logical, consistent, and meaningful framework, which both designers and developers can work within. A grid provides anchors for the eyes, improving readability. Strong use of geometry in a layout creates a visual hierarchy that allows users to easily scan and discover information.
2. Confident use of Negative space
“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove” - Antoine de Saint-Exupery
A common goal of UI design has been to densely pack as much information as is possible on a given screen. However, giving content some space to breathe provides critical focal points. It allows the positive space to communicate clearly and create impact. A balanced page makes the promoted information more easily digestible.
3. Reduction of Elements
“Less is More” – Robert Browning
“Make everything as simple as possible, but not simpler” – Albert Einstein
UI elements clutter the content it contains. The role of the designer is to edit, to find balance. Reducing an interface to only the most essential elements puts focus on the primary tasks of the UI. What may be lost in information density is gained in simplicity. The resulting UI will feel light, smart, easy, fast and responsive.
4. Objectivity through Imagery
Though much of Swiss graphic design is remembered for its powerful use of typography, photography was also an important part of the style. Photos were seen as a more accurate means to convey information compared to illustrations. Similarly in a UI, it’s the content that people want, not the chrome. Using imagery instead of iconography or illustration reduces the need to translate metaphors, and promotes direct interaction with content.
5. Emphasis on Typography
Emphasizing typography is not about reducing an interface to only text. Good type is about appreciating the ability of type to create impact, hierarchy, direction, and rhythm through size and weight. Diogo Terror described the power of a typographic approach to UI well in Lessons from Swiss Style Graphic Design:
“Font-size is a tool for readability, impact and rhythm. Different font-sizes not only generate visual impact, but also provide readers with a hint about the hierarchy of the presented data. Huge words are the entry points, the top-level elements in the content’s information architecture and page’s hierarchy. This is a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.”
6. Proportion and Pacing
In Print, the proportion of elements creates a pace for a story to unfold over time. It leads the direction of the eyes over content, and gives character to the information.
7. Universal Iconography
The International Style pursued standardization and simplification of iconography so that icons were universally understood. The use of icons today has become so rampant and gratuitous that we’ve lost a lot of common understanding. They are used too often as decorative elements and are losing a lot of communication value.
Inspired by Print
There are already a lot of designers that beginning to approach UI in a way that is inspired by Print Design. A couple years ago Dustin Curtis popularly proposed a redesign of the American Airlines front page. Though he didn’t explicitly state print being an inspiration, the clean, photographic, and strongly structured result feels familiar. In my own spare time, I’ve toyed with a redesign of facebook.com using print principles. At this year’s IxDA conference, designers from Adobe cited print as an inspiration for the new Photoshop.com. At Microsoft, Print Design has been an important inspiration for a lot of work, going as far back as Encarta 95, Media Center, and more recently in Zune and the Windows Phone 7 redesign. Some other recent examples include the Nike Betterworld microsite, Edition 29, Flipboard, and the Popular Science magazine app designed by BERG London.
The Undesigning
In an essay in The Atlantic in November, Dylan Tweeney attempted to dissect the trend behind new content readers such as Flipboard and Readability. He describes the separating of content from its original format in to clean, minimalist, easy-to-read designs as “The Undesigned Web”. It suggests that users don’t want design, and are taking to minimalist, “undersigned” tools like Instapaper for relief. It’s unfortunate that “Design” has become synonymous with noise, overly graphic, heavily decorated, ornamented experiences that stand in the way of content. The problem is well described by Andrei Herasimchuk in his post, The Culture of Fugly:
“Paul Rand famously wrote: The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.
In the context of web and high-technology product design, this observation from Mr. Rand takes on special import.”
- Andrei Herasimchuk
It’s with that in mind that I believe UI design needs to look to Print Design as an inspiration and a quality bar to hold our work to. Regardless the debate of whether Print is dead, Print Design is not. We need the thinking, the aesthetic, and the quality of Print Design applied to the digital surface. And we need the designers that are skilled in Print to bring their sensibilities to User Interface design. The so-called undesigning of the web needs to recognized as the best examples of design today, not a lack of.
“I say that flat is the new black, that 2D is the new avant-garde; that a surface doesn’t have to be ashamed of being a surface”
- Steven Poole
Products like Flipboard are attractive because they are consciously and carefully designed to highlight the content, instead of crowding the experience with UI tools. The design of these experiences is being driven by new thinking in interaction design, where visual design is central to the experience, rather than painted on at the end. Once the traditional elements of UI are torn away, designers can concentrate their efforts on working iwth the content that remains. And it ends up looking a lot like Print. If we pull Visual Design to the front of the product creation process, we can break free of the bad design habits that surround us. As Interaction Designers we can stop polishing our icons, and focus on communicating the content inside, clearly and with style. The rewards are simple: more beautiful products that are easier to use, and beautifully branded experiences with more room for self-expression.
