The Value of User Interaction Feedback

Pushing this button does not provide any feedback.  This does not communicate whether this interaction did anything.

Pushing this button does not provide any feedback.

User interaction feedback is quite possibly one of the most overlooked design element throughout the web.  Feedback is a vital piece of the user experience puzzle.  Without interactive feedback, the user’s perception of the current state of the application may be skewed leading to a poor user experience.

Consider the above example with the elevator “door close” button – when you push the button, nothing lights up or registers that it was pressed. The door eventually closes, which would happen if the button would not have been pressed.  Some will argue the door closing is enough feedback. These are the same people who will have an unpolished experience for their web applications.  In this case, the best way to give interactive feedback would be to have the button light up and fade out as the elevator door closed.  Thinking about real life examples of user interaction feedback will give you tangible examples when polishing your application’s rich interaction.

Feedback Elements

There are multiple different types of feedback elements.  Feedback elements normally correspond to user interaction states; loading, confirmation, transition, error and more, but I will focus on the aforementioned states.  It is important to let your user know what is going on at all times with web applications, especially at the point of interaction.  Many of these are already done on most successful web applications, but are overlooked on some applications I’ve used.

Loading

There is a simple rule to cover this state – when data is being loaded, let the user know with an activity indicator.  If no feedback is provided to the user, he/she will be left guessing whether the request is happening or not.  Usually when this occurs, the user will click to initiate the action a second time causing more strain on servers, a longer wait time for the user and poor user experience.

Confirmation

The ideal way to provide confirmation feedback is when the interaction occurs, at the point of interaction. For example, to confirm a web form submission, the best way would be to notify the user next to the submission button or at the bottom of the form.  I’ve seen confirmation messages at the top of forms which aren’t always noticed by the user.  An example of great implementation would be eBay and its transaction and bidding confirmations.

Transition

The transition state occurs in between states and is a key interaction that needs feedback.  The most important transition which needs feedback is user sign up.  This state of transition for a new user can be incredibly confusing, and providing great transition feedback will make the difference between users coming back and never returning.  Kevin Rose of Digg recently discussed its work on a user onboarding process.  This process provides the necessary feedback and will soon become the standard for new user transition.

Error

Errors are the most common user state that requires feedback.  This state normally has the best feedback provided to the user.  Although the reason for the feedback is normally for data sanitizing purposes, the implementation is usually spot on.  This feedback is normally broken into two pieces, notification and indicator.  Notification is the feedback that is visible and evident to the user, and indicator feedback shows where the error has occurred.  The key to this element of feedback is to include both parts.  Both parts will clearly communicate to the user without them needing to think.

The Good Stuff

User interaction feedback is a crucial piece of user experience that should not be overlooked.  Breaking down interactions into interaction states can help you identify where feedback needs to occur.  At the very least, loading, confirmation, transition and error states should provide feedback to the user.  For some examples of feedback done right, I’ve compiled a great compilation on Ember.


Leave a Reply

CommentLuv Enabled