6

enter image description here

Which is the best way to display more info next to an option while completing a form in a minimal way & little space?

  1. the "i" icon which can be clicked or hovered over & a tooltip appears
  2. just click inside the textarea & a tooltip appears
  3. no tooltip, the info appears from the beginning
2
  • What is your goal? Jul 27, 2015 at 16:57
  • I need the most compact form for buying clothes. Each field might have additional info, therefore the classic "i" for tooltip. Im between using the tooltip or just giving all info below each field, but not highlighted.
    – Sites Kris
    Jul 28, 2015 at 11:40

4 Answers 4

3

There's a trend towards using CSS and/or Javascript to show and hide secondary or additional content on the Web. Here's an older example from CSSNewbie: Click 'See more' to view hidden content:

Click 'See more' to view hidden content

Click 'Hide more' to hide revealed content:

Click 'Hide more' to hide revealed content

I'll leave it up to you to determine which approach is 'best'. This approach—designing 'More Info' as a hidden div that's revealed on click—is an increasingly popular method of implementing progressive disclosure on the Web.

3

The problem with having a piece of information next to each field is that in many cases it is not necessary i.e. it is repeated or obvious information. You will end up being obliged to fill it in for everything, even when you don't want to. It's fine in the two examples you have, but as an often used design pattern, you may soon wish you hadn't committed to it.

In this instance you could be better off putting the information in a hover 'i' at the level of the heading. It will also help to reduce field size.

Have a look at how eBay do it, when inviting you to list further information about something you are selling.

As always, it is a matter of context:

Most of the time, the 'i' hover over works well. We tested a medical system in a doctor's surgery setting. The doctors were fine with hovering, but the two older receptionists, who would use it most often, never used the internet at home, and did not realise what it was for and how to use it. They were an important, but minor user subset for a countrywide system, so we considered making the instructions more obvious. However, they would use the system multiple times a day, so they would quickly gain expertise and not need the help anyway. Plus they would have training. So the decision in that case was, don't change the interface, and keep the hover-over. If their user type numbers were bigger, and/or use was less frequent, we may have changed it.

1
  • Exactly thats my point, its all about the users. We cant train them, because its going to be an open to all site. I prefer the "i", but we might go with side or bottom explaining, so u dont have to click or hover.. Thx a bunch!
    – Sites Kris
    Aug 7, 2015 at 12:44
0

rather than having the "i" if you have it that once the mouse hovers over the option and a dialog/tooltip appears I have found to be the best. It can be easy for the user as most people seem to hover the mouse over options as they are trying to understand them anyways.

1
  • The only problem is, when you have both options, labels that need & others that dont need explanation. Then how are you going to distinguish which one has more info to show. You would have to be searching.
    – Sites Kris
    Aug 7, 2015 at 12:47
0

I like the solution from elev.io - same idea as the "i" / tooltip combo, but using just an animated dot instead of the "i", as well as changing the cursor to a "?" on rollover.

http://elev.io

Your Answer

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

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