1. 58
  1.  

  2. 52

    I have a very serious suspicion that the industry’s move to flat designs – for everything, not just website UI elements, which the article analyzes – is, in part, economically-motivated. It’s not a quality judgement per se (although I certainly don’t like flat UIs, but people who grew up with them might think differently), but it’s an observation I’ve made over several years.

    About 20 years ago, when I got my first gig in the computer industry, one of the people I worked with was an icon designer at a media agency. He did other things besides drawing icons, of course, but whenever the agency he worked with needed an icon for an application, or a set of buttons and icons for a website (this was the peak of the Flash era so this was very common), he was the man.

    For particularly challenging contracts – e.g. OS X applications, which had those amazing, detailed icons – it could sometimes take two or three weeks for several icons to be drawn and the “winner” to be picked and retouched. The price for all that effort was the kind of money that, provided you outsource it someplace cheap, can get you a whole mobile app written today. And that was the sort of time frame (and budget!) involved in any major design project.

    It was also very hard to string things together. The agency this guy worked with made a lot of money out of what they called “design kits” – ready-made buttons, icons and whatnot that were specifically design so that they were easy to customize. That was because getting inexperienced people to make a good UI out of photorealistic buttons and 3D buttons usually got you mad bling and crashes, rather than an image of the cyberfuture.

    But that was also at a time when you could charge 25$ for a shareware applications and it sounded like a decent price (and this was 2002 dollars, not 2020 dollars). Most applications today – sold for 1.99$ on an AppStore or, more commonly, in exchange for personal data that may or may not turn into profit eventually – are developed on a budget that 2002-era design would gobble up in no time.

    So of course most icons are basically a blob of colour with an initial on them and all buttons are flat rectangles with an anonymous, black-and-white symbolic icon on them: the kind of time frames and budgets involved don’t leave room for anything more advanced than that. This not only takes care of the money problem, it also makes it a lot easier to work with “design kits”, and also makes it less likely for brofounders to get mad bling instead of something that they can at least demo to potential investors when, instead of paying experienced designers at market rates, they hire college dropouts for peanuts.

    I don’t want to claim that this is an universal explanation. I’m sure that, especially after Apple and Google made it fashionable, a lot of companies adopted flat design in good faith, and that a lot of experienced designers adopted it both in good faith and for their own subsistence (I’m still in touch with that guy, and while he also thinks most flat designs are crap, he will also gladly come up with one for his paying customers).

    But I also doubt that flat design is all about good usability and user friendliness, especially since, as soon as you ask about usability studies (real ones, not “I asked twenty people on the hallway oh and I asked my dad and my mom and my sister and they’re really not computer nerds”) and numbers everyone starts ranting about how these things never paint a realistic picture of usage patterns and usability has a certain Zen that can’t be captured by raw numbers and experiments and we don’t, like, really understand how perception and the human brain work…

    1. 13

      This comment itself deserves to be an article or at least a story on lobste.rs.

      1. 8

        National Instruments produces the LabView visual programming language. Every operator and function pretty much has its own icon. See an example of a LabView program. They had full time icon designer(s) to make those. It’s a hard job, especially for niche, technical, or abstract concepts. How would you create an icon for a parallel while loop?

        Users could create custom icons for their “functions”. One interesting consequence is that library writers could create visually distinctive, branded icons for their functions.

        1. 3

          It’s cool that you mention LabView because one of the reasons why their icons are so great is that, if you’ve done non-virtual instrumentation before, most of them make sense. They aren’t some abstract symbol thing – for example, variable inputs have tiny beveled buttons and display on, what, 48x48px icons? They kindda look like the real-life devices or blocks that they represent. And those that are just black and white symbols tend to follow decades-old standards for electrical symbols, logical diagrams etc., which everyone can look up, or knows by now. (Not because they’re intuitive, btw, or because they follow some unconscious interpretative impulses that have been ingrained in our brains since time immemorial but because they drill them into you through four years of engineering school :) ).

        2. 7

          The sensation of downward pressure being placed on the economics in the context of creating software has many parallels:

          • why hire experienced polyglots? Just use JS and hire 2x as many people
          • why make a native app? Just use Electron and eat 3x the resources
          • why create an architecture? Just force everyone to use redux and hope for the best
          • why design a UI? Just throw bootstrap on it and tweak the colors
          • why write integration tests when you could be shipping?

          The goal is always the same: commoditization.

          1. 5

            I’m not so sure about this. A lot of the “flat UI trend” was started by Microsoft and Google – others followed. And you can make “UI packs” which are not flat icons with just as much ease.

            My own theory is that it’s essentially a confusion between graphic design and user interface design. People who do either are often just called “designers”, but they’re quite different disciplines: one is about making things look good, the other about making them work well.

            I’ve worked with quite a few designers over the years who made great looking designs which … were not all that great to use, and not infrequently got very defensive about small changes to make it easier to use “because muh art”.

            This is not intended as a condemnation of graphical designers, but graphical design is an art skill whereas UI design is engineering skill. Ideally, both should work together to create a great-looking UI that works well.

            Why are companies like Google making unusable flat-UI designs with lightgrey hairline thing text on a white background? I don’t know … In principle they should have enough money to hire UI designers and should be knowledgable enough to know the difference between graphic and UI design. I guess fashion is one hell of a drug?

            1. 1

              And you can make “UI packs” which are not flat icons with just as much ease.

              It’s even easier – but they’re also pretty useless. What would you customize about it? A while back there was an entire debate about the right way to represent buttons: “clean” vs. “outlined” bevel (i.e. just the bevel, as Windows 95 did it, or a black outline around the bevel, a la Amiga’s MUI?), curved vs. non-curved lit edges, harsh vs. soft gradients and so on, and each one fit one kind of application better than another, at least in aesthetic terms. I don’t know if those discussions made sense or not, who knows, maybe it was just in order to make it look like the money you paid was worth it :). But what would a “design pack” consist of, when all you get to customize about a button are the color, padding, and font?

              You can sort of see that in tools like oomox (https://github.com/themix-project/oomox). It’s not exactly a design kit, and it answers a completely different problem (GTK being obtuse), but it’s close enough.

            2. 1

              So of course most icons are basically a blob of colour with an initial on them and all buttons are flat rectangles with an anonymous, black-and-white symbolic icon on them: the kind of time frames and budgets involved don’t leave room for anything more advanced than that.

              not even text? we are stuck at pictograms now?!

              1. 1

                是的 orz

                1. 1

                  You’re kidding but six or seven years ago, when I last worked on a consumer device, the design team insisted that there should be as little text as possible. First, because it looks intimidating and is not user-friendly. Second, because graphical representations allow us to establish a better brand presence for us – our own graphical design language, as opposed to generic text, would make our identity more recognizable. The gizmo’s PM had no strong opinions on the first point, but loved the second one, plus as little text as possible meant as little internationalization as possible – so, yep, it was pictograms everywhere.

                  1. 2

                    Pictograms don’t always make localisation easy. The classic example of this is the choice a bunch of companies made in the late ‘80s to use an owl as the help symbol. Owls are traditionally associated with wisdom in European culture, but in China they’re associated with bravery and in Latin America with black magic and evil. Localisation translated the text, but they got a lot of support calls from people who didn’t realise that the brave / evil animal was the one you clicked on for text. Translating words is generally much easier than translating cultural symbols. A lot of pictures have a variety of different cultural meanings and picking a replacement that matches the particular association that you meant can be a tricky problem.

                    1. 3

                      I think I brought up the exact same example with the owl, and all I got was “well we’re not gonna use an owl then, we’re going to make sure we use only symbols with non-controversial meanings” :).

                      That department, despite masquerading as an engineering group, was effectively the cargo cult arm of the Steve Jobs Fan Club, and virtually all decisions were made by non- or semi-technical people based on whether or not they thought Apple would have done it the same way. I could write… well maybe not a book, because my patience (which I’d previously thought to be virtually neverending) lasted less than an year, but at least two or three chapters, about all the hilarious disasters that this process resulted in. Thankfully, most of the products I worked on during that time didn’t even make it past the prototyping phase, so the world only got to laugh at one of them, I think.

                      (Edit: FWIW, it’s very likely that I did a lousy job at advocating for these things, too. By the time that happened I had long lost any kind of patience or trust in the people making these decisions, or their higher-ups, plus at the end of the day it really wasn’t my job, either. I heard it was pretty hard to argue with Steve Jobs when he was alive, too; arguing with a handful of people possessed by his spirit was an uphill battle that I most certainly lost.).

              2. 12

                Anecdatum: the Librem 5 phone uses Gtk/Gnome for much of its UI. When I showed my girlfriend these early screenshots, her reaction was: [delighted tone] “je kunt gewoon zien waar je op kunt klikken!” / ‘you can actually see what you can tap!’

                1. 6

                  Huh, dat is erg interessant! The GNOME interface, which I don’t really enjoy on a desktop computer, really shines on a smartphone.

                  1. 3

                    That is at the expense of desktop-users, who are presented with fat buttons and wasted space.

                  2. 8

                    I just noticed, the article title tells only half the story. Their other conclusion was that in 3 of the 9 websites, the weak-cues (‘flat’) UI design performed practically as well as the strong-cues design. From the last part of the article, details omitted:

                    3 of the 9 sites resulted in no differences in the gaze patterns between strong and weak signifiers. […] information about when flat UIs can work without damaging interaction. [emphasis in original]

                    […]

                    [2 of those 3 sites] had some traits in common, when compared to the rest of the stimuli:

                    • Low information density. […]
                    • Traditional layout. […]
                    • Salient, high-contrast targets. […]
                    1. 1

                      On top of that, if you take a look at the versions presented in the article, oftentimes it’s not just flat vs non flat but the colors aren’t the same, some buttons are plain in the non flat version while only outlined in the other, there’s a huge difference and this has nothing to do with a button being flat or not. Flat doesn’t mean low contrast!

                    2. 5

                      Nothing’s new; Raymond Chen was noting flat design came and was on its way out in the early 2000s after 3D design - then the pendulum swung towards lickable and glossy.

                      1. 15

                        Although I’ve looked at images to confirm what the author is saying, I chuckled at this bit:

                        Windows XP jumped on the “flat is good” bandwagon

                        because for me Windows XP will forever be remembered as the chunkiest, most over-the-top blobby OS UI I’ve used.

                      2. 4

                        No shit, sherlock! Wouldn’t it be nice to be able to tell at a glance what’s a button or other interact-able widget, vs. what’s just decoration or background? WITHOUT having to mouse over a thing and see if it responds to it? But it’s good to have science to back it up.

                        I expect the real reason for flat designs is it’s easier to make them on websites, and that’s all. Bloody Google.

                        1. 2

                          I have few problems with this article:

                          • Some examples are seem a bit rigged and nothing to do with “flat UI”. The Hertz example has nothing to do with flat ui in particular as the second website just fails to indicate “tab” rather than having some flat ui flaw.
                          • Last example compares blues links vs purple ones which is again kinda silly. Blue links are automatically associated with “new” unvisited websites as that’ll obvioulsy have higher interaction thatn Purple links which are associated with visited websites.

                          I feel that flat UI is more about getting rid of unnecessary information like gradient. What does the gradient add to the button that a slight shadow couldn’t do? Flat icons are also provide the same information without taking stealing attention like detailed graphic art.
                          When I open up non-flat designs I often see every part of UI screaming “look at me!” - everything is so loud and tiring. Flat UIs generally are more silent and when everything is silent it’s easier to be the voice that guides the user. Though I guess sometimes designers forget that and users are left stranded in a silent room.

                          One thing article did get right imho is underlines. Underlines are really awesome way to emphasize details!

                          1. 3

                            Some examples are seem a bit rigged and nothing to do with “flat UI”. The Hertz example has nothing to do with flat ui in particular as the second website just fails to indicate “tab” rather than having some flat ui flaw.

                            The distinction is with how strong or weak the interaction signifiers are. The premise of the article is that Flat UI tends to coincide with weak signifiers, and in the Hertz example removing the 3D details (the way drop shadows fall from one object onto another) altered the perception of the tab interface.

                            Last example compares blues links vs purple ones which is again kinda silly. Blue links are automatically associated with “new” unvisited websites as that’ll obvioulsy have higher interaction thatn Purple links which are associated with visited websites.

                            That example is given to back up the assertion that as long as in-line text links are presented in a contrasting color, users will recognize their purpose, even without an underline., i.e. that they offer reasonably close performance.

                            The author is not against flat UI; but she does recommend ways to make it work better for users.

                            (Later edit) Also of interest: Response to Criticism of Flat Design Eyetracking Study

                          2. 2

                            In all these cases there was ways to keep a flat UI, while making the interactive elements stand out more.

                            For example, on the first example they went from what clearly looks like a button to a white box on a white background with a purple border. It should have been possible to make that button flat, but give it a subtle shadow or something to make it stand out more.

                            I think it’s an interesting study but they aren’t really saying what should be done to improve flat UIs. Going back to skeuomorphism is probably not an option as it would make the UI look dated, but there has to be a middle ground that can work.

                            1. 3

                              Going back to skeuomorphism is probably not an option as it would make the UI look dated, but there has to be a middle ground that can work.

                              I think the concern (and I am not saying this was your argument, the sentence just led me in this direction) with looking dated is where the problem pretty much lies. When you look at industrial or medical products, there is an overwhelming concern with usability, not novelty. Yet there is still variety. I think that UI designers can achieve variety and aesthetic pleasure without abandoning a good idea simply because it looks old. This will probably happen naturally over the coming decades as these technologies become normal, which is why we no longer see insane steering wheels except in concept cars.

                              1. 3

                                It should have been possible to make that button flat, but give it a subtle shadow or something to make it stand out more.

                                I don’t want to “no true Scotchman” things here, but at that point it’s no longer a “flat UI”, right? I think the objection is mostly against UI elements which are truly flat, not those that are “less 3D”. I often use shadows myself, which gives kind of a “pop-out 3D” similar to the 3D UI of yesteryear, except more, well, fashionable I guess?

                                If you look at the GNOME/Librem screenshots in the another reply here, then the “3D effect” is done by using a gradient background which is slightly different from the surrounding colour, but with a solid border colour which doesn’t pop out (which is what the old UIs used) – stuff like the Bootstrap CSS theme also does it like that by default (or at least, used to do – haven’t used it in a few years).

                                Even the buttons on Lobsters which have a solid border colour and solid background colour kind of “pop out”. It takes very little to fool out brain in to thinking something “pops out”, and the problem with flat UI is that it makes no effort at all to do that. Anything that does make that effort is – as far as I’m concerned – not really a flat UI.

                                1. 2

                                  Exactly. There’s a lot you can achieve with subtle suggestions of depth without going in completely the opposite direction and distracting from the content (or just blending in; there’s a reason road signs aren’t detailed and realistic). I’m actually really glad for the cleaner interfaces we have today in general but it still needs to be done thoughtfully. There are definitely too many completely flat designs that just jump on the trend without putting any thought into why or how. That’s lazy. But a UI can certainly take elements of flat design while remaining highly usable.

                                2. 2

                                  There most certainly exists a middle ground, signifiers are on a spectrum and the example of the underlined vs. just contrasting-colored links reveals you can get away with weakening them (although underlined links is not something I’d personally recommend) and users will still figure them out. This article goes into more details on how to improve flat UIs.

                                3. 2

                                  Some of the screenshot comparisons seem to be yesterday’s vs today’s design trend. Is the fact that many users have more experience with older trends a factor I. The results of this study? Perhaps zoomers would struggle with skeumorphism, given they only know the flat glass, metal, and plastic world?

                                  1. 2

                                    The “attract less attention” is intentional, as it allows you to design for a higher range of contrast.

                                    The “uncertainty” is FUD.

                                    1. 4

                                      Can’t we design for a high range of contrast and make clickable items stand out? Both goals are worthy, and I should think we can fulfill them both.

                                      As for the uncertainty: it’s not FUD but measured, that’s the whole point of this article. They do mean ‘uncertainty about where to click’, rather than ‘feelings of self-doubt’; but I can forgive them for not finding a way to cram that into the headline. But I really must object to the FUD label, they’re very clear about what they measured and also about when the main conclusion doesn’t hold:

                                      • The uncertainty about where to find the target is directly visible in the heatmaps, where one can see user’s eyes spending more time in regions that don’t contain the target.
                                      • Users fulfilling a task on a weak-signifier webpage spent more time looking for the target, and looked in more incorrect places, compared to users fulfilling the same task on an otherwise-identical web page with strong signifiers.
                                      • One can use flat design without causing click uncertainty, and they point out the cases where this succeeded and study the circumstances.
                                      1. 1

                                        The point is to design for a high range of contrast and make clickable items stand out. This is exactly why flat design is used. The higher amount of contrast in elements (not color contrast, but simply contrast in the perceived object) is created in flat design as one way to achieve this.

                                        Are there other ways sure? Can we use them? Sure. Are they better? Probably not.

                                        The heat maps are a red herring, as they don’t show anything about whether flat design is good - nor do they even use websites that show a significant amount of decent design chops. Instead, they potentially focus on where the product designers want the user to look and conflate that with the idea of “bad design”.

                                        In short, this definition of “incorrect” may not be theirs, and their design looks like we’re in 1996 again. Not too convincing.

                                    2. [Comment removed by author]

                                      1. 2

                                        I always found it difficult to “read” those realistic interfaces, though, and in many cases the designs reduced information density in a way that I, at least, found unpleasant. For example, a list of books is better than a high fidelity rendering of a bookshelf. We could do better than universal flatness, I think, but early smartphone aesthetics are not something I want back.

                                        1. 1

                                          Sometimes the attempts at skeuomorphic design was so absurd it made the interface harder to take seriously - iOS 6 with the wood and felt card table-esque look on the Game Centre in particular.

                                          This also isn’t to mention the impact HiDPI had on using bitmap resources everywhere…