Instructor: Franz J. Kurfess
Computer Science Dept.
Cal Poly San Luis Obispo
FJK 2005-2011 1

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

• 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

• 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

• 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

8

– 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

• 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

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

21

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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?
30

• 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 menudriven systems to more complex ‘natural language’ dialogues
• Examples include search engines, advicegiving systems and help systems
31

• 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

• 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

35

• 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

• 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

• 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

• 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

• 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

41

42

• 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

• 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

• 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

• 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