0

In our applications, the users are going through plenty of screens filling out form fields and selecting various options from dropdowns, radio buttons, etc. Because of this, we currently house one section for all of the help text that changes based on the field they are in. If the user errors something, the error text is also in this help text area.

On various sites, I have also seen an additional concept which shows small question/help icons next to each and every form field and ui control. (pictured below).
enter image description here

Does there seem to be a trend towards this second idea and is there a preferred standard between the two of them? I could see some advantages/disadvantages of each one. Leaving the help text area locked in place, say a corner of the screen, takes up more real estate and I would think that once the user leaves the status of "beginner user" and moves to an "intermediate user", most of the help text is probably irrelevant for them and they would probably need it only on some of the fields. But while it does take up a little more real estate, there is the possible visual clutter, no matter how much you tone it down, of putting help icons next to almost each and every field/control on the screen. There is also the issue of do you make the help "tip" an onClick or an onHover. My gut would tell me the onClick since the user may want to keep it up a few seconds to help them fill out their field vs remembering what it said. But the benefit of doing it in this second concept, utilizing the help icons near each control/form field, I could see where they only click on the help "tip" when they absolutely need it.

2 Answers 2

5

I would prefer use of Icons next to form field because of following reasons.

  • Help is available to you, consistently, every time you need and at the time you need but not unless you need it.

  • Proximity of control on the form affects users experience. Idea of dedicating a section which always shows "help and tips" wouldn't be as close to form elements as the Icon could be. Thus in order to find that help area or read the content is offers, your eye must travel to that part, learn and then return back to form elements. Not so good if you had to repeat that 20 times while filling out a form.

  • This approach works well for novice as well as experienced users.

  • Visual noise would be the only concern but with a little thoughtful tweaks, that can be brought to acceptable point. But this is the only left concern which you have to handle, everything else goes in the favour of this appraoch.

1
  • Thanks so much for the input, Salman. I was thinking along those lines too but was probably overthinking since it would be a pretty big change. I like your point in particular about the eye movements constantly moving to one spot which slows down productivity. That is exactly what is happening. Before I came to the team, they had decided to put the help in the bottom left of the screen in a command bar. My goal was to either move that to the right or implement the concept above. Thank you, sir!
    – Charles
    Mar 14, 2014 at 13:40
1

Adding to what @Salman already mentioned, which is very helpful, I'd say that you can still keep the detailed help, just leave it out of the way and provide a way to reach it, for instance, at the end of the tooltip with a text like "more information" or "detailed information".

About your question for hover or click, you are right, a click is a better option between both. Specially if you also consider the accessibility of the action.

The thing that you have to work properly, is positioning the tooltip; from your words and screenshot, It seems to be a phone app, so there is not too much room to place the help bubble, so if you go for the click option, don't leave the help over the field, place it below, or between the question and the field, or even on top of the question. As long as the visual cues help to identify that the help is for that field and for another one.

1
  • Thanks, PatomaS. Yeah, that's the tricky part. Especially because right now they aren't doing top aligned labels. They currently have them just to the left of the input/form control so I need to try and make room for them. I'm almost wondering if the biggie is first to switch them to the top aligned labels and then implement this. Of course, when any major application change like this happens, they all go nuts, even if it's the correct way. Same as Facebook. People whine and complain when FB makes enhancements but two weeks later they're posting their cat and food pics again.
    – Charles
    Mar 14, 2014 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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