Flat UI and Forms

This article is about two important four-letter words that start with “F”: “flat” and “form.”

Article Continues Below

Though some decry flat user interfaces as pure fashion, or the obvious response to skeuomorphic trends, many designers have embraced the flat approach because the reduction in visual styling (such as gradients, drop shadows, and borders) creates interfaces that seem simpler and cleaner.

The problem is that most flat UIs are built with a focus on the provision of content, with transactional components (i.e., forms) receiving very little attention. What happens when flat and forms collide? User experiences can, and often do, suffer.

Forms matter#section2

When I say forms, I mean any interaction in which information is exchanged to receive a product or a service. This includes everything from internet banking to mobile commerce, from signing up to use a new tablet app to running a web search.

User needs for the design of forms can differ greatly from user needs for the design of content, as summarized in the table below.

Forms Content
Task completion Exploration and task completion
Users are “field focused” Users are not “field focused”
Often only one entry and exit point Many possible entry and exit points
Concepts of “success” and “failure”
are strictly defined
Concepts of “success” and “failure” vary
Often used only once Often visited many times

Foremost, forms are about task completion. I’m sure I’m one of only a handful of people in the world who actually check out forms for fun; every other (reasonable) person just wants to fill out the form to get their car registered or buy those shiny new shoes. With content, however, finishing a task isn’t always a priority. Sometimes, we just want to browse without a specific end point in mind. (Wikipedia, I’m looking at you.)

People approach task completion in ways that differ from such exploration. Observe a person filling out a form, and you’ll see they “zoom in” on the fields, referring to instructions, tips, and even the field labels or questions only as a need arises. There’s an order: a place to start and a place to finish, and at the finish point they (usually) know whether they have succeeded or failed.

Content, on the other hand, can often be accessed via any range of paths and sources, and people move around and focus on that content in various ways. The idea of success is still relevant, but it shifts because of the diversity of use cases.

A focus on task completion also means that a user is likely to fill out your form only once, whereas the related content may be visited many times. Consequently, there is scant opportunity for a user to learn a form’s visual language (e.g., that there are no buttons, only links).

Flat equals less information#section3

So forms and content are distinct. What does that have to do with flat UIs?

The problem is that in the push for simplicity, flat UIs may have gone too far. With content, things like drop shadows, gradients, and borders may well be no more than useless “embellishments.” When we read a multi-page news article, it doesn’t matter much whether the mechanism to move to the next page is a button or a link. With forms, however, distinguishing between a button and a link matters far more.

Take the example of a form’s “submit” and “cancel” actions. Clearly these two actions have very different results, and we want users to quickly and easily use the one that meets their needs. This is why I and others—including respected designer Luke Wroblewski—recommend presenting the primary action (submit) as a button and secondary actions (cancel) as links. The visual design doesn’t just provide aesthetics, it communicates the difference in functionality and relative priority.

The Klout form below, on the other hand, demonstrates the loss of information that often happens with flat UIs. Placing “cancel” before “submit” is a pretty nasty dark pattern, but let’s put that aside for now. The flat UI approach styles both the primary and secondary actions as links—with the same text color and background—which slows users down, as they have to pay more attention before acting.

Imagine how much more usable this form would be if the difference in actions was communicated through the visual design (again, putting aside the dark pattern):

The three biggest ways flat forms fail#section4

The Klout example above nicely demonstrates the three largest ways in which flat UI forms often fail to deliver user-friendly experiences:

  1. Lack of affordance (affordance is how much the design of an object—physical or digital—suggests use, like a chair inviting you to sit)
  2. Insufficient distinction between form elements (e.g., fields versus labels versus instructions versus buttons)
  3. Insufficient hierarchy within categories of form elements (e.g., primary versus secondary buttons)

The Klout “cancel” and “submit” actions lack affordance because their designs don’t invite the appropriate interaction. They would look clickable if they had the shape of a button (they are actions, after all) or were at least underlined (the conventional affordance for links on the web).

Form elements are also not well-differentiated: the only thing visually separating clickable links from non-clickable text is the text color.

When it comes to hierarchy within links, the Klout example is particularly interesting. 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). But other than this subtle distinction, the two links have exactly the same style. Yet they are not equivalent (regardless of whether you view the form from Klout’s or the user’s side).

So how do you avoid these pitfalls while maintaining a flat UI? The trick is to add just enough visual treatment to convey affordance, form elements, and hierarchy. You can do this by focusing on the most important elements on your form: fields and buttons, which are the core of form interactivity.

Tweaking the design of your fields and buttons#section5

You’ll go a long way to making your flat form usable if you make your fields look hollow and make your buttons look raised. Such design provides affordance and differentiates form elements.

The screenshot below, of the Lowdi speaker purchase process, shows what happens if you fail to do this. The design of both the quantity field and the buy button are so flat, they don’t invite the appropriate interactions. Without careful inspection, users won’t realize that they can change the quantity, and will struggle to find what to click to proceed to the next step.

Here’s how to distinguish and give affordance to fields and buttons:

What to do How to do it
Make fields look hollow
  • Give fields a border or inset shadow, even if only 1px wide
  • Eliminate background color
Make buttons look raised
  • Include drop shadow, rounded corners, gradient, or border, however slight or subtle
  • Use a background color different from that used for both the page and form fields

Fixing fields#section6

Let’s look at a before and after, focusing first on fields. The mobile sign-up form for Hipstamatic’s Oggl starts with the first screen below. Finding the place to tap in your email address is like an Easter egg hunt (but not as fun). Compare this to the alternative designs I mocked up, shown second and third. The second design simply adds a border around the field, setting it as a distinct element. The third design includes the border and removes the page background from the field. Using the form is now seamless. Both alternatives have a flat UI, but significantly better affordance—especially the third version.

When Facebook released graph search, it discovered the hard way how important it is to have fields that appear hollow. Originally, the search field had no background color (i.e., it was the same blue as the header bar). The result? Rafts of users unable to find the feature. After testing four different versions of the graph search field, Facebook found that a white background and a slight inset shadow—i.e., a field that looked hollow—was the most effective approach.

Balancing buttons#section7

Here’s another before and after, now with buttons.

In the real estate mobile search example below, we have the original version on the left and an alternative—and I suspect, more usable—version on the right.

In the original design, the button was so flat it could easily be confused with a heading, footer, or other content block. Reducing the button’s width from full screen and adding rounded corners gives it greater affordance (while still having plenty of area for touch).

Primary versus secondary actions#section8

Finally, don’t forget to style primary actions differently from secondary actions. There are two ways to do this:

  • Use buttons for the primary action and links for secondary actions
  • Use more prominent styling on the primary action button, relative to secondary action buttons

As an example of best practices, Fiverr uses links for secondary actions on its sign-up form.

And for further improvement, Riki Tanone demonstrates how to distinguish primary and secondary buttons in his blog UI template on Dribbble.

More information equals better accessibility#section9

You may have noticed that a more usable, intuitive flat UI form involves some degree of redundancy. It’s often not just one visual design component (e.g., color) that communicates difference. Instead, it might be color and shape, or color and size.

This redundancy makes the interface accessible to a wider range of users, as the design doesn’t rely on the user being able to perceive or understand the one visual distinction that informs the type of interactivity.

Color is a great example. Approximately 12 percent of the population has vision with some color deficiency. 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.

Compare this with the recommendation that I, Luke Wroblewski, and many others make, that required questions should be marked with a red asterisk (as shown on the left). Here, both color and shape communicate to the user, so that the form is still usable by those with color-deficient vision (who might see it as shown on right).

Best of all worlds#section10

As designers, we want to create great user experiences through simplicity and clarity.

What is simplicity and clarity? It’s the user knowing exactly what to do, and how to do it, with a minimum of effort. Achieving this kind of user experience means finding the right balance—not just going flat for flatness’s sake.

When it comes to forms—frustrating experiences even at the best of times—it means knowing that less isn’t always simpler.

75 Reader Comments

  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.

  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.

  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.

  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.

  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.

  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.

  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.

  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

  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:

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

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

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

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

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

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

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

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

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

  19. @[url=http://alistapart.com/comments/flat-ui-and-forms#335583]Dane Troup[/url]… AMEN!

    Said nearly the same thing in response to [url=”http://www.nngroup.com/articles/tablet-usability/”]this article[/url] 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. ([url=”https://twitter.com/toddlevy/status/364461744724258816]#[/url])

    — [url=”http://www.toddlevy.com”]Todd Levy[/url]

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

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

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

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

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

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

  26. 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 http://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!

  27. @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 ¯_(ツ)_/¯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  42. I could not add my picture in my profile.I will be gratefull, if someone tell me how I can change my profile settings.

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

  44. 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!).

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

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

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

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

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

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


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

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

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

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

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

  56. Your informational post is good one to read and i think it can easily to reach the correct market place. This post got my brain going in so many directions that my comment turned into a blog post, In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it. Khelomcx.com

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA