6 minutes read

"Your payment has been successfully confirmed," "please check the address field," "error loading the page, try again." No doubt these phrases look familiar — they're the kind of messages and warnings we've all seen when using systems in the past. But what happens if we complete a site's registration fields, click on the "submit" button, and nothing happens? We'll almost certainly try to click the button again. Still zero reaction? That's a mistake in the way the user experience has been designed. Systems should give clear feedback following user actions.

Minimal visual feedback

Users need regular reassurance that the system is still functioning. They also want to be made aware if something goes wrong. Even simple elements like hyperlinks and buttons can provide users with encouraging feedback that the application is working.

button change color in hover state

So, how do people recognize that a particular element is a button? It should be highlighted somehow, be in the shape of a button, or have the same style as the previous buttons they've clicked. Are there any other options? Yes, another way is to change the color of buttons when the cursor hovers over them or when they're clicked (this approach is most often used in web design). You could also make a small animation — perhaps depicting button movement, increasing and decreasing the size, or color transitions.

Highlighting user errors

Very few applications or services can do without text fields for entering data. They are used for things like registration, completing questionnaires, searching, and making payments. Unfortunately, users often make mistakes when attempting to submit information they have added to fields, and they need to be given feedback about these errors.

Error that ask to if user input is valid

The most minimal (and wholly inadequate) version would be something like "Error. Please check your information." Unfortunately, this approach causes stress because it only calls attention to the fact something is wrong. But what's the issue? Why not just point out the problem, so it's easier to fix? There are several ways to do this.

the feedback that gives just error, gives fields in which error occurs, highlights these fields

A good user experience is based on a clear understanding between the user and the system. People should always know what is happening at any given moment. They need to be clear about what will happen if they click on a particular element, exactly where they made mistakes, and how to resolve them. The best way to indicate errors is by highlighting the affected fields, showing the user how they can fix the problem, and transferring them directly to the relevant part of the screen.

Instant feedback

Do you want your services to be even more user-friendly? Then consider implementing instant field validation. You can do this by highlighting correctly completed fields as well as those with errors. This will provide a reassuring, positive boost and make it easy to spot issues straight away. Psychological satisfaction from solving small tasks!

UI highlights correct fields

You can take the same kind of approach with buttons, too. For example, once sufficient information has been correctly entered into the system's fields, the button's color could change from gray to green, showing the user it's possible to click on it to proceed to the next step. It is also important to note that people with color blindness will not be able to clearly recognize the green and red signals – therefore, adding a cross or a tick icon will solve this problem.

Instead of using a separate task that verifies whether everything is correct at once, you can make feedback instant instead.

Loaders

Servers need time when switching between different windows and processing data. So if there are any significant pauses, it should be apparent to the user that the application hasn't frozen and things are progressing as they should. This can be achieved by adding special elements called loaders — animated icons or progress bars that demonstrate the application is in data processing mode. (It's also possible to implement them in the form of a simple "please wait" message.)

Users will quickly become concerned without this feedback. They'll start to wonder whether the application has stopped working or if they did something wrong.

three examples of loader

Notifications

Last but not least is the classic system notification. These can either be used as a call to action or a mechanism for providing users with feedback. For example, imagine a person is registering on your service, and their details have been accepted for processing. You can inform them that the process has finished by sending a notification.

Some examples of different types of Android notifications can be seen in the below picture:

notification, snackbar and toast examples

Conclusion

Today you found out about system feedback and how it can be utilized to improve user experience. You learned that:

  • Every app and system needs to provide feedback to users. Otherwise, they won't know whether actions have been successful.
  • Feedback also helps people understand which elements are clickable or interactive.
  • Good feedback doesn't just indicate that something is wrong. It also shows what the mistake is and where it's been made.
  • Instant feedback creates a better user experience — it lets people know if data has been entered correctly or not straight away.
  • Loaders help avoid confusion about whether the system is frozen or simply processing a request.
  • System notifications can be used to make people aware that processes are complete or that steps need to be taken.
124 learners liked this piece of theory. 1 didn't like it. What about you?
Report a typo