liveBook · Manning

Highlighting interaction pattern

As explained in Everyday Data Visualization

A highlighting interaction pattern visually emphasizes the interface element currently under a pointer or in focus.

A highlighting interaction pattern visually emphasizes the interface element currently under a pointer or in focus, offering a quiet clue that the element can be interacted with. section 7.1.1

Use highlighting to reveal interactivity without letting the interface steal the show:

  • In Tableau and Power BI, a border appears around the data element under the mouse pointer, marking it as active or in focus. section 7.1.1
  • For hyperlinks, pair an underline with a brightness change when useful, but preserve sufficient contrast with the background. section 7.1.1
  • Prefer subtle emphasis when stronger color would distract attention from the data; add explicit instructions when visual clues are not enough. section 7.1.1
Figure 7.2 Different ways to communicate that some bit of text is a hyperlink
07-02

Compare underline, color, and other visual treatments for communicating that text is a hyperlink. section 7.1.1

How Everyday Data Visualization covers it

How deep it goes
Defines the pattern, demonstrates pointer highlighting, and gives contrast and distraction guidance without implementation detail.
Examples
Uses Tableau and Power BI borders, hyperlink underlines, brightness changes, and background contrast.
What you can do after
Apply subtle highlighting and contrast checks to communicate interactive elements without obscuring data.
How it connects
Connects affordances with hyperlinks, hypertext, data visualization, and user interaction.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Everyday Data Visualization. The section links point to the parts of the book it draws on.