UX

Flat Design Trend: What Did It Bring to Us?

A few months ago we published an article titled “Why So Many Companies Changed to Flat Design”. It criticized the recent “flat design” trend, which was set by an Apple in 2013 and created many modern UX problems.

The article was well received and sparked some interesting conversations. One of the comments was especially descriptive and rich with examples, so we had no choice but to ask its author, Peter Villevoye, to transform it into an independent article. Peter is a certified trainer, presenter and writer, specialized in DTP, Web, iPad media and all things Apple and Adobe.

Below is Peter’s opinion on a current state of UX design and the role of a “flat revolution” within it.

Mystery Meat

In fact, the GUI decline was already starting in the nineties when “drag and drop” became a standard. It wasn’t always clear enough which elements could be dragged and where to. And now, it’s not even clear anymore where to click. Is that text or panel really a button or tab, or just a textual indication or ornamental label? Who can know?

From the original article: “I took this screenshot in 2016. 3 years later you still have to know what is clickable and what is not.

My heart skipped a beat when I read this sentence: “…you still have to know what is clickable and what is not”.
This hits the nail right on the head! I’ve also always been wondering how and why hundreds of interface designers and testers at Apple have neglected this tremendous interface glitch.

(By the way, by switching on the “Button Shapes” and “On/Off Labels” options in the Accessibility settings, you gain some clarity again.)

So the user needs to frantically hover and click on interface elements to find out if the element is handling something. And all the instances in which it doesn’t handle something, you feel stupid. This makes the application feel a little less comfortable and even insulting.

Ditching rounded corners

Adobe and some other developers have even gone further, adding insult to injury. They even ditched the rounded corners of buttons, making the distinction between labels and buttons even less clear.

Adobe is swinging from strictly rectangular buttons and other activators like popups (probably inspired by Windows 10 tiles) to super-rounded buttons, and sometimes the intermediate “Google Material” with its tiny rounded corners.

And all within one collection of applications, bearing the same version number:

I think rounded corners and slight shadows (even in a flat interface) are the minimum required indicators of things which can be touched. Because if we were using our fingers, we wouldn’t like touching anything hard-edged–you might get injured. Well, maybe not physically, but at least mentally. You could even support the reasoning that hard edges eventually get softer and rounder by all this touching…

It’s already addressed in the early system versions of the Lisa (the Mac’s predecessor) and goes all the way down to the iPad’s unique and patented shape with rounded corners, via system buttons and even the screen corners (until a few OSX and iOS versions ago).

Too bad Apple has toned them down.

So we really need those last but necessary bits of skeuomorphism. Rounded corners, slight shadows, underlined texts, the “…” behind words – these are all obvious and clear interface patterns. Flattening out all these visual and functional details simply for the sake of aesthetics (or to mimic Google or Microsoft) is a bad thing.

 

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together
Ouch!, a library of free vector illustrations


Also, get the lists of free vector software and free photo editing software.

Recent Posts

Icons that are perfectly shaped for any design

Each design has its own scale. It applies to elements size and like thickness. Now,…

3 hours ago

What is a glyph icon?

There are many ways to define a glyph. Let's take a look at what glyph…

1 day ago

Hues unraveled: exploring lavender in design

Learn how to use lavender color in your designs. (more…)

2 days ago

6 websites that demonstrate the power of surprise

Keeping visitors on your page with surprising, creative tactics can help you convert them into…

1 week ago

Search for an icon or generate one? SVG icon AI-generators test

As designers, we don't need just any icon. We need one that is a perfect…

1 week ago

The ultimate graphics plugin for your Miro boards

This Miro plugin has it all: icons, illustrations, and photos from the Icons8 library to…

3 weeks ago

This website uses cookies.