Follow us

Features

Metro and Print

Ian Delaney Published by Ian Delaney January 30, 2012

0
160

Metro and Print

0
160

Ian Delaney Published by Ian Delaney January 30, 2012

How Windows Phone design took its inspiration from the world of print

windows phone app

GLOBAL – Last year, Windows Phone creative director Mike Kruseniski wrote a lengthy essay based on a talk he’d given about the future of interactive design. This is a much-condensed summary. If you have the time, go read the whole thing: it’s really interesting.

A strange kind of desktop

If you look at your computer screen, the chances are that it will resemble a physical desk environment in some way.

Mac desktop 1984

Ever since the first experiments in a graphical user interface at Xerox, designers have taken the look of physical stationery as their cue.

The calendar looks like the old, page-a-day tear-sheet calendars that no-one has any more. The notepad has a ring binder at the top. On the Mac, my word processor, Pages, is symbolised by a bottle of ink and old-fashioned ink-pen.

Designers were trying to make computer interfaces more familiar and intuitive for people. The people coming from the old world of paper, manila folders and filing cabinets to the brave new world of computing.

When interface designers needed to portray a new kind of action, like the “OK” button, they gave it bevelled edges and a drop shadow to make it look like a button, so it was clear to people that it needed to be pushed.

30 years later 

Nowadays, though, designers have more freedom than they are often allowing themselves. Most people have worked out through decades of experience that they can interact with pretty much everything on their computer screen.

Strangely, though, a lot of the latest interfaces have simply made the desktop metaphors look more high-fidelity rather than doing things that are new.

Hp Touchsmart

An eBook doesn’t need a book cover, A5 proportions, and the illusion of thickness for us to know what to do with it. It definitely doesn’t need to go into a computerised representation of a wooden bookcase. If you’re reading eBooks, then you know that the book isn’t about the cover or the binding, it’s about the words and images it contains.

For a lot of digital content, there isn’t really a workable physical metaphor anyway. Web pages, for example, don’t have a real world analogue in any way.

Often the physical metaphors that are in use are pretty misleading: the similarities between your computer’s filing system and a real-world filing cabinet are quite small. Real world trash-cans don’t behave remotely like the one on your computer screen.

Onwards to the past

Maybe interactive design needs a bit of a reboot. For this, it’s well worth looking at the much longer, much more mature development of print design.

1962 poster

Interaction designers have historically often said that the rules of print design just don’t apply when it comes to the digital world. But that isn’t really true.

In particular, it’s worth thinking about the International Style (or Swiss Style) movement of the 1950s. This is when designers and typographers decided that enough was enough and that it was time to throw out the excess ornamentation and messiness that had become commonplace and return to a few basic rules:

Hierarchy and structure with grids

Good use of grids makes sites, pages and apps more usable, reduce complexity and improve readability. 

Confident use of negative space

Much interactive design has focused on packing as much as possible into the space. Using more white space allows users to focus on the critical information and actions.

Reduction of elements

UI elements clutter the content. “What may be lost in information density is gained in simplicity”.

Emphasis on typography

Diogo Terror, author of Getting the Hang of Web Typography wrote:

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. 

Proportion and spacing

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.

Universal iconography

Designers have become somewhat over-concerned with having cute, individual icons. Usability is improved if everyone sticks to the same conventions. 

nike better world

It’s clear to see how this kind of thinking has informed Windows Phone 7. But it’s actually bigger than this. There’s been a world-wide rejection of the clutter and ornamentation that has typified interactive design in recent years. Look at the popularity of products like Flipboard, Instapaper, and Readability. Or websites like Adobe or the Nike Better World microsite. 

Kruseniski closes:

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.  

What’s your opinion? Do you agree that less is more when it comes to mobile and computer screens? Or is clutter your friend?

Go read Mike Kruzeniski’s original article for the full text and lots more examples.

comments powered by Disqus