Users Navigate Flat UI Designs 22 Percent Slower

Megalith

Megalith

24-bit/48kHz
Staff member
Joined
Aug 20, 2006
Messages
13,000
Apple (iOS, OS X), Google (Material Design), and Microsoft (Metro) all believe that flat design is the way forward, but a new study suggests that flat user interfaces attract less attention and cause uncertainty: the Nielsen Norman Group presented two versions of different websites (one with 3D-styled elements, the other with flat buttons) and found that people spent more time locating elements with the latter.

...users spent more time looking at the page, and they had to look at more elements on the page. Since this experiment used targeted findability tasks, more time and effort spent looking around the page are not good. These findings don’t mean that users were more “engaged” with the pages. Instead, they suggest that participants struggled to locate the element they wanted, or weren’t confident when they first saw it. 22% longer task time for the weak-signifier designs may seem terrible. But remember that our metrics reflect time spent while looking for where to click. The tasks we measured were very specific and represent just a small component of real web tasks.
 
Flat can be done right
But a lot of it lately has seemed like a fad that's putting form over function
 
Just remember it was all microsoft's fault they're the first big company to walk backwards and flatten their icons
 
Semantics said:
Just remember it was all microsoft's fault they're the first big company to walk backwards and flatten their icons
Click to expand...

They're also the best example of doing it piss poorly. The flat ui for the new style windows apps is attrocious. "I know, let's remove window borders so the focused app UI bleeds with the surroundings"! Jackasses.
 
Last edited:
Wonder how many of these flat design interfaces passed the ADA accessibility tests? Finding the slightly bolder gray text that is the active link would seem much harder then finding the underlined slightly bolder gray text in a box.
 
I would tend to agree... I can't seem to find stuff as quickly in flat... maybe its just cause I was used to the old icons... It just seems to make logical sense that some form of 3d appearing boundaries and shapes would be more effective for eye designed to see 3d things?
 
My pixel just updated to Oreo and on the battery screen, I had to go tapping random things to see how I get to the view where it shows battery history. It's not obvious at all that you can tap on the battery and it takes you to that view.
 
I work with designers that focus very heavily on flat aesthetics, but I still hate it. To me it feels like a step backward. It's also very limiting when text is on top of anything. Things become hard to read (or notice) without depth to naturally make them stand out. In user testing I see it all the time. Things that are right in front of your face are easily missed because everything bleeds together. That's irregardless of colors or what's written, too.

I wish everything would follow the design aesthetic of OSX.
 
Domingo said:
I work with designers that focus very heavily on flat aesthetics, but I still hate it. To me it feels like a step backward. It's also very limiting when text is on top of anything. Things become hard to read (or notice) without depth to naturally make them stand out. In user testing I see it all the time. Things that are right in front of your face are easily missed because everything bleeds together. That's irregardless of colors or what's written, too.

I wish everything would follow the design aesthetic of OSX.
Click to expand...

You mean Yosemite, which followed iOS like a lost puppy?

https://en.wikipedia.org/wiki/OS_X_Yosemite

There is no more purveyor of classic design, that useful stuff has gone into the toilet. CHANGE FOR THE SAKE OF CHANGE.
 
Form over function yep. Not a fan, looks pretty but functionally it's made it harder for me to find stuff many times.
 
Megalith said:
Apple (iOS, OS X), Google (Material Design), and Microsoft (Metro) all believe that flat design is the way forward, but a new study suggests that flat user interfaces attract less attention and cause uncertainty: the Nielsen Norman Group presented two versions of different websites (one with 3D-styled elements, the other with flat buttons) and found that people spent more time locating elements with the latter.

...users spent more time looking at the page, and they had to look at more elements on the page. Since this experiment used targeted findability tasks, more time and effort spent looking around the page are not good. These findings don’t mean that users were more “engaged” with the pages. Instead, they suggest that participants struggled to locate the element they wanted, or weren’t confident when they first saw it. 22% longer task time for the weak-signifier designs may seem terrible. But remember that our metrics reflect time spent while looking for where to click. The tasks we measured were very specific and represent just a small component of real web tasks.
Click to expand...

Wow! I've totally not been saying that exact thing here for years about flat ui and terrible ui design. Oh wait...
 
I first noticed this with Office about the time the Ribbon came out. I learned to live with the Ribbon, but the new color schemes make the active window only slightly different in color than inactive windows and I am always clicking on the wrong border when I have several windows stacked on top of each other. Newer websites are even worse, takes forever to find active areas. At least here, you look at the bottom and you have a clear red button on dark gray background, difficult to miss, put light gray on lighter gray and it is horrible.

Some sites now have text boxes like where you need to enter your user name and password that you can barely tell from the background and have to search for where to enter the data, and even after you click on the box, the cursor is so near the same color as the background you can't tell if the area is active or not to begin typing.

Why do so many designers not understand, Contrast is Good!
 
Didn't this seem obvious from day one (Windows 8)? I had to mouse all over the place to find out the clickable text. Microsoft could have saved themselves a lot of goodwill if they'd just added the flat UI as an option and kept the Windows 7 UI.
 
Flat design can work if done right.

In a few of these, the examples are clearly poor designs to begin with. Things like same color links (but bolded), stroked transparent buttons, and an assortment of other items.

In the Cosmopolitan Hotel example they show a call-to-action button. The "better" one has gradient (depth) and a dark (contrast) color, where-as the "weak" one has a stroked transparent box. This is not a fair comparison. I'm sure they would have seen similar results if the gradient wasn't added and it was just the contrast of the solid flat colored box. Flat != minimalist. The stroked transparent box is a minimalist design decision. A solid colored CTA button could have been used maintaining the "flat" aesthetic.

Flat design is about removing clutter, not so much about making things blend together. Sure, you can lose depth in a flat design, but you're supposed to make up for that with appropriate contrast.

Poor UI design is poor UI design no matter what "trend" it's trying to follow at the time.
 
Last edited:
Semantics said:
Just remember it was all microsoft's fault they're the first big company to walk backwards and flatten their icons
Click to expand...

No, it was google and my post history clearly shows my bitching at them about it. image search used to have such good functionality. Maps used to be simple but powerful. Even their main search is bastardized shit at this point.
 
lilbabycat said:
No, it was google and my post history clearly shows my bitching at them about it. image search used to have such good functionality. Maps used to be simple but powerful. Even their main search is bastardized shit at this point.
Click to expand...
Microsoft shifted to flat irrc roughly 2011-2012 before windows 8 launch, google was a year or two after that.
 
Took what - 25 years to get to Aero glass where Windows was actually nice to look at and they went and f'd it all up with this Metro same UI for all devices bullshit. Flat may be able to be "done right" but obviously when big players like MS mess it up it takes too much effort versus a simple 3D button/drop shadows and nice edges on things!
 
All of this is 1% of this AIDS trend of "icons without words."

Fuck this so much. Every program, every website, every button.

It used to be optional for when a user got familiar with the software and now it's just standard everywhere and it blows.
 
JayteeBates said:
Took what - 25 years to get to Aero glass where Windows was actually nice to look at and they went and f'd it all up with this Metro same UI for all devices bullshit. Flat may be able to be "done right" but obviously when big players like MS mess it up it takes too much effort versus a simple 3D button/drop shadows and nice edges on things!
Click to expand...
Drop shadows, i get avoiding that early 00's bubbly shine look but simple drop shadows would help so much with alot of this crap. Call it shading for all i care just giving a context to layers is useful.

But yeah google you see them starting to flatten things out in 2013 with kitkat but not until 2014 do they go full blown flat with lollypop, around 2013 with apple in ios 7, microsoft has been rocking flat forever with zune but windows phone 7 had that design elements since 2010 so even earlier than i remember but honestly who remembers your zune or windows phone 7.
 
JayteeBates said:
Took what - 25 years to get to Aero glass where Windows was actually nice to look at and they went and f'd it all up with this Metro same UI for all devices bullshit. Flat may be able to be "done right" but obviously when big players like MS mess it up it takes too much effort versus a simple 3D button/drop shadows and nice edges on things!
Click to expand...
Dont forget, well, in case you might not know, but Aero was a response to OSX Skeuomorphism icons and the insane compiz animations in Linux.

Like this:



But yeah, the flat everything is very counterproductive and needs to be dialed back.
 
ZeqOBpf6 said:
All of this is 1% of this AIDS trend of "icons without words."

Fuck this so much. Every program, every website, every button.

It used to be optional for when a user got familiar with the software and now it's just standard everywhere and it blows.
Click to expand...
Ugh, yes. Icons are basically heiroglyphs, so now we have to learn shitty archaic language types for every app.
 
JayteeBates said:
Took what - 25 years to get to Aero glass where Windows was actually nice to look at and they went and f'd it all up with this Metro same UI for all devices bullshit. Flat may be able to be "done right" but obviously when big players like MS mess it up it takes too much effort versus a simple 3D button/drop shadows and nice edges on things!
Click to expand...
This so much... MS was clearly dedicated to perfection in the os.. I saw things evolve from dos , windows 3 and so on.. all this to just stick it out and piss all over it. Bad choice and very sad. Im sure in a decade or 2 all this things we got used to and peaked in windows 7 will come back, rediscovered, new .. wow! Apple might patent it , claim to have invented it too and sue everyone.
 
SvenBent said:
Wow not making logical visual clues and boundaries make it harder to map things out... Who could have known it...
Click to expand...

i know, right? hey, let's take away all street/highway markers and disable GPS, then send millions of people to an unfamiliar town and see how hard it is for them to find anything!

fuck flat....this is one of the main things i hate about windows 10....everything is fucking flat. i probably would have given it more than just a passing glance if it hadn't been for that idiotic fucking decision to go flat with it. that, and taking up 33% more space to do the same fucking thing, all to appease the "touchscreen" crowd....
 
I'm excited to file this earth shattering story under "shit everyone already knew". I'm starting to think Silicon Valley is going the way of Hollywood. Less of a meritocracy and more of... who fucking knows. It's the only explanation I have for why so many things seem to be getting so much worse. How many UI's have gone to more clicks. ie: if i search on google or bing now but wish to refine my search, I have to click a tools drop down, to get to another drop down. If I go to google maps, same thing, lots of shit hidden behind little menus. Google Docs and Windows, flat interface. So while screen sizes are growing and resolutions and colors are getting better, instead of using that extra room and fidelity we get less tools and less fidelity. wtf.
 
Spidey329 said:
Flat design can work if done right.

In a few of these, the examples are clearly poor designs to begin with. Things like same color links (but bolded), stroked transparent buttons, and an assortment of other items.

In the Cosmopolitan Hotel example they show a call-to-action button. The "better" one has gradient (depth) and a dark (contrast) color, where-as the "weak" one has a stroked transparent box. This is not a fair comparison. I'm sure they would have seen similar results if the gradient wasn't added and it was just the contrast of the solid flat colored box. Flat != minimalist. The stroked transparent box is a minimalist design decision. A solid colored CTA button could have been used maintaining the "flat" aesthetic.

Flat design is about removing clutter, not so much about making things blend together. Sure, you can lose depth in a flat design, but you're supposed to make up for that with appropriate contrast.

Poor UI design is poor UI design no matter what "trend" it's trying to follow at the time.
Click to expand...

I think part of the problem though is, in something like excel, I know generally where the format painter button is and my eyes can snap to the colored paint brush. On google sheets, I know where it is, but nothing stands out so now I have to focus and search. When I know exactly where the tool is, it's a matter of milliseconds. When I don't, it's a matter of literal seconds.

It's the difference between playing battlefield 4 and battliefield 4 hardcore. If someone gets spotted with Q, you can kill them in half a second. If they don't, the guy is just a glob of pixels blending in with a bunch of bushes.
 
It's getting worse... I my dreams are now horribly flat. Detecting dimension is getting harder and harder. Obscuring the obvious triggers in dreamland mean I am dying a lot more. Help.........
 
I can attest to this. We just switched from Office 2010 to Office 2016 at work and I am having so many issues. Switching my view between monitors I often cannot tell an open e-mail apart for the main window in the background. And even though all the buttons are in the same places it is taking me longer to acquire them and move my mouse into the proper area to respond and click. Not to mention the stupid animations that you can't turn off without a registry edit that I can't do lags the UI to all hell. With the size of Excel files I deal with it has become a serious issue, as simply trying to highlight a range of cells locks my PC up.

And speaking of Excel, why in the hell do copy, paste and insert still only complete using on processor core when I have 8 available? Formula calculations happily use all available cores, but fuck those simply copy pastas that can take even longer, amirite?
 
"flat user intrerface" way too pedo for my tastes...
 
Armenius said:
I can attest to this. We just switched from Office 2010 to Office 2016 at work and I am having so many issues. Switching my view between monitors I often cannot tell an open e-mail apart for the main window in the background. And even though all the buttons are in the same places it is taking me longer to acquire them and move my mouse into the proper area to respond and click. Not to mention the stupid animations that you can't turn off without a registry edit that I can't do lags the UI to all hell. With the size of Excel files I deal with it has become a serious issue, as simply trying to highlight a range of cells locks my PC up.

And speaking of Excel, why in the hell do copy, paste and insert still only complete using on processor core when I have 8 available? Formula calculations happily use all available cores, but fuck those simply copy pastas that can take even longer, amirite?
Click to expand...

Not sure if this is what you mean, but this is what I did on 2016 to disable animations:

 
Last edited:
You must log in or register to reply here.
Back
Top