3 ms·

I've got a problem with the way people are implementing this 'flat UI' style and I think it's leading to a disastrous usability nightmare! Some of the 'design'

by err4nt 13y ago

I've got a problem with the way people are implementing this 'flat UI' style and I think it's leading to a disastrous usability nightmare! Some of the 'design' concepts represented by drop shadows, borders, and text-shadows are about function, not (just) aesthetics and when you remove those functional parts of a layout you are left with a less usable layout. Personally, I love the minimalism and rationalism in the design approach of Dieter Rams, who is (now) considered the father of the design style that Apple has made popular. I also love colour planar imagery (flat sections of colour) like vector illustrations and iconography. The problem with how many people are implementing this flat style in UI is that we're letting go of valuable information that makes software and websites usable in the first place. This style works great for static pieces (like print, or screen graphics that don't change) and of course looks clean and gorgeous in non-functioning Photoshop mockups - but when you get this style onto websites and into apps it's often done in a way that just falls flat of its full potential. There's my 2¢. I've been lusting after minimalism in design approach and dying for when colour planar aesthetic style became popular, but now it's here too many people are doing it all wrong (even the big ones, like Apple with iOS7)

afschwartz 13y ago
I totally agree. There's a big reason why "Flat" is in quotes. :) From my perspective, the idea behind the bookmarklet is more of a way to give people a hint into what their site could look like if they decided to redesign it flat. Of course there are many functional uses of depth which aren't purely for aesthetics or skeuomorphism. For people who already understand that distinction, it's fair to say this bookmarklet has less value. But I think there's a pool of people who never considered designing their site flat. This gives them a quick way to see something like that.
- err4nt 13y ago
  from a technical perspective, I love the bookmarklet - don't get me wrong there. It was a solid blog post :D
mortenjorck 13y ago
Exactly. As I've said elsewhere: "Flat design" is as useful a term as "red design" or "round design". These are all just tools the designer has to build hierarchy, contrast, and affordance in a UI.
exelius 13y ago
Yeah, this is a cute trick, but flat only works when you design the entire UI around it. I also am not a fan of overriding CSS that isn't expecting to be overridden.
EGreg 13y ago
Flat design works for hardware and static stuff, as you said. When I open up an app such as Mail, I want visual cues as to where the content is and where the controls are. I don't need the cognitive overhead of keeping the interface layouts in my head all the time. Sadly that's what iOS 7 introduced. It removed the cues that tied computers to the real world, and in the process copied Android and Microsoft's interfaces. Shocking - I don't think Steve Jobs would have allowed that. And also, the lack of textures makes it hard to see controls on some backgrounds, such as video controls on a white video. In short the designers seemed more like kids in a candy store than someone who really thought through usability.
- CamperBob2 13y ago
  More like kids playing with matches and lighters burning down the candy store. I can see the necessity of breaking from the past at Apple, post-Jobs, but their designers threw out a lot of old rusty tools without understanding what they were for in the first place.
msluyter 13y ago
Along those lines, I'm curious how flat design looks to those who are color blind (8% of men), as it seems to rely primarily on color for distinguishing various UI elements.
- adcuz 13y ago
  It's fine providing there is contrast.
- JasonSage 13y ago
  I'm colorblind and I usually don't have an issue with flat design. I rather like it. I do tend to rely more on light/dark than hue, and if a hue is too similar, light/dark is my only visual cue. For example, in similar shades of red and green, red usually "looks darker."
PhasmaFelis 13y ago
Can you give some examples?

by err4nt 13y ago

afschwartz 13y ago

I totally agree. There's a big reason why "Flat" is in quotes. :) From my perspective, the idea behind the bookmarklet is more of a way to give people a hint into what their site could look like if they decided to redesign it flat. Of course there are many functional uses of depth which aren't purely for aesthetics or skeuomorphism. For people who already understand that distinction, it's fair to say this bookmarklet has less value. But I think there's a pool of people who never considered designing their site flat. This gives them a quick way to see something like that.

err4nt 13y ago
from a technical perspective, I love the bookmarklet - don't get me wrong there. It was a solid blog post :D

mortenjorck 13y ago

Exactly. As I've said elsewhere: "Flat design" is as useful a term as "red design" or "round design". These are all just tools the designer has to build hierarchy, contrast, and affordance in a UI.

exelius 13y ago

Yeah, this is a cute trick, but flat only works when you design the entire UI around it. I also am not a fan of overriding CSS that isn't expecting to be overridden.

EGreg 13y ago

Flat design works for hardware and static stuff, as you said. When I open up an app such as Mail, I want visual cues as to where the content is and where the controls are. I don't need the cognitive overhead of keeping the interface layouts in my head all the time. Sadly that's what iOS 7 introduced. It removed the cues that tied computers to the real world, and in the process copied Android and Microsoft's interfaces. Shocking - I don't think Steve Jobs would have allowed that. And also, the lack of textures makes it hard to see controls on some backgrounds, such as video controls on a white video. In short the designers seemed more like kids in a candy store than someone who really thought through usability.

CamperBob2 13y ago
More like kids playing with matches and lighters burning down the candy store. I can see the necessity of breaking from the past at Apple, post-Jobs, but their designers threw out a lot of old rusty tools without understanding what they were for in the first place.

msluyter 13y ago

Along those lines, I'm curious how flat design looks to those who are color blind (8% of men), as it seems to rely primarily on color for distinguishing various UI elements.

adcuz 13y ago
It's fine providing there is contrast.
JasonSage 13y ago
I'm colorblind and I usually don't have an issue with flat design. I rather like it. I do tend to rely more on light/dark than hue, and if a hue is too similar, light/dark is my only visual cue. For example, in similar shades of red and green, red usually "looks darker."

PhasmaFelis 13y ago

Can you give some examples?