4 ms·

Microsoft seems to be the biggest current proponent of flat design, and I must say it's not so great for usability. When I see this: http://www.istartedsomethi

Microsoft seems to be the biggest current proponent of flat design, and I must say it's not so great for usability. When I see this: http://www.istartedsomething.com/wp-content/uploads/2011/09/windows8metrostart.jpg http://www.istartedsomething.com/wp-content/uploads/2011/09/... I have no idea what is and is not a button. I suppose it's all a button. But there are zero affordances in this UI. This is now finding its way to Microsoft's websites. On outlook, I can't quickly find the buttons to do key tasks: http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outlook-three-panes-620.jpg http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outl... I think the reaction to excessive skeuomorphism is well founded, but removing all affordances isn't the proper way to move forward either.

ThomPete 14y ago
I find your comment unfair and I am not even a MS user. Usability is so much more about how it work, not just how it look. All design systems will have some learning curve. A learning curve where you have to understand that everything a button is pretty close to being easy to learn. So in my mind, the problem you seem to think there is is a pseudo problem. I.e. it's not actually a problem. The Map is not the territory.
- ianstormtaylor 14y ago
  The difference is that glossy buttons have affordances that make them stand out from the rest of the interface. Which means that even after learning what is and isn't a button, you can find them more quickly. Completely flat interfaces lose this advantage, but they also have other benefits.
  - roc 14y ago
    Links have more subtle affordances that make them stand out from web text and few people have a problem navigating that. Microsoft's problem isn't inherent in having a 'flat' design. It arises because of their alternately uniform (outlook), and seemingly arbitrary (metro desktop), color, contrast, layout and font-weight choices. They could conceivably shift to a design-language where those attributes could be used to hint at interactivity at least as well as a big shiny buttons.
  - ThomPete 14y ago
    Sure, but the thing is that after a while the obviousness can become a burden. I think they are doing the right thing by making sure that they get the fundamentals right and then they can add to improve. That is hell of a lot easier than if you have to fight with a and already established strong visual hierarchy. I would do exactly as they are. That seems to be the right approach for such a huge undertaking that this will be.
drbawb 14y ago
Oddly enough, the first thing that comes to mind when I see the new `Outlook` is: "all text is actionable." Everything on that Outlook screen seems to be clickable, with the possible exception of the logo (upper left) and copyright notice (bottom left). It reminds me of the `acme`[0] editor a bit; not nearly as flexible, of course, because it is executing pre-programmed commands, not arbitrary shell commands. I bring `acme` up for two reasons: (a) it gives you an interesting perspective on "text as actions" and (b) look at that menu system... no buttons, no distinguishing marker, the menu is just text! The buttons are just text! The editor itself is fairly nice to work in; a big departure, yes. Intuitive? Kind of; it only becomes intuitive once you understand "mouse-chording", after that the UI makes plenty of sense, even when it's almost entirely "flat." -- So, if you assume everything is clickable by default (which is true, give or take a few very specific targets that have no obvious action anyways), why then does the user need skeuomorphic hints? If 90% of the non-whitespace results in a "button press", that fact should become obvious fairly quickly, even to the uninitiated. If you cut out all the cruft and only leave the functionality, the functionality will inherently "float" to the surface. And that seems to be the case in Microsoft's latest bout of UX. [0]: http://acme.cat-v.org/readme http://acme.cat-v.org/readme
- nostromo 14y ago
  Even if all text is clickable, not everything should have such a similar visual weight. In Gmail, there's a big ass red button that does exactly what you think it will do. (http://25.media.tumblr.com/tumblr_lyrwjaXatd1qea4hso1_500.png http://25.media.tumblr.com/tumblr_lyrwjaXatd1qea4hso1_500.pn...) I bet I could use Gmail for the first time in Arabic if I had to. I'm not sure I could use Outlook.com.
  - ThomPete 14y ago
    And that big red button was only added much later. The first versions of gmail didn't have that. MS is doing something very wise here. They are starting flat and then over time they will find a balance between what needs to be more obvious than other things. Just wait and see.
polyfractal 14y ago
Once you play with metro for like 20 seconds, you understand how it works. My phone is WP7 and I absolutely love the interface. It is simple, fast, intuitive and most importantly...it get's out of your way. I can't stand all the chrome and bevels and transparent bobbles on Macs for instance. (Everything in that screenshot is a button. That's how Metro works)
- batista 14y ago
  >I can't stand all the chrome and bevels and transparent bobbles on Macs for instance. As someone started with a 286 EGA graphics PC from the eighties, boy are we spoiled...
saint-loup 14y ago
>>> Microsoft seems to be the biggest current proponent of flat design [...] Think about it: Microsoft is a big proponent of a design language, and helped the trend to take off.
praptak 14y ago
I am not convinced that flat design implies no visual clues about function. Granted, the visual clues from bevels, drop shadows and whatnot had the bonus of instant familiarity to people not accustomed to GUIs. Nevertheless this might have been a sort of a crutch and nowadays people even if they expect the computer to emulate their home appliances, the appliances themselves have less and less buttons and levers and more and more touchscreens or at least touch-buttons.

ThomPete 14y ago

I find your comment unfair and I am not even a MS user. Usability is so much more about how it work, not just how it look. All design systems will have some learning curve. A learning curve where you have to understand that everything a button is pretty close to being easy to learn. So in my mind, the problem you seem to think there is is a pseudo problem. I.e. it's not actually a problem. The Map is not the territory.

ianstormtaylor 14y ago
The difference is that glossy buttons have affordances that make them stand out from the rest of the interface. Which means that even after learning what is and isn't a button, you can find them more quickly. Completely flat interfaces lose this advantage, but they also have other benefits.
- roc 14y ago
  Links have more subtle affordances that make them stand out from web text and few people have a problem navigating that. Microsoft's problem isn't inherent in having a 'flat' design. It arises because of their alternately uniform (outlook), and seemingly arbitrary (metro desktop), color, contrast, layout and font-weight choices. They could conceivably shift to a design-language where those attributes could be used to hint at interactivity at least as well as a big shiny buttons.
- ThomPete 14y ago
  Sure, but the thing is that after a while the obviousness can become a burden. I think they are doing the right thing by making sure that they get the fundamentals right and then they can add to improve. That is hell of a lot easier than if you have to fight with a and already established strong visual hierarchy. I would do exactly as they are. That seems to be the right approach for such a huge undertaking that this will be.

drbawb 14y ago

Oddly enough, the first thing that comes to mind when I see the new `Outlook` is: "all text is actionable." Everything on that Outlook screen seems to be clickable, with the possible exception of the logo (upper left) and copyright notice (bottom left). It reminds me of the `acme`[0] editor a bit; not nearly as flexible, of course, because it is executing pre-programmed commands, not arbitrary shell commands. I bring `acme` up for two reasons: (a) it gives you an interesting perspective on "text as actions" and (b) look at that menu system... no buttons, no distinguishing marker, the menu is just text! The buttons are just text! The editor itself is fairly nice to work in; a big departure, yes. Intuitive? Kind of; it only becomes intuitive once you understand "mouse-chording", after that the UI makes plenty of sense, even when it's almost entirely "flat." -- So, if you assume everything is clickable by default (which is true, give or take a few very specific targets that have no obvious action anyways), why then does the user need skeuomorphic hints? If 90% of the non-whitespace results in a "button press", that fact should become obvious fairly quickly, even to the uninitiated. If you cut out all the cruft and only leave the functionality, the functionality will inherently "float" to the surface. And that seems to be the case in Microsoft's latest bout of UX. [0]: http://acme.cat-v.org/readme http://acme.cat-v.org/readme

nostromo 14y ago
Even if all text is clickable, not everything should have such a similar visual weight. In Gmail, there's a big ass red button that does exactly what you think it will do. (http://25.media.tumblr.com/tumblr_lyrwjaXatd1qea4hso1_500.png http://25.media.tumblr.com/tumblr_lyrwjaXatd1qea4hso1_500.pn...) I bet I could use Gmail for the first time in Arabic if I had to. I'm not sure I could use Outlook.com.
- ThomPete 14y ago
  And that big red button was only added much later. The first versions of gmail didn't have that. MS is doing something very wise here. They are starting flat and then over time they will find a balance between what needs to be more obvious than other things. Just wait and see.

polyfractal 14y ago

Once you play with metro for like 20 seconds, you understand how it works. My phone is WP7 and I absolutely love the interface. It is simple, fast, intuitive and most importantly...it get's out of your way. I can't stand all the chrome and bevels and transparent bobbles on Macs for instance. (Everything in that screenshot is a button. That's how Metro works)

batista 14y ago
>I can't stand all the chrome and bevels and transparent bobbles on Macs for instance. As someone started with a 286 EGA graphics PC from the eighties, boy are we spoiled...

saint-loup 14y ago

>>> Microsoft seems to be the biggest current proponent of flat design [...] Think about it: Microsoft is a big proponent of a design language, and helped the trend to take off.

praptak 14y ago

I am not convinced that flat design implies no visual clues about function. Granted, the visual clues from bevels, drop shadows and whatnot had the bonus of instant familiarity to people not accustomed to GUIs. Nevertheless this might have been a sort of a crutch and nowadays people even if they expect the computer to emulate their home appliances, the appliances themselves have less and less buttons and levers and more and more touchscreens or at least touch-buttons.