Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm designing a website that is just a 16 x 16 tile with squares of different colors (small squares). -> A user can click a tile to change its color.

The problem is that computing the new color for the tile will take 3 ~ 5 seconds (doesn't matter why and it won't be any faster).

How can I give the user feedback that their input was accepted, and he/she is now waiting for the color to appear? (but without giving the impression that the website is slow)

I've thought of two options:

  1. the usual rotating loading sign near the tile that is loading
  2. first changing the tile to a default/neutral color and then changing it to the right (computed) color

Are there better ways to give this wait feedback?

share|improve this question
1  
So the colour of each square changes independently of all the others? Can a user still use the site as normal while that one square is changing colour? –  Joe Dreimann Apr 5 '12 at 11:23
    
Yes. The site doesn't block. And the user can click other tiles. –  John Assymptoth Apr 5 '12 at 13:13
add comment

3 Answers

up vote 4 down vote accepted

Most important in your task to create a response of system to action of the user. Not important how it will look: spinning circle or another progress bar or is stylized as in my picture for example. color_process

The main thing that the user received the visual notice that the system responded to its inquiry of or not freeze or doesn't work completely.

In this way the indicator of sending to IOS works.

iOS

It is by default animations length pf progress bar it is equal to 4 seconds. Even if your message is already sent - you see animation and know that sendind aren't freeze. In case sending takes more time, the indicator stops before the bar end and notify about when it's done directly as a result of sending of data. In most cases sending occurs quicker than 4 seconds that doesn't look suspiciously for user which simply watch a sending progress bar.

There are many ways to design this process, but how to visualize this process depends on esthetic requirements of your project.

May be a dog-mascot with a paint bucket & brush which paints pixels will be the best.

share|improve this answer
    
Great answer. And loved the example. –  John Assymptoth Apr 8 '12 at 16:57
add comment

If each tile can be changed asynchronously, then you probably want some sort of subtle animation on the selected tile. Users tend to assume that motion indicates that the system is working on something, even if that motion is only produced on the client and is unconnected with the backend that is doing the actual work.

If your users are typical web users, you can expect they’ll be familiar with the rotating symbol you suggest, especially if it mimics the IE throbber or buffering symbol in Flash videos. But users associate these with annoying delays, so maybe you want something more entertaining and consistent with your metaphor. Maybe the selected tile flips end over end, where, on the last flip, the front side has the new color.

Ideally, the animation would provide an indication of progress at the back end (e.g., show the old colored tile being slid out or chipped away in synch with actual progress), but that’s probably too much to ask for in a web app, and not necessary given your relatively short processing times.

Animation can be distracting, and, if user testing shows that’s a problem, then you need to go to some sort of static indication that input is received but not completely processed. You want some kind of tentative appearance, but the problem I see with changing to a neutral color is that users may think the app is changing the tile to the wrong color. Maybe it would be better to fade or dither the current color, especially if the user cannot command another change to the tile until after first change is processed (i.e. it’s essentially disabled). Perhaps the simplest and most effective static feedback would be the text “Changing…” superimposed over the tile.

If each tile change is synchronous, then your feedback needs to indicate the whole 16x16 matrix is disabled, distraction is less of an issue (there’s nothing to distract the user from), and it becomes even more important to have an entertaining and/or informative indication of process. Be creative and go wild.

Depending on your users and work environment, you may also want to consider supplementing the visual indication with an audio indication that the processing is occurring. This might be especially effective if you have no animation. The sound should be a quiet pleasant modulation that remains in the background, maybe like “bip-bip-bip-bip,” or something consistent with your metaphor. With only 256 tiles you could probably give each tile a unique sound (e.g., each is a different combination of frequencies determined by the row and column, like touch-tones in a phone). Or maybe the sound indicates the old color and/or known parameters for the new color, depending on how many colors you have. Just include a prominent control for users to mute the sound if they want.

share|improve this answer
    
+1 for a better explaination than mine! –  Benny Skogberg Apr 5 '12 at 12:29
    
16x16 and music rings a bell... fuse the site with a Tenori-On! en.wikipedia.org/wiki/Tenori-on –  Xiaofu Apr 6 '12 at 9:35
    
Loved the theory-answer. Awesome explanation. –  John Assymptoth Apr 8 '12 at 16:58
add comment

I would use some kind of animated gif that changes colors and waits for the real color to emerge. When the real color is ready you can switch to the right one.

Users will then "see" that there is acctually something happening when the color is changing from one to another.

An example:

Image from http://waxinandmilkin.com

I would use something with more sublime color changing effect, though :-)

share|improve this answer
1  
OW. That makes my brain hurt. –  Schroedingers Cat Apr 5 '12 at 11:34
1  
It does, but smaller and with less effect - it could do the job! –  Benny Skogberg Apr 5 '12 at 11:34
    
I made it smaller, so it doesn't hurt all that much. –  Benny Skogberg Apr 5 '12 at 11:46
    
Better! It wasn't a problem with your answer, just my eyes were getting painful. –  Schroedingers Cat Apr 5 '12 at 15:48
    
I like the idea. But, in the end, switching to a neutral color was way faster and did the trick, as the tiles couldn't change to many colors. +1 –  John Assymptoth Apr 8 '12 at 17:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.