Why the Flat Design Trend is Hurting Usability

The flat design trend has taken over the graphic design world in a very short amount of time. One of the first big interfaces to go flat was Windows 8. However, it wasn’t until the release of Apple’s iOS 7 that we really saw a huge increase in the many interfaces, websites, apps, and more that adopted a flat design. Before then, most designs were skeuomorphic with lots of 3D effects, gradients, and texture.

The look is both trendy and modern, and the new design trend is still surrounded by a buzz. But not all of the buzz is positive. In fact, many users are not satisfied with the new look. Many design influencers don’t support the trend either. Jakob Nielson, co-founder of the Nielson Norman Group, calls flat design a “fashionable design” threat that hurts both users and companies. Pete Rojwongsuriya in his article on Design Instruct writes, “Another problem with the flat design trend is that user interfaces are becoming boring and dull.” He goes on to point out that websites are becoming much too similar.

Clearly, a trend that is being criticized so loudly by voices of authority in design and related fields needs to be examined. UI/UX designers and web designers need to take caution when creating a flat design. But does this mean that flat design should be avoided entirely? Obviously, the answer is no. Flat design is a too strong of a trend to just drop, and there are certainly lots of pros to the design style as well. So let’s take a closer look at the flat design trend, why many say that it is hurting usability, and what others are doing to counteract the negative effects of flat design.

What is Flat Design?

Most know by now what flat design is, but let’s look at it briefly just to help us better see the problem. A flat design seems the complete opposite of skeuomorphism. It contains bold colors, almost like an elementary classroom, for one. Also, a true flat design lacks extras such as extreme gradients, textures, 3D effects, and depth. In short, a flat design lacks the realistic look of skeuomorphic designs.

Photo Credit: JoshBermudez via Compfight cc and maheshone via Compfight cc

Before the iOS change to a flat look, icons resembled how they appeared in real life, but now the icons look more like illustrations and much less like real life objects. When Jony Ive, Apple’s Senior Vice President of Design, explained the reason why iOS 7 went with a flat design, he pointed out that people are now comfortable with touch screens and no longer need real world representations. “So there was an incredible liberty in not having to reference the physical world so literally. We were trying to create an environment that was less specific. It got design out of the way.”

Flat designs work well in responsive websites as well, since flat designs are based on a grid. The Archie Wilkinson website below is an excellent example of just how beautifully a flat design transfers between differently sized display devices. The navigation menu, the image, the icons all line up neatly and cleanly on a smaller screen, and the flat design keeps it from looking crowded on such a small space.

(UPDATE: The website shown above is no longer online.)

What is the Purpose of Flat Design?

The flat design trend is a move toward making design easier for both designers and users. The idea is to remove all of the extras in order to present information clearly and cleanly. Modernism is minimalism, and the flat design trend certainly mimics this. Jony Ive described the updated flat design of iOS 7 as a way to “bring order to complexity.”

Basically, the idea behind flat design is that users can figure out what buttons and other elements in an interface stand for without the need for a real-world appearance. Without the extra time necessary in skeuomorphism, designers can spend more time on more important aspects in a flat design.

The Stereo Creative website uses parallax scrolling to create interest, but the flat design keeps the scrolling effect from being too much.

How is Flat Hurting Usability?

The only real problem with flat designs is that they often go too far. Minimalism for the sake of offering a more simplistic, user-friendly design is a very noble goal. But too minimalist creates usability issues, such as the ones we are seeing with the flat design trend.

The iPhone Control Center is so flat, it’s hard to tell if any of the icons are buttons.

Two large complaints aboug flat designs are that they are not intuitive and are simply way too confusing. Without the visual cues that help users know which icons are buttons, interfaces and websites leave many users frustrated. Windows 8 created their flat design specifically for tablets, and it works pretty well for tablet users since swiping through the interface works for a touch screen. However, desktop users with a mouse have trouble learning how to manuever through the interface.

Photo Credit: aaron_anderer via Compfight cc

The truly glaring problem with Windows 8, though, is the poor navigation. Many users complain about having trouble finding files and knowing what they can click on and what they can’t. The Settings, for example, are difficult to remember how to find (users have to move their mouse to the upper right corner of the screen and select Settings from the pop-out menu). The icons for different setting options are poorly placed and don’t even look like buttons.

It all boils down to usability. It doesn’t matter how minimal a design is, if users can’t easily and intuitively navigate through the site or interface, then the design is a fail. Unfortunately, we see a lot of flat designs relying too much on the minimalism and neglecting the usability.

In the Seclgroup website above, the flat design makes a lot of information look much less cluttered. The homepage is organized well, thanks to the grid of the flat design. However, what is clickable and what isn’t clickable is a bit confusing. Some clickable items light up, while with others, the only way to tell that it is a link is when the mouse turns from the pointer to the selection icon.

The Berlin Connect Church website is also a good example of a beautiful grid layout with flat features. However, images highlight when hovered on, making them appear to be clickable. The only problem is that they aren’t. Just because a design is flat, doesn’t mean that other design rules, such as consistency or following known visual cues, can be ignored.

The Solution: Almost-Flat

On the positive side, no one can deny that the simplicity of a flat design can give users a much more pleasant, less overwhelming experience. The problem is when flat becomes too flat and doesn’t contain visual clues users need to help them effortlessly move through an interface.

This is where interfaces such as Windows 8 and Apple’s iOS updates are adding back into the design some of those visual cues. Windows 8.1 allows users to opt out of the Modern UI interface and use the desktop version instead. The iOS 7.1 update includes an improved look and feel for more intuitive actions, and improved apps such as the calendar now including a month view.

Many websites are using effects such as highlighted text when a clickable item is hovered on. The BrandAidDesign website uses a variety of cues but in a consistent way – underlining text, highlighting images, and animating icons.

The Montere website does an excellent job of using visual cues to let visitors know what is clickable. Their layout is very intuitive and easily navigated, except for the fact that their drop down menus run into the main heading text, rendering some of the menu options unreadable. A solid background and moving the menu to the front of the header would easily solve this problem.

Flat designs for touch screens have to rely on other methods for visual cues since a hovering mouse is not available. Many are mixing a bit of skeuomorphic elements with lots of flat elements to create a minimal design look that is still incredibly usable.

Google, for instance, has incorporated slight 3D effects in their mobile apps. Interactive features such as the search bar and the drop pin stand out well from the page through the use of small drop shadows. My Drive also reveals a very small drop shadow around the documents.

Even the Google Maps, Drive, and other Google apps have a slight drop shadow on the actual app icons that help them stand out from the other very flat iOS 7 app icons.

Ultimately, the flat design is not a bad trend. It has been a very important part of helping to tone down the overwhelming busy-ness of skeuomorphism. Just as with any trend, however, it can be overdone, causing usability issues as we have seen in Windows 8 and iOS 7. To avoid the problems associated with flat design, designers merely need to combine flat elements with other visual cues, and of course follow important design rules. As more and more learn how to better create usable flat designs, we’ll continue to see unique and clean flat websites and interfaces emerge.