For every action on the Web, there should be a reaction. Feedback might tell a user if the action was successful or not, but ideally it will tell them more, such as what to do next or why an action is taking so long.
You’ve probably experienced a situation where you’ve submitted a form. After clicking the submit button, nothing appears to happen. Was the form submitted? Perhaps the form submission failed.
It’s an excellent example of where feedback can remove any doubts or fear the user might experience. A simple progress indicator would resolve this issue. It would visually tell the user that the server has received the form and is actively processing it.
Not providing feedback can cause a lot of trouble. For instance, we submitted the form but didn’t get any feedback. The following scenarios are possible:
- Users refresh the page as they think the form submission failed. This scenario can lead to double data submissions, which impacts your data quality.
- Users seek alternative ways to contact you, such as Twitter, LinkedIn, or Facebook.
- Users submit data via other communication means, such as an email address they find on the website. Therefore, you have to manually process this data and follow up with the user via email.
- Users leave the website without completing the form submission.
As you can see, something as simple as displaying a progress indicator can save a lot of overhead for an organization. In the worst-case scenario of this example, you lose a potential client as they don’t wait for the form submission to complete.
This article explores the importance of feedback, common UI elements to provide feedback, and good and bad examples of feedback.
What is Feedback in UX Design?
A user interface responds to actions. This is what we define as feedback. Feedback is used to engage, explain, and remove fear or confusion, all of which improve user satisfaction.
Most feedback you encounter is visual for user interfaces. For games or other types of content, user feedback can take the form of auditory feedback. Let’s focus on visual feedback.
Visual feedback has three main goals, detailed below.
1. Signal responsiveness
It’s often not clear if an element is clickable. Buttons, therefore, implement visual feedback when you hover over them. Web designers use the CSS :hover selector to apply different styling when a user hovers a web element. We all know the example where the button color changes when you hover over it.
This form of feedback is essential to tell the user they can interact with the element. Without it, the user has to guess which elements allow engagement. But remember that users of touch devices my not be able to take advantage of hover effects.
2. Boost engagement
Feedback doesn’t just signal the outcome of an action. It can also guide a user. A visual effect draws the user’s attention to a particular UI element and encourages the user to click it. Therefore, you can use visual feedback to tell the user what to do next.
Let’s say you want to boost the number of users signing up for your newsletter. What about adding a small visual clue to the sign-up form? For instance, make the “Sign Up” button shake briefly to draw the user’s attention when the newsletter form is visual. It’s a simple yet effective technique to increase engagement.
3. Signal activity
Lastly, feedback is most helpful to tell the user something is happening. As mentioned in the web form example, a progress indicator tells the user the form submission has been received and is being processed by the server.
It’s the most crucial form of feedback! An action always requires reaction. A lack of feedback is the main source of confusion or fear for users interacting with applications. On top of that, feedback improves user experience by removing confusion.
Continue reading How to Improve User Experience with Accurate User Feedback on SitePoint.