Principles of Good GUI Design

As developers, we are concerned about the functionality of an application. We implement advanced technologies, design patterns, ‘n’ tier architecture…. high security, robust, flexible…. Even after all these positive features, the application fails to attract the ‘end user’!!! Why? Where did we go wrong? The answer lies in the “Graphical User Interface”, shortly and popularly known as GUI. Yes, the final GUI plays a crucial role in the success/failure of an application (it may be a thin client application or thick client desktop application).

As a developer, I accept that the functionality, no functional/architecture bug(s), high security, robustness, flexibility…. and other stuff are major considerations of any application. However, when I become an end user, then what? From an end user’s perspective, I am not bothered of what all is behind the application, I am just bothered whether the GUI is interactive with me or not. And this is the criterion where most applications fail to catch the users’ interest.

In this article, I will discuss the “Principles of Good GUI Design”. Basic rules, the cardinal do’s and don'ts, for all good interfaces have been elaborated.

Graphical user interfaces (GUIs) have become the user interface of choice. Yet, despite the GUI's popularity, surprisingly few programs exhibit good interface designs. Moreover, finding information explaining what constitutes a good and intuitive interface is exceedingly difficult.

However, before starting in on what constitutes good design, I need to explain the causes of bad design (as before seeing the light, it is better to know what darkness is). In this way, if you are tempted to deviate from the tried and true, you'll know where the wrong path leads and, I hope, get back to good design.

Main Reasons for Bad GUI Designs

Forgetting the user

Developers often design for what they know, not what the users know (as explained above). This age-old problem occurs in many other areas of software development, such as testing, documentation, and the like. It is even more pernicious in the interface because it immediately makes the user feel incapable of using the application. Avoid this error diligently. Design for what user knows.

Give users control

GUI designers' liking for control is evident in applications that continually attempt to control user navigation by graying and blackening menu items or controls within an application. Controlling the user is completely contradictory to event-driven design in which the user, rather than the application, dictates what events will occur. As a developer, if you are spending a lot of time dynamically graying and blackening controls, you need to re-examine your design approach and realize that you may be controlling the user, who may not want to be controlled. As business changes at a faster pace, flexibility in user interfaces will become a key enabler for change. Allowing users to access the application in ways you never dreamed can be scary, but satisfying for you as a developer and empowering for the user.

Too many features at the top level

Have a look at the Music Players built in the 1980s and then look at the one built in 2000. You will find a major difference in the user interface of the two models. The one built in the 1980s will have plenty of buttons (controllers) readily available on the faceplate of the unit, many of which will remain an obscurity since the manual was lost years ago. The 2000s model will have only a few buttons for the key features people use, say play, fast-forward, reverse, stop and eject. This model will probably have even more features than the model built a decade or two before. These features, smartly tucked away behind a drop down panel/drop down menu/sliders, will be accessible when you need them but are not staring you in the face.

Similarly, as a developer you should make sure that features used frequently are readily available. Avoid the temptation to put everything on the first screen or load the toolbar with rarely used buttons. Do the extra analysis to find out which features can go behind the panel instead of on the faceplate.


GUI Successes

Before you can answer the question "How do we make our user-interfaces better?" you must first answer the question: Better for whom? A design that is better for a technically skilled user might not be suitable for a non-technical businessman or an artist.

One way around this problem is to create user models by creating "profiles" of possible users. The result of this process is a detailed description of one or more "average" users, with specific details such as: 

· What are the user's goals? 
· What are the user's skills and experience? 
· What are the user's needs? 

Armed with this information, you can then proceed to answer the question: How do we leverage the users’ strengths and create an interface that helps them achieve their goals? 

In the case of a large general-purpose piece of software, such as an operating system, there may be many different kinds of potential users. In this case it may be more useful to come up with a list of user dichotomies, such as "skilled vs. unskilled", "young vs. old", etc., or some other means of specifying a continuum or collection of user types. 

Another way of answering this question is to talk to some real users. Direct contact between end-users and developers has often radically transformed the development process.

Once you have identified the user and his/her goals, then concentrate on designing the effective UI as discussed below.

GUIs should help users to learn your application faster

Now, let us discuss how a GUI can be successful. Successful GUIs share many common characteristics. Most importantly, good GUIs are more spontaneous than their character-based counterpart. One way to achieve this is to use real-world descriptions wherever possible. For example, if you visit Online Shopping centers on the web, you will observe that they use bitmaps of Visa and MasterCard logos on buttons that identify how a customer can pay. This graphical representation is immediately intuitive to users and helps them learn the application faster.

GUI’s speed/responsiveness

Another important characteristic of good GUIs is speed, or more specifically, responsiveness. Many issues relating to speed are handled via the GUI design, and not the hardware. Depending on the type of application, speed can be the make-or-break factor in determining an application's acceptability in the user community. For example, if your application is oriented toward online transaction processing (OLTP), slow performance will quickly result in users wanting to discard the system.

You can give a GUI the appearance of speed in several ways. Avoid repainting the screen unless it is absolutely necessary. Another method is to have all field validations occur on a whole-screen basis instead of on a field-by-field basis. Also, depending on the skills of the user, it may be possible to incorporate features into a GUI that give the user the capability to enter each field of each data record rapidly. Such features include mnemonics, accelerator keys and toolbar buttons with meaningful icons, all of which would allow the user to control the GUI and rate of data entry.

Do’s And Don'ts

Every good developer should have the goal of designing the best GUIs possible. But how does a developer make this goal a reality? By following sound, proven GUI design principles such as those listed in the following sections.

Like any good professional, YOU need some rules for repeatable successful designs.

Be careful of different perspectives

Many designers unwittingly fall into the perspective trap when it comes to icon design or overall behavior of the application. I recently saw an icon designed to signify "Warning" for an HR system. To signify this function, the designer put much artistic effort into creating an icon. Unfortunately, the users of the system had no idea what metaphor the icon was supposed to represent even though it was perfectly intuitive from the designer's perspective. A reserved-icons table containing standard approved icons, such as the one shown in figure 1, will help eliminate such problems.




Design for clarity

Often, GUI applications are not all that clear to end-users! One effective way to increase the clarity of applications is to develop and use a list of reserved words. A common complaint among users is that certain terms are not clear or consistent. I often see developers engaging in spirited debates over the appropriate term for a button or menu item, only to see this same debate occurring in an adjacent building with a different set of developers. When the application is released, one screen may say "Item," while the next screen says "Product" and a third puts it as "Merchandise" when all three terms denote the same thing. This lack of consistency ultimately leads to confusion and frustration for users.

Figure 2 gives an example of a list of reserved words. An application development group might complete and expand the table with additional reserved words.

Fig. 2: List of reserved words

Design for consistency

Good GUIs apply consistent behavior throughout the application and build upon a user's prior knowledge of other successful applications. When writing software for business applications, provide the user with as many consistent behaviors as possible. Each new and exciting experience you provide in the software can become an anxiety-inducing experience or an expensive call to your help desk.

Provide visual feedback

If you've ever found yourself mindlessly staring at the hourglass on your terminal while waiting for an operation to finish, you know the frustration of poor visual feedback. Your users will greatly appreciate knowing how much longer a given operation will take before they can enjoy the fruits of their patience. As a general rule, most users like to have a message dialog box with a progress indicator displayed when operations are going to take longer than 7-10 seconds. This number is highly variable, based on the type of user and overall characteristics of the application.

Provide audible feedback

A few years ago, I was working on a project that expected audible feedbacks along with the message dialogs. When I started the project, audible message feedbacks were cute for me (as that was quite an innovative thing for me at that time). However, as the project proceeded for about four/five months, I used to ignore the voice and see it as more of an annoyance than help. The same thing can happen with your GUls. Put sound on a few hundred workstations and a real dissonance will emerge in the open-air cubicle environment. However, audible feedbacks can be useful in cases where you need to warn the user of an imminent serious problem, e.g. one in which proceeding further could cause loss of data or software. Allow users to disable audio feedback, except in cases when an error must be addressed.

Provide traceable paths

If your users ever say something akin to, "I don't know how I got to this window and now that I'm here, I don't know how to get out," then you have not provided a traceable (or, in this case, retraceable) path. Providing a traceable path is harder than it sounds. It starts with an intuitive menu structure from which to launch your specific features.

You must also identify areas where you can flatten the menu structure and avoid more than two levels of cascading menus. Providing a descriptive title bar within each dialog box will help to remind the user what menu items or buttons were pressed to bring them to the window now in focus.

Provide keyboard support

Keyboards are a common fixture on users' desktops and provide an efficient means to enter text and data. With the introduction of GUI applications, we often assume users will embrace the mouse as the primary interactive device. This can become time-consuming and inefficient for the touch typist or frequent users of your application.

Keyboard accelerators can provide an efficient way for users to access specific menu items or controls within a window. The accelerators used should be easy to access and limited to one or two keys (such as F3 or Ctrl-P). Keyboards have limitations in the GUI world, such as when trying to implement direct-manipulation tasks like drag and drop, pointing and resizing.

In contrast, you will always find a smaller set of users who are not touch typists and hence embrace the mouse as a point-and-click nirvana. The result is that you need to provide complete and equal keyboard and mouse support for all menu and window operations.

Watch the presentation model

A critical aspect that ties all these facets of the interface together is the interface's look and feel, which must be consistent. On the basis of users' experiences with one screen or one dialog box, they should have some sense of how to interact with the next screen or control. 

Searching the interface model for good design and continuity is very essential. The model should involve careful decisions, such as whether the application will have a single or multiple document interfaces. The model will also validate how users perform their main tasks within the application.

Identifying the appropriate presentation for an application will greatly facilitate the subsequent windows being developed since they will have a common framework to reside in. On the other hand, if you do not define the presentation model early in the design of your GUI, late changes to the look and feel of the application will be much more costly and time-consuming because nearly every window may be affected.

Control design

Controls are the visual elements that let the user interact with the application. GUI designers are faced with an unending array of controls to choose from. Each new control brings with it expected behaviors and characteristics. Choosing the appropriate control for each user task will result in higher productivity, lower error rates and higher overall user satisfaction. Use the table in figure 3 as a guideline for control usage in your screens.

Fig. 3: Guidelines for using controls

Finally, try to keep the basic behavior and placement of these controls consistent throughout your application. As soon as you change the behavior of these basic controls, the user will feel lost. Make changes thoughtfully and apply the changes consistently.

Implementing effective standards

Once you implement some good design practices into your GUI applications, how do you ensure others in your organization will do the same? The most cost-effective way to ensure consistency among your GUI applications is to implement GUI standards that are easy to use, clear and concise. We have all experienced the "standards" manual that is energetically distributed to coworkers only to be placed immediately on the developer's shelf next to other unread manuals. To ensure your standards do not meet this same fate, provide them in an online hypertext format. Divide your standards into rules – which must be followed or the developer will have some explaining to do – and recommendations. Developers like to know what is mandatory and where they have discretion.

Conclusion

Good GUI designs do not happen naturally. They require that the developer learn and apply some basic principles, including making the design something the user will enjoy working with every day. They also require that the developer get as much experience as possible in working on and being exposed to good GUl designs.

Remember, if you apply the principles and get some experience in good GUI design, your users will have an easier time getting their jobs accomplished using the GUIs you produce for them. 

Arunkumar H.G is a Senior Consultant with ReadiMinds Systems and Services Pvt. (India) Ltd. He can be reached at: arunkumar.hg@gmail.com.