15 ms·

Flat UI Elements Attract Less Attention and Cause Uncertainty

354 points by nicc 9y ago

deleted 9y ago
[deleted]
jamesrom 9y ago
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 9y ago
  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.
jpn 9y ago
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 9y ago
  > 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?
  - manicdee 9y ago
    For starters, rather than simply using flat design elements in place of existing design elements they could adjust the entire UX of the site to be "flat". If you want to see how useful wings are, build a plane.
    - chickenfries 9y ago
      But then how do you account for the possible differences in the quality of the interface? Keeping the interfaces relatively similar except for the buttons and inputs makes it easier to compare the two. This plane metaphor is ridiculous and unhelpful. We're not trying to measure "how useful wings are", we're talking about what the buttons on the inside of the plane should look like, we need two cockpits with different buttons.
  - jpn 9y ago
    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_optimization https://en.wikipedia.org/wiki/No_free_lunch_in_search_and_op...
    - TheSpiceIsLife 9y ago
      > What works most of the time might not work in your specific case. I feel like Flat Design works for a specific use case, though you'll have to imagine one because I don't know of any, but it has been applied universally. Many interfaces I encounter nowadays seem like every interaction is an Easter Egg, where clicking / tapping around randomly is World's Best Practice for feature discovery.
    - chickenfries 9y ago
      > 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?
- hnzix 9y ago
  This study indicates that skeuomorphic buttons provide better visual cues than ghost buttons. None of your analogies seem to dispute that finding.
- blackoil 9y ago
  It is a lot simpler to give a pointed issue, then to dumb down with an analogy. Coming with a good analogy is a very difficult task.
lmg643 9y ago
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 9y ago
  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).
petilon 9y ago
Flat UI makes interfaces harder to figure out. Many examples here: http://uxcritique.tumblr.com/ http://uxcritique.tumblr.com/
- andrepd 9y ago
  Thank you, that was a nice read. Could use more examples from outside the apple ecosystem (Google is a goldmine in this regard).
firefoxd 9y ago
********** * 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.
chenster 9y ago
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-microsoft-evolves-beyond-flat-ui-with-its-fluent-design-language-3702669.html http://www.firstpost.com/tech/news-analysis/build-2017-micro...
- azeirah 9y ago
  Every type of design has its up- and downsides. You propose to do away with flat design, what's the alternative? You're just reinitiating the cycle. Where are we going, if anywhere?
  - peterlk 9y ago
    I'm not really in the design universe that much any more, but the successor to flat design seemed to be material design. It lives somewhere between skeuomorphism and flat design. Any designers care to comment what the new/next hot thing is?
    - King-Aaron 9y ago
      Brutalism > cough
      - deleted 9y ago
        [deleted]
    - JoshMnem 9y ago
      I think that some kind of minimalism will come next, after the novelty of the current trend wears off. There are accessibility problems with Material Design (and maybe Fluent Design) due to animation overkill and over-saturated colors. I'm waiting for the study on how many types of animation can cause nausea in some people. https://www.webaccessibility.com/best_practices.php?technology_platform_id=11 https://www.webaccessibility.com/best_practices.php?technolo...
namuol 9y ago
Take a few minutes to look at their examples: https://www.nngroup.com/articles/heatmap-visualizations-signifiers/ https://www.nngroup.com/articles/heatmap-visualizations-sign... 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.
- exodust 9y ago
  > "Explain to me how adding an underline to a link is somehow not-flat? " "Hey, I'm definitely a link" vs "I may or may not be a link". As the study explains, link colour difference was enough to balance the scales. It's when link text looks the same as normal text you have a problem. Flat design can go too far and everything looks the same, requiring more effort from user to figure out what's what, and also remember what's what for next time. I find this with iOS, my memory of the interface is quite poor ever since they introduced flat design. I'm only an occasional user of my iPad, but still... the flatness is irritating.
  - namuol 9y ago
    > Flat design can go too far and everything looks the same Flat design, done well, makes signaling easier because there's literally less visual noise. Bad design is just bad design.
    - exodust 9y ago
      Sure, if there's sufficient contrast within your flat design, I'm fine with that. Lots of good examples of this in 'material design' where buttons are easily recognised, with nice colourful backgrounds. When buttons get wishy-washy grey in some attempt to "blend in", then we have bad flat design.
- tangue 9y ago
  This. Even Jonny Ive can't ship a "view all colours" link like the one on their sunglasses page. It would have been better if they were comparing material design or metro rather than their interpretation of flat design.
arkitaip 9y ago
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.
richforrester 9y ago
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 9y ago
  Would love to hear what part of my reasoning rubbed you wrong, silent downvoter! We don't learn if we don't share!
sogen 9y ago
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 9y ago
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 9y ago
  Increased spacing around interactive elements is appreciated when you have to use the interface on a touchscreen device.
  - mcbits 9y ago
    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 9y ago
      Even the vote buttons on HN are a bit obnoxiously small for my non-mobile use. Touchpads are a thing.
  - andrepd 9y ago
    Well, for one, this trend is widespread on desktop/mouse interfaces as well. Also, even in touch interfaces that's not so straightforward. You must take care not to introduce so much whitespace that the information density is too low to enable practical use. If you don't then your usability is wrecked.
0xBA5ED 9y ago
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.
pacomerh 9y ago
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 9y ago
  Agree. Unfortunately, this experiment has gone mainstream for the wrong reason.
abledon 9y ago
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
- andybak 9y ago
  The devil is in the details and Material Design is not 100% flat. I think Material gets a lot of stuff right but needs to be pushed a little further in the direction of making buttony things more buttony.
- efdee 9y ago
  To be honest, real black on real white is horrible from a design/UX point of view.
  - fragsworth 9y ago
    For text? What are you talking about?
Illniyar 9y ago
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.
userbinator 9y ago
> 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.
gt_ 9y ago
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.
gt_ 9y ago
'non-design' a better way of describing what's happening here
_pmf_ 9y ago
Practical user experience design: CEO: "Yeah, yeah, just go with the flat one." Lowly designer: "... yes."
keyle 9y ago
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.
jarym 9y ago
"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.
bobsoap 9y ago
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.
SeanDav 9y ago
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.
js8 9y ago
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.
Navarajan 9y ago
IMO, Flat UI does work well on Mobile but this is not same for big screens.
Pica_soO 9y ago
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.
conorwade 9y ago
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.
frankydp 9y ago
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)
- thanksgiving 9y ago
  I don't see how any of this is against flat. What would you rather have? Windows XP Luna? Old iOS skeumorphism (which interestingly is underlined in materialistic so not sure if I spelled it wrong)? Material design is flat I think and is very good. I'm sure if we stick with it, it will be very obvious to those who will be old with me. What can we do to make it useful for old folks today?
  - tcd 9y ago
    It's not physically possible to design a UI that's going to be intuitive for all 7 billion human beings, there will always be people who don't 'get it' or make mistakes. We've come a long, long way from the days of Windows 98 and certain things are somewhat intuitive, like the hamburger menus or the swipe gestures on mobile. I think this simply boils down to people having to learn how things work, and being able to adapt to the form factor being used. Be it mobile, tablet or desktop. There are UI conventions across platforms although that gap is being bridged somewhat (many desktop websites have hamburger menus now, for example). Software changes and so does UI, not much that can be done except better education, otherwise we'd still be looking at the ancient windows desktop interface...
ausjke 9y ago
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 9y ago
  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 9y ago
    Helps a lot. Thanks!
stevebmark 9y ago
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 9y ago
  I thought Microsoft brought it to the mainstream and then everyone copied it: Apple, Google with material design.
natecavanaugh 9y ago
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-authentically-digital-interface http://www.peterpetrovski.com/post/28032060238/the-authentic...
SKYRHO_ 9y ago
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
tripzilch 9y ago
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.

354 points by nicc 9y ago

deleted 9y ago

[deleted]

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 9y ago
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.

jpn 9y ago

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 9y ago
> 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?
- manicdee 9y ago
  For starters, rather than simply using flat design elements in place of existing design elements they could adjust the entire UX of the site to be "flat". If you want to see how useful wings are, build a plane.
  - chickenfries 9y ago
    But then how do you account for the possible differences in the quality of the interface? Keeping the interfaces relatively similar except for the buttons and inputs makes it easier to compare the two. This plane metaphor is ridiculous and unhelpful. We're not trying to measure "how useful wings are", we're talking about what the buttons on the inside of the plane should look like, we need two cockpits with different buttons.
- jpn 9y ago
  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_optimization https://en.wikipedia.org/wiki/No_free_lunch_in_search_and_op...
  - TheSpiceIsLife 9y ago
    > What works most of the time might not work in your specific case. I feel like Flat Design works for a specific use case, though you'll have to imagine one because I don't know of any, but it has been applied universally. Many interfaces I encounter nowadays seem like every interaction is an Easter Egg, where clicking / tapping around randomly is World's Best Practice for feature discovery.
  - chickenfries 9y ago
    > 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?
hnzix 9y ago
This study indicates that skeuomorphic buttons provide better visual cues than ghost buttons. None of your analogies seem to dispute that finding.
blackoil 9y ago
It is a lot simpler to give a pointed issue, then to dumb down with an analogy. Coming with a good analogy is a very difficult task.

lmg643 9y ago

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 9y ago
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).

petilon 9y ago

Flat UI makes interfaces harder to figure out. Many examples here: http://uxcritique.tumblr.com/ http://uxcritique.tumblr.com/

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

firefoxd 9y ago

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

chenster 9y ago

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-microsoft-evolves-beyond-flat-ui-with-its-fluent-design-language-3702669.html http://www.firstpost.com/tech/news-analysis/build-2017-micro...

azeirah 9y ago
Every type of design has its up- and downsides. You propose to do away with flat design, what's the alternative? You're just reinitiating the cycle. Where are we going, if anywhere?
- peterlk 9y ago
  I'm not really in the design universe that much any more, but the successor to flat design seemed to be material design. It lives somewhere between skeuomorphism and flat design. Any designers care to comment what the new/next hot thing is?
  - King-Aaron 9y ago
    Brutalism > cough
    - deleted 9y ago
      [deleted]
  - JoshMnem 9y ago
    I think that some kind of minimalism will come next, after the novelty of the current trend wears off. There are accessibility problems with Material Design (and maybe Fluent Design) due to animation overkill and over-saturated colors. I'm waiting for the study on how many types of animation can cause nausea in some people. https://www.webaccessibility.com/best_practices.php?technology_platform_id=11 https://www.webaccessibility.com/best_practices.php?technolo...

namuol 9y ago

Take a few minutes to look at their examples: https://www.nngroup.com/articles/heatmap-visualizations-signifiers/ https://www.nngroup.com/articles/heatmap-visualizations-sign... 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.

exodust 9y ago
> "Explain to me how adding an underline to a link is somehow not-flat? " "Hey, I'm definitely a link" vs "I may or may not be a link". As the study explains, link colour difference was enough to balance the scales. It's when link text looks the same as normal text you have a problem. Flat design can go too far and everything looks the same, requiring more effort from user to figure out what's what, and also remember what's what for next time. I find this with iOS, my memory of the interface is quite poor ever since they introduced flat design. I'm only an occasional user of my iPad, but still... the flatness is irritating.
- namuol 9y ago
  > Flat design can go too far and everything looks the same Flat design, done well, makes signaling easier because there's literally less visual noise. Bad design is just bad design.
  - exodust 9y ago
    Sure, if there's sufficient contrast within your flat design, I'm fine with that. Lots of good examples of this in 'material design' where buttons are easily recognised, with nice colourful backgrounds. When buttons get wishy-washy grey in some attempt to "blend in", then we have bad flat design.
tangue 9y ago
This. Even Jonny Ive can't ship a "view all colours" link like the one on their sunglasses page. It would have been better if they were comparing material design or metro rather than their interpretation of flat design.

arkitaip 9y ago

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.

richforrester 9y ago

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 9y ago
Would love to hear what part of my reasoning rubbed you wrong, silent downvoter! We don't learn if we don't share!

sogen 9y ago

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 9y ago

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 9y ago
Increased spacing around interactive elements is appreciated when you have to use the interface on a touchscreen device.
- mcbits 9y ago
  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 9y ago
    Even the vote buttons on HN are a bit obnoxiously small for my non-mobile use. Touchpads are a thing.
- andrepd 9y ago
  Well, for one, this trend is widespread on desktop/mouse interfaces as well. Also, even in touch interfaces that's not so straightforward. You must take care not to introduce so much whitespace that the information density is too low to enable practical use. If you don't then your usability is wrecked.

0xBA5ED 9y ago

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.

pacomerh 9y ago

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 9y ago
Agree. Unfortunately, this experiment has gone mainstream for the wrong reason.

abledon 9y ago

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

andybak 9y ago
The devil is in the details and Material Design is not 100% flat. I think Material gets a lot of stuff right but needs to be pushed a little further in the direction of making buttony things more buttony.
efdee 9y ago
To be honest, real black on real white is horrible from a design/UX point of view.
- fragsworth 9y ago
  For text? What are you talking about?

Illniyar 9y ago

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.

userbinator 9y ago

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

gt_ 9y ago

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.

gt_ 9y ago

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

_pmf_ 9y ago

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

keyle 9y ago

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.

jarym 9y ago

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

bobsoap 9y ago

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.

SeanDav 9y ago

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.

js8 9y ago

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.

Navarajan 9y ago

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

Pica_soO 9y ago

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.

conorwade 9y ago

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.

frankydp 9y ago

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)

thanksgiving 9y ago
I don't see how any of this is against flat. What would you rather have? Windows XP Luna? Old iOS skeumorphism (which interestingly is underlined in materialistic so not sure if I spelled it wrong)? Material design is flat I think and is very good. I'm sure if we stick with it, it will be very obvious to those who will be old with me. What can we do to make it useful for old folks today?
- tcd 9y ago
  It's not physically possible to design a UI that's going to be intuitive for all 7 billion human beings, there will always be people who don't 'get it' or make mistakes. We've come a long, long way from the days of Windows 98 and certain things are somewhat intuitive, like the hamburger menus or the swipe gestures on mobile. I think this simply boils down to people having to learn how things work, and being able to adapt to the form factor being used. Be it mobile, tablet or desktop. There are UI conventions across platforms although that gap is being bridged somewhat (many desktop websites have hamburger menus now, for example). Software changes and so does UI, not much that can be done except better education, otherwise we'd still be looking at the ancient windows desktop interface...

ausjke 9y ago

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 9y ago
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 9y ago
  Helps a lot. Thanks!

stevebmark 9y ago

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 9y ago
I thought Microsoft brought it to the mainstream and then everyone copied it: Apple, Google with material design.

natecavanaugh 9y ago

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-authentically-digital-interface http://www.peterpetrovski.com/post/28032060238/the-authentic...

SKYRHO_ 9y ago

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

tripzilch 9y ago

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.