1. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Lecturer: Prof Jim Warren Based on Chapter 5 of The Resonant Interface HCI Foundations for Interaction Design First Edition by Steven Heim Lecture 21: Conceptual Design

2. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-2 Chapter 5: Design Technology Myopia Conceptual Design Physical Design Evaluation –We’ve covered specific techniques for this already under the Usability module Physical Design Cont. Interface Design Standards

3. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-3 Technology Myopia Interaction designs must be sensitive to: –Human-human communication –Implicit Knowledge (how the organisation [or whatever deployment setting) works at present, possibly for good reason) –Non-technical aspects of work (what else people do around the task where your software may sit) HCI is about suiting the technology to the task, not vice- versa Integrate technology and human activities carefully (“sociotechnical perspective”)

4. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-4 Conceptual Design Conceptual design involves –Structuring the information space –Creating alternate solutions –Determining which design concept to pursue

5. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-5 Conceptual Design The tools involved in conceptual design: –Brainstorming –Card sort –Semantic networks –Personas –Scenarios –Flowcharts –Cognitive walkthroughs (already covered in Usability module) –Use cases

6. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-6 Conceptual Design - Brainstorming Team activity –Stream-of-consciousness Generate ideas without stopping for criticism Use post-it notes or whiteboard or butcher paper, and just write –Storyboarding Illustrate the ‘story’ of what does (or should) happen Maybe have people role play Brainstorming sessions generate a lot of material that must be filtered and organized

7. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-7 Conceptual Design – Card Sort Card Sorting can be used to discover user-centered groupings Card sorting can be used to organize the information collected in the discovery phase Used to define groupings for menus, controls and Web page content Used to generate labels for menus, buttons and navigation links

8. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-8 Conceptual Design – Card Sort Result of a card sort Seldom this easy – brainstorming often yields synonyms and entries that don’t easily fit

9. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-9 Conceptual Design – Card Sort Advantages of card sorting sessions: –They are quick and easy to perform –They can be done before any preliminary designs have been made –They will let you know how people organize information –They will expose underlying structures

10. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-10 Conceptual Design – Card Sort Disadvantages of card sorting sessions: –They only involve the elements that you have written on the cards This might not be all the elements required in the real system –They suggest solutions that imply structures i.e. might get you fixated on a solution or metaphor that doesn’t suit the end user –They become difficult to navigate with more categories Semantically, all you have is clusters in 2D

11. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-11 Conceptual Design – Semantic Network A semantic network is a web of concepts that are linked through association.

12. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-12 Conceptual Design – Semantic Network Advantages of semantic networks: –They allow an easy way to explore the problem space. –They provide a way to create clusters of related elements Several named clusters (edit, format etc), and subclusters (e.g. Format-character, format-paragraph) –They provide a graphical view of the problem space. –They resonate with the ways in which people process information Particularly good for leading you to menu structures or dialog groupings/layouts

13. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-13 Conceptual Design – Semantic Network Disadvantages of semantic networks: –They require knowledge of the problem space –They can lead beyond the problem space –There is no formal semantics for defining symbol meaning [NOT on exam] You can get more formal and give the relationships explicit types (e.g., use Web Ontology Language [OWL] – but that’s beyond this course, or current HCI practice)

14. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-14 Conceptual Design – Personas Personas are archetypes of actual users, defined by the user’s goals and attributes. “Personas are derived from patterns observed during interviews with and observations of users and potential user (and sometimes customers) of a product” (Cooper & Reimann, 2003, p67)

15. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-15 Conceptual Design – Personas Create personas for primary stakeholders (classes of end users) A persona is a detailed description complete with as many personally identifying attributes as necessary to make it come to life –You want to be able to have empathy for this user!

16. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-16 Conceptual Design – Personas Personas should be a strict reflection of the information derived from the collection activities If you cannot point to a direct one-to-one relation with an observed user behavior, then that particular persona characteristic is either unnecessary or, more important, erroneous and will lead to incorrect design decisions –i.e., personas should be realistic, but not fantasy

17. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Personas – in and out Personas should have –A face (real photo of somebody, not necessarily somebody you interviewed) –A personality, a history, a skill set and a back story (all tangibly related to data from the Discovery phase, but probably a blend of real individuals) Personas don’t really need –Hair colour, height, weight (or anything irrelevant to designing for them) – but photo may imply some of this, just because real people can’t be ‘null’ for these attributes Some designers recommend ‘extreme’ personas to push the boundaries of your user types; more commonly, they are typical users 1-17

18. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-18 Conceptual Design – Personas Advantages of personas: –They are quick and easy to create. –They provide a consistent model for all team members. –They are easy to use with other design methods. –They make the user real in the mind of the designer. Disadvantages of personas: –They can be difficult to create if the target audience is international. –Having too many personas will make the work difficult. –There is a risk of incorporating unsupported designer assumptions.

19. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-19 Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs Scenarios –An English (natural) language description of a typical task –A scenario describes The basic goal The conditions that exist at the beginning of the task The activities in which the persona will engage The outcomes of those activities Scenarios afford a rich picture of the user’s tasks

20. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Writing Scenarios The Scenario involves one of your Personas Just as the Persona is specific about relevant aspects of the user, the Scenario should specific about the goals and activities However, for design, the Scenario should avoid pinning down the nature of the user interface solution –WHAT they do, but not HOW they do it –E.g., “John found an available room with enough space for his group and reserved it for the meeting” not “John pressed F5 to bring up the available room list and used the mouse...” 1-20

21. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-21 Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs Flowcharts can be: –Simple network diagrams that identify the pages of a Web site and the navigational links between them –Sophisticated diagrams that capture conditional junctures and computational processes (e.g., Formcharts)

22. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1-22 Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs Cognitive walkthrough - the evaluator follows the various scenarios using the flowcharts or the low-fidelity prototypes (next lecture) The evaluator takes the part of the primary stakeholder and tries to accomplish that stakeholder’s various tasks (We covered a highly structured version of this under Usability, but it could be less formal. When used in Conceptual Design, goal is to determine completeness and robustness of the design)

23. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Conceptual Design Summary We want a sociotechnical approach to design (designing for people, to fit their work) Brainstorming, card sort and semantic networks can identify and organise key concepts Personas give us models of our users suitable for emphathy Scenarios paint a word picture of a Persona using the future design Flowcharts provide a first formalisation of the interaction and may be tested with cognitive walkthrough 1-23