User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

While looking at Metro UI styles I thought about one of the unique aspects of the icons. Their placement inside circles. E.g.


I can imagine that this provides a target like effect, emphasising the touch interaction. It could also be a way to identify the button within a style that doesn't allow for traditional 3D affordance.

However, what impact will this have on recognition of the button functions themselves? Could this add to the effort required and therefore affect usability?

Has there been any related research to show whether this approach can be effective?

share|improve this question
You'll find this helpful:… – Vitaly Mijiritsky Jul 12 '12 at 15:35
@VitalyMijiritsky Ah yes, some relevant info there. Confirms some suspicions. On a side note: I wonder whether trends in design will change despite these types of drawbacks. Whether, over time it will impact our perceptions and expectations. It would depend on the potential benefits to be had. – Jay Jul 12 '12 at 15:42
I can promise you that trends will change :). If trends don't change, they become principles :). – Vitaly Mijiritsky Jul 12 '12 at 15:44
Which is why even the most strongly held beliefs / coded rules can be questioned from time to time. Particularly when large context shifts occur. UX being a science rather than religion :) – Jay Jul 12 '12 at 15:47
UX being a science rather than religion - yeah, tell that to the fanboys ;) – Vitaly Mijiritsky Jul 12 '12 at 15:50
up vote 4 down vote accepted

This is conjecture on my part, as I don't have any research to back me up.

I think the circle (or a round corner box as @BenBrocka says) helps define the edges of the button. After using Metro (or winphone) for awhile it becomes a familiar metaphor in many apps. The icons still have strong internal shapes and outlines inside the circle. The two tone color scheme helps make this more obvious.

This model should work well in many usablity cases. Color blindness shouldn't be an issue. Each icon has a distinct inner shape, which make them easier to parse with screen readers.

share|improve this answer
Thanks for the answer. However a screen reader wouldn't parse the shape of an icon. It would read out underlying text or metadata. – Jay Jul 13 '12 at 7:44
Yes, I shouldn't have said screen reader, I was thinking more about some of the new touch reader for blind people. – Walt Ritscher Jul 13 '12 at 18:47

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.