Tooltips - Field name hover text more visible

[CCMumma]

4.6.1, TDR, U of Houston UI request:

"It is not obvious that hovering over field names gives hints, but they are very helpful. How can we make them more visible?"

The team at TDR use a little 'i' for information next to places where hover text is available in Vireo, but we are not UI experts...

[pdurbin]

@CCMumma I can imagine what the "i" might look like but please feel free to attach a screenshot to this issue.

[CCMumma]

[TaniaSchlatter]

Thanks for posting, @CCMumma. We started to look at how we display text (help text, messages, alerts) overall, and have been reconsidering how we use the "i" symbol (to emphasize informational text). On forms like the create dataset page, all headers have tool tips on rollover, so using a symbol like TDL probably isn't the right approach, but this is good info to have.

[pdurbin]

#3501 is about tool tips as well.

[TaniaSchlatter]

Elevating the importance of this issue. Per meeting with @sbarbosadataverse, data depositors are not seeing rollover tool tip messages when they are creating datasets, and it is reducing the quality of the titles and other metadata requested when creating a new dataset, and to a lesser degree, a new dataverse.

In some cases users are putting a file name in the "title" field of a dataverse.

Sonia mentioned that in addition to titles, there is evidence of confusion about roles that would likely improve if users saw the tool tips with role descriptions.

[dlmurphy]

I looked into best practices for displaying tooltips in non-mobile applications. The most common solution I saw was to use a dedicated tooltip icon that displays the tooltip when hovered over.

There are three predominant styles of tooltip icon:

1. 
   Question marks, usually contained in a circle.

2. 
   Cartoon speech bubbles, usually containing lines or ellipses to represent text.

3. 
   "i" for information, usually contained within a circle or speech bubble. Meant to reference signs typically seen above information desks in the real world. Usually serifed, often italicized, as seen here:
   

While downloading icons, I saw a good example of the question mark tooltip icon in action on the Noun Project's download page:

[jggautier]

Here are some other ideas (may or may not be feasible, just thinking broadly):

1. @TaniaSchlatter mentioned that the tooltip on the page's first field label could display when the page loads, to make the user aware that the tooltips exist and where they exist. Maybe the tooltip is shown for several seconds then disappears, or stays until the mouse moves.

2. Have the tooltip on the text box, where users are more likely to hover when they start typing, in addition to on the field labels (or on an icon like those suggested).

• Drawback is that if the tooltip appears below or near every text box on the form, the tooltips might become annoying for users who don't need to see them. But if we could show them selectively, e.g. for fields we see that users aren't filling out the way we expect, would users know where to find the help text for fields whose text boxes don't have the tooltips?
• Another is for users who tab from field to field and never click in fields: they may never see or know that tooltips show up when you hover over the fields.

3. Have text appear to the right of the field (or another predictable area of the screen) when a user clicks on the field.

Other resources:
https://www.nngroup.com/articles/pop-up-adaptive-help/
https://www.nngroup.com/articles/timing-exposing-content/
https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/#4-help

Something else I think we should consider is how accessible the text in these tooltips will be (e.g. for screen readers).

[TaniaSchlatter]

Here's a little more research from the IxDA list. Hoober is a recognized expert on this topic:

Steven Hoober:

Redesign your page/app/flow so as to not leave any doubt in user's minds, so they won't NEED to hover over anything.

Seriously, that's my advice, and how I design everything. I do not even include help, FAQs (ugh, a whole other topic: ask me sometime), in page help, app tours, etc. when planning for design. No help. It just works or you failed.

And, this works! The basic tactics (clarity, brevity, no jargon, label all icons) works and with a bit of actual u-test so you have real customer feedback, you can make products that are used e.g. 100 million times a day and are not even tracked by Customer Care as they never cause a problem.

This would mean having a lot of additional small text on page page in some cases for us if we were to follow this advice completely. There's probably a middle ground/mix that is appropriate and helpful.

[pdurbin]

Something to think about: Does the hover text work from mobile?

[TaniaSchlatter]

Hover text does not work on mobile @pdurbin.

[TaniaSchlatter]

Here's an example that works well and is responsive from the Northeastern University portal. The symbol is not visible by default, however, except on mobile:

Default view:

Rollover to see "i" icon:

Click/rollover to see help text:

Responsive view for smaller screen – "i" symbols are visible by default:

[TaniaSchlatter]

Add a "?" symbol to indicate when tooltips are present, as shown to stakeholders in Dataset page mockups. Rolling over the symbol should replace rolling over text, and trigger the display of tool tips.

Appearance:
Bootstrap question-sign symbol. Standard link color for the symbol, or ghost the link color to 50%, with full color on rollover.

Behavior:
Rolling on the symbol reveals the tooltip. Rolling off hides it. On mobile, click the symbol to reveal the tool tip. Click off to hide it.

[TaniaSchlatter]

The example in the guides (see image) that shows the tool tips should look and work as is intended on the site.

[mheppler]

Fixed tooltips functionality in guides as requested (see screenshot below), removed outdated analytics code (related to #4660).

NOTE: Returned previously removed analytics code to guides. Confirmed that the code was reporting pageviews.

[mheppler]

Confirmed with @TaniaSchlatter that the Style Guide improvements requested in Style guide – document messaging text and visual styles #3865 are covered here in this issue. I have closed that issue.

[kcondon]

@mheppler
Using Chrome Version 72.0.3626.121 (Official Build) (64-bit) on Windows, also ff, edge browsers
-Change password page tool tips do not pop up
-Dataset tool tips do not pop up once a template is loaded.
-Edit/Create Dataverse page, metadatblocks unchecked after save when uncheck inherit from root on create/save. Results in exception when creating dataset until recheck/uncheck/save. This may be preexisting, will confirm.

[mheppler]

Looked into the issues reported by Kevin in my iOS browsers (Chrome, Firefox and Safari) and was able to replicate them, so thankfully it wasn't a browser/OS issue.

The edit btn on the account pg, and the template select dropdown on the dataset pg were missing the necessary oncomplete="javascript:bind_bsui_components();" attribute in order to rebind the javascript functionality of the tooltips to the necessary elements on the page, after the page loads.

Kevin also dug a little deeper (thank you) into the metadata blocks issue and discovered it's an issue in develop as well as a similar issue in 4.11, so he opened a new issue #5613 to track that.

Passing back to QA.