User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Which is the best way to display more info next to an option while completing a form in a minimal way & little space?
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 '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.
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.
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.
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.
