Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Fundamental Flaw in Flat Design

269 views

Published on

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu

Presented by Kate Meyer, Nielsen Norman Group

Overview

Flat design is an aesthetic style that doesn’t use any realistic or three-dimensional visual effects. When designers pursue a flat aesthetic, they often end up removing most of the signifiers (visual clues that tell users what’s interactive) from their interfaces. This lack of signifiers, combined with the popularity of flat design in the mainstream web since 2013, has been slowly altering how your users move through digital interfaces.

If your organization is considering adopting a flat, flat-ish, flat 2.0, or minimalist aesthetic, you should first be aware of the potential consequences. Even if your site isn’t flat, you can bet your users are experiencing flat design on other sites, and it’s changed their expectations of your designs. This talk explains what’s causing this epidemic of click uncertainty, and how you can avoid its negative consequences.

Target Audience

Designers (visual/UX), UX researchers, front-end web developers, management

Five Things Audience Members Will Learn

How to identify a flat design
The origins of flat design on the web
Findings from dozens of usability tests on flat sites
How a flat visual design impacts interaction design
How to create a flat design that doesn’t hurt usability

Published in: Design
  • Be the first to comment

The Fundamental Flaw in Flat Design

  1. 1. The Fundamental Flaw in Flat Design Kate Meyer UX Specialist @kate__meyer Nielsen Norman Group nngroup.com
  2. 2. 2
  3. 3. 3
  4. 4. What’s flat design? 4
  5. 5. flat design An aesthetic style defined by the absence of glossy or 3D effects A reaction against skeuomorphism and realism What’s flat design? Source: https://www.nngroup.com/articles/flat-design/ 5
  6. 6. What’s flat design? Source: https://www.nngroup.com/articles/flat-design/ 6 Skeuomorphic = Not flat
  7. 7. What’s flat design? Source: https://www.nngroup.com/articles/windows-8-disappointing-usability/ 7
  8. 8. “Being authentically digital is about going beyond the rules and properties of the physical world to create new and exciting possibilities in a purely digital realm.” - Steve Clayton, Chief Storyteller at Microsoft 8What’s flat design? Source: https://www.microsoft.com/en-us/stories/design/
  9. 9. What’s flat design? viget.com 9
  10. 10. What’s flat design? squarespace.com 10
  11. 11. What’s flat design? apple.com 11
  12. 12. ibm.com 12What’s flat design?
  13. 13. What’s flat design? Sources: google.com, https://creativemarket.com/blog/8-major-brand-logos-that-went-flat-in-2014 13
  14. 14. So…What’s the problem? 14
  15. 15. signifiers In digital interfaces, signifiers are perceptible clues that help users understand how to use and interact with those interfaces The problem Source: http://jnd.org/dn.mss/signifiers_not_affordances.html 15
  16. 16. 16The problem
  17. 17. Here’s the problem: Flat interfaces often strip out these important signifiers. The problem 17
  18. 18. The problem sunglasshut.com 18
  19. 19. weak signifier Something that resembles or is reminiscent of a traditional digital signifier, but is less noticeable The problem 19http://pomerleau.ca/
  20. 20. The problem Source: https://www.nngroup.com/articles/flat-design-long-exposure/ 20 Elements with strong signifiers Elements without strong signifiers Probably clickable Probably not clickable
  21. 21. The problem Source: https://www.nngroup.com/articles/flat-design-long-exposure/ 21 Elements with strong signifiers Elements with weak signifiers Probably clickable Elements without any signifiers Maybe?
  22. 22. Hertz Hertz Strong Signifier Version Weak Signifier Version The problem Source: Link goes here 22
  23. 23. Source: tobii.com, How People Read on the Web by Kara Pernice, Kathryn Whitenton, Jakob Nielsen 23The problem
  24. 24. The problem 24
  25. 25. Results On average: • Users spent 22% more time on the weak signifier versions • Users had 25% more fixations on the weak signifier versions The problem Source: https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 25
  26. 26. Hertz Hertz Strong Signifier Heatmap Weak Signifier Heatmap The problem Source: https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 26
  27. 27. Brilliant Earth Brilliant Earth Strong Signifier Version Weak Signifier Version The problem Source: https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 27
  28. 28. Brilliant Earth Brilliant Earth Strong Signifier Heatmap Weak Signifier Heatmap The problem Source: https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 28
  29. 29. The problem Source: https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 29
  30. 30. The problem Source: https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 30
  31. 31. Weak signifiers attract less attention and contribute to click uncertainty. The problem 31
  32. 32. click uncertainty An uncomfortable psychological state in which a user is unsure of how to click or tap to move through an interface The problem Source: https://www.nngroup.com/articles/clickable-elements/ 32
  33. 33. Consequences for user behavior • More likely to hover or click experimentally on a page • More dependent on feedback after they click or tap • More dependent on context clues to guess what is and isn’t interactive 33The problem Source: https://www.nngroup.com/articles/flat-design-long-exposure/
  34. 34. “By scrolling over it… then you know. Some stuff you assume. But it’s nice when links are bolded and you can tell. […] It’s hard when you think something’s a link and it’s not. And you have to figure out how to get it another way.” https://www.axa-im.com/en/ 34The problem
  35. 35. “When it’s blue and underlined, that’s how you know initially. You see that even in Word and stuff. But really, especially when it’s underlined, that helps. Or if it’s a button, it doesn’t have to say, ‘Click Here,’ but if it says, ‘Buy now’ or ‘Purchase’ or ‘Add to cart’.” aircanada.com 35The problem
  36. 36. “I don’t. I just start clicking and praying that it works.” toyota.com 36The problem
  37. 37. “Users spend most of their time on other sites.” Jakob Nielsen’s Law of the Internet User Experience The problem Source: https://www.nngroup.com/articles/end-of-web-design/ 37
  38. 38. Getting flat design right The solution 38
  39. 39. The solution https://panam.gateway.com/s/SOUND/u00566/u0056636.shtml 39
  40. 40. Flat design has potential • Clean • Modern • Not overwhelming The solution 40
  41. 41. Don’t break the interaction design 41The solution
  42. 42. 1) Be consistent • Don’t use the same treatment for both static and interactive elements • Use consistent, high-contrast color variations as clues 42The solution Source: https://www.nngroup.com/articles/clickable-elements/
  43. 43. The solution http://menagerieclimb.com/ 43
  44. 44. 2) Pay attention to your context clues • Where your interactive elements are placed in the page • What’s around them • What their label text says 44The solution
  45. 45. 3) Simple + flat works best • Lots of whitespace helps flat interactive items be more salient • If you’re content-heavy, reconsider if flat is right for you • Using a traditional layout with a flat design is a good idea 45The solution Source: https://www.nngroup.com/articles/flat-design-best-practices/
  46. 46. The solution kentuckyderby.com 46
  47. 47. The solution anntaylor.com 47
  48. 48. 3) Flat-ish is an option • AKA flat 2.0 or semi-flat • Design style that’s mostly flat, but uses some shadows, highlights, and layers to create depth • You can have a clean, “authentically-digital” UI without banishing 3D effects 48The solution
  49. 49. The solution Source: https://material.io/guidelines/ Google Calendar, Google Maps, Gmail, Google Photos 49
  50. 50. 4) Test! 50The solution
  51. 51. Key Takeaways • Flat design is great—when it’s done right. • Weak signifiers make interaction more difficult. • Tell people what they can do in your product. 51
  52. 52. Related articles • Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users https://www.nngroup.com/articles/flat-design/ • Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency https://www.nngroup.com/articles/flat-design-long-exposure/ • Flat UI Elements Attract Less Attention and Cause Uncertainty https://www.nngroup.com/articles/flat-ui-less-attention-cause- uncertainty/ • The Roots of Minimalism in Web Design https://www.nngroup.com/articles/roots-minimalism-web-design/ • Flat-Design Best Practices https://www.nngroup.com/articles/flat-design-best-practices/ • Beyond Blue Links: Making Clickable Elements Recognizable https://www.nngroup.com/articles/clickable-elements/ • “Learn More” Links: You Can Do Better https://www.nngroup.com/articles/learn-more-links/ 52
  53. 53. Thanks! 53 @kate__meyer meyer@nngroup.com

×