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

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

Interaction Design

Rapid prototyping process Evaluate Refine Design Specification Identify needs/ establish requirements Build Prototype 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

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 –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 UsersTask / Work Task / Work context Identifying Needs Requirements Design specification Refine and Revise

Rapid Prototyping + Waterfall Update Requirements Choose Functionality Build Prototype Initial Requirements Write Specification Create Software Write Test Plan

Evaluate Refine Design Specification Identify needs/ establish requirements Build Prototype 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=100 HEIGHT=50 >

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 eployment/applet/index.htmlhttp://java.sun.com/docs/books/tutorial/d eployment/applet/index.html

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 info on windshield as you drive – can be 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

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

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?

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 s - 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 Manager Programs->MS Office->…Tools->Picture Manager ICDL Book Reader 1-comic.jnlp Dr. Dobb’s eMagazine reader 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 ( 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