GUI Design Basics

Finding information explaining what constitutes a good and intuitive interface is exceedingly difficult. In this article, I describe the basic rules for all good interfaces -the cardinal dos and don’ts. However, before starting on what makes a design good, let me explain the causes of bad designs.

Forgetting the User

Developers and designers often design for what they know, not what the users know. This age-old problem occurs in many other areas of software development, such as testing and documentation. It is even more detrimental in the interface because it immediately makes the user feel incapable of using the product. Avoid this error diligently.

Seizing Control

If you’re design is built upon controlling the visual flow or breaking the rules of visual recognition, you should seriously re-think your interface. Using greyed out menus, disabling buttons, and popup error messages often seize control from the user and intimidates them. It makes them wary of clicking the ‘wrong’ button.

Too Many Options

GUIs with too many features at the top level overbears users. Lets take a look at a VCR made in 1985 and compare it to a DVD player of today.

The VCR has an abundance of buttons readily available on the faceplate of the unit, many of which will remain a mystery since the manual was lost years ago.

Now looking at the DVD. We know that the DVD player has a multitude of options the user can select, but thanks to technology, they don’t have to be visible instantly. They can be accessed via the options button on the remote or a setup button hidden on the console.

Less top level options encourages the user to explore, thus giving them ownership of the terrain and empowering them to use your interface.

Likewise, you should ensure 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 are most important.

GUI Successes!

Successful GUIs share many common characteristics. Most importantly, good GUIs are more intuitive than their character-based counterparts. One way to achieve this is to use real-world metaphors whenever possible.

Another important characteristic of good GUIs is speed, or more specifically, responsiveness. Many speed issues are handled via the design of the GUI, 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. A good example of this is creating a progress bar to track an event. Say a user clicks the ‘Submit’ button on a form. Instead of letting them wait for a response (which may take awhile depending on how much data was sent through the form and the integrity or quality of the internet connection on both the sender and recipient ends) instantly show a progress bar or a message indicating that the application recognized the fact that they click the ‘Submit’ button. While the same time will lapse, you at least assure the user that their command is being processed and can distract them from watching the clock with an amusing animation. It may seem trivial (30 seconds is 30 seconds) but to the mind time is processed slower when it’s idle, thus making your GUI seem slow. Imagine if you called tech support and sat on the line with no annoying music or advertisement, just silence!

There are other ways to improve speed such as avoid redrawing the screen as often as possible and handling validation on a per screen basis instead of field by field.

Dos & 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

Repeatable Processes

Users expect the GUI to act the same way each time a button is clicked or an image is moused over. So if you do something for one, you should do it for all. This applies to transitions, mouse over, tool tips, text formatting, and presentations. It’s good to surprise the user at times but more often than not, keep the interface as consistent as possible.

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.

Understanding People

Applications must reflect the perspectives and behaviors of their users. To understand users fully, developers must first understand people because we all share common characteristics. People learn more easily by recognition than by recall. Always attempt to provide a list of data values to select from rather than have the users key in values from memory. The average person can recall about 2,000 to 3,000 words, yet can recognize more than 50,000 words.

The Golden Section & The Fibonacci Series

The Golden Section is an aesthetically pleasing division of space that is often used by artists as the basis for measurments within their compositions. This division can be obtained using some math and a value known as Phi (pronounced “phee”).

The Golden Section is also related to the numbers of the Fibonacci Series. This series is formed by starting with 0 and 1 and then adding the latest two numbers to get the next in the string

Fibonacci Series:

	0 + 1 = 1
	    1 + 1 = 2
		1 + 2 = 3
	            2 + 3 = 5
		        3 + 5 = 8
		            5 + 8 = 13

Take a close look at the Fibonacci Series and you will see a column where the vertical sum equals the horizontal sum (3). If we overlay that point with the Golden Section, you will be pretty shocked at where your eyes go.

This point in the image is typically where your eyes go when you first look at ANYTHING!! Amazing isn’t it? If you take a close look at things around you, and in nature you will start to realize the Golden Section is everywhere, so lets use this to our advantage when designing an interface.

Take a second and review your interface periodically and plot your important and more commonly used elements where they can be accessed the easiest.

Audible Feedback

Audible feedback can be useful in cases where you need to warn the user of an impending serious problem, such as 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.

Keep the Text Clear

Developers often try to make textual feedback clear by adding a lot of words. However, they ultimately make the message less clear. Concise wording of text labels, user error messages, and one-line help messages is challenging. Textual feedback can be handled most effectively by assigning these tasks to experienced technical writers.

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 path (or, in this case, retraceable path). Providing a traceable path is harder than it sounds. It starts with an intuitive navigation framework to track the users whereabouts.

Modal vs Modeless

When we need input from the user, we often use a modal dialog box. Using modal dialogs has long been shunned by many developers as too constraining on the user. However, modal dialogs do have many uses in complex applications since most people only work on one window at a time. Try to use modal dialogs when a finite task exists. For tasks with no fixed duration, modeless dialogs will normally be the preferable choice with a major caveat: Try to keep the user working in no more than three modeless windows at any one time. Go beyond this magical number and the support-desk phones will start ringing as users spend their time managing the various open windows rather than concentrating on their tasks.

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.

Documentation & 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’ve 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. Instead, try a CMS or Devblog (like this one) and allow your coworkers to discuss the standards and easily review and search them. Spending an hour documenting your standards as you create them can save you hours of headache on those really big projects or nagging clients that never make up their minds. It also provides you with a structure for repetition and can help you gauge GUIs that have been successful versus those that have not.

Conclusion

In short:
Stop designing 1985 VCR’s and start making sleek and sexy DVD players that leverage the ever growing technology at hand. Each day the average user is becoming a bit more savy and lazier than they were yesterday. Keep this in mind when designing your next Great GUI