Looking for help on help page!

Question

I have a lot of very similar data entry forms on several different tabs. I'm trying to get decent looking and effective help screens for the data. Also any ideas on the forms themselves. TIA You can see it here:

Answer 1

Honestly, I think that a huge goal of good UX is that you shouldn't need to explain to your users what those fields do. The way that the fields are laid-out on the page and the labels for them should make it almost entirely self-explanatory.

(Joel Spolsky has an excellent article on this, Designing for People Who Have Better Things To Do With Their Lives - I highly recommend reading it.)

You want to guide your user through the application - not just show them a page or a form and hope/expect that they figure out what to do.

Contextual help, in my opinion, is often a red-flag that the application isn't helping the user enough. In other words, if you find yourself needing to put in contextual help, it could mean that there is a flaw in the UX design.

So, for example, rather than presenting the "Times Available" text box along with a "Don't Know" checkbox, you could instead have:

• A question, "Do you know what times the movies are available?" with a radio Yes/No
• If they select Yes, then show the textbox and ask them for the times
• If they select No, then you're done.

The wording above may not be quite right for your situation, but the point is that asking the questions that way is much more intuitive to the end user, and also eliminates form fields that'd end up being left blank anyway.

That being said, I did find an example of contextual help that I thought was pretty good. It's slightly different because it's not help for form fields, but it could probably be adapted.

The example is the Plans page for HootSuite. When you hover your mouse over one of the items, a little box appears explaining what the item is, along with an arrow so you know exactly what the box is for. Here's a picture:

You could do something similar, so that when the form field comes into focus a little box appears to the side and explains what the form field is for.

The key features are that the contextual help only appears when it's relevant (so that it doesn't clutter up the page), and the user doesn't have to do anything to get it to show up. You'll probably want to give the user the ability to hide the contextual help, because it may quickly get annoying if they're doing lots of data entry. But that way, the new users see the help messages by default, and once they're comfortable, they can hide them.

Answer 2

If the help screens are contextual I would strongly recommend either a tooltip or a modal window.

Answer 3

Would be great if you provided more info or a larger screenshot, but a couple things can be said already. It looks very much like an app, but I suppose that it is after all a website. In that case:

1. Stack the groups on top of each other, not in two columns. Leave the right column empty.
2. Display help in the right column - either always or when focus reaches the relevant field / group of fields. Also use the right column for error messages from live validation.
3. To help you cut down on the height a bit - try laying out the first 6 radios in three pairs, on in two threes. Or better yet, turn them either into a dropdown where "other" enables the textbox, or into a combo box where you can both select a value or type one of your own.
4. Theater address - what's the meaning of the asterisk? Are all these fields required? I hope not. See if you can suggest autocompletion of the different fields, auto-fill of the address based on zip code, or at least auto-fill of the zip code based on the address. See if you can geo-locate the user and fill the fields in for him.
5. You can use a date picker that lets you pick a range of dates, instead of two separate date pickers. I'm not sure whether it's such a great idea though, I think they may be more difficult to use.
6. Take the action buttons out of that dark frame, they blend in and become virtually invisible. Put a large, conspicuous SUBMIT button at the bottom of the form.

Answer 4

If you think the text would be beneficial to anyone entering in data all the time vs just the first time, you can play an area at the top or bottom that displays the help text as you move between the fields.

If the text help is only useful when they have questions, tooltips or little (?) icons that display the tooltip on hover is the typical route.

Going to another page is a disruptive process and you should add help to the process and not outside of it.

Answer 5

Wow.. Thanks for all the responses. I will definitely try to incorporate some of them. I had actually put a link to my dropbox account for the picture, but I'm not sure why it was forced into an inline picture. Maybe I have to register?

Just a thought, good UX designers are few and far between. I'm sure you guys are crazy busy, but it would be great to have a jobboard on the site.