Flat Design

From Cognitive Accessibility Task Force

Is Flat Design a coga11y anti-pattern as so an issue?

Since 2013 Flat design has become a popular UI design pattern characterised by clean flat areas of colour, clear typography and simply iconography. Affordances provided by skeuomorphic features such as simulated 3D buttons using bevels are shunned and some claim this makes it harder for new users to understand the UI as the metaphors are not based on the real world.

Flat Design hit the main stream consumer products with iOS 7 and Windows 8. For the web, examples of flat design include Facebook which has always been fairly flat and Google's Material design which is now available as part of Polymer 'framework' built on web components.

Does this have a negative impact cognitive accessibility?

The primary challenges would appear to be that it is more difficult to locate a desired items to interact with and may not be clear what interaction may do without trying the interaction first. this could potentially be daunting? Google Material Design uses shadows to indicate the virtual height along with icons and.or text but otherwise has no visual clues to aid understanding or recollection. It does however provide animations to clearly indicate the response of the display to an interaction, from touch, pointer, keyboard or voice.

Interestingly, several features of flat design appear to be beneficial to those with visual disabilities. Relatively large areas of uncluttered contrasting colours, simple iconography and large clear fonts all make reading easier, if not necessarily easier interpretation.

Comments from UX experts

  • "Flat design makes it harder to differentiate things." ~Don't Make Me Think Revisited by @SKrug p153
  • "Another needless source of question marks over people's heads is links and buttons that aren't obviously clickable. As a user, I should never have to devote a millisecond of thought [cognitive load] to whether things are clickable - or not" Don't Make Me Think Revisited by @SKrug p15
  • "Flat design hides calls to action" - Neilson Norman Group