Collection of HCI Principles

Shneiderman - 8 golden rules

1. Strive for consistency

• Consistent sequences of actions should be required in similar situations

• Identical terminology should be used in prompts, menus, and help screens

• Consistent color, layout, capitalization, fonts, and so on should be employed throughout.

2. Enable frequent users to use shortcuts

• To increase the pace of interaction use abbreviations, special keys, hidden commands, and macros

3. Offer informative feedback

• For every user action, the system should respond in some way (in web design, this can be accomplished by DHTML - for example, a button will make a clicking sound or change color when clicked to show the user something has happened)

4. Design dialogs to yield closure

• Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions shows the user their activity has completed successfully

5. Offer error prevention and simple error handling

• Design the form so that users cannot make a serious error; for example, prefer menu selection to form fill-in and do not allow alphabetic characters in numeric entry fields
• If users make an error, instructions should be written to detect the error and offer simple, constructive, and specific instructions for recovery
• Segment long forms and send sections separately so that the user is not penalized by having to fill the form in again - but make sure you inform the user that multiple sections are coming up

6. Permit easy reversal of actions

7.Support internal focus of control

• Experienced users want to be in charge. Surprising system actions, tedious sequences of data entries, inability or difficulty in obtaining necessary information, and inability to produce the action desired all build anxiety and dissatisfaction

8. Reduce short-term memory load

• A famous study suggests that humans can store only 7 (plus or minus 2) pieces of information in their short term memory. You can reduce short term memory load by designing screens where options are clearly visible, or using pull-down menus and icons

Don Norman - 7 principles

1. Use both knowledge in the world and knowledge in the head

2. Simplify the structure of tasks
3. Make things visible
4. Get the mappings right
5. Exploit the power of constraints
6. Design for error
7. When all else fails, standardize

Johnson (GUI Bloopers) - 9 principles
1. Focus on the users and their tasks, not on the technology
2. Consider function first, presentation later
3. Conform to the users’ view of the task
4. Design for the common case
5. Don’t distract users from their goals
6. Facilitate learning
7. Deliver information, not just data
8. Design for responsiveness
9. Try it out on users, and then fix it!

Fitt’s Law
1. The time to move to the target
2. The movement distance from the starting position to the target center
3. Target width

Mandel - 3 golden rules

1. Place Users in Control

• Use modes judiciously (modeless)
• Allow users to use either the keyboard or mouse (flexible)
• Allow users to change focus (interruptible)
• Display descriptive messages and text(Helpful)
• Provide immediate and reversible actions, and feedback (forgiving)
• Provide meaningful paths and exits (navigable)
• Accommodate users with different skill levels (accessible)
• Make the user interface transparent (facilitative)
• Allow users to customize the interface (preferences)
• Allow users to directly manipulate interface objects (interactive)

2. Reduce Users’ Memory Load

• Relieve short-term memory (remember)
• Rely on recognition, not recall (recognition)
• Provide visual cues (inform)
• Provide defaults, undo, and redo (forgiving)
• Provide interface shortcuts (frequency)
• Promote an object-action syntax (intuitive)
• Use real-world metaphors (transfer)
• User progressive disclosure (context)
• Promote visual clarity (organize)

3.    Make the Interface Consistent

• Sustain the context of users’ tasks (continuity)
• Maintain consistency within and across products (experience)
• Keep interaction results the same (expectations)
• Provide aesthetic appeal and integrity (attitude)
• Encourage exploration (predictable)

UI Design Cycle

1. Requirements Analysis

• Determine the goals for the website from the perspective of the user and the business.
  
• Determine the user needs and target usability requirements.
  
• Evaluate existing versions of the site.
  
• Perform a competitive analysis.
  
• Perform user interviews and surveys.
  

2. Conceptual Design

• Sketch out a site design and architecture at an abstract level.
  
• Conduct a task analysis to find critical features.
  

3. Mockups / Prototypes

• Rapidly create visual representations (mockups) or interactive representations
  (prototypes) of the site.
  
• Evaluate usability through focus groups, user tests, and walkthroughs.
  
• Use the evaluation results to create more mockups or improve the prototypes.
  
• Repeat this process (design iteration) until the design and usability goals are met
  

4. Production

• Create the final product.
  
• Evaluate functionality through testing, quality assurance, usability
  testing, and field testing.
  
• Use the evaluation results to improve the product.
  
• Repeat this process (production iteration) until the business goals are met.
  

5. Launch and Maintenance

• Launch the website.
  
• Maintain and refine with user feedback.
  
• Use the feedback to create new requirements, and begin major design improvements (system iteration).
  

How should you lay out your Web site?

The "Fluid" layout is the most traditional method, and allows the contents of a Web page to fill an entire window. In other words, it expands and contracts with the size of the window. The fluid layout is the simplest to implement, but is sometimes perceived by designers as being less modern. The "Centered" method allows users to focus on a narrower layout no matter what screen resolution they are using. The "Left-justified" method is usually slightly wider than the "Centered" layout, and is a popular method for text presentation, particularly with multi-column layouts.

With both the "Centered" and the "Left-justified" layouts, users do not have to visually scan as far horizontally, but when used on a 1024 x 768 pixel resolution monitor, it may require more pages to be scrolled vertically. Also, the latter two layouts cause considerable white space to show when a site is designed to optimize a 800 x 600 pixel resolution, and then used on monitors that are set for a 1024 x 768 pixel resolution.

Based on these results I am not very concerned that only 18% use fluid design. There seems to be little important difference between the designs and is probably easier and cheaper to design using the non-fluid methods.

The researchers had 20 participants search for specific information. Like almost half of the Web sites used today (thecounter.com -- September, 2002), the Web sites in this study were designed for 800 x 600 pixel resolutions. The test subjects used 17-inch monitors set at either 1024 x 768 or 800 x 600 pixel resolution. Half of the questions could be answered on the homepage, the other half on a second level page.

They found no reliable differences among the methods in search time, accuracy of finding information, or in search efficiency (number of clicks, use of the Back button, etc.). However, their users reliably believed that the "Fluid" layout was best suited for reading and that it allowed them to find key information more easily. In addition, users reliably preferred the "Fluid" method.

In July of 2001, Steve Kangas of NetConversions (Kangas, 2001) published an evaluation of several of the most popular home pages on the Web. A total of 87 Web sites were surveyed using a combination of manual checks and automated page measures. He reported that 49% were "Centered" with a fixed-width, 28% were "Left-justified" with a fixed-width, and only 23% used a fluid design that allowed content to grow or shrink with different browser window sizes.
Jakob Nielsen and Marie Tahir evaluated the homepages from 50 Web sites (Nielsen and Tahir, 2001), and reported that only 18% of them used a "Fluid" method (they referred to them as "liquid" layouts). The sites they reviewed were prominent in some way, including top-10 lists, world's largest companies, certain government agencies, well-run small companies and non-profit institutions.

From these studies, it appears that about one out of five Web sites (only 20%) currently are designed using a "Fluid" layout. Unfortunately, the layout most preferred by users, the "Fluid" layout, is the one implemented least often by designers.

Usability Evaluation and Prototype Fidelity

One question that continues to be asked is how high does the fidelity level of a prototype need to be in order for the prototype to be useful in usability testing?

A study by Catani and Biers investigated the effect of prototype fidelity on the information obtained from a performance test. They had three levels of prototypes:

• Paper – low fidelity
• Screen shots – medium fidelity
• Interactive Visual Basic – high fidelity

Thirty university students performed four typical library search tasks using one of the three prototypes. A total of 99 usability problems were uncovered. The mean number of total problems encountered was:

• Low fidelity – 24.8
• Medium fidelity – 29.4
• High fidelity – 28.0

There were no significant differences in the number and severity of problems identified, and there was a high degree of commonality in the specific problems uncovered by users using the three prototypes.

These results seem to support the contention that one can extract as much information from a usability test using low-fidelity (paper) prototypes as from one using higher fidelity prototypes.

Usability Evaluation and Prototype Fidelity: Users and Usability Professionals, Catani, M.B. and Biers, D.W., Proceedings of the Human Factors and Ergonomics Society 42nd Annual Meeting, 1331-1336, (1998).

Web research gives 9 guidelines to improve user performance

Good, research-based information is very sparse concerning the design and development of effective Web sites. Few studies have tried to answer basic Web usability questions. One of these was published by Spool and his colleagues (1997). They tried to identify the design decisions that help, and those that hinder, users' attempts to find information in a large Web site. Some of their conclusions are:

1. Sites can be designed to facilitate either searching or browsing, but not both.
2. Most sites do not help users compare information.
3. Users did not seem to become familiar with the layout of sites (or develop useful mental models).
4. Well-designed frames did not hinder users. But they didn’t help users either.
5. Users preferred to scroll to the bottom of pages to press final buttons.
6. In-site search engines were not generally used; and when they were used, they didn’t improve search performance.
7. Text links were more important in these search tasks than graphic links.
8. The most difficult-to-use sites were more "graphically intense."
9. The best-liked sites were not the same as the most easily searched sites.

Web designers make daily design decisions with little guidance from research-based literature. Good studies, like this one, will help usability specialists make better initial decisions.

Web Site Usability: A Designer's Guide, Spool, J.M., Scanlon, T., Schroeder, W., Snyder, C. and DeAngelo, T. (1997), North Andover, MA: User Interface Engineering.