Rails Illustrated

Rails, Web Design and the User Experience

Examining Feedback : Vimeo as an Example

230015 6867Providing feedback to the user is a fundamental part of usability. The proper feedback can turn a potentially frustrating experience into a joyous one.

The first 'Usability Heuristic' of Ten Usability Heuristics is

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. -- Jakob Nielsen

Every Action Should Have a Reaction

Feedback is best served warm, very warm. When a user performs an action the feedback should be immediate and obvious. Users expect feedback whenever they perform any action. The application has a contractual obligation to meet this expectation.

  • Feedback should be immediate.
  • Feedback should be appropriate. Large actions should have large responses and small actions should have small responses.
  • Feedback should be obvious. If the feedback is visual, it should be clearly apparent to the user and be as close to the UI element that initiated the action as possible.
  • Feedback should be informative. Use feedback to set up expectations for the next action.

Use an Idiom

If a progress bar is appropriate, use a progress bar. Progress bars are almost universally understood and the user will understand that something is occurring and understand how long it is expected to take. This doesn't mean the progress bar can't be beautiful.

Vimeo Convert Progress Bar

vimeo progress bar: progress bars don't have to be boring

Feedback Makes it Seem Fast

If a response will take a long time, like uploading a file for example, immediate feedback creates the impression that something is happening. The appearance of speed is often more important than actual speed. A slow process with a very responsive interface seems faster than a faster process with an unresponsive interface.

Follow the rules of First Principles of Interaction Design to reduce latency.

Feedback, Feedback, Everywhere

It seems to me that most interfaces tend to have too little feedback. It is better to have too much than too little. In the case of Vimeo during the file upload process the status is displayed with a progress bar and also in the title of the browser.

Vimeo Title Bar

These ideas can often be generated by observing users using the application. For example users may have opened a new tab while the upload was in progress. Putting the percentage in the title bar is a natural way to provide feedback on the upload process to the user in this case.

Vimeo File Upload Progress Bar

vimeo file upload while user edits video attributes

To implement your own file upload progress bar in Rails see this screencast.

Feedback Should Reflect the Current State

When the state of a running process changes make sure that feedback changes in response. Ideally feedback should always be a real time reflection of the state of the application.

Exceed the User's Expectations

In the case of uploading a video to Vimeo, most users will expect some kind of delay to process the video after uploading. Make sure to give the user a way out of the process. Tell them they don't need to stick around and send them an email when they process is complete. It never hurts to over estimate the amount of time needed. You can control the expectation of the wait time. If it takes less time than expected the user will be pleasantly surprised.

Vimeo Waiting In Line

if the wait is expected to be 5 minutes tell the user it will be 10

Automate the Next Step

Often the most appropriate feedback to indicate the completion of an action to automatically progress to the next step. However the next interface element should indicate the result of the previous action.

If we take the user story for Vimeo to be

I upload my video and then play the video to make sure it looks Ok.

After the video uploads and is converted, the Vimeo immediately redirects to the video itself so that it can be played. This is appropriate since showing the video indicates that the conversion process is complete.

Vimeo Almost Done

the user knows what to expect next and the next action is presented automatically

Warning - Automatically advancing to the next step works only if you are certain about the next step. It would be a big usabilty mistake to advance to an unexpected next step. User testing will tell you if get it right.

Further Reading

Comments  

1

cHIIi7 http://jf4Gqm84hEQsl0dy2Pu3b.org

gregory wrote on March 3 2010

Add Comment

(required)
(required, won't be displayed)

(Use Markdown syntax)