©2001 Southern Illinois University, Edwardsville All rights reserved. Today Group Discussion Design Elements Continued Readings in HCI, pp Monday CS 321 Human-Computer Interaction

©2001 Southern Illinois University, Edwardsville All rights reserved. Summary of Design Elements So Far Consistency: internal, external, real world Innovation Simplicity: visual noise, color pollution, cognitive overload Legibility and Readability Grouping: borders, alignment, color, gestalt principles Hierarchy Use of white space (negative space) Balance

©2001 Southern Illinois University, Edwardsville All rights reserved. Could an HCI Specialist have prevented the 2000 Election Problems? Palm Beach County Poll Butterfly Ballot Why did the Florida Residents have such a difficult time using the Voto-matic Voting Machines?

©2001 Southern Illinois University, Edwardsville All rights reserved. What is a Chad? Hanging Chad: Two or Three Corner Pregnant Chad

©2001 Southern Illinois University, Edwardsville All rights reserved. Could an HCI Specialist have prevented the 2000 Election Problems? Affordance – perceived properties of an artifact Visibility – make apparent to users the actions they are allowed to take Constraints – factors that encourage proper actions and prevent erroneous ones Feedback – provides information about the effects of users’ actions Prototype Testing Palm Beach County Poll Butterfly Ballot

©2001 Southern Illinois University, Edwardsville All rights reserved. Actual Paper Prototype

©2001 Southern Illinois University, Edwardsville All rights reserved. Actual Paper Prototype

©2001 Southern Illinois University, Edwardsville All rights reserved.

Could an HCI Specialist have prevented the 2000 Election Problems? Internal consistency – are the elements within the interface coherent? Organization – is the screen well laid out with proper use of white space? How is the balance? Is it cluttered causing cognitive overload? Grouping – are the elements logically or haphazardly placed around the screen? Are they appropriately grouped? Are grouping aides such as alignment, borders, and Gestalt Principles properly used? Palm Beach County Poll Butterfly Ballot

©2001 Southern Illinois University, Edwardsville All rights reserved. Could an HCI Specialist have prevented the 2000 Election Problems? Hierarchy – Are the critical elements emphasized over the non- critical ones? Simplicity – Excess or extra items that serve as distractions? Legibility / Readability – Good choice of font and font size? Good use of white space? Innovation – Did it benefit the voters or the candidates? Palm Beach County Poll Butterfly Ballot

©2001 Southern Illinois University, Edwardsville All rights reserved. Could an HCI Specialist have prevented the 2000 Election Problems? I can tell you, regular people get tripped up by the simplest things. It is sobering to observe a test where a user repeatedly asks "How do I go to the next step?" and you want to scream "Click the 'Next' button!" that they just somehow can't see. You thought the button was obvious, but, as anyone who's missed a highway exit learns, in the real world what's obvious to one person who knows the answer is not always obvious to a newcomer. People who are making fun of the voters who made mistakes should think about the obvious mistakes they've made in their lives. If "most people" never have problems doing simple things why were there so many flashing 12:00s on old VCRs? Would usability testing (which often only uses 5-20 people of each background) have caught it? I think so. Dan Bricklin, Designer of VisiCalc and other widely used programs

©2001 Southern Illinois University, Edwardsville All rights reserved.

Visual Perception Constructivist Theory Perception involves the intervention of representations and memories. The visual system constructs a models of the world by transforming, enhancing, distorting, and discarding information. Our ability to perceive objects is effected by our prior knowledge and expectations

©2001 Southern Illinois University, Edwardsville All rights reserved. Context We interpret objects based on their context as a result of our prior knowledge

©2001 Southern Illinois University, Edwardsville All rights reserved. Gestalt Laws of Perceptual Organization Visual construction involves decomposing or partitioning an image into separate entities that are readily recognizable a)Proximity b)Similarity c)Closure d)Continuity e)Symmetry (a) (e) (d) (c) (b)

©2001 Southern Illinois University, Edwardsville All rights reserved. Which Gestalt Principles are being used?

©2001 Southern Illinois University, Edwardsville All rights reserved. Color Perception Two kinds of light receptors: rods and cones Rods register the relative light and dark Cones perceive color Three kinds of cones: red, green, blue There are generally the same number of red and green cones, but fewer blue cones. There are very few blue cones in the fovea, focusing area of the eye.

©2001 Southern Illinois University, Edwardsville All rights reserved. Use of Color Color is emotional Psychological and cultural Physiological: some colors excite neurons in the brain more than others (red) Color is good for segmentation (grouping) Reduce the amount of time to search for information Too many colors can increase search time Color is good for drawing attention Color should be used as redundant coding 10% of the male population has some form of color deficiency or color confusion Blue is difficult to focus Good for backgrounds, bad for small areas, thin fonts, narrow lines

©2001 Southern Illinois University, Edwardsville All rights reserved.