Upcoming Course Announcement:

Register now for QA Labs' four-session Strategic Test Analysis and Effective Test Case Design course presented through the University of British Columbia Continuing Studies on November 23, 2005 - December 14, 2005

Register now for QA Labs' one-day Software Configuration Management: Controlling Evolution course presented through the University of British Columbia Continuing Studies on November 26, 2005

Visit the course links above, http://www.tech.ubc.ca/softeng/curric.html, or call 604-822-1420 to register.

This month's article author: Donia Tung, editor: Trevor Atkins.

Getting the UI Style Guide into the Project

Ever since the first user interface design based on a desktop metaphor was created about 3 decades ago, the world of human computer interface has changed drastically. Rather than having to remember command lines, users can select commands from the menus by using a mouse. The computer interface has become more visual and usable.

According to Jakob Nielsen, "Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience."

Unfortunately, applications have fallen into the trap of bad UI design because they do not follow the standard look and feel that the users are familiar with. And yet, UI consistency issues are consistently ranked lower in priority than functional defects.

How to Solve?

Suppose there is a requirement "All screens except the last one in the sequence shall display a Next button."

But where should the "Next" button be located? If the location is not specified, each person designing or implementing the screens may have different interpretation in terms of where to put the button. This will cause the screens to be inconsistent and create difficulties for users to use.

But how could UI consistency be improved in software development? Where to start?

One of the first steps is to create a UI Style Guide that everyone can use as a guideline of standard look and feel for the application. “By making the style guide part of the process, it can be used to promote a shared vision, to help the product meet business and usability requirements for consistency.” (Whitney Quesenbery, 2001)

The UI Style Guide is not the UI design or UI specification documents. The UI Style Guide is similar to a requirement glossary and templates that are created prior to writing requirements to achieve consistency in the long term, or similarly Coding Standards for writing code.

A challenge when creating a UI Style Guide is to understand the existing style guide for the OS to be used as the target for development. Both Windows and Mac OS’s have already published extensive design guidelines for development. These guidelines provide the general look and feel of how applications should be designed when running on such OS’s so that if a user is to use applications on the same OS, there are certain similarities that this user has already learned from earlier experience.

For example, the close, minimize and maximize buttons on the Windows OS are located in the upper right hand corner of the frame, while on the Mac OS the same buttons are located in the upper left hand corner. Even though some of these differences are subtle, they become very important to drive the concept of design consistency.

Guideline for UI Style Guide

Since the OS’s already have the style guide published, there is no need to repeat them when creating the UI Style Guide. The UI Style Guide is to document the standards that are specific to the application being developed and any exceptions that deviate from the standard OS style guide.

The following checklist contains some of the sections that could be considered in a UI Style Guide as suggested by Whitney Quesenbery and other referenced resources.

• Design Principles: the overall design standard and usability goals that the application should follow. General OS style guides should be referenced in this section.

• Navigation Structure: the site structure and navigation methods that the users would follow. E.g. all navigation will be done via menu bar.

• Windows Layout: the layout which provides the templates that the application should follow. E.g. screen size, frames, popup windows, grids, status bar, dialog boxes, and headers and footers.

• Visual Style: the guidelines that define the overall visual theme of the application. E.g. colours, fonts, background, images, logos, icons, and cursors.

• Controls: the guidelines for each type of control that could be used and how they are grouped in the application. E.g. when to use what type of controls, standard height and width, sort order in combo boxes, and grouping.

• User Interaction: the methods and guidelines for the user to interact with the application. E.g. keyboard, mouse and other pointing devices, keyboard shortcuts/accelerators, and mnemonics.

• Text: the writing guidelines and structure of all text to be displayed. E.g. labels, tool tips, title bar text, status messages, error messages, glossary of terms, and capitalization.

• Common Functions: the designs for common functions that are used throughout the application. E.g. required fields for form filling, and search function.

Use It!

Once a UI Style Guide is available, use it! By incorporating a UI Style Guide in the process, it will help to reduce the number of UI inconsistency issues at the time of release.

Not only should the UI designers use it when creating the screens, but also everyone on the team should use it as a reference to ensure both design and implementation are consistent throughout the development cycle.

And of course, having a UI Style Guide allows QA to use it when reviewing the screens even before they are implemented. Any UI defects found early in the development cycle will be less expensive to fix and a style guide provides a basis for objective discussions in a creative environment.

Summary

UI issues should not be neglected. Applications with inconsistent designs are hard to use. “Studies of user behavior on the Web always find a very low tolerance for difficult designs.” (Jakob Nielsen and Donald A. Norman, 2000.) When the UI is not usable, it will not only discourage the users to return, but possibly cause the loss of potential customers.

Just creating a UI Style Guide will not address all inconsistency issues. If it is being used and enforced properly, it will provide a vision that will help to improve consistency in the application.

Here are some useful links relating to UI Style Guides

Windows XP - Guidelines for Applications
http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.mspx

The Aqua Interface
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html

Java Look and Feel
http://java.sun.com/developer/techDocs/hi/jlf-home.html

IBM Ease of Use - Design
http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/561

Nokia 7710 UI Style Guide
http://whitepapers.silicon.com/0,39024759,60104873p-39000498q,00.htm