Nicedream - Professional Web Development

Easy to Use, Hard to Make

Making easy to use websites, web-based applications and software can be challenging. This is often because it can be hard to think from the point of view of the end user.

A well designed website or system will enable the user to be more productive and will allow them to keep their mind on the task in hand rather than the software.

An Example: Printing Mailing Labels

I've taken this example from a web-based application that I recently designed and implemented. Label printing on to standard pages of labels can be tricky, especially if you need to give the user the option to start printing on any given label.

The Quick Solution

Here is the most basic way we could present the printing options to the user:

What's Wrong?

The user will need to do quite a lot of thinking in order to know what option to choose. The choice may be obvious to the developer of the system but certainly won't be to the user.

Making Improvements

In this instance, we can make a significant improvement by adding a graphical representation of the page. This removes the need for the line of instructions we had before and allows the user to see at a glance which number to select:

We can go further by changing the select list into radio buttons. With the addition of some CSS we can then overlay the radio buttons on top of the graphic to make the selection even more intuitive:

The Extra Mile

The improvements above are implemented with HTML and CSS. To make any further improvements, we need to turn to JavaScript. This will allow the creation of a custom 'widget', made specifically for the required task.

Below is a screenshot from the actual system. You'll notice that there are no standard form controls - instead the user just clicks the label they want to start printing on and they are immediately shown a representation of how this will look. This is much like a print preview - the user knows exactly what the output will look like - no thought required.

Solution in action

Here is a video of the real system working to further illustrate the solution:

Conclusion

Simple changes in approach can greatly improve usability and productivity. Advanced solutions, such as creating a custom 'widget' in the above example, can dramatically improve ease of use.

The only downside in the 'widget' approach is the increased development time, so before venturing on such an implementation it's worth investigating its value.

In my experience, once you give users an intuitive graphical user interface, they won't want to go back to anything complicated. Make a website intuitive and customers are far more likely to return. In the case of web-based applications and intranets, users will be more productive and will require less training.

By Nina Richards (28/7/2008)