ux.artu.tv » Blog Archive » Why do we have circles around icons in the Windows Phone app bar?

Why do we have circles around icons in the Windows Phone app bar?

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…)

Windows Phone 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.

Buttons in phone call list in Windows Phone

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.

Button to add a new recipient in text app in Windows Phone

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).

Status bar icons in Windows Phone

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).

Icons in email app in Windows Phone

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.

Metro Principles and Metro Design Language

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.

15 Responses to “Why do we have circles around icons in the Windows Phone app bar?”

  1. keith Says:

    I think there are definitely cases where interaction with icons occur without them having a circle.

    One area is when tapping to send a Facebook post when commenting on a photo, you have a little envelope shape, and also it is for some reason embedded within the text ox itself!

    So strange and annoying to have so much consistency and see these little outliers:)

  2. Abraham Says:

    Is there a reason that this is allowed then?
    http://www.wp7connect.com/wp-content/uploads/2011/06/WP7ZunePlaybackOptions.jpg
    The shuffle, loop, and heart buttons are all icons.

  3. tezawaly Says:

    I understood all buttons have a border, so buttons on appbar also have a border too.

    But I think the principle cannot explain that Windows Phone handset has three hardware buttons (Back, Start and Search) without border.
    How do you think about the hardware buttons?

  4. Kendall Says:

    Is … a button or icon? I interact with it on regular basis but it does appear to have a border.

  5. Kendall Says:

    Sorry, … Does NOT have a border. Is it an icon or button?

  6. Robert Virkus Says:

    Notable exception to this rule is the icon within the input TextBox used for commenting on Facebook and twitter posts etc. This icon has no border which annoys me. Other than that I do love my Windows Phone a lot!

  7. ArturoT Says:

    Hey! thanks for the comments everyone. When writing the article I was like “I’m sure someone will find exceptions :)” and there you go - Abraham, let me check on those icons. Tazaway, that was a low shot with the hardware buttons :) I’d argue that outside of the screen (on the chassis) there’s no doubt those are buttons given we dont have any other icons or notifications going on? Robert, Keith, I’ve seen that too in Facebook - being officially a 3rd party app we don’t have full control on what’s used there. That said, I’ve notice that a very common pattern on the web (icon inside textbox to trigger action). In the case of textboxes that trigger search it’s better to us a SearchInputScope keyboard which instead of an enter key, it provides a “Go” or “Search” button…

  8. Eric Quezado Says:

    Hello Arturo!
    About the point circles around icons I completely agree with you! Nice article!

    In your last comment you said “In the case of textboxes that trigger search it’s better to us a SearchInputScope keyboard which instead of an enter key, it provides a “Go” or “Search” button…”
    I was looking for something about it through the UX guidelines. I was designing few weeks ago an Yellow Page App and there was a screen with some fields like name, category, city, state, etc to be filled up. Looking for WP apps behaviors I saw this SearchInputScope with a “Go” function. The client, that already have this app for iOS and Android, asked about this web behavior: a GO button close the forms. :)
    I convinced him to use this WP behavior but do you have any formal doc that describes it?

  9. ArturoT Says:

    Hello Eric! The SearchInputScope keyboard would work when you have a single text field for search. When having multiple fields I think an actual GO button would work better.

  10. WindowsDevNews.com Says:

    […] latest LightSwitch post is this one run-time sort order changes on a ListBox… by your end usersWhy do we have circles around icons in the Windows Phone app bar?Arturo Toledo responds to a question about the design of the app bar buttons, plus has his own ideas […]

  11. (?)Windows Phone???icon??? | z-Index Says:

    […] 原文http://ux.artu.tv/?p=176 译文http://www.mdong.org/?p=2214 […]

  12. (译)Windows Phone中环绕icon的圆圈 | 优酪网 Says:

    […] 原文http://ux.artu.tv/?p=176 译文http://www.mdong.org/?p=2214 […]

  13. ux.artu.tv » Blog Archive » 31 Weeks of Windows Phone Metro Design | 15 Designing Windows Phone Icons Says:

    […] not part of the icon itself. The icon is just the graphic. So formally speaking these are called App Bar Icon Button. Icon Buttons exist mainly in the app bar but you can also use them within the app space. Learning […]

  14. (译)Windows Phone中环绕icon的圆圈 | MobiUE Says:

    […] 原文http://ux.artu.tv/?p=176 译文http://www.mdong.org/?p=2214 […]

  15. (譯)Windows Phone中環繞icon的圓圈 - Game2遊戲|互聯網網誌- Says:

    […] 原文http://ux.artu.tv/?p=176 […]

Leave a Reply