Items in Beta - How to present & content
Design type: Badges | Product area: Hybrid Cloud Console
Author: Kevin Hatchoua
Last edit: March 21, 2023
General design principles
1 - Prompt the user to use Beta
Users do not know what is available in Beta without being told. As a business, we want to get more feedback on Beta features and as a user, we would expect that our Beta features can add more potential value for them by giving them new features.
To advertise Beta, use the Beta flag on various items:
2 - But do not over-sell
Although we want users to try Beta, items in Beta items are not appropriate for production use cases. Therefore, part of the balance in design is to “advertise” but not to “over-advertise”.
Prompts for Beta should never interfere with the user’s primary workflow or take too much visual real estate.
3 - Offer in-context switching
Users should be able to switch to Beta while in the context of the task they are doing.
- If they are in the middle of a flow, the flow should save and resume
- Users should return to the exact screen they were on upon switching to Beta
Note about language: This doc uses “Beta” to describe any item that is in the /beta/ environment, and available for users to use. These are typically items in Public Beta. If the language changes (e.g. Beta → Preview, or similar), the principles still apply but the language for this doc will need to be updated.
Standard pattern - Entire nav item in Beta
Entering Beta
If there is a navigation item that is available in Beta, label it using the Beta tag.
The Beta tag can be applied to both main navigation items and to sub-items.
Link to front-end component/eng doc
Example of Beta tag in navigation
Styling and spacing
The user is able to click into the navigation item that has the Beta flag.
Upon selection, a modal dialog opens over the entire page to describe that users can access Beta.
This modal should be associated in Pendo tracking so that the interest level in the feature can be gauged.
Link to eng component for this
Modal dialog
Content for Modal Dialog:
Try [Feature name] in our Beta Environment
The [Feature name] feature is still in development. To try [Feature name] and other new features in an active development space, visit our Beta Environment at console.redhat.com/beta. Because the [Feature name] feature is in a beta pre-release stage, you might find bugs or issues with availability, stability, data, or performance. You can leave the Beta Environment at any time. Learn more about the Beta Environment.
[Try the Beta Environment - Primary button] |
As of 11/1, the correct link for “Learn more about the Beta Environment” is: https://access.redhat.com/support/policy/updates/red-hat-insights/lifecycle
After entering Beta
After entering the beta experience:
- “Beta” tag is no longer shown on nav
- “Beta” indicator is shown in masthead
- When in a Beta feature, show “Beta” banner
The Beta banner is a blue banner with a pop-over that describes more about Beta and how to use. This banner should be shown on all pages that are in a pre-release state.
This banner is sticky and at the top of the page.
Engineering components
Showing Beta banner
Content for Beta pop-over:
This feature is still in the beta pre-release stage. You might find bugs or issues with availability, stability, data, or performance.
[Learn more about the Beta Environment] |
As of 11/1, the correct link for “Learn more about the Beta Environment” is: https://access.redhat.com/support/policy/updates/red-hat-insights/lifecycle
Additional Patterns
Beta as an action item only
There are cases in which an entire navigation item is not Beta, but an individual action is.
In this case, add the “Beta” label to the action launch point.
If the user chooses to enter Beta, they are subsequently taken to the action itself.
Beta label in an action menu
Beta label in a wizard, as the action in the example above would launch a wizard
Beta in Context
Beta also may need to be advertised in context when there is no clear CTA (such as a button, action item, or navigation item).
The “Beta” tag should be used in this case as well to keep the advertising of Beta consistent throughout the application. Beta should also be available with one click.
Upon entry to a page that has beta components mixed in, the Beta banner should be shown.
In-context advertisement for Beta