HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
Examples
Solicited feedback
Unsolicited feedback
Templates

User Feedback Collection

Improve customer experiences and make impactful, data-driven decisions by collecting feedback directly from users.

Feedback collected from users provides qualitative insights into users' perception of ease-of-use and value delivered. Qualitative measures compliment quantitative usage and interaction data to form a well-rounded analytic picture of the customer experience.

We'd love your feedback

When to use

When and where to collect feedback from users should be a collaborative effort working with the HPE GreenLake Experience Management COE. This team will work with you to construct a questionnaire aligned with your objectives and provide implementation details such as API credentials and endpoints for submitting feedback responses.

In-app feedback collection should be considered where it aids the understanding of users' perceptions around the ease-of-use and/or satisfaction with particular content, features, or workflows.

Feedback may be actively solicited or passively collected.

When not to use

Don’t collect feedback in the following use cases:

  • Collecting feedback should not interrupt or impede a user from completing their intended objective.
  • There is no actionable plan for what to do with the data.
  • In locations where users do not have enough context to form a valid opinion.
  • There are too many instances soliciting feedback which can dilute feedback effectiveness.

Sampling frequency for actively solicited feedback

Avoid over sampling and/or diluting effectiveness by limiting who is asked for feedback and how often. Consider implementing "rules of engagement" specifying under what conditions an individual user should be solicited for feedback. Example engagement rules might be:

  • Has not submitted response to this questionnaire in the last 90 days.
  • Has not been asked to complete this questionnaire in the last 30 days.
  • Has not been asked to complete any questionnaire in the last 7 days.

Anatomy

1
2
3

Feedback title

Body containing feedback questions.
Label
Region
Purpose
Required
Notes
1
Title
Title prompting user for their feedback.
Use the semantically correct heading level for the title. "We'd love your feedback" is a nice, appreciative default title.
2
Body
The body may be populated with as many questions as appropriate.
Question types can include StarRating, ThumbsRating, select all that apply (e.g. CheckBoxGroup), choose one (e.g. RadioButtonGroup), open ended (e.g. TextArea or any other input types).
3
Footer
Contains two actions: "Submit" and "Dismiss" if used in Layer modal. Otherwise only "Submit" is needed inline.
Submit button sends survey responses to the HPE Customer Experience team and initiates thank you message. If presented in a modal, the Dismiss button allows the user to bypass the survey and continue their product experience.

Implementation

Feedback question styling

Feedback surveys are composed with Grommet Form and FormFields containing any input types. Add the kind="survey" prop to Form to apply special survey styling to FormField labels and inputs.

<Form
  kind="survey" // Apply feedback styling to form field labels and inputs
  ...
>
  <FormField
    htmlFor="question-1"
    name="QID1"
    label="How was the experience deploying your workload?"
  >
    <ThumbsRating id="question-1" name="QID1" />
  </FormField>
</Form>

Feedback setup and submission

To initiate user feedback collection, please contact the HPE GreenLake Experience Management COE for the following steps:

  1. The customer experience team will work with you to understand your needs and create a dedicated survey for your use case. At that time, an API token, survey id, and response id will be provided.
  2. Map UI survey implementation to the survey's response schema. Use the API token, survey Id, and response Id to obtain the survey response schema with the retrieve a survey response call. The properties in the "values" object represent the data which should be submitted with each new survey response.
  3. Survey responses are submitted using create a new response.
// Submit survey response
fetch(`https://yul1.qualtrics.com/API/v3/surveys/${SURVEY_ID}/responses`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-TOKEN': API_TOKEN,
  },
  body: JSON.stringify(data),
})
.then(response => {
  // Response handling here
})
.catch(error => {
  // Error handling here
});

Passing non-user data

There may be non-user data that needs to passed as a parameter in the survey response. A good example of this can be found in the example below click on show "example code" and view the TaskFlowFeedback.js file. For example you may want to pass the currrent url with user collect data:

  const router = useRouter();
  const url = `${router.route}`;
  // The properties within the surveyValues object will be specific to your
  // product and instance within the product. These will be specified
  // when working with the HPE GreenLake Experience Management COE team.
  const surveyValues = {
    fullURL: url,
    QID1: undefined,
    QID2_TEXT: '',
  };

Examples

Solicited feedback

Solicited feedback is an active method of asking users for their opinions and perspectives. A feedback questionnaire is presented after a user has completed a task or consumed a piece of content. Solicited feedback should not interrupt or impede a user from completing their intended objective.

Task flow in center layer

Click on "Power on 1 device" to see the feedback questions presented at the completion of the power on task flow.

Unsolicited feedback

Unsolicited feedback provides users the opportunity to ask questions, provide ideas, or make recommendations. Acting similar to a “suggestions box,” this mechanism is placed in a persistent location, such as within an app-level menu or embedded with the application's page layout.

Related

Related content you may find useful when using User Feedback Collection.

HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page