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?

Flat Design Trend: What Did It Bring to Us? | picture

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.

Flat Design Trend: What Did It Bring to Us? | picture

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.

Flat Design Trend: What Did It Bring to Us? | picture

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

Flat Design Trend: What Did It Bring to Us? | picture

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).

Flat Design Trend: What Did It Bring to Us? | picture

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.




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit