Spotlight

A spotlight focuses attention on a specific piece of UI, like a button or an icon. It can also be used to guide users through tasks that require multiple steps to complete. Only a single spotlight should be used on the screen at one time.

1. Spotlight area: The section of the UI that you want to call attention to. It can be rectangular or circular. Typically this is an isolated location like an icon, button, or text field.

2. Message: Try to restrict messages to three lines in length. Showcase a single change or update and concentrate on the benefit to the user. Try to avoid just naming the function.

3. Action: In a multi-step flow, this will be the skip and next buttons, in spotlights where you want a user to try an action, this should lead to that (single) action.

4. Pulse: Subtle pulse animation to draw attention to the spotlight area.

5. Blanket: A translucent overlay that covers the rest of the screen that is not being spotlit.

The spotlight card is flexible and can be tailored for different contexts. You should design the content of your card to support the goal of your design solution.

1. Stepper: Step through a series of cards to communicate multiple benefits of a single focus element or subsequent benefits for a related task. Avoid using this to show the actual steps of a task.

2. Secondary button: Include a primary and secondary action. Best practice is to allow the user to skip or dismiss the spotlight.

3. Spotlight area action: Include a call to action for the user to interact with functionality within the spotlight area.

4. Illustration: Include an illustration if it enhances the understanding for the user, and does not distract. Illustrations should be composed of metaphorical imagery that relates to the spotlight content or benefit.

5. Title: Include a title to inspire or draw the user into a message that may positively impact them, but may be ignored.

The position of the spotlight card is flexible and will be repositioned depending on how close the element is to the edge of the screen.

The spotlight area should have a subtle pulse animation to draw attention to the focused area.

• Keep the entire flow in mind. Sequence tasks or messages in a logical way to increase success. 

• Always offer a dismiss option at each step. Don't force people to participate.

• Ideally, spotlights should only have a single step. Try not to overwhelm people with too much information. Try and combine and/or eliminate tasks where possible.

  Aim for 3-4 steps as a maximum. People only need enough information to get them started.

• Use them to make complex ideas more accessible.

• Maintain visual continuity through your messages.

• They can be metaphorical and designed in conjunction with UI copy.

• Efficiently convey brand personality.

• Don't use them as decoration or without consideration.

• Use them as a tool to guide people in the right direction.

Titles

• Titles are optional however, use the title to communicate the main benefit to the user.

  • For example, "Manage your work" instead of "Work types".

• Write in sentence case with appropriate punctuation.

• Spotlight titles are a good place to add wink.

• Try to limit titles to three words, although four words are permissible if you are using a short article like “an”, “a”, or “the”.

• Personalize where you can.

  • For example “Your room”.

Message copy

• Include: the benefits of a feature or functionality, and why it's important to the person seeing it.

• Try to keep the text length to two lines at the product's minimum supported size.

• Be considerate of peoples time and patience. Short bursts of information are better. Don't repeat content from the title.

• If you talk about an element or a location within the body of the spotlight message, that element should be visible on the screen at the same time. Don't talk about things that the viewer can't see.

• Avoid having people look in another location for more information, but if it cant' be avoided, use a “Learn more” link.

• When leading people through the steppers of a spotlight use "Next".

• An option to dismiss or cancel lets people feel reassured that they can opt out.

• For the last step in a series of steps, for any new or modified First Impression which closes a spotlight message, or to end a product tour use "OK".