User Interface Design

User Interface Design (UI) is another subset of User Experience, and may be combined with, or separate from, the usability tasks depending on the team and the project. UI Design is primarily concerned with the user-facing, visual and interactive aspects of a product, and is most often associated with computer software and web applications. However, it is actually much more inclusive. An iPod, a DVD player, a toaster, and a car all have user interfaces - and it would be impossible to operate without them. The user interface acts as a bridge between the user and the device. It is the point where the user inputs their communications to the device, and the device responds to the user's input. Over the last decade UI Design has grown in popularity. This is particularly noticeable in software and web applications which have grown rich and complex, a result of the advances in computer hardware and networking technologies.

Many design guidelines have developed describing the processes and methods for creating effective user interfaces. Some of these guidelines are drawn from the fundamental principles of graphic design, and have been adapted for an interactive environment. Some are derived from usability and human-computer interaction research, which minimize the visual design aspect. Others come from the perspective of interaction design, instructional design, or advertising and branding. According to Didier P. Hilhorst in the article, Apples and Oranges, "Usability and design are two fields that collide more often than not." (Hilhorst, 2006). Each of these disciplines has a defined goal in interactions with the user, and all have valid reasons for their approach to information, although they are not always in agreement. The best results are accomplished by each of these disciplines working together collaboratively. Not all researchers agree on the equality of each viewpoint. Deborah J. Mayhew in her book, The Usability Engineering Lifecycle states "…it's easier to teach and learn basic design principles and how to do simple usability testing than it is to teach and learn how to conduct the more rigorous User Profiles and Contextual Task Analysis techniques effectively." (Mayhew, 1999). However, professionals from a design or development perspective may feel that creating the information architecture, branding and visual aspects, or understanding the technical requirements of the context, require much more training and a deeper understanding of the overall goals of the project than the task of simply interviewing the user.

Design guidelines concentrate on the underlying principles of color, balance and contrast in graphic design. These principles combined with HCI (Human Computer Interaction) and usability research on cognitive processes account for the most-often quoted overall design guidelines. Some researchers, such as a leading usability expert, Jakob Nielson, believe that visual design is not the major factor in web usability. However, a recent study done at the Persuasive Technology Lab at Stanford University revealed:

…that the average consumer paid far more attention to the superficial aspects of a site, such as visual cues, than to its content [and] nearly half of all consumers (or 46.1%) in the study assessed the credibility of sites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and color schemes. (Fogg, Soohoo and Danielson, 2005).

According to Robert Lindstrom's book, Multimedia Presentations, "The key to good interface design is making an interactive presentation easy to use and intuitively easy to understand, while furthering the communication strategy and objectives that underlie the project." (Lindstrom, 1994). Some of the important visual aspects of user interface design are: look and feel, branding, color and text. The look and feel of a user interface creates a personae or atmospheric quality, and describes the "style direction" of the interface. The branding is a key factor in the look and feel. Branding may include the logo, the use of a certain graphic style, and the use of a certain color palette. The look and feel also includes the interaction model of the user interface. It is the overall impression of the entire environment which the user will experience while interacting with a product. According to Tony Fernandes' book, Global Interface Design, "…it is the user interface designer's goal to create an experience that is easy for the user to understand and a tool that is easy to use." (Fernandes, 1995).

Color has an immediate and profound impact in the impression of a user interface. It is probably the most influential aspect of the overall look and feel - although its effect can be very subtle. According to Gregg Furth's book, The Secret World of Drawings, "Different theories on color interpretation do not always agree on specific meanings, but theorists agree that colors can symbolize certain feelings, moods, even the tone." (Furth, 1988). The impact of a user interface which primarily uses pastel yellows and pinks is very different than that of the dark tones of navy, gray and black. The users' reactions vary greatly depending on the color palette. Color evokes emotional responses in a very subliminal way. Warm colors, such as red and orange, tend to draw attention before the cooler colors of blue and green. With the strategic placing of color it is possible to lead the user through a sequence of information in a presentation. It is best to combine the use of color with other design treatments, such as element placement and size.

Many fundamental rules for the text design in current technologies are inherited from graphic design principles. However, writing for online delivery is different than writing for most print media. Writing for online delivery is much like newspaper writing - it is best to state the conclusion first, and then substantiate it with supporting details and information. Much like reading a newspaper, website readers usually scan for significant information, and may not scroll down to read the conclusion. Writing for a book is much different than writing for these types of media. According to Ellen Lupton's book, Thinking with Type:

…readers on the Web are less patient than readers of print [because the] impatience of the digital reader arises from culture, not from the essential character of display technologies. Users of Web sites have different expectations than users of print. They expect to feel "productive," not contemplative. They expect to be in search mode, not processing mode. Users also expect to be disappointed, distracted, and delayed by false leads. The cultural habits of the screen are driving changes in design for print, while at the same time affirming print's role as a place where extended reading can still occur. (Lupton, 2005).

Another important aspect of user interface development is icon design, which is the process of codifying concepts into an abbreviated visual form. As explained by Steve Caplan in his book, Icon Design, icons are modern symbolic representations of concepts very similar to our early ancestors pictograms representing objects, sensations or ideas, such as the sun to represent heat. (Caplan, 2001). Caplan further explains:

…even long after the written word became the universal means of communication, iconic images continued to be used for specialized purposes… Almost every trade and profession has its own set of icons. Alchemists used icons to represent the various elements; astronomers still use icons to depict the planets and stars. (Caplan, 2001).

According to Marta Thoma's book, Graphic Illustration, "Abstract symbols communicate to a viewer on a…subliminal level [and] communication on this level can have a surprisingly potent effect." (Thoma, 1982). The most effective iconic languages are often the most simple.

Although Anistatia A. Miller was referring to logo design in her article Marks of Excellence in Adobe Magazine, many of the design concepts for logos also apply to icon and user interface element design. Miller states:

A logo may relay a very broad message, involving intangibles such as image and mood, or may speak directly about a particular product or service. The greatest logos are powerful, striking, and symbolic; they cut through language barriers, communicating through shape and color. (Miller, 1986).

Icon design for software gained popularity with the introduction of Apple's MacIntosh operating system and user interface. The uses of common metaphors, such as a folder for a directory, a floppy disk for save, or a garbage can for delete, created standards still used today. According to Milton Glaser's book, Graphic Design, "Design…conveys information based on the audience's previous understanding. Because design deals with familiar forms." (Glaser, 1973). However, some of the technologies that these symbols were based upon, such as the floppy disk, are becoming obsolete. Not all designers agree that visual icons are effective as a universal language. In the article, The Birth of the User, Ellen Lupton states that current software and web technologies such as XML are more useful because they can translate the content and user interface text into a localized language. Further, Lupton states:

Another common assumption is that icons are a more universal mode of communication than text. Icons are central to the GUIs (graphical user interfaces) that routinely connect users with computers. Yet text can often provide a more specific and understandable cue than a picture. Icons don't actually simplify the translation of content into multiple languages, because they require explanation in multiple languages. The endless icons of the digital desktop, often rendered with gratuitous detail and depth, function more to enforce brand identity than to support usability. In the twentieth century, modern designers hailed pictures as a "universal" language, yet in the age of code, text has become a more common denominator than images-searchable, translatable, and capable of being reformatted and restyled for alternative or future media. (Lupton, 2005).

Not all designers share Lupton's opinion. Tony Fernandes offered a very different opinion on the subject of visual images for icons:

Most Americans don't deal with a large amount of visual communication. Perhaps this is because, unlike other parts of the world, there are very few other languages that compete with English. This has made English text an acceptable vehicle for communication in most instances….American traffic signs…are very textual. Although this is beginning to change, American signage has a poor tradition in visual communication. Signs quite often assume that not only do viewers read English, they are also knowledgeable of American abbreviations….In other regions of the world, visual communication is much more mature and accepted. (Fernandes, 1995).

Overall, the most effective iconic languages support the look and feel of the application. In addition, they are easily recognizable, universal enough to be used globally, and generally the most simple and elegant.

Documenting the user interface design, by creating a Style Guide, is also an important step in the process. The Style Guide records the actual design elements used throughout the application or product, describes their context and use, and may describe the process to create additional design assets. This documentation is invaluable for future developers of the existing application or product, or third party developers who wish to make the look and feel of their product consistent.•