4

I'm a developer building a data visualization page and I need a bit of advice on UX design, hope someone can help me!

The product is a visualization SaaS that shows our users data in a novel way. Most of the data is plain text with sometimes links to external documents or even markdown.

I had a few of my users test a beta version of our product and it split the users into 2 camps :

A) 40% are happy to have tooltips to help them navigate the data on the page. These users usually don't have too many links in their data and a quick hover-type navigation makes sense to them. In average, they rated their browsing user experience OK or Good.

B) 60% need to have the tooltip stick as they browse the data. These users usually have links and they need to be able to click on these for a good experience. In average, they rated their browsing user experience Frustrating and have explicitly commented on that issue.

By tooltip, I just mean a box with user-generated content that appears on hover of these data elements. Its doesn't have an arrow and doesn't stay near the hovered element.

This is the mockup of the same view after user hover on the circle . First one doesnt have links in its content, second one does :

enter image description here

enter image description here

Now, my first intuition is to add a toggle/checkbox i.e. "Keep tooltip visible: Y/N" and let the users choose but I'm having self-doubt for a few reasons :

  • I usually dislike products that give you too many options instead of figuring it out for you

  • the placement & copy of that toggle is not straightforward and I fear my users will get lost and frustrated

Are there some best practices/rules of thumbs when it comes to adding user options on a UI? How can I tackle this problem without alienating a big chunk of my user base?

Improve this question
1
  • Have you considered using pin/unpin icon? May be recognisable enough to not need lengthy option text.
    – TripeHound
    Feb 25, 2019 at 16:15

2 Answers 2

Reset to default
1

Another option would be to enable a show more/show less button within the tooltip. Once the user clicks "show more" the tooltip expands and the links are displayed. Also - all consequtive tooltips will show the links expanded. Once the user hides the links from within a tooltip - all consecutive tt will hide the links. This way you do the customization based on the users actions. Its like machine learning (;

Alternatively - just allow to cobtrol these settings from the settings panel.

Improve this answer
1

First note, as I think you discovered in your test, is that having a box appear on hover that contains interactive things like links can get you into trouble. You have to implement a directional tracking system for cursor movement to know when to keep it or close it and on the accessibility side keyboard users don't have a way to reach it. So, if it is going to contain links it should probably appear on select (click/tap/spacebar).

A common alternative is to introduce a side pane that is contextual to the current selection. A tooltip can still provide a read-only clarification on hover and on selection the pane shows all details and interactions. The pane can be toggled by an icon in the corner somewhere or you could be more aggressive and have it reopen if anything is selected. Google Maps is a good example of this pattern.

Also, I think your bias toward keeping the UI focused on tasks instead of UI manipulation is well founded, so keep that.

Improve this answer

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.