Feature discovery

NOTE: Help improve this page's content by giving feedback. Take a short survey.

New features can enhance the experience and unlock significant value for users. However, a user’s context plays a significant role in how they engage with new functionality. According to the FOGG Behavior Model, three factors impact people's behavior with regards to completion of tasks:

  1. Their ability to perform the task.
  2. Their motivation for the task.
  3. The prompt that triggers the behavior.

Prompts to trigger the desired behavior succeed when motivation and ability are high enough. We can improve a user's ability to perform a task by guiding them using discovery patterns and boost their motivation by clearly communicating the value of a task. Keeping these principles in mind helps us to improve both the experience and make it more likely that a user achieves their desired outcome.

Feature discovery patterns

PatternDefinitionExamplesRecommendation
Implicit discoveryFeatures are discovered naturally as the user interacts with the interface, without overt prompts or guidance.Navigation sidebar, empty statesPreferred
Contextual discoveryFeatures are highlighted in context, as the user reaches a point where the feature is relevant or useful.BadgeUse with justification
Disruptive discoveryFeatures or information are presented in a way that interrupts the user’s flow.Modal, bannerUse rarely

Implicit discovery

Implicit discovery patterns are the preferred approach to integrate features into the experience. Before you add feature discovery notices, explore solutions where the feature is not actively promoted. When the user can find features within the context of their existing tasks, they remain focused and are not overwhelmed. Ensure that the feature is introduced at the right moment, and that the call-to-action is clear and understood. This approach promotes long-term engagement with new features as the user organically builds an understanding of the product.

Contextual discovery

Before you consider contextual discovery, you should explore solutions where the feature is not actively promoted (see implicit discovery). Contextual notices are subtle UI elements that draw attention or explain a feature, such as additional text, a badge, or an icon. These notices should be positioned near the relevant context of the user’s task and avoid disrupting the user's workflow.

Under the button to create a project, a static notice shows that it's also possible to create a project with the command line.
A static notice informs the user of an alternate way to use the feature.

Contextual notices can be helpful when a feature requires more guidance than a call-to-action alone. If needed, allow the user to access more details through progressive disclosure. Ensure the help content is visible but don't overwhelm the user with too much information at first, and offer more details only when they seek it.

A badge with the label 'New' is shown next to a button. When the user hovers on the button, a popover appears and explains the feature.
Popover is shown upon button hover.

Use contextual notices when implicit discovery doesn’t suffice, for example:

  • Complex or novel features: Features that the user is not familiar with and need additional information to encourage engagement.
  • Limited visibility: When features are not noticed alongside competing actions and the user's previous mental models.

Disruptive discovery

Before you consider disruptive discovery, you should explore solutions where the feature is not actively promoted (see implicit discovery). Disruptive notices, such as a banner or modal, are more noticeable than contextual notices. When a notice is disruptive and doesn't match the user's current context, it can have limited effectiveness, because it the user feels it's irrelevant and dismisses it.

A banner invites a new user to try GitLab CI, with a call-to-action to try a test template.
A banner helps a new user onboard to an essential feature.

Use disruptive discovery when contextual discovery doesn't suffice, such as:

  • Critical notices: When engagement is required from the user. For example, to comply with a policy in the organization.
  • User onboarding: To guide a new user through essential features that they need to understand to use the product effectively.
  • Significant changes: When functionality changed in a way that could confuse a user or alter their workflows, a prominent notice can clarify the changes.

Be mindful of what notices already exist in the user's workflow. Multiple prominent notices and alerts can overwhelm them and lead to desensitization to important messages.

Onboarding

A well-designed onboarding process can be an effective way to introduce a user to a new feature, like CI/CD setup, or product stages, such as adopt the Secure DevOps stage. However, its primary goal is to showcase the value a user gains from these features and stages.

Guidelines for onboarding experiences

  • Identify the value that you're trying to give to the user and work backwards from that. Having a new feature that you want to showcase alone isn't a good reason for onboarding. What is the user-facing value of the new feature? How will they benefit from it?
  • Provide a "No, thanks" option that allows users to opt out.

Think about the user's context

The next step should be to think about the user's context. Where in the app are they? What are they doing? How familiar are they with what you want to show them? Do they have the ability to perform the task? Is their motivation high enough? If not, how will you improve their ability or increase their motivation? Where will you place the prompt so that it’s contextual?

Patterns for initial prompts

The following patterns can be used as initial prompts to start the onboarding flows. Consult the intrusion level, pattern effectiveness, and recommendations for each one when deciding which to use.

Pattern nameIntrusionEffectivenessNotes and recommendations
PopoverHighHighNo major changes to the UI required. Use at the beginning or end, not in the middle, of a complex flow or task. Use to guide a user through different pages.
UI modificationMediumMediumNot a reusable component. Can be used in combination with others but generally requires significant changes to UI. For example, an empty pipeline widget when no pipeline is present on the Merge Request page.
BannerLowLowMight require significant changes to the UI. For example, displacement of default elements.
Empty stateLowHighEmpty states can be used as great starting points for onboarding flows. They’re not intrusive as there’s no content to show; they can give context, explain the value, and provide a CTA.

Recommendations for writing copy and providing context

Consider the following recommendations to make your initial prompts more effective and contextual.

  • Always explain why the initial prompt is shown (for example, you don’t have a pipeline to check the quality of your code, we can show you how to set it up quickly.)
  • What is the value that the user will get from it (for example, it will make your code more secure and robust.)
  • Avoid generic CTA copy like “Let’s go” or “Show me how”. Use something that will tell the user what value they’ll get out of it so that even if they only scan through the copy of the prompt, they’ll still have a good idea of what it is they’re doing and what the result will be. Good example: “Secure your code”.

Follow-up prompts

Sometimes, the onboarding flow will span across different pages. When that’s the case, use the popover component to keep a user on the right path. The popovers can be animated in with a short delay after the page has loaded to make sure that they’re noticed.

How many steps?

When an onboarding flow expands across several steps (and possibly pages), try to aim for three steps. Five should be the maximum. If you think you need more, consider breaking it down into multiple and smaller flows. The more steps an onboarding flow has, the less likely it is that a user will complete it.

Last updated at: