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.

icons8

Recent Posts

How legendary icons were born

We see tens and hundreds of icons on our computer and phone screens every day.…

1 day ago

Make Face Generator the Product of the Year

Face Generator is nominated for the Golden Kitty Award on Product Hunt! Your support means…

2 weeks ago

Bad apple design

We've already shown you some weird icon requests. Now it's time to show some challenging…

4 weeks ago

How to design a Christmas Instagram story

Let’s design Christmas and New Year visuals for Instagram stories. We’ll use Lunacy, a 100%…

1 month ago

Meet Fugue 3.0: Fresh music to make your videos a blast

Finding the right music for a video can be challenging. And buying a proper license…

1 month ago

Face Swapper: Swap faces like never before, for free

We've all had enough fun with face swapping. It's time to put jokes aside. Meet…

1 month ago

This website uses cookies.