Components and patterns

The best way to implement effective guided interaction is to use consistent patterns and components for onboarding and inline help. And to make this easier, you can use our Strato Design System's off-the-shelf guided interaction components. You can also follow the patterns we've detailed below when components are unavailable.

Overview

	Type	Prominence	Permanence*	TL;DR
App help menu	Pattern	Low	Persistent	Info checkpoint
Dismissible card	Pattern	Medium	Dismissible	Flyer
Expandable text	Component	Low	Persistent	Tell me more
External links	Component	Low	Persistent	Dive deeper
Feature highlight	Component	High	Dismissible	Spotlight
Information overlay	Component	Low, Medium	Persistent	Hint
Keyboard shortcut indicator	Component	Low	Persistent	Interaction tip
Microguide	Component	High	Elective	Tutorial
Placeholder text	Pattern	Low	Persistent	Nudge
Terminology overlay	Component	Low	Persistent	Glossary
Tooltip	Component	Low	Persistent	Reassurance
User feedback	Pattern	Low	Persistent	Opinions, ideas, insights

*We make distinctions based on the permanence of the pattern or component:

• Persistent: Contextual, non-dismissible help—when and where users need it.
• Dismissible: Contextual, dismissible help—ideal for first-time interactions or feature announcements. These components can't be recalled or revisited by the user.
• Conditional: Contextual, non-dismissible help—that only shows when certain conditions are met.
• Elective: Semi-contextual, optional help—ideal for users needing additional guidance. These components can be recalled or revisited by the user.

App help menu

We recommend adding a local, app-specific help menu to your app. This pattern is typical in Dynatrace Apps, and it helps orient users by showing them where to find further help and information.

(1) The fewest entry points we recommend including. It's sufficient for basic apps. (2) All suggested entry points. This is recommended for complex apps.

The app help menu is implemented as an icon button (variant: default, icon: HelpIcon) which triggers a menu component. Typical entry points in the app help menu include:

• What's new
• Documentation
• Getting started
• Keyboard shortcuts
• Share feedback
• About this app
• Version information

Not all entries are needed for all apps; however, we recommend at least including: What's new, Documentation, About this app, and the version information. As your app matures, you can add additional entries. You can find further details below.

Menu entry	Icon	Behavior
What's new	WhatsNewIcon	Links to your release notes. Release notes can be documented in: Dynatrace Documentation Dynatrace Hub Dedicated modal/screen in your app Anywhere else that will be accessible to your app's users
Documentation	DescriptionIcon	Variation 1: Links directly to your app documentation's home page. Variation 2: Triggers a multi-level menu with multiple links to relevant documentation pages (see image above).
Getting started	GuideIcon	Triggers a multi-level menu that contains an overview of all your app's microguides.
Keyboard shortcuts	KeyboardIcon	Shows available keyboard shortcuts.
Share feedback	FeedbackIcon	Links to your chosen means of gathering user feedback.
About this app	InformationIcon	Links to the details page of your app listing in Dynatrace Hub.
Version information	N/A	The recommended pattern for this is [app name] followed by [version number]. This is implemented as a Menu.Label and isn't a clickable entry.

Dismissible card

A dismissible card is a noticeable but non-intrusive pattern to provide non-critical information. It's a simple card that users can consume quickly and dismiss easily; however, it doesn't force immediate acknowledgment (or dismissal) from the user (unlike the feature highlight component). This allows users to read, return to, or act upon the information when it suits them. This component doesn't have to be anchored to a particular UI element. A dismissible card can be implemented as a surface component. Learn more about the surface component implementation guidelines.

Dismissible cards can communicate non-critical information without demanding user acknowledgment and without permanently cluttering the UI.

Use this when

Don't use this when

You want to communicate new features, functionality, or other changes that aren't immediately apparent in the UI. You want to raise awareness for relevant content that's not necessarily related to product functionality. You want to give users onboarding information that's relevant and helpful but slightly less important than other content.

You need to communicate critical information. We recommend using the more prominent feature highlight component to give users essential information. You need to share information users might need to refer to again—dismissible cards can't be recalled. You need to explain more complex concepts, features, or functions—we recommend breaking these explanations down with microguides or including a relevant link to supplementary information (for example, documentation or blog post).

Best practices

• Use a relevant image, illustration, or icon to draw the user's attention to the card and your content.
• Don't combine multiple dismissible cards to fill up an empty page.
• You can replace the dismissal X with a button that requires an active acknowledgment from the user.

Writing guidelines

• Use a clear, concise heading to communicate the essence of your announcement.
• Don't include a full stop at the end of the heading.
• Keep the body copy to a maximum of two sentences and eliminate as many words as possible without changing the meaning or message.
• If you're including a link, use descriptive link text and an external link icon if necessary.
• If using a button instead of the dismissal X, the button copy should be one or two words of acknowledgment. You can use Got it as a conversational alternative to OK.

Expandable text

An expandable text component is a great example of progressive disclosure. By default, only a portion of the text is visible, and users select a designated link to expand the content and view the complete text.

This interaction provides a way to present condensed information upfront while allowing users to access additional details if desired. The expand and collapse functionality is non-intrusive, so it's suitable for sharing non-critical information. This component also allows you to manage longer content in a limited space. Learn more about the expandable text implementation guidelines.

Use this when

Don't use this when

You want to give users additional, non-critical information inline and in a non-intrusive way. The user doesn't need very detailed information—in cases where they do, we recommend linking to documentation. You need to give users a lot of information but don't want to overwhelm them with excessive content upfront. Managing content in areas with limited screen space, where vertical scrolling need to be minimized.

The complete text is essential for understanding the context or making a decision. In such cases, displaying the full content by default is better. For critical or time-sensitive information that requires immediate visibility to all users without requiring user interaction. You need to share extensive information, for example, more than three mid-sized paragraphs.

Best practices

• Critical information must never be hidden, but the expandable text can be used to provide additional explanation if users need it.
• If the expandable text is still insufficient to provide a full explanation, an external link can also be used to direct users to further information in the relevant documentation.
• Indicate that the text is expandable by following the design and implementation guidelines. If the text is expandable, it also needs to be collapsible.

Writing guidelines

• Use Show more and Show less as the button labels, rather than Read more and Read less.
• While Show more can go on the same line as the collapsed text, Show less should be on the line below the expanded text.
• Consider the context and user need by providing relevant and meaningful content in the expanded section. Keep the text in the expandable clear, concise, and useful, even though it won't be read by all users.
• Even if users need a lot of information, don't hide walls of text behind expandable text.
• Avoid abruptly cutting off sentences or phrases when collapsing the text; ensure a smooth transition.

External link

An external link component gives users a clickable element that redirects them to an external webpage or resource outside the Dynatrace platform. It allows users to access additional information or navigate related content beyond the immediate context. Learn more about the external link implementation guidelines.

Use this when	Don't use this when
You want to point users to additional related but non-critical information outside the Dynatrace platform. You want to give users a chance to explore a topic further in a dedicated resource (for example, relevant documentation). You want to integrate with external services for specific functionalities.	The information is critical. Critical information should never be hidden from the user using a progressive disclosure mechanism, c. When it's crucial to keep users within the application or website, especially for tasks that require a seamless user flow or discourage distractions. When the linked content isn't trustworthy, secure, or aligns with the principles and policies of the platform.

Best practices

• Don't link the whole sentence; instead, link the text that tells the user where they will go (the destination), as in the examples above.
• Clearly distinguish the external link with appropriate visual cues like an icon or underlined text to indicate its nature. Learn more about following the design guidelines.
• For links that lead to third-party resources: Consider adding a disclaimer or information about the external content if necessary, such as indicating if the link leads to a different website.

Writing guidelines

• Use clear and concise text that accurately describes the linked content, avoiding vague or generic phrases like click here.
• Ensure the link text provides sufficient context for users to understand the destination without relying solely on surrounding text.
• Follow sentence case capitalization for the link text. This means only capitalizing the first word of the text and any proper nouns or acronyms that follow.
• Include a period (.) directly after the external link icon, with no space in between.

Feature highlight

Feature highlights are flexible and ideal for highlighting specific content or elements. It can highlight and emphasize important information, features, or visual elements to guide users' focus and enhance their understanding of the interface. This component is suitable for one-off, contextual announcements since it can only be viewed once.

However, as they're generally proactive (triggered by the system, not the user), they're also intrusive. Because of this, we recommend using this component sparingly. Learn more about the feature highlight implementation guidelines.

(1) Feature highlights are great for drawing attention to essential interaction concepts. (2) Only one feature highlight should be visible at a time.

Use this when

Don't use this when

You want to direct the user's attention to something specific on the screen (for example, a new button after a feature release or a significant change in the interface). You want to draw a user's attention to something that might not be immediately visible or obvious in the interface. In conjunction with another action (for example, when a user dismisses a microguide, and you want to indicate how it can be reopened).

You need to communicate a longer message (three sentences or more)—it's more likely users will dismiss it in this case. The user may need to refer to the information again—these overlays can't be revisited, so they should be used for non-critical, once-off announcements only. You want to build a product or interface tour. We strongly advise against this, as it goes against the principles of guided interaction. The content isn't highly relevant or doesn't provide meaningful value to the user. If users don't get any value from this content, they'll get used to dismissing the component without reading it.

Best practices

• Be selective when using this component—although it doesn't block interaction with the UI, dismissing many of them can annoy users.
• Make sure it's positioned so that it's easy for the user to see and interact with.
• The purpose of this component is as a once-off mechanism to draw a user's attention. Ensure that once it's been dismissed, no other conditions allow it to be displayed repeatedly. This will annoy the user.

Writing guidelines

• Use a clear and concise heading without a period. Use question form sparingly. Don't repeat the headline in the body text.
• Limit the body text to two sentences and use periods. Keep the text informative but brief and action-oriented, avoiding excessive details or overwhelming users with lengthy explanations.
• The button copy should be one or two words of acknowledgment—you can use 'Got it' as a conversational alternative to OK.

Information overlay

An information overlay is a way to tell users that additional information or context is available about a specific feature, element, or concept within the interface. Depending on the variation used, it can also indicate that there is something they need to act on.

The information overlay has five variants: neutral, primary, success, warning, and critical. These can all be used as an icon only or with additional trigger text. Learn more about the information overlay implementation guidelines.

(1) Use information overlays to help people discover not-so-obvious functionality. Links to documentation help, too. (2) Don't use information overlays if the information is critical for completing the task.

Use this when

Don't use this when

You want to provide persistent help or feedback in an unintrusive way, for example, a simple info-icon that shows additional help when selected. You want to add interactive elements to the overlay content, for example, external links to help or documentation. Clarifying the purpose or functionality of a specific UI element, especially if it may not be immediately obvious to users. Offering helpful tips, instructions, or guidance to users on interacting with a particular feature.

If you provide users feedback with the error/warning information overlay, they won't be able to dismiss the component (for example, in comparison to a toast). You need to show critical information or request input to complete a task. In these situations, we recommend using a modal. When the information provided is redundant, unnecessary, or doesn't add value to users' interaction or comprehension. If the information is already clearly conveyed through intuitive design, labels, or contextual cues, minimizing the need for additional explanations.

Best practices

• Ensure the Info button is close to the relevant UI element, providing clear visual association.
• Use the warning and critical variations in combination with trigger text, and use these with caution—because these are small icons, they can easily be overlooked by users. Critical and warning information should be communicated to users without relying on progressive disclosure mechanisms.
• Provide an outbound link—with a descriptive link text—for additional help if available.

Writing guidelines

• Headings are optional—if you use one, keep it concise and skip the end punctuation. If you used a headline, don't repeat it in the body text.
• The body text should convey your message clearly and in one or two sentences. Focus on providing essential details without overwhelming users with excessive text.
• Don't use alarmist language that causes needless worry or panic when using the warning and critical variations. Clearly state the situation, and provide actionable next steps.

Keyboard shortcut indicator

A keyboard shortcut indicator is a visual element or cue used in user interfaces to display the keyboard shortcuts associated with specific actions or commands. It serves as a helpful reminder and reference for users to quickly access functionality using key combinations instead of relying solely on mouse-based interactions. This indicator helps users discover and remember shortcuts, promoting productivity and faster interaction with your app. Learn more about the keyboard shortcut indicator implementation guidelines.

Use this when

Don't use this when

A shortcut would help the user get started. For example, you could provide the shortcut for adding a code section to a notebook. Users are likely to repeat an action many times. Promoting or encouraging commands that will streamline users' workflow and increase their efficiency. Enhancing accessibility by offering an alternative input method for users with motor impairments or those who prefer keyboard-based navigation.

The action or command is uncommon or infrequently used.

Best practices

• Don't introduce too many shortcuts simultaneously—this could overwhelm the user.
• Ensure keyboard shortcuts are hidden on mobile views.
• Display the keyboard shortcut indicator near the corresponding action or command, ensuring a clear visual association.
• Include a Keyboard shortcuts entry in your app help menu that includes all your app's shortcuts.

Microguide

A microguide is a valuable tool for helping users understand how to use an app or parts of it. It's a quick and easy way for users to learn without reading lengthy instructions or tutorials. Microguides are shown in a small modal window with a maximum of five steps. This makes them easy to understand and follow. Microguides can be used to introduce key features, explain functionality, or provide step-by-step instructions.

The microguide component aims to help users quickly understand and familiarize themselves with your app's essential features and navigation. It aims to streamline the onboarding experience by offering concise and contextual guidance, reducing the learning curve, and increasing user engagement. This component was designed to be non-intrusive, allowing users to dismiss or skip the guidance if they're already familiar with your app or prefer to explore independently. Learn more about the microguide implementation guidelines.

Use clear images and concise copy. (2) Allow users to revisit your apps' microguides from the app help menu. (3) Dismissible cards are a great way to trigger microguides, especially for first-time use. (4) Make sure your images aren't too small. It's always good to test with users._

Use this when

Don't use this when

Introducing new users to your app's essential features, functionality, or concepts. You want to introduce users quickly to a concept or feature that isn't intuitive, obvious, or immediately discoverable. You're explaining advanced functionality that's not easy to find, for example, if you've hidden it to keep the UI clean for casual users.

You're explaining basic functionality. Users should be able to understand the simplest tasks intuitively, and adding microguides shouldn't feel like unnecessary clutter. You're trying to explain a confusing UI. Microguides can't fix bad product design; they're an optional addition to your onboarding, not a crutch. If your user base consists primarily of experienced users who prefer to explore the application independently without instructional assistance (for example, settings or configuration interfaces).

Best practices

• Provide a link to relevant documentation that allows users to dive deeper into a topic.
• Use high-quality images or GIFs that work at the small scale of a microguide. Test your images for understandability and clarity. You don't have to include an image if they don't add value.
• Critically consider the relevance of each step of the microguide and remove steps that won't add value.
• Allow users to dismiss or skip the guidance if they're already familiar with your app or prefer to explore independently.
• If you have an introductory microguide, trigger this automatically the first time a user opens your app. When the microguide is closed, use a feature highlight to show the user where they can retrigger the guide.
• Microguides don't have to be triggered from the local app help menu. You can also trigger these from any other button or relevant element.

Writing guidelines

• Use an action verb (see the image above) as part of a concise heading, and don't use a period.
• Keep the body text to a maximum of two sentences and use end punctuation. Remove any words you can without altering the meaning. Concise explanations allow for better scannability and information retention.
• Use clear language, and avoid jargon or technical terms that might confuse new users.
• Use the body text to give the user essential information about the concept, feature, or functionality. Ensure your copy reflects what's in the image or GIF and vice-versa.
• Use Next and Back for the button copy, except in the final step, where you can use Done instead of Next.

Placeholder text

Placeholder text refers to temporary text that appears in an input field, form field, or text area. It provides users with a visual cue or example about the field's expected input format or purpose. It can help guide users in providing the appropriate data by offering a visual prompt or example. Most Strato components support placeholder text by default.

Use this when

Don't use this when

It might not be obvious to the user what should be entered in an input field. Communicating field-specific instructions or context, such as Search for products in a search field. Providing hints or examples of the required input format, for example, DD/MM/YYYY in a date field.

The input field is self-explanatory, for example, name or email. The placeholder text shouldn't duplicate the field label. The placeholder text is excessively long or too detailed, making it harder for users to read or understand. If the form field requires a substantial amount of text or content, as placeholder text may not be an effective solution for larger input areas. You want to indicate that completing an input field is mandatory; use an asterisk in this case.

Best practices

• Placeholder text shouldn't replace proper labels or instructions, as it may not be accessible to all users. Providing clear inline help alongside the placeholder text ensures accessibility and comprehensive guidance.
• Ensure that the placeholder text disappears when users start typing or interacting with the field so it doesn't interfere with their input. Strato components that support placeholder text take care of this automatically.

Writing guidelines

• The placeholder text should be concise, useful, and indicate to the user what they should enter in the form field or provide examples of search or filter terms.
• Consider the context and target audience when determining the level of detail or specificity for the placeholder text.
• If you provide an example in a form field placeholder text, use For example instead of e.g. or i.e..

Terminology overlay

Understanding technical vocabulary and concepts is key to working with Dynatrace effectively. The terminology component shows explanations and optional learning resources when a user selects the relevant term or phrase. This component provides a convenient way for users to access contextual information about terms without cluttering the interface with constant visibility of definitions.

Providing clear and accessible definitions within the interface reduces ambiguity and improves comprehension, especially when dealing with technical or domain-specific language. Learn more about the terminology overlay implementation guidelines.

Use terminology overlays to explain product-related concepts in situations where it matters.

Use this when	Don't use this when
You want to ensure that users understand concepts or terminology in your interface, for example, section headings or descriptions. Providing additional details, explanations, or definitions to enhance users' understanding of a concept or term.	You think most users will understand the term. If you're not sure, user research can show you which copy and concepts users do and don't understand. Users need immediate visibility of definitions while interacting with the term, as the overlay requires user interaction to trigger.

Best practices

• Keep your message concise (one or two sentences) and engaging.
• Provide outbound links—with a descriptive link text and external link icon—to additional resources if available.
• Check the glossary to see if the term you're describing already has a definition. If it does, make sure your definition is aligned with this.
• The terminology component should be used to provide a definition. An information overlay might be more suitable if you need to provide other information.

Writing guidelines

• You don't need a headline or button copy.
• Explain the terminology in one to three short sentences (ideally fewer than 50 words) and remove any words you can without changing the meaning.
• Focus on giving the user two or three key pieces of information or a concise overview of the term—it should be readable in a few seconds.
• Keep your language simple, so you don't describe an unknown concept with unknown vocabulary or technical jargon.

Tooltip

Tooltips display additional information, explanations, or context about a particular element or feature when users hover over it or briefly place the cursor on it. Tooltips support guided interaction by letting users learn in context as they explore and interact with your app. Learn more about the tooltip implementation guidelines.

(1) Tooltips help to use screen real estate efficiently. (2) Tooltips are a great way to make keyboard shortcuts discoverable.

Use this when

Don't use this when

You want to help users feel confident about their actions. You want users to know what to expect before selecting an icon or button that may not have explicit labels or may require further clarification (for example, for rarely used or high-impact actions such as deleting). You need a lightweight option for instructional or supporting text to explain an interaction or icon. You want to reduce visual clutter and cognitive load without sacrificing understandability.

You need to show long instructional text—if your text is more than one brief sentence or phrase, a custom overlay might be the better option. You need to include a link—tooltips aren't focusable, so you can't place links in tooltips. The information you include is critical to completing a task. In this case, it's better to include the text directly in the UI.

Best practices

• Reassure users that they're selecting the right action.
• Make sure the tooltip appears in a location that's easy for the user to see and read, preferably without overlapping or obstructing other important content.
• In mobile or touch-based interfaces, where hovering isn't applicable, alternative methods such as tap-and-hold or long-press can be considered. See the Strato accessibility guidelines for further information.

Writing guidelines

• Keep your text clear and concise—ideally one or two words and a maximum of one short phrase or sentence.
• Don't use a period at the end of the text, even if it's a complete sentence.
• Make sure the text and terminology you're using are consistent with usage across other apps.
• Use simple language and avoid technical jargon, making the tooltip easily understandable for many users.

User feedback

Getting users' feedback on your app is crucial. At a minimum, we recommend including a link for gathering user feedback in the local app help menu. This allows users to provide feedback, suggestions, or report issues regarding your app.

It gives users a chance to express their thoughts, opinions, or concerns, and lets them contribute to your app's improvement and roadmap. This menu entry can be used to:

• Link users to the Dynatrace Community or another support community.
• Link users to a feedback or review form.
• Trigger a survey.

If there is a specific feature you'd like targeted feedback for, we recommend a user validation pattern. It consists of:

• an up/downvote indicator to confirm the helpfulness or accuracy of the provided information
• an optional free-text field for users to provide feedback on what did or didn't meet their expectations

Lastly, we highly recommend tracking user engagement and adoption metrics. This may not be typical user feedback. Still, a quantitative indication of how your app is performing will help you identify where users are dropping off and what user journeys or features can be improved—you might even identify opportunities for improving your app's onboarding and inline help. Learn more about how to consume self-monitoring data.