Hacker News Reader

Comment by mbesto | Hacker News Reader

This is a question to the design-minded folk here: (who can explain possibly with science)

1. Why would MS chose to use non-rounded buttons?

My understanding is that rounded corners draw attention to content in the middle because they require less cognitive strain.[1] As far as I know, the only reason these buttons are/can be successful is if there is marginally more space between the edges and the content. (thus instead of rounded corners drawing the attention inwards, the large blank space is)

[1]- http://www.uiandus.com/blog/2009/7/26/realizations-of-rounde...

View on HN

What you are quoting is true when buttons are occupying mostly white space.

When the buttons are tightly packed, as live tiles are in Windows 8, the rounded corners clash with eachother and the negative space distracts away from the content within the tile.

Source: I'm designing a Windows 8 phone launch app.

Well, sometimes there are design reasons to use something that seems counter-intuitive. I can't say why Microsoft would choose to do this but there are possibly several reasons. You can't always go by what the science says because if we did then all designs would be roughly the same; whatever science says each element should look like. If we followed the suggestions from your linked article then all of our elements, especially buttons, would be circles.

Sometimes, for the sake of the design, you would choose harsh corners so that it makes them stand out all the more. Especially since so many use rounded corners for their designs these days. When everyone else has rounded corners your squared corners stand out. They may be bothersome to the eye but they attract the attention.

Maybe having rounded cornered buttons conflicts with the rest of the design which ruins the pleasing effect of the entire design? Possibly they felt breaking the "rules" for the buttons prevents a collapse of the design as a whole. Say, for instance, the majority of the design is squared corners but those rounded cornered buttons stand out so much that the eye is constantly draw to them instead of the content to be read?

Maybe they just don't like rounded buttons?

As someone else commented, maybe they don't want their buttons to be too similar to buttons from another design? It does seem you can be sued for minor design choices these days.

Shane Morris @shanemo (ex 'softie designer UX guy) gave a recent talk on Being Authentically Digital with Win 8. He stated the same thing. Also that the human brain is wired to recognise T shapes making the Windows 8 start menu layout a problem.

My guess, they didn't want it to look like an iOS screen.

I agree with your conclusion, that not looking like iOS is in itself a design goal, and one that makes sense. Just as with anything else in design, a lot of people are tired of looking at iOS rounded everything.

This is my understanding too. And I think the Metro look is going to perform particularly poorly when it is isolated to navigational components on a webpage while content follows whatever other visual form.

IMHO the real MS interface isn't very desktop/mouse friendly and the reason it works is because all of those square buttons are the only thing you can activate in the metro screens. If I put one rounded button in the metro interface I'll bet it would get clicked far more often than the other interface elements. It wonder if they tested it vs a more humanistic version?

Interesting, would try to branch out some components with this thought :)

I doubt that the lack of rounded corners is going to give anyone issues with the Metro/Modern/whatever style. The list of things with entirely rectangular buttons includes Windows prior to XP, most other older non-Mac window managers and OSes, and a vast number of real-world products like stereos and TVs. The very top thing on that link is an update basically saying it's an unresolved question: "My rounded rectangles cognitive argument is getting a good thrashing — which is a good thing. I'm as keen as anyone to find out if the theory holds water, and if you can direct me to better research, I'd love to read it. Please share!" I don't buy it, personally. Maybe the reason signs in public places have rounded corners, like the famous No Parking sign Jobs showed, is just to avoid having sharp corners for safety? Then there's stuff like the utterly-minimal rounding of Lion/Mountain Lion buttons: they'd fall pretty high on that cognitive cost scale he posits, especially compared to the Aqua ones they replaced.

The lack of hinting that one element is clickable/tappable while another is a bigger issue, though, than just rounded edges. As far as web use of this style goes, I think the arrows-in-circles (or something similar) used on the main button on this page, and on the Windows Azure site mentioned elsewhere in the comments here will be key.

WP7 is pretty good about having "buttons" be styled fairly distinctively from other elements (they're circular in the menu bar at the bottom of an app, and in other places like the "More Details" button when editing a calendar appointment they get a thick distinctive border.

When your style is minimal you need to be very careful and consistent with the meaning of what visual cues you do have, so how stuff like that will translate to the web—especially if someone just wants to make a site look "Metro" but isn't so familiar with the conventions)—is an open question.

Maybe so they don't have to spend time getting it working in IE6-8?

There's no philosophy behind Microsoft doing this. They simply did it because they want their Metro design to catch on, regardless if that makes for a better web or not.

Reply on news.ycombinator.com