LearnHow to Go Flat without Sacrificing Usability

Allison Grayce
writes on December 18, 2013

Once upon a time, websites were full of realistic textures, reflections, letterpressed type, and drop shadows. Buttons looked like actual physical buttons, menus like actual divider tabs. The departure from that aesthetic has a lot to do with the desire to move toward more resolution independent interfaces. It’s also just an evolution of taste as our users advance with technology. They are more open than ever to learn new features and interactions. This gives us more freedom as designers to explore new aesthetics like flat design.

But just because resolution independence and flat design prefer simple, scalable vector shapes over raster graphics and images doesn’t mean your website should be under-designed or any less usable. These tips will help ensure your flat aesthetic doesn’t fall victim to what might otherwise be referred to as a complete lack of design.

Refine Information Architecture

What I absolutely love about flat design is that it brings the emphasis back around to content. For awhile there, we were so focused on realism that content took a back seat. With flat design, there’s no fluff (quite literally) around the interface to distract the user from what’s important. But this can be a double edged sword if your information architecture isn’t well thought out.

Ensure usability when going flat by first fleshing out your content hierarchy. This usually takes place in the website planning and wireframing phase. Is your website’s content scannable? Can the user find his or her way quickly to the next actionable item on the webpage? A website’s aesthetic – whether flat or skeuomorphic – is irrelevant without a solid information architecture.

Emphasize Actionable Elements

One of the biggest usability concerns when implementing a flat design aesthetic is making sure actionable elements still look clickable. Flat design means less dimension, so harsh gradients and intense drop shadows on buttons are a no-go.

What that doesn’t mean is we simply strip our skeuomorphic design of any dimension and call it a day. Skeuomorphic and flat solve different design problems, so as designers and visual problem solvers, we have to approach flat design differently and address this particular usability concern in a new way.

Ensure actionable elements are still usable in your flat design by playing up contrast. This refers to color, size, and/or position of actionable elements to non-actionable elements. Provide visual cues as to which elements the user can interact with and visual feedback when the user hovers, clicks, or taps on actionable elements throughout your website. Was the click or tap successful? Is it loading? This could be as simple as a hover state (consider how this translates to mobile/tablet) or subtle CSS3 animation.

Exposure uses only a thin border to differentiate actionable elements, but provides strong visual feedback on hover.

Focus Labs‘ new website uses color, contrast, and positioning to differentiate clickable elements, and provide visual feedback on hover with CSS transitions.

Treehouse reserves bright, saturated colors as a way to distinguish actionable elements from non-actionable elements throughout the grayscale user interface.

Humanize Your Flat Design

Stripping a user interface of anything and everything remnant of real life can create a pretty cold and uninviting experience, void of brand personality. Although not a direct impact on usability, it can and will have an overall effect on the user experience.

Ensure your flat design continues to evoke a positive user experience by inviting the user to relate to your product as if it were just another human. This can be achieved by including plenty of supportive imagery as organic content to offset the flat user interface design. Including imagery – whether it be icons, illustrations, or photography – will also help create the illusion of depth inside an otherwise flat environment.

Mailchimp uses icons, illustrations, and photography to create depth and evoke brand personality.

Squarespace leverages photography as an opportunity to relate to the user.

ohbaby uses blurred imagery in the background to add depth to an otherwise flat environment.

Treehouse uses photography to add depth and personality to their flat design.

Moving Forward

As you make the transition to a flat design aesthetic, whether it be for resolution independence or a simple matter of taste, consider the user experience along the way. It’s not as straightforward as stripping your current user interface of dimension, nor should it be. Flat design introduces an entirely new set of usability concerns that can be dealt with by refining the information architecture, emphasizing actionable elements, and humanizing your flat design.

6 Responses to “How to Go Flat without Sacrificing Usability”

  1. Web-eat Emptor on December 20, 2013 at 3:01 pm said:

    One caveat however is too many sites go overboard with minimalist theme and hide menus, case in point mailchimp is the example you showed here that made me cringe because they collapsed all their menus into hidden locations and then you have to poke around to even find the logout one (click on your user icon and a panel slides open..) etc.

    Even apps like firefox hide the check for update feature in a way that skirts the importance of that feature!

    Don’t sacrifice usability for looks. Hidden menus are the antithesis of user friendly, especially to those not familiar with your tools or to break old functioning modes just to suit your new dreamscape.

    • I couldn’t agree more with you! The mailchimp example was used to stress the importance of humanizing your flat design. “Don’t sacrifice usability for looks.” That is exactly the point I wanted to drive home with this post! 🙂 Thanks for the comment!

  2. I agree with Hashim. This is a great article and very useful. Especially how to use real images to compensate flat design. Cheers!

  3. I love those examples of using images to add depth. We’re moving away from fake images to real photos

Leave a Reply

You must be logged in to post a comment.

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more