4

I have a form that displays the user's current address and allows them to change it. I have a preferred format that I want so I want to provide hints to them as to what is acceptable and what goes into each box.

enter image description here

From our testing, people tend to think we have their address wrong because they believe the hint is what they have on file rather than it being an empty box. I thought about doing this...

enter image description here

But for some reason people now think they have to type in "example:" and the preferred formatting (when it comes to other boxes) becomes a little more unclear.

What is the best way to give a hint to users for what is acceptable data?

3

The first aspect would be to use an API which will generate an address with minimal input such as the users house name/door number. This helps with formatting issues as you generate the address as it should be and do not put that responsibility on the user.

The second aspect to this, is to add a manual set of fields in which the user types their address in themselves. Using form validation you can assess the information typed into each field and make sure it is in an appropriate format (I am in the camp that believe you should format trivial things yourself such as capitalisation of a postcode/postcode spacing, so try not to be really pedantic with your formatting if it can be avoided).

Inline descriptions

A permanently visible example of how to format a guide on what to input into each field. The font is grey and small to ensure that the form does not look cluttered. The text should also be concise.

Example of address input using inline descriptions

Tooltips

Tooltips are useful if you need to add more detail into information about the form field. Remember to take into account mobile devices as they cannot hover over, so add in a fallback method.

Example of how tooltips can be used

Dynamic descriptions

These hints only appear when a field has keyboard focus. You instantly validate each form when the user has finished typing. This is a really nice way to go about it, as you give the user positive feedback after each field so they understand what they have typed is correct. Twitter use this to sign up for their service.

Example of dynamic descriptions

These are all appropriate for use but bare in mind the detail of the help you provide for each field. More complex descriptions would be better suited to a tooltip, whereas a shorter more concise description would be good with inline or dynamic.

Source for all of the above images and ideas

0

You might find this article helpful http://www.nngroup.com/articles/form-design-placeholders/

Basically, it says that it is better to use the placeholder text as a hint to the label (not an example), but it is better to avoid placeholder text altogether.

  • Is it going to be possible to provide a hint to an address without that hunt providing an example though? – JonW Dec 18 '14 at 23:25
  • Not sure about that, but that is what the article says. In the case of the address it might be better to omit it altogether since it is clearly not obvious to the user. – Louis Lienhøft Dec 19 '14 at 0:22
  • You can see that they don't "omit it altogether" in their example. They use another label outside the box instead of a placeholder. The best solution is to have clear, visible labels that are placed outside empty form fields. – Shoe Dec 19 '14 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.