Improving user experience: GUI Best Practices - Part I

Tags : , , , ,

Unless you have not touched a computer for the past 10 years, you have probably used some form of Graphical User Interfaces (GUI) before. Since the introduction of Windows 3.1 and Apple MacOS, most of the software employs the use of Graphical User Interfaces.

A GUI allows the users to have a much easier time learning and using the software as compared to it’s command line counterpart. However, too many a time we use a software program and sigh, “Why do I have to go through all these steps to do that?” Indeed, as with all other tools, a GUI can only improve the user experience if it is used correctly.

With the hope of inspiring better GUI design this article addresses the issue of minimizing the effort users put in to navigate and use your software. It will be followed by a series of topics including using the right components, good screen organisation and other methods to improve your users’ experiences and thus increase the value offered by your applications. From time to time, we may also explore the use of some technologies such as AJAX.

This set of articles will give you a rough guide on GUI best practices and encourage you to start building better Graphical User Interfaces. The articles are written based on my personal opinions and experiences from over 5 years of software and web development. If you have any comments and suggestions, I welcome you to email them to me at vincent@imfinity.com.

Part 1: Minimizing the effort

Why a good user interface design?

When we think about GUI, a lot of us will probably have the idea of using a mouse and clicking at buttons, check boxes, radio buttons and all the other components that make up the screen that we are very familiar with today. As a developer, you would have designed many screens that required the use of the mouse in one way or another. In fact, it is so intuitive that many of us probably did not even take a moment to think about it.

However, as with designing any product, serious planning of each detail is critical. And the user interface design is of the utmost importance, since it is how your users actually interact with your software to make use of the functions that you are providing.No matter how good and efficient your functions are, the user would not have a good experience using them if you do not provide a good user interface.

What is a good user interface?

So what exactly is a good user interface? A good user interface offers access to the functions provided in an intuitive way and requires the least effort from the users to perform their tasks. Most developers already understand that the users use their software to perform certain tasks. But very often they forget that the users want to do these tasks faster and with less effort. Remember that your software should allow the users to concentrate on their tasks and not how to use your software to perform the tasks.

Reducing the number of clicks

One easy (and often overlooked) method to improve the users’ experience is to reduce the number of clicks needed to achieve a task. A good rule of thumb is to provide access to the most frequently used functions right on the main page, i.e. at the main web page or at the main menu of a Windows application. Try not to make your users click on menu after menu to access a frequently used function. Even though an additional click of the mouse may not seem like a big effort but imagine how irritated the users will be when they have to make this additional click all the time.

However, screen space is usually limited and you should not clutter the screen with too many components and functions. Think of your software as your desk. You will usually place your frequently used pens, papers and calendar at the desktop but will keep infrequent items such as staples, paperclips and envelopers in the drawers. Similarly your users will not mind making an additional click to access a function that is needed once in a while. Therefore you may hide away infrequently used functions in separate menus that can be accessed from the main page.

Allow users to perform tasks using only one mode of input

Remember that a good user interface design allows your users to do their tasks with the least effort. By giving them easy access to frequent functions, you are already reducing their effort. However it is often not enough if your users have to keep changing from keyboard to the mouse and then back to the keyboard.

Very often, we see software and frequently web pages that require you to click on the text box and then change to the keyboard to input text and then change to the mouse to click and select another control. A change of input mode (i.e. from keyboard to mouse) requires the users to lift their hands off the keyboards and to the mice and in this process disrupts their concentration on their tasks and reduces speed.

Therefore you should always provide a way for your users to use one mode of input of their choice (whenever it is possible). You should, for example, place the cursor directly at the first text box and also provide tab stops for each of the controls in the page in the right order. Shortcut keys should also be provided for all the buttons and menus. In this way, your users would only need to use the keyboard to perform their tasks and thus they will be able to concentrate better on their tasks.

Avoid unnecessary clicks

Sometimes even after you have followed the guidelines in the previous sections, you are still able to remove unnecessary clicks. For example, while returning the items in the search results, if you find that there is only one item in the list, you can reduce the additional click to view the item by going directly to the detail page of that item. This is especially useful for e-commerce websites where users would search for the items that they want to purchase. By reducing that additional click, you reduce the effort needed by the users and thus provide a much more enjoyable experience.

In this part, we have looked into reducing the effort needed by the users to use your software. I hope that it has given you a good idea on creating a better experience for your users. In Part 2, we will look into ways to reduce their effort by using the right components. See you int the next issue of the ISV Lounge!



Leave a Reply