
Flat UI Elements Attract Less Attention and Cause Uncertainty - nkkollaw
https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
======
chenster
Thank you, Lord! My prayers have been heard. I'm just happy that I am not the
only one who got rants about the flat UI. It really should go away. The flat
design was born from Microsoft Windows phone Metro UI, if I recall correctly,
then other designers quickly jumped on the wagon and claiming it's the next
greatest and neatest "UI revolution". What a joke! It totally sacrifices
usability. The outcome? A horrible user experience, and job security for the
designers.

Link to Flat design:
[https://en.wikipedia.org/wiki/Flat_design](https://en.wikipedia.org/wiki/Flat_design)
It was indeed first introduced by Microsoft with the name Metro Design.

Microsoft is moving away from the notorious Flat UI to Fluent Design:
[http://www.firstpost.com/tech/news-
analysis/build-2017-micro...](http://www.firstpost.com/tech/news-
analysis/build-2017-microsoft-evolves-beyond-flat-ui-with-its-fluent-design-
language-3702669.html)

~~~
copx
I have always hated this fashion with passion too. For _me_ it makes UIs less
aesthetically pleasing _and_ harder to use.

One of the reasons why I still use Windows 7 is that I like its 3D transparent
glass-like look and utterly hate the flat design of later versions which I
would call soulless and ugly. And the UI elements are harder to distinguish
for me.

That being said, many people _do_ like it, and I am not aware of any studies
about how many people like it / don't like / don't care in general.

Fortunately for us flat UI haters, that horrible design trend will go away the
same way it came - as a fashion. Fashion by definition does not last. Sooner
or later flat design will inevitability be considered old and unhip too.

~~~
andrepd
Absolutely. I still stick with Windows 7 as well. I just can't stand the
flatness, and the obnoxious amounts of space-wasting whitespace.

~~~
ktRolster
The whitespace is there because people design first for mobile, then port to
desktop browsers as an afterthought. That's not going to change any time soon.

~~~
Pica_soO
I remember a admin at a company giving me a before and after on some tool-
where the fat-finger-friendly UI reduced the presented information and thus
the usefulness off the tool to basically zero.

------
frankydp
Flat interfaces are nearly unusable for the seniors in my life. Below is a
list of UX issues my live-in seniors have regularly, and that they DO NOT
learn their way out of. Not specifically flat based, but these changes have
been amplified by the flat/minimalist redesigns.

1.Icons are only useful for users that already know what they do. Zero value
UX wise for new users. Labels matter, especially on mobile where hover is not
an option. Having a "walkthrough" on first load is not a replacement. Also,
non-native users do not know about hover tooltips, and they will not learn
that behavior, they find them almost exclusively by accident.

2.Gradients on mobile, especially with power save, make apps and pages
unreadable for everyone, but especially seniors.

3.Hamburgers and triple dots are not visual indicators for non-native mobile
users.

4.Swipe is not an replacement for any UX process for non-native mobile users.

5.Canceling/backing out of any workflow is rarely obvious on flat/minimal
designs. Seniors click/tap the wrong thing ALOT. Some giant percentage of
their time is spent trying to reverse an action.

6.Zoom is king. Non-button looking buttons get even worse if you remove their
context. Mouse over only context buttons might as well be invisible.

7.Seniors do not know what blue/purple/green text means. The underline is the
only thing my seniors understand. Also, they click pictures, all pictures,
because they are the only thing on these apps/pages that actually look like
they are clickable.(see number 6 buttons)

~~~
dleslie
Basically every day that I interact with users has this exchange:

"Click the hamburger icon to open the menu."

"Excuse me?"

"The three parallel lines; I agree, it makes zero sense, but now you know."

~~~
daveguy
Maybe if you just say, "Click the menu icon in the corner."

~~~
dleslie
"What menu icon?"

I've tried; three parallel lines in a flat UI do not indicate "menu" to a
great many users; including myself, at one point in time.

~~~
daveguy
Well, going forward I think it will be more commonly referred to as a menu
icon rather than a hamburger icon. It's almost pervasive on phones now. Do you
think the stacked dots are better than stacked lines? A mini-menu icon? It's
helpful to have some small icon for the menu on mobile devices so it doesn't
take up as much screen space. What is a better alternative?

~~~
dleslie
Personally, I turn off icons in apps that allow me to, and stick with words.
Mobile is sort of a user experience hell for me; touch screens just don't seem
to work reliably.

------
namuol
Take a few minutes to look at their examples:
[https://www.nngroup.com/articles/heatmap-visualizations-
sign...](https://www.nngroup.com/articles/heatmap-visualizations-signifiers/)

Most of the "flat" designs strike me as being created or chosen to confirm the
hypothesis.

Explain to me how adding an underline to a link is somehow not-flat? What UX
designer would use a "ghost" style flat button for the main CTA? Etc.

The whole thing feels far from scientific.

~~~
Illniyar
Maybe they did choose things to confirm their hypothesis, but these aren't
some mom and pop shops nobody recognizes, these are international well known
brands - Hertz, Barnes and Noble, Nest etc...

If you read the entire article, you can see that the point was not Flat UI is
bad, but rather Flat UI done bad can strongly hinder UX.

It makes no sense to just pick sites at random, you want to check the extremes
so the evidence will be significant. To put it another way - you choose the
most obvious candidates so that if you end up without a significant difference
you can be positive that the hypothesis isn't correct. Following research can
be more nuanced.

~~~
luckydata
Right, they aren't "nobodies", they are a shop with a long history of creating
biased experiments to validate their initial assumptions. There's a LOT of
material available on the net regarding their "methods", a simple google
search will do.

~~~
Illniyar
First, I'm pretty sure that's ad hominem.

Second, I said that it's probably ok that they chose the sites to validate
their claims, saying they do that often isn't a counter argument.

Third, twisting my word so blatantly makes you look childish.

~~~
luckydata
No, it's not ad hominem. It's me expressing my dislike of the Nielsen Norman
Group. They have contributed to the state of the art but they also tend to
overblow their claims - famously they said "people don't read on the internet"
which is absurd, a slew of more serious research on the subject shows how
reading and scanning patterns are not substantially different on screen or in
the press, and that users on the internet tend to read MORE than people
reading newspapers.

Not to mention the fact that we're interacting in a text only site...

Third, what I've done is not "twisting your words" but connecting to your
reply using it as a jump off point. I don't remember the name of that
rhetorical figure but it's pretty common.

All in all I don't think there's anything you should be taking personally
unless you have some vested interest in the author of the article (haven't
checked, are you the author?)

------
bobsoap
Let's not confuse a lack of proper design hierachy with "flat UI". Actionable
elements like buttons blending into the background do not signify "flat
design" per se. Neither do purple non-underlined links vs. blue+underlined.

The title of this study isn't representative of the tests they actually ran.
It falsely lumps together flat design and a terrible design hierarchy, which
is expressed by the strategic use of contrast and color.

Further, some of the tests aren't representative of an argument for or against
"flat" when they compare [a bright pink button with gradient and drop shadow]
to [a white button with a light gray border], both on a mostly white page. Of
course people will see a fat blob of pink faster than a faint gray-on-white,
regardless of any drop shadows or gradient effects on either of those items.
That's an absurd comparison if you want to make a point against "flat ui".

If you want to compare flat vs. non-flat, you better use the same pink button
in both cases (or the same faint gray button) - once with and once without any
effects such as drop shadows or gradients.

This study is very one-sided and merely confirms what any designer worth their
salt already knows: you need to make actionable elements stand out from the
rest of the content, plain and simple. Contrast is king, no matter if you're
making a flat design devoid of any depth or if you're using drop shadows and
rainbow gradients.

------
petilon
Flat UI makes interfaces harder to figure out. Many examples here:
[http://uxcritique.tumblr.com/](http://uxcritique.tumblr.com/)

~~~
andrepd
Thank you, that was a nice read. Could use more examples from outside the
apple ecosystem (Google is a goldmine in this regard).

------
jamesrom
I've always thought "flat" designs were created out some ideological belief in
minimalism taken to an extreme. Their popularity born from a trendy departure
of decades of UI and UX research. That form > function.

Let's learn, and continue making things for humans, not ideologies. That form
should equal function, but only after it's passed UAT.

~~~
taw55
I think it was the influx of designers from print media, where bevels and
gradient usage are generally considered crutches used by beginners who don't
understand the fundamental aspects of design. Likewise whitespace is
considered mana from the gods because it's in such short supply on the page.

Because there is now a strong connection between the two disciplines I'm less
certain than most that this will simply be a fading trend.

I never had any trouble with flat design but I do have trouble with all the
non-convention that arises out of app style design, which I feel is the real
culprit of ux woes.

------
richforrester
It's really not as difficult as it is being made.

This down to "what you need to do to make something stand out", which means
sorting out the importance of elements and turning that into a hierarchy.

While there's no way to argue their results, there are plenty of reasons to
argue their sampled materials.

Flat design doesn't mean turning a button into an outline. And I'm willing to
bet the button would've performed just as well without the skuemorphic
gradient, but WITH the solid background colour instead of becoming an outline.

Same with every single other implementation. They mis-implemented a design
code.

To come back to my initial point; it's all about hierarchy. In any interface
(wether on paper or on a screen) you need to direct a person's attention. This
is done by visually prioritising elements. And there are a tonne of ways to do
so. A gradient. An inverted colourscheme. An angle. A wording difference. A
texture. Bold. Underline. Etc - I'm sure we could all go on for ages coming up
with other ways.

 __TLDR: Disagree with their definition of "flat design", or the (exceedingly
poor) way flat design was implemented in the examples they gave. __

~~~
richforrester
Would love to hear what part of my reasoning rubbed you wrong, silent
downvoter! We don't learn if we don't share!

------
abledon
Finally! Some recognition about how this whole craze is not working. I am
always confused when using google material design pages . And grey text on
white ... cmon! Just make it black on white

~~~
efdee
To be honest, real black on real white is horrible from a design/UX point of
view.

~~~
fragsworth
For text? What are you talking about?

------
Illniyar
I think the biggest take away from this research is that a bad non-flat UI can
make a site look ugly but a bad Flat UI can hinder user experience.

Frankly, I think that's a pretty obvious insight, but there are a lot of
people who don't see it that way, so this research has value.

It seems that the research is well thought out and executed, but it fails to
create any meaningful advice for designers - hertz' example is just pure bad
design even before the question of flat or non-flat UI, the other examples
that proved significant are also glaringly bad design.

A further study should fixate on a single aspect (such as in text links or
navigation menus) - which designers could take real input from.

------
0xBA5ED
They're slapping flat elements onto a UI with a conventional layout. Of course
usability will suffer. Flat signifiers rely on positional context and a well-
defined set of familiar views/layouts.

------
stevebmark
Flat UI hit the mainstream when John Ive forced it at Apple. But you noticed
the timing, didn't you? The iPhone had beautiful skeuomorphic design, the
doing of Steve Jobs. Jobs knew that 3D signals are important visual cues for
the interface.

John Ive was only able to introduce flat design after Jobs died. Jobs hated
flat design and wouldn't let Ive do it. Only after Job's passing was Ive able
to go rogue and introduce the flat UI trend, which then everyone copied. The
pendulum will swing again, but the damage has been done.

Obviously flat design looks worse, obviously it's harder to use. People follow
Apple's design blindly. Jobs knew better, and Ive was only able to get away
with it because he had more authority.

~~~
rofrol
I thought Microsoft brought it to the mainstream and then everyone copied it:
Apple, Google with material design.

------
SeanDav
Flat Interfaces: a brilliant example of Form over Substance.

Usually a well designed UI should be easy to use, with important functionality
highlighted in some obvious and consistent way. A Flat UI has no redeeming
features, possibly other than appealing to some sense of minimalism.

------
arkitaip
Another thing that e-commerce sites probably are doing wrong? The "hamburger"
icon on mobile for your product categories. Here's NN Group's video on the
topic:
[https://www.youtube.com/watch?v=rdeoPuPzONg](https://www.youtube.com/watch?v=rdeoPuPzONg)
.

All these seemingly small design issues add up and before you know it, you're
losing serious money because poor design kicks your your customers out of the
conversion funnel.

Also, mad props to NN Group for their work on usability and making the web a
more sane medium. Their people have been doing usability research for decades
and Jakob Nielsen's UseIt.com used to be one of the most useful sites for web
designers.

------
tripzilch
Prediction: In the future Flat UI will be perceived similarly as bad retro
"80s sci-fi" (like "Hackerman" from _Kung Fury_ wearing a dataglove, etc), in
the same sense that it will only have a "nostalgia" aesthetic, not because it
was any good.

Once we move past this madness, after a while we'll look back and see it for
the unusable "mystery meat navigation" (remember that from the early 2000s
web?) that it was. Trying too hard to look "clean".

In as far as Flat UI was usable, it's because of its ubiquity and that after a
while we _had_ to get used to it and somehow managed to obtain a somewhat
common UI vocabulary.

Like the "hamburger menu", completely unintuitive until you learn what it
means. I'm afraid we're gonna be stuck with that one for a while. It was
supposed to depict a super-stylized drop-down menu, right? Except that some
menus are now a grid of icons.

... and in Chrome the menu is three vertical dots, because ummm it makes
people turn their head while thinking "...", I guess. (I was looking at
Firefox when I described the hamburger menu).

At least the gear-icon for config/settings makes some sense.

------
natecavanaugh
Yeah, I think this all comes back to this article [1]. I am only irritated
that every UI benefit of skuemorphism was ditched simply to reimagine what the
UI could be when it's "authentically digital". Except for the fact that none
of the users are authentically digital, nor are their needs.

People need landmarks, UI affordances and a clear mental model of what the UI
should do. I understand and even agree with why Apple chose the route they did
with iOS7+ and for the most part with how. But beyond font weight, it seemed
like the other issues with the flat design were ignored because the company
already chose a specific route (again, not disagreeing with that choice, but
still affected and irritated by it).

And on a completely tangential point (I mention simply because the larger
iPhone screen sizes came along, more or less, with the flat UI look), I also
realize now that when it comes to phone sizes, Steve Jobs had it right the
first time, and that bigger doesn't mean better. It just means a different set
of tradeoffs. I've never been one to say that Apple, post-Steve, sucks. But I
do think they've been far more responsive to the markets desires, for better
and worse. Then again, I was rarely annoyed by the limitations of the iOS
platform, so maybe I'm Mr. Stockholm Syndrome, I dunno. Nor do I care too
much, TBH. I just want a phone with recognizable landmarks and that those
landmarks be reachable with my ginormous hands on at least their smallest
phone, without having to invoke a gesture to bring the screen to my thumb.

[1] [http://www.peterpetrovski.com/post/28032060238/the-
authentic...](http://www.peterpetrovski.com/post/28032060238/the-
authentically-digital-interface)

------
jarym
"Since this experiment used targeted findability tasks, more time and effort
spent looking around the page are not good"

Meanwhile we now (maybe) understand why sites like eBay are SO effective for
selling - they may be clunkier to navigate but people maybe spend longer
looking at them and subconsciously ingesting all the marketing messages whilst
around to find something else on the page.

------
SKYRHO_
Certain I'm the minority, but flat UI can be successful and very effective.
With limited user paths and a design aesthetic that leans towards minimalism I
have found that the user efficiently accomplishes the 'goals' assigned to
them. However, if flat UI is treated as fashion often is (ignoring
practicality, testing, and user metrics) then no doubt it will be
unsuccessful. No research to refer you to, but I believe many major players in
the industry adopted flat UI in an attempt to create a modern appealing look
for their brand, and then went about optimizing the UI as they saw fit based
upon user metrics and testing. As a designer I often continue to find myself
influenced by pseudomorphic design and other formerly trendy design styles,
but my goal is always to create something usable and unique rather than adhere
to a current design trend. :D

------
lmg643
One quirk of Mac OS flat design - i can never find the "contacts" icon - very
odd. This is one of the more skeumorphic designs still, too. I guess just the
dull brown without much color, easy to overlook.

~~~
oneeyedpigeon
I'm intrigued; what's your use-case as to locating an application file by its
icon? I never find myself doing this (Launchpad > "cont" > ENTER is my
preferred route).

------
conorwade
This research seems contrived at best. It compares strong coloured action
element's to weakly coloured action element's. It just so happens that the
element's on the weakly coloured version's are also using flat design. The
major element here is colour.

The "research" is designed to give a certain result. If they wanted to test
flat versus 3d, everything should be the same except for whether the elements
are 3d or flat.

Flat design is not about using less colour to signify action. It is a lack of
3d and skeuomorphic design.

------
pacomerh
I think flat UI and colorless design have their own artistic niche. I don't
think they belong in the mainstream website business. If you want to go buy a
flight ticket, you want to find your buttons! no questions asked. On the other
hand, if you know that you're visiting a more experimental site, say from an
artist of some sort. You should expect alternative solutions to UI.

~~~
chenster
Agree. Unfortunately, this experiment has gone mainstream for the wrong
reason.

------
ausjke
Can someone give a list of the most known 'Flat UI Elements' projects?
Microsoft's Metro Design? Google's Material Design? some other javascript
projects? Not a UX/UI designer and only knows bootstrap and some vue.js,
polymer, not sure what 'Flat UI' really means in practice, and, what are its
major alternatives?

~~~
toddmorey
Metro, Material, and iOS7 (after Ive took over software visual design) are
probably the leading examples. Noteable that they all come from the top three
brands in consumer tech.

Most of the conversation around flat has been removing all the superfluous
ornamentation (shadows, reflections, 3D icons) from when UI designers were
taking skeuomorphism too far. So if skeutomorphism was about how unnessarily
photo-realistic we could make UI, flat design is an effort to simplfily... to
see how minimal a UI can be.

Just like any pendulum swing, some UIs way overcorrected and lost a lot of the
small UI affordances that helped make interfaces understandable. Aesthetic
preferences aside, it IS harder to know what's a button when buttons are
styled to have fewer visual differences from normal, unclickable text.

You'll see that the most recent interpretations likes Material or Windows 10th
Annivesary seem to actually be bringing back some of the depth, layering,
shadows and other visual cues.

The answer, like so many things, is "just enough and not too much".

~~~
ausjke
Helps a lot. Thanks!

------
userbinator
> As long as in-line text links are presented in a contrasting color, users
> will recognize their purpose, even without an underline

I saw that sentence, thought 'it would be most ironic if "presented in a
contrasting color" was not actually a link' \--- but then was relieved to see
that the text _is_ a link to another of their articles.

------
_pmf_
Practical user experience design:

CEO: "Yeah, yeah, just go with the flat one." Lowly designer: "... yes."

------
Pica_soO
Why not have a design market instead of a top down aesthetic dictator?

Give me flat design with cascading style sheets and lets have a real
competition here.

------
keyle
Yeah but no. Common. This is just bad UX vs good UX. Know what your "call to
actions" are and put emphasis on them. Design 101.

------
js8
I suspect it was done for money, which is main cause of minimalism these days
(past 50 years or so). Flat elements and colorless icons are much cheaper to
design than the alternative.

I personally find minimalism quite ugly. But it doesn't matter, because
objectively, it's less expensive. It is also "predictably ugly". Less chance
to make it really really ugly => better from the business perspective.

------
sogen
yup, been saying that for years, previous iOS versions (i.e iOS 4) had faster
user input than iOS 7-11. Same for material design, even Google started doing
changes to make buttons more noticeable. I guess we will go back to 90's
design :D Color differentiated HIG buttons!

------
andrepd
My, who could have guessed that making user interfaces where text is visually
indistinguishable from clickables would make them harder to navigate... Next
you're going to tell me the trend of pushing mobile interfaces to the desktop,
or using obnoxious amounts of whitespace, is no good either!

~~~
whoopdedo
Increased spacing around interactive elements is appreciated when you have to
use the interface on a touchscreen device.

~~~
mcbits
Or a mouse. I'm getting too old to enjoy playing the maze game with 20px
nested drop-down menus or Operation with toolbars and razor-thin scrollbars.

~~~
pluma
Even the vote buttons on HN are a bit obnoxiously small for my non-mobile use.
Touchpads are a thing.

------
Navarajan
IMO, Flat UI does work well on Mobile but this is not same for big screens.

------
gt_
'non-design' a better way of describing what's happening here

------
gt_
So the design approach that lacks any theoretical support to begin with is
less functional?

I hope too much effort wasn't wasted on the study but thanks for posting. I'm
sick of this stuff.

------
jpn
This study is significantly flawed.

It would be like attaching wings to a car, driving it down the highway, and
then concluding that wings don't really help with speed.

Or another example would be be to take Pharrell's hat and placing it on some
random person's head.

Context matters. Design is not the sum of its parts.

~~~
chickenfries
> This study is significantly flawed.

Is there a particular way you think it could be improved or do you just think
that we shouldn't try to empirically compare something like flat vs non flat
buttons?

~~~
jpn
I think these comparisons are silly because they are trying to find some
blanket universal rule. What works most of the time might not work in your
specific case.

[https://en.wikipedia.org/wiki/No_free_lunch_in_search_and_op...](https://en.wikipedia.org/wiki/No_free_lunch_in_search_and_optimization)

~~~
chickenfries
> I think these comparisons are silly because they are trying to find some
> blanket universal rule.

Says who? The author goes into detail about what exactly they were measuring.
The last two headings are "When Flat Designs Can Work" and "Limitations of the
Study." Can you clarify exactly what you found "significantly flawed"? I don't
get what you're trying to say by your wikipedia link.

> What works most of the time might not work in your specific case.

So what? Is it not worth knowing what works most of the time and under what
assumptions?

------
firefoxd

        **********
        * Button *
        **********
    

This button above submits the information. I can make it many different
colors, go with flat design, or skeuomorphic.

If i test it long enough, one of the designs will be a clear winner. Even when
i repeat the test, i may get the same winner, concluding that it is the best
design to go with.

But in the end, it's not about the button. It's about the information i want
the user to submit. If they filled up the form that came before it, the effect
of design is minimal at most.

Edit: also in this day an age, I'll be totally happy with designs that don't
attract attention, especially when people think the do.

