Are You Giving Your Users Positive Feedback?

Advertisement

We love to tell users that they have done something wrong. We have error messages for everything from poorly formatted telephone numbers to incorrect logins. But what about our user’s successes, do we celebrate them? Do we tell them they are doing something right?

It is as important to tell users that they are doing things right, as it is to inform them when they make a mistake. This kind of positive reinforcement is key to a pleasurable user experience. In this post, I want to explain why positive feedback matters, suggest when it is appropriate and how to integrate it into your website.

We begin by asking why positive reinforcement matters.

Why Positive Reinforcement Matters

Have you ever considered why a majority of us may dislike virtual keyboards? One of the primary reasons is that a virtual keyboard cannot provide the same level of feedback as a physical one.

Virtual keyboard manufacturers have worked hard to provide positive reinforcement using sound and the pop-up keys (such as the ones found on the iPad). However, these do not match the positive feedback one gets from using a physical keyboard. The sounds are annoyingly artificial and virtual keyboards are unable to replicate the tactile feedback of using a physical key.

Keyboard on iPad
We tend to dislike virtual keyboards because they cannot provide the same level of feedback as a physical one.

The example of a virtual keyboard illustrates how important it is to provide positive reinforcement for users of our websites. As with virtual keyboards, the lack of positive feedback leaves the user with a less pleasurable experience.

Many users lack confidence (either in their own abilities, or in the reliability of your website). They worry about whether they had done something wrong or whether the website has understood what it was that they wanted to achieve. In many cases this is because they don’t really understand how websites and computers work. The result is that they blame themselves when something goes wrong, presuming that their ignorance has led them to make a mistake.

By providing positive reinforcement we reduce these worries and give the user confidence that everything is going smoothly. This is particularly important for users who lack confidence in their own abilities (for example, the elderly). These users are often perfectly competent. However, because they lack confidence they second guess their decisions, which significantly undermines their experience.

Positive reinforcement does not just give the user confidence that they are doing something right, it also eliminates doubt about whether something has gone wrong. This can prevent a user from undoing something that they have done correctly.

A good example of this is an e-commerce transaction. Have you ever submitted an order to an e-commerce website and been left wondering whether the transaction is being processed because the page was taking longer to load than you expected?

A simple piece of positive reinforcement (such as an update telling the user that the order is still being processed) would resolve this problem, and prevents people from hitting the back button.

Example order processing box for ecommerce site
By keeping the user up-to-date you reduce their anxiety that something has gone wrong.

All of this doubt and confusion significantly slows the user down. They find themselves re-entering data, re-submitting forms and constantly using the back button. A small amount of positive reinforcement will significantly increase the speed with which they complete tasks.

With the benefits of positive feedback clear, when should we use it? When does the user need encouragement that they aren’t making mistakes and that the website is doing what they expect?

When Positive Reinforcement Is Required

The most obvious place to provide positive reinforcement is when a user is entering data. Whether registering, logging in, making a purchase, posting a comment, updating a status, or interacting with a Web application, data entry accounts for a large proportion of our interactions online.

It also represents the greatest likelihood of error, and users know this. As a result they often lack confidence in their data entry skills, and need some reassurance. This is especially true when entering data such as email addresses, passwords and postal codes.

Graze.com signup with positive feedback
Graze1 speeds up the process of completing their signup form by showing a tick when you complete a field correctly.

Data entry is not the only (or even most common) form of user interaction—users interact with your website every time they click on a link. It surprises me how many websites fail to show the user that they have successfully clicked on a link, yet instead, rely on the browser to provide feedback.

Smashing Magazine active link state
Smashing Magazine leaves the user with no doubt that a link has been successfully clicked (screenshot of Monthly Desktop Wallpapers2).

Relying on the browser to provide positive feedback can be problematic as the user may miss it. This is because the browser shows that it is loading a page using the address bar, while the user’s attention is on the link that they have just clicked. This can lead to the user clicking on the same link again.

Smashing Magazine homepage showing user attention
If the user is looking at a link, they may miss updates in the address bar.

The problem of feedback and attention being in two different places extends beyond links. There are many situations when a user’s interaction results in something changing elsewhere on the page. These kinds of changes are easily missed and some more obvious feedback is often required.

A common example of this would be adding an item to a shopping basket. Because the user’s focus is on the item they are adding, it can be easy for them to miss the basket updating. In such situations it is necessary to update the item itself to show it has been added.

Product listings on Wiltshire Farm Foods
When an item is being added into the basket on the Wiltshire Farm Foods’ website, the appearance of the product changes significantly.

Not that this is just an issue of distance between focus and the change on the page, it is also one of subtly. For example, a basket updating could be as subtle as a number incrementing from one item to two. This is easy to miss, even if the user’s attention is in the right place.

When a user’s interaction triggers a subtle page update, it is often necessary to provide some stronger feedback to reassure the user that their action has had the desired result.

How you provide that positive reinforcement will vary from website to website. There are a number of different approaches you may wish to consider…

Ways To Implement Positive Reinforcement

When a user makes a mistake, we normally inform them by displaying a textual error message. It is therefore unsurprising, that when we think of providing positive feedback, we also turn to textual messaging.

However, I believe we should be careful when providing positive feedback in a textual form. The problem with this approach is that text forces the user to shift their attention and read the message. This slows down the completion of their task rather than encouraging them to move forward.

That said, there are occasions when text can be effective for providing positive reinforcement. For example, if the user has just clicked an “add to basket” button, it may be appropriate to re-label the button to read “add another”. By changing the text you make it clear that one item has already been added, and encourages the user to move on to the next task. The other benefit to this approach is that the user is seeing a change where they are currently looking (the button that they have just clicked) rather than elsewhere on the screen (such as the basket, which they might miss).

Two buttons. First with the label add to basket and the second with the label add another to your basket
Changing the labelling on an add to basket button can bring clarity to a user’s interaction.

Visual Feedback

If we are going to limit the use of text as a method of positive feedback, a better alternative is to use design signals. These could include changes in imagery, styling, color, or size.

Examples may include altering the color of a link when clicked, adding a tick after a field that has been correctly completed, or highlighting an updated portion of the page.

An important example of this kind of positive design feedback would be the cursor state. Users have come to expect the cursor to change into a hand when they rollover an interactive element (such as a link or a button). When it fails to do so, the absence of this positive feedback causes confusion. Yet, despite this well known behavior, too many interactive elements on websites do not demonstrate this behavior.

Cursor state on rafbf.org
Without this cursor state, a user may be unsure whether they can click this box.

Feedback Using Animation

Another visual way to provide positive feedback is through animation. There are some great examples of how subtle animation can draw a user’s attention to an error (like the slight vibration you see if you enter the wrong log-in details for WordPress). These same principles can be applied to positive feedback, as well.

A common example of using animation to provide positive feedback would be when users click on an anchor link. By default this jumps the user down the page which can be a very disconcerting experience. However, a smooth scrolling animation combined with a highlighting of the destination can make it clear that what the user had expected has actually happened.

Animation can also be used on e-commerce websites to indicate an item has been added to a basket. Whether it is the basket expanding (to show the new item) or the product physically ‘flying’ towards the basket, these animations reassure the user that their intended action has been completed.


Animation can be a useful tool to show that an action has been completed.

I believe animation is an under-utilized way of providing positive feedback and is something we should be exploring further on our websites. However, it is not the only method that is under-utilized—there is also the use of audio.

Audio Feedback

Do you wait for that “whoosh” noise when you send an email? That is an audible signal that the email has sent successfully. What about those little pings, beeps and twerps that notify you that something has happened on your computer or mobile device? Whether we realize it or not, most of us are reliant on this kind of audio feedback that reassures us that an action has happened.

New email in Sparrow
When sending an email we are very reliant on the audible feedback to ensure us that it has been sent.

Why then do we shy away from using audio on our websites? Audio is an excellent tool for providing positive feedback and yet few websites use it.

Maybe our reluctance is because audio can be annoying. The history of the Web is littered with examples of annoying audio loops or background music that you cannot mute. However, you could equally argue that the Web is littered with bad design and animation (but still, that doesn’t stop us from using these tools).

Others may argue that audio is not appropriate in a work environment. Although I would generally agree, the audio we are talking about using here is no different to the audio notifications used by a plethora of desktop applications that are common in an office environment.

An audible click is a great way to tell a user they have clicked on a link. A “cha-ching” would be the perfect way of letting a customer know they have added something to a shopping cart. Audio is a powerful tool that we are currently under-utilizing.

Much To Learn And Discuss

Whether you use audio, design, animation, or text, we should be providing users with more positive feedback for their actions. It gives a user confidence that in turn increases the speed in which they move through your website (and their level of satisfaction). We have still have much to learn about how to provide positive feedback for users, and we would be especially interested to hear your thoughts in the comments below.

  • Is audio a good tool for feedback?
  • What examples of positive feedback have inspired you?
  • Do you perceive dangers in providing too much feedback to users?

Let us know your thoughts!

(jvb) (il)

Image used on front page is owned by opensourceway3.

Footnotes

  1. 1 http://www.graze.com
  2. 2 http://www.smashingmagazine.com/2012/06/30/desktop-wallpaper-calendar-july-2012/
  3. 3 http://www.flickr.com/photos/opensourceway/5755219051/

↑ Back to topShare on Twitter

Paul Boag has been working with the web since 1994. He is now co-founder of the web design agency Headscape, where he works closely with clients to establish their web strategy. Paul is a prolific writer having written the Website Owners Manual, Building Websites for Return on Investment, Client Centric Web Design, Digital Adaptation and numerous articles for publications such as .net magazine, Smashing Magazine and the Web Designers Depot. Paul also speaks extensively on various aspects of web design both at conferences across the world and on his award winning Web design podcast boagworld.

Advertising
  1. 1

    I think feedback is important, but should not be overdone. Too much can quickly become annoying.
    I don’t agree with using audio feedback though. A website should not make a sound unless it is initiated by a user, though there are exceptions (chat or youtube videos, etc.). Audio feedback may be fine for mobiles and tablets, but it is considerably easier to disable the feedback sounds on these devices.

    6
    • 2

      I agree with you curtis that audio feedback may annoy the user and there may be chances to miss the feedback when the system audio is turned off. However I like the animation feedback that I have seen in most of eCommerce website.

      Here is a jquery demo for add to basket animation (http://www.webresourcesdepot.com/wp-content/uploads/file/jbasket/fly-to-basket/).

      5
    • 3

      John Surdakowski

      July 19, 2012 4:17 pm

      I agree, audio feedback can be annoying and bring us back to the days of flash audio, when every button and action had a stock sound. But if implemented correctly, and minimal, audio can help the user.

      Especially users with disabilities.

      1
  2. 4

    I love the link-clicking-super-color-inverting-obviousness. I’m going to implement it on my sites ASAP.

    I’m also intrigued by the audio feedback and will definitely experiment with it in the near future. Thanks.

    2
  3. 5

    I’m sure I’ll sound like a broken record here, but the animation & audio cues on iOS really drive an organic experience for me. Audio cues especially are something I’d love to explore more. Know of any good audio jQuery plugins for UI events?

    4
  4. 6

    Hard to disagree with any of the points stated here. Feedback is definitely important for user experience. The downstate on buttons, for example, adds quite a bit to the experience and the perception of responsiveness. Whenever I click a button without downstate, it feels like poking at a glass screen; on the other hand – buttons that ‘give in’ with down state feel much ‘softer’ and like actual buttons.

    This is also tied to our perception of speed, downstate is an instantaneous response, while new page will take couple of seconds.

    3
  5. 7

    Daniel Bustamante

    July 17, 2012 8:34 pm

    I haven’t given this conscious thought prior to reading this. I agree and definitely think it’s a good attitude to have towards development. Error-proofing is so important it’s easy to forget about the operant human aspect. I do see challenges in picking and choosing what components are deserving of positive feedback, and not making them distracting. It will definitely be in the back of my mind next project. Thanks for the perspective!

    1
  6. 8

    Audio (other than in media files whose play I initiate) is the quickest way to get me off of your site. The first thing I do with a new computer set-up is to disable all of the beeps, dings, pings and squawks that don’t indicate a critical error (and replace the critical error sound with something less annoying or at a lower volume level). As often as not, I’m using a computer with other people around me who don’t particularly need the audio feedback from my activity, and I don’t feel at all compelled to spend my entire day wearing headphones or making sure that my system is muted (in which case I won’t get the error messages either). Sorry—audio is a fail in my book.

    11
  7. 9

    We should dub this the “Anti-1950′s Parenting Web Development Style” where you make sure you take time to tell the user about the positive rather than constantly re-iterating the negative over and over to the point the user gets a complex.

    Sure we’ll have to choose a better name than that, but hey, that’s what marketing is for!

    As for the topic; it’s one of those things where different users respond differently depending on what you try. Personally, I don’t like having my hand held, but I do like visual indicators which says “OK, we’re cool here”. Being a big usability proponent, when a site does something WRONG, and it costs me time and more focus, there’s little they can do for the positive to have me look past it.

    0
  8. 10

    This was an inspiring text, thank you Paul. Below my feedback.
    Is audio a good tool for feedback?

    No, it is annoying.
    What examples of positive feedback have inspired you?

    Relying on visual feedback instead of textual ones is really inspiring.
    Do you perceive dangers in providing too much feedback to users?

    As long as the you do not get in the way of the user and the goal, feedback is good. No matter how much you provide.
    Note to SM: When writing a comment, one break is displayed as two, two breaks displayed as one when done commenting.

    2
  9. 12

    I agree with everything and want to second it with a story of my own. I recently designed a pension account system and did user research with the elderly. It was rough to watch them have problems with what seemed so obvious to me. But as soon as they got positive feedback (in the form of green check marks) they felt capable and in control of the process and started running through tasks much more quickly. The elderly are a user group whose needs tends to be ignored online (small text, low contrast designs, complicated passwords, etc) and testers said they expected to not be able to read or understand websites. So, it was actually emotional to watch them gain confidence through the interface. Leave no user behind!

    4
    • 13

      It must have been difficult designing a product for a group that is more or less completely ignored in user research. Have you written about this anywhere else?

      0
  10. 14

    One of my absolute pet peeves, and unfortunately also one of the current mindless trends, of visual feedback is animating the color of links when hovering them (as opposed to just changing them).

    This feels way too unresponsive, and infuriates me every time. Especially since the motive for using this will too often be “everyone else is doing it”.

    0
  11. 15

    I feel like the previous decade of web development left a bad taste in people’s mouths concerning audio usage, which is a shame because I believe it definitely has its uses. Preferably I’d like to see system-wide recognized notification sounds be incorporated in browsers. Native programs have it, mobile applications have it, why shouldn’t web applications? There’s not a single reason that this audio witch hunt should continue to this day. It’s been made more than clear enough to web developers that audio is dangerously fast overused. But why does that also have to mean that audio shouldn’t be used at all? I’m calling it now that as web applications become more of an industry standard than they already are, the usage of audio will rise again (along with other UI paradigms that we have been missing out on).

    1
  12. 16

    Great article but… where can I find the smiley image used in the chart image in the cover of this article? ;b

    0
  13. 17

    i agree on giving feedback, but the problem with audio: it´s hard to control. You don´t know if it is turned on to begin with – and if it is, you don´t know how loud it is set. Nothing is more irritating than a loud audio-effect catching the user off-guard

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top