It302 ch06

C H A P T E R
6
Design Principles
Interaction design is a lengthy process that requires a comprehensive knowledge of computing technologies and a thorough understanding of the psychological complexities of the human mind. It must take into consideration our sense of logic and our sensitivity to aesthetics. In fact, the aesthetic-usability effect says that aesthetically pleasing interface designs are perceived as being easier to use than other, less appealing interfaces, even if that is not actually the case.
How do we create elegant solutions to complex interaction problems? It can seem daunting to consider all of the technical variables involved in interaction design and come up with something that is useful and usable and, in addition, create a design that is aesthetically pleasing. How do interaction designers succeed at creating the great designs that are powerful and aesthetically appealing? Think of the Apple iPod or the Google search engine. These are powerful tools that have enormous appeal and tremendous market success. People like them, and they perform their tasks elegantly and reliably. To impose structure and order on the design process, interaction designers use principles to guide and inform the many decisions they must make. These principles help designers to make decisions about the way interfaces should look and 193
ISBN 0-558-86011-7
The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright 2008 by Pearson Education, Inc.
194
Chapter 6 Design Principles
function. They can assist in the decision-making process when tradeoffs are required, and they can also help to convince other members of the design team on the correctness of certain decisions. These principles help designers to create more-intuitive designs. They are well established and have a long history in the various design disciplines. Lets look at some of these principles and see how they can be applied to interaction design projects.
6.1. Principles of Interaction Design

MAXIM
Design principles can be used to guide design decisions.
Interaction design, like all design disciplines, is guided by well-established principles. Design principles do not prescribe specific outcomes; they function within the context of a particular design project. They guide the interaction designer and help him or her to make decisions that are based on established criteria. There are many important principles, and there are many ways to apply them. Their application usually depends on context. We will explore several of these principles and apply them to specific design situations. The principles will be presented in a systematic and structured way using two main categories: effectiveness principles and efficiency principles. Once we begin the design process, however, things will get a lot messier. Iterative design is a multilayered activity that is subject to many different and often contradictory forces. For instance, we may strive to place screen components in consistent locations, but to prevent the user from inadvertently clicking on a destructive function like Delete, we will break the consistency rule and locate these functions in places that will catch the users attention. The way in which we apply design principles depends on the context of the particular design activity in which we are involved. Every decision must be weighed against the whole and determined by the specific circumstances of interaction.
Gulfs of Execution and Evaluation

Design principle can also be used to determine whether there are gulfs of execution or evaluation. Gulfs of execution relate to the effectiveness principles, and gulfs of evaluation relate to the efficiency principles. They can be applied at each of Normans seven stages (see Chapter 2) based on execution/effectiveness and evaluation/efficiency correlations.
6.1.1. Framework for Design Principles

Design principles are not easily categorized; they are interrelated and may have recursive relationships with other principles. For instance, consider the principles of
ISBN 0-558-86011-7
6.1. Principles of Interaction Design
195
predictability and memorability. If something has a predictable behavior, such as a button that appears to press in when we click on it, we will be more likely to remember that behavior the next time we encounter a similar button. Therefore, this type of button will have a high degree of memorability. Recursively, the memory of that behavior will increase the predictability of other button components. To avoid this type of complication, we can take a more structured, although artificial, approach. The following framework serves the purpose of clarifying the discussion; its use does not imply that there are no other ways of viewing the connections and relations among the various design principles. Nor does the method imply a strict hierarchal structure. The framework has the following components: Usability GoalsThere are two main usability goals in the framework comprehensibility and learnability. These are discussed in more detail later. Design Principle CategoriesAs mentioned earlier, the framework also divides the design principles into two main groupsefficiency principles and effectiveness principles. The effectiveness principles can be used to determine required functionality, and the efficiency principles can be applied to the design of the presentation filter (interface). These categories and their related principles are discussed in detail in the following sections of this chapter. Format for Describing Design PrinciplesThe framework uses the format serves the principle of ..., which promotes ... to describe the different principles. For instance, familiarity serves the principle of memorability, which promotes usability. Consider the framework shown in Figure 6.1. The framework includes two barriers derived from the two main goals: the comprehensibility barrier and the learnability barrier. These barriers can present formidable obstacles for the user and diminish the ultimate usefulness of the design. For instance, lets look at the principles of customization and flexibility and how they relate to the goal of usefulness. We can say that customization serves the principle of flexibility, which promotes usefulness. However, if the design is difficult to understand, the user may not be able to use the customization features. Therefore,
Comprehensibility Barrier
Learnability Barrier
Functionality
Presentation Filter
Efficiency Usability
Effectiveness Usefulness
ISBN 0-558-86011-7
Figure 6.1 Framework for design principles.
196
Presentation Output
Observation
Core
Task
Performance
Input
Articulation
Figure 6.2 Interaction framework.

the comprehensibility barrier will make the design less usable and, consequently, more difficult to learn. This will decrease the ultimate usefulness of the design. Lets explore this framework and relate it to the interaction framework (Dix, Finlay, Abowd, & Beale, 1998) covered in Chapter 2 (Figure 6.2). FunctionalityThe system must have adequate functionality for a particular task. This is expressed in the core language of the system (performance step) and relates to the users task. Presentation FilterThe functionality must be made accessible through the presentation filter (interface). This involves the presentation, the articulation, and the observation steps. Comprehensibility Barrier If the presentation is comprehensible, the comprehensibility barrier will be superseded. This depends on the degree of efficiency/usability in the interface design. The user must understand what is required by the input language (articulation step) and what is being communicated by the output language (observation step). Learnability BarrierIf the interface is comprehensible, it will be learnable; there is a direct relationship. Effectiveness/UsefulnessIf the user can learn the interface, he or she can take advantage of the functionality, and therefore the interface will be useful.
6.2. Comprehensibility
MAXIM
An interface design that is easy to comprehend will be efficient and effective.
ISBN 0-558-86011-7 The Resonant Interface: HCI Foundations for Interaction Design, by Steven Heim. Published by Addison-Wesley. Copyright 2008 by Pearson Education, Inc.
6.3. Learnability
197
The most important consideration in interaction design is comprehensibility. If a user does not understand the interface, he or she will not be able to use it, rendering it useless. A designs comprehensibility is highly dependent on the way in which the interface communicates its functionality to the user. The functionality that makes a design useful might be present in the design; however, if that functionality is communicated in an incomprehensible way, that functionality becomes essentially invisible. People are adaptable and generally find ways to accomplish their goals; however, a design that is not easy to understand makes this more difficult and impedes performance. We should, therefore, hold comprehensibility as the highest goal in the design process.
6.3. Learnability
MAXIM
An interface with high usability will be easier to learn.
The learnability of a design is based on comprehensibility: if you cant understand it, you cant learn it. However, even if an interface has high comprehensibility, it might still involve a learning curve. Moreover, learnability and comprehensibility are recursive: we start with comprehensibility, which affects learnability, which in turn increases comprehensibility (Figure 6.3). This is a powerful feedback loop that can be facilitated by the proper application of Figure 6.3 design principles. For instance, if we use familiar conventions, the interface will be easier to understand and, therefore, easier to learn. The end result will be a useful design. Comprehensibility/learnability Lets now look at each of the principles and see how they can best be applied in the interaction design process. The design principles are organized based on the goal for which they are the most relevant. Effectiveness/usefulness Utility Safety Flexibility Stability
feedback loop.
Efficiency/usability Simplicity Memorability Predictability Visibility
ISBN 0-558-86011-7
198
6.4. Effectiveness/Usefulness
MAXIM
Effectiveness describes the usefulness of a design.
The effectiveness goal stipulates that a design must fulfill the users needs by affording the required functionality. This may mean that the design for a drawing program should enumerate all of the tools required to create digital drawings, or it may mean that a Web site has all the information a visitor may need to accomplish his or her goals. Effectiveness can be measured by the semantic distance (see Chapter 2) between what a user needs to accomplish and the functionality offered by the design. Consider a remote for a VCR that does not contain a button for ejecting a tape. There is a gulf of execution between the need to eject a tape and the functionality afforded by the remote. This design renders the device less useful than it could be.
6.4.1. Utility
Effectiveness can be defined as the utility of the proposed design. The principle of utility relates to what the user can do with the system. A design with good utility can be useful and might prove to be an effective tool for accomplishing particular tasks if that utility is easy to access and use. Adobe PhotoShop is arguably one of the most useful applications available commercially. It is used by people from an amazing diversity of domains, from Web site developers to commercial and recreational photographers. PhotoShop is a good example of an application with high utility and ease of use. Although there is a learning curve for some of its more professional functionality such as commercial pre-press development, the tools are designed with each domain in mind so that professionals can relate to the programs utility in a familiar context.
6.4.2. Safety
Effectiveness also involves the principle of safety. A design that has a high degree of safety is more useful than a design that involves a high degree of risk. Safety issues can involve physical parameters, such as those in mission-critical environments like air traffic control or nuclear facilities. Safety can also mean that people can use the system without the risk of losing or destroying their work. In the Humane Interface, Jeff Raskin put forth two rules for interface design that are corollaries to Asimovs laws of robotics (Raskin, 2000). The first one is stated as follows:
A computer shall not harm your work or, through inaction, allow your work to come to harm.
We will discuss the second rule later in the efficiency/usability section. The auto recovery and auto save features available in software applications are good examples
ISBN 0-558-86011-7
6.4. Effectiveness/Usefulness
199
of the safety principle being put into effect. The plain truth is that computers crash from time to time, and there is a risk that some work will be lost. These automatic safety features have more than earned their cost of development. We have already seen some of the risks involved with design flaws in missioncritical environments. The lessons learned from the Apollo 13 space mission and the Three Mile Island disaster stand as monuments to the critical importance of the safety principle in humancomputer interaction.
Recovery
Raskins first rule can be implemented in interaction designs by incorporating appropriate undo functionality and robust error recovery routines. It can also be incorporated in Web design by stipulating the need to retain Web-based form input when users navigate to previous pages in a form fill-in process during Web-based transactions.
6.4.3. Flexibility
An important parameter of effectiveness is flexibility. A tool that is flexible can be used in multiple environments and address diverse needs. This is the Swiss Army Knife concept. An effective tool should also have enough flexibility to perform a desired function under many different circumstances. For instance, a drawing program would have high flexibility, and therefore greater effectiveness, if it could be used to create images for the Web as well as for professional print publishing. It would also be more flexible if it could import directly from a scanner or if it could import and export images in diverse formats.
Customization
Another important consideration in terms of flexibility is the capacity to modify the tool to the individual needs of the user. A tool would have greater flexibility if people were able to customize the interface according to their personal preferences. For example, users should have the ability to alter settings like default fonts and font parameters. They should be able to modify toolbars and toolbar placement so that they can adjust their working space to be more efficient and memorable. These adjustments should be recorded by the application so the user does not have to adjust them every time he or she uses the program. This is usually accomplished with a Preferences dialogue such as the one shown in Figure 6.4.
6.4.4. Stability
Another important parameter of effectiveness is the stability of the system being designed. A stable system is a robust system. A system that functions consistently well will be more useful than a system that crashes frequently.
ISBN 0-558-86011-7
The robustness of a Web site design may involve the use of well-established technologies and appropriately tailored content. For instance, content that is not
200
Figure 6.4 Adobe PhotoShop Preferences dialogue.

Adobe product screen shot reprinted with permission from Adobe Systems Incorporated.
adapted to the connection speeds of the visitor may cause the screen to freeze or the computer to become so slow as to be unusable. Video is becoming more prevalent on the Web due to the ubiquity of broadband connections. However, a robust design would inform visitors about the size of the video file and afford visitors with slower connections access to a lower-bandwidth version of the video, either through an automated process or manually.
6.5. Efficiency/Usability
MAXIM
Efficiency describes the usability of a design.
The efficiency goal stipulates that a design should enable a user to accomplish tasks in the easiest and quickest way possible without having to do overly complex or extraneous procedures. It is a measure of the usability of the design. Raskins second rule relates to the efficiency of a design:
A computer shall not waste your time or require you to do more work than is strictly necessary.
There are many factors that affect the usability of an interaction design. They range from the size and placement of a component in a drawing program to the readability of the content of a Web page. These should not be seen as mutually exclusive or isolated components of the design process; they are often interrelated and might also overlap.
ISBN 0-558-86011-7
201
These factors may also conflict at times and require tradeoffs. The overriding principle of comprehensibility often can be used to make determinations about the relative importance of competing principles.
6.5.1. Simplicity
Everything should be made as simple as possible, but not simpler. Albert Einstein Simplicity is a high-level principle. If things are simple, they will be easy to understand and, therefore, easy to learn and remember. If things are simple, it will be easy to make predictions about their use and functionality. Simplicity can increase the efficiency of an interface and make it more usable. It also can be applied to increase the comprehensibility of an interface design. Figure 6.5 shows the design of the Google Web search engine. It is an excellent example of a simple yet powerful tool. One of the hardest things to accomplish is the design of something that is simple yet effective. It is important to understand the difference between simple and simplistic, which refers to something that results from oversimplification. A simplistic design involves dumbing down the interface and should be avoided. Simple designs do complex things in simple ways.
Ockhams Razor (The Principle of Simplicity)

The concept of simplicity is eloquently expressed in Ockhams razor, attributed to the medieval English philosopher and Franciscan monk William of Ockham (ca. 12851349):
Pluralitas non est ponenda sine necessitate [Pluralities should not be posited without necessity].
Figure 6.5 Google.com.

ISBN 0-558-86011-7
Screenshot Google Inc. and is used with permission.
202
This principle can be understood as follows: given two otherwise equivalent designs, the simplest one is best. This is a widely accepted concept in disciplines as diverse as physics and graphic design. We can also make excellent use of the principle in interaction design. At the heart of Ockhams razor is the idea that necessity must dictate the components of a design. This is similar to the concept of leveling in icon design, according to which the designer eliminates unnecessary details until only the essential elements are left (see Chapter 11). We must often make decisions about the amount of detail to include in an icon. Through leveling, we reduce the unnecessary detail and isolate the elements that foster comprehension. Similarly, Ockhams razor argues that we should only include those elements that are required to communicate the necessary information. Ockhams razor can also guide the development of secondary windows (see Chapter 10). Secondary windows such as dialogue boxes that contain occasionally needed functionality should be added if and when they are needed. Unnecessary windows can cause confusion and can involve cumbersome window manipulation tasks.
80/20 Rule
The 80/20 rule was conceived by the economist Vilfredo Pareto, who found that 20% of the Italian population owned 80% of the nations wealth. This rule has subsequently been used to describe complex systems in various domains and can be used to guide interaction design. According to the 80/20 rule, 80% of an applications use involves 20% of its functionality. This idea can guide the construction of pull-down menus and toolbars. For instance, the 20% that is an applications most useful functionality should be put into the toolbars, where it can be easily accessed, whereas the other 80% can be put in less accessible pull-down menus. This also relates to the principle of progressive disclosure discussed later. The 80/20 principle can also be applied to the design process itself. Interaction design often involves updating or modifying a previous design. Given the limited resources that often exist regarding time and personnel, this process might involve making decisions about which aspects of the design should be improved. According to the 80/20 principle, design resources should be allocated to the significant 20% of the interface because working on the other 80% will not be as cost effective.
Satisficing
The 80/20 principle is related to the principle of satisficing, which stems from the need to create a balance between satisfying and sufficing. This principle combines the conflicting needs of finding the optimal solution that satisfies all the requirements and the need to settle on a solution that will be sufficient to proceed with the design. In other words, we must find the 20% that makes the most difference and focus on a solution that will suffice.
ISBN 0-558-86011-7
6.5 Efficiency/Usability
203
Satisficing is born of necessity. In the interaction design domain, resources are often scarce and there is always a deadline. Satisficing can be used when a satisficed solution is better than the previous design or any competing solution. It is a way to deal with resource limitations, especially when a project is complex and contains multiple interacting variables. Satisficing is not, however, an excuse to pursue the path of least resistance. It is also inappropriate in mission-critical environments. In those situations, less than satisfactory solutions can have devastating results, and satisficing should not be considered.
Progressive Disclosure
With progressive disclosure, the user is shown only what is necessary at any given moment during his or her interaction with the system. This technique can take the form of links like more info, view details, or related topics on a Web page. It can also take the form of an expandable menu in an application (Figure 6.6) (see Chapter 10). Progressive disclosure serves to simplify available options so the user does not get overwhelmed with irrelevant functionality.
Constraints
The principle of constraints involves limiting the actions that can be performed in a particular design; it therefore controls the designs simplicity. It is applied by constraining the amount of functionality on a screen to only the necessary functions and therefore is related to the principle of progressive disclosure.
ISBN 0-558-86011-7
Figure 6.6 Expandable menu: (a) expanded, (b) minimized.
204
When it is not appropriate or applicable, functionality can be grayed out, which helps to reduce user errors due to inappropriate commands out of the range of the current system state (Figure 6.7). The appropriate application of constraints can make an interface much easier to learn and use. Constraints can be categorized as physical or psychological. Physical constraints limit a users movement by controlling aspects such as direction or distance. Psychological constraints limit a users actions by influencing the way he or she perceives the interface and its various components.
Physical Constraints
PathsPhysical paths constrain movement to a designated location and direction. Sliders and scrollbars constrain a users movement to the horizontal or vertical movement allowed by the components track. AxesPhysical axes constrain the users movement to rotation around an axis. This can be seen in the way a trackball works. A trackball affords an infinite number of axes on which to rotate the ball and an unlimited length of movement. The user is constrained, however, to the location of the device because translational movement has no effect. For a discussion of rotational and translational movement, see Chapter 14. Barriers Barriers provide spatial constraints that can confine the users movement to the appropriate areas of the interface. The physical barrier provided by the computer screen can be used to help people target buttons and controls that are located in the peripheral areas of the interface. Chapter 7 shows how Fitts law can be used to support the use of the screens boundaries to constrain the users movement and helping him or her to target small interface components.
Figure 6.7 Grayed-out functionality.
Psychological
Conventions Conventions exploit learned behavior to influence a users actions. For instance, the location of certain screen elements has become standardized and is, therefore, conventional. People tend to look in those locations when they need a particular functionality, and putting all of the conventional elements in the expected location constrains the users attention to those locations. MappingMapping can influence the way in which people perceive relationships between controls and effects. For example, a Web page design can take advantage of our natural tendency to map forward motion to the right and backward motion to the left by pointing arrows in those directions (the reverse is true for people who read from right to left). SymbolsSymbols can influence the way in which we interact with an interface by defining meaning and constraining our possible interpretations of interface elements. Symbols are used mostly for icons and labels. See Chapter 11 for an in-depth discussion of symbols.
ISBN 0-558-86011-7
205
6.5.2. Memorability
We can use the principle of memorability to increase the efficiency of designs. Interfaces that have high memorability are easier to learn and use, instilling a sense of control and comfort in the user. It is always comforting to know that the next time you launch a program, you will be able to find the objects and functionality you need without having to search menus or consult a manual. Many different parameters affect memorability, including the following: LocationIf we place a particular object in a consistent location, it will be easier to remember. The convention of putting the search box in the upper righthand corner of a Web page makes it easier to find. Logical GroupingIf we group things logically, they will be easier to remember. For instance, if we put related options together in a menu, their functionality will be easier to remember. Later we explore the issues involved in visual grouping in the section on the Gestalt principles. ConventionsIf we use conventional objects and symbols, they will be easier to remember. The shopping cart symbol is a convention, and therefore its functionality is easy to remember. RedundancyIf we use multiple perceptual channels to code information, people will be able to focus on the channel they personally rely on the most. There will also be more available associations for long-term memory processing (see Chapter 13 for more information on long-term memory processing). An interface with high memorability is more comprehensible and efficient because there are fewer things for users to think about. These interfaces allow us to apply previous knowledge to components of the interface.
6.5.3. Predictability
Predictability involves a persons expectations and ability to determine the results of his or her actions ahead of time. Predictable events are obvious, and their results are, to a large degree, foreseeable. Highly predictable events are often considered inevitable. Predicting the outcome of an action involves memory. We base our judgment on our previous experiences. If our document printed the last time we clicked the printer icon, it will probably print again when we hit it a second time. If we can predict the outcomes of our actions, we gain a sense of security that allows us to be more productive. This security can also encourage us to explore some of the less familiar aspects of an interface and, therefore, to increase its usefulness.
Consistency and Correctness

ISBN 0-558-86011-7
Predictability and memorability can be increased by using the principle of consistency. The consistency principle can be applied to every aspect of an interface, from
206
Figure 6.8 (a) Macintosh menu. (b) Microsoft Word menu.

color coding and icon style to button placement and functionality. Consistency reinforces our associations and, therefore, increases our ability to remember and predict outcomes and processes. Consistency can be seen in the placement and labeling of menus in the common GUIs such as OS X and Windows. These interfaces consistently place the File, Edit, and View menus, when they are available, together on the left side of menu bars and the Window and Help menus on the right end (Figure 6.8). The other components of the various windows such as the Close and Minimize buttons are also placed in consistent locations and have a consistent appearance. We should strive for consistency. Before we enforce consistency, however, we must make sure that we are correct; otherwise we will simply be consistently incorrect. Consistent incorrectness may be preferable to inconsistent incorrectness because people are highly adaptable and pick up patterns easily, so that any amount of consistency is helpful. Consistent incorrectness can mean, however, that the user must consistently do more work than is necessary. It can also mean that the user will simply be consistently confused and have to constantly think about how to use the interface. Neither of these situations is optimal, and they can be avoided with a bit of forethought and testing.
Generalizability
Consistency can help us use the knowledge we gathered from previous experience and apply it to similar situations. This decreases our learning curve and makes us more efficient. For instance, if we know that the Save function is in the File menu and that the File menu is located on the left side of the toolbar in one program, we can predict that the Save functions location will be the same in another program. Searching drop-down menus is time consuming and emphasizes one of their essential disadvantages: they hide things.
Conventions
Conventions are, by their very nature, predictable. They allow us to use our intuitions, which are based on previous experience and logic. Conventions are created
207
through consistency. If something is consistently done in a particular way, that will eventually become the conventional way of doing it. Consider the shopping cart icon used on most commercial Web sites (Figure 6.9). It was one of the first conventions to appear on the Web and has remained a staple for any site the offers that particular functionality.
Figure 6.9 Shopping cart convention.
Familiarity
Familiarity increases predictability. If we use familiar menu names and options in our designs, users will be able to locate objects and functions more easily. Similarly, if we use familiar images and metaphors, familiar formats and layouts, and familiar ways of doing things, we increase the predictability, efficiency, and comprehensibility of our interface designs.
Location, Location, Location

Location is everything! This bit of wisdom from the real estate domain also has a resonance for interaction design. Not all areas on the screen are created equal. If you understand the conventional use of screen space, you can optimize the predictability of your designs. For instance, Web pages are constructed from a topleft orientation (unless the user orientation is right to left, in which case it is top right), which dictates that the top-left corner is the prime location. This is where the visitors attention naturally falls unless there are objects with high intensity in other locations drawing his or her attention away. See the later section on stimulus intensity. The top-left area of the page is typically the place where the logo of the company or institution is placed (Figure 6.10). This is prime screen real estate and is visible no matter what resolution the visitor is using or the size of the browser window. By placing the logo here, we follow the predictability principle and give visitors an immediate indication of the sites identity.
Figure 6.10 Logo of Pearson Education.

208
Modes
Modes create instability in mental models because they change the way objects function, unfortunately often without warning or any demonstrable indication, decreasing the predictability of the interface. The simplest example of a mode is the way in which the Shift key affects the characters on the screen by creating an uppercase mode. This new modality changes things significantly: an A can have a very different meaning than an a. The fact that we keep our finger on the shift key when using it makes this a toggle, which is easier to deal with than a complete modal transformation because our action constantly reminds us of the alteration in functionality. The Caps Lock key is a bit more problematic because we can forget that the uppercase mode has been turned on. It can be frustrating to copy a long paragraph and then glance at the screen to see all of the words we just typed with reverse capitalization. This is one of the reasons some word processing applications include a tOGGLE cASE in the Change Case formatting menu (Figure 6.11). Modes can be particularly problematic, especially for anyone who is not a frequent user of a particular application. They are often made more difficult because of the paucity of indications about the systems state while the mode is active, which can create a significant gulf of evaluation. For instance, in a particular painting program, the text tool can be used to enter text directly onto the canvas at the exact location required. The system automatically enters text mode when the text tool is selected, but there is little visual indication that a mode has been entered. The text mode creates a separate layer in which the text remains editable until it is rendered as pixels along with the graphic image. This is actually a significant improvement over the way text used to be entered in such programs, using a separate dialogue box. The difficulty with the implementation in this case arises when we go to save the file. When the text mode is active, most other functions are inaccessible, including the Save function. Unfortunately, there is no visible indication that the other functions have been disabled until we engage the File menu and see that the options are not available. The most problematic aspect of this gulf of evaluation occurs if we try to save the file using the CtrlS keyboard shortcut. In this case, there is no indication that the Save function is disabled, nor is there any indication that the keyboard shortcut had no effect. We are left to assume, incorrectly, that the file has been saved.
HCI Foundations for Interaction Design hci fOUNDATIONS FOR iNTERACTION dESIGN
Figure 6.11 Toggle case example.
ISBN 0-558-86011-7
209
6.5.4. Visibility
Show everything at once, and the result is chaos. Dont show everything, and then stuff gets lost. (Norman, 1998, 74) The principle of visibility involves making the user aware of the systems components and processes, including all possible functionality and feedback from user actions. As we saw, this is a significant principle for applications that contain modes. The principle of visibility dictates that the user must be informed about all of the systems objects and processes. But how is this accomplished? Do we just make everything visible? In a complex application complete visibility could make the interface impossible to use.
Overload
MAXIM
The principles of progressive disclosure and simplicity should be used in conjunction with the principle of visibility.
Following the principle of visibility without also applying progressive disclosure can lead to visual overload. It is easier to make all of a systems functionality visible and let the user be discriminating than it is to meticulously study the temporal aspects of user interaction and craft an interaction space according to the requirements of current tasks, updating the interface as the user completes new tasks. This is the challenge posed by the principle of visibility. The principle of simplicity can also be used to identify the necessary elements that will define what should be visible and when.
Feedback
Direct manipulation interfaces involve high visibility because they are defined by the immediate visual feedback they provide about user actions. It is the task of the interaction designer to decide what form that feedback takes. There are conventions concerning feedback, such as the way command buttons behave when they are clicked or cursor hinting, which makes resource-intensive processing visible to the user (see Chapter 10). These conventions should be used in a way that complies with user expectations.
Recognition/Recall
The principle of visibility is based on the fact that people are better at recognition than recall. In other words, recognizing a target option within a set of options is easier than recalling that option from memory. Making things visible when they are relevant helps people to complete complex processes without having to remember all the details involved.
ISBN 0-558-86011-7
210
Orientation
People need to be able to orient themselves, especially in complex information spaces. Web site design must be sensitive to the visitors need to know where he or she is within the context of the site, especially if the site is large and has many different areas. You are here orientation is essential for people who navigate the Web using hyperlinks rather than search mechanisms. The principle of visibility means that a Web site design should supply information for a visitor to know what the site is about, how many areas the site has, and where the visitor is within the site. Page titles, site logos, tabbed interfaces, cookie trails, and color coding are some elements that can help visitors to orient themselves. We have looked at some of the principles used by designers to help craft more usable and useful interactions. These are high-level principles that can guide decisions about the various tradeoffs required by conflicting requirements. We now look at some of the principles that function on lower levels. These principles are used to make decisions about specific screen controls, menus, and layouts.
6.6. Grouping
MAXIM
Use visual cues to support the logical structure of the interface.
We can increase the comprehension of complex information by creating visual presentations that logically support the intrinsic structure of that information. This involves grouping related things and presenting them in a comprehensible way through the creation of menus with related options or the grouping of related radio buttons on the screen. It can also mean using borders or backgrounds to group a Web sites navigation links. To help in structuring this process, interaction designers often refer to the principles of perception that were developed by Gestalt psychologists in the early twentieth century.
6.6.1. Gestalt Principles of Perception

Gestalt psychology is based on the concept that we strive to perceive our environment as comprised of whole entities, even if we are not presented with complete information. For instance, emoticons, such as the little smiling face :-) used so frequently to add emotional nuances to e-mails and text messages, are often composed of just three separate text characters, yet we perceive them as complete faces. At the heart of Gestalt psychology is the idea that we strive to find the simplest solutions to incomplete visual information. Rather than seeing the emoticon as three unique elements that must be considered individually, we gravitate to a simple solution, which interprets them as one integrated object.
ISBN 0-558-86011-7
6.6. Grouping
211
Gestalt psychology strives to explain the factors involved in the way we group things. This is of considerable interest to interaction designers, who spend a great deal of time creating menu groupings and arranging content on screens and Web pages. Lets explore some of the principles and concepts of the Gestalt perspective on visual grouping.
Figure-Ground
Gestalt psychologys notion of figure and ground posits that we perceive our environment by differentiating between objects and their backgrounds. Basically, this means that we see some things as being prominent and others as being recessive, or as forming the background of the visual field. This concept is often illustrated using the Rubin face/vase illusion shown in Figure 6.12. This image is manipulated in such a way that we must constantly strive to define the figure and the ground; it becomes a dynamic tug-of-war between the faces and the vase. As another example, consider the Macintosh logo (Figure 6.13). This image creates a tension between its perception as a face in profile and one in frontal view. This is an interesting illusion, which has a potential dynamic effect in icon design; however, would be inappropriate to design an interface that created such visual tension. Unfortunately, some Web sites use busy backgrounds, which compete with the information on the page. This type of presentation makes it hard to distinguish figures from the ground and diminishes the efficiency of the presentation, sometimes even making essential information invisible to the visitor. If we use these principles correctly, we can create logical groupings of multiple objects that will be perceived as complete entities and become figure components within the visual field of the user. In other words, we can use these principles to impose a logical structure on an interfaces visual stimuli. These principles also ensure Figure 6.13 Macintosh logo. that the groups are presented in a natural way that is easy to understand. In summary, according to Gestalt psychology: We have a natural inclination to perceive things as whole entities. We tend to distinguish foreground objects from background. The Gestalt principles of perception define the factors involved in visually grouping items. A number of Gestalt principles can be useful in guiding the creation of logical groupings and can increase the comprehensibility of the interface. These principles address low-level decisions about the placement and organization of screen elements, such as icons and controls. They can also be used to organize and structure menus. The Gestalt principles we will explore include the following: Proximity Similarity
Figure 6.12 The Rubin face/vase illusion.
ISBN 0-558-86011-7
212
Figure 6.14 (a) Equidistant. (b) Horizontal proximity. (c) Vertical proximity.
Common fate Closure Good continuity Area Symmetry Surroundedness Prgnanz
Proximity PrincipleObjects
that are close to each other will be seen as
belonging together. Consider the illustrations in Figure 6.14. We see Figure 6.14a as a group of radio buttons in a table comprised of four columns and four rows without any preference for either orientation. However, if the radio buttons are placed closer horizontally, we tend to see four rows of five buttons, as in Figure 6.14b. When they are positioned closer vertically (Figure 6.14c), we tend to see four columns of five buttons. The principle of proximity causes us to group the buttons that are close to each other. Lets look at a real-world example. Consider the Preferences dialogue from Adobe PhotoShop shown in Figure 6.15. The buttons on the far right tend to be seen as two groups rather than as four separate buttons. This is because there is slightly more vertical room between the Reset and Prev buttons, meaning that OK and Reset appear closer and therefore related. The same is true for the Prev and Next buttons. This grouping supports the logical structure of the buttons functions.
Similarity PrincipleObjects that have similar visual characteristics, such as size, shape, or color, will be seen as a group and therefore related.
Consider the illustrations in Figure 6.16. We see Figure 6.16a as rows of radio buttons and checkboxes, whereas in Figure 6.16b we see columns. This is because
ISBN 0-558-86011-7
6.6 Grouping
213
Figure 6.15 Adobe PhotoShop Preferences dialogue.

of our tendency to group the similar shapes. We see Figure 6.16c as three checkbox columns and two sets of radio button columns rather than four discrete radio button columns because we group each set of two columns together. Figure 6.17 shows the Property pane from Adobes Dreamweaver application. This is a complex pane that contains a great deal of functionality. However, if we give it a quick glance, we can see relationships between similar objects. Our eyes pick up all of the text boxes because of the white areas that they have in common. The drop-down menus appear related because they all have the down-pointing arrow inside a blue square background. The justification icons on the upper right corner are similar in appearance and are therefore grouped.
ISBN 0-558-86011-7
Figure 6.16 (a) Rows of similar objects. (b) Columns of similar objects. (c) Grouped columns.
214
Figure 6.17 Property pane from Adobe Dreamweaver.

The principle of similarity implies the existence of contrast. This is the other side of the coin and can be used visually to separate objects that should not be seen as related. Later we look at this issue more closely in the section on screen complexity.
Common Fate Principle Objects
that move together are seen as related.
This may seem an odd principle for interface design; however, if we understand movement as having a beginning, a direction, and an end, it becomes easier to apply the principle to static elements and it becomes a powerful tool for interface design. Consider Figure 6.18. The drop-down menus on the left side do not start at the same location and do not end at the same location; hence, they are not visually grouped together and are seen as individual objects. The menus on the right side do start and end together, except for the last one, which just ends with others. These components share a common fate and, therefore, seem related. A grid structure can be used to control the common fate of screen objects. Consider again the Dreamweaver Properties pane, which uses alignment extensively to group related functionality. There are also discontinuities that serve to
b
ISBN 0-558-86011-7
Figure 6.18 (a) Unaligned drop-down menus. (b) Aligned drop-down menus.
6.6. Grouping
215
Figure 6.19 Common fate: Adobe Dreamweaver properties pane.

separate nonrelated functionality. The underlying grid becomes obvious when we start delineating the visual alignments as in Figure 6.19.
Closure Principle We tend to see things as complete objects even though there may be gaps in their shape.
We see the brackets in the first row in Figure 6.20 as three groups of two due to their proximity. If we look at the brackets in the second row beginning at the left, we tend to see three enclosures. If we look at them from the right, however, we again tend to see groups of two brackets. The closure principle can also be seen in the way the inactive tabs on the Dreamweaver Results panel in Figure 6.21 are delimited with a line that does not span the entire height of the row of tabs. We tend to see complete boxes in which the links are placed.
Good Continuity PrincipleWe tend to see things as smooth, continuous representations rather than abrupt changes.
Figure 6.20 Closure principle.
Consider the section of a page from the Apple.com Web site shown in Figure 6.22. Even though the line that delineates the top row is hidden by the image and is not continuous, we perceive one row containing the .mac title and the two round buttons.
Figure 6.21 Adobe Dreamweaver Results panel.

216
Figure 6.22 Part of an Apple.com Web page.
Consider the page from the Museum of Modern Art (MoMA) Web site shown in Figure 6.23. The principle of good continuity helps us connect the top part of the left column with the part that appears under the dark horizontal strip. The dark strip appears to be placed on top of the white column that extends from the top to the bottom of the page.
The Area Principle Objects with a small area tend to be seen as the figure, not the ground (also called the smallness principle).
Figure 6.23 MoMA.org Web page.

Courtesy Museum of Modern Art.
ISBN 0-558-86011-7
6.6. Grouping
217
Figure 6.24 (a) Metropolitan Museum of Art Web page (original). (b) Metropolitan Museum of Art Web page (altered) by author.
Consider the page from the Metropolitan Museum of Art Web site shown in Figure 6.24. In Figure 6.24a the large center image creates a ground within which one can see figures. When the same image is reduced in size, it becomes another figure on the page.
Symmetry PrincipleSymmetrical areas tend to be seen as complete figures that form around their middle
According to the symmetry principle, we tend to group symmetrical elements into groups defined by a center point. There are a few ways to create symmetry: translation, reflection, and rotation (Figure 6.25). Consider the page from the XM Satellite Web site shown in Figure 6.26. The center of the page is enclosed within a space created by the two red lines. The bottom line is a 90 rotation of the top line.
ISBN 0-558-86011-7
Figure 6.25 (a) Translation. (b) Reflection. (c) Rotation.
218
Top divider
Rotated divider
Figure 6.26 XM Satellite Radio Web-based player.

2006 XM Satellite Radio Inc. All rights reserved.
Surroundedness PrincipleAn area that is surrounded will be seen as the figure, and the area that surrounds will be seen as the ground.
Consider the page from the Apple Web site shown in Figure 6.27a. Logically, the page seems to consist of top and bottom rows, two side columns, and a center area. If you look at the blurred version in Figure 6.27b, however, the
Figure 6.27 Surroundedness principle. (a) Original Apple.com page. (b) Blurred Apple.com page.
6.6. Grouping
219
surrounded center area becomes the figure and the other page areas appear as the ground. This is the visual impression the page has on our perception of its contents.
White SpaceThe
area of a page or screen that contains no content is called
white space. White space is a common design concept (not a Gestalt principle) that is closely related to the surroundedness principle and can be used to distinguish between figure and ground. White space is often used to create breathing room on the page and to set off paragraphs, images, and controls. It can create separations, group related objects, and organize and highlight important components of the screen. Things that are surrounded by white space are seen as related. White space is discussed in the context of margin width in Chapter 12. Studies have shown that it has an effect on text comprehensibility.
Prgnanz Principle We tend to perceive things based on the simplest and most stable or complete interpretation.
The overarching Prgnanz principle evolves from the combination and interaction of the other principles. In visual grouping, many Gestalt principles of perception work together, although at times, one principle can work against the influence of another. This can create tension that can be visually interesting but should be avoided in interface design. For example, the application of a colored background for a set of check boxes and radio buttons should be based on the logical grouping of components and not conflict with that logical structure as it does in Figure 6.28a.
Figure 6.28 (a) Visual conflict with common fate. (b) Visual conflict with surroundedness.
220
Figure 6.29 Stimulus intensity.

The principles we have explored would compel us to group the similarly shaped checkboxes in these images vertically. However, the background color is applied horizontally, creating a surroundedness and similar fate for the components in rows. The dark background pulls on our perception because it has more intensity than the white background, and we see three horizontal rows surrounded by white. In Figure 6.28b we have the same visual/logical conflict, resulting in the perception of two white rows surrounded by gray.
6.7. Stimulus Intensity

As we have seen, the physical encoding of an object affects our perception of that object according to the Gestalt principles of perception. If we add to this the concept of stimulus intensity, we find that the visual effect can become quite strong. According to the Model Human Processor developed by Card, Moran, and Newell (see Chapter 7), we respond first to the intensity of a stimulus and only then do we begin to process its meaning. In other words, we perceive the color, shape, or size of an object before we understand what the object is. In the set of numbers in Figure 6.29, for example, viewers typically perceive the columns of bold numbers before they perceive the rows of odd and even numbers. In this image, the principles of proximity and common fate work together with the intensity of the bold numbers to create the appearance of columns. Only after they process the meaning of the numbers can viewers create logical rows based on odd and even numbers.
6.8. Proportion
Proportion can be used to represent logical hierarchies. The headings element in markup languages uses proportion to visually structure information on a page (Figure 6.30).
ISBN 0-558-86011-7
6.8. Proportion
221
Figure 6.30 The six levels of heading elements.
The most important heading on a page should be marked up with a level 1 heading. The browsers render this by using the largest type size and scale down the rest of the levels proportionately.
6.8.1. Golden Ratio

In the so-called golden ratio the relationship between two parameters describing a form such as height and width is expressed through a ratio that is equal to 0.618. For instance, consider the line in Figure 6.31. When the full length a + b is to the longer segment a, as a is to the shorter segment b, the ratio a/b is equal to 0.618. The golden ratio can be found in nature, for example, in the proportions of the human body such as the ratio between the length of the hand and that of the forearm (Figure 6.32). The ratios proportions have an inherently pleasing visual effect and have therefore been used in design throughout history. The height and width of the Parthenon and the faade of Notre Dame Cathedral use the golden ratio.
b a + b = a b
a+b
ISBN 0-558-86011-7
Figure 6.31 (a) Golden ratio. (b) Golden ratio equation.
222
a+b
Figure 6.32 (a) Golden ratio in human proportions. (b) Golden ratio in the Apple iPod.
6.8.2. Fibonacci Series

The Fibonacci series is a sequence of numbers in which each number is the sum of the two preceding numbers. The relationship between consecutive numbers in the Fibonacci series is similar to the golden ratio. This similarity increases as the numbers in the series increase: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, . . . The sequence is common in nature and is found in the growth patterns of shells and flowers. It has been used in art and can be found in Mozarts sonatas and Beethovens Fifth Symphony. It was also used by the architect Le Corbusier to create a system of architectural proportions that were in tune with the natural proportions of the human body. We can see the first six elements of the Fibonacci series graphically represented in Figure 6.33. Both the golden ratio and the Fibonacci sequence can be used to create harmonious proportions for objects and areas on Web pages or application interfaces. They should not, however, be imposed on an information space at the expense of other, more pressing considerations. 3 5 2 11 8
Figure 6.33 Fibonacci series.
ISBN 0-558-86011-7
6.9. Screen Complexity
223

As computers become more powerful, they offer more functionality, which can make GUIs visually complex and difficult to use. The principles covered in this chapter can be used to guide the design of interfaces, and many of these principles, such as progressive disclosure and simplicity, can help to ensure that the results are not too complex or overwhelming. The measure of complexity developed by Tullis (1984) can be used to calculate the relative complexity, and therefore the difficulty, of a design. This measure of complexity uses information theory (Shannon & Weaver, 1949) to determine the complexity of typographically designed pages. It is directly related to the Gestalt principle of common fate in that it encourages the use of underlying grid structures to visually simplify complex screens. The formula for calculating complexity in bits (due to the log base 2) is shown in Figure 6.34. To calculate the measure of complexity for a particular screen, do the following: 1. Place a rectangle around every screen element. 2. Count the number of elements and the number of columns (vertical alignment points). 3. Count the number of elements and the number of rows (horizontal alignment points). The original screen used by Tullis, as shown in Figure 6.35, was found to give a mean search time of 8.3 seconds: 22 fields with 6 horizontal (column) alignment points 41 bits 22 fields with 20 vertical (row) alignment points 93 bits Overall complexity 134 bits Tullis redesigned the original screen to reduce its complexity, as shown in Figure 6.36.
C = -N
n=1
pn log pn
2
Figure 6.34 Formula for calculating the measure of complexity.

C, complexity of the system in bits; N, total number of events (widths or heights); m, number of event classes (number of unique widths or heights); pn, probability of occurrence of the nth event class (based on the frequency of events within that class).
ISBN 0-558-86011-7
224
Vertical alignment points
TEST RESULTS
SUMMARY: GROUND
TEST RESULTS
SUMMARY: GROUND
GROUND, FAULT T-G 3 TERMINAL DC RESISTANCE > 3500.00 K OHMS T-R 14,21 K OHMS T-G > 3500.00 K OHMS R-G 3 TERMINAL DC VOLTAGE 0.00 VOLTS T-G 0.00 VOLTS R-G VALID AC SIGNATURE 3 TERMINAL AC RESISTANCE 8.82 K OHMS T-R 14,71 K OHMS T-G 62B.52 K OHMS R-G LONGITUDINAL BALANCE POOR 39 DB COULD NOT COUNT RINGERS DUE TO LOW RESISTANCE VALID LINE CKT CONFIGURATION CAN DRAW AND BREAK DIAL TONE
Horizontal alignment points
GROUND, FAULT T-G 3 TERMINAL DC RESISTANCE > 3500.00 K OHMS T-R 14,21 K OHMS T-G > 3500.00 K OHMS R-G 3 TERMINAL DC VOLTAGE 0.00 VOLTS T-G 0.00 VOLTS R-G VALID AC SIGNATURE 3 TERMINAL AC RESISTANCE 8.82 K OHMS T-R 14,71 K OHMS T-G 62B.52 K OHMS R-G LONGITUDINAL BALANCE POOR 39 DB COULD NOT COUNT RINGERS DUE TO LOW RESISTANCE VALID LINE CKT CONFIGURATION CAN DRAW AND BREAK DIAL TONE
Figure 6.35 Tullis original screen, with rectangles. (b) Tullis original screen, with alignment points.
The redesigned screen gave a mean search time of 5.0 seconds, and is about 28% less complex than the original screen: 18 fields with 7 horizontal (column) alignment points 43 bits 18 fields with 8 vertical (row) alignment points 53 bits Overall complexity 96 bits An easier method for calculating complexity was suggested by Galitz (2002) and consists in counting the following: The number of elements on the screen The number of horizontal (column) alignment points The number of vertical (row) alignment points The sums for the original and redesigned screens by this measure are as follows: For Figure 6.29 (original):
225
Figure 6.36 Redesign of original screen.

22 elements 6 horizontal (column) alignment points 20 vertical (row) alignment points 48 complexity. For Figure 6.30 (redesigned): 18 elements 7 horizontal (column) alignment points 8 vertical (row) alignment points 33 complexity This calculation shows that the redesigned screen is about 31% less complex than the original screen. Applied consistently, this formula can be used to perform quick evaluations of two competing designs.
Complexity versus Usability

According to the measurement of complexity, a simple screen should be the least complex and therefore the most usable. However, reducing a screen to its ultimate simplicity might not be the best thing to do. Studies have shown that overly simple screens are less interesting and can actually become less useful, especially if the drive for simplicity causes the screen to contain less functionality and lose some utility.
ISBN 0-558-86011-7
226
Optimum Complexity
Usability
Complexity
Figure 6.37 Relationship between complexity and usability.
In a study that measured usability in relation to complexity, Comber and Maltby (1997) found that both overly simple and overly complex screens were low in usability. Their results showed a bell curve relationship, with the most usable screens being those with moderate amounts of complexity (Figure 6.37). Comber and Maltby defined usability in terms of the following three components: Effectiveness Learnability Attitude They found tradeoffs between usability and complexity: As complexity decreased, it became harder to differentiate among screen objects; the screen became artificially regular. As complexity decreased, predictability increased. Increased complexity meant that there were fewer ways to group objects. Excessive complexity made screens look artificially irregular. Increased complexity could occur from increased utility.
Research Results
The results of research on screen complexity show that we should strive for logical layouts that contain the necessary functionality, and that we should design them so that the user can visually understand groupings without struggle. Overly complex screens seem chaotic and unorganized, making it hard for people to make sense of the visual presentation. With overly simple screens, there may not be enough cues to help people group related functionality. We should strive for a balance and apply all of our principles based on the overriding principle of comprehensibility. If people do not understand what they
ISBN 0-558-86011-7
6.11. Usability Goals
227
are looking at, none of the functionality will be useful. People will probably choose not to use the interface unless they absolutely have to, in which case their performance will be diminished and their frustration level increased.
Complexity Guidelines:
Optimize the number of elements on a screen within the limits of clarity and utility. Minimize the alignment points. Use grid structures.
6.10. Resolution/Closure
The principle of resolution, also known as closure, relates to the perceived completion of a users tasks. (This is different than the Gestalt principle of closure.) When the users objective is satisfied, he or she will consider the task complete and move on to the next goal. Although this concept may seem trivial, it proved to be significant for the original designs of ATM machines. A primary reason that we use ATMs is to withdraw money from bank accounts. The original ATM designs required users to insert their cards into the machines. After the transaction was complete and the users had received their money, the card was returned. A problem arose because users considered their task complete when they received money from the machine, and they often left before their card had been ejected. This difficulty was caused because ATM designers had ignored the principle of resolution. It has been rectified by solutions that require users to swipe cards rather then insert them into the machines.

As we saw in Chapter 3, user-centered design (UCD) puts the focus on the users tasks and goals. It also recognizes that interaction designs should facilitate those goals in the most advantageous way possible. In other words, UCD encourages the development of usability goals that promote more usable interface designs. As we have seen, the generally accepted usability goals state that an interface should be: Understandable Learnable Effective/useful Efficient/usable
ISBN 0-558-86011-7
These usability goals seem logical, and it would be difficult to argue against them; however, it may not be entirely clear how they will affect the design that you are currently developing. How can you promote ease of learning or increase the
228
efficiency of a design? How do these goals affect the many decisions you need to make about color, text, icons, or any other interface element? To answer these questions, we must first understand how to develop a set of usability guidelines for the project; to do that, we need to understand how to go from general usability goals to more specific design guidelines. Lets see how that can be accomplished.
6.11.1. Goals to Principles

Usability goals provide a foundation not a prescription for design. These goals have been studied by HCI practitioners and designers, and a great deal of research has gone into studying how we can make things easy for people to understand and learn. The result of these efforts is that these goals have been defined according to design principles.
6.11.2. Principles to Guidelines

Design principles can guide us and help us to make informed decisions; however, they must be defined according to each particular project. You must clarify what they mean for your project by defining them in terms of the guidelines that your design must satisfy. Quantifying usability goals in terms of project guidelines at the beginning of the project provides a basis on which to make design decisions and provides criteria for usability tests later. These guidelines are documented at the beginning of the project and are referred to when decisions need to be made. They provide a structure for the various evaluations you perform throughout the project. Even small-scale projects have many guidelines. There is a list of global guidelines affecting every module in the design, as well as sectional guidelines. These guidelines should be listed according to their relationship to the design, making it easier to refer to them during team meetings. The distillation process from usability goals, to design principles, to project guidelines might resemble the following: Usability GoalEasy to use. Most people are interested in completing their tasks and do not enjoy struggling with the tools they need to use. One of the most important goals of user-centered design is to make things easy to use. Design PrincipleSimplicity. Simple things require little effort and can often be accomplished without much thought. If interaction designs are guided by the principle of simplicity, they will be easier to use. Project GuidelineA project guideline based on the principle of simplicity might require that all dialogue boxes should present only the basic functions that are most often used and that other, less used functions can be accessed using an expandable dialogue with a link for More Options.
ISBN 0-558-86011-7
229
Design Scenario
Circumference: Application of Design Principles
In this design scenario, we apply some of the design principles discussed earlier to the wireframes developed for the Circumference Web site in the previous chapter. We will not go into great depth at this point because we will first need to explore the issues of color, text, icons, components, and auditory feedback before we can complete the design phase. These topics are covered in depth in the following chapters. Lets apply our design principle and see what issues still need to be resolved.
Effectiveness/Usefulness
UtilityThe functional requirements that were discovered include the following:
The site should include the ability for the visitor to read selected poems in their original language and English versions. This should be done in such a way as to allow audible browsers access to as much content as possible. Online ordering of individual journals and subscriptions should be possible. There should be a facility for e-mail contact with the editors. There should be access to Circumference event videos. All of these requirements, except the one that refers to the audible
browsers, can be verified using the wireframes. The Event page wireframes will be similar to the Issues wireframes due to the similarity of the flowcharts for these areas. SafetySafety issues involve the collection of personally identifiable information during the order process and the validation of credit card data. This is relevant for both the customer and the provider. The wireframes for the subscription area should include an indication of security levels involved in the transaction. This can be in the form of an icon identifying the entity used to verify credit card information. Safety was also explored in the discussion of the order form flowchart; see that design scenario for more information. FlexibilityUsing both print and screen-based CSS will allow visitors to either read the poems from the screen or print them. These features are not discernible from the wireframes but are recorded in the requirements document. Podcasts can give visitors the additional option of listening to selected poems in both the original language and in English. This issue came up during the evaluation process because the principle of flexibility initiated this discussion. Podcasting was not covered in the requirements document and represents another expansion of the projects scope; refer back to the discussion of feature creep in the Mission Statement section of Chapter 4. Adhering to the principle of satisficing can help to keep the reigns on this type of situation.
230
Design Scenario (cont.)

StabilityNo cutting-edge technology will be used because the primary user profiles indicate that visitors will not be technologically sophisticated and may be using outdated versions of browsers and operating systems. All pages will be reviewed using all major browsers on all major operating systems and on diverse resolutions and screen types, including cathode ray tubes (CRTs) and liquid crystal displays (LCDs).
Efficiency/Usability
SimplicityWe interact with the principle of simplicity in the overriding importance placed on the sample poems. The text of the poetry must be presented in a clean and readable manner without distracting graphic or auditory elements.
White Space White space will be used to frame the poems and clarify navigation. Progressive DisclosureProgressive disclosure will organize and structure the presentation of selected poems from various issues. It will also make the visitor survey more pleasant.
ConstraintsThe constraints imposed on the design are covered in the discovery document.
Memorability
Consistency-CorrectnessThe site will use consistent terminology that was elicited from real users during interviews and card sorts. GeneralizabilityThe colors of the various print issues will also be used as navigational aids. ConventionsMemorability will be enhanced by using conventions related to the location of screen elements. FamiliarityThe site will use familiar labels, images, and hyperlink appearance. The memorability factor will also be enhanced through the use of colors that relate to the published journals.
PredictabilityPredictability will be enhanced with templates for screen layout. VisibilityThe principle of visibility will be applied to the functional and contentbased elements of the site, including the presentation of selected poems and the journal ordering process.
OverloadThe visual components of the site will be kept to a minimum, and only functional and content-based elements will be used. Colors will be limited to those required for product recognition and navigation. FeedbackWhen an order is completed, a confirmation page will be presented to the customer. Recognition/RecallSample poems will include the flag of the poets country of origin and the name of the original language, so visitors will be able to select poems based on their recognition of the flags or language.
ISBN 0-558-86011-7
Resources on the Web
231
Design Scenario (cont.)

OrientationThe global links will indicate the current page by retaining the active look as defined in the CSS. We have explored some of the principles covered in this chapter; the rest will be applied to specific page elements discussed in each of the following chapters. Each chapter covers a different aspect of interface design, and the appropriate principles will be discussed in those contexts.
Summary
Interaction design is a complex and difficult process. It involves physical and cognitive abilities and limitations as well as technical intricacies and complications. Combining all of these elements may seem an impossible task at times, and you will often wonder how you will ever achieve a robust and elegant solution that addresses the multiplicity of variables with which you must contend. As we have seen, many effective and powerful tools are at your disposal. Coming from several diverse disciplines, these can all be put to good use during the development process. Understanding how people will view your design is essential to its success, and an awareness of your target users mental models will help you gain this knowledge. During the course of the project you will make hundreds of decisions, both large and small, that will affect the outcome of the project. You will, therefore, need to understand and apply the various design principles repeatedly to every move you make. Adherence to these principles will provide you with a support system that has been around since humans began designing artifacts to improve their existence. Design principles will guide you through the design process and help you to make the decisions that you will face at every turn.
Resources on the Web

ISBN 0-558-86011-7
www.aw.com/heim You will find information relating to user interface design guidelines, principles and links to information on the gestalt principles of perception.
232
Suggested Reading
Lidwell, W., Holden, K., & Butler, J. (2003). Universal Principles of Design: 100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design: Rockport Publishers. Norman, D. (1999). The Invisible Computer: Why Good Products Can Fail, the Personal Comptuer is So Complex, and Information Appliances Are the Solution (Reprint ed.): MIT Press. Norman, D. (2002). The Design of Everyday Things (Reprint ed.): Basic Books. Williams, R. (2003). The Non-Designer's Design Book (2 ed.): Peachpit Press.

It302 ch06

Uploaded by

Copyright:

Available Formats

It302 ch06

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

It302 ch06

Uploaded by

Copyright:

Available Formats

What are some principles of interaction design discussed in the document?

What are some principles of interaction design discussed in the document?

How can design principles guide the interaction design process?

How can design principles guide the interaction design process?

C H A P T E R

Chapter 6 Design Principles

6.1. Principles of Interaction Design

Gulfs of Execution and Evaluation

6.1.1. Framework for Design Principles

6.1. Principles of Interaction Design

Figure 6.1 Framework for design principles.

Chapter 6 Design Principles

Figure 6.2 Interaction framework.

Efficiency/usability Simplicity Memorability Predictability Visibility

Chapter 6 Design Principles

Chapter 6 Design Principles

Figure 6.4 Adobe PhotoShop Preferences dialogue.

Ockhams Razor (The Principle of Simplicity)

Figure 6.5 Google.com.

Screenshot Google Inc. and is used with permission.

Chapter 6 Design Principles

Figure 6.6 Expandable menu: (a) expanded, (b) minimized.

Chapter 6 Design Principles

Figure 6.7 Grayed-out functionality.

Consistency and Correctness

Chapter 6 Design Principles

Figure 6.8 (a) Macintosh menu. (b) Microsoft Word menu.

Figure 6.9 Shopping cart convention.

Location, Location, Location

Figure 6.10 Logo of Pearson Education.

Chapter 6 Design Principles

Figure 6.11 Toggle case example.

Chapter 6 Design Principles

6.6.1. Gestalt Principles of Perception

Figure 6.12 The Rubin face/vase illusion.

Chapter 6 Design Principles

that are close to each other will be seen as

Figure 6.15 Adobe PhotoShop Preferences dialogue.

Chapter 6 Design Principles

Figure 6.17 Property pane from Adobe Dreamweaver.

that move together are seen as related.

Figure 6.19 Common fate: Adobe Dreamweaver properties pane.

Figure 6.20 Closure principle.

Figure 6.21 Adobe Dreamweaver Results panel.

Chapter 6 Design Principles

Figure 6.22 Part of an Apple.com Web page.

Figure 6.23 MoMA.org Web page.

Figure 6.25 (a) Translation. (b) Reflection. (c) Rotation.

Chapter 6 Design Principles

Figure 6.26 XM Satellite Radio Web-based player.

area of a page or screen that contains no content is called

Chapter 6 Design Principles

Figure 6.29 Stimulus intensity.

6.7. Stimulus Intensity

Figure 6.30 The six levels of heading elements.

6.8.1. Golden Ratio

Figure 6.31 (a) Golden ratio. (b) Golden ratio equation.

Chapter 6 Design Principles

6.8.2. Fibonacci Series