I can do Better than Switching to Flat Design – How?

I found a setting at Customizr, my favorite WordPress theme, which let you choose between “Flat (Classical) Design” and “Material (Modern) Design.” Maybe you have already heard of Flat Design, which means no 3D objects: no shadows, gradients, glow effects etc. I started my reading here:

Is Flat Design a Web Design Standard That’s Here to Stay? 10 Designers Chip In

At the top of this page are three examples of flat design that help us to “get it.” From my previous reading on flat design I had concluded that besides no 3-D, flat meant single page websites with no sidebars.   “Flat” as in “no hierarchy.”

Summary:

Users are so familiar with the web that they won’t need the cues provided by 3-D. Others blast flat design for being non-intuitive and trendy. I agree with the latter.

The Nielsen Group (we like Jakob Nielsen since way back) doesn’t like flat design either, mainly because it lacks signifiers on clickable elements. They say “Flat 2.0” may be a better alternative, aka “Material” design:

Flat Design: Its Origins, Its Problems, and Why Flat 2.0 is Better for Users Sep 2015

Details:

This article stated that now users are so familiar with the web that they won’t need the cues provided by 3-D. I disagree: I miss tooltips and I don’t like flat edges that make one window blend into another. Though wherever something can be done without, it makes for a cleaner design and one that fits better on a handheld.

The article continued with quotes from web designers saying that flat design aids cross device compability (responsive layout) and in fact led to usability improvements such as bigger input fields, larger buttons, or larger and more legible text. (I agree with those usability improvements, just don’t waste my space with GIANT text if I read your mobile-first page on my desktop.)

However the bottom third of the page is full of feedback blasting flat design as discrimating against the disabled and the elderly and in general wasting people’s time as they try to figure out the page. It’s fun reading, a lot of good rants in there, some of my favorites:

It gave me a sudden appreciation for the gradients, drop shadows, and other design elements I’d taken for granted in more traditional desktop UI – these are useful hints that aid accessibility that we’ve sacrificed because “flat looks cool”. To really judge good design I think you have to show it to users who have never seen it before. All UI is learned, so people will catch on eventually, but my own opinion is that good UI (and good design) should be intuitive – e.g. is that flat rectangle a button?! Hell if I know, guess I’ll click to find out.

Good design is about respect for a user’s time. Sure people can figure out how to wade through an interface with less than obvious cues, but how can you justify stealing even milliseconds from your users? Bad design sucks the life out of humanity and flat design sucks hard. It’s nothing more than wire framing with a little added color. It’s lazy at best and criminal at its worst. When I see plain text acting like a button I hear Christopher Guest’s voice telling me “I just stole one minute of your life, how do you feel?”

It’s like saying “we’re going to remove all signs in a metro station because passengers know it well and the corridors will look cleaner”.

 

On to

Flat Design: Its Origins, Its Problems, and Why Flat 2.0 is Better for Users

www.nngroup.com/articles/flat-design/

The types of cues people use to determine clickability:

* Traditional, externally consistent signifiers (such as the blue, underlined text or raised buttons) – vs. flat “ghost” buttons.

* Something reminiscent of a traditional signifier (such as underlined text of any color or boxed text)

* Contextual clues (such as actionable text or placement at the top of the page) e.g. words on a menu bar

Flat-Design Best Practices

www.nngroup.com/articles/flat-design-best-practices/

Use the clickability cues mentioned above.

As long as in-line text links are presented in a contrasting color, users will recognize their purpose, even without an underline. (I’ve been doing this for a long time. I often make the underlines appear on links only upon hover)

When Flat Designs Can Work: the potential negative consequences of weak signifiers are diminished when the site has a low information density (is this a good thing?), traditional or consistent layout, and places important interactive elements where they stand out from surrounding elements.

Next up (but not tonight): The Characteristics of Minimalism in Web Design.  Looks like lots of good illustrations, may help me to reduce clutter in my designs.

And finally, I will finish up with: Flat Design vs. Material Design: What Makes Them Different?

What’s your web design philosophy?  What WordPress themes or Joomla templates support this philosophy?  Do you have a web page you’d like to show us and point out the main features that contribute to its usability?