Improving user experience: GUI Best Practices - Part II - UI Components
Tags : GUI, Professional Interface, Software designing, development, layouts, colors, Design components, Screen organizing
I was looking through the Microsoft Windows Vista website the other day and saw this paragraph in the Features section under User Experience:
The visual sophistication of Windows Vista helps streamline your computing experience by refining common window elements so you can better focus on the content on the screen rather than on how to access it. The desktop experience is more informative, intuitive, and helpful. And new tools bring better clarity to the information on your computer, so you can see what your files contain without opening them, find applications and files instantly, navigate efficiently among open windows, and use wizards and dialog boxes more confidently.
Source http://www.microsoft.com/windowsvista/features/default.aspx
Indeed, no matter how efficient and powerful your software is, you will need to have a good user interface to present its features to your users. Otherwise you may still risk losing your market to your competition. If the world’s largest software company is focusing so much on the user interface, so should you.
In Part 1 of this series, we have discussed about minimising the users’ efforts to achieve their tasks using your software. Today, let’s look into using the right components for your application. Furthermore we will discuss whether it is good to develop your own components and ways to minimise the confusion from your users. The opinions expressed in this article is entirely mine. Please feel free to email your comments and suggestions to me at vincent@imfinity.com.
Part 2
Using the right components and colours
I believe many of you are thinking right now. “But I already know about using the right components and colours!” Yes, I know most of us are already very familiar with the components that are available to us as we put together the Graphical User Interfaces (GUI) for our software application. However, as most software companies generally do not employ any specialized Graphics Designers, the tasks of designing the GUI typically falls on the developers like ourselves. Therefore it is important to design and build the GUI right while you are developing the software. And the elements of the GUI are these components.
Using the common components
The most common of these components are the buttons, text boxes, combo boxes, list boxes, check boxes, radio buttons, etc. In this article, I will not differentiate between those data-enabled components and the normal components. If you are using a Integrated Development Editor (IDE) such as the Visual Studio.NET you can find all these components at the toolbox panel. Using these common components are simple (just drag and drop for most IDEs), however the more important reason for using them is that your users would have already known how to use them.
As I have mentioned in Part 1, a good GUI design allows your users to concentrate on their tasks without having to constantly think of how to use your software. Therefore using common components, although intuitive, are important to bring about good user experiences.
Using the common components correctly
Even if you are already using the common components in your GUI, you have to use them correctly or else you might cause frustrations for your users. As I have mentioned before, the users have already known how to work on these components and they will expect the same type of reactions they would get from the same actions they performed on these components. Anything other than those expected will cause confusion.
Let me give you a common example of the misuse of check boxes. I am sure most of you have encountered a list of choices with checkboxes beside each of the choices. Clicking on one of the boxes will check the selected box and uncheck all other boxes. The developer obviously decided that the tick mark in the box makes it easier for the user to understand that the option is selected.
However, this design cause frustration. First of all, the user will look at this set of options and pause and wonder who to select more than one options which seem mutually exclusive to each other. Next, checking another box uncheck all others is not normal behaviour for check boxes causing another confusion. As you probably know, radio buttons or even better, a radio group, should be used in this case.
Using less Dialog Boxes (and give more hints)
Another commonly used component is the dialog box which pops out on the screen and usually used by developers to show information or more commonly error messages. Personally I would like to encourage you to use it less often as it disrupt the flow of thought of your users. Remember, we are trying to allow the users to concentrate mainly on their tasks at hand.
If you have to use these dialog boxes, please give a more comprehensive and less intimidating error message. Imagine the shock on your users faces, especially the less IT-savvy ones, when they see the following error message:
Error Code 10032: Invalid User Credentials.
For me, it would be better if the message were to be:
You are not logged in because you have entered your User ID and password incorrectly. Please try again.
Furthermore, if an error exists, try to offer suggestions as to how the user could have solved the problem. For example:
The printer could not be found.
Please check to ensure that the printer is connected to your computer and that it is switched on. Click on Help for more information.
How do we minimize the use of dialog boxes then? Give more hints. For example, you can put asterisks beside text boxes that need to be filled in. Furthermore, if a certain format is needed such as for the date field or a currency field, it would be appropriate to inform the users early before they made a mistake.
Organizing the screen
Now that you have used the right components, you still need to ensure that these components are organized in such a way that do not cluster the screen. Take a look at your desk. If you are the tidy type of person, your desk is probably “partitioned” into several sections even though there is no clear boundaries drawn. Different people partition their desk differently. Some people, like me, would prefer to put all papers at one side, stationeries at the other and possibly a computer at the middle. Thus you should do the same when you are designing your screen.
Set up partitions in your screen forms by adding Panels and Group Boxes. They make your screens more organized and look more professional if used correctly. However I will also like to caution against the overuse of these components. Typically you should have a least two or three options or “lines” of components in each of the panels or group boxes. Furthermore the items inside the groups should be logical to your users. If you are using a group box, do remember to give a meaningful name to name your group. Using nouns names such as “Personal Information” and “Product Details” is preferable to verbs such as “Starting the Server”.
Designing your own components
Many developers feel that the basic components provided by the IDE or the operating system are insufficient and set out to build their own components. There is nothing wrong about this. However, there are two key points to note when you are designing your own custom components.
First of all, your users will have to spend time to learn how to use your component. Therefore do ensure that you build and use your components only if it is worth the efforts of your users to spend time to learn them. Furthermore, your new components should be intuitive and easy to learn and use. There is no point in having a new component that is harder to use than a common one.
Secondly, if you are extending existing components, such as a text box that can display text in multiple colours, do ensure that the behaviours of the existing components are not modified beyond the users’ expectation. For example, users would not expect clicking on a text box or even a radio button to jump to another screen.
Thirdly, do not assume that users have the same experiences as you. As developers, we have seen many types of applications and are experienced in handling computer software. However the users of our software may have different backgrounds. Some of them may have just learned to use the computer. What might seem intuitive to you might not be for them. Therefore, after you have designed your new component, remember to have them try out by a few normal users for their opinions before implementing them directly into your applications.
In this part, we have discussed using the right components in your software applications. Simply by using the right applications correctly, you avoided the confusion that the users might have and thus reduce their efforts in doing their tasks. In the next part, we will look into how to make your application look professional and other technologies that help make your application even more user-friendly. See you in the next issue of ISV Lounge!
Send your comments to Vincent.
