Interaction%20Design%20and%20Final%20Exam%20Review

1
Interaction DesignandFinal Exam Review

• Session 13
• LBSC 790 / INFM 718B
• Building the Human-Computer Interface

2
Agenda

• Questions
• Interaction Design
• Final Exam Review
• Applets (time permitting)

3
Interaction Design
4
Rapid prototyping process
Start
Identify needs/ establish requirements
Refine Design Specification
Evaluate
Build Prototype
Final specification
Exemplifies a user-centered design approach
5
Interaction Design

• Play to the strengths of machine and human
• Place the locus of control with the user
• Make it easy to do the right thing
• Support multiple interaction styles

6
Conceptual models

• How the system will appear to users
• A conceptual model is a high level description
  of
• the proposed system in terms of a set of
  integrated ideas and concepts about what it
  should do, behave and look like, that will be
  understandable by the users in the manner
  intended

7
Conceptual model and User understanding

• Design Model
• How designer thinks system should work
• System Image
• How system works
• User Model
• How user thinks system works
• Ideal all map
• Poor system image poor understanding

Users Model
Design Model
DESIGNER
USER
SYSTEM
System Image
8
Conceptual models based on activities

• Giving instructions
• issuing commands using keyboard and function keys
  and selecting options via menus
• Conversing
• interacting with the system as if having a
  conversation
• Manipulating and navigating
• acting on objects and interacting with virtual
  objects
• Exploring and browsing
• finding out and learning things

9
Conceptual models based on objects

• Usually based on an analogy with something in the
  physical world
• Capitalize on familiarity
• Understanding of
• Kinds of activities application would support
• Problems with current tools trying to achieve
  these activities
• Examples include books, tools, vehicles
• International Childrens Digital Library

10
http//www.icdlbooks.org
11
Interface Metaphors

• Interface designed to be similar to a physical
  entity but also has own properties
• e.g. desktop metaphor, web portals
• Can be based on activity, object or a combination
  of both
• Exploit users 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
• Break conventional rules
• Too constraining, Can limit designers
• imagination, Transfer bad parts from
• existing designs

12
Conceptual model and User understanding

• Design Model
• How designer thinks system should work
• System Image
• How system works
• User Model
• How user thinks system works
• Ideal all map
• Poor system image poor understanding

Users Model
Design Model
DESIGNER
USER
SYSTEM
System Image
13
Mental models

• Users develop an understanding of a system
  through learning using it
• Knowledge is often described as a mental model
• How to use the system (what to do next)
• What to do with unfamiliar systems or unexpected
  situations (how the system works)
• People make inferences using mental models of how
  to carry out tasks

14
Mental models

• Craik (1943) described mental models as internal
  constructions of some aspect of the external
  world enabling predictions to be made
• Involves unconscious and conscious processes,
  where images and analogies are activated
• Deep versus shallow models (e.g. how to drive a
  car and how it works)

How deep is your mental modal of a VCR remote
control?
15
Everyday reasoning mental models

• You arrive home on a cold winters night to a
  cold house. How do you get the house to warm up
  as quickly as possible? Set the thermostat to be
  at its highest or to the desired temperature?
• You arrive home starving hungry. You look in the
  fridge and find all that is left is an uncooked
  pizza. You have an electric oven. Do you warm it
  up to 375 degrees first and then put it in (as
  specified by the instructions) or turn the oven
  up higher to try to warm it up quicker?

16
Heating up a room or oven that is
thermostat-controlled

• Many people have erroneous mental models
  (Kempton, 1996)
• Why?
• General valve theory, where more is more
  principle is generalised to different settings
  (e.g. gas pedal, gas cooker, tap, radio volume)
• But Thermostats are based on model of on-off
  switch
• Core abstractions about how things work

17
Heating up a room or oven that is
thermostat-controlled

• Same is often true for understanding how
  interactive devices and computers work
• Poor, often incomplete, easily confusable, based
  on inappropriate analogies and superstition
  (Norman, 1983)
• e.g. frozen cursor/screen - most people will bash
  all manner of keys

18
Design principle of transparency
Useful feedback Easy to understand
Intuitive to use Clear, easy to follow
instructions Appropriate online help Context
sensitive guidance when stuck NOT literally
Help users develop appropriate mental models
19
Key points

• Fundamental aspect of interaction design is to
  develop a conceptual model
• Interaction modes and interface metaphors provide
  a structure for thinking about which kind of
  conceptual model to develop
• Interaction styles are specific kinds of
  interfaces that are instantiated as part of the
  conceptual model
• Interaction paradigms can also be used to inform
  the design of the conceptual model
• Transparency helps users develop mental models

20
Final Exam Review
21
Learning Objectives

• Understand the role of prototyping and
  implementation in the software development
  process
• Learn and apply a rapid prototyping methodology
• Become familiar with a current user interface
  development language (Java) and an integrated
  development environment (Eclipse)

22
Strategies to Support Learning

• Classroom sessions focus on the big picture
• Why we focus where we do
• How it fits together
• Books to provide the details, both to support
  understanding, and as a ready reference
• Progressively more complex hands-on experience
  (exercises, homework, project)
• Assessment to help focus the effort
• Homework, project, exam

23
Exam Design

• Goal assess important objectives that the
  homework and the project cannot cover
• Format
• In class, 2 hours (Thurs, Dec 14, 600pm, HBK
  2119)
• Alternative Take-home Dec 7 - 14
• Individual effort (no communication with anyone)
• Open book (use anything except another person)
• Three questions (two essay, one programming)
• Exams from prior semesters are on the Web

24
Question 1 Programming

• Goal assess a minimal level of individual
  programming expertise that would be allow full
  participation in a project team.
• Format build a simple user interface in Java
• What you need to know
• Basic Java programming (homework-level)
• Using standard Java GUI components
• Simple GUI event handling

25
Preparing for Question 1

• Try a programming question from a prior exam
• Have a classmate create a sample problem for you
• Make a Web page with a few standard references
• Sun Java tutorial section on swing GUI components
• Sun Java tutorial section on event handling
• Three different working examples

26
Questions 2 3 Short Essay

• Goal assess individual understanding of the
  process by which user interfaces are made
• Format Short typed essay (1-3 pages)
• What you need to know
• Key concepts from throughout the course (except
  programming)

27
Preparing for Questions 2 3

• Flip through all the slides
• Concentrate on the big picture and the
  supporting details)
• Time yourself answering a prior exam question
• Shoot for at most 45 minutes

28
Some Big Picture Questions

• Why is building good GUIs hard?
• How does rapid prototyping help?
• What issues are important in the management of
  the software design process?
• What is the role of the parts of UML that we have
  discussed in this process?
• How do Java examples we have used in class
  illustrate interface design and interaction
  design?

29
Major Themes

• Software development process
• Rapid prototyping
• Specification
• Implementation Evaluation
• Java
• Structured, modular, O-O programming
• GUIs
• Algorithms, data structures
• Testing debugging
• UML
• Functional requirements
• Objects / structure
• Behavior

30
From needs to specification
Design specification
Refine and Revise
Requirements
Task / Work context
Identifying Needs
Users
Task / Work
31
Rapid Prototyping Waterfall
Update Requirements
Write Specification
Choose Functionality
Initial Requirements
Create Software
Build Prototype
Write Test Plan
32
Start
Identify needs/ establish requirements
Refine Design Specification
Evaluate
Build Prototype
Final specification
33
Objectives of Rapid Prototyping

• Quality
• Build systems that satisfy the real requirements
  by focusing on requirements discovery
• Affordability
• Minimize development costs by building the right
  thing the first time
• Schedule
• Minimize schedule risk by reducing the chance of
  requirements discovery during coding

34
Different kinds of requirements

• Functional (capabilities)
• What the system should do
• Historically the main focus of requirements
  activities
• Non-functional (constraints) memory size,
  response time...
• data
• What kinds of data need to be stored?
• How will they be stored (e.g., database)?

35
Unified Modeling Language

• Systems can get more complex than people can
  comprehend all at once
• Key idea Progressive refinement
• Carve the problem into pieces
• Carve each piece into smaller pieces
• When pieces are small enough, code them
• UML provides a formalism for doing this
• But it does not provide the process

36
Getting to the Object Structure

• Capturing the big picture
• Use case diagram (interactions with the world)
• Narrative
• Scenarios (examples to provoke thinking)
• Designing the object structure
• Class diagram (entity-relationship diagram)
• Object diagram (used to show examples)

37
Specifying Behavior

• Represent a candidate workflow
• Activity diagram (a flowchart)
• Represent object interactions for a scenario
• Collaboration diagram (object-based depiction)
• Sequence diagram (time-based depiction)
• Represent event-object interactions
• Statechart diagram (a finite state machine)

38
Good Uses for UML

• Focusing your attention
• Design from the outside in
• Representing partial understanding
• Says what you know, silent otherwise
• Validate that understanding
• Structuring communication with stakeholders

39
Avoiding UML Pitfalls

• Dont sweat the notation too much
• The key is to be clear about what you mean!
• Dont try to make massive conceptual leaps
• Leverage abstraction encapsulation
• Dont get to attached to your first design
• Goal is to find weaknesses in your understanding

40
Applets
41
A simple example

• import javax.swing.
• import java.applet.Applet
• public class HelloWorld extends Applet
• public void init()
• add(new JLabel("Hello, World!"))

42
Embedding Applets in HTML

• ltAPPLET
• CODEHelloWorld.class
• WIDTH100
• HEIGHT50
• gt
• lt/APPLETgt

43
Applets vs. Applications

• Derived from Applet/JApplet
• Lifecycle methods - instead of main()
• init()
• start()
• stop()
• destroy()
• Add components to primary window
• add()
• Restricted environment

44
Resources

• http//java.sun.com/docs/books/tutorial/deployment
  /applet/index.html
• http//java.sun.com/applets/

45
Coming up

• Thursday, Dec 7
• Project presentations
• Thursday, Dec 14
• Final Exam

46
(No Transcript)
47
Interaction Paradigms

• Philosophy or way of thinking about design
• Another form of inspiration for conceptual models
• From the desktop to ubiquitous computing
  (embedded in the environment)
• Pervasive computing
• Wearable computing
• Tangible bits, augmented reality
• Attentive environments
• Transparent computing
• and many more.

48
Two examples BlueEyes (IBM) and Cooltown (HP)

• Visionary approaches for developing novel
  conceptual paradigms

BlueEyes Tracks your movements and facial
expressions and responds accordingly
Cooltown Offers additional info on windshield as
you drive can be distracting!
49
Outline for second half

• What is cognition?
• What are users good and bad at?
• Mental models
• External cognition
• Using this understanding to inform system design

50
Why do we need to understand users?

• Interacting with technology is cognitive
• We need to take into account cognitive processes
  involved and cognitive limitations of users
• We can apply knowledge about what users can and
  cannot be expected to do
• Identify and explain the nature and causes of
  problems users encounter
• Supply theories, modelling tools, guidance and
  methods that can lead to the design of better
  interactive products

51
1. Bringing cognitive psychology knowledge to HCI
52
Core cognitive aspects

• Attention
• Perception and recognition
• Memory
• Reading, speaking and listening
• Problem-solving, planning, reasoning and
  decision-making, learning
• Here we focus on attention, perception
  recognition, memory

53
Attention

• Selecting things to concentrate on from the mass
  around us, at a point in time
• Focussed and divided attention enables us to be
  selective in terms of the mass of competing
  stimuli but limits our ability to keep track of
  all events
• Information at the interface should be structured
  to capture users attention, e.g. use perceptual
  boundaries (windows), colour, reverse video,
  sound and flashing lights

54
Design implications for attention

• Make information salient when it needs attending
  to
• Use techniques that make things stand out like
  colour, ordering, spacing, underlining,
  sequencing and animation
• Avoid cluttering the interface - follow the
  google.com example of crisp, simple design
• Avoid using too much because the software allows
  it

55
An example of over-use of graphics
56
Perception and recognition

• How information is acquired from the world and
  transformed into experiences
• Obvious implication is to design representations
  that are readily perceivable, e.g.
• Text should be legible
• Icons should be easy to distinguish and read

57
Which is easiest to read and why?
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
58
Memory

• Involves encoding and recalling knowledge and
  acting appropriately
• We dont remember everything - involves filtering
  and processing
• Context is important in affecting our memory
• We recognize things much better than being able
  to recall things
• The rise of the GUI over command-based interfaces
• Better at remembering images than words
• The use of icons rather than names

59
Design implications for search interfaces

• Memory involves 2 processes
• recall-directed and recognition-based scanning
• Search systems should be designed to optimize
  both kinds of memory processes
• Facilitate existing strategies and assist users
  when they get stuck
• Search result visualization design principles
• Provide categorized overviews
• Organize by meaningful, stable categories

60
(No Transcript)
61
(No Transcript)
62
Experimental conditions
63
External cognition

• Concerned with explaining how we interact with
  external representations (e.g. maps, notes,
  diagrams)
• What are the cognitive benefits and what
  processes involved
• How they extend our cognition
• What computer-based representations can we
  develop to help even more?

64
Externalizing to reduce memory load

• Diaries, reminders,calendars, notes, shopping
  lists, to-do lists - written to remind us of what
  to do
• Post-its, piles, marked emails - where placed
  indicates priority of what to do
• External representations
• Remind us that we need to do something (e.g. to
  buy something for Valentines day)
• Remind us of what to do (e.g. buy flowers)
• Remind us when to do something (e.g. deliver them
  on Valentines day!)

65
Computational offloading

• When a tool is used in conjunction with an
  external representation to carry out a
  computation (e.g. pen and paper)
• Can you solve this a) in your head, b) on a piece
  of paper, and c) with a calculator?
• 234 x 456 ??
• Which is easiest and why?

66
Design implication

• Provide external representations at the interface
  that reduce memory load and facilitate
  computational offloading

e.g. Information visualizations have been
designed to allow people to make sense and rapid
decisions about masses of data
67
Informing design based on our understanding of
users

• How can we use knowledge about users to inform
  system design?
• Provide guidance and tools
• Design principles and concepts
• Design rules
• Provide analytic tools
• Methods for evaluating usability

68
Mental models system design

• Notion of mental models has been used as a basis
  for conceptual models
• If you can understand how people develop mental
  models then can help them develop more
  appropriate mental models of system functionality

69
Conceptual model and User understanding

• Design Model
• How designer thinks system should work
• System Image
• How system works
• User Model
• How user thinks system works
• Ideal all map
• Poor system image poor understanding

Users Model
Design Model
DESIGNER
USER
SYSTEM
System Image
70
Key points

• Cognition involves many processes including
  attention, memory, perception and learning
• The way an interface is designed can greatly
  affect how well users can perceive, attend, learn
  and remember how to do their tasks
• The conceptual framework of mental models and
  external cognition provide ways of
  understanding how and why people interact with
  products, which can lead to thinking about how to
  design better products

71
(No Transcript)
72
Suggested applications

• MS Office Picture Manager
• Programs-gtMS Office-gtTools-gtPicture Manager
• ICDL Book Reader
• www.childrenslibrary.org/library/books/readers/hr
  daxlf_00320001-comic.jnlp
• Dr. Dobbs eMagazine reader
• www.nxtbook.com/nxtbooks/cmp/ddj-ravenflow2
• PDA applications

73
(No Transcript)
74
Interaction

• Drill down
• Mouseover tool tips, menu expansion
• Illustration
• Change over time, icon behavior (on mouseover)
• Display space reuse
• Ticker tape, slide show
• Visible transitions
• 3-D visualization
• E-archivarius demo
• Attention management (once!)

75
(No Transcript)
76
Multiple Interaction Styles

• Point-and-click
• Keyboard shortcuts
• Command line
• Spoken dialog

77
Interactive Voice Response Systems

• Operate without graphical interfaces
• Hands-free operation (e.g., driving)
• Telephone access
• Built on three technologies
• Speech recognition (input)
• Text-to-speech (output)
• Dialog management (control)
• Example TellMe (1-800-555-TELL)

78
(No Transcript)
79
Six design principles

• Visibility
• Feedback
• Constraints
• Rules
• Layout
• Color
• Size

• Mapping
• Consistency
• Affordance

Don Norman, The Design of Everyday Things (1988)
80
Usability principles(Nielsen 2001)

• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Help users recognize, diagnose and recover from
  errors
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help and documentation

81
(No Transcript)