FEC Pattern Library

Reaction box

A reaction box prompts users to give feedback about a specific new feature in the context of the production site.

When to use

  • When a feature is experimental, and hypotheses about its usefulness need to be tested in production
  • If a feature has undergone usability testing, but requires additional validation with a wider general audience

Guidance

  • Reaction boxes are not replacements for usability testing, but can measure general feedback from a wider audience

Status

This component is not currently in use on the site. Previously, we used reaction boxes to collect feedback on the new interactive charts and graph components in the data section. We’ve kept it in the pattern library because there could be a similar use case for a new feature in the future.

GitHub issues

<div style="padding: 2rem">
    <div class="reaction-box js-reaction-box">
        <fieldset>
            <legend class="reaction-box__heading">What do you think of this chart?</legend>
            <ul>
                <li>
                    <input type="radio" value="informative" name="reaction" id="reaction-informative">
                    <label for="reaction-informative">Informative</label>
                </li>
                <li>
                    <input type="radio" value="confusing" name="reaction" id="reaction-confusing">
                    <label for="reaction-confusing">Confusing</label>
                </li>
                <li>
                    <input type="radio" value="not-interested" name="reaction" id="reaction-not-interested">
                    <label for="reaction-not-interested">Not interested</label>
                </li>
                <li>
                    <input type="radio" value="none" name="reaction" id="reaction-none">
                    <label for="reaction-none">None of these</label>
                </li>
            </ul>
        </fieldset>
    </div>
</div>
 
<div style="padding: 2rem">
  <div class="reaction-box js-reaction-box">
    <fieldset>
      <legend class="reaction-box__heading">What do you think of this chart?</legend>
      <ul>
        <li>
          <input type="radio" value="informative" name="reaction" id="reaction-informative">
          <label for="reaction-informative">Informative</label>
        </li>
        <li>
          <input type="radio" value="confusing" name="reaction" id="reaction-confusing">
          <label for="reaction-confusing">Confusing</label>
        </li>
        <li>
          <input type="radio" value="not-interested" name="reaction" id="reaction-not-interested">
          <label for="reaction-not-interested">Not interested</label>
        </li>
        <li>
          <input type="radio" value="none" name="reaction" id="reaction-none">
          <label for="reaction-none">None of these</label>
        </li>
      </ul>
    </fieldset>
  </div>
</div>
 
/* No context defined. */