Experimental Features
The goal of the experimental features pattern is to provide a notice to the user that they are entering an area of the application that may not be finished and is not considered to be the final release. Experimental Features are often items that, while still in progress, are released for use in order to collect information from users, as well as experiment with different patterns, interactions, visuals and development methods. An experimental feature flag is especially useful when you wish to test out alpha or beta features in a production environment, with real users.
This pattern should NOT be used when:
- You do not plan to ever remove the feature flag. Experimental Features are items that you are either experimenting with that will eventually become full features of your application, or items that will be removed from the system if they are proven to not work well.
- As a permission model. This pattern should not be used as a way to separate areas of the UI that might have limited permissions for the user.
The experimental feature pattern can be utilized in three different manners:
Application Level:
Tab Level:
Component Level:
Experimental Features
Entry Screen
- Icon: We utilize the flask icon from Font Awesome (fa-flask) to represent an experiment. This same icon can be used to indicate that a page or a feature is experimental.
- Title: The title is given as “Experimental Features”, but can be changed depending upon project requirements.
- Text: This text should state what the experimental feature entails, as well as any information that you want to present to the user. We recommend that, at a minimum, you give a warning around an experimental feature and the level of stability or data longevity provided.
- Agreement Checkbox: An opt-in checkbox with text that states the user agrees to use the experimental feature, with guidelines and/or warnings as stated in the above paragraph.
- Primary Action Button: The primary action is displayed in a disabled state until the user accepts the agreement for using an experimental feature. Once that checkbox has been checked, the button transitions to a green button with white text.
Entry Screen in Context
- Placement: The experimental feature bar and border are placed around the content of the screen, even after the user has activated the particular experimental feature. It is designed to clearly delineate the differences between an experimental and non-experimental feature.
- Any navigational items are still displayed, so that a user can leave the experimental features screen without having the make a decision on accepting the agreements.
Experiment Features Action Bar
The Action Bar is made up of two action items: “Got it!” and “More info”.
-
Got it!: The “Got it!” text is a button link that is used to minimize the action bar. If you always want the bar to be displayed with the “This feature is experimental” text, you can remove the “Got It!” button and action. This should not be used in place of the term acceptance.
-
More Info: The “More info” link is utilized to see additional information on the experimental feature that the user is attempting to use. When the bar has been minimized, the flask button, in the upper right will remain visible. This will allow the user to access more information on the experimental feature (if applicable), at any time during the use of the feature. Alternatively, this can just remain a static visual element if there is no further information to link the user to.
- The default behavior should be that clicking on “More Info” would bring you to another page, explaining the experimental feature.
- Optional: Add a tooltip to the “More Info” flask icon to remind the user of what they are clicking on.