- Lance Johnson 01.20.2016
Web forms are the Rubicon for interactions between the outside world and your business. However, the monotonous and tedious task of filling out protracted forms is a nuisance for time deprived people and visitors either resort to auto fills or simply leave the page if it entails them to fill mundane forms to continue. Yet, the irony is that getting people to fill out those forms they so abhor is crucial to the success of your business and marketing engagement, and your job as a marketer is to get the task done. A web form should be easier to comprehend and intuitive to use. However, if you put on your creative caps and spruce up those dreaded forms, you might make the job more enticing to your audience.
Web forms are the most neglected elements when it comes to designing although there is so much one can work with. After you have blueprinted the form structure, got the feel for how you want your layout to appear, and optimized the design for the users; it’s time to delve in to the basic design principles and apply them to every element of the form, down to the little buttons and text fields. Look up ways to deck up the standard form so it would leave the customers in raptures and get them to sign up.
While gleaning a downright enjoyable form is stretching it a notch (or miles), at the least a form should be directional enough to guide the users smoothly through input by input. Since input boxes have straight and sharp lines by nature, you can frame them with softer and less bold curved lines, or accent them. To guide the user through the form, you can use physic or implied lines, or even dividing lines or contour lines can visually guide the user from one location to the next. It’s important to align the form elements so that the user’s eyes would move from one box to the other effortlessly.
Since long and lengthy forms without any visual indicators can bore the user and prove to an inconvenience, make sure your web form is crisp and short and incorporate interactive visual indicators, such as icons to break the monotony. Icons visually indicate the information which is required and enhance comprehension significantly.
Texture is also a great way to incorporate some aesthetic appeal to a boring form. Implied textural elements add realism to designs and serve to complement or contrast the other form elements. Even the simple form elements can be imbued with texture to make them more enticing to the user. Textured or unique buttons can entice a user to push them, for instance. For instance, the dark leather textured form of “61 pixels” makes it stand out despite the simple layout. The web form for “Five Cent Stand” has myriad creative textures added to render it a rough hand drawn feel.
Your web form is construed as a call for action and you want it to stand out and be highly visible. Using the right colors can also create contrast and focus on your form and distinguish your form from the other elements on the page. Think outside the box; Add colorful borders around the input fields, highlight the fields, change the input background color in hover, or make the input fields pop out on click. However, avoid using loud and vivid colors and balance the total numbers of color tones; five is plenty for a single form page. When choosing the colors for the CTA buttons, beware of the universally accepted color annotations; red depicts danger, green encourages participation, and yellow evokes a warm trusting feeling.
The dark hued form of “Kgoule” contains rounded corners and a rather embossed effect. The login form of Tuts plus has clean white and gray layout with dark orange accents for buttons. The web form for “Revota.com” is dark and shady, but employs a light hover-effect to highlight the current field.
Look around you at the plethora of stale rectangular forms and analyze how you have come to associate the shape with this dreaded assignment. To prove your customers how different you are, shake it up a score and throw in more shapes when designing your form. Who says the field boxes have to be boring and sharp? Whether you simply soften the sharp corners of input fields, or go more ingenious and implement completely unpredictable shapes, framing out a sharp form with differing shapes creates a lovely contrast. Instead of having rectangular buttons, you can have square, round, oval, oblong, Pokémon shaped, minion faced, or just about any design you can think of. You can also make the buttons change shape on click for a pleasing little visual show.
The login form of “Surfuzz” is designed to resemble a surf board and the input fields are textured to look like they have been carved in the wood! “Campingilfrutetto” has a rounded contact form surrounded by tree illustrations to fit in with the camping vibes.
Some designers aspire to make the visitor feel more at home with the form by including appealing illustrations and characters. A picture can speak a thousand words! Use only high quality and relevant pictures and make sure you don’t clutter the form space. “Intuitive Designs” impresses the visitor with a picture of a hurried mailman next to the form, while Kgoule.com has a friendly buddy who invites visitors to post a comment.
It’s imperative that you articulate clearly to your visitors what information you require and how you need it. This is where help text comes in! You can incorporate ghost text in the fields to let users know what goes in there. You can even hint at formatting using the ghost text, such as using “(xxx) xxx-xxxx” in the contact number field to encourage users to fill the field in the specific style. With more intricate forms, you can include optional tool tips next to each field to elucidate what is needed and why. This ensures that the users would be able to make it through the form submission without giving up in the middle.