1. ©2001 Southern Illinois University, Edwardsville All rights reserved. Today System Design & Putting it Together Reading: ABF: Ch. 9 CD Ch.s 14, 15, 16, & 20 Tuesday Design Elements Completed (Really!) CS 321 Human-Computer Interaction Reading: ABF Ch.s 10, 11, 13& 14

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. Keep Users in a State of Flow Cooper, Ch. 9 “When people are able to concentrate wholeheartedly on an activity, they lose awareness of peripheral problems and distractions” Software must become transparent to maintain state of flow

4. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Making Software Invisible 1.Follow mental models Remember that users have a mental of the work

5. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Making Software Invisible 2.Direct, don’t discuss The user should direct the process – rather than the software engaging in a dialog User’s should feel they are in control

6. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Making Software Invisible 3.Keep tools close at hand Offering tools is a compromise with complexity

7. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Making Software Invisible 4.Provide modeless feedback Pop-up dialog boxes put programs in a mode that must be dealt with before it can return to normal use. Modeless feedback is built into the interface and does not disrupt the normal flow of work.  Example – information font selection & size

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

9. ©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)

10. ©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

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

12. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 2) Write Down Great Tools and Great Ideas Technology Make a sheet dedicated to all of the enabling technologies at your disposal Stretch a bit Hot Ideas Make a sheet with all of the hot ideas that the team has No filtering, no negative comments about hot ideas allowed here

13. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 3) Create Multiple Visions Take a starting point of a great idea and tool being used Create a story of how the user will use the system “The pen” draws a picture of the ideas Draws quickly Graphical design skills not required

14. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 3) Create Multiple Visions Typically one vision per easel sheet Need a facilitator Keep the group process humming Practicality is not a major consideration at this point Should be fun!

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

16. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 4) Evaluate and Integrate For each vision list its positive and negative points Don’t discount a far-out vision Has something good that can be used elsewhere Or sparks a more practical idea Look across the visions to identify core positive points your team doesn’t want to lose Draw a consolidated vision Create a coherent vision using the best of everything Again use a facilitator and the ‘pen’ roles The first draft likely to be messy, plan on redrawing later to present to others

17. ©2001 Southern Illinois University, Edwardsville All rights reserved. Steps to Creative Design 5) Storyboard Fill in details of the application use

18. ©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 Create a structure of the work User Environment Design (UED)

19. ©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

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

21. ©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 Such as spell checking  Correctness of words depends on context of editing a document

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

23. ©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

24. ©2001 Southern Illinois University, Edwardsville All rights reserved. Summary of System Design 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)

25. ©2001 Southern Illinois University, Edwardsville All rights reserved. Putting It All Together -- Practicing Participatory Design Design the Process for your Design Effort No single process works for every problem Know the intent of each step and choose which ones fit the project  What point are you coming into the project? –At the beginning, somewhere in the middle, at the end?  Is this a new system or a re-design of an existing one?  What access do you have to the users?  How much time is devoted to design?

26. ©2001 Southern Illinois University, Edwardsville All rights reserved. The Techniques Contextual Inquiry Interpretation Sessions Work Models Consolidated Models Affinity Diagram Visioning Story Boards UED/UI Paper Prototypes

27. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principles: Principle of Data Ground all design action in explicit understanding of the users and how they work Use concrete data to derive the understanding  Contextual Inquiry  Work Models  Affinity Diagram Use concrete data to justify design  Vision (Work Redesign)  Story Board  Paper prototyping More than just “User Friendly” Your design will be relevant, useful, and easy to use

28. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principles: Principle of Team Develop a shared understanding and a common team focus Use external representations to develop a common vision  Interpretation sessions, affinity diagram, work models, UED  “Working-on-the-Wall” Bring different perspectives together  X-func team: cross functional team Effective team work depends on being able to manage team meetings  Define roles  Define the process  Maintain focus  Maintain team memory

29. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principles: Principle of Design Thinking Alternate between working and reflecting Reflecting provides a check of coherent structure, consistency, and completeness Reflecting reminds the team about what each step reveals. Each transformation acts like a walkthrough of the design  From raw data to the interpretation  From the interpretation to a vision  From a vision to a design  From a design to a usability test

30. ©2001 Southern Illinois University, Edwardsville All rights reserved.

32. Senior Project Please remember what you learn here for Senior Project HCI Lab is available for Senior Project Check out Senior Projects at: http://www.cs.siue.edu/SeniorProjects/index.htm