A prototype of a form is better than a picture of a form

13 Jan 2014 - 5:06am
49 weeks ago
6 replies
1885 reads
martinpolley
2007

Hi folks!

There's a big difference between a picture of a form created in OmniGraffle or Photoshop and a prototype of the same form made using HTML, CSS, and Javascript.

The picture shows you what information the form is asking for and how it is laid out. But it can't show you what it's like to actually interact with the form. What happens when the user enters invalid information? How does the form help the user? How does it look and behave on a smartphone?

The HTML prototype can show you these things. Which is great for usability testing, getting buy-in from stakeholders, and for collaborating with developers.

That's why I'm putting together a series of blog posts that show you how to make them. The first post shows you how to lay out your form and how to get the labels in the place that you want.

I hope you enjoy it :)

Cheers,

Martin

Comments

13 Jan 2014 - 11:23am
metaNick
2014

Thanks for the post. Please be careful with the use of implicit labels and placeholder attributes. For most browsers and assistive technologies, the placeholder attribute will not read out to a screen reader. Some may guess with implicit labels (including JAWS14+), but it's important to add the for attribute and pass into the value the ID of the form control. Also, instead of a heading, consider using a fieldset and a legend.

15 Jan 2014 - 2:14am
martinpolley
2007

Thanks for that, Nick. I wasn't aware of the accessibility issues with the placeholder attribute. I tried to stress that using placeholder instead of a label is a bad idea. Maybe I should have added the reasons why it's a bad idea…

If you did want to use this approach anyway, despite its drawbacks, would hidden labels be a solution? Do screen readers read out hidden content?

Cheers,

Martin

15 Jan 2014 - 10:58am
metaNick
2014

Yes, as long as the content is positioned offscreen and NOT display: none.

I have also seen treatments where the label itself is absolutely positioned within the input. Upon focus, the label would have a reduced opacity. Upon keydown, the label would be positioned offscreen to allow the user to type.

We always encourage our devs to use visible labels not only from an accessibility perspective but also fundamental UX. Low-vision users that rely on screen magnification programs such as ZoomText would benefit from visible labels that are positioned in close proximity to the form control.

If you're interested, have a look at SC 1.3.1 Info and Relationships in WCAG 2.0.

16 Jan 2014 - 12:43am
martinpolley
2007

I think visible labels are like OXO kitchen utensils—not only better for people with certain difficulties, but better for everyone.

Thanks for the pointer to SC 1.3.1. I'll try to keep this stuff in mind when I write posts like this :)

16 Jan 2014 - 11:16am
Jochen Wolters
2010

To add another perspective to the discussion about placing labels inside form fields: They make it unnecessarily difficult to verify auto-filled data.

Although browsers and applications like 1Password do a pretty decent job at auto-filling addresses, credit card details, etc., into web forms, they sometimes place the wrong data into a specific form field. If, for example, an email address appears in more than one field, chances are, that that happened by mistake.

In such cases, if the field labels are visible at all times, it takes just a quick glance to verifiy the data and find any fields which have been filled out incorrectly.

If labels are only shown inside the fields, however, you will have to cut the data from the field to bring back the label, verify the correct field-data assignment, and then paste the data back in as needed. And, of course, repeat this process until you are sure that all dubious fields have been flled with the proper information.

Obviously, this isn't as dramatic as the accessibility issues caused by in-field labels. It does, however, extend the list of reasons against using that design pattern by one more convincing item. :)

17 Jan 2014 - 10:54am
martinpolley
2007

Absolutely—that's an excellent point!

Martin

Syndicate content Get the feed