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.
It will. Designers will come up with a new thing pretty quickly. In that respect I guess they are probably no different than developers. Nobody likes to end the year with "yeah I just maintained this piece of code last year", instead it has to be "yeah the code the last team wrote was crap, so we tore it all out, replaced with a fancier later framework, added some features on top, etc".
Presumably people in charge of design at these big companies get paid decently, so there is some internal pressure to deliver something. So no matter how good, fast, clean the current interface, is there will be an unveiling of a "cooler / newer / fresher" interface. But I think the fundamental reason reason is most likely because of a need to create work to justify salaries.
This happens in software, in design, and probably many other fields. Managers, department heads, directors, CEOs they all play this game. Sometimes everyone in the game realizes what's happening but they just go along because it works out for them (well sometimes it doesn't work out, but then they blame the customers ;-) )
The Interface itself is a type of artwork. Like all art, it must grow and change to stay relevant, or stagnate and be left behind on the Island of Irrelevant Toys. Like many things, it's a conversation between designers, and sometimes happy accidents do get made and dark avenues are explored.
Architecture[0] is one example of a design (basically a cave) growing and changing to stay relevant and reflect current use and needs. Recent trends have been moving away from the "monolithic" styles of the Cold War Era and specifically including blocks that stick out and have a very different color.
Also, some fire codes allow the upper few floors of an apartment structure to be made from wood[1], so long as all the floors below the first few are concrete.
A user interface is a tool to connect the computer and a human user in order to allow a task to be performed. Unless these three components change, the only reason for the interface to change is to make it do its job more efficiently.
It's no different from the many other tools used by people to do their jobs. Once they reach an optimal form, they stop changing unless some drastic technological change occurs. Hand-tools for woodworking hadn't changed for centuries, until electricity was introduced. Electric hand-tools have only had small gradual improvements since then.
Well, something did change, otherwise it would not have gotten as big as it did. What changed was the role of the user in the eyes of whatever entity controlled the computer/cloud.
If the uncertainty was actually a bad thing in the eyes of the big cloud companies that pushed these designs, it would not have nearly gotten as far as it did. It's a way to control how the tool is used, given that it's powerful, making it too usable is not profitable.
And fashion is a conversation, much like software language development is a conversation - a free exchange of ideas. The same concepts are not normally repeated verbatim, but iterated around, in a specific direction, if there is an obvious direction to go - otherwise in a random walk, like a lost hiker. Circumideation.
Not sure if this is what you're trying to say but it sounds like this is just a thing that designers will hop on a new trend every few years or so.
Except that I remember a few changes in design trends and many of them were for the better, others were a matter of taste that didn't really matter.
But "Flat UI" was a step down in almost every aspect (or whatever name Google called pretty much the same thing, and so did Microsoft have a name for their particular flavour of low-poly coloured squares). It doesn't even look good (personal opinion). Indeed it was confusing, after a while we got used to it, so it didn't hurt usability quite as much, but it was never good.
Just an excuse to not learn about actual usability guidelines. And with that, excuses to hide your anti-patterns under, which the tech giants all happily do. Tiny links function sometimes as buttons but all buttons are coloured squares so basically any layout element could do something but usually not, and with a touch-interface this adds even more stress because you can never tell where you can comfortably rest your finger to scroll or zoom, if even possible, which is not indicated because the cute flat scrollbars tend to fade away if they're not in use etc etc. Nonsense!
If most of the normal interface is already uncertain in functionality, then users (or consumers, eyes, or products) will not complain as much when they make a certain action harder to perform on purpose.
We got suckered into hostile UX. So maybe we can stop doing that now.
I have always hated this fashion with passion too. For me it makes UIs less aesthetically pleasing and harder to use.
One of the reasons why I still use Windows 7 is that I like its 3D transparent glass-like look and utterly hate the flat design of later versions which I would call soulless and ugly. And the UI elements are harder to distinguish for me.
That being said, many people do like it, and I am not aware of any studies about how many people like it / don't like / don't care in general.
Fortunately for us flat UI haters, that horrible design trend will go away the same way it came - as a fashion. Fashion by definition does not last. Sooner or later flat design will inevitability be considered old and unhip too.
The whitespace is there because people design first for mobile, then port to desktop browsers as an afterthought. That's not going to change any time soon.
I remember a admin at a company giving me a before and after on some tool- where the fat-finger-friendly UI reduced the presented information and thus the usefulness off the tool to basically zero.
The introduction of copious amounts of whitespace is a very common design tool that is not limited to just websites. Have a look at an average art gallery or museum and you will know what I mean. And there's a reason why using whitespace is a good thing, as outlined in this article[1] for example.
People used to design for desktop first, then port to mobile as an afterthought. Originally, there was only desktop, and mobile was a completely different and separate thing. Then mobile got more capable, and by necessity (since everything was designed for desktop) mobile tried to be a small desktop.
Mobile was limited, and trying to be a small desktop didn't work out that well. So people switched gears and said "Well, let's treat everything as mobile first, and let desktop adapt because it's more powerful." So we began the mobile-first trend.
But in the meantime mobile has gotten much more powerful and less limited; today many mobile devices have higher resolution and more powerful cpus than the old desktops had. The screens have also gotten a lot larger than they were when mobile-first started.
So, I think we'll either wind up with a "tablet-first" trend, designing for the middle-ground and making both the smaller mobile and larger desktop adapt, or we'll go back to recognizing that mobile, tablet, and desktop needs are different and we'll design accordingly for each, but now with a better understanding and better toolset for minimizing the redundancy that can occur with split designs.
Windows 2000 was the holy grail of Windowses. Stable, could play games, classic UI. XP was just a paint job that had more weird defaults to change back to classic.
Well there I was, thinking that maybe rejecting the free upgrade might have been a bit petty after all. I'm not a big hater of flat UI but phew, Windows 10 is ugly. Flat UI should have high contrast but with a feeling of lightness. For some reason Windows 10 went for a super dark palette: black, magenta, navy, blood orange etc. Sorry, not for my workstation.
On the other side of the spectrum, plenty focus too much on being neat and consistent that they become greyish, bland and sacrifice usability. Good ones use colours, shadows and placements wisely so that navigation does feel lighter and the experience is more content-focused.
Excellent ones do all that but without burdening the audience with that nasty aftertaste of pretentiousness.
Learn the rules, then break the ones you can't agree with. It's the designer's privilege to be able to do this more often than developers can ;)
Churn makes things seem dated. After you see too many screenshots of it, the MS Office ribbon seems like today's thing and a plain old menubar seems dated. Could someone show me something that makes the ribbon seem dated? Nagel paintings seem dated now, but seemed hip back in the day, nestled between the ads for theaters showing Breakfast Club.
I really dislike that flat-design has destroyed the use of gradients, I think buttons are much nicer when they look 3d.
But flat design did spread the importance of contrast, simplicity and subtlety, not to mention using animations to convey meaning, which do wonders to make apps and the web look much better.
I think as we move forward elements of flat design and traditional UI design will merge into a new set of popular guidelines - hopefully they'll contain 3d looking buttons :)
>[…] not to mention using animations to convey meaning, which do wonders to make apps and the web look much better
I'd argue most animations today degrade the user experience because they're not done right. Typically, animations have too long durations, transform annoying properties, catch my attention when they should not, and too often just make common interactions more time-consuming, laggy and hence painful. If I could selectively disable CSS animation/transform properties in Chrome, I'd do it in a heartbeat.
Many gradients look gaudy to me these days. You don't need phong shading on your buttons, a slight bevel using a darker and lighter shade are enough to draw my attention.
That is not to say I like flat design, I dislike 'faux curvy 3d' design. Clean lines can be combined with depth perception. For this, very small gradients (i.e. to soften edges) make sense, but these are gradients that ought to be very small. On this 14" laptop I'd say at most 1mm.
Read the headline and thought the same first sentence. It's about dang time. Flat UI was an 80s thing because that's all we had. Put shadows and highlights on your frickin' buttons! Just because everyone went a little (or a lot) overboard with skeuomorphism doesn't mean that it's cool to just put a grey-on-darker-grey " " by a thing and expect everyone to know where the tap target area for that is. It's almost as bad as apps where you have to "pull out" from one side to get at other functionality with no indicators that this is a thing.
> I am not the only one who got rants about the flat UI. It really should go away.
The article is poorly titled. The issue is not about Flat vs Non-Flat. It's about emphasis of elements in a flat context. The article highlights "flat 2.0" as a better choice given that it uses 3D shadows.
Just the ever-increasing abandonment of contrast in general. There's so many off-white on white, or light-grey on slightly-lighter-grey designs out there that might look nice in a certain lighting condition indoors with perfect eyeballs viewing it - but for 90% of other times the content is just totally invisible.
Colorless icons do have some merit though. You should always design your icons in a way that an outline is a good indicator and that a greyscale version works too. Relying on color to convey meaning is hostile towards the colorblind. I have had several users complain because we have used red and green lines to indicate correct and incorrect connections.
> Relying on color to convey meaning is hostile towards the colorblind
Making it equally hostile to everyone is not necessarily a better alternative.
It's possible to design colour schemes that are suitable for colourblind users. Going colourless is not the only solution.
> You should always design your icons in a way that an outline is a good indicator and that a greyscale version works too
Unfortunately designers don't always do this - even supposed design-centric stalwarts like Apple screw this up. The icons in the Mail app for macOS always make me end up spending a fraction of second figuring out which one is which (new mail vs get mail, and archive vs trash vs junk).
One reason I don't like to use alternative icon themes most of the time is that they rot easily. If the theme developer does not keep up with the application updates it will lack elements. Since themes are usually free or for a single low fee, this will happen probably as soon as the theme developer stops using the application.
Not only that, but WinPhone had an extremely consistent design language. There was almost zero wiggle room for designers to style their apps individually. This was necessary to make sure that a button looks like a button even without bevels.
The modern mishmash of anything-goes design with flat styling makes modern uis inscrutable.
Because there's nothing wrong with the traditional UI design with pop up and shadow. Why introduce another ultimately flawed design that is subpar than the previous one? It's been over 15 years since it's initially introduced by Microsoft, and I still see the usability problem here and there today. 15 years seems like utterly long time to finally prove that it doesn't really work, does it?
The same argument goes to the LCD monitor aspect ratio 16x9 vs. 4x3. The former isn't any better than the latter. In fact, it has 19% LESS of screen real estate of the same screen. The only reason we all now use the 16x9 is because the mfg needed another standard in desperate to push sale because a good LCD monitor can last a very long time than the traditional CRT.
For movies you need even more extreme ratios, 16:9 is a compromise that suits nobody. A4 or Letter with some extra on sides is better for most productivity.
Care to elaborate? Sure, manufactures could’ve done 21:9 (roughly 2.35:1), but from what I’ve seen, that wasn’t practical at the time. 16:9 was a good compromise. Especially for people who stretch 4:3 SDTV content into 16:9 instead of using black boxes; 4:3 content would look horrible on a 21:9 display. Nowadays though, 21:9 is becoming popular, and it has a ratio of 2.333:1 which is pretty close to a cinematic 2:35:1. If only Windows made snapping three windows side by side easier.
I've been saying this ever since Jony Ive has bastardized my beloved iPhone starting with iOS 7. Apple went from being a leader to a follower - of Microsoft! Sad to say that, today, Google's UIs are far more usable than Apple's. Less hidden tiny icons too.
Steve Jobs and Scott Forstall had a huge advantage, they only had to care about a 320x240 (and later @2x) canvas. Crafting backgrounds and textures is easy if you know the pixel resolution, however now with multiple sizes and high dpi screens, what you want is a flexible and adaptable UI. Flat design makes UI development easier. This does not excuse using simple labels instead of buttons but iOS 10 has backpedaled quite a lot on that.
I've been working on several third-party apps from iOS 4 to 10. Flat design (as implemented in iOS 7) hasn't really made development easier. Most iOS 6 apps weren't even crazy about textured backgrounds [1] [2] [3]. Mostly it boiled down to designers giving us a PSD that we would slice into handful of resizable textures for UI controls (like Android nine-patches). It was a bit like table-based HTML design, but in a good way, as the framework completely supported it.
Then iOS 7 killed textures, but introduced translucency to make up for its overall blandness. And that really ruined the simplistic beauty of UIKit programming, since everything now has to deal with all the band-aid that is needed to make views extend below translucent bars (layout guides, edgesForExtendedLayout, automaticallyAdjustsScrollViewInsets, ...). Here's a random example of how translucent vs. opaque bars can cause trouble. [4] We've traded a few minutes in Photoshop for hours of wrestling with UIKit's undocumented heuristics when it comes to layout code/transitions.
> Steve Jobs and Scott Forstall had a huge advantage, they only had to care about a 320x240
Honestly this isn't a big deal it's massively overstated. OS X managed to pull of Aqua and MS managed to pull off Aero both with arbitrary UI sizing.
I feel this point is only stated by people who came to UI when they only had to worry about 1 size and then were shocked at the idea of treating the UI as anything other than a Photoshop flat.
Arbitrarily resizing the iOS6 podcast app would be a challenge. Indeed many applications would be quite easy to adapt, but on iOS6 and prior some of the applications used quite unscalable elements. For example the notes app with a lined notebook would be a pain to adapt if you could arbitrarily scale fonts (which you can since iOS7 or 8).
The difference is also (I think) the average size of teams which made the apps. iOS has started the boon of one developer per app. Before it was of course done, but the scale is not comparable.
When iOS7 first booted up I honestly thought it hadn't installed properly, that I was missing button graphics and background textures. The app store design was a joke, with no defining separation between elements, everything plain white, it became a chore to intuitively recognise different areas.
From that point I have wanted a customisable iOS interface, where we are "allowed" to apply our own skins and themes. If people like flat design, that's fine, but it's unreasonable that the same uniform interface is forced on everyone.
I thought about the same. Apple should be the forefront of the UI game considering the design and UI always have been their strong suit. With that said, Apple has improved upon the "too flat" UI with subtle 3D and shade that actually made the UI generally more usable. The trick is to find the right balance.
There's a distinction to be made between the intrinsic properties of flat design, and how designers interpret it.
I think the vast majority of apps/websites using "flat design" are an insult to what it is really about. Removing elements, simplifying shapes... should be done to increase comprehension and efficiency (i.e. removing noise), not to make something look "clean" or cool.
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?
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.
There does seem to be a few brutalist articles knocking around lately but I think it'll stay a niche. Most designers are actually pretty lazy (or just prone to following trends, like other professions?) and would be happy to follow any good design docs (Material Design etc) then apply their own interpretation. But with brutalist UI, since it's usually accompanied by a sort of shock factor, it requires a bit more ingenuity than just choosing a unique colour palette. It also tends to be hit-or-miss, and that's risky.
There's some noise about creating the next interface for flat screens and VR/AR (Microsoft again) which as long as VR isn't mainstream, I think it'll be more of a play (and fad.)
I also think that the ideal UI doc (may not be the next trend) combine skeuomorphism and flat while leaving plenty of space for designers to express their own ingenuity through content. At this moment, you can feel UI dictating how the content should be created and organised; all those one-scroll container webpages and humble-braggy profiles bore me to death.
But the best UI takes a back seat while content is the main performer, OR, at the very least there is a variable organic component - Google's doodly homepage fits the latter actually. This sounds so stupidly obvious to point out, but I feel that too much effort is being spent on innovating UI than the content itself. Content is far more exciting and challenging! Storytelling is often done in one medium, but what if you use several, one for each small part of the experience? What if you focus on creating multiple micro experiences? (Not necessarily animated micro-interactions.) That for me is the real task of UX designers - not just organise flow but how best to present content as a memorable story.
Very true but it's just boring. I'm shooting myself in the foot! Reading back my older post, I haven't been very thoughtful about expressing it properly; I simply think that the current trends such as one-scroll webpages also dictate (unintentionally maybe) about what kind of content should be put on and how they should be presented, resulting in many websites that look the same and feel the same. This is a shame because the great differentiator should be content.
That's what flat was though. A return to the good old days of plain, simple UI that looked like what it was. I sure as hell hope we don't go back to rounded corners everywhere.
It didn't "look like it was", though, that's the problem. Buttons that are flat look exactly the same as any bordered element, e.g. text inputs. Or, at the very least, they look a lot more like them than they otherwise would.
Flat design was just a trend, partly as an overreaction to skeuomorphism. It was a case of 'looks' design overtaking 'usable' design, for no very clear reason; at least, no reason I can see.
Buttons were 'best' when they were 3d and button-shaped. That still leaves a huge amount of customisation for designers to work with, but those two very simple factors should be maintained when producing buttons, IMO. There was a very common understanding that buttons looked that way.
Skeuomorphism ceases to be useful once people don't remember the physical thing you're trying to use. 3D buttons aren't actually that helpful to my generation: a lot of the buttons I've used in real life (e.g. those on my microwave) aren't 3D. On a computer the most common button-like thing is a web link and those don't (generally) use the 3D-effect. 3D is one way to hint that a particular element is clickable/tappable, but not the only one. Of course if you want a really scream-in-your-face button it should probably be 3D and a contrasting colour and larger and underlined and ... - but my feeling is that good UI doesn't mean making the call-to-action as attention-grabbing as possible, it's better to have a sense of proportion.
(thinking about it more, the most important thing - and the thing that's backed up by solid science - is to use text rather than icons for button labels. I really hope that stays, even if we go back to 3D and rounding)
>Skeuomorphism ceases to be useful once people don't remember the physical thing you're trying to use. 3D buttons aren't actually that helpful to my generation: a lot of the buttons I've used in real life (e.g. those on my microwave) aren't 3D.
That's probably a bad design on the part of the microwave maker. We still use tons of 3d buttons everywhere, and everybody is familiar with them.
>On a computer the most common button-like thing is a web link and those don't (generally) use the 3D-effect.
Links take you to a different view (page, whatever), without affecting any other state.
Buttons perform actions (that might also present a new panel).
The problem is bad UIs muddling the waters between the two (having a plain text "label" looking like a link that does "Delete everything in my account" for example).
This fits with the convention that, generally speaking, links generate a GET request and buttons generate a POST one —
javascript & the odd GET-form-for-searching aside. Of course, webapps have seriously muddied the water!
We haven't abandoned all of the old icons yet, though: a disk for save, an envelope for email, etc. And I think you're underestimating how much physical 'buttons' are still a part of everyday life: you might well be typing on what is essentially a huge array of buttons, after all.
> 3D buttons aren't actually that helpful to my generation: a lot of the buttons I've used in real life (e.g. those on my microwave) aren't 3D. On a computer the most common button-like thing is a web link and those don't (generally) use the 3D-effect.
Those are good examples, and got me thinking about the first hypertext system I used when growing up: AmigaGuide. That did use "3D buttons" for links: http://reality.cm/aguide.htm
> Skeuomorphism ceases to be useful once people don't remember the physical thing you're trying to use
The idea is interesting but it's disconnected from reality.
Change in the physical world is very slow, bet young people will still know what a watch or any everyday life item is in ten years (way more than the average software life). I understand that some people would find an UI for a music player with some photorealistic speaker or a fully wooden bookshelf library ugly but don't tell me people (old and young) don't know what it is. Or more far fetched I could still understand medieval fort icon on a firewall. I admit some are already forgotten like the floppy disk but they are an exception.
When were those days? We had 3D buttons since the mid-eighties at least (SGI's UI, Motif/Athena, etc).
And that was what the majority of the world was familiar with since the mass explosion of desktop UI users with Windows 3.1. (And even the old mid-80s Mac OS had 3D-ish buttons and such).
Not knowing what is text and what is a link just kills me. We went through lots of this in the webs early days. We had icons for navigation and experimental flash navigation. But it made for mystery meat navigation - and in the end we returned to text. Now it's all gone full circle.
Yup, I remember a band website (Morcheeba) in the 90s had no underline in the links, thought "what the hell?!", was the first time I saw something like that, and I hated it.
To be honest what they did with early versions of Windows Phones was pure genius. If I miss anything now that I use iOS, is the UX that Metro design provided. What made the UX shitty was when they decided to follow Android and iOS path, with hamburger buttons, buttons at the top, lower contrast... They stopped following their core UX ideas to comfort the users of other OSes.
Regarding PC market. I assume Windows 8/10 could be good, but we were too used to existing workflow, so it felt really weird when it came out. They should gradually introduce what Windows 10 offers today.
I agree Flat UI can be terrible if not done right, but so can be every other design.
Maybe genius, though definitely eccentric and appealing to a small minority. For me, WP became bearable, even elegant in some sense, when they introduced fully transparent tiles so that I could put some nice picture underneath and not look at those single-colored squares everywhere.
One problem with the 3D design is: it looks really silly when viewed from upside down. This is not a problem on desktops, but on tablets and phones it can be.
Having a fixed "light position" at top / top-left isn't the only way of getting a mild sunk / popped effect. Using internal and external shadows can get much of the same effect in a way that doesn't have a fixed direction.
Good point. But external shadows pose a problem: pixels outside the original bounding box of the element need to be painted, and may overlap with other elements.
Definitely believe Apple had been exploring sensor driven UI effects if you follow the signs like this patent [0]. Wouldn't have been shocked if they'd had a prototype with the whole UI doing it around iOS 4/5. But only the Music.app volume knob part shipped (iOS 4 IIRC the brushed metal on the knob had a tilt based lighting effect).
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)
I am in my mid-twenties and some of these issues I too have them. I mistakenly tap thing I didn't mean to a lot of times, especially when walking or on public transit. Guessing what is a button or not, or when it is one what the icon means involves ontology. I hate guwssing what swipes do and Idk how am I supposed to grok that one time silly tutorial and remember how to use the app again two weeks later.
If the native UI toolkit is a language the my phone is the tower of babel. And I hate that with passion and fury.
Well, going forward I think it will be more commonly referred to as a menu icon rather than a hamburger icon. It's almost pervasive on phones now. Do you think the stacked dots are better than stacked lines? A mini-menu icon? It's helpful to have some small icon for the menu on mobile devices so it doesn't take up as much screen space. What is a better alternative?
Personally, I turn off icons in apps that allow me to, and stick with words. Mobile is sort of a user experience hell for me; touch screens just don't seem to work reliably.
Indeed. The one with the advanced degree specialized in UI is the designer, not the user. If the designer doesn't use that training to help the masses do their jobs, the resources Society spend on training the designer go wasted.
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?
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...
They have a hypothesis that states that users will be able to accomplish their task with less effort given strong signifiers.
They tested the hypothesis with two versions of the same page: one with weak signifiers and the other with strong signifiers. Both versions were created to _test_ the hypothesis. To either confirm or disprove the hypothesis.
They measured user eye movement activity and produced heat maps.
The heat maps confirm their hypothesis. With weak signifiers the users spent more time searching for the elements they wanted.
How is this not scientific?
Like all good science the conclusion is not 'flat bad, skewmorphism good.'
No, it says whatever you are doing ensure you provide users with signifiers.
So the final result is not a false dichotomy of flat vs non-flat but a useful set of guidelines: "Early pseudo-3D GUIs and Steve-Jobs-esque skeuomorphism often produced heavy, clunky interfaces. Scaling back from those excesses is good for usability. But removing visual distinctions to produce fully flat designs with no signifiers can be an equally bad extreme."
Maybe they did choose things to confirm their hypothesis, but these aren't some mom and pop shops nobody recognizes, these are international well known brands - Hertz, Barnes and Noble, Nest etc...
If you read the entire article, you can see that the point was not Flat UI is bad, but rather Flat UI done bad can strongly hinder UX.
It makes no sense to just pick sites at random, you want to check the extremes so the evidence will be significant. To put it another way - you choose the most obvious candidates so that if you end up without a significant difference you can be positive that the hypothesis isn't correct. Following research can be more nuanced.
Right, they aren't "nobodies", they are a shop with a long history of creating biased experiments to validate their initial assumptions. There's a LOT of material available on the net regarding their "methods", a simple google search will do.
No, it's not ad hominem. It's me expressing my dislike of the Nielsen Norman Group. They have contributed to the state of the art but they also tend to overblow their claims - famously they said "people don't read on the internet" which is absurd, a slew of more serious research on the subject shows how reading and scanning patterns are not substantially different on screen or in the press, and that users on the internet tend to read MORE than people reading newspapers.
Not to mention the fact that we're interacting in a text only site...
Third, what I've done is not "twisting your words" but connecting to your reply using it as a jump off point. I don't remember the name of that rhetorical figure but it's pretty common.
All in all I don't think there's anything you should be taking personally unless you have some vested interest in the author of the article (haven't checked, are you the author?)
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.
> "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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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 .
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.
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.
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.
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.
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.
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.
"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.
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
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.
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).
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.
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?
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".
> 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.
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.
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!
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!
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.
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?
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.
> 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?
> 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.
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.
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.
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.
Link to Flat design: https://en.wikipedia.org/wiki/Flat_design It was indeed first introduced by Microsoft with the name Metro Design.
Microsoft is moving away from the notorious Flat UI to Fluent Design: http://www.firstpost.com/tech/news-analysis/build-2017-micro...