User-Centered Design and Development

1. User-Centered Design and Development Instructor: Franz J. Kurfess Computer Science Dept. Cal Poly San Luis Obispo FJK 2005-2011 1

2. Chapter Overview • Problem space • Conceptual models • Interface metaphors • Interaction paradigms • Conceptual models and physical design FJK 2005-2011 4

3. Motivation • Good intentions are not sufficient to develop good user interfaces. • It is important to understand the background, tasks, mind set, and experiences of users. • Carefully considering the interactions of the user with the system before they are committed to code offers the flexibility to discard ideas and approaches that don’t work. FJK 2005-2011 5

4. Objectives • Understand the terms problem space and conceptual model. • Use them to develop abstract descriptions of interactions. • Identify mappings between the abstract descriptions and the methods and techniques available for implementation. • Evaluate advantages and problems of various approaches to such mappings. FJK 2005-2011 6

5. Recap • HCI has moved beyond designing interfaces for desktop machines • Concerned with extending and supporting all manner of human activities • Designing for user experiences, including: • Making work effective, efficient and safer • Improving and enhancing learning and training • Providing enjoyable and exciting entertainment • Enhancing communication and understanding • Supporting new forms of creativity and expression 7

6. Understanding and conceptualizing interaction 8

7. Understanding the problem space • What do you want to create? • What are your assumptions? • What are your claims? • Will it achieve what you hope it will? If so, how? 9

8. A framework for analysing the problem space • Are there problems with an existing product or user experience? • Why do you think there are problems? • How do you think your proposed design ideas might overcome these? • When designing for a new user experience how will the proposed design extend or change current ways of doing things? 10

9. An example • What do you think were the main assumptions made by developers of online photo sharing and management applications, like Flickr? 11

10. Assumptions and claims • Assumptions • Able to capitalize on the hugely successful phenomenon of blogging • Just as people like to blog so will they want to share with the rest of the world their photo collections and get comments back • People like to share their photos with the rest of the world • A claim • From Flickr’s website (2005): “is almost certainly the best online photo management and sharing application in the world” 12

11. From problem space to design space • Having a good understanding of the problem space can help inform the design space • e.g., what kind of interface, behavior, functionality to provide • But before deciding upon these it is important to develop a conceptual model 13

12. Conceptual model • How will the system appear to users? • Internalized understanding of how the system works. • May not correspond to the actual design of the system. • A conceptual model is: “a high-level description of how a system is organized and operates.” (Johnson and Henderson, 2002, p. 26) FJK 2005-2011 14

13. What is and why need a conceptual model? • Not a description of the user interface but a structure outlining the concepts and the relationships between them • Why not start with the nuts and bolts of design? • Architects and interior designers would not think about which color curtains to have before deciding where the windows will be placed in a new building • Enables “designers to straighten out their thinking before they start laying out their widgets” (p. 28) • Provides a working strategy and a framework of general concepts and their interrelations 15

14. Helps the design team • Orient themselves towards asking questions about how the conceptual model will be understood by users • Not to become narrowly focused early on • Establish a set of common terms they all understand and agree upon • Reduce the chance of misunderstandings and confusion arising later on 16

15. Main components • Major metaphors and analogies that are used to convey how to understand what a product is for and how to use it for an activity. • Concepts that users are exposed to through the product • The relationships between the concepts • e.g., one object contains another • The mappings between the concepts and the user experience the product is designed to support 17

16. A classic conceptual model: the spreadsheet • Analogous to ledger sheet • Interactive and computational • Easy to understand • Greatly extending what accountants and others could do www.bricklin.com/history/refcards.htm 18

17. Why was it so good? • It was simple, clear, and obvious to the users how to use the application and what it could do • “it is just a tool to allow others to work out their ideas and reduce the tedium of repeating the same calculations.” • capitalized on user’s familiarity with ledger sheets • Got the computer to perform a range of different calculations and recalculations in response to user input 19

18. Another classic • 8010 Star office system targeted at workers not interested in computing per se • Spent several person-years at beginning working out the conceptual model • Simplified the electronic world, making it seem more familiar, less alien, and easier to learn Johnson et al (1989) 20

19. The Star interface 21

20. Activity: Conceptual Model • What is your conceptual model of a video recorder (not video player)? • Do you believe it is close to the actual design of such a system? • Do you know people who have an “interesting” conceptual model of a video recorder? FJK 2005-2011 22

21. Activity: Mis-Conceptual Model • Do you know examples of systems or devices for which some people have incorrect conceptual models? • This does not necessarily mean that those people are stupid! • Conceptual models should be largely independent of the actual technology used in the implementation of the system. FJK 2005-2011 23

22. Interface metaphors • Designed to be similar to a physical entity but also has own properties • e.g. desktop metaphor, search engine • Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’ • Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality • People find it easier to learn and talk about what they are doing at the computer interface in terms familiar to them 24

23. Benefits of interface metaphors • Makes learning new systems easier • Helps users understand the underlying conceptual model • Can be innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users 25

24. Problems with interface metaphors (Nelson, 1990) • Break conventional and cultural rules • e.g., recycle bin placed on desktop • Can constrain designers in the way they conceptualize a problem space • Conflict with design principles • Forces users to only understand the system in terms of the metaphor • Designers can inadvertently use bad existing designs and transfer the bad parts over • Limits designers’ imagination in coming up with new conceptual models 26

25. Activity • A company has been asked to design a computer-based system that will encourage autistic children to communicate and express themselves better. • What type of interaction would be appropriate to use at the interface for this particular user group? 27

26. Interaction types • Instructing • issuing commands using keyboard and function keys and selecting options via menus • Conversing • interacting with the system as if having a conversation • Manipulating • interacting with objects in a virtual or physical space by manipulating them • Exploring • moving through a virtual environment or a physical space 28

27. Instructing • Where users instruct a system by telling it what to do • e.g., tell the time, print a file, find a photo • Very common interaction type underlying a range of devices and systems • A main benefit of instructing is to support quick and efficient interaction • good for repetitive kinds of actions performed on multiple objects 29

28. Vending machines Describe the conceptual model underlying the two vending machines Which is easiest to use? 30

29. Conversing • Like having a conversation with another human • Differs from instructing in that it more like two-way communication, with the system acting like a partner rather than a machine that obeys orders • Ranges from simple voice recognition menu-driven systems to more complex ‘natural language’ dialogues • Examples include search engines, advice-giving systems and help systems 31

30. Pros and cons of conversational model • Allows users, especially novices and technophobes, to interact with the system in a way that is familiar • makes them feel comfortable, at ease and less scared • Misunderstandings can arise when the system does not know how to parse what the user says • e.g. child types into a search engine, that uses natural language the question: “How many legs does a centipede have?” and the system responds: 32

31. 33

32. Manipulating • Exploit’s users’ knowledge of how they move and manipulate in the physical world • Virtual objects can be manipulated by moving, selecting, opening, and closing them • Tagged physical objects (e.g., bricks, blocks) that are manipulated in a physical world (e.g., placed on a surface) can result in other physical and digital events 34

33. Manipulatives (PicoCrickets) 35

34. Direct manipulation • Shneiderman (1983) coined the term Direct Manipulation • Came from his fascination with computer games at the time • Proposes that digital objects be designed so they can be interacted with analogous to how physical objects are manipulated • Assumes that direct manipulation interfaces enable users to feel that they are directly controlling the digital objects 36

35. Core principles of DM • Continuous representation of objects and actions of interest • Physical actions and button pressing instead of issuing commands with complex syntax • Rapid reversible actions with immediate feedback on object of interest 37

36. Why are DM interfaces so enjoyable? • Novices can learn the basic functionality quickly • Experienced users can work extremely rapidly to carry out a wide range of tasks, even defining new functions • Intermittent users can retain operational concepts over time • Error messages rarely needed • Users can immediately see if their actions are furthering their goals and if not do something else • Users experience less anxiety • Users gain confidence and mastery and feel in control 38

37. What are the disadvantages with DM? • Some people take the metaphor of direct manipulation too literally • Not all tasks can be described by objects and not all actions can be done directly • Some tasks are better achieved through delegating rather than manipulating • e.g., spell checking • Moving a mouse around the screen can be slower than pressing function keys to do same actions 39

38. Exploring • Involves users moving through virtual or physical environments • Examples include: • 3D desktop virtual worlds where people navigate using mouse around different parts to socialize (e.g., Second Life) • CAVEs where users navigate by moving whole body, arms, and head • physical context aware worlds, embedded with sensors, that present digital information to users at appropriate places and times 40

39. A virtual world 41

40. A CAVE 42

41. Theories, models and frameworks • Are used to inform and inspire design • A theory is a well-substantiated explanation of some aspect of a phenomenon • A model is a simplification of some aspect of human–computer interaction intended to make it easier for designers to predict and evaluate alternative designs • A framework is a set of interrelated concepts and/or a set of specific questions 43

42. Main differences • Theories tend to be comprehensive, explaining human–computer interactions • Models tend to simplify some aspect of human–computer interaction • Frameworks tend to be prescriptive, providing designers with concepts, questions, and principles to consider 44

43. Summary points • Need to have a good understanding of the problem space • specifying what it is you are doing, why, and how it will support users in the way intended • A conceptual model is a high-level description of a product • what users can do with it and the concepts they need to understand how to interact with it • Decisions about conceptual design should be made before commencing any physical design • Interface metaphors are commonly used as part of a conceptual model 45

44. Summary points • Interaction types (e.g., conversing, instructing) provide a way of thinking about how best to support the activities users will be doing when using a product or service • Theories, models, and frameworks provide another way of framing and informing design and research 46