User-Centered Design and Development

Instructor: Franz J. Kurfess Computer Science Dept.

Cal Poly San Luis Obispo FJK 2005-2011 1

Chapter Overview

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

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

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

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

Understanding and conceptualizing interaction

8

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

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

An example

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

11

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

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

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

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

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

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

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

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

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

The Star interface

21

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

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

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

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

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

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

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

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

Describe the conceptual model underlying the two vending machines Which is easiest to use?

Vending machines

30

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

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

33

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

Manipulatives (PicoCrickets)

35

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

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

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

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

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

A virtual world

41

A CAVE

42

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

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

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

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