Ch8new1-10 - Chapter 8, part 1: Designing the Human...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Chapter 8, part 1: Designing the Human Interface D. Harrison McKnight Essential 2 Know—Chapter 8 Essential Be able to describe the steps in the Be process of designing forms, reports process Be able to list the four General Formatting Be guidelines for designing forms and reports guidelines Be able to list four guidelines each for: – Highlighting information – Displaying text Key terms Designing the Human Interface: A Rationale Rationale Human interface needs to be made Human special because…humans are special special The interface needs to fit the situation Many studies and books on this topic About Face 3: The Essentials of Interaction Design Alan Cooper, Cooper Robert Reimann, Consultant David Cronin ISBN: 978-0-470-08411-3 ©2007 648 pages User Interface Design and the Human User the Understanding the Human User Understanding Perception Perception Perception XX XX XX Proximity A Aa Pattern Matching Similarity complet Closure Understanding the Human User User Perception Vision Vision Vision Visual Acuity 3213123 54321212345 6543211123456 765432101234567 6543211123456 54321212345 3213123 Color Understanding the Human User User Perception Vision Memory Memory Memory Short Term Memory – Fast read/write – Limited capacity: 7 +/- 2 chunks (Miller, 1957) (Miller, Limited – Susceptible to interference Long Term Memory – Slow read/write – Unlimited capacity – Recall versus recognition Understanding the Human User User Perception Vision Memory Learning Learning Learning “Natural” learning mode – Active, exploratory – Feedback Transfer Expertise & routinization Understanding the Human User User Perception Vision Memory Learning Individual Differences Individual Differences Individual Expertise Presentation Format Interface Design Goals (Galitz, 1993) (Galitz, High Consistency (Standards) – within the application – across applications – between application & user’s world Interface Design Goals Interface Reduced Complexity – Avoid information overload – Provide task closure – Provide feedback & recovery – Promote consistency Some complexity is inherent in the Some task and can’t be reduced. task Screen (Window) Design Screen Screen Composition Screen Content Error Management Color Screen Composition (Galitz, 1993) (Galitz, Balance – Equal weighting from top to bottom, left to right Equal of screen; symmetry of Simplicity – Number of fields & alignment points – Overall & local density Alignment – Field labels and fields Screen Content (Galitz, 1993) (Galitz, Words to Forget & Use – Abend, Abort ==> End, Cancel, Stop – Access ==> Get, Ready, Display – Output ==> Report, List, Display Use Active Voice – “List students” versus “Have a list of students List displayed” displayed” Error Management (Galitz, 1993) (Galitz, Prevention – Anticipate mis-spellings, capitalization, default Anticipate values, possible values values, – Recognition vs. recall Detection – Check for invalid or incomplete data – Highlight errors Correction – Meaningful messages on what’s wrong & how to Meaningful correct correct Colors Colors COLOR WAVELENGTH Red Orange Bright 700 600 Yellow 570 Green 500 Blue 470 Violet 400 Warm Cool Color: Caution Color: Increasing the number of colors Increasing decreased efficiency, decreased effectiveness, and increased confusion effectiveness, Choosing the wrong colors Choosing increased focusing-refocusing, increased fatigue increased Roughly 8% of men and 4% of women Roughly are color blind are When to Use Color (Galitz, 1993) (Galitz, To focus attention on certain parts of the To screen screen To show the status of certain information To locate information of certain type/quality To focus attention in a crowded screen And other identification techniques such as And location and proximity are not used location What Color(s) to Use What COLOR Red Yellow Green Blue Gray White Warm Cool Bright Dim MEANING / ASSOCIATION Stop, fire, hot, danger Caution, slow, test Go, OK, clear, safety Cold, water, calm, sky, neutrality Neutrality Neutrality Action, response required, spatial closeness Status, background info., spatial remoteness Attention, emphasis, hot active De-emphasis, background info. Marcus 1986 What Color(s) to Use What Foregrounds – Very different from background colors – Warmer, more active colors – Brighter colors (for text or data) Backgrounds – Not competing with foreground colors – Cool, dark colors – Colors at the extreme ends of the color Colors spectrum spectrum – Neutral colors It is easier to read mixed case text THAN IT IS TO READ TEXT PRINTED IN ALL CAPS Web Standards/Guidelines Web Jakob Nielsen (www.useit.com) – – – Designing Web Usability: The Practice of Simplicity (2000) The (2000) Designing Homepage Usability: 50 Websites Deconstructed (2002) 50 Homepage (2002) Prioritizing Web Usability (2006) Jared Spool (www.uie.com) World Wide Web Consortium (www.w3.org) Lynch + Horton (webstyleguide.com) Coggan + Schnitzer (www.accessible.org) Nielsen Guidelines Nielsen Designing Web Usability: Designing The Practice of Simplicity The by Jakob Nielsen Importance of Usability Usability is like Water Usability Page Design Tips 1. Maximize what is useful to user 1. Maximize 2. 3. 4. 5. (minimize all else) (minimize Test your site on new + old Test browsers browsers Make page download 1 second or Make less (keep file size, graphics to a minimum) minimum) Make sure all links are Make understandable understandable Use plain or very mild backgrounds Content Design “Bee” Tips 1. Be very brief—much less than usual 1. 2. Be scannable—bulleted lists, headings 3. Be self-explanatory—not vague or Be clever clever 4. Be relevant—put main message first Site Design Tips 1. HP: search, navigation, summary 1. HP: 2. 3. 3. 4. and maybe a task and Keep HP one click away Keep Organize from Users’ perspective, Organize not your perspective not Use META tags to make site Use searchable searchable Disability / Accessibility Tips 1. Incorporate standards at: 1. Incorporate 2. 3. 4. 5. 6. http://www.w3.org/WAI/ http://www.w3.org/WAI/ Provide ALT descriptions of images Use relative font sizes Do a color-blind test Keep backgrounds and colors Keep simple simple Write to a 5th-grade reading level ...
View Full Document

This note was uploaded on 11/17/2011 for the course ITM 311 taught by Professor Harrisonmcknight during the Fall '10 term at Michigan State University.

Ask a homework question - tutors are online