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.
Content precedes design. Design in the absence of content is not design, it's decoration.
— Jeffrey Zeldman (@zeldman) May 5, 2008
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.
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.
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.