7 ms·

This is particularly interesting in the context of the widespread accusation that flat UIs tend to have worse discoverability (example: http://www.nngroup.com/a

This is particularly interesting in the context of the widespread accusation that flat UIs tend to have worse discoverability (example: http://www.nngroup.com/articles/windows-8-disappointing-usability/ http://www.nngroup.com/articles/windows-8-disappointing-usab...). If you inspect the key navigational and menu elements, they did a pretty nice job making it visually obvious (with hover states, borders, shapes etc.) what kind of functionality those flat blobs of color offer. ;)

throwaway420 14y ago
Related to your point about UI discoverability, I really like this article on the concept of "Almost Flat Design". http://www.matthewmooredesign.com/almost-flat-design/ http://www.matthewmooredesign.com/almost-flat-design/ This points out how important and useful the subtle and tasteful use of gradients and shadows can be within flat designs.
- antoniopratas 14y ago
  that's the most realistic post of them all. And basically what he says here, is what everyone should be doing. Design for your objective, your message, not for a trend. Use flat elements if they are an advantage to your project, use realism if it benefits your message. Basically, use whatever you want that may help you accomplish your objective.
  - swalling 14y ago
    Well put.
ktsmith 14y ago
I don't like the flat menu/buttons. I don't find anything about these flat menus or buttons to be particularly intuitive. There's no visual cues to let me know that there's sub menus there's no visual cues to let me know the buttons are clickable until I am already interacting with them (hover/mouse over etc).
- swalling 14y ago
  "There's no visual cues to let me know that there's sub menus" It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level. "there's no visual cues to let me know the buttons are clickable until I am already interacting with them" Except one of the most powerful cues, action verbs in button copy. You could easily make the same claim you just made about say, menu item styles in OSX. The reason why the buttons seem so bad in this case is in part because it's just a demo with a wall of buttons. Where I agree with people critical of flat designs, such as what Nielsen says, is that it breaks down in anything with anything particular complicated or with many menus and actions. That clutter of meaningless buttons at the top of the demo is a good example. But for cases where you have a simple design that can be driven by color and typography, it can work. Have a little imagination. There is no 100% good or bad trend in design. Just different solutions for different problems.
  - ktsmith 14y ago
    > It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level. It's equally common to have an arrow or other indicator next to menu items to indicate that there is a second or third level of items available. Using the menu items in OSX from your own example you can see that items with sub menus have a triangle pointing to the right where the menu will expand. The problem with leaving off these indicators is that some users won't realize there are more options and give up before finding what they are looking for. The menu text must be very clear that there are more options. > Except one of the most powerful cues, action verbs in button copy. I agree that button text is a very huge part of interaction as even with visual cues that an item is interactive the text is going to tell you what the action is. That being said we've all seen or used badly designed interfaces where interactive elements have bad labels. Additional visual cues can help to overcome a bad label. Google is rolling out mostly flat designs where interactive elements at least include some gradient or distinct outlines that help show which items are interactive. I find those interfaces to be much easier to navigate than all flat interfaces.

throwaway420 14y ago

Related to your point about UI discoverability, I really like this article on the concept of "Almost Flat Design". http://www.matthewmooredesign.com/almost-flat-design/ http://www.matthewmooredesign.com/almost-flat-design/ This points out how important and useful the subtle and tasteful use of gradients and shadows can be within flat designs.

antoniopratas 14y ago
that's the most realistic post of them all. And basically what he says here, is what everyone should be doing. Design for your objective, your message, not for a trend. Use flat elements if they are an advantage to your project, use realism if it benefits your message. Basically, use whatever you want that may help you accomplish your objective.
- swalling 14y ago
  Well put.

ktsmith 14y ago

I don't like the flat menu/buttons. I don't find anything about these flat menus or buttons to be particularly intuitive. There's no visual cues to let me know that there's sub menus there's no visual cues to let me know the buttons are clickable until I am already interacting with them (hover/mouse over etc).

swalling 14y ago
"There's no visual cues to let me know that there's sub menus" It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level. "there's no visual cues to let me know the buttons are clickable until I am already interacting with them" Except one of the most powerful cues, action verbs in button copy. You could easily make the same claim you just made about say, menu item styles in OSX. The reason why the buttons seem so bad in this case is in part because it's just a demo with a wall of buttons. Where I agree with people critical of flat designs, such as what Nielsen says, is that it breaks down in anything with anything particular complicated or with many menus and actions. That clutter of meaningless buttons at the top of the demo is a good example. But for cases where you have a simple design that can be driven by color and typography, it can work. Have a little imagination. There is no 100% good or bad trend in design. Just different solutions for different problems.
- ktsmith 14y ago
  > It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level. It's equally common to have an arrow or other indicator next to menu items to indicate that there is a second or third level of items available. Using the menu items in OSX from your own example you can see that items with sub menus have a triangle pointing to the right where the menu will expand. The problem with leaving off these indicators is that some users won't realize there are more options and give up before finding what they are looking for. The menu text must be very clear that there are more options. > Except one of the most powerful cues, action verbs in button copy. I agree that button text is a very huge part of interaction as even with visual cues that an item is interactive the text is going to tell you what the action is. That being said we've all seen or used badly designed interfaces where interactive elements have bad labels. Additional visual cues can help to overcome a bad label. Google is rolling out mostly flat designs where interactive elements at least include some gradient or distinct outlines that help show which items are interactive. I find those interfaces to be much easier to navigate than all flat interfaces.