Guidelines and Prototypes CS774 Human Computer Interaction Spring 2004

C5774 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

C5774 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

C5774 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

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

C5774 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

C5774 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?

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

C5774 Spring 2004 Standard templates

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

C5774 Spring 2004 What forms of organization?

C5774 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. Small Medium At Large PlainBoldItalic

C5774 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?

C5774 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 Don’t use blue on red!!!!!!!!

C5774 Spring 2004 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

C5774 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

C5774 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?)

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