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.

Experimental Feature layout

The experimental feature pattern can be utilized in three different manners:

Application Level:

Experimental Feature in context

Tab Level:

Experimental Feature in context

Component Level:

Experimental Feature in context

Experimental Features

Entry Screen

Experimental Features with Callouts

  1. 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.
  2. Title: The title is given as “Experimental Features”, but can be changed depending upon project requirements.
  3. 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.
  4. 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.
  5. 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.

Experimental Features with Callouts

Entry Screen in Context

Experimental Feature in context

  1. 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 to accept the terms agreement.

Experimental Features Action Bar

Experimental Feature in context

Experimental Feature in context

The Action Bar is made up of two action items: “Got it!” and “More info”.

  1. 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.

  2. 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.

PatternFly Core Example


Jump to Entry Screen or Identifier

Experimental Features Entry Screen

This feature is experimental. Got it!

Empty State Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn more about this on the documentation.

Reference Markup

<div class="experimental-pf">

  <div class="experimental-pf-bar">
    <span id="experimentalBar" class="experimental-pf-text">
      This feature is experimental.
      <a id="acceptMessage">Got it!</a>
    </span>
    <button class="experimental-pf-more-info">
      More info <i class="fa fa-flask"></i>
    </button>
  </div>

  <div class="blank-slate-pf">
    <div class="blank-slate-pf-icon">
      <i class="fa fa-flask"></i>
    </div>
    <h1>Empty State Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Learn more about this <a href="#">on the documentation</a>.</p>

    <div class="blank-slate-pf-main-action">
      <form class="form-horizontal">
        <div class="form-group">
          <input type="checkbox" name="accept" id="accept">
          <label for="accept" class="control-label">
            I agree to the terms of this feature, as written above.
          </label>
        </div>
      </form>
      <button class="btn btn-lg btn-experimental-pf" id="activateButton" disabled>Activate All Experimental Features</button>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $("#acceptMessage").on("click", function() {
    $("#experimentalBar").addClass("hide");
  });
  $("#accept").click(function() {
    $("#activateButton").prop("disabled", !$(this).prop("checked"));
  });
});
</script>

Experimental Feature Identifier on a Component

lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Reference Markup

<div class="experimental-pf">
  <div class="experimental-pf-bar">
    <button class="experimental-pf-more-info">
      More info <i class="fa fa-flask"></i>
    </button>
  </div>
  <div class="panel panel-default ">

    <div class="panel-heading">
      <h3 class="panel-title">lorem ipsum</h3>
    </div>
    <div class="panel-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
</div>