5

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?

2
  • 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? Commented Apr 5, 2012 at 11:23
  • Yes. The site doesn't block. And the user can click other tiles. Commented Apr 5, 2012 at 13:13

3 Answers 3

5

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.

0
4

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.

2
2

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 :-)

5
  • 1
    OW. That makes my brain hurt. Commented Apr 5, 2012 at 11:34
  • 1
    It does, but smaller and with less effect - it could do the job! Commented Apr 5, 2012 at 11:34
  • I made it smaller, so it doesn't hurt all that much. Commented Apr 5, 2012 at 11:46
  • Better! It wasn't a problem with your answer, just my eyes were getting painful. Commented Apr 5, 2012 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 Commented Apr 8, 2012 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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