October 8, 2009 CS 350 Lecture 13 1CS 350: Computer/Human InteractionLecture 13 Overview●Information design and SBD●Explore information design space●Information scenarios●Information claims●Refining information scenarios●Consistency and coherenceOctober 8, 2009 CS 350 Lecture 13 2CS 350: Computer/Human InteractionIn-class Exercise●Exercise 2 on page 156 of textbook:●Make a screen dump of your online course schedule (use transcript instead). Analyze the display from the perspective of the Gestalt principles in Table 4.1. Can you see any examples of these principles in action? If so, are they helping or hurting perception? Can you see any opportunities for improvement?October 8, 2009 CS 350 Lecture 13 3CS 350: Computer/Human InteractionGestalt Principles●Proximity – elements close together tend to be grouped together.●Similarity – elements with shared visual characteristics tend to be grouped together●Closure – tend to organize elements into closed groups●Area – tend to organize elements to form smallest group●Symmetry – tend to group symmetric elements●Continuity – tend to organize elements into repeating patternsOctober 8, 2009 CS 350 Lecture 13 4CS 350: Computer/Human InteractionInformation Design and SBD●Transform activity scenarios (stories about new functionality, new needs) into information scenarios (same stories with visual, auditory, or other presentation details)●Specify representations of task's objects and actions that help users perceive, interpret, and make sense●Make claims regarding presentation features and analyze consequencesOctober 8, 2009 CS 350 Lecture 13 5CS 350: Computer/Human InteractionExample●Problem scenario: Dr. Hwang builds a circuit by getting a breadboard, getting parts from the stockroom... She inserts parts connected to same node into same row of breadboard...●Activity scenario: Dr. Hwang builds a circuit using a simulation program... She chooses a part and places it. She repeats this for another part, then she connects them...October 8, 2009 CS 350 Lecture 13 6CS 350: Computer/Human InteractionExplore Metaphors●Again, brainstorm as in activity design – often the same metaphors●Concentrate on what they suggest with regard to presentation●Example:–Electrical circuit looks like...●Use sketches to illustrate metaphorsOctober 8, 2009 CS 350 Lecture 13 7CS 350: Computer/Human InteractionExplore Technology●Elaborate what technology being considered looks like●Example:–Electrical circuit looks like...October 8, 2009 CS 350 Lecture 13 8CS 350: Computer/Human InteractionInformation Scenarios●Identify claims features of activity scenario that can be supported by specific choices of presentation●Rewrite scenario with presentation details●Consider consequences, side effectsOctober 8, 2009 CS 350 Lecture 13 9CS 350: Computer/Human InteractionClaims Analysis●Same as before: identify feature of information scenario, consider consequences of feature●Pros and cons from the point of view of the information being presented as related to activity claims●Goal is to maximize overall pros and minimize overall consOctober 8, 2009 CS 350 Lecture 13 10CS 350: Computer/Human InteractionExample●Information scenario: Dr. Hwang builds a circuit using a simulation program... She notices that it looks very much like a drawing program like OpenOffice Draw. It has toolbars containg buttons with different shapes... The shapes appear to be the different circuit element types...October 8, 2009 CS 350 Lecture 13 11CS 350: Computer/Human InteractionExample●Information claim: Toolbar buttons for each circuit element type+ ...- ...October 8, 2009 CS 350 Lecture 13 12CS 350: Computer/Human InteractionRefining Information Scenarios●“Picture is worth a thousand words”●Sketches are quick and inexpensive●Sketch multiple important views●Insert details about individual information elements into scenarios and sketches. E.g. icons, menu items●Again, participatory design – ask end users what they thinkOctober 8, 2009 CS 350 Lecture 13 13CS 350: Computer/Human InteractionConsistency and Coherence●Individual display elements and overall visual design programs should be internally consistent.●Externally, want coherence – the constructed pieces should look related; however, do not want to stifle individual, task-specific creativityOctober 8, 2009 CS 350 Lecture 13 14CS 350: Computer/Human InteractionHomework 3●Exercises 3 & 5 on page 156 of textbook●Due at beginning of class next Thursday after fall break, will discuss and