ŷ������

I’ll let you in on a secret: I don’t care much for the word “clean.�� Too often I’ve heard people �� and not just stakeholders �� ask for “clear�� and “clean�� without understanding what that means. Clear doesn’t just mean less stuff. Clean doesn’t mean empty. They mean removing what isn’t important on a page.

One glance at a complicated form is enough to drive away users with short attention spans. If you want to gather information, two of the fastest design methods are to remove clutter and add a grid. Today we’ll look at both ways to earn trust and improve conversions.

You can also build along with .

Identifying visual clutter

Visual clutter is anything that distracts from the purpose of the page. This can mean graphics, photos, backgrounds, headings, even content �� nothing is above suspicion when it comes to composing a more focused design. And the more focused the design, the more consistent you’ll be with it, as pointed out in the free e-book .

More than that you’ll be helping your conversions. Reducing clutter and choices . When it comes to forms, less is certainly more. It’s been shown that reducing a form down to four fields .

Take this page, for instance:

Photo Credit:

At first glance it’s not too shabby. I’d describe it as “functional yet uninspiring.�� Let’s break out what’s wrong:

A glut of lines try to organize space, but their high contrast goes too far and distracts from the form.
Each blue title creates white gaps between sections �� a redundant division of sections.
Elements are arranged willy-nilly, giving me an excuse to use that odd phrase.
Depending on the browser (and yes, we coded this up) the fieldsets don’t render properly.

Photo Credit:

Here’s the same form with fewer distractions.

Photo Credit:

A few steps to focusing your form design:

As you design each page in a website, ask yourself a simple question: What sets each page apart from the others? This is the purpose of that page �� the reason it exists.
Place that information on a page in an order that makes sense.
Apply branding that makes the site feel coherent, like common colors, iconography, typography, navigation, headers and footers. The site-wide stuff.

This is super easy when prototyping:

Start with form elements, and only form elements, then use additional visuals to suggest which fields belong together.
Start with what your users care about. Finish with anything that supports it.
You know you’ve achieved minimum clutter when removing a single element makes the page unusable.

Adding a sense of order

Now, not every design requires rigid rules. But if you want to make information easier to digest �� think forms and persuasive marketing websites �� then you must add structure without adding clutter. That’s where grids come in.

Take another look at the revised form. There’s more than generous white space going on: implied lines carry through the entire form, regardless of section, to tie everything together.

Photo Credit:

Most elements fall along the same set of lines �� implied lines, because they’re made of empty space. Using the same alignment throughout a design creates an unspoken sense of cohesion. Like they all belong together. Like they were planned. You can trust us with your $299 because we know what we’re doing.

With a grid, there’s no need to guess: the answers are spelled out in columns and rows, or vertical and horizontal rhythm.

Going forward

Eliminating clutter is simple but not always easy. Letting go of your favorite visuals �� well-crafted icons, the delicate and subtle backgrounds, and all the stuff that was fun to create �� takes a good deal of self-discipline. But as many designers will tell you, eliminating the extras will result in a stronger final product. Less is always more.

A nice way to streamline your design, of course, is to prototype them first. Feel free to practice what you’ve learned here by starting a with UXPin.