Help text on forms

[jacquidow]

I have a task to include some help text on quite a complex form. Here is a screenshot of one example:

It makes the form look very cluttered, I tried to tidy it up by having it only appear if the user selects ‘yes’ from the radio options but it has not helped much.
In a previous interation of the design we had an information (i) icon that the user had to click to view any help text but during usability testing users were confused by these.

I was wondering if anyone had seen any good examples of how to implement help text on a form?

Thanks in advance

[jaisonjustus]

@jacquidow can you share the full form design. I didn’t understand the description given for the label and hard for me to correlate the question and the description.

[jacquidow]

This is step 1 in a 5 step wizard, where a user can create a school trip

There are a few places throughout the wizard where we need to explain some of the functionality behind it so that they can make an informed decision on how to set up the trip. In this specific example the information is only relevant if the user selects ‘yes’

I thought about reintroducing the tooltip style help text but using a (?) icon instead, or maybe using underlined text: How does limited availability work?

[jaisonjustus]

How about this combination

1. label
2. a short description to support the label with read more option for longer explanation
3. Control

eg:

[jacquidow]

Ooh I like that! I shall show the team

Thank you!

[DavidJay]

Or maybe a similar quote to “I’m not sure what this question means” underneath the question - a separate box could appear once you click it.

[jacquidow]

Yes this is one of the ideas I have put forwards is a link near the label.

For example:

Are there a limited number of places on this trip? (link)How does limited availability work?

[DavidJay]

I think your suggestion is better - to custom each link for each question

[Jellybean]

Hiya,
The ex editor in me finds the text accompanying the question unclear. I think (which I only worked out after seeing the second screen shot) you trying to explain that as people book the number of available spaces will automatically update? It took a few read throughs to get that. You could try:

Are there limited number of places on this trip?
Yes / No

If there are limited places on the trip, as parents book via confirmation of attendance (free trip) card or PayPoint the number of available places will update automatically.

Payments made by cash and cheque must be recorded by immediately to ensure availability is updated. If this is not done the trip may be over-booked.

Removing a confirmed person will automatically update the number of available places.

Or I could have got the gist of it completely wrong. Or I could be jumping the gun and you might not be up to text yet - if so sorry!

Good luck!

[jacquidow]

Hi

Thank you for your feedback, unfortunately the copy has been provided by stakeholders.

To make it even worse, we only need the copy because it doesn’t currently work this way and confuses users, and part of the system will still be working in the old broken way

[startlaunch]

Hi @jacquidow!

Figured I’d toss in my 2 cents:

The thing that feels like we’re lacking here is hierarchy. The help text (as you’ve pointed out) is long, and cluttered. I’m not sure how much flexibility you have over CSS/layout, but here are the two approaches that I’d explore:

My notes:

• If “No” is the default, I’d move it to the left of “Yes”
• If possible, I’d move the help text to the bottom, and give it a slightly different style. In these examples I’ve just used a lighter font-color, added bullet points (since there is so much to digest here), and italicized the bullets.
• If I were in your shoes, I’d also push back on the copy. I don’t know the dynamics of your situation, but copy is a huge part of design. It feels like this copy could be cleaned up quite a bit which would reduce the complexity of this field, and actually add clarity.

Hopefully that helps.

[Jellybean]

That’s grim about the copy. Hope you can sway them so that it works for how you design it. Good luck with your project!