Unobtrusive feedback

Ten years ago I gave a talk at An Event Apart all about interaction design. It was called Paranormal Interactivity. You can watch the video, listen to the audio or read the transcript if you like.

I think it holds up pretty well. There���s one interaction pattern in particular that I think has stood the test of time. In the talk, I introduce this pattern as something you can see in action on Huffduffer:

I was thinking about how to tell the user that something���s happened without distracting them from their task, and I thought beyond the web. I thought about places that provide feedback mechanisms on screens, and I thought of video games.

So we all know Super Mario, right? And if you think about when you���re collecting coins in Super Mario, it doesn���t stop the game and pop up an alert dialogue and say, ���You have just collected ten points, OK, Cancel���, right? It just does it. It does it in the background, but it does provide you with a feedback mechanism.

The feedback you get in Super Mario is about the number of points you���ve just gained. When you collect an item that gives you more points, the number of points you���ve gained appears where the item was …and then drifts upwards as it disappears. It���s unobtrusive enough that it won���t distract you from the gameplay you���re concentrating on but it gives you the reassurance that, yes, you have just gained points.

I think this a neat little feedback mechanism that we can borrow for subtle Ajax interactions on the web. These are actions that don���t change much of the content. The user needs to be able to potentially do lots of these actions on a single page without waiting for feedback every time.

On Huffduffer, for example, you might be looking at a listing of people that you can choose to follow or unfollow. The mechanism for doing that is a button per person. You might potentially be clicking lots of those buttons in quick succession. You want to know that each action has taken effect but you don���t want to be interrupted from your following/unfollowing spree.

You get some feedback in any case: the button changes. Maybe the text updates from ���follow��� to ���unfollow��� accompanied by a change in colour (this is what you���ll see on Twitter). The Super Mario style feedback is in addition to that, rather than instead of.

I���ve made a Codepen so you can see a reduced test case of the Super Mario feedback in action.

See the Pen
Unobtrusive feedback by Jeremy Keith (@adactio)
on CodePen.

Here���s the code available as a gist.

It���s a function that takes two arguments: the element that the feedback originates from (pass in a DOM node reference for this), and the contents of the feedback (this can be a string of text or it can be HTML …or SVG). When you call the function with those two arguments, this is what happens:

The JavaScript generates a span element and puts the feedback contents inside it.
Then it positions that element right over the element that the feedback originates from.
Then there���s a CSS transform. The feedback gets a translateY applied so it drifts upward. At the same time it gets its opacity reduced from 1 to 0 so it���s fading away.
Finally there���s a transitionend event that fires when the animation is over. Once that event fires, the generated span is destroyed.

When I first used this pattern on Huffduffer, I���m pretty sure I was using jQuery. A few years later I rewrote it in vanilla JavaScript. That was four years ago so I wonder if the code could be improved. Have a go if you fancy it.

Still, even if the code could benefit from an update, I���m pleased that the underlying pattern still holds true. I used it recently on The Session and it���s working a treat for a new Ajax interaction there (bookmarking or unbookbarking an item).

If you end up using this unobtrusive feedback pattern anyway, please let me know���I���d love to see more examples of it in the wild.