Guidelines and Prototypes CS 774 Human Computer Interaction

Guidelines and Prototypes CS 774 Human Computer Interaction Spring 2004

Our Design Activities � Establish process Task analysis � Interface design � Evaluation � �LUCID process model �Ethnographic observation �Scenario development �Guideline development �Prototyping �Heuristic expert evaluation �Usability testing �GOMS KLM analysis C 5774 Spring 2004

Guidelines and Prototypes � Guidelines – Interface standards for designers to follow – Make choices that pervade the interface - fonts, colors, layout patterns, interaction strategies � Prototypes – A physical representation of interface – Preliminary, tentative version that is intended to be marked up, criticized, changed - a first draft C 5774 Spring 2004

Guideline Document Written when you start, updated when needed � Two main elements � 1. Conceptual design � – What’s in your interface - objects, documents, actions – Interaction style - how to present, modify objects � 2. Look and Feel – Visual design - appearance issues – Interaction design - behavior issues C 5774 Spring 2004

Conceptual Design � � Butterfly editor Single window, WYSIWYG Mix of direct and indirect manipulation Feedback of numerical properties C 5774 Spring 2004

Interaction Styles � Direct Manipulation – Indirect manipulation? Changing properties with buttons? � Menu Selection – Toolbar as supplemental menu? Form fill-in � Command language � Natural language � C 5774 Spring 2004

What kind of GUI? � NOT command line menu � Do you want a. . . – – Wizard (GUI version of command line menu)? Single integrated window with one document? Multiple visible documents with floating toolbar? Web-like single window with navigation between screens? C 5774 Spring 2004

Visual Design - Layout Standards for placement arrangement � Work for consistency � Establish set grids, spacing, placement, alignment � C 5774 Spring 2004

Standard templates C 5774 Spring 2004

Organization thru Visual Cues � Grouping – � vs Visual contrast – � Hierarchy – This is a critical action � � This is less so Explicit structuring elements – C 5774 Spring 2004

What forms of organization? C 5774 Spring 2004

Visual Design - Typography Standards for use of fonts and style � Design for and readability � Select typefaces (1 -2), sizes (1 -3), styles � Assign to roles - menu bar, alerts, document, etc. � Medium At Large � Small � Plain Bold Italic C 5774 Spring 2004

Icons and images What in your GUI is better as image than text? � Choose representations � – Use your metaphors � Build consistent families - combine elements � Do these icons work? C 5774 Spring 2004

Color � Choose a compatible palette of colors – Web safe? � Use colors consistently – Same meaning => use same color � Use color intelligently – Talk to artist in advance C 5774 Spring 2004 Don’t use blue on red!!!!

Guidelines - Summary � Guidelines for our project (Eudora-like mail) – 1. Conceptual design � � � Have messages and mailbox objects Use Message and Mailbox windows + menu/toolbar, the message is direct manipulation text editor window Use Envelope/Inbox metaphor plus other utilities – 2. Look and Feel � � � Use this layout pattern, these fonts, these colors Use this standard template for dialog boxes Use this icon family based on these metaphors C 5774 Spring 2004

Prototyping � Rough draft – Work with users on testing elements of prototype � Low fi, Mid fi, Hi fi – Paper, HTML, Visual Basic � Low fi has advantages – – Easy, fast, cheap Doesn’t look too polished, doesn’t feel finished Doesn’t preclude comments by its professional look Doesn’t distract designer or user with minor details C 5774 Spring 2004

Lo-Fi a la Rettig � 1. Construct prototype – Assemble kit of materials � Paper and pencil, glue, printed widgets – Construct prototype – Develop series of scenarios for test � 2. Prepare for test – Assign team members to roles – Find users (are friends good users? ) – Prepare space, equipment (if you use video? ) C 5774 Spring 2004

Testing prototype � 3. Conduct test – Facilitator – Computer – Observer � - works with user - works the prototype - writes down notes on 5 x 8 cards Important that everyone stay within role - maintain illusion – Post-test survey � 4. Analyze results – List of action items C 5774 Spring 2004