Interaction Design and Final Exam Review Session 13 LBSC 790 / INFM 718B Building the Human-Computer Interface.

Interaction Designand

Final Exam Review

Session 13LBSC 790 / INFM 718B

Building the Human-Computer Interface

Agenda

• Questions

• Interaction Design

• Final Exam Review

• Applets (time permitting)

Interaction Design

Rapid prototyping process

Evaluate

RefineDesign

Specification

Identify needs/ establish

requirements

BuildPrototype

Final specification

Exemplifies a user-centered design approach

Start

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

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”

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

Design Model User’s Model

System Image

SYSTEM

DESIGNER USER

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

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 Children’s Digital Library

http://www.icdlbooks.org

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 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

• Break conventional rules• Too constraining, Can limit designer’s

imagination, Transfer bad parts from existing designs

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

Design Model User’s Model

System Image

SYSTEM

DESIGNER USER

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

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?

Everyday reasoning & mental models

You arrive home on a cold winter’s 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?

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

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

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

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

Final Exam Review

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)

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

Exam Design

• Goal: assess important objectives that the homework and the project cannot cover

• Format:– In class, 2 hours (Thurs, Dec 14, 6:00pm, 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

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

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

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)

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

Some “Big Picture” Questions

• Why is building good GUI’s 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?

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

From needs to specification

Users Task / Work

Task / Work context

Identifying Needs

Requirements

Design specification

RefineandRevise

Rapid Prototyping + Waterfall

UpdateRequirements

ChooseFunctionality

BuildPrototype

InitialRequirements

WriteSpecification

CreateSoftware

WriteTest Plan

Evaluate

RefineDesign

Specification

Identify needs/ establish

requirements

BuildPrototype

Final specification

Start

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

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)?

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

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)

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”)

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

Avoiding UML Pitfalls• Don’t sweat the notation too much

– The key is to be clear about what you mean!

• Don’t try to make massive conceptual leaps– Leverage abstraction encapsulation

• Don’t get to attached to your first design– Goal is to find weaknesses in your

understanding

Applets

A simple example

import javax.swing.*;import java.applet.Applet;

public class HelloWorld extends Applet {

public void init() { add(new JLabel("Hello, World!")); }}

Embedding Applets in HTML

<APPLET CODE=HelloWorld.class WIDTH=100HEIGHT=50

></APPLET>

Applets vs. Applications

• Derived from Applet/JApplet• Lifecycle methods - instead of main()

– init()– start()– stop()– destroy()

• Add components to primary window– add()

• Restricted environment

Resources

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

• http://java.sun.com/applets/

Coming up• Thursday, Dec 7

– Project presentations

• Thursday, Dec 14– Final Exam

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….

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 infoon windshield as you drive – canbe distracting!

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

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

What goes on in the mind?

perceiving..thinking..remembering..learning..

understanding otherstalking with othersmanipulating others

planning a mealimagining a trippaintingwritingcomposing

making decisionssolving problemsdaydreaming...

1. Bringing cognitive psychology knowledge to

HCI

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

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

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

An example of over-use of graphics

Our Situation

State the bad news

Be clear, don’t try to obscure thesituation

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

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?

Memory

• Involves encoding and recalling knowledge and acting appropriately

• We don’t 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

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

Experimental conditions

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?

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 Valentine’s day)– Remind us of what to do (e.g. buy flowers)– Remind us when to do something (e.g. deliver

them on Valentine’s day!)

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?

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

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

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

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

Design Model User’s Model

System Image

SYSTEM

DESIGNER USER

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

Suggested applications

• MS Office Picture ManagerPrograms->MS Office->…Tools->Picture Manager

• ICDL Book Reader

www.childrenslibrary.org/library/books/readers/hrdaxlf_00320001-comic.jnlp

• Dr. Dobb’s eMagazine readerwww.nxtbook.com/nxtbooks/cmp/ddj-ravenflow2

• PDA applications

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!)

Multiple Interaction Styles

• Point-and-click

• Keyboard shortcuts

• Command line

• Spoken dialog

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)

Six design principles

• Visibility• Feedback• Constraints

• Rules– Layout– Color– Size

• Mapping• Consistency• Affordance

Don Norman, The Design of Everyday Things (1988)

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