Guides overview

Guides created in the Visual Design Studio in Pendo OEM fall into two categories: overlay guides and embedded guides. These guide types appear differently in your application and are designed for different use cases.

This article explains the differences between overlay and embedded guides, when to use each type, and best practices for creating effective guides.

Guide types

There are two main guide types created with the Visual Design Studio in Pendo OEM:

• Overlay guides. Overlay guides appear over the top of your application as a lightbox, banner, or tooltip. Overlay guides are good when you want to provide step-by-step walkthroughs, guidance that highlights specific elements in your application, and information that you want users to notice.
• Embedded guides. Embedded guides are integrated directly into your application to provide contextual information that flows with the rest of a page in the application. Embedded guides are good when a badge-activated guide is too subtle for your message but a lightbox or banner is too obtrusive.

The following table summarizes the main differences between guide types:

Themes and layouts

• Themes allow you to set the format and style of the building blocks used in guides. This helps you efficiently create visually consistent guide content. 
• Layouts allow you to save templates consisting of specific building blocks for reuse. You can also organize layouts into categories to help you select the most effective guide layout to achieve the purpose of the guide. 

Overlay guide use cases

Use overlay guides for situations like the following:

• Guiding visitors to a specific element in your application with a badge.
• Walking your visitors through a new process. You can transition visitors through a walkthrough using buttons or by pointing to specific UI elements.
• Creating a tooltip that opens next to a specific feature or element.
• Creating a warning or notification that appears as a banner at the top of your screen.
• Delivering polls and surveys to visitors, such as product feedback polls.

There are several types of overlay guides that serve different purposes: tooltip, lightbox, and banner. These guides can be activated in various ways, depending on your use cases. You can:

• Configure a guide to open automatically whenever a visitor opens a page in your application. This is most common for lightboxes and banners.
• Configure a guide to launch whenever a visitor interacts with a badge or UI element. This is required for tooltip guides.
• Add guides to a Resource Center to provide on-demand access to guides that visitors can open whenever it’s convenient for them.
• Configure a guide to consume a specific button selection and launch a guide that asks the visitor to confirm the action.

Consider the goal of the guide before choosing an overlay guide step type:

Tooltips

Tooltips point to a location in your application’s UI. They can be activated automatically, with a badge, or by interacting with an element in your application. Use tooltips for helpful, but non-urgent, microcontent, such as:

• A tip or actionable advice.
• A description for an unlabeled icon.
• A new feature announcement.
• Information about a keyboard shortcut.
• A link to more information.
• Highlighting access to additional features or capabilities.

Don’t use tooltips for:

• Critical information that’s vital to task completion.
• Obvious or redundant text, like repeating button copy.

Lightboxes

Lightboxes are pop-up windows that can be activated automatically, through a badge or target element on the page, or as a confirmation modal when a visitor selects a button or link in your application. Use lightboxes for mission-critical messages and engagement, such as:

• Announcing a new feature or functionality.
• Confirming a potentially destructive action.
• Onboarding users through setup and key features for getting started.
• An event announcement that’s directly relevant to the segment.
• A compelling offer that’s directly relevant to the segment.
• An error message or alert that guides the visitor to a resolution or source of support.
• Research and testing.
• Sign-up forms for things like beta recruitment, a demo, or webinar attendance.

Not every release needs a pop-up window that interrupts the user's flow. Avoid using lightboxes:

• For non-urgent, low-impact, or non-actionable content.
• That will appear during critical task flows.
• On a login or landing page, unless this is to guide the user through onboarding steps.
• For lower-level information that could be a better candidate for a tooltip.

Banners

Banners are notifications that appear across the length of the page at either the top or bottom of your application. Use banners for simple messages that are important or time-sensitive, or for straightforward messages that require user action, such as:

• Outages and bug awareness.
• Issues with high user impact.
• Issues that could cause an influx of support tickets.
• Time-sensitive offers, such as a seasonal sale.
• A required action, such as dealing with payment issues.
• A simple poll, such as Customer Satisfaction Score (CSAT).

Don’t use banners for:

• Multi-step guides.
• More detailed information.
• Non-essential updates.
• Information that could be presented in a more integrated way, such as with an embedded guide.

Embedded guide use cases

Use embedded guides when you don’t want to distract or interrupt your visitors, or you want to deliver an important message without covering critical parts of your navigation. Use embedded guides for situations such as the following:

• Advertising a new feature, event, or webinar on your login page to drive engagement and increase inbound interest.
• Delivering a routine message or legal notice, such as a service maintenance announcement, new terms of service, or updated privacy policies.
• Embedding an upsell or cross-sell message next to features or functionality in your application that customers don’t yet have access to.
• Providing extra information for visitors filling out a form.
• Reminding visitors of actions they need to take by a specific date.
• Testing new UI elements and gauging their impact before development.
• Establishing a designated informational space in your application.

Best practices

Regardless of the type of guide you're creating, we recommend that you consider the following:

• Goals: Define the type of behavior you want to elicit with a guide before creating one.
• Audience: Define the segment that you want to deliver your guide to.
• Brevity: Use short, effective messaging, with as few steps as possible, enough to keep visitors informed and engaged.
• Intuitiveness: Use intuitive interactive elements (buttons and links) and behave as the visitor would expect based on clear and concise text.
• Relevance: Create guides that enhance the user experience rather than interrupt it. Personalize guides based on visitor behavior and preferences to increase the effectiveness of in-app guides, making them more relevant and engaging for your visitors.

Some best practices depend on the guide type that you choose.

Best practices for overlay guides

Have a clear goal in mind for your guide and consider the user experience, like avoiding interruptions where possible and reducing guide fatigue.

• Volume: Don't overload visitors with too many guides. Employ a guide strategy and guidelines to help guide creators decide when a guide is appropriate. 
• Repetition: If visitors aren’t taking action after seeing a guide, reconsider your guide design, messaging, or friction rather than spamming your visitors.
• Planning: Consider the guide's goal before choosing a guide container (tooltip, lightbox, or banner) and an activation method (automatic, badge-activated, element-activated, or confirmation). 
• Design: Ensure your guides are visually consistent with the overall design of your web or mobile applications. Use guide templates and global CSS to maintain a consistent design across your guides.

Best practices for embedded guides

• Design: Work with ‌your OEM partner or product team to ensure that the guide fits in well with the rest of your content. Check that themes and styles are consistent with the rest of your brand.
• Dimensions: Keep the dimensions of the guide’s container in mind. Content might be affected by the CSS of the container in your application.
• Location:  Don’t replace an existing element with your embedded guide unless it's a background image that isn’t essential to the page.
• Carousels: Instead of creating multiple guides embedded into the same location, consider creating embedded guides with multiple steps. Because there’s no content ordering with embedded guides, you can’t guarantee the order of multiple guides, but you can control the order of steps in an embedded guide.