BLOG

on Conversion Rate Optimization

5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions

Flat design is easily one of the most popular buzzwords in the current UI/UX space.

Especially in the last few years, flat design has been pushed into mainstream. Even the biggest companies are now following this design approach.

So what’s the reason for its increasing popularity? Simply put, it works!

Flat design can help improve user experience on websites and apps.  This, in turn, can effect a higher number of conversions.

This post will introduce you to flat design, and the advantages it can offer.

Here we go.

What is Flat Design?

It is a design approach that involves creating minimalistic two-dimensional (flat) illustrations for web and mobile interfaces.

flat design table
Source

Flat design gets rid of unnecessary styling, and elements that give an illusion of three dimensions (such as gradients, textures, and drop shadows). This is in contrast to skeumorphism, another design practice, which involves creating designs that resemble real-life objects.

Flat design is all about crisp shapes, (both) sober and bright colors, and scalable illustrations. Even the fonts used in flat design are mostly sans-serif.

Issues with Flat Design

In its early days, flat design was related too closely to minimalism and mobile-first design. While both these attributes contribute heavily to a successful flat design, they cannot be the only aspect in a flat design.

An example can be found with Windows 8 released by Microsoft. Metro design of Windows 8, considered by some as the pioneer of flat design, had some inherent flaws with it.

The NN Group conducted a usability test on Windows 8, and found out that users had difficulty in identifying actionable objects on its interface.

Windows 8 Flat design

Regarding the OS interface (as seen in the picture above), the study says:

“Where can you click? Everything looks flat, and in fact ‘Change PC settings’ looks more like the label for the icon group than a clickable command. As a result, many users in our testing didn’t click this command when they were trying to access one of the features it hides.”

Windows 8 Flat design
Additionally, the Windows 8 interface was biased towards mobile users. The big colorful rectangular tiles looked sweet on a mobile device. The interface was well-suited for finger gestures on a touch-screen. However, the same tiles on a big desktop monitor looked clumsy. Its usability with a mouse was in question, as well.

Flat Design 2.0

Fixing the usability issues associated with it, flat design has evolved over time. It has moved on from being absolute-flat to semi-flat.

Though the approach of flat design 2.0 is still flat, it employs layers, contrast, and subtle shadows to give a hint of depth in an interface.

Here’s an example (Notice the subtle shadow and layers.):

Flat Design 2.0
Source

Now that we are familiar with what flat design is, let’s look at how it actually helps websites win over users.

#1 Flat Design Improves Readability

One of the cornerstones of flat design is readability.

Flat design allows users to view and understand website content with ease, regardless of whether they do it on desktops or mobile devices.

It replaces complex images with simplified (minimalistic) icons and vectors. Flat icons and their accompanying text make it easy for users to grasp any concept.

Moreover, flat design emphasizes clear typography and sans-serif fonts. The text background, too, normally comprises of a single contrasting color.

In flat design, content is the focus. Tweet: 5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions. Read more at https://vwo.com/blog/flat-design-increases-conversions

Let’s take an example.

This is the Crazyegg website from the year 2009:

Crazy Egg 2009 website

And this is the new, flat look of the website at present:

Crazy Egg Flat design website

On comparison, we can observe how the new flat design is able to de-clutter information and improve readability. The new design  establishes Crazyegg’s value proposition clearly, with minimal content.

With flat design, educating users becomes a breeze. And once users know about a product/service better, the chances of them converting increases, too.

#2 Free of Distractions

Flat design is all about minimalization.

A flat design lacks embellishments or decorative elements that don’t provide value to users. The aim is to steer users’ attention towards the prime content of a website.

Looking at the CrazyEgg example above, we observe that its new design is free of distractions. The attention of users only goes where the website wants it to go.

This design feature is often referred to as white space.

White space is an integral part of flat design. Tweet: 5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions. Read more at https://vwo.com/blog/flat-design-increases-conversions

Here’s another example from GetWalnut.com.

Walnut website - flat design

Walnut is an expense managing mobile app for individuals. On its website, Walnut is clearly able to display its key differentiators using white space. Surrounded by ample white space, the flat icons and text are able to grab users’ attention, convincing them to try out the app.

Flat design makes it easy to prioritize and highlight content. Tweet: 5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions. Read more at https://vwo.com/blog/flat-design-increases-conversions

Related Post: JellyTelly Found their Navigation Elements Were a Distraction, Are You Making the Same Mistake?

#3 Decreases Page-load Time

Slow loading websites and apps are irritating to use; users bounce away.

Slow load time - user sleeping
Source

When you cannot cut on the content that you need to show to your users, and you still have to keep your website fast, you can either go for low-resolution images and graphics, or use flat design. Flat design seems like an obvious choice here.

Compared to websites that use heavy images and graphics, flat design loads faster. With the absence of gradients, serif fonts, and other skeuomorphic properties, flat design elements are smaller in (file) size. Web elements with smaller file size loads quicker than elements with larger file size. Google recently changed its logo to a sans-serif one, in order to reduce the logo size and ultimately the load time of its homepage.

Even from a developer’s perspective, flat design works quicker. Components of a flat web page are vector or code-based graphics, which further contribute to a reduced page-load time.

Moving further. A fast loading website affects the bottom-line of a business. It can actually help increase conversions and revenue for websites.

Fast loading websites can effect a higher number of conversions. Tweet: 5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions. Read more at https://vwo.com/blog/flat-design-increases-conversions

Here’s an elaborate read on Why Decreasing Page Load Time Can Drastically Increase Conversions.

#4 The SEO Advantage

The load-time of a website plays an important role in determining the website’s ranking on search engine result pages. Page loading speed is one of the top factors in SEO for websites.

Since flat design decreases load time for websites, it in turn helps websites with search engine rankings.

Graphic-heavy slow websites, in contrast to websites with flat design, receives negative scores from search engines.

Flat design can actually help websites in SEO. Tweet: 5 Reasons Why You Shouldn’t Ignore Flat Design for Epic Conversions. Read more at https://vwo.com/blog/flat-design-increases-conversions

With a greater chance of appearing on top of SERPs, flat design websites can tap high-intent users on search engines. Normally, high-intent users are more inclined to make conversions.

Add-on: Apparently, Google is testing a new feature on its SERP that labels websites as “slow” if they have a high load-time.

Take a look at the below screenshot.

Google SERP screenshot

 

#5 Up-to-date Look

Web users form an impression about a website in about 50 milliseconds!

It means when users have spent only 0.05 seconds on a website, they decide whether they like the website or not.

So how does this work? Users can’t possibly go through the content of a site in such a short span.

They judge a website based on its look and feel. Users visit a website, look at its design/UI, and form an opinion about the website.

Flat design can help websites in shaping a favorable first impression on their visitors. When users visit a website or an app, the modern look and feel of flat design influences them positively.

Flat Design Meme

Flat design is arguably the biggest design trend at the moment. Giants of the web and mobile industry such as Apple, Google, Microsoft, etc., have accepted flat design with open arms. Users can take this as a cue, and set flat design as a benchmark for all the websites they visit.

Conclusion

Flat design is the design trend prevailing across web and mobile space, presently. Although best known for improving user experience, flat design has various other benefits to offer: better readability, reduced page-load time, seo advantage, etc. We’ve seen industry giants incorporating flat design and tapping those benefits.

If these benefits make sense to you and your business, (only then) you too should consider branding your website or app with flat design.

Nitin is a traveler, a cinephile, and a webaholic. (He just can’t get enough of cat videos!)
Professionally, Nitin is a marketer at VWO, who loves to write about Conversion Optimization.
Find him on Twitter: @NitinDeshdeep

Comments (2)

Leave a Comment
  1. I really enjoyed your article! You have convinced that flat design is the way to go.

    I have a question, however. What do I do with the images I purchase to enhance my web content, blog posts, etcetera? Does a mix of flat and traditional digital photos look weird? Is it possible to change regular images to flat? I know there are some stock photo houses who have a limited inventory of flat images.

    Your advice will be greatly appreciated!

    1. Hi Roxann,

      Thank you for your comment.
      I believe that traditional digital images can fit in greatly in a flat website. However, the images need to be contextual to the website content, and should be able to match the tone and style of the website. Here’s how Paypal does it in a masterly way.
      Yes, regular pictures can be transformed into flat images, but this often requires a lot of effort. On various occasions, regular images can be conveniently replaced with flat icons. And there are tons of flat icon resources available on the internet, such as flaticon.com.

      Hope this helps you.

Leave Comment

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

You may use these HTML tags and attributes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Contact Us / Login

Product
Resources Home