Flat Design Is Everywhere Now. Does It Really Make Pages Slower to Use?

"It isn't flat design that lowers efficiency. It's bad design that lowers efficiency."

On September 3, the consultancy Nielsen Norman published a research report arguing that flat design cuts users' navigation efficiency by 22%.

They recruited 71 users, tracked their eye movements across nine sets of websites, and recorded how long each user spent on the content.

On the sites used as the "control group," buttons had shadows and embossed effects, and hyperlinks stood out in bold blue type. On the sites in the experimental group, those visual cues on buttons and links were toned down.

On the sites with the weakened visual cues, each participant spent 22% more time on the page content, on average.

Unlike earlier user-engagement experiments, Nielsen Norman did not count that extra time as active dwell time on the site. It read the time instead as "uncertainty while browsing text content" — the participants spent longer hunting for the elements they wanted.

In short, their conclusion is that flat design is a less intuitive kind of design, one that erases the difference between a page's buttons and its content. Users confuse clickable elements with icons and text that cannot be clicked, efficiency suffers, and advertisers and e-commerce sites may lose billions of dollars.

People have argued over this ever since flat design took hold on digital screens, but this is the first time anyone has put a number on it.

How flat design slowly became the mainstream

Designers explain flat design in different ways, and usually start from what it is not. It arrived at the height of skeuomorphism, boldly stripping off the heavy three-dimensional style and leaving flat elements with no texture, no material feel, no shadow. Yet by now flat design seems to be taking shadow and depth back in, cooking up a "pseudo-3D" effect.

"So I've never accepted the term 'flat design.' I think a better word for this style is planar," Jaskni Wong, a visual designer at frog, told QDaily.

But the design language once called Metro is agreed by everyone to be truly flat: blocks of bright color in different hues, with every shadow, drop shadow, and beveled edge erased — flat through and through.

That made Microsoft, which released Metro, the first company to put flat design on a digital interface.

At Computex Taipei in 2012, Microsoft announced that Metro would be used in the coming Windows 8 and Windows Phone.

Apple at the time still stood at the opposite pole, known for skeuomorphic interfaces and a realist aesthetic. Microsoft's own Windows Vista, released in 2007, had only just brought in an interface style called "Aero," seen as Microsoft's mature attempt at skeuomorphism; its frosted-glass texture was meant to give users a stronger aesthetic impression.

Metro then seemed to swing Microsoft to the opposite of itself: everything that looked three-dimensional was taken away. Its inspiration came from airport and subway signage, and its aim was clarity.

It looked the part: big sans-serif type, images pushed back, everything resting on typography. Microsoft called it "intuitive, easy to understand, modern," and called this new style "authentically digital." At the time the clean form was genuinely refreshing, and it won over plenty of designers, Jaskni among them.

Microsoft had in fact gone flat even earlier: it used the style in the Zune media player released in 2006.

Zune was born of Microsoft's attempt to take on Apple's iPod. Will Tschumy, Microsoft's director of business development, claimed the company spent 20 billion yuan on design every year.

"We did an enormous amount of research behind the user experience," Will Tschumy said. "Microsoft is the only company with a single design language across every screen."

The Zune's product style soon spread into a design language for all of Microsoft's products. Flat design became the most popular design trend going.

Apple joined the flat wave too, and even became its loudest champion and driver. Remember that skeuomorphism and realism had been Apple's design signature for a very long time.

As late as 2012, the navigation bar on Apple's homepage was still a smooth sphere, its buttons glowing as if dipped in candy. On June 10, 2013, at the Worldwide Developers Conference, Apple used the release of iOS 7 to introduce a completely new UI style. All of this came after Apple vice president Scott Forstall left the company and Jony Ive took charge of interface design across the whole business.

By Metro's standard, iOS 7 was not fully flat — it kept some texture. But set against Apple's own past work, it dropped the gloss, the bevels, and the shadows. Icons got simpler, colors got brighter. The Photos icon went from a lifelike sunflower to a seven-color wheel; the Camera icon went from a finely drawn lens to the black silhouette of a camera.

Still, iOS 7 drew criticism when it was first shown. Erik Spiekermann, a lifetime-achievement winner of the German Design Award, made a video attacking the typeface Apple had chosen as too thin to read. The worse flaw was in Control Center, which blurred clickable and unclickable elements and split them with hairlines that served no purpose. (Apple fixed this in later versions, marking clickable elements with darker blocks of color and dropping the hairlines.)

None of that stopped countless designers from following Apple and turning the whole trend around. The change showed up most plainly in the apps arriving on Apple's App Store. Line their icons up by date and you will find that they too moved, more or less, from three-dimensional and finely detailed to flattened and simple.

Flat design and the spread of minimalism

The trend did not come out of nowhere.

Louis Sullivan, the American architect called the "father of modernism" in architectural history, created the prototype of the modern skyscraper. But he left something larger behind: a design maxim that holds everywhere — form follows function.

The meaning is simple. Design has to think about function first.

The move from skeuomorphism and realism to minimal flat design, and then flat design's upgrade into a more accommodating style, is what happens when interface design follows the currents of its moment.

In 1994, the arrival of the World Wide Web began to turn the public's attention to the internet. Most listed American companies started to treat a public website as a necessity. But personal computers had barely penetrated at that point. Only professional staff knew their way around desktop software, never mind the baffling digital interfaces of the day. Designers spent enormous stretches of time making a website's buttons, menus, and links look a little friendlier.

With almost nothing to copy from in web design, people took it as the golden rule that a website should imitate the interface of a desktop computer.

Windows 95, released in 1995, is the classic case of 3D simulation.

Its dialog boxes used deep shadows and highlights to build a 3D effect. Their raised and recessed elements followed two basic principles:

• Raised elements could be clicked and pressed with the mouse. They were often used for buttons.
• Recessed elements were meant to be filled in. Input fields such as search boxes commonly used a sunken visual treatment.

As with the railroad boom of 1840s America and the automobile and radio booms of the 1920s, an enormous internet bubble built up and then, on overheated speculation, burst — the "Dot Com" crash.

The internet took off again soon after, and a wave of new startups appeared, stuffing their interfaces with the fashionable elements of the day: shadows, bubbles, glare, huge drop shadows.

Outlook Web Access, which Microsoft released in 2003, was considered an outstanding piece of web design.

This interface, crude as it looks by today's standards, was then the standard for .NET sites and the design many AJAX libraries were reaching for.

Meanwhile, Apple's skeuomorphism and realist style were also winning over more users as its products sold.

Skeuomorphism imitates certain features of the physical world. Used in design, it lets people learn a brand-new interface on the strength of what they already know about real objects.

The glossy icons on Apple's interface were really a transfer of everyday objects onto an electronic screen. At a time when most people were not yet in the firm grip of smartphones, imitating real objects could dissolve their sense of distance from electronic things.

Apple gave the virtual keyboard the fine texture of crystal glass precisely so that people would get used to a keyboard that wasn't there. It is safe to say that had it not been made to feel so "intuitive," the experience would not have persuaded anyone, and there would have been no way to build the habit.

The skeuomorphic style grew heavier and heavier, and Apple's extreme attention to detail pushed it to its peak.

But much as architecture and art have gone over the past several centuries, the "minimalism" that flat design stands for also began as a turn from the ornate to the plain, once the piling-on of ornament had reached its height.

Flat design is often read as a sign that web and interface design have matured.

That maturity shows first in designers themselves. Having grown fluent at drawing icons and interfaces, they began looking instead for novelty and modernity.

The spread of the internet meant far more people than before knew how to deal with electronic devices. We had grown used to the ways you interact with a digital thing. Even if a page holds nothing but a thin-lined box, as long as it says "Go" you know perfectly well it is a button you can click.

You can find the same arc in the "flat design" of print.

That more "primitive" medium had already lived through this minimal style's golden age 60 years earlier. Back then flat design went by the name "Swiss Style," also known as the International Typographic Style.

As the name says, the style started in Switzerland, spread worldwide in the 1940s and 1950s, and became the foundation of postwar Western design.

Its driving force was Armin Hofmann, one of the most famous graphic designers of the modern era. After graduating from the Zurich School of Arts he worked as a typesetter, moving between Basel and Bern. In 1947 he met Emil Ruder, then head of the Basel School of Design, on a train, learned the school was a teacher short, and so began a 40-year teaching career; he later took over Ruder's post as head of the school.

Hofmann spent most of his life designing posters in the flat style, because he believed the poster was one of the best and most effective forms of communication.

His posters always used color and type efficiently and with restraint. He called the practice "the trivialization of color." Judged even by today's taste, they still hold creativity and artistic feeling together, and have not dated at all.

The elements Hofmann used in his posters are in fact not far from the elements of flat design today: photomontage, an emphasis on typography and experimental composition, and sans-serif type in quantity.

He also set his design philosophy and practice down in a manual called Graphic Design Manual, which became required reading for countless graphic designers.

This "strip out the unnecessary" style, built around readability, took its place in postwar Western design history alongside Helvetica, a typeface held to the same standard of clarity.

Flat design ran into little trouble on posters, which were flat to begin with. That is one reason minimal typography has lasted so long in print.

Digital screens were not so simple. Plenty of designers embraced flat design wholeheartedly, but this early style, with only two dimensions to work in, soon showed its limits. Metro, which threw out every three-dimensional element, was born alongside critics questioning whether it was usable at all.

Though in Jaskni's view, Metro also struggled to spread because of Windows Phone's pitiful market share and the demands it made on developers: "It's based on wayfinding — street-sign logic — and that's a field that really takes skill."

More and more designers tired of its charms and started looking for a way out.

Does flat design really mean completely flat?

That is exactly one of the flaws in this Nielsen Norman report: its grasp of flat design seems stuck on the first impression, ignoring how the language has evolved since it moved onto digital screens.

In its control group, flat design means the total absence of texture and shadow.

In reality, flat design and skeuomorphic design run together perfectly well. Flat design has its rules from the physical world, and has even started imitating real-world "layering" and "dimension" on purpose. Many designers now use blocks of color in different shades to produce shadow, rather than the drop shadows, bevels, and gradients of the past, faking a real cast shadow. Its opposite by now is not skeuomorphism but "rich design."

Jaskni and Hu Yueshen, another visual designer at frog, both think what the report shows is not a flaw in flat design but a flaw in bad design.

The report misses something else: how fast you can get through a website is not settled by navigation speed alone. Page loading matters too.

Design style, they say, is really the outcome of a tug of war between a designer's taste and the hardware underneath. Jaskni finds the Windows Vista interface "very good-looking," but the hardware of the day could not keep up, and dragging a window would stutter. Microsoft had the appetite to push that refined design; developers dropped the optimizations anyway, afraid of eating up system resources.

Flat icons, by contrast, carry information through simple images, with little gradient, texture, or shadow. The icons are smaller and pages load faster. They decorate, and they also steer users to the right place on a site.

Flat design has not given up texture and shadow entirely, though. Evolving is how it fixed those old flaws.

In 2013, Google's release of Material Design set off a celebration among flat design's fans.

Before this design language, Google's tactics in design had been rather cautious: no major changes, just small adjustments made with each new product.

But as a big company held to high design standards and high user expectations, Google took a step ahead of everyone else with Material. It not only gave its design language a name, it laid out a relatively complete and clear set of design rules.

That made designers' lives easier. Inventing a new style from nothing costs a designer enormous amounts of research and argument. Material Design works as a framework, and anything that grows inside it has already been proven.

Material Design's idea is easy to explain: it tries to bring a few features of skeuomorphism into the most pared-down design.

It imagines every design element as a sheet of paper under a fixed light source, showing different depths of color and shadow according to how far the light is. It still looks flat, yet even the way things move imitates the rules of the physical world.

Some designers find Material Design's restrictions on color and on the direction of shadows too rigid, and feel it boxes in their ideas. Even so, its release counts as a successful attempt to "evolve" flat design.

The same year Material Design came out, the designer Jeff Escalante started a discussion about the flat design trend on Dribbble and other design sites, and proposed a blunt, simple fix: the long shadow.

The effect is like putting the object in an icon under winter sunlight. Everything trails a long shadow at 45 degrees, two and a half times the size of the object itself.

The long shadow kept flat design's basic look while giving images depth. It did catch on for a while: similar work filled Dribbble and Pinterest, and tutorials taught people how to make long shadows faster.

But this dramatic diagonal shadow recalls early Soviet posters, or the collage work of Russian Constructivism and of the geometric abstractionist Kazimir Malevich. All of them carry a positive, idealistic style with strong visual force, well suited to icons and brand marks.

Beyond that, the long shadow had little range. Against Material Design, with a far more systematic theory behind it, it had no way to go the distance.

In 2013, the argument about flat design was still over whether it was a trend or a revolution.

Judging by what has happened since, flat design has turned into something extremely accommodating. It keeps extending its reach through variations on itself.

Apple, for its part, never confined itself to the original flat framework either. In iOS 7, which went the flat route, the Game Center icon stood out among all the flattened ones, still carrying its bright gloss.

Plenty of people on Dribbble flattened it for fun, but "that's no longer the same sphere," Jaskni said. "Apple may not be chasing flatness for its own sake. It's chasing good design."

Flat design is clearly just one stage in the design of electronic screens. So far it has largely settled the question of making 2D interfaces work everywhere. Once a more immersive kind of seeing is needed — AR and VR, say — it may lose the standing it has.

Over the past two years and more, a fair number of technology companies, Microsoft among them, have been working on "inclusive design," meaning they have started thinking about relatively advanced things and designing for them.

Take HoloLens, the holographic device Microsoft released. Users can interact with the holographic camera, but the HoloLens operating system does not share an interface with Microsoft's other devices.

Microsoft wants to release a design language that runs through the entire product line, the way Metro did.

And it "has." At the developer conference this May, Microsoft released a design language called "Fluent." It looks like an extension of flat design, but it carries a vision of joining 2D and 3D operating systems seamlessly.

For now it is still only a concept. But as with every stage of this evolution, a system this young needs time.

Cover image from Unsplash.