Mobile Human Computer Interaction (HCI)

Edward Tufte's critique of the iPhone interface:
http://www.youtube.com/watch?v=YslQ2625TR4

My vote for the best app of all time:
http://ocarina.smule.com/

Apple's UI Guidelines:
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

iPhone key constraints:

• Compact screen size
• Limited memory
• Screens are seen sequentially
• Interaction with one application at a time
• Onscreen help is minimal

Apple's Human Interaction principles:

• Use metaphors
• Direct manipulation
• See and point
• Feedback
• User control
• Aesthetic integrity

Examples of mobile user interfaces:
http://www.tappgala.com/

Traditional HCI guidelines:

Bruce Tognazzini's Basic First Principles of Interaction Design:
http://www.asktog.com/basics/firstPrinciples.html

ACM SIGCHI text on HCI:
http://hcibib.org/tcuid/

Bad User Interface Gallery:
http://www.buigallery.com/

1. Consistency

• certain aspects of an interface should behave in consistent ways at all times for all screens
• terminology should be consistent between screens
• icons should be consistent between screens
• colors should be consistent between screens of similar function

2. Simplicity

• break complex tasks into simpler tasks
• break long sequences into separate steps
• keep tasks easy by using icons, words etc.
• use icons/objects that are familiar to the user

3. Human Memory Limitations (Cognitive Overload)

• organize information into a small number of "chunks"
• try to create short linear sequences of tasks
• don't flash important information onto the screen for brief time periods
• organize data fields to match user expectations, or to organize user input (e.g. autoformatting phone numbers)
• provide cues/navigation aids for the user to know where they are in the software or at what stage they are in an operation
• provide reminders, or warnings as appropriate
• provide ongoing feedback on what is and/or just has happened (report of the state of the system)
• let users recognize rather than recall information
• minimize working memory loads by limiting the length of sequences and quantity of information

4. Cognitive Directness

• minimize mental transformations of information (e.g. using 'control+shift+esc+8' to indent a paragraph)
• use meaningful icons/letters
• use appropriate visual cues, such as direction arrows
• use 'real-world' metaphors whenever possible (e.g. desktop metaphor, folder metaphor, trash can metaphor etc.)

5. Feedback

• provide informative feedback at the appropriate points
• provide appropriate articulatory feedback - feedback that confirms the physical operation you just did (e.g. typed 'help' and 'help' appears on the screen). This includes all forms of feedback, such as auditory feedback (e.g. system beeps, mouse click, key clicks etc.)
• provide appropriate semantic feedback - feedback that confirms the intention of an action (e.g. highlighting an item being chosen from a list)
• provide appropriate status indicators to show the user the progress with a lengthy operation (e.g. the copy bar when copying files, an hour glass icon when a process is being executed, etc.)

6. System messages

• provide user-centered wording in messages (e.g. "there was a problem in copying the file to your disk" rather than "execution error 159")
• avoid ambiguous messages (e.g. hit 'any' key to continue - there is no 'any' key and there's no need to hit a key, reword to say 'press the return key to continue')
• avoid using threatening or alarming messages (e.g. fatal error, run aborted, kill job, catastrophic error)
• use specific, constructive words in error messages (e.g. avoid general messages such as 'invalid entry' and use specifics such as 'please enter your name')
• make the system 'take the blame' for errors (e.g. "illegal command" versus "unrecognized command")

7. Modality

• use modes cautiously - a mode is an interface state where what the user does has different actions than in other states (e.g. changing the shape of the cursor can indicate whether the user is in an editing mode or a browsing mode)
• minimize preemptive modes, especially irreversible preemptive modes - a preemptive mode is one where the user must complete one task before proceeding to the next. In a preemptive mode other software functions are inaccessible (e.g. file save dialog boxes)
• make user actions easily reversible - use 'undo' commands, but use these sparingly
• allow escape routes from operations

8. Attention

• use attention grabbing techniques cautiously (e.g. avoid overusing 'blinks' on web pages, flashing messages, bold colors etc.)
• don't use more than 4 different font sizes per screen
• use serif or sans serif fonts appropriately as the visual task situation demands
• don't use all uppercase letters - use and uppercase/lowercase mix
• don't overuse audio or video
• use colors appropriately and make use of expectations (e.g. don't have an OK button colored red! use green for OK, yellow for 'caution, and red for 'danger' or 'stop')
• don't use more than 4 different colors on a screen
• don't use blue for text (hard to read), blue is a good background color
• don't put red text on a blue background
• use high contrast color combinations
• use colors consistently
• use only 2 levels of intensity on a single screen
• Use underlining, bold, inverse video or other markers sparingly
• on text screens don't use more than 3 fonts on a single screen

9. Display issues

• maintain display inertia - make sure the screen changes little from one screen to the next within a functional task situation
• organize screen complexity
• eliminate unnecessary information
• use concise, unambiguous wording for instructions and messages
• use easy to recognize icons
• use a balanced screen layout - don't put too much information at the top of the screen - try to balance information in each screen quadrant
• use plenty of 'white space' around text blocks - use at least 50% white space for text screens
• group information logically
• structure the information rather than just presenting a narrative format (comprehension can be 40% faster for a structured format)

10. Individual differences

• accommodate individual differences in user experience (from the novice to the computer literate)
• accommodate user preferences by allowing some degree of customization of screen layout, appearance, icons, volume level, etc.
• allow alternative forms for commands (e.g. key combinations through menu selections)

Fitt's Law:

The time it takes to move from a starting position to the final target is determined by the distance to the target and the size of the target. Relates to icon size (bigger), button placement (edges of the screen) and contextual (pop-up) menus.

Hick's Law:

The time it takes for users to make decisions is based on the number of choices they have. User will make choices more quickly from 1 menu of 10 items than 2 menus of 5 items. Speed is also determined by familiarity of choices, and format of choices.

Magical Number 7:

The human mind is able to remember information best in chunks of 7 (plus or minus 2). For short-term memory, information is best presented in chunks of 5 to 9 pieces.

GUI guidelines

1. Icons: Clarity and Simplicity

• Make the symbol recognizable at a distance
• The icon should reproduce well at different scales
• Consistency of design among icons
• Be aware of cultural / symbolic conventions

Icons are a visual language, and should be simple and consistent in style.They must be recognizable from a distance, and they should scale well. Their color palette is limited, and their ability to show detail is low. A 50/50 balance of positive to negative space is usually the best design for readability.

One advantage of icon-driven interfaces is that they are non-verbal, overcoming lingual and literacy barriers. Consideration of cultural differences in interpreting icons is important in localizing software, however.

Icons are easily remembered. But non-literal concepts are hard to convey with icons. So icons are almost always used in conjunction with menu systems. Text aids, like cursor "tooltips" (which are like captions for icons), can also be used.

There are 3 general types of symbols:

Literal	Abstract	Arbitrary

2. Information, Controls, and Navigation: Layering and Separation

Visual comparisons are facilitated by layers of data

• Spatial proximity links multivariate data. Placing objects side by side invites comparison.
• Different data representations emphasize differences in types of data (scale, color)
• Overlap denotes precedence
• Problem: getting the data to work together, not fight for predominance

3. Use of Color

Used selectively, color can enhance computer interfaces and other information displays

Layer and Separate

• Distinguish different types of information
• Set the context for graphs and tables
• Emphasize important items (saturated colors are "active", neutral grey is "disabled", warm colors advance, cool colors recede)

  Provide information

• Label (group similar functions by color)
• Measure
• Realism

Color is never perceived in isolation. Use strong colors in small quantities, against large areas of quiet colors. More saturated colors draw our attention immediately. Use them sparingly.

Summary

Designers must consider the constraints of the computer.

1. Picture plane

• size
• aspect ratio
• prominence level of various screen positions
• resolution

2. Colors

• number available
• system palettes

3. Fonts

• cross-platform
• keyboard mappings

4. Speed

• processor
• data transmission

Designing interactive applications is an art. There are, however, some tried and true guidelines:

• 10 minute rule (the time limit in which a user must be able to do something useful)
• Minimize conceptual load
• Be consistent
• People don't like to wait ... especially for computers
• Explain and illustrate delays
• Provide just the right amount of information
• Make states visible
• Provide an easy way out
• Keep nesting levels to a minumum
• Don't overwhelm the user with options

Avoiding Common Design Blunders:

• Use only as many colors as you really need
• Design for people with normal eyesight
• Make the subject stand out from the background
• Design for the medium
• Make text legible
• Use graphics that are internationally understandable
• Don't let graphics and headers compete
• Simplify
• Make use of interactivity
• Ensure graphics aren't misleading

References

Hix, D. & Hartson, H.R. (1993) Developing User Interfaces: Ensuring usability through product and process, NY, Wiley. Chap. 2.

Cornell University Ergonomics Web (http://ergo.human.cornell.edu/)

Important links

ACM Special Interest Group on Computer Human Interaction (SIGCHI):
http://www.sigchi.org/

Interaction Design Association (IxDA)
http://www.ixda.org/

IDEO, a top international design firm:
http://www.ideo.com/

CMU Human-Computer Interaction Institute:
http://www.hcii.cmu.edu/

MIT Media Lab:
http://www.media.mit.edu/

Tutorials from the MobileHCI conferences:
http://www.comp.lancs.ac.uk/~rukzio/mobilehci2010tutorials/