Flat UI and Forms

by Jessica Enders

74 Reader Comments

Back to the Article
  1. This article perfectly sums up everything I thought really obviously wrong with this flat fad. Though I fear it may last longer than a fad.
    Copy & paste the code below to embed this comment.
  2. Hi Jez, it’s hardly a fad when the end goal is to make things simpler and easier to use. Ask yourself this…why do so many people love Ikea furniture? Because it’s simple and elegant. Flat UI is more than a fad, it is the evolution of ux/web design. If there is one thing I’ve learnt about the Internet, it is this…if you want to be a part of it, you have to embrace change. Otherwise you get left behind.
    Copy & paste the code below to embed this comment.
  3. I believe Daniel has a valid point. Although, i thought Flat UI was a fad at the beginning. I believe now its something we have to embrace as more users love how simple its design are. On a side note, really good article. As a web dev that handles most of the back-end stuff, this really has helped my front-end skills +3.
    Copy & paste the code below to embed this comment.
  4. @Jez: Your comment doesn’t make sense to me… from what I can tell, this article sums up what is wrong when flat is done _poorly_. And that’s not a fad, poor design is possible regardless of whether it’s flat or not.
    Copy & paste the code below to embed this comment.
  5. The lack of contrast in flat UIs also affect accessibility. Look again at the Hipstamatic and Klout examples. The use of grey text on colored backgrounds will make these difficult to view in glary environments or for those with limited vision.
    Providing contrast,  by color or shape differentiation, is going to make your forms easier to use.
    Copy & paste the code below to embed this comment.
  6. Have to agree with Daniel that it’s not a fad, especially since even users seem to embrace it. I think the problem starts when it’s taken a step too far like in some of the examples above and even in some cases in the recent iOS7 update. What we need to keep in mind is that there was a reason that buttons were designed to look like physical buttons and this was that users were originally familiar with these before they were used on the web. So completely removing this metaphor from interfaces could confuse users. The way I see it is that the first interfaces looked more like physical interfaces to facilitate usability but recently we’ve seen a shift towards traditional print design. Unlike print design though, UI requires user interaction so we need to find that balance between print (flat) design and one which requires interaction. I had mentioned some of these points in a short post earlier this year.
    Copy & paste the code below to embed this comment.
  7. A very well written article, all of the advice is sound, however there is some confusion between “flat design” and poor design. Trend sick designers = poor design = poor usability. Flat design is no more or less usable, than anything else. Affordance is not strictly about shadows and embellishments - that’s conventions - it’s about correctly inferring the use of an element. The examples Jessica uses are poorly implemented design, that have given fashion a higher priority than common sense. The Facebook search didn’t need to look like a database field, but it needed to be noticeable and have some kind of clue that you can type in it. As Jessica says “knowing exactly what to do, and how to do it”. That can be achieved with shadows, shine and green felt effect or it can be achieved with solid colours and text links, depending on the skill of the designer.
    Copy & paste the code below to embed this comment.
  8. nice article!
    great way to show how we should care about the end user and thus make the project more accessible to everyone.
    I myself have had much trouble with colors and know how it hurts us.
    congratulations for the article! =D
    Copy & paste the code below to embed this comment.
  9. Great read. I just heard Geri Coady give a talk on color contrast where she spoke about using the word “required” instead of an asterisk “*” because people often miss this. I’ve often wondered about this, but haven’t done any testing myself, but it definitely makes sense that having “required” makes it so much easier for a user to understand. On the topic of flat UI, ultimately I feel there’s a time and place for it, but it all depends on what we’re trying to achieve as with all things. And since color contrast was brought up here are two tools I love to use to check that:
    http://www.snook.ca/technical/colour_contrast/colour.html
    http://leaverou.github.io/contrast-ratio/
    Copy & paste the code below to embed this comment.
  10. Brilliant article, Jessica. You and I must be the two people who fill in forms for fun.
    Copy & paste the code below to embed this comment.
  11. This article perfectly explains why I’m having so much trouble with the latest iOS. Everything looks alike. There’s no sense of hierarchy. That may be because of flat design (or as one commenter said, bad design) but it makes using some of the apps, particularly the calendar, problematic to use effectively.
    Copy & paste the code below to embed this comment.
  12. Excellent work, Jessica. Your tips on form design and improving UX extend beyond flat UIs. Regardless of the latest design trend or fad, there are some great recommendations here, some of which I’ve used before and I know make a difference.
    Copy & paste the code below to embed this comment.
  13. We shouldn’t redesign things flat just because we can. The examples listed here are the kind of things that happen when you do something just to follow a trend. Thanks for the good read.
    Copy & paste the code below to embed this comment.
  14. As most of the before-after examples in this awesome article demonstrate, only some minor changes often do the trick in terms of making forms (and I believe other elements too) more accessible. Although not explicitly mentioned above, the same concepts could also be applied with almost equal effectiveness to facilitate the tasks of boosting most preferred action success rates (and conversion rate optimization).
    Copy & paste the code below to embed this comment.
  15. I think when designing UI you’ve got to remember that style (be it a ‘fad’ or no) follows function. A great article. I’m not sure I agree that Cancel then Submit is a Dark Pattern, however. I think instead that the functions that are ‘positive’ or move the user forward in the interaction (eg. Submit) trend towards the bottom right, where as ‘go back’ or ‘cancel’ functions head towards the top left. In the Klout example, I’d move the Submit button to the right of the form and keep Cancel where it is, further separating the actions. It would not only further isolate two very different actions, but avoid any mis-clicks!
    Copy & paste the code below to embed this comment.
  16. I really great article which I learnt a lot from. Thank you for sharing. I agree with the majority of comments here. It’s not that flat design is a fad or poor. It’s just that it’s implemented poorly by some designers not to mention that not every single element on a page needs to be flat. My only other issue is the overuse of twitter bootstrap as a design rather than a framework/starting blocks but that’s a whole other topic :)
    Copy & paste the code below to embed this comment.
  17. A few points… I’ve used this Einstein quote before with regards to flat design, and I’ll use it again; “Make things as simple as possible, but no simpler.” - this sums up all the problems with flat design for me. You can employ the aesthetic, minimising and reducing elements to their simplest form, but as soon as you go further (and remove information), the element fails and becomes less usable - i.e. you’ve made it simpler than it should [needs] to be. As an aesthetic, it has merits like any other, but it shouldn’t be used just because others are doing so for 101 reasons. On the dark pattern thing. This isn’t a dark pattern. Dark patterns are purposeful ‘naughty’ persuasive tricks that designers use i.e. automatically adding insurance to baskets when purchasing a camera for example. The link / submit thing is just simply incorrect. The button should come first as its the action most likely to need to be used. Having a large hit area, and looking like a button is good; again because it is most likely the next thing the user is wanting to use. In terms of location, it should be left-aligned with the other inputs to reduce motor workload and the length of the saccade between inputs. On the asterisk thing, I would certainly use clear label hints over asterisks for a number of reasons. Asterisks are hard to spot, and in some instances, its just plain and simple that you need the info. Do we need to asterisk the credit card number field when purchasing something by credit card for example? Say you have 5 fields and 4 of them are required, simply label the optional one “optional”... if you have 5 fields and only 1 of them is required, then label that field… yep, you’ve guessed it… “required”. In terms of treatment, then I’d place the instruction in brackets. Say the main input label (e.g. “Name”) was black, the instruction would be knocked back a little (in grey) to differentiate it and make it noticable. Good article
    Copy & paste the code below to embed this comment.
  18. Thanks for your article, good points.
    I would add that we’re probably in the hardest phase of transition between (pseudo)skeuomorphic design and flat design. We should consider that most of our users are not designers and probably would impact a flat interface for the first time knowing nothing about the “flat design trend”. These users would need an higher cognitive effort to understand that what looked like a coffee machine button today looks like a rectangle with a label. And, by the way, a flat, clean shadow is still not a crime to make an element stand out ;)
    Copy & paste the code below to embed this comment.
  19. Hello, great article! Thanks a lot. May I ask which is the real estate app that you mention in the article?
    Copy & paste the code below to embed this comment.
  20. I like the insight gathered in this article but why do we have to call it flat design? cant we just call it good design? the examples above just show bad vs good. it doesn’t matter if there are drop shadows on buttons and fields… if its not good its not good.
    Copy & paste the code below to embed this comment.
  21. @Dane Troup... AMEN! Said nearly the same thing in response to this article identifying “flat design” as threat to tablet usability. | There is no flat design.
    | Only effective design, and ineffective design.
    | Sadly so much of the latter. (#) — Todd Levy
    Copy & paste the code below to embed this comment.
  22. I enjoyed the article and the main points you make about forms needing to be usable, not just fashionable, but I think the Klout form would fail in any design aesthetic. It’s lacking basic design pillars like “contrast”. One trend I’m seeing in newer designs is much larger type size in forms as well, which is a good thing. If this is part of the “flat” aesthetic that’s a win for anyone over 40 who is tired of looking at tiny type.
    Copy & paste the code below to embed this comment.
  23. It’s shocking just how much difference a few dozen pixels make in the Klout example.  I would love to see the Lowdi failure transformed, too.  Excellent discussion.
    Copy & paste the code below to embed this comment.
  24. @ChrisCallaghan - re: the dark pattern - the klout example is precisely naughty and nefarious. Consider the scenario - a user is trying to opt-out of a subscription to the service. The ordering of the buttons will trick users into mistakenly clicking “Cancel” and therefore render their opt-out DOA.
    Copy & paste the code below to embed this comment.
  25. It’s a great article, thx.
    Copy & paste the code below to embed this comment.
  26. The best user testers of all this are kids. I’ve observed mine play plenty of iPad/iPhone games and they’re always immediately drawn to the most highlighted button on screen—no mater what its functionality. If a UI presents them with multiple buttons that share the same weight/colour/style they’ll press them all. This is especially frustrating when ‘Start Game’ looks like ‘Delete All Progress’. I’ve watched them go to tears over iOS7 when they simply can’t figure out what they’re supposed to do next or to undo a state. An example on the iPad is while watching a movie, bring up the ‘subtitles’ settings. It’s a dialogue box that covers the entire screen and can only be dismissed by the blue text that says ‘Done’ in the top right corner. Extremely easy to miss. The button to get there is easy to spot but the button to leave is really hidden. There should always be a primary button highlighted above all others.
    Copy & paste the code below to embed this comment.
  27. Great article that points out a lot of issues with flat design. However, bad design has always been bad design whether it is flat or skeumorphic. The fact is that I don’t see Skeumorphism coming back unless we’re introduced to a new round of further products that use screens and by all measures the future will be in physical interaction via speech, gesture and ‘wearable’ tech.
    Copy & paste the code below to embed this comment.
  28. Thanks for the great article. You clarified what at times seems like subtle variations in design and made them significant.
    Copy & paste the code below to embed this comment.
  29. Great article on how to do things the right way and not just make it look perdy because it’s flat.
    Copy & paste the code below to embed this comment.
  30. To those saying that flat design and good design is the same thing, I say… what? Flat design is a style. Simplicity/minimalist in design is a very good thing in many cases, but not exclusive to flat style. And definitely not the same thing. Looking between the 1st version of iOS7 that was previews and the version that was finally released, you can see several design and usability issues that had to be addressed due to a lack of shadows, white text on light backgrounds, etc. Shadows and other visual cues do serve a purpose in making a site/app/UI more usable. Flat design struggles at times. This article is just highlighting some of the areas we need to be address if you’re going to have a minimal design AND use the flat design style. Excellent article.
    Copy & paste the code below to embed this comment.
  31. Great article, thanks!
    Copy & paste the code below to embed this comment.
  32. A great article Jessica. Flat design was a scary trend when it came on and still is. We see all these nice looking designs, but as soon as you start interacting with them, you feel the pain. However, and it’s a very important note, it doesn’t have to be like that. I believe that even with flat design, there’s nothing stopping us from designing both beautiful and usable interactions and interfaces, nothing apart from our own skills of using this new tool. I just remembered, a GREAT app that is using flat design, but is so easy to use that a kid will be able to do work with it, namely www.trello.com. If you haven’t tried it you should do so. I’m using it every day for my work and it’s so beautifully easy to use! Thanks for the article!
    Copy & paste the code below to embed this comment.
  33. @Alex (comment no. 4) is right. She equivocates ‘flat UI’ and ‘too simplistic’ or ‘bad UI’ -all the fixes she recommends are also flat. You could sum the article up like this- hey, if you’re going to use a flat UI on forms, make sure it isn’t bad UI… uhhh thanks for that tip ¯\_(ツ)_/¯
    Copy & paste the code below to embed this comment.
  34. Expected Typeform to be featured as an example here, it’s one of the best flat form interfaces I have seen yet.
    Copy & paste the code below to embed this comment.
  35. Great before and afters! I’m no friend to phony leather stitching and felt, but still have fondness for a little gloss. Maybe a sweet shadow or two?
    Copy & paste the code below to embed this comment.
  36. I think it’s important to note the logistics in the Klout form. It’s an opt-out form, which they would prefer users don’t submit. The cancel link is first because they want them to cancel, the submit link isn’t given button status because they dont want it to be prominent as they want the cancel to be primary. They don’t go so far as to button style the cancel link because that would be too blatant in their efforts at user retention, subtlety is the key here as to not come across as tricking into clicking the wrong action by making it a button.
    Copy & paste the code below to embed this comment.
  37. The crux of the issue, as far as I see it, is that borders, shadows and gradients are not necessarily just embellishments.  Windows 7 is a classic example of misunderstanding this concept, because it’s dripping with effects which used only as (pointless and cpu-intensive) embellishments. However Mac OS understands this concept, because it uses these effects to convey information—the active window has the strongest shadow, highlights and gradients make it obvious where the buttons are, borders delimit groups of related controls, and so on. What bothers me with flat design is that we’re throwing away well-understood visual conventions which actually served an important purpose. Now if exploring flat design forces us to re-invent them, then the end result of that might be a better and simpler set of conventions. Or it might just be another thing that users are forced to learn, to no ultimate benefit. Only time will tell. I find it academically interesting how, for years, all we wanted was simpler ways of defining shadows and gradients without having to resort to image slices. Now we finally have all that ... and don’t want to use it anymore! Perhaps this fashion is the inevitable result of a human propensity to reject things that are too easy. But personally, I think it’s a backward step in the evolution of interface design. And speaking as a user, it does my head in. n.b. pure self-promotion here, but I recently wrote about the implications of this design trend with respect to the accessibility of color information: http://www.sitepoint.com/cant-rely-color/
    Copy & paste the code below to embed this comment.
  38. I love well designed flat UI even if it is just another trend but I ran into some of the same issues sited in the article with my forms…and came to mostly the same conclusions. Seems like “flat” is evolving into a more useful “almost flat” design. Good stuff!
    Copy & paste the code below to embed this comment.
  39. This is brilliant writing and brilliant analysis. I think that I will apply everything you said here. Awesome job!
    Copy & paste the code below to embed this comment.
  40. Some people say that Design* is all about function. I might be wrong, but It seems that many designers fall into a trap of trying to make something look beautiful, rather than functional. Graphics may please the eye, but lack of functionality hinders productivity. However, nice graphics can be part of the Design as long as they are used thoughtfully.
    [*] I’m refering to the broadest meaning of design here.
    Copy & paste the code below to embed this comment.
  41. Great article, all fads are valid, they make up the great soup we all get to compose together. Finding the right balance is our job. Use you eyes and instinct… then get someone else’s take.
    Copy & paste the code below to embed this comment.
  42. This article portrays exactly how I feel about design and user experience. There has to be a differentiation between elements and their functionality and it has to be consistent.
    Copy & paste the code below to embed this comment.
  43. Very good points emerged from comments:
    have style follows function and everything will be fine, make things as simple as possible but not simpler, neither flat or skeuomorphic design is evil, only bad design is.
    Let me just add that mimic real life objects with 3Dish shadows and gradients may not be the only way to help users understand the meaning of things we design. Especially when real life objects are becoming mostly things we design for screen (I see a loop in here). For example, take the fieldless “write your email” input: comprehension could be enhanced by fine tuning the content of what it says like “replace this text with your email address” maybe underlined with a dotted line.
    Copy & paste the code below to embed this comment.
  44. Thanks so much for article.
    Copy & paste the code below to embed this comment.
  45. Point taken, but this is inaccurate: “If color is the only thing distinguishing non-clickable text from clickable links, as the Klout example showed, you’re immediately making things difficult for approximately 12 percent of your users.” Not all 12% are going to have the same color issues, which lowers that figure substantially, and even less when given a limited color palette (hopefully) of just a few on a site/page.
    Copy & paste the code below to embed this comment.
  46. its ironic how the article talks about user expectation, but with the way the text itself is presented. mouse over text should be that big I, but it is a cursor. i was actually waiting quite a while thinking my browser got hung up or it was still loading.  somethings need to change before preaching??
    Copy & paste the code below to embed this comment.
  47. @Arjun:
    +1
    Copy & paste the code below to embed this comment.
  48. I liked it very since it seems to be a brilliant analysis.Thanx for sharing such a post I like it much
    Copy & paste the code below to embed this comment.
  49. I been doing this for a long time. Gradients, drop shadows, and bevels are a fad in my opinion. Flat is a nice change, however I like it because it is light and can be used as graceful degradation of a heavier design —especially now that Google is paying attention to mobile download speeds.
    Copy & paste the code below to embed this comment.
  50. Thank you everyone for your contributions. I’m so pleased my article has generated this level of interest and discussion. And I agree with so much of what’s being said. Some brief responses from me: Yes, these are examples of flat forms designed badly. Problem is, I’ve struggled to find flat forms designed well. Hence my writing this article. I feel the Klout example is a dark pattern because what the user wants to do is cancel their subscription (i.e. “submit” the cancellation request) but the “cancel” button (which benefits Klout) is located where we would expect the “submit” button to be. If you’re interested in the issue of button placement, I suggest Caroline Jarrett’s excellent review of the research (http://slidesha.re/IsxBIF) and my article about alignment (http://bit.ly/176sIE9). I am the author of this article, but have no part in the design of the A List Apart website, so can’t help with the hover cursor issue. I’m sure the publishers will take it into consideration. web design POP is right about my incorrect application of the 12% statistic when discussing the impact of relying on color. However, I still contend that there is a significant proportion of the population for whom conveying things only by color will cause a problem. James Edwards has written a great post about this on Sitepoint (http://bit.ly/1gAlZIv). The real estate example is the mobile version of http://www.hockingstuart.com.au.
    Copy & paste the code below to embed this comment.
  51. Although flat is trending and may be a lasting evolution of design towards simplicity, I still deliberately follow a middle way. Somewhere between flat and ‘none flat’ as to maintain affordance and to keep those satisfying ‘clicks’ on a well made a clickable button!
    Copy & paste the code below to embed this comment.
  52. Jessica, thanks so much for this article - I agree with you pretty much 100%, and it’s delightful to see someone else saying what I’ve been feeling!  “Flat” really isn’t “bad” - as long as it’s implemented “well”  ;) Great collection of comments too - a wealth of knowledge in there as well!
    Copy & paste the code below to embed this comment.
  53. Agreed.
    Copy & paste the code below to embed this comment.
  54. It’s interesting how we all need to be reminded of the basic principles of design from time to time.  So many flat styled designs are flat. A flat style doesn’t have to be a flat hierarchy though. Thanks for the article.
    Copy & paste the code below to embed this comment.
  55. In the section, Here’s how to distinguish and give affordance to fields and buttons: Is it a table? Is it a rubric? I suggest you give your headings more affordance and make them stand out from the content of your advice. I had a hard time parsing the titles from the content. In an article focused on usability, I would think you’d pay more attention to your own presentation. Not a big deal, just a nit… Its what we do. Right?
    Copy & paste the code below to embed this comment.
  56. Great article! Super informative and useful.
    Copy & paste the code below to embed this comment.
  57. this is a great article. thanks for sharing with us
    Copy & paste the code below to embed this comment.
  58. I could not add my picture in my profile.I will be gratefull, if someone tell me how I can change my profile settings.
    Copy & paste the code below to embed this comment.
  59. Great! I agree on what you posted. Also there are even more issues with designs here. Unfortunately, a lot of examples seen here will have problems: lack of contrast, form element looking like a disabled element and so on. Also, if you create purely flat design, it’s really hard to tell if some colored area is just promoted by color or if it’s an interactive element. To communicate that, you need both color and a word that calls for action (like “Buy”). When using only icons, things get even more difficult for the user to understand. Designing in a purely flat way narrows down the choices to communicate design consistently. You simply have to use same visual cues for a lot of different things which create confusion. Form-design-wise, we should emphasize the affordances, not fade them. I’d strongly recommend all designers to do usability testing by themselves. This way you get to find the sweet spot – stay fresh by following the trends but do it in a way that doesn’t create problems for users. Visual designers would do well to memorize how native html elements look like on windows & mac, computers, devices and phones. Start working from that point of view instead of drawing a box and thinking the target users will see the connection between your box and form element.
    Copy & paste the code below to embed this comment.
  60. I happen to disagree with Jessica about the “Cancel” action being on the left and “Submit” on the right being “dark” or intentionally negative (“Appearing first, “cancel” has some prominence over “submit” (hence the dark pattern—there’s an established convention and inherent psychological association that people expect what comes first to be the most common option.”) - bringing up examples from darkpatterns.org: that’s ridiculuous! Just look at Apple’s UI conventions for one. They always have the primary action on the right — even on mobile UIs despite the fact that there is no mouse. I think it’s because we (western brains at least) tend to read/ move our eyes and actions from left to right, and it’s and ergonomical thing as well. Hitting a button or link on the left actually requires more work with the mouse because we tend to have our mice on the right side of a form or a screen (yes it’s true.. check it!).
    Copy & paste the code below to embed this comment.
  61. As noted by others before me, there’s a difference between flat design, and poor design. They are not the same thing. This confusion stems from this notion that flat design is a new trend or fad. Flat design isn’t a new thing, I’ve been doing it throughout my 8+ year career. The only people who see this as an emerging style, are just green and haven’t been doing this for very long. To be fair, it is becoming more widespread now, which I can agree with, but this isn’t some new fangled approach to design. It’s as old as the hills.
    Copy & paste the code below to embed this comment.
  62. Jessica: THank you, thank you, thank you and THANK YOU for this wonderfully written piece. I spend a great deal of time on this very issue, both with my students and my clients. When the focus is solely on a visual style, ease of use suffers. Cognitive ability is reduced. It’s just decoration. I don’t know whether it’s in attention or inexperience, but I see far too many designers adopting the flat approach and applying it in a way that ignores all tenets of good usability, user experience and, well, good design. Nothing wrong with the flat approach, and it’s really not new—but applying it without thinking hard about context of use is a recipe for disaster.
    Copy & paste the code below to embed this comment.
  63. The FB example is ridiculous - obviously going to fail. New function, that resembles nothing vaguely form like. Would like to see more examples of actual user tested forms.
    Also totally agree with the comment above that there’s a different between flat UI and bad UI design.
    Copy & paste the code below to embed this comment.
  64. Nice article, thank you.
    Copy & paste the code below to embed this comment.
  65. I don’t know if it is a fad or not but design is like fashion. It changes from time to time. And, nowadays a design methodology has a lifetime of around 1 year. Also, the design is more talked about when it is hyped the most. Microsoft came out with flat design with Windows 8. Windows phone already had a flat design. No one talked about it. All the analysis about flat designs was missing. As soon as a company (read Apple) that is famous for paradigm shifts in design comes out with a flat UI, everyone starts analyzing and figuring out what it is going to be successful or failure. It is human to start talking about things when it catches the hype. Hype can convert into a real thing that works for a long time or just a passing fad. What we need to concentrate is whether the flat UI designs are good for the users or not. There are so many elements that works good irrespective of flat or non-flat design. Users want something that is intuitive, responsive (not RWD) and tactile. If it works then great. So, focus should be on user experience rather than a design methodology.
    Copy & paste the code below to embed this comment.
  66. I enjoyed reading this article, and I agree that flat design is a fad/trend that will change, like all the other trends in design. I should say that I like flat design, but I also really like elements of skeumorphic design. They are tools in a toolkit that good designers use as and when necessary. The point I think is that people appear to jump onto a bandwagon without truly grasping the implications of using the techniques in their projects. I seem to spend my working days armpit deep in forms and tabular data, the joys of financial apps, and I cannot imagine ‘not’ using borders etc for my buttons and inputs. If you can interact with it let people know! Also, on the dark pattern cancel/save layout: In this instance it ‘is’ a dark pattern as a couple of people above have said, however as long as you are consistent in your approach there is no correct order to show them. Cancel then Save is just as acceptable as the other way around. see this Neilsen Norman post
    Copy & paste the code below to embed this comment.
  67. Users will love design if it is easy to use. So flat design have the benefit that they keep things simpler and users can easily find what they are looking for. I think presentation and style comes after user-friendliness; designs which look very flashy with many pictures but are not well-organized don’t really sell. But this is not to say that presentation should not be considered – it just means that it should not be at the cost of user-friendliness. DbaiG
    Bolee.com
    Copy & paste the code below to embed this comment.
  68. Good article! However I feel like a few others in that flat design is a trend however flat designs alone do not account for poor usability. Flat designs can be just as usable as any other design styles when done right.
    Copy & paste the code below to embed this comment.
  69. I think the affordance of a button or any other form element comes from size, good contrast, space, meaningful labeling and the right position. User Interfaces should work as a wireframe, too, which is also a flat UI design. If the UI doesn’t work for the user in a wireframe, it won’t work with “clickable gradient buttons with shadows” nor in a fad and trendy flat design. It’s just a trend or style that could be used poorly.
    Copy & paste the code below to embed this comment.
  70. Great article. Thank you .
    Copy & paste the code below to embed this comment.
  71. All the poor designed forms mentioned in the article stress over importance of ui/ux and depicts those designers’ inability to comprehend Form as conversation. And sadly most of the Flat Designers are not aware of their inability. There are some excellent Forms in Flat Design that work flawlessly, like bench.co internal forms & tribalmedia.co.uk contact form. TypeForm.com is a proof of the fact that elegant Form designing require ui/ux skills.
    Copy & paste the code below to embed this comment.
  72. Thanks for this article.  These thoughts are so often coming to my Mind when using my Android phone…
    Copy & paste the code below to embed this comment.
  73. Amazing article - A List Apart tops Smashing hands down these days. Thanks for the insight, Jessica. Now if only we could get Jony Ive to fix my OS X Calendar app..
    Copy & paste the code below to embed this comment.
  74. Love the clarity & logic - great writing. Flat design has some responsible motivators behind it (see James Christie’s “Sustainable Web Design” and his comments on putting your page ‘on a budget’.) However, with css3 we no longer have to upload images (for buttons, etc.) to make form fields look hollow and buttons look raised. The reward is more conversions at a microscopic cost in page load speed. Which begs the question: Why does “A List Apart” use simple links for social sharing? The first time I came here, I had to scan through the page 3 times before I found a way to retweet an article !  The simple links make a nice visual design but I’m sure the cost in social sharing is significant.  Web pages are like ethics - compromises are necessary to provide the best overall outcome.
    Copy & paste the code below to embed this comment.