Too simple? Flat UI forms

12 November 2013

I've become quite a fan of Bootstrap for my admin web UIs. Over the years I'd been trying to build up a consistent set of admin UI patterns I could use across projects, but it lacked the flexibility, performance and polish that Bootstrap delivers out of the box with minimal effort.

Version 3 was released recently. I haven't upgraded yet, mainly because of minor technical compatibility issues.

But there's another change which I'm not yet convinced is an improvement: the new default "flat UI".

As an advocate of simplicity, and disciple of that scourge of aesthetic web design Gerry McGovern, you'd expect me to applaud the removal of gradients and borders, the replacement of skeuomorphism with bare, uncluttered minimalism

However, as Jessica Enders warns in Flat UI and Forms, there are times when a degree of aesthetic complexity serves an important purpose.

Compare the bottom of the old and new Bootstrap custom build download forms.

Screen shots of the old and new Bootstrap custom-build download buttons side by side
Bootstrap custom download buttons: old (left) and new (right). Which is more clickable?

As Enders explains, forms are all about taking action to complete a task. McGovern would argue that most web pages are about task completion, but forms differ from content pages in that the effort is highly focused with an expected instant outcome, rather than a general process of exploration and discovery with possibly no immediate end point.

It's therefore important that the visual design of a form makes it clear to the user that they are dealing with a form and that there's a specific task they need to complete now.

Gradients can improve the affordance ("clues to the operation of things") of form buttons and mark them as not just links or boxes, but strong calls to action.

The new Bootstrap form button UI might be visually "simpler and cleaner", but it's arguably less effective than its predecessor.

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." [...] With forms, however, distinguishing between a button and a link matters far more. Jessica Enders

Comments

  • Formatting comments: See this list of formatting tags you can use in your comments.
  • Want to paste code? Enclose within <pre><code> tags for syntax higlighting and better formatting and if possible use script. If your code includes "self-closing" tags, such as <cfargument>, you must add an explicit closing tag, otherwise it is likely to be mangled by the Disqus parser.
Back to the top