In one of the Q&A sessions during the Windows Phone Design Day in Stockholm, Petter Silfver (definitely a follow in Twitter), interaction designer based in Stockholm asked me a question about the “icons in the Windows Phone app bar” wondering why these “icons” have a circle around them. At that point I promised I’d follow up on his question and Petter was kind enough with us and the community to share his point of view in his blog. He raises valid points around design.

We see those as buttons, not icons - although I understand the question is independent of semantics :). These are buttons with a little icon inside of them. The Metro design language that Microsoft provides out-of-the-box has a consistent approach to “button-like” controls. Whether it’s a Push Button, Toggle Button, Command Button, Media Player Buttons or Icon Button - buttons in the Metro language for Windows Phone have a border that defines its boundaries. So the icon buttons in the app bar simply follow the same language as their brothers/sisters buttons - I understand there could be some confusion because I noticed everytime we (Microsoft) talk about icons, we usually present them within the circle and call them “icons”. When we talk about icons we should present them like icons (without the circle - granted, 99% of their use is as icon buttons…)

Click for larger view

While yes, the concept of saliency (thanks for the link Petter) is completely true - this would have meant doing an exception in our button design language for Metro. We went for consistency. It might seem like just semantics on my side - calling these “buttons” or “icons” but it really is a big difference. We use buttons for enabling interactivity and icons for communicating a message one-way. For example, the out-of-the-box phone app uses buttons with a phone icon next to the calls in the call history list - these are buttons, not icons.

Another example of the use of icon buttons, in the text messages app - when you want to add a new person to send a text message you get a little button with a plus sign icon but again, this is a button - not just an icon. You will find we do not use icons as buttons. While it would have been tempting to use just a plus sign icon - I know I would have proposed that initially - the right approach per Metro out-of-the-box for Windows Phone is using a icon button.

Now let’s take a look at how we use icons. For example in the status bar these are truly notification icons and they do not use a circle (they are not buttons).

We use icons as graphics that provide information to the user one-way (they are not interactive, thus not buttons). For example in the email app we use little icons (not buttons) to communicate to the user that there’s an attachment in an email or that there’s a high priority email (flag).

All this said, I want to highlight what we talked about during the Windows Phone Design Day tour - Metro is made out of two things: Metro Design Principles and Metro Design Language. Metro Principles are the design pillars that we (inside and outside of Microsoft) embrace when targeting Windows Phone . The Metro Design Language sits on top of the Principles and is a way to manifest these Principles in tangible UI elements, motion, typography, composition and other interaction aspects.

This out-of-the-box Metro Design Language is defined by three things: the Windows Phone native apps (email app, text messages app, people hub, local scout etc etc), second, by the Windows Phone UX Guidelines and third, by the control library and other resources available in the Windows Phone SDK and the Silverlight Toolkit (all these 3 should in theory be consistent between each other - I know there are slight differences, we are working on it :)). Developers and Designers can use this out-of-the-box Metro Design Language. It will set you up for success to craft beautiful, compelling and consistent experiences for Windows Phone.

That said, the Metro Principles are first, and they override any language, so designers are free to explore the Principles and come up with alternative ways in which you think these could manifest. Not only you are free to do this - we would LOVE to see this happen. The Metro Principles allow for infinite exploration and evolution. Let me give you an idea… check out this article on Lessons from the Swiss Design Style. It’s a great article that describes some of the concepts behind Swiss design (Metro has its roots in this style, also called International Typographic Style) - look at some of the posters and printed media designs in that article. All those follow the same principles Metro does! Isn’t that amazing? Other than Authentically Digital and Motion since all these are printed media examples. However, many of those posters and designs don’t look anything like the out-of-the-box Metro Design Language in Windows Phone but that doesn’t mean you as a designer can’t explore other ways to express the Principles.

  

There’s unlimited design possibilities in the Principles. We’d love to see the community push Metro, perhaps explore and dissect some of these Swiss style designs and see how some of those compositions or ideas could translate well to digital media interactions for a small screen like the one in Windows Phone devices.

And please, do continue starting conversations about Metro and about design with us - we love it! Kudos to Petter for bringing this up! - If you have any other questions, comments, ideas or wanna share with us some of the cool design work you are doing please drop me a tweet @arturo.

This entry was posted on Tuesday, December 13th, 2011 at 7:20 pm and is filed under Articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.