2013_06_04_featured Demo UX Cases

Flat Web Design Is Here To Stay

Lately, there has been a big discussion going on about flat web design. Some think it’s just a trend. Others believe it will change the way we design for the web forever.

We tested the homepages of four different websites with a flat design to find out what people really think! In a visual Usabilla Survey, we asked a mixed group of web professionals for their opinion about flat web design. In total, we gathered 2624 feedback points and 638 notes from 100 professionals. The results are clear. Flat web design is here to stay. (Download the full report as PDF.)

What web professionals think of flat design

We asked 100 web professionals about their thoughts on flat web design. Participants were asked to rate how familiar they are with flat design on a scale from 1(not at ) to 5 (very familiar). On average, our professionals rated themselves with a 3.56 regarding their expertise on flat design. See the charts below for a distribution of their expertise and an overview of their professions.

Overview of the participants’ expertise of flat design and their profession.

Before we take a closer look at some actual designs, here are some key facts that we discovered.

The 5 things that people associate with flat design are:

  • Simple
  • Clean
  • Colorful
  • Modern
  • Boring

We gathered different association and brought them together in the word cloud that you see below:

Word cloud based on what web professionals associate with flat design.

The 5 main advantages of flat design are:

  • Clarity
  • Ease of Use
  • Modern appearance
  • Efficient responsive design
  • Fast load times

The 5 main disadvantages of flat design are:

  • Different from what people are used to
  • Difficult to execute well
  • Unclear what’s clickable
  • Boring design
  • Lack of personality

68% say that flat design is here to stay

We asked participants whether or not they think flat design will still be around in 5 years from now. 68 percent is positive that flat design is not just a trend, but affects how we design for the web in the long term. 27 percent is not sure about the development of flat design. Only 9% is convinced that flat design is just another trend, which will not last.

68% of the web professionals in our survey think that flat design is here to stay.

Taking a closer look at flat design

We asked the following questions about the homepages of: Wistia, Windows Phone, rdio. and LayerVault.

  • Click on the first three things that draw your attention? Please leave a note and explain why.
  • Click on the elements that you like about this design. Please leave a note to let us know how they make you feel.
  • Click on the elements that you would change about this design. Please leave a note to let us know why.

1. What draws the most attention


The rdio homepage shows a very colorful, big visual to attract attention. With big succes.

What people say about rdio:

  • “I love the beautiful, vibrant colors silhouetting familiar/famous faces.”
  • “Red is a very attention-grabbing color.”
  • “The colors of this image were the first things to catch my eye.”
  • “I noticed the button b/c it is big. Also, its blue color stood out against the white background.”

What people say about the other pages:

  • “Video draws my attention, when I see a play button I want to click it.”
  • “The image of the two people grabs my eye.”
  • “I immediately looked at the image with the bright yellow border.”
  • “The big headline and reference to smartphone made me look.”
  • “Icons are simple and easy to scan.”
  • “This text stands out given the sparseness of its background.”
  • “The headline caught my attention first because it was big and bright and in my face.”
  • “Sky blue color is bold and eye catching without being straining.”

2. What do people like about flat design?


The homepage of Wistia is clean and colorful. At the same time, people think it’s boring and confusing.

What people say about Wistia:

  • “Logo font size and colors stand out nicely on the white background. Simple and professional design.”
  • “I like the colors and the simple and clean shape of the logo.”
  • “The simplicity of the header is refreshing.”
  • “The navigation bar is very clear and uncluttered. It makes the website easy to navigate.”
  • “Love the the vibrant blue color. Makes me feel alive.”
  • “I like the simpleness of this site. It makes me feel calm.”

What people say about the other pages:

  • “I really like the typography.”
  • “This is a very neat and easily readable presentation.”
  • “The images stand out over solid color backgrounds and do not get cluttered.”
  • “I love the bright colors. They really make the page pop out.”
  • “So simple and clean. The whole site really catches my attention.”
  • “That’s an attractive background with lots of colors.”
  • “Excellent graphic choices, the images are colorful and exciting and definitely grab my attention.”
  • “I like the image tied with text, it’s easy to read and notice. It makes me feel clarity and purpose.”
  • “”

3. What do people dislike about flat design?


The LayerVault website is flat and modern – yet, there is a lot of room for improvements.

What people say about LayerVault:

  • “Boring, what’s your message?”
  • “This turquoise background is off putting. It’s an odd color for here.”
  • “I just got on this site, why would I have a left button? Just have a right button, I don’t know where I’m going anyway.”
  • “The page overall is too wide making me have to scroll.”
  • “This gray area at the bottom doesn’t seem to fit with the attention-grabbing colorful graphics above. Seems a little bland”
  • “These links should be easier to see and not greyed out.”

What people say about the other pages:

  • “I would add a button to activate users to scroll down.”
  • “This site has so much blue! Use of another color might work well.”
  • “Bad use of gray and choice of contrast/focus colours.”
  • “Poor detail contrast. It looks like a white area almost.”
  • “This font is too thin to be used in reverse on a saturated color. It makes my eyes go buggy, especially the smaller it goes.”
  • “I like how they make use of whitespace but it’s very inconsistent, especially with regard to the images.”
  • “The yellow border looks out of place even though it highlights the screen.”
  • “I feel that this is a big waste of space and could have been shrunk down enormously to save space and make less scrolling by the web visitor.”

4. How usable is flat design?

One argument against flat design is that it’s supposedly less usable. Reason for that is the fact that clickable elements lack an indication that they are clickable. We asked our professionals to identify clickable elements on the four homepages.


Flat design is clean and simple. However, keeping it usable remains a challenge.

On the Windows Phone website, people identified 50 different clickable areas. However, only 35 of them are actually clickable. This means that 30 percent of what people thought were links are just regular text or visuals.

For the Wistia homepage, people identified 46 clickable elements. The page only comprises 31 links. 33 percent of the identified links are in fact not clickable.

On the rdio homepage, people thought that 40 different elements were clickable. Only 25 elements really are links. Almost 38 percent of the identified links were not interactive.

On the homepage of Layer Vault, people identified 30 links. Only 5 links were identified incorrectly. This means that only 16 percent of the identified links were not correct.

Conclusion

So what do these results tell us? From 100 web professionals, we learned that there are still mixed feelings about flat design. People like it, because of its clear and modern appearance. At the same time, they think that it easily lacks personality and excitement.

Still, 68% of the professionals that we asked thinks that flat design is here to stay. So it does have potential and we can expect it to improve the web for the better – if executed well and with a lot or care. The idea is to keep it simple with a focus on content, colors, negative space, and big fonts. However, challenges remain:

  • Putting content to the center of design is certainly a change for the better. At the same time, it becomes more important than ever to know what is relevant and to put that content into words.
  • Colors take in an aesthetic as well as semantic role. They must match the purpose of the site. They may be bright, but must not be dominant. They must remain usable contrasts.
  • White or negative space is a great design tool – if used consistently and with care. It must not create a burden for the user.
  • Typography can be used for more than just text. Just keep it mind that readability is still affected by contrast, font size, line height, letter spacing, etc.
  • What is clickable? The biggest challenge of flat design is to keep it simple and at the same time intuitive.

Your thoughts?

We asked 100 web professionals what they really think about flat design. What do you think are the biggest challenges and chances of flat design?

18 comments

  1. Alberto

    Clarity, clean, contrast, good use of white space, ease of scanning, attention-grabbing hotspots, … are attributes of good design, not (only) of flat design.
    Good design is here to stay, styling trends will pass. A year from now, I bet we won´t use emerald or a determinate color palette identified with flat design, for example.

  2. Kevin

    There is a distinct design bias showing in the comments: most were regarding the aesthetics of the sites and raised issues that would be there even if the design were not “flat”, i.e., color choice, scrolling, page width.
    The usability section is more illuminating. What would be really informative would be comments and usability results juxtaposed from typical users. That would answer the question “Is the flat motif useful in real interfaces?”

  3. Michael - Web Design

    I like the flat web designs. They attract to me. The use of color stands out on most of the pages. Like you said in the article you can’t really tell what you can and can’t click on. But overall I like the designs and layouts of the flat web designs.

  4. Herrin Larkan

    Call it flat or boring or whatever you like. It’s just another design driven trend that like many of the others, that sacrifices useability for coolness.

    Space generally makes it easier to find what you’re looking for but many of these examples are over the top. So much space that it’s a waste of peoples time.

    The Windows Phone site at least makes a clear promise and manages to focus on one thing that makes the phone better.

    When design overrides marketing, companies and businesses tend to put less effort into communicating their point of difference.

  5. Jason

    I mostly design flat web designs. My own portfolio is a flat design and looking at the heat maps I can tell that people have no idea as to were to click. The wonderful thing about these maps is they give me the ability to know what pieces of my design need to change. Thanks for the article!

  6. Linda

    I am surprised that you draw any conclusions at all about flat design based on a survey of design professionals. What matters is whether people who actually visit these sites are able to succeed and enjoy their experiences. Only in that context is design relevant.

  7. Sabina Idler

    Hi Linda,

    I guess when asking people about their opinion it’s fine if they are professionals (at least than they are familiar with the concept of flat design). However, it would indeed be interesting to do the “click” test again with people, who are not familiar with it.

  8. Ivan Burmistrov

    My points with regard to flat websites:

    (1) Completely flat Windows 8 UI became a usability disaster (see eg http://www.nngroup.com/articles/windows-8-disappointing-usability/). There is no point in replicating this disaster on the web.

    (2) Users need 3D-cues to understand what is clickable and what is not (buttons must raise above the background), and where they can type (entry fields must be indented below the background). Your research shows that *web professionals* failed epically in determining what is clickable on flat websites: 30% of false guesses is absolutely unacceptable level. There is a simple “test” showing the difference in frequencies of clicks on flat and gradiented buttons: http://www.zebraa.nl/buttonforahero/ (click any button and see the results: the difference is statistically significant at p<o.oo1 level).

    (3) Huge amounts of blank space (a key element of flat style) is a reasonless waste of screen estate. A result is that flat websites make users scroll, scroll and scroll. Instead of scrolling, normal users would rather go somewhere else. The web is large…

    (4) Font-size contrast – huge headers and very small main text (another key element of flat style) – barely favors legibility of both. In particular, I suspect that extra large fonts are less legible than “normal” ones.

    (5) Flat design undermines customers’ loyalty. Customers perceive flat websites as non-creative, “underdesigned” and “cheap” (“Everyone can draw colored rectangles!”).

    (6) Majority of existing flat websites belong to design agencies or individual designers. The business approach to this problem appears to be a lot more sober than the temperament displayed by “design” people hailing the “flat revolution” enthusiastically. Businesses do not want to lose their money.

    (7) “Boring” is one of most frequent adjectives people use to describe their general impression of flat designs.

    Resume: flat is bad ;θ)

  9. Sabina Idler

    Hi Ivan,

    Thanks for your thoughts. You make your points very clear and I can agree with many of them. Thanks for sharing.

  10. ankara web tasarim

    I have read so many posts on the topic of the blogger lovers except this piece of writing is in fact a
    nice post, keep it up.

  11. Sabina Idler

    Thanks fo much for taking the time to read it! And of course for the kind comment!

  12. Ducktoes Web Design

    Very cool, thanks for the post!

  13. Web Designer Preston

    Wonderful designs! All the flat website design are awesome. I am also a designer and have good experinace in the same filed. I learn new from your post and like to apply ion my own website design.

  14. sstjohn

    I have always found flat design boring and lacking personality, but the fact that you pointed out that in three of the four sites, over 30% of users were clicking on static imagery or text. Doesn’t this go to the heart of Web design 101? Mystery meat navigation? Ring any bells? This new “trend” seems to be scrapping 20 years of UX research just for the sake of convenience in construction and browser compatibility. Ivan Burmistrov, you nailed a very excellent point in the Win 8 UX disaster. This should tell you the future of flat design. Users will grow tired of the cookie cutter, bland, zero personality look and feel and crave the rich experience of a site that has heart and soul.

  15. Anthea Cossette

    It’s a trend. A passing fad. Sure it’s a nice trend, one of the better ones I’ve seen in my almost 12 years as a web designer. But still.. just a trend, a nice re-invention of the wheel…. :) I personally tend to stay away from trends because like all trends in web design have proven in the past, it soon becomes stale because everyone copies it and it just becomes boring and unoriginal. You’ll see.

    http://lava360.com/10-years-old-web-designs-of-famous-websites/

  16. pittsburgh seo

    Excellent post. I was checking continuously this blog and I am inspired!
    Extremely useful info specifically the last section :) I maintain such
    information much. I used to be seeking this particular information for a long time.
    Thanks and good luck.

  17. David Morbac

    I’m not sure that everything is true !

  18. David Morbac

    I can’t get everything !

Leave a Reply

Your email address will not be published. Required fields are marked *