PatternFly

Product tours

A product tour, also referred to as an "onboarding flow", includes a series of dialog boxes or pop-ups that introduce users to a new tool or a redesigned tool.

In product tours, your UX copy is never intended only to tell a user how something works. You need to convince them that using and learning about the product is worth their time.

When writing a product tour, refer to the following best practice guidelines and their respective before/after example:

  1. Focus on the user’s goals: Emphasize what the user can do with the product.

    Before
    After
    We introduced a new feature for designing called Flyer Fact. Discover how it works by taking a tour to learn more.
    OK | Cancel
    Create consistency and design faster with Flyer Fact.
    Start tour | Not now

  2. Be conversational: Imagine that you’re sitting beside the user and walking them through the product. Avoid jargon and be casual.

    Before
    After
    There are three major areas of Flyer Fact: components, layouts, and documentation. These are for designers to utilize in order to build user experiences that serve the needs of their users.
    Create accessible and intuitive interfaces with Flyer Fact’s components, layouts, and documentation.

  3. Empathize with the user: Learning new things can be scary, so don’t stuff your onboarding flow with exclamation marks, and avoid telling the user how hard you worked on the new tool or how excited you are. Instead, understand that the user might be a little intimidated and focus on giving them information and guidance in a straightforward way.

    Before
    After
    We are so excited to announce the Flyer Fact redesign! We can’t wait to show you around.
    Flyer Fact has a new look. Let’s explore what you can do.


View source on GitHub