This article is about two important four-letter words that start with “F”: “flat” and “form.”
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:
- Lack of affordance (affordance is how much the design of an object—physical or digital—suggests use, like a chair inviting you to sit)
- Insufficient distinction between form elements (e.g., fields versus labels versus instructions versus buttons)
- 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 |
|
| Make buttons look raised |
|
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.
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!
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!
Agreed.
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.
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?
Great article! Super informative and useful.
this is a great article. thanks for sharing with us
I could not add my picture in my profile.I will be gratefull, if someone tell me how I can change my profile settings.
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.
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!).
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.
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.
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.
Nice article, thank you.
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.
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
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
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.
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.
Great article. Thank you .
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.
Thanks for this article. These thoughts are so often coming to my Mind when using my Android phone…
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..
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.
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