Feedback in user interface design

Author: Andy Hartwell

This is a bit of a beginners article really, but sometimes the basics are forgotten, and the impact is major. Visual feedback is extremely important in User Interface Design. It tells the user what’s happening, or what’s going to happen next, and without it the user is left guessing or frustrated. In reality buttons, controls and objects react to our interaction, so this is how people expect things to work. It’s basic stuff, but it matters much more in user interfaces as there aren’t any tangible controls, it should all designed to replicate/represent reality. I’m going to list a few of the common elements of interface design and why they really need to give the user feedback.

Buttons & Links

Buttons & links are probably the most common elements which need to give feedback, and can be easily forgotten when designing in a program like Photoshop. There are 2 key states to a link/button: Hover and Active. When you hover the curosor over the link you should be changing the appearance to make this obvious to the user. This works best if it’s superficial, like a colour change, oppose to indenting or movement. When the user clicks the link, it changes to the CSS :active state, which should communicate that the link has been clicked.

Navigation

The navigation on an interface should not only incorporate all the above aspects, but also what page or sections the user is currently on. Whether it’s a different colour for text, or a sub-menu being viewable, the user should always know which page they’re on by viewing the main navigational menus. It’s also good practice to make the current page ‘un-clickable’ to further communicate that it’s the page your currently on, so there wouldn’t be anywhere to click to…

Forms

When filling out a form, certain information is normally required, or required in a certain format (email for example). You should firstly be letting the user know which bits of information are required, and how they should be input-ed. Users won’t always read this information though, so it’s up to you to provide useful feedback and help after validation has failed. The best way I’ve found, is to highlight the form inputs which failed, opposed to a list at the top or bottom. This way the user knows immediately what they’ve done wrong, and how to correct it.

Content loading

If your loading in content after the initial page load, you need to provide some sort of feedback that this is the case. Seeing a blank space where content should be communicates that the site is either broken or badly designed (or both). There are universally recognised graphics/animations which symbolise that something is going to happen at some point, nearly always associated with loading content. Even if the content only takes 2 seconds to appear, you should still display a loading indicator like the above. There are a few good resources for creating your own here and here.

Progress bars

Similar to the above points, but more information should be communicated. Waiting for things to load, upload or download is normally pretty frustraiting, but is made worse by not giving an indication of progress.

It shows the progress of the ‘load’ with the blue bar, which ‘information’ is being transferred. Importantly, make sure it’s accurate. The only thing worse than no indication of progress is one you can’t trust (changing of progress times, or the one progress bar serving the purpose of individual transfers as well as a whole one.

So to conclude…

A lot of these points are very simple to implement, and don’t take much time, so there’s no excuse not to have hover states, or loading indicators. And at the end of the day, websites are interactive, so make sure your talking back to the user.