The Importance of Visual Feedback

POSTED ON November 18, 2010

There is no doubt that the web has evolved very quickly, and we as web professionals have the power to create sites and applications with increasingly more attractive and user-friendly designs. In this ever-evolving field, however, there are some relatively simple considerations that are often overlooked, and most of these considerations play an integral role in the success of interactive media in terms of user experience. One such consideration is planning, designing, and developing for visual feedback. Below, I’ve outlined some quick items that all web professionals should pay attention to in order to make their projects more successful.

Provide Feedback for Link States

Every link, even an image link, has four states: default, hover, active, and visited. Designing for each state will provide visual feedback to the user that it is an interactive element.

Provide Feedback for Button States

Hover and active states for buttons add to the sensation of pressing a physical button. A common way of increasing this sensation is to use an inner shadow to give the impression of the button being ‘pushed in’.

Provide Feedback for Form Elements

Visual feedback on form elements is just as important as the feedback for links or buttons. Forms are interactive, and should be treated as such. In the same way that you can provide active states for links, you can also provide active (or focus) states for text fields! This provides usually subtle feedback to users that they are interacting with the system.

Provide Helpful Error Messages

I often find error messages that give no description of the problem, or worse yet, no indication that there is a problem at all. For instance, when a user fills out a form and misses a required field, it is imperative that they receive some kind of useful feedback to what went wrong and how to fix it. If us web professionals (and especially UX Designers) can point our users in the right direction, our projects will all be more useful (and therefore successful).

UX Booth has some great recommendations for making error messages more helpful:

1.      Make it clear that something is wrong.

2.      Show the user which field(s) are wrong in form errors.

3.      Display error messages that help users get back on track.

4.      Save what the user has entered—both good and bad so they do not have to repeat data entry.

Provide Helpful Links & Tips on 404 Pages

The main goal of a 404 page is to direct misguided users to the page they were looking for as quickly as possible, yet there are still plenty of sites that do not take the page into consideration. Providing links to the most used pages on a site is one way to ensure that a majority of users find what they’re looking for, or at least get back on the right track. Including the primary navigation is a fairly common method of providing more direction, but even more helpful to users is the inclusion of a site search, the most popular articles, or a quick breakdown of the sections the site offers.

Provide a Visual Estimate for Load Times

Progress indicators have three main advantages:

·         They give users an indication of wait time, helping to keep users’ thoughts on the process that is taking place.

·         They reassure users that the system has not crashed, or is otherwise broken.

·         They provide something for users to look at, thus making the wait less tedious.

The following snippet from Jakob Nielsen pretty much says it all:

The basic advice regarding response times has been about the same for thirty years [Miller 1968; Card et al. 1991]:

.01 secondis about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.

1.0 secondis about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.

10 secondsis about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

That’s it, folks! Go forth and make the web a more usable place.

Erica Joy Decker

User Experience Designer

Marker Seven

  • Admin