In a web app, how do I give explanatory text?

Question

In our web app, I need to explain some information that is useful, but is not the most important part of the app. I'm interested in the best way to do this.

To give a concrete example, I have a list of Unix commands and their output, like so:

$ mkdir -p log/ (0s)                                        (inferred)

This says that we ran the command mkdir, it ran in 0 seconds, and we ran it because we automatically decided it was necessary (we inferred it).

However, "inferred" isn't the clearest word to express why we ran it, so I want to provide some explanation, like "We inferred the need for this command by looking at your source code and directory structure". But I don't know the best way to show the information, and to indicate there is more information there.

Some options that I've come up with are

• use a HTML title
• add a dashed underline to "inferred"
• change the style of "inferred" on mouseover
• add a [?] after the word "inferred"

Answer 1

The problem I have with the word inferred is that until I read your description, I had no idea of what it meant. Since you are going for a web based app, I would recommend going for a simple help icon (like given below) which on hover would show the text details.

The advantage of this method as per this article about help in dynamic forms is that

“An alternative in-line exposure technique is one that lets people access Help text when they need it.”

An alternative approach would be to move text into the interface itself (assuming you have the space and your design allows it) as shown below:

The advantage of this method is that this will ensure the help text is not missed and a small snippet can be used to lead the user on to the more detailed text view.

However with regards to interface help text,the thing to remember is that it has to as brief as possible as given by this article on Interface text

Interface text needs to be as brief as possible for two reasons: users tend to skip over large chunks of text, and the available real estate for help content on the interface is extremely limited.

Because space is limited, you may need to provide a link to more information. A small help icon or link next to a point of confusion doesn’t tire the eye and allows you to expand on a topic without rigid space constraints. The help link can open a pop-up window in an online help or just provide a pop-up within the interface itself.

Answer 2

Why just pick one option? Do as many things at you need to do to make it simple for the user. Albert Einstein said "Make things as simple as possible, but not simpler." and I think that is as applicable to UX as anything.

Why not combine a dashed underline (I'd actually consider a double underline over dashed - double is used for similar functionality on sites where ads or word definitions appear on hover - citation to follow) with a tooltip and the question mark which has become synonymous with extra info and help.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

I would put a legend in the sidebar / top, and have a short phrase to elucidate the "inferred" items. I would put it in a grey field and have text saying "automated actions".

Alternatively, you could have a first-time visitor to the page see a set of hover-balloons notating various things like this.

You can lower the page-processing cost by having all hover content appearing via a CSS that loads-or-not based on a state array var. Once the user has visited all sections for the first time, then you can disable all state checks henceforth.

Then put all those same items with a grey background. Grey is a common color of low-priority-of-attention.

Since grey can mean 'disable' or 'not-doing' you could consider a grey halftone, or low-saturation halftone instead, as this would distinguish itself from other 'grey' items.

Answer 4

I personally like how Wufoo adds additional info and explanatory text for their form fields. It displays when you focus on the form field, while you are filling it in, and it doesn't require you to take any extra action.

Here is an example. (The explanatory text appears to the right when you hover over the question, or put your cursor in a text box. If there is no explanatory text, nothing appears.)