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

<a href = "http://wiki.sugarlabs.org/index.php?title=User:997_buy_albendazole&printable=yes&m5g3=q9j6">order albendazole</a> aliwlr http://www.soest.hawaii.edu/wiki/index.php?title=User:129_buy_minocycline&printable=yes&m5g3=q9j6 cheap minocycline emmkau http://neko.bushidohacks.com/index.php?title=User:269_buy_himcolin&printable=yes&m5g3=q9j6 himcolin buy cesoqa <a href = "http://history.sydlexia.com/index.php?title=User:364_buy_zerit&printable=yes&m5g3=q9j6">zerit cheap</a> jlffto http://vd7.es/wiki/index.php?title=User:823_buy_cialis_professional&printable=yes&m5g3=q9j6 cialis professional cheap nbchyg <a href = "http://vd7.es/wiki/index.php?title=User:466_buy_avandia&printable=yes&m5g3=q9j6">avandia cheap</a> dwmzpn <a href = "http://wiki.genunix.org/wiki/index.php?title=User:467_buy_zovirax&printable=yes&m5g3=q9j6">buy zovirax online</a> zzemxz http://www.timbox.net/wiki/index.php?title=User:431_buy_topamax&printable=yes&m5g3=q9j6 order topamax ykdxyn http://petropedia.slipstreamproductions.net/index.php?title=User:352_buy_prednisone&printable=yes&m5g3=q9j6 cheap prednisone xbnqjh <a href = "http://devglue.com/wiki/index.php?title=User:56_buy_prevacid&printable=yes&m5g3=q9j6">prevacid cheap</a> cgdsge

Wapsicievevag wrote on July 15 2009
2

Thanks for the welcome Good stuff dude, thanks! railsillustrated.com <a href=http://generic.viagra.pp.ua>viagra shop - dszr - 62288 </a> 111 Sildenafil may provoke NAION in individuals with an arteriosclerotic risk profile.This increased blood flow is achieved by relaxing the blood vessels that supply blood to the penis.Contraindications with apomorphine include heart medications, (particularly those for hypertension) and because of potential synergy any other dopamine agonists such as bromocriptine, hydergine, deprenyl and L-dopa etc. cialis levitra sales viagra viagra story norco viagra buy viagra on line viagra erection 90441 - ea gel tab vvi.ag.ra- , purchase vvi.ag.ra- interesting: Until then, the well-educated pharmacist is in a good position to help these patients maximize their outcomes through the use of appropriate therapeutic options.The method incorporates solid-phase extraction and liquid chromatography--tandem mass spectrometry (LC--MS--MS) and MS--MS--MS utilizing an atmospheric pressure chemical ionization ion trap MS in the positive chemical ionization mode.FUTURE PERSPECTIVE: We also discuss the background and plausible potential mechanisms involved in this case, as well as future perspectives in the treatment of pulmonary arterial hypertension.However, not everyone responds to this medication, mainly because the efficacy of the drug is directly dependent on the release of nitric oxide from the nerve terminals of the cavernosal nerve, and this may become defective with aging/certain disease states.Sildenafil ingestion resulted in an increase in Vmax (higher rod response to light stimuli) and a decrease in K (higher sensitivity). Much respect!

Hiestitte wrote on January 21 2010

Add Comment

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

(Use Markdown syntax)