Efficient Wireframing of a Web Form

• 9 minutes READ

Hello and welcome to the #6 part of our course on Design Documentation and Wireframing. We’ve spent the last 5 weeks delving deep into the philosophy and practice of User Experience Design. This week we continue our journey with yet another important topic: Web Form Design.

How many times have you stared at a form in some shameful website and not known what to do? How many times have you stopped filling in the form in the middle, tired as hell, and wanted to scream?

How many times have you left your shopping cart because you just couldn’t complete the transaction, because of the lame web form?

Well I don’t know about you, but I, and a statistical user of the Internet, have encountered these problems way too many times.

Let’s learn how to create proper forms and to document them so your whole team will be able to act together and create a masterpiece of conversion.

The importance of Forms

What is the most popular and, at the same time, most hated part of the web? Forms. In a study that I conducted, 91% of subjects stated that they, at least once, resigned from signing up in an online service because of the form that they needed to fill in.

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

That’s a catastrophic, but not surprising, result.

As Luke Wroblewski wrote in his great book ”Web Form Design”: ”Forms suck. If you don’t believe me, try to find people who like filling them in”.

No wonder it’s hard to find people who like forms; just think about the role they play:

  • •Forms in eCommerce play the role of the shop counter – though instead of a queue, we get a set of inputs
  • •Forms in any governmental institution are the equivalent of endless questionnaires
  • •Forms in social services represent the role of a bouncer at the door of a club

Forms have taken the role of utterly unpleasant things. They slow down our path to the goods we desire. They want to know more about us than we care to reveal. They rob us of our privacy by giving our precious data away to people, some of whom most probably are villains.

Damn your forms – most people may say. Designers, on the other hand, can cheerfully greet them ”long live forms!” Since forms are not going to disappear till some fancy biometrics identification (which has certain ethical issues as well) wins the market, designers all over the world should try to make the experience of filling them in less unpleasant.

Forms are challenging, but User Experience Designers love challenges.

If users complain about how forms are destroying their experience – it’s time for us, designers, to stand up and help.

How? Let me guide you through some basic rules (I strongly recommend you read Luke Wroblewski’s book to learn more) and documenting techniques.

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

Empathy and Communication

User Experience Design requires a certain level of empathy. You need to feel the pain of the users that you’re going to serve with your design and you certainly need to understand what they are trying to accomplish.

People don’t want to fill in the “check out” form and complete the transaction – they want to get the book as fast as possible. People don’t want to join the newest social service – they want to hang out with their friends online, meet new people, and shamelessly browse through pictures.

Find yourself in your user’s shoes and solve problems that harm their experience. That’s what User Experience Design is all about, right?

If you fail at this important and unfortunately not so simple exercise, your form will be a nightmare. Unimportant fields, obscure labels, absurd architecture… that’s all the result of a lack of empathy and a wrongly perceived role of the form itself.

Yes, dear friends, to design a great form you need to pair empathy with the understood role of the form.

A form is on your website to have an important conversation with your user. That’s its main task.

Stephen P. Anderson, author of the great Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences, comes up with an ingenious excercise. Imagine the dialog between a web form and a user as if it were a real conversation between people. What would your form say? If it looks like this:

User: Hello, I’d like to complete my transaction. I’m really excited about getting this book!

Form: Do you have an account?

User: Well, why do I need one?

Form: Do you have an account? Or do you want to get one now?

User: But I have no idea why I need an account?

Form: GET YOUR ACCOUNT NOW! IT’S FREE!

– you’re about to fail. We could go on and on, but as you can see, the probability of a user leaving this conversation feeling offended is quite high. In a traditional, offline shop he’d probably ask to have a talk with the manager, but in an online world he will just go to another shop within a couple of seconds.

That’s right, you need to treat your form as an interlocutor that’s about to have an important conversation with your user. There are three rules of form savoir-vivre:

  1. Don’t stop – do not slow down your user, be empathetic and remember that he/she wants to complete their task, not fill in your form. Make the process unobtrusive.
  2. Inform – provide all the necessary information. Want your user to sign up? Explain why. Want them to have secure passwords? Explain how to build them.
  3. Respect – a form is a conversation; respect your user and guide her/him through the necessary steps in a pleasant way. Use plain, undertstandable, language.

Form

And always be careful. Forms are not easy to design since they tend to have a set of complex states that depends on the input of users. Errors, confirmations, warnings – that’s all you need to design, unless you’d like to see in your precious form such a message as ”data base #23485 critical error”. If you don’t design it, somebody will get just that message… and don’t expect stunning results.

Error messages full of technical language are conversation destroyers. After something like that, it’s really hard to regain your user’s trust.

Construction of the Form

Labels
A couple of years ago the no. 1 subject in the User Experience Design world was the construction of a form. People used to endlessly discuss whether labels should be at the left or at the top of form fields, or if we should split long forms into a couple of steps.

The ultimate answer to this question is of course: it all depends.

Let’s discuss the matter of label placement. Matteo Penzo’s eye-tracking studies show that top-labeled forms are processed in the quickest way. Why? Most probably because the label (if short) and the form field can be perceived in a single eye movement. In this study Penzo also noticed short saccadic movements between the label and the input (50 ms) and the fact that if the label is familiar (e.g. “name”) users fixate their sight just on the input, not on the label.

Right-aligned labels tripled the time of saccades between the label and the input (170 ms for experts, and 240 ms for novice users) in comparison to top-placed labels, but that’s much lower than left-aligned labels (500 ms).

That’s a no-brainer though. Top-placed labels can be perceived in a single eye movement, right-aligned labels and left-aligned labels cannot. The distance between the input and the label is smaller in right-aligned than left-aligned labels, so the time of saccadic movements is significantly less.

Are you still with me despite the neuro-nerd information? Hold on, I’m heading for the exciting conclusion.

So far so good, it’s quite intuitive. What’s not that simple though is the fact that, as Matteo Penzo states:

The right alignment of the labels reduced the overall number of fixations by nearly half, showing that this layout greatly reduced the cognitive load required for users to complete the task.”

That’s something, right? It basically means that:

  1. In most cases, top-placed labels work the best for users, as they are perceived in the most convenient way. If the height of the form matters (a problem of labels above inputs) – use right-aligned labels.
  2. Surprisingly popular, left-aligned labels usually provide significant cognitive load and in most cases shouldn’t be applied.

Does this mean that we should basically avoid left-aligned labels? Well… no. In some forms you might want to stop users at reading the labels and really slow them down (like e.g. insurance questionnaires). I would be quite careful with that though and always consider top labels first, rather than right-aligned ones.

Info

Now, since you have the basic knowledge, it’s time to practise wireframing & documenting forms!

How to Wireframe & Document a Form?

It’s not an easy task. Basically, if you don’t do your job, somebody will do it for you and well… in my experience, a lot of developers lose their sense of empathy and communication while working on a form. If you don’t want to inform your users about data base errors, you’d better focus now.

Open your UXPin account and go step by step with me through the exercise.

1. Title your form

This is usually an underestimated part of a form. But well… do you remember the savoir-vivre form rules? You have to inform people, talk to them and actually enhance the conversation. The title is a good start.

Title

Don’t overwhelm people with a set of form fields before they know exactly what to do.

2. Ask only for absolutely crucial information

I could ask about their hobby, average wage, color preference… it would certainly be useful, but a shipping form is not the place for that. Any extra questions may result in being dropped out of the cart.

3. Align labels

Since we don’t really care about the height of the form, it’s much better to use top-placed labels. In UXPin you can actually edit the position of a label with one click.

I’m using guides (horizontal and vertical lines that can be dragged from rulers) to align form fields to each other.

Align Labels

Please bear in mind that I’ve also adjusted the width of every input, so it will be of appropriate size for the content. For example, address fields should be longer than name fields, while postal codes require much shorter fields. A long input for a postal code could certainly introduce some unwanted confusion.

Align Labels

4. Group content

If you’re able to divide the content into groups – please do. In our case there’s one main content group (shipping details) and grouping it could be confusing.

Groups can be divided by headers, or light visualization (e.g. a vague difference in the background color).

5. Provide help and support

Wherever needed, help should be provided. Try to do it in an unobtrusive way and only in places that really require it.

Help

Don’t provide help next to the “name” field. Your users certainly remember their names. They have a problem though with understanding why exactly you need their e-mail address to deliver a book. Explain that in an conversational way:

“We need your e-mail to keep you informed about your order progress. We hate spam as much as you do!”

 Some fields require a specific type of input. Give your users an example:

“E.g. Philadelphia Street 34, Gotham City”

I’m using light blue tool-tips to provide helpful information in an unobtrusive way.

Ah… and remember – if all the fields are required, just don’t tire your user’s eyes with asterisks and additional information about requirements.

6. In-line validation

I’m a huge fan of so-called “in-line validation”. This method of informing your users if they have succeeded or unfortunately they need to correct something in a form, requires showing all the information next to the form field.

Inline Validation

It’s very straightforward. Just remember to use plain language in explaining errors and confirming that something went well.

Examples:

”We can’t really deliver the package without your name :(“

”Oh man… without your address the whole plan will certainly fail”

Enhance conversation, even in the tough moments when users did something wrong. Avoid technical language, or you’ll certainly lose them.

Sum Up

I hope this part of the course will help you design great, conversational forms that will delight, not scare your users.

Remember – it’s all about empathy and communication. Your users are people, not data base entries.

PS. If you haven’t signed up to UXPin yet – it’s time to practise some design skills.

Marcin Treder

Marcin Treder is a design enthusiast who literally lives for creating best user experience possible. After years working as UX Designer and UX Manager he focused on his own startup UXPin - The UX Design App, that provides tools for UX Designers all over the world and was recently voted the best startup in Central and Eastern Europe.

Posts by Marcin Treder