How to indicate change without change?

Question

I'm having trouble putting the problem into words but hopefully this makes sense.

For a game I'm making (for a stats class project) I made a custom random number displayer. You click to get a new number. (link here)

The problem now is that duplicate random numbers are allowed and are actually quite common. Every time I get a duplicate random number, it feels like I just misclicked.

Things I tried to remedy this problem:

• Flashing pink every time a new number came up to indicate a new number (link)
• Sliding the number in from the left to indicate a new number (link)
• Flashing the text white (link)

but these seem too obnoxious.

It also needs to be quick (so no long fades or badges) because I need to generate numbers at up to about 1 number/sec. I would also like to keep it simple because I don't want to learn jQuery just for this thing.

So how do I indicate that a new random number is being displayed even when it is the same random number? I put a little counter at the bottom left corner for now, but it's too unnoticeable.

Again, sorry for my poor language and bad knowledge of UX. This is my first time designing something for anyone other than myself.

Answer 1

I think if you believe your remedies are obnoxious, this might indicate something deeper - that you are not solving the real problem at all.

In situation like this, it helps to consider the extreme case.

Let's say whenever you press the number, a big overlay with a spinner shows up that covers the screen. It takes 5 seconds to load your next number. As a result, one of the following case will happen:

1. The new number is not the same as the previous. Great, the user gets it.

2. The new number is the same as the previous. Now, the user is confused. Even though it is clear there was a loading state, why?

They are confused because the program did not behave the way the expected it to work. The way on how your system work is called the Program model. The way on how user thinks your program works is called the User model.

Most usability problem arises when the Program model does NOT match the User model. Now you have 2 choices:

1. Change the Program model to match the User model. E.g. code it in a way such that duplication does not occur. or
2. Educate user about how the program works. E.g. Put a line saying "When number duplicates, just click again"

Mind you that when we talk about good UX, we would err on the side on making the program model matches the user model. Because user's time is valuable and they prefer to not spend time to learn how your program works. So pick your battle.