Flat web design has been a trend since around 2011. Many designers still use it because flat design creates beautiful, simple websites. However, the design concept also has a flaw. Clickable elements in flat design aren’t traditional “buttons”.
Some non-savvy users get frustrated with having to scroll over areas to find links to the information they’re searching for. Every second counts on the internet, and making a visitor search for a button or mouse-over area means he or she might not come back.
You might want to take a look at the following related articles:
- Be Careful About These 7 Web Design Trends in 2017
- The Pros and Cons of Hiring a Remote Development Team
- 5 Things to Know Before Starting a Graphic Design Project
- 10 Web Design Techniques Still Applicable in 2017
- Lessons in Story Design from Pixar’s Creative Team
How Flat Design Started
For a long time, website developers and graphic artists preferred trying to make website content appear realistic. They wanted something that was larger than life, texturally interesting, and full of dynamic visual appeal. Realistic design focused on bringing the real world visual experience to the screen.
Skeuomorphism was another popular trend that brought real world visual cues into the digital space. This type of design focused on inserting the visual representation of an object into a design. For instance, a book app might feature small books on a bookshelf or a calculator that looks like a real-world representation. Regardless of the realism of the design, the overall feel mimicked an actual object.
Today, most designers steer clear of those trends in favor of flat design. Flat design is simple, not because it’s required for the functionality of the site, but to supposedly create a streamlined user experience. It’s visually minimalistic without strong components of depth or texture. In addition to having a certain clean, aesthetic appeal, flat design is also so simple that it can improve website loading times.
The early days of flat design started in 2011 with Microsoft. The company wanted to introduce a design that was more digital in nature and less representative of the physical world. It wasn’t until 2013 that the trend started to catch on more universally. Microsoft started its transition to flat design then.
The Usability Concern
While innovative in some ways and retro in others, the popularity of flat design has hit an obstacle counterintuitive to its purpose. In a study comparing flat design and traditional design from 2014, researchers found that identifying buttons or clickable objects in flat design took more time and users made more errors.
When people go to a website, they expect visual cues that indicate clickability. A word or phrase might be outlined by a box, in a different color, or at the very least underlined. The phrase itself might contain a clue – “click here to learn more!” Some may be inconspicuous until you hover over them, but the moment you do, they’re easily identifiable.
Flat design has taken away those comfortable visual cues. Becoming proficient in flat design requires retraining your brain to think about clickable icons in a different way. And some poorly developed sites have turned clicking links into finding a needle in a haystack.
The Answer: Flat 2.0
As the clickability concern becomes more recognized, designers have started to incorporate new elements to the flat design to add interest and make the online experience more user friendly. Most average internet users may not notice much of a difference in the design, but they may find themselves gravitating more towards 2.0 designs than strict, flat designs. So what’s different?
Flat 2.0 provides subtle changes to the design to make it stand out. Simple shadows, a line here, and a smattering of color are all considered aspects of a 2.0 design. It’s not 100% flat, but it also doesn’t add enough change to take the design completely away from the concept of flat. Anything that adds to flat design can be considered Flat 2.0, which is where clickability solutions come into play.
Making a Website More Clickable
If you have a flat design website, you may be looking for ways to improve your elements for better website engagement outcomes. Every click you can encourage on your website counts toward visibility, awareness, and conversion. The good news is you can keep your visually appealing flat design while enhancing your website’s clickability. Here are just a few ways you can change your setup to encourage more mouse and finger action:
- Use ghost button. A ghost button is a widely used tool for making a link look clickable without adding extra design. Ghost buttons are transparent, allowing the background of your website to shine through. They may include a faint, flat line, and they’re easily recognized as clickable content.
- Fall back on tradition. An underlined blue word is synonymous with clickability on the web. Changing a font’s color and adding an underline can encourage users to click on content links and move throughout your site. Avoid choosing hues colorblind users might have trouble seeing.
- Transform a button to a flat icon. Keep a rounded or squared off design, and get rid of the elements that make buttons look realistic. Outline a word or a phrase in a different, flat color so the button looks like it belongs with your flat design but isn’t so camouflaged that users won’t see it. Avoid using button-like elements to highlight non-clickable content.
- Use language to reinforce your request. Calls-to-action provide an opportunity to do less with more. Use phrases like “click here,” “tap this,” or “come this way” to lure your audience to another landing page.
- Change the dynamics. In addition to these ideas, you can also make something more clickable by making it subtly grow larger when someone hovers over it with a mouse. On touch screens, clickable items grow larger to ensure the action was intentional. A dynamic size change makes it easier for users across devices to choose the right links on a page. Avoid making the change so large that it interferes with the experience of the page.
- Highlight only a few clickable icons on a page. Instead of making your landing page a hub of links, focus on a few, highlighted links that really focus the direction of a user. This will also make the clickability tactics you’ve chosen stand out more against other information on the page.
- Change the surrounding space. Another way flat design might influence clickability is the surrounding noise. If your links are solely within content, users may not easily recognize them. Links should be visually eye catching and set apart from other language on a page.
Click uncertainty is a problem, but it’s not one without solutions. Sticking with familiar elements is always a good way to remedy the problem. Flat design isn’t a concept designers have to follow completely. If something isn’t working, change it! Subtle updates are often all that’s needed to make something more clickable. Focus on simplicity, incorporate the visual cues that you need, and tone down the busyness of a page to make visitors naturally gravitate towards clickable items.
As flat design evolves and Flat 2.0 becomes the norm for many websites, we may start to see small changes in the way people interact with websites. Determine where visitors are currently engaged on your website, isolate the reason for engagement, and change clickable cues as necessary.