Opportunity Standard

Feedback

@nycopportunity/standard/src/objects/feedback

Demonstration

How can we improve this website? Let us know by .

How can we improve this website? Let us know by answering a few questions. Your response will be used to help us improve the experience for others.

Do you agree with the following? The website helped me meet my needs. *

Strongly disagree Disagree Neutral Agree Strongly Agree

Do you agree with the following? The website is easy to use. *

Strongly disagree Disagree Neutral Agree Strongly Agree

What is one thing we could do to make the website better for you? *

Please describe in as much detail as possible.

Code

<section class="o-navigation-spacing-bottom" data-js="feedback">
  <div class="layout-content bg-scale-2">
    <div class="tablet:px-3 tablet:py-2">
      <article class="c-alert c-alert-status-primary" data-js="alert-primary">
        <div class="c-alert__graphic">
          <svg aria-hidden="true" class="icon-ui">
            <use href="#lucide-help-circle"></use>
          </svg>
        </div>
        <div class="c-alert__body py-2 pie-2">
          <p data-js-alert="text">How can we improve this website? Let us know by <button class='text-inherit' data-js='dialog' aria-controls='aria-c-modal' aria-expanded='false' data-dialog-lock='true' data-dialog='open'>sending us feedback</button>.</p>
        </div>
      </article>
    </div>
  </div>
</section>
<!--{ @id                Identifies this element as the target of the modal toggle }-->
<!--{ @class             The "active" class will be toggled on the modal when it is open }-->
<!--{ @aria-hidden       Indicates this area is hidden from screen readers }-->
<!--{ @role              "dialog" indicates the modal is a dialog element }-->
<!--{ @aria-modal        "true" indicates the element is a modal element }-->
<!--{ @aria-labelledby   Identifies the modal heading as the label for the modal }-->
<!--{ @aria-describedby  Identifies the modal body as the description for the modal }-->
<div aria-describedby="aria-db-modal-body" aria-hidden="true" aria-modal="true" class="o-modal hidden" id="aria-c-modal" role="dialog">
  <div class="o-modal__layout">
    <div class="o-modal__body">
      <div class="o-modal__close">
        <!--{ @data-js        "dialog" designates this element as a toggling element for the modal }-->
        <!--{ @aria-controls  Targets the element that will be shown and hidden by the toggle }-->
        <!--{ @aria-expanded  Indicates if the modal is open or not }-->
        <!--{ @data-dialog    "close" designates this element as the primary close toggle for the modal. It will be focused on when the modal is opened. Only one close toggle associated with this aria-controls value can exist on the page }-->
        <!--{ @tabindex       Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
        <button aria-controls="aria-c-modal" aria-expanded="false" class="o-modal__dismiss link-icon mb-3" data-dialog="close" data-js="dialog" tabindex="-1">
          <!--{ @tabindex  Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
          <svg class="icon-ui" tabindex="-1">
            <use href="#lucide-x"></use>
          </svg>
          <span>Dismiss</span>
        </button>
      </div>
      <!--{ @id  Matches the @aria-labelledby attribute of the modal parent }-->
      <!--{ @id  Matches the @aria-describedby attribute of the modal parent }-->
      <p id="aria-db-modal-body">How can we improve this website? Let us know by answering a few questions. Your response will be used to help us improve the experience for others.</p>
      <form tabindex="-1">
        <fieldset class="c-question" id="9b64e192fc0f2" tabindex="-1">
          <legend class="c-question__label" tabindex="-1">Do you agree with the following? The website helped me meet my needs.<span class='text-error'>&nbsp;*</span>
          </legend>
          <div class="c-question__container c-question__container-rows">
            <label class="option" for="4c09de998cbea" tabindex="-1">
              <input id="4c09de998cbea" name="option['9b64e192fc0f2']" tabindex="-1" type="radio" value="requirements-0" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Strongly disagree</span>
              </span>
            </label>
            <label class="option" for="d0971c0ff4914" tabindex="-1">
              <input id="d0971c0ff4914" name="option['9b64e192fc0f2']" tabindex="-1" type="radio" value="requirements-1" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Disagree</span>
              </span>
            </label>
            <label class="option" for="703d43d9479e6" tabindex="-1">
              <input id="703d43d9479e6" name="option['9b64e192fc0f2']" tabindex="-1" type="radio" value="requirements-2" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Neutral</span>
              </span>
            </label>
            <label class="option" for="6f29879f071" tabindex="-1">
              <input id="6f29879f071" name="option['9b64e192fc0f2']" tabindex="-1" type="radio" value="requirements-3" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Agree</span>
              </span>
            </label>
            <label class="option" for="ea83c9eb2e047" tabindex="-1">
              <input id="ea83c9eb2e047" name="option['9b64e192fc0f2']" tabindex="-1" type="radio" value="requirements-4" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Strongly Agree</span>
              </span>
            </label>
          </div>
        </fieldset>
        <fieldset class="c-question" id="391499797d2bc" tabindex="-1">
          <legend class="c-question__label" tabindex="-1">Do you agree with the following? The website is easy to use.<span class='text-error'>&nbsp;*</span>
          </legend>
          <div class="c-question__container c-question__container-rows">
            <label class="option" for="c3649ea441ac1" tabindex="-1">
              <input id="c3649ea441ac1" name="option['391499797d2bc']" tabindex="-1" type="radio" value="requirements-0" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Strongly disagree</span>
              </span>
            </label>
            <label class="option" for="c86dc451422b8" tabindex="-1">
              <input id="c86dc451422b8" name="option['391499797d2bc']" tabindex="-1" type="radio" value="requirements-1" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Disagree</span>
              </span>
            </label>
            <label class="option" for="7ce7b4efddd75" tabindex="-1">
              <input id="7ce7b4efddd75" name="option['391499797d2bc']" tabindex="-1" type="radio" value="requirements-2" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Neutral</span>
              </span>
            </label>
            <label class="option" for="293a9b3b6163b" tabindex="-1">
              <input id="293a9b3b6163b" name="option['391499797d2bc']" tabindex="-1" type="radio" value="requirements-3" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Agree</span>
              </span>
            </label>
            <label class="option" for="499e4038868a1" tabindex="-1">
              <input id="499e4038868a1" name="option['391499797d2bc']" tabindex="-1" type="radio" value="requirements-4" />
              <span class="option__base">
                <svg aria-hidden="true" class="option__graphic" tabindex="-1">
                  <use href="#option-nyco-radio"></use>
                </svg>
                <span class="option__label">Strongly Agree</span>
              </span>
            </label>
          </div>
        </fieldset>
        <div class="c-question" id="d7ff476eb7585" tabindex="-1">
          <label class="c-question__label" for="question-d7ff476eb7585" tabindex="-1">What is one thing we could do to make the website better for you?<span class='text-error'>&nbsp;*</span>
          </label>
          <p>
            <small>Please describe in as much detail as possible.</small>
          </p>
          <div class="c-question__container">
            <div class="input">
              <input class="input" id="question-d7ff476eb7585" name="question['d7ff476eb7585']" tabindex="-1" type="text" />
            </div>
          </div>
        </div>
        <button aria-controls="aria-c-modal" aria-expanded="false" class="btn" data-js="dialog" tabindex="-1">
          <span>Cancel</span>
        </button>
        <button class="btn-primary" tabindex="-1">
          <span>Submit</span>
        </button>
      </form>
    </div>
  </div>
</div>

The Feedback module links to a form that collects a user’s perspective on the website. The module may link to an external survey, however, to ensure that the user is able to easily navigate back to the site after submitting and that accessibility standards are enforced in the form it is recommended to inline the form on the site. This Feedback module uses a Modal dialog to focus the user’s attention on the survey while keeping them in the same site.

Feedback Form

@nycopportunity/standard/src/objects/feedback

Demonstration

Do you agree with the following? The website helped me meet my needs. *

Strongly disagree Disagree Neutral Agree Strongly Agree

Do you agree with the following? The website is easy to use. *

Strongly disagree Disagree Neutral Agree Strongly Agree

What is one thing we could do to make the website better for you? *

Please describe in as much detail as possible.

Code

<form>
  <fieldset class="c-question" id="205e7845b3d21">
    <legend class="c-question__label">Do you agree with the following? The website helped me meet my needs.<span class='text-error'>&nbsp;*</span>
    </legend>
    <div class="c-question__container c-question__container-rows">
      <label class="option" for="86092a73790d8">
        <input id="86092a73790d8" name="option['205e7845b3d21']" type="radio" value="requirements-0" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Strongly disagree</span>
        </span>
      </label>
      <label class="option" for="e2c64489228b6">
        <input id="e2c64489228b6" name="option['205e7845b3d21']" type="radio" value="requirements-1" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Disagree</span>
        </span>
      </label>
      <label class="option" for="6fd33e1638c56">
        <input id="6fd33e1638c56" name="option['205e7845b3d21']" type="radio" value="requirements-2" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Neutral</span>
        </span>
      </label>
      <label class="option" for="26153f560006b">
        <input id="26153f560006b" name="option['205e7845b3d21']" type="radio" value="requirements-3" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Agree</span>
        </span>
      </label>
      <label class="option" for="c99c8900b5595">
        <input id="c99c8900b5595" name="option['205e7845b3d21']" type="radio" value="requirements-4" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Strongly Agree</span>
        </span>
      </label>
    </div>
  </fieldset>
  <fieldset class="c-question" id="50fb177ee5adb">
    <legend class="c-question__label">Do you agree with the following? The website is easy to use.<span class='text-error'>&nbsp;*</span>
    </legend>
    <div class="c-question__container c-question__container-rows">
      <label class="option" for="88c73c2341ddf">
        <input id="88c73c2341ddf" name="option['50fb177ee5adb']" type="radio" value="requirements-0" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Strongly disagree</span>
        </span>
      </label>
      <label class="option" for="8e1a40ac4c0f9">
        <input id="8e1a40ac4c0f9" name="option['50fb177ee5adb']" type="radio" value="requirements-1" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Disagree</span>
        </span>
      </label>
      <label class="option" for="3009ee6da9235">
        <input id="3009ee6da9235" name="option['50fb177ee5adb']" type="radio" value="requirements-2" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Neutral</span>
        </span>
      </label>
      <label class="option" for="0803eb6c20355">
        <input id="0803eb6c20355" name="option['50fb177ee5adb']" type="radio" value="requirements-3" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Agree</span>
        </span>
      </label>
      <label class="option" for="5ef66ecdf8ef9">
        <input id="5ef66ecdf8ef9" name="option['50fb177ee5adb']" type="radio" value="requirements-4" />
        <span class="option__base">
          <svg aria-hidden="true" class="option__graphic">
            <use href="#option-nyco-radio"></use>
          </svg>
          <span class="option__label">Strongly Agree</span>
        </span>
      </label>
    </div>
  </fieldset>
  <div class="c-question" id="fb96fd5ac6a72">
    <label class="c-question__label" for="question-fb96fd5ac6a72">What is one thing we could do to make the website better for you?<span class='text-error'>&nbsp;*</span>
    </label>
    <p>
      <small>Please describe in as much detail as possible.</small>
    </p>
    <div class="c-question__container">
      <div class="input">
        <input class="input" id="question-fb96fd5ac6a72" name="question['fb96fd5ac6a72']" type="text" />
      </div>
    </div>
  </div>
  <button class="btn-primary">
    <span>Submit</span>
  </button>
</form>

This Feedback Form example uses a version of the Usability Metric for User Experience (UMUX) Lite. This helps evaluate the perceived usability of the site using a short, two question form plus an additional question asking for one thing that could be made better. Scoring the results of submissions over time can provide an indication to the usability of the site.

Changing the form questions for different audiences or for collecting different types of information may be necessary.

It is important to use informed consent and consider trauma informed design principles for collecting feedback in different contexts. Use questions that do not re-traumatize audiences. It may also not be possible or appropriate to ask directly for feedback.

When phrasing the questions, focus on the task or problem the website or application is trying to solve. For example;

This guide helped me apply for SNAP.
This website helped me find work or a work program.
This app helped me share my documents.

See related, "Modal" Next, "Find Help"