Mike Ruins Flat Web Design…For the Sake of Your Customers

Mike_Ruins_Digital_MarketingProbably the #1 reason you’ve updated your website in the past is because you felt like it was outdated, and it probably was :).  So you task your developer (or hire one) to build you a nice, new site that gets you back in line with the times.  But beware.  Technology advances quickly.  Most of the time, too quickly for usability principles to keep up.  That’s what happened with a major design trend that started around 2012 – flat design.

What’s Flat Design?

Flat web design focuses on stripping away elements of sites that mimic our experiences in the physical world.  For example, by leaving out glossy, three-dimensional elements from buttons, they no longer have the raised look that a physical button would have.  Why would designers want to do that?  For some understandably good reasons.

For one, the rise of mobile devices brought challenges for designers with putting realistic elements into responsive designs.  They took up screen space and carried big load times.  Flat design elements could easily adapt.  Not only did many like this, but they perceived the aesthetics of flat design to be cleaner and more “honest.”  By honest, they mean they aren’t trying to give the impression that a button is actually able to be pushed down when it’s not.  After all, you’re still clicking a mouse or touching a screen.  You’re not actually pushing a button down.

Its Major Problem

While this sounds good, for the most part designers didn’t consider the major problem this design style brought along with it.   It can be summarized with a few snippets from Kate Meyer’s (Nielsen Norman Group) article about the subject

Our primary objection to flat design is that it tends to sacrifice users’ needs for the sake of trendy aesthetics…we’ve noticed that long-term exposure to these flat yet clickable elements has been slowly reducing user efficiency by complicating their understanding of what’s clickable and what isn’t.

Basically, if you don’t somehow communicate clickability to users, they have a hard time figuring out what’s clickable and what isn’t.  Imagine that :).  Sometimes flat things are clickable.  Sometimes they aren’t.  It’s a guessing game that adds to a user’s cognitive load – which is a fancy way of saying you make them think more.  As cognitive load increases, so does the likelihood of user frustration and abandonment of their task on your site.

A Quick Example

Take a look at this site as an example and try and guess what elements on the page are clickable…


Tilly's Homepage


Now, take a look at what actually IS clickable…


Tilly's Homepage 2

Did you get them all?  Of course you didn’t, because the two buttons in the middle of the page were invisible until I moused over them!  Also, the free shipping text gives no indication that it can be clicked for more information.  Looks simply like informative text to me.  Think you can click on “Your Store” to find the store closest to you?  Nope.  You have to click “change” to be able to do that.  What exactly am I changing if I’ve never selected a store before?

Now that you see how flat design affects your customers, it kind of ruins it for you, doesn’t it?!?

Flat 2.0 – Let’s Compromise

Mostly FlatBut alas, there is hope.  This doesn’t mean we have to retreat to the design styles of yesteryear. Kate points out that there’s another alternative that provides an opportunity for compromise – flat 2.0.  It’s mostly flat (like being mostly dead), but uses specific design elements that traditionally communicate clickability to users (these are just some)…

  • Shadows, highlights and layers
  • Placement on the page (i.e. if it’s where the left or top navigation typically is on a site, it’s expected to be clickable)
  • Actionable text
  • Boxed text
  • Colorful, underlined text
  • Recognizable icons (like shopping carts)

This makes users feel like they know exactly what their options are and don’t have to hunt and peck for them.  On the site above, they should at minimum do these things…

  • Make the Shop buttons visible
  • Make the “change” link a different color
  • Make the free shipping text a button or colorful underlined text
  • Box the “Tillys TV” text
  • Make the shopping bag a more universally recognizable icon

Let’s take a quick look at a site that uses Flat 2.0 well…


Flat 2.0 Design Example


Notice how most of the actionable text is in boxes with round corners.  The top navigation is clearly segmented from the body of the page and includes arrows.  The text at the top of the page is supported by a “Check it out” underlined text with an arrow next to it.  These all signify clickability while keeping the flat aesthetic; keeping users from getting confused.

Don’t Sacrifice Usability

In the end, you want to avoid creating a new site that helps you feel “with the times” if it sacrifices usability.  I’ve seen numerous examples of companies throwing a bunch of time, money and energy into a new website only to discover these types of problems after launch.  This is one of the worst scenarios that can happen with your digital footprint.  Marketing campaigns can be turned on or off and adjusted relatively quickly and easily.  But revisited your site design after launch once you thought the project was “over” can be deflating and provide residual performance declines.  Don’t let it happen to you.

Make sure to check out more posts in the Mike Ruins Digital Marketing series, where I challenge the status quo by tackling digital marketing topics that most practitioners have all wrong.

Mike Fleming

Mike Fleming is a Senior Client Manager for Point It, and has been managing PPC accounts of all kinds for over 6 years; with a strong emphasis in Analytics and Conversion Optimization. He’s a respected digital marketing blogger and speaker whose articles can be found on industry blogs like SEMRush.com and SearchEngineGuide.com. He also contributed to a published book called The Best Damn Web Marketing Checklist, Period!. Mike enjoys playing, writing and recording music, playing basketball and investing. He resides in Canton, Ohio with a girl who threw a snowball at him one day…then married him.

No Comments

Leave a Comment: