1. ©2001 Southern Illinois University, Edwardsville All rights reserved. Today System Design: Reading: CD Ch.s 14, 15, &16 Monday Midterm CS 321 Human-Computer Interaction

2. ©2001 Southern Illinois University, Edwardsville All rights reserved. Coherent Design The design should strive for a coherent system “A coherent system keeps the user’s work orderly and natural.” Coherent system means everything seems to fit together and tasks flow in an logical order. Not a patchwork of functionality Particularly important for large, complex projects and for team development

3. ©2001 Southern Illinois University, Edwardsville All rights reserved. Road Map You interviewed the users and observed them doing their work: Contextual Inquiry (Ch. 2-4) You modeled each individual to recognize concerns, strategies, and practices: Work Models (ch. 5-7) You consolidated the models to recognize commonality and differences: Consolidated Work Models & Affinity Diagram (ch. 8-10) You recognized the implications of the data for design and (possibly) re-design: Innovation from data (ch. 11- 13)

4. ©2001 Southern Illinois University, Edwardsville All rights reserved. Visioning Now its time for Design Your team is to “vision” a system that supports and (possibly) re-designs the work: Visioning & Storyboards (ch. 14-16)

5. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 1.Walk the Data Immerse yourself in the data by “walking the wall”  Discuss what matters to the user  List available technologies  List design starting points

6. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 2. Envision the System Hold a team “Visioning Session”  Take a starting point  Create a story of how the user will use the system  “The pen” draws a picture of the ideas  Practicality is not a major consideration at this point  Should be fun!

7. ©2001 Southern Illinois University, Edwardsville All rights reserved. Vision

8. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 3. Evaluate and Integrate For each vision list positive and negative points Look across the visions to identify core positive points your team doesn’t want to lose Draw a consolidated vision 4. Storyboard Fill in details of the application

9. ©2001 Southern Illinois University, Edwardsville All rights reserved. Keeping Coherence Division-of-Labor Approach Divide system up among team members Tends to create a “patchwork” application Contextual Design Approach User Environment Design (UED) Creates a structure of the work

10. ©2001 Southern Illinois University, Edwardsville All rights reserved. UED “Blue print” of virtual work environment “Places”: rooms where work happens “Functions”: activities that are performed in the room “Links”: Corridors to move between rooms

11. ©2001 Southern Illinois University, Edwardsville All rights reserved. Beyer & Holtzblat (1998), Contextual Design, Morgan Kaufmann, Page: 307

12. ©2001 Southern Illinois University, Edwardsville All rights reserved. UED Focus Areas: supports a specific aspect of the work Purpose: state of work the focus area supports Functions, objects, constraints: elements of focus area Link: movement between focus areas Hidden Areas: focus areas that support work but do no directly interact with user Double Link: work of one focus area done in the context of another

13. ©2001 Southern Illinois University, Edwardsville All rights reserved. Beyer & Holtzblat (1998), Contextual Design, Morgan Kaufmann, Pages: 328,329

14. ©2001 Southern Illinois University, Edwardsville All rights reserved. UED to UID The UED is the specification for the User Interface Design (UID) The UED indicates what functions should be available and where to put them BUT it leaves open how the interface should work UED precedes UID UID is too detailed to see the overall work structure

15. ©2001 Southern Illinois University, Edwardsville All rights reserved. Summary 1.Understand the structure of the work as it exists (Contextual Inquiry & work models) 2.Become knowledgeable about the possibilities of re-design (Consolidation) brave 3.Envision a brave, new world (Visioning) 4.Work out the implications (Storyboard) 5.Create the system structure (UED)