Visual Cues

Writing another tip lead me to write this one.

Always think of giving visual feedback to your users. It's the sauce which prevents your users from wondering:

• "Is it doing what I asked it to?"
• "Did I break something?"
• "Has it stopped working or crashed?"

With asynchronous systems (like ajax) gaining usage in code that we write, it's more important for us to use things like activity indicators. The growing usage of mobile devices and the reliance on not-always-stellar mobile connectivity is another argument for this. You need to keep communicating that everything is in order or let them know that their action is going to receive a response soon.

The same rule/tip also applies to making it easier for your users to interact with your software. If you make it easier for them, they'll come back for more. You'll get more users/downloads (and profit!). Little things, "polish", go a long way in adding to the quality ("shine") of your application. This can begin with simple visual cues like highlighting a button or component while it's clicked (or touched).

For a interface which requires a sequence of actions, and the UI doesn't necessarily have all the elements laid out in serial/linear order (lets say in a game's heads up display); a subtle effect/highlight should be shown calling attention to the next thing the user probably needs to interact with.
As an example, if there's a UI where the player needs to:

• choose coins (different denominations),
• then select an action-item/power-up and
• then finally click use/apply etc.

Once the user clicks a coin, s/he can possibly click more coins or move to the part of the UI where s/he selects the power-up.
At this point in time a small visual effect on the power-up area of the UI could be shown.
Once s/he chooses a power-up, a similar visual cue should be shown on the use/apply button.

Another small example is from a game we've been working on (this example falls under a 'positive reinforcement' rule as well). When the user successfully loads a piece of cargo on the boat, s/he receives points. Initially, total points only updated in the top left of the screen/HUD. This was improved by adding a little effect showing the number of points which the player just received (eg: +30 in image. It fades away in about a second.).

One last visual cue example from the game, when you place the zebra near fruit, he tries to move towards it and eat it. This will lead to the player losing the level. When the level begins, a text popup informs the user of this mechanic. Though a lot of users may skip reading this, so showing a thought bubble above the Zebra's head of him thinking of a partially eaten fruit re-conveys to the user that this is about to happen.

Remember, you as a developer are very close to this system. You've seen it work multiple times. You know what's happening in the background and it's easy to forget about adding such visual feedback. Think of the user that's interacting with your system for the first time or returning to it after a long time.