Designing the Dreaded Form: Getting Creative

In my first article “Designing the Dreaded Form” I discussed planning your forms ahead time by selecting proper UI patterns and handling the dreaded long forms. But the generic title for the article completely left out the “design” part of the form. Although planning ahead is a hugely important part of any design process — the focus on the previous article, this article aims directly at the visual design aspects of the dreaded form.

I still do hate designing forms, there really just isn’t that much you can actually do with them. Or so you think. The fact really is that forms just get neglected, they are just an after thought. This neglectful practice we all have happens for a couple reasons:

• The elements are boring and restrictive
• Forms are difficult to develop
• And we simply just forget to mock them up

Really, that was the aim of the last article; to get all of us thinking about the form more before we jump into Photoshop and start designing. But now that you’ve started thinking about it, it’s time to be creative and figure out a way to spice up the dreaded form.

After you’ve blueprinted the form structure, figured out how you want your layout to look and feel and optimized it best for your users, it’s time to dust off the basic design elements and start applying them to the little text fields and buttons. Essentially, there is a couple of basic principles that will help you spice up that form and maybe even get users to sign up.

It also doesn’t hurt just to be flat out creative — consider your forms to be an extension of a 404 page and try to apply the same brevity and creativity you would for your error page (the other highly neglected page of any site).

Guide and Entice with Line

Standard forms are not only boring, they just kind of sit there and don’t get the user excited about filling them out. Forms should not necessarily be enjoyable, but they should be directional and enticing to the user so that the user will be guided through input by input. Input boxes by nature have sharp, straight lines so don’t be afraid to frame them with curved lines or accent them and guide the user through the form with some implied or psychic lines.

Contour lines (edge defining lines) and dividing lines (the space between) can be really effectively used to guide the user from one location to the next. Visually it’s important to move the users eye quickly from one form element to the next and by properly aligning the form elements you can effectively guide the user through the form.

Spice It Up with Color

Sometimes it’s okay to go color crazy on a web design, and really the form probably shouldn’t be one of these pages. You do want your form to be readable and you don’t really want your surrounding design to distract from the actual form that much. However, color is a great tool if done right to create focus and contrast in your form — and also spice up a drab, boring form. Add some flavor to your super boring form by spacing on some color. Think outside the “box”; change the input background color, add some borders or some highlighting — it really doesn’t take that much color to spice up a simple form.

Contrast is a very useful tool when designing forms. Contrast is great for creating focus and separating your form elements from other elements on the page. Forms are call-to-actions, they require action from the user in some way and you always want your call-to-actions to stand out and be visible, they need to grab the users attention. So use color to make your form stand out in the crowd of other elements.

Shape up Your Form

Forms are always rectangular and stale. Be more creative and shake it up by bringing in some more shapes into the overall form design. Frame out your form with other shapes, whether you simply add some curvature by using circles and ovals or if you implement some more natural, unpredictable shapes. Framing out your sharp rectangular input boxes with softer, differing shapes is also another great and easy way to create contrast and focus on your form.

Don’t be afraid to shape up your actual form elements either, there is no rule that says they need to be square and boring. Although text inputs may be hard to shake up in any other way than rounding off corners or adding a wild background image, shaking up the button shape can be an easy way to create an interesting appearance. I’ve seen some round, oval, jagged, square, triangular and oblong buttons before and changing up the shapes can be a very effective way to add some fun visual interest to your forms.

Add a Little Visual Interest with Texture

Texture is a super great way to add some visual interest to your boring form. Implied textural elements provide a great way to add some realism to your designs, they can contrast and compliment form elements really well. Even the form elements themselves can have an implied texture to them to make them even that much more interesting to the user. Texture on buttons can grab the users eye and make them feel like they need to push them.

Just Be Creative

Aside from not forgetting about designing your forms and implementing the basic design principles to your web forms, just be creative with them. Now, with that said, in some cases your client or boss may just prefer to have a simple, boring form and that is fine. But sometimes you get those fun clients that give you a little more design room so take advantage of them and be creative with the form.

Do a form that mimics a real life experience or create a form that is just over-the-top colorful or just simply dress up the form with some contrasting shapes and color. Just be creative. The web is an empty canvas so it’s your turn to add something to it — besides, most forms are just ugly, so do the web a solid and start making attractive forms today.

Example Concepts

More Resources

• Designing the Dreaded From
• Killer From Design (Slides)
• Form Design: Best Practices
• Thoughts about responsive web form design
• Web Form Design: Showcases And Solutions

Credits: Featured Image Form by Matthew Skile: Surfuzz – Sign Up Page Template