Mike Kruzeniski



How Print Design is the Future of Interaction

by mkruzeniski. Average Reading Time: about 14 minutes.

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.

Introduction

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.

 

Follow me on Twitter here

35 comments on ‘How Print Design is the Future of Interaction’

  1. nstanger says:

    Excellent article. Just as an aside, your image of the “Apple Macintosh Desktop” isn’t. It appears to actually be ProDOS running on an Apple IIgs ☺.

  2. Ashkas says:

    Good run down and argument about the merits of Print Design, although I don’t entirely think this debate is new (which you allude to). I was inspired to start looking back at print/comic layout structures a few years ago after seeing a great talk from Andy Clarke where he looked at what we could learn from graphics.It was a great talk and really showed how the grid structures of comics translate well to the web, especially its use of various grids to help power story-telling.

  3. Mike says:

    So sad that Apple is regressing with fake book shelves and other representational “gloss”.

  4. John G says:

    Wonderful article. I’ve been inspired by print design for the same reasons and I am in 100% agreement with the points presented here. It can be a bit tough to buck some of the lingering “Web 2.0″ visual ticks and sell clean minimalist design to clients, since so many of them have come to expect a certain look. But good design will find a way, regardless whether it always wins.

  5. Tor Løvskogen Bollingmo says:

    “Today however, most onscreen content is assumed to be interactive. The literal analog affordance is no longer necessary” – could you back up this bold statement?

  6. joachim muller-lance says:

    thank you from an ’86 graduate of the basel school… very glad i’m not the only one being upset that the company which made such boldly reduced statements as the various ipods, cordless mouse and more, has now mentally regressed into childishly literal platitudes like fake handwriting on a homely yellow notepad (whose look isn’t even known outside this continent). was steve jobs on vacation?one thing i’d like to remark: using the term “print design” seems not quite accurate? the swiss/modernist/international approach was not conceived for the mere purpose of printing, but go beyond, encompass and link to other media and platforms: not a “style” but a conceptual methodology for developing and applying coherent design identities.to be more broadly applicable, and be produced efficiently, it made good sense to treat design elements as building blocks that carry meaning even in the way they’re organized – function over decoration, but with aesthetic appeal that attempted to be timeless, a kind of ‘useful beauty’…classic examples are found in transit signage like the ny subway, olympics identities, many airports – design that’s helpful for navigating in public might help navigate computer interfaces too? – and certainly in tv and film titles of the era, proving the methods are as good for time-based, kinetic media as for static print.a neat example is peter von arx’ book “film+design” (he was my teacher in what would today be called motion graphics). the book is from 1983 and out of print, but i found photos here: http://www.flickr.com/photos/insect54/2698280883/in/photostream/

  7. Peter Roth says:

    Excellent article! Thanks for sharing your thoughts.

  8. Hanseat-Unikat says:

    Yes, thank you for sharing your thoughts!I always thought that the main reason of design is to offer information in the best way – but there still isn’t an uniform audience. Just a thought – by using analog metaphors maybe you can reach that kind of people who can’t interact with clear and good structured interfaces. This may sound kind of weird but I work with a lot of people who are overstrained with uncommon modern structured interfaces. For them everything is changing and moving and nobody explains what happens. You have to change things bit by bit or you get confronted with rejection!

  9. gestalterblog says:

    Grand text, I’m grateful to read all those things. Some things I recognize in my own thoughts, but it feels strange because even always being a fan of german/swiss style sometimes I fall into a sort of woo to overdecorate things – even from myself – , for many different reasons such as the wrong “design thinking” everyone is now used to. With this text, I feel I’ve got some more arguments to fight against it. Thanks, Marcos.

  10. ralph lichtensteiger says:
  11. ralph lichtensteiger says:

    thanks for this great post.

  12. Chris says:

    I think this title is misleading. This is not the future of ‘interaction’, but it might be the future of the online experience. To assume that print design aesthetics are the future of all interactions is a narrow view on a very complex subject, and blatantly disregards rich multimedia experiences (Tablets, Apps, Motion controls, rich web apps, etc) that have no basis on print design, but are made much more human by adding secondary graphics to enhance the original content. If all content were structured like print design – while I admire the aesthetic – we would quickly grow tired of it and find other graphic styles to showcase our content.

    Context is king, and will always remain the deciding factor in which design aesthetic to pursue for a specific project.

    If the title were “How print design is the future of the online experience”, it would have made more sense. But that being said, still an excellent article.

  13. [...] texturas e efeitos tridimensionnais. É possível ler um pouco mais sobre estas referências neste post do próprio Mike em seu [...]

  14. [...] Les dejo también este artículo: How Print Design is the Future of Interaction [...]

  15. [...] talked before how Metro was inspired in printed media design styles. How Print Design is the Future of Interaction is a terrific post from Mike Kruzeniski, Principal UX Lead in the Studio about this topic. When the [...]

  16. Kayla Block says:

    Great article. Looking at WinAmp after all these years is rather shocking!

  17. Thøger Kari says:

    Excellent article, but ironically funny that the fonts fail to render nicely on my FireFox :D

  18. Saurabh Jain says:

    Very very good article on UI design.

  19. Eugeniu says:

    I like how the Flipboard is being used as a positive example when actually it’s more like a “Bumptop Desktop” for your feeds: literal transfer of printed media layout look and interaction (page flipping). But that was exactly the wow-factor, wasn’t it?

  20. [...] How Print Design is the Future of Interaction Category: design [...]

  21. [...] ha raccolto sul suo blog il contenuto dell’intervento al SXSW Interactive di Marzo [...]

  22. [...] Article by Mike Kruzeniski about the (lack of) influence of print design in interface design. Some quotes: [...]

  23. [...] 雖然 Metro Style 深受印刷設計的影響,但當到了數位媒體的時代,一切都與傳統靜態媒體變得很不一樣。在由像素構成的電子螢幕中,我們可以設計一些動畫效果,來幫助資訊內容成為更顯眼的主角,或是改善 App 流程轉換的體驗效果。比方說,Turnstile motion 是一種告訴使用者,即將「關閉」現在的 App 或「切換」至另一個 App 的效果,Continuum motion 則是用來表示將要在「同一個 App」中顯示不同階層的資訊。 [...]

  24. [...] Kruzeniski: How Print Design is the Future of Interaction. It’s as if we are trying to rebuild the physical artifacts around us inside of our computers. [...]

  25. scout says:

    Very interesting points!! thanks for the summary and good questions.
    Although I think this is relevant, you seem to be confusing the difference from looking at a painting on the wall with looking through the window to a vast landscape.

  26. Mat Kendall says:

    Some of the best interactive design has been done by print designers for a long time already. Good design is good design, whatever the platform. Mimicking textures and knobs is Naf, always has been, always will be. Unless, of course, there is good tastful reasoning behind it.

  27. [...] Mike Kruzeniski Share this:Share ‹ Previous Post Beautiful animated gifs Cancel Reply [...]

  28. [...] But in order to do that you need users to understand that they don’t need to search out those little button-looking things anymore. As Mike Kruzeniski said in is wonderful How Print Design is the Future of Interaction post. [...]

  29. [...] artikel ‘How Print Design is the Future of Interaction‘ van Mike Kruzeniski vertelt over de overeenkomsten tussen grafisch en interactive design. [...]

  30. [...] graphic design. Mike Kruzeniski, a Design Lead at Twitter, makes a convincing case for applying the principles of print design in interactive design. He points out that any display of information depends upon fundamentals such [...]

  31. [...] How Print Design is the Future of Interaction:  "It suggests that users don’t want design, and are taking to minimalist, “undersigned” [...]

  32. [...] been wondering if web designers were making the print design connection, then I came across Mike Kruzeniski – How Print Design is the Future of Interaction. The article is recommended reading if you’re unfamiliar with print design, or its [...]

Leave a comment