Invisible controls

Invisible controls are buttons or other clickable content that are visually hidden until they're in focus. They should be designed with accessibility in mind so they don't negatively affect users with various disabilities.

Understanding

Invisible controls are a common design pattern used in modern web and application design, where buttons or other clickable content are visually hidden until a user's mouse or keyboard focus enters a specific region of the page. When the user interacts with this region, the hidden content is revealed. These are sometimes referred to as “ghost buttons” or “hover to discover” buttons.

Comparison of the Application Navigator with and without invisible controls visible

An example of an Invisible Controls are the Edit and Favorite buttons in the Next Experience “All” menu. These icon buttons appear when the mouse hovers over each row.

Invisible controls can negatively affect users with various disabilities. People with cognitive disabilities may not know what actions are available to them when looking at the page. Those with mobility impairments, such as users who rely on keyboards, alternative pointing devices, or voice input, may find it difficult or impossible to interact with these controls.

Invisible controls in Horizon

Horizon supports this design technique and users with accessibility needs by:

  • Offering an end-user preference that allows users to choose to always make all controls visible
  • Defining patterns for where and when Invisible Controls may be used
  • Providing guidance for hiding and showing invisible controls in a way accessible for keyboard and screen reader users
Preferences modal showing where the Show Invisible Controls option is located

End users can choose to always Show Invisible Controls via the user preferences dialog.

Patterns for appropriate usage

When using Invisible Controls in your implementations, ensure that they align with these use cases to maintain consistency and accessibility across the platform.

List of incidents with a cursor hovering over one incident showing additional controls
Do

Invisible Controls may be used for repetitive actions in a list, series of cards, or grid, reducing visual repetition.

Card with one paragraph of text and two buttons at the bottom
Don’t

Buttons that are not repetitive should always be visible.

List of incidents with visible checkboxes highlighted
Do

Checkboxes, radio buttons, and other form controls for aside from buttons should always be visible.

List of incidents with checkboxes only visible on hover of the record row
Don’t

Don’t hide checkboxes, radio buttons, and other form controls under hover states.

Application navigator showing favorite star always visible
Do

When stateful buttons are pressed, they should always be visible. In this example App Engine is marked as a favorite. This stateful button is visible even though the mouse is hovering over a different row.

Application navigator showing favorite star not always visible
Don’t

Don’t hide stateful buttons that are pressed. In this example App Engine is marked as a favorite. This stateful button is not visible even when the mouse is hovering over a different row, but it should be.

Bar chart showing hidden repetitive actions
Do

Repetitive actions on an interactive data visualization may be hidden to reduce visual repetition. Buttons or controls for analytical use cases may be shown on hover.

Canvas based builder tool (node graph) with hidden action buttons
Do

Action buttons on objects in canvas-based builder tools may be hidden to create a cleaner building experience.

Nav bar showing main actions as visible
Don’t

Primary actions: The main action on a page should be immediately apparent to all users.

Design Considerations

It is important to ensure that you consider how a design will work when controls are invisible, only appearing on hover or focus. Additionally, consider how a design will work when all controls are visible. For instance, you’ll want to ensure content does not overlap, shift, or cause any other visual issues.

This approach allows designers to continue using this common pattern with minimal restrictions while giving end-users the ability to choose their preferred experience.

Graph diagram showing ample space between nodes
Do

Make adjustments in your designs for when all invisible controls are showing, based on user preference.

Graph diagram showing slight overlapping of action elements with neighboring nodes
Don’t

Don’t allow content to interfere with other content when all invisible controls are showing, based on user preference.

Annotating

To specify your Invisible Controls in Figma, annotate the following:

  • The invisible control itself
  • The mouse hover region that reveals the control
  • The focusable elements that reveal the control