Metro and Print

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

Published by Ian Delaney on January 30, 2012

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

  • Anonymous

    The user interface is very good compared to others despite the waste of space because of the three buttons below the screen. I would prefer to remove those buttons and have a bigger screen.

    But if it comes to features I’m really beginnig to HATE my Lumia 800 and especially Zune!

    On a Smartphone screen is less more but the space should be used meaningful. At the moment there is often to much wasted space. But featurewise there is less definitively NOT more!!!

  • Anonymous

    AxlNo1, you are probably right. But luckily Nokia has currently a alternative Smartphone with a different OS that could fit more your needs. The Noka N9. The only question is what the future could bring to this line…
    In my humble opinion it should be very simple for Nokia:
    Sell WP7 devices worldwide to all the guys who want one (there are a lot out there, especially in the U.S.A.)
    Sell N9 like devices worldwide to all the guys who want something differnt, something more, something exclusive, a geek device like Android was in the beginning.
    They Lumia 800 and the N9 are at the moment not in any kind of rivalry. They are simply not equally and the target audience is very different. The Nokia board should try to understand why there is so much noise around this topic. And there is enought space for both devices.There is no need to lose all customers who don’t want to buy a iPhone like locked device to the Android manufactures. Nokia should bethink of their strengths.

  • Anonymous

    AxlNo1, you are probably right. But luckily Nokia has currently a alternative Smartphone with a different OS that could fit more your needs. The Noka N9. The only question is what the future could bring to this line…
    In my humble opinion it should be very simple for Nokia:
    Sell WP7 devices worldwide to all the guys who want one (there are a lot out there, especially in the U.S.A.)
    Sell N9 like devices worldwide to all the guys who want something differnt, something more, something exclusive, a geek device like Android was in the beginning.
    They Lumia 800 and the N9 are at the moment not in any kind of rivalry. They are simply not equally and the target audience is very different. The Nokia board should try to understand why there is so much noise around this topic. And there is enought space for both devices.There is no need to lose all customers who don’t want to buy a iPhone like locked device to the Android manufactures. Nokia should bethink of their strengths.

    • Anonymous

      There is probably enough space for both devices. But Nokia doesn’t have capacity to work out both of them (+ Symbian, + S40, + S30).
      Nokia is cutting expenses, closing factories and firing people. Microsoft wants to pay, so Nokia will play.

      • Anonymous

        Yes, Nokia is currently the only Company able to produce ultramobile pocketable Linux Computer with 3G and the ability to make a call.

        Perhaps Nokia should licence maemo / MeeGo Harmattan to Cisco and produce a ultramobile admin tool devices for them. They had already a N900, they have a N9. So the technology is there. Only USB OTG is a additional needed feature.
        Sold together with a external USB Network connector Box with a Cisco branding for $2000 could be a nice possibility. The maemo / MeeGo devices are already totally overfeatured compared to other Smartphones.

        • Anonymous

          ordinary customers don’t want them
          admins are too small group

          • Anonymous

            Because of this sell it with cisco branding for $2000 in the network market instead of $500 in the smartphone market.

            There is already a big market.

            Even the Smartphone buisness is very big. Remember steve Jobs when introducing the iPhone. 1% marketshare will be enought to make profit. You have only to create a exclusive enought product to sell it at a high price.

          • Anonymous

            Regarding all the noise and the fanboy discussions around the web and Nokia ecosystems I can’t belive there are only a hand full customers who want maemo or MeeGo like devices.

          • Anonymous

            Regarding all the noise and the fanboy discussions around the web and Nokia ecosystems I can’t belive there are only a hand full customers who want maemo or MeeGo like devices.

          • http://pulse.yahoo.com/_CIEE4NE7C6NNTRLPGSCQADEIG4 Anonymous

            According to latest Q4 results from Nokia, they are more than who want WP. MeeGo sells number is far better than the 2 lumia phones added!

          • http://pulse.yahoo.com/_CIEE4NE7C6NNTRLPGSCQADEIG4 Anonymous

            According to latest Q4 results from Nokia, they are more than who want WP. MeeGo sells number is far better than the 2 lumia phones added!

          • Anonymous

            Regarding all the noise and the fanboy discussions around the web and Nokia ecosystems I can’t belive there are only a hand full customers who want maemo or MeeGo like devices.

          • Anonymous

            Regarding all the noise and the fanboy discussions around the web and Nokia ecosystems I can’t belive there are only a hand full customers who want maemo or MeeGo like devices.

  • Anonymous

    Font size is a tool, yes.
    But font size in WP is blown out of any proportion. When using phone day by day, you know where you are and then there is no use for that huge titles. The important part however is written with mini tiny font.
    Designed for the first impression, not for day by day use.

    • http://conversations.nokia.com Ian Delaney

      Even if you dislike the aesthetics, the large type sections are also a navigation element, remember – it’s where you swipe to go between the panes of an app, so it makes sense for it to be approximately as thick as a fingertip.

      I’m not having any trouble reading the smaller text. In particular, the email client is the best I have used on a Nokia phone.

      • Anonymous

        Personally, I wish I could configure font size.

    • Anonymous

      I couldn’t disagree more. The descending point-size from name to print works on the reader in the same way newspaper print does. And newspapers are designed above all for day-to-day use.

      • Anonymous

        You don’t read the same newspaper day after day, don’t you? The phone is a tool you use everyday. I agree that title must be visible, and ok, finger friendly. But, not that huge.

        • Anonymous

          I read the the same newspapers every day. they have the same design language every day so that you know what to find and where to find it. The key is that newspapers have different information in those similar-looking areas. Just like live tiles. Other apps systems look identical every day, so you can’t tell if there is information you are interested in or not.

          • Anonymous

            Trevor, I can see your point,
            and I can be agree with you.
            However, my point is that, for me, it will be more balanced with headers slightly smaller and informative text slightly bigger.
            Those discussions includes lots off feelings. All that negative stuff about WP is also based on that fact that Symbian & MeeGo were ditched because of WP.

    • Anonymous

      I couldn’t disagree more. The descending point-size from name to print works on the reader in the same way newspaper print does. And newspapers are designed above all for day-to-day use.

  • Anonymous

    Using the Lumia is like reading a well designed magazine layout. A modern OS should not look like Android or iPhone. What is the point of row after row of static tiny icons? It seems rather childish and trite to have the wooden bookcase and leather calendar metaphors in 2012.

    Other platforms try to cram every millimeter of screen with text and buttons. This hurts legibility!  Open space is a good thing.

    I don’t think fonts in Windows Phone are too small.The small fonts in Windows Phone are about the same size as print in a typical newspaper.

    As far as Zune software is concerned, I think it’s better than iTunes, but that’s subjective.

    • http://pulse.yahoo.com/_CIEE4NE7C6NNTRLPGSCQADEIG4 Anonymous

      Too much open space on a tiny screen like phones have is not a good ideea. People hub is horrible, at least all contacts screen which displays only 4-5 contacs at once(visible)!!!!

      • http://davepermen.net davepermen

        how many do you need at once, then? i can navigate trough them in seconds, and see the ones i go trough clearly and in detail. if it would be a tiny list with tons of people, it would be much harder to browse it with the eye.

        the design is ment to be glance-and-go, that means, too, that you see at a glance if the content you have on the screen is the right one, or you have to swipe or navigate how ever to the next part. works much better than lots of information and then slowly navigating trough it.

      • Anonymous

        The People Hub looks and works very well. That’s why Google is copying it in latest version of Android. People Hub is flexible to fit any need. Search option gives instant results as you type. Using jump list, you can go to any letter in alphabet. Hub also shows last 8 contacts you communicated with. You can also use voice command to call/txt any contact without touching keyboard. Cramming a list of names together like in a paper phone book wouldn’t improve it.

      • Anonymous

        i like the way that you get a larger point size for names of people that your texts and emails are coming from. This works like the headlines in newspapers, ie the attention-grabbing part. It proves that Windows Phone software puts people first, even in terms of design.

      • Anonymous

        i like the way that you get a larger point size for names of people that your texts and emails are coming from. This works like the headlines in newspapers, ie the attention-grabbing part. It proves that Windows Phone software puts people first, even in terms of design.

  • http://liveblogs.in/ maya

    The windows phone UI design can simply be called path breaking, its after decades we are losing the icons…
    excellent design, and totally radical in terms of approach 

  • Anonymous

    Could be a reason for the noise. So I wonder even more why not sell more Android competitive devices like the N9.

  • http://pulse.yahoo.com/_CIEE4NE7C6NNTRLPGSCQADEIG4 Anonymous

    That is not true, it still uses traditional list of app icons. Try to pin all your app’s icons on homescreen and you end up with a messy homescreen

    • http://conversations.nokia.com Ian Delaney

      Um yeah – so don’t do that. ;-)