🌈 UI

Updated at 2015-08-18 02:46

Many types of actions are hidden behind a hover or similar user interaction. Invitations are the prompts and cues that tell users about the existence of these hidden actions.

Primary action invitation patterns:

  • Call-to-Action Invitation: Static elements and effects on the page that invite people to interact with the target. E.g. brightly colored button in saturated context or "Order Now" text.
  • Tour Invitation: An invitation to start assistant that will go through the important or updated functionality.

Secondary action invitation patterns:

  • Hover Reveal Invitation: Show a tool or a tool group when user hovers an element. E.g. hovering over product image shows a button to zoom in to the picture.
  • Cursor Invitation: Change user cursor or add a label that moves with cursor. E.g. highlight possible drag start elements with a cursor change
  • More Content Invitation: Visually indicating that what the user sees is not the full item. E.g. show a portion of the next item on carousel, place a gradient at the lower part of an article preview or use animations on hover.

Primarily use proximity to indicate where the invitation refers to. Otherwise you need to give some visual cues linking the invitation to the target.

Use call-to-action invitations only once per view area. They compete with each other so having more than one in sight for the user will reduce it's effect. Except if there are multiple actions that should be done in sequence.

You can also use brightness and dimming to highlight an area. But then you should avoid using call-to-actions outside that area.

Whitespace can be a great call-to-action. Having an empty area in a page is very inviting for humans, they want to fill or fix it. Harder to use than using color and size but creates less visual noise.

Prefer simplifying the interface before implementing a tour. Tours are not a band-aid for poor interface design.

Keep tours lightweight. Tour should be simple, short, not automatically started, easy to exit and possible to restart.

Tours are great when you make significant changes to the interface.

Tour shouldn't be a separate page, it should be used on top of the site. Helps to keep the tour in sync with following updates and reinforce user learning by keeping the real context.

Use common hover idioms. Show extra buttons, links, drop-down toggle arrow or familiar icons.

User should be able to guess what cursor invitations action does. Or otherwise you need to tell what will happen. Especially when the action involves page refresh or going to a new state.


  • Designing Web Interfaces, Bill Scott, Theresa Neil