3

We have an internal, json editor web application. It is extremely form heavy, basically pages worth of one dimensional tree structured nested forms.

Think something like this, but bigger and some forms nested in further forms, also its important to note, the whole shebang is left aligned so the travel between the label and input is a few spaces wide.

http://i.stack.imgur.com/gyQNi.png

Now these forms have a lot of attributes, types, subtypes, constraints etc. so to handle this, Ive taken up on myself to create super tooltips(we needed tooltips anyway). I didnt actually know it was called like that but you can check them here: nngroup.com/articles/best-application-designs/ Their content is dynamicaly adjusted in response to the element hovered over.

enter image description here

Now the question, currently the tooltips arise from hovering over the input forms for 400ms. I've recieved one internal formal and one internal informal code review that havent mentioned the appearance, however a half outsider(contact guy for other team in same company) made a formal review where he said tooltips belong on the label element not the input element.

I find this wierd since we have tooltips in all kind of cross(delete), open, collapse icons and they dont have text on it. I am not even sure they would get discovered without an accident since I dont remember ever seeing a tooltip on the text part. Is there a best practice in this reguard?

  • Tooltips are tips for using tools. They should appear as close as possible to the tool they are for. Also, there is too much space between the labels and their entries. People have a hard time keeping things widely separated in line. Consider alternating the background, say white and very light grey, to help people keep things aligned. – shawnhcorey Aug 19 '15 at 14:26
2

I do like the article by the NG group and how you implemented your tool tips.

In general I am not the biggest fan of tool tips because they are pretty useless on touch screens.

I do agree with how you display the tool tip on the element rather than on the column or row name.

Here's something you can do to allow users to discover them but not have them always show up which might be annoying. At 400ms when hovering show a little circle icon on the top right of that rectangle with a ? Mark in it. This allows one to know there's more info there aka a tool tip without being forced to see it always.

Google tool tip icon to see what I am suggesting, also I seem to be old school the trend seems to be a little circle with an I in it for information I would guess. I like the ? I'm the circle but a cheap amaZon mechanical turk could show you if users recognize one more than the other.

| improve this answer | |
  • An excellent suggestion will report back on what we decided on. – hardcore Aug 12 '15 at 8:00
  • The team said it doesn't matter and let it stay on the fields. In the end we dismissed the icon idea because literally every graphic element has a tooltip on the page and it would create an immense clutter. I assume the user will learn himself that pretty quickly. If fewer elements had tooltips, I would of probably went that route. I will keep an eye for feedback if its too soon or too much blocking however. – hardcore Aug 12 '15 at 8:33
  • Cool glad it helped! – Frank Visaggio Aug 12 '15 at 11:02
2

Having a tooltip on the field input/label hover is too hidden away and only discovered by accident. How does the user know which elements have and which elements do not have a tooltip? If you do show an indication somehow that an input does have a tooltip (e.g. ? inside the input somewhere) how do you handle the opening of it for touch screen?

Recommendation

Therefore, I would use a separate button element beside the relevant control that can be tapped or clicked. This then reveals a popover with the tooltip content.

Crude mockup enter image description here

| improve this answer | |
  • Yes, since then it has been moved to label. The tooltip icon was not implemented because every single field has a tooltip and there can be hundreds of them. – hardcore Jun 15 '16 at 8:53
0

To me, a tooltip is "info that a few people may need, but otherwise is cluttering the UI so let's hide it for now".

As such, I typically argue that the best practice is to get rid of them. Either it's important information, and, as such, should be displayed right on screen, or it's not that important, and probably doesn't need to be there at all.

As for label vs. field, context is everything. If it's text that directly helps with defining what the field is, it should be part of the label. If it's helping a user input data into the field, then it could be part of the field. In either case, using a tooltip for this will complicate both usability (especially on touch devices) and accessibility (doable, but will require some fancy markup to make sure it passes muster).

| improve this answer | |
  • I agree tooltips are next to unusable on touch devices, however we are not planning for usage with touch devices at all. I think its starting to make sense and I am currently thinking on doing a tooltip icon for the label. – hardcore Aug 12 '15 at 8:00
  • 1
    Tooltips are easy to implement on touch devices with just a few lines of JavaScript: one tap --> show the tooltip, another tap --> hide the tooltip. – Luke May 13 '16 at 21:11
  • But tapping would take you out of the field itself, and you end up then having the keyboard open and close and...well...it gets messy. I still stand by my argument that tooltips are usually not the best solution. – DA01 May 13 '16 at 21:39
  • Look at Dave Haigh's screenshot. I don't see a problem using the pictured tooltips with a touchscreen. – Florian Jun 13 '16 at 13:21
0

we are having this discussion in my team, but from a different point of view: Accessibility.

So, if we are using a special browser for blind people, there is no point on placing the tooltip after the interaction (textfield, dropdown, etc.)

It has to be, at least, between the tag and the interaction:

Name (?) NameTextfield

Do you know any text covering this? I couldn't find anything on WCAGs.

| improve this answer | |
  • For screen readers, use the aria-label and use the same text as in the tooltip. – Ilias Bennani Aug 16 '16 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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