Designing Web Forms That Just Work

Designing Web Forms That Just Work

Any web designer or developer has designed a web form that required certain information to be filled in so the user will receive any information about a product or a service.

While designing a form, you can think that the whole output is a no-brainer. Just put some input fields, a couple of checkboxes or radio buttons and a submit button and you are done.

It isn’t as simple is you think. There are certain rules which needs to be followed if you are determined to offer good user experience and actually get people to fill in forms.

In a recent User Experience podcast, the author of Designing UX: Forms, Jessica Enders talks to Gerry Gaffney (who is also a co-author of a book dedicated to forms design called Forms that Work: Designing Web Forms for Usability) about good practices and rules when it comes to designing forms.

Jessica Enders shares valuable thoughts and tips that everyone should bear in mind when designs a form of any kind. Her knowledge in the field is based on research and personal work experiences.

Here are some highlights from the podcast which is available below:

On using other forms as examples for your forms:


Gerry Gaffney: …. you say in the book, “Don’t copy others” because the exemplars are not good ones. That’s a bit of an indictment, isn’t it of where we are at?

Jessica Enders: Yeah I think it is actually and I still stand by that. Again, like no other field of design, forms, as I said, they’re out there everywhere but because there’s so little information shared about how to do them well, most forms have multiple user experience, usability issues with them and, it’s funny, I run training courses about form design and use loads of examples in those to make it real for people and sometimes I get asked, “Can we have more examples of forms that are done well out there in the real world?” And I have to say I’ve pretty much found all that are really good ones that I can and I’m yet to find one where all the different dimensions of a forms design have been done well.


And she continues:

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Forms are a words-based interaction. So how the question you’ve asked and what information as help you give and what the buttons say really matters most. And so, very often you’ll see forms that are very attractive to look at but you can’t answer the first question because it’s ambiguous. Or less commonly, you’ll find forms that are really well worded but maybe a bit ugly to look at or the buttons don’t function right, moving backwards and forwards and so forth.

On using placeholders:


Gerry Gaffney: Now one of the things, I don’t want to annoy you, but what about placeholder text that we see so much of nowadays whereby somebody has either put the entire label inside the field itself or they’ve got a label and then some sort of instruction in the field and then when you click on it, it goes away or sometimes it floats up to above the field or something. Is that a good thing?

Jessica Enders: … The key there, what makes it a form, is that it had blank spaces and that principle still applies today. People know a form is a form by seeing blank spaces or boxes to tick or radio buttons to click in and so if you’re asking people for text answers you need to have blank spaces on your form. So as soon as you put words inside the spaces, whether they’re the question itself or whether it’s help or something else, it stops looking like a form that they have to fill in it. It looks like it’s already been filled in…
….
There’s a new pattern, relatively new pattern, which is the float label pattern which attempts to address the issue of space. It’s come about because you know particularly on mobile you don’t have a lot of space so I think the thinking is if we put the question inside the field, save us some space, but to get around this problem of the field looking filled in, we’ll float the label up into the top border when the person clicks inside it. So it’s still also always visible which is great; the thinking behind it is really good.

***
Gerry Gaffney and Jessica Enders also discuss on how many pages an extensive form should be and the issue of forms which required to be filled in by people who are distressed or in the midst of traumatic experiences.

Jessica Enders is one of the small amount of authors who actually share thoughts on forms design in a book. Unfortunately, this part of design and development is not covered by extensive literature.

Here are the books which are currently available and can provide information on doing good form design that is based on research and real-world experience.


This post contains affiliate links to Amazon.co.uk which helps the author to earn small commissions to continue searching and writing about valuable information for designers and developers.


You may also like...

1 Response

  1. Good read! Thank you for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *