Human-Computer Interaction Lecture 4: Inference-based approaches.

Slides:



Advertisements
Similar presentations
Design, prototyping and construction
Advertisements

CS0004: Introduction to Programming Visual Studio 2010 and Controls.
Rapid Prototyping Dimensions and terminology Non-computer methods
Prototypes Low-fidelity prototypes design.org/encyclopedia/contextual_design.html Heim, Chapter 5.3 Lecture 9 Physical Design.
1 Lecture 4: Sketching and Prototyping Brad Myers / / : Introduction to Human Computer Interaction for Technology Executives Fall,
G063 - The Model Human Processor. Learning Objective: describe the user interface designers tool known as the ‘Model Human Processor', describe how the.
ISE554 Human Computer Interaction Design 2.3 Principled Methods for Design.
Human Computer Interaction
Prototyping Techniques
Cognitive modelling (Cognitive Science MSc.) Fintan Costello
1 CA203 Presentation Application Presentations by using PowerPoint Lecture # 1 By Tariq Ibn Aziz Dammam Community college.
Prototyping By Greg Rogers. Agenda For Today  What is a prototype  Why prototype  What to prototype.
ISP 666 Week 6 Prototyping. Design a Solution From task to system From abstract to concrete Task Models UI Presentation evaluation Conceptual Model System.
Prototyping Professor: Tapan Parikh TA: Eun Kyoung Choe
Using Powerpoint to Create Interface Prototype Copy & Paste Interface Designs –Use Screen Capture to Copy Existing Interface –“Print Screen / SysRq” Button:
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
Course Wrap-Up IS 485, Professor Matt Thatcher. 2 C.J. Minard ( )
2/23/991 Low-fidelity Prototyping & Storyboarding SIMS 213, Spring ‘99 Professor James Landay, EECS Dept. February 23, 1999.
Introduction to HCI Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development January 21, 1999.
What is a prototype? A prototype is a small scale model of your larger product. Can be a physical object, or a simple software program. Many physical.
User Interface Design Chapter 11. Objectives  Understand several fundamental user interface (UI) design principles.  Understand the process of UI design.
Graphical User Interfaces A Quick Outlook. Interface Many methods to create and “interface” with the user 2 most common interface methods: – Console –
May Melissa Albo #1 Sagrario Casillas #4 Angela Durán #8 Daniela Martínez #16.
How to annotate an X-ray in the client file PURPOSE - To mark up x-rays or other images after they are loaded to the client file PREREQUISITES - Basic.
Designing User Experience (UX) This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.Creative Commons.
Chapter 5 Models and theories 1. Cognitive modeling If we can build a model of how a user works, then we can predict how s/he will interact with the interface.
1CS480: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 5: Scenarios.
CIS—100 Chapter 9—PowerPoint 1. The PowerPoint User Interface 2 There is a tall band across the screen that contains many, very visual commands arranged.
1. Low Fidelity Prototyping and Wizard of Oz Studies Because they are easy to create and modify, low fidelity prototypes commonly provide designers with.
1 Low-fidelity Prototyping. 2 Interface Hall of Shame or Fame? PowerBuilder List of objects with associated properties.
Computer –the machine the program runs on –often split between clients & servers Human-Computer Interaction (HCI) Human –the end-user of a program –the.
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
Overview Prototyping and construction Conceptual design
Design, prototyping and construction CSSE371 Steve Chenoweth and Chandan Rupakheti (Chapter 11- Interaction Design Text)
UML & Prototyping. What is a prototype? A prototype is a small-scale model. It can be (among other things): a series of screen sketches a storyboard,
HCI – Prototyping. Why Prototype?  Prototyping is a well understood and used technique in design engineering where products are tested via a model prototype.
PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd Edition Copyright © 2009 John Wiley & Sons, Inc. All rights.
Prototyping. What is a prototype? In other design fields a prototype is a small- scale model: a miniature car a miniature building or town.
Wizard of Oz Prototyping + Making Video Scenarios HCC 729 4/17/14.
Template for Applet Design stage. General Instructions: The template shown is an example. Please add more slides wherever required. Include look of the.
RIGHT Mouse Button Formatting Cut Copy Paste Save LEFT Mouse Button MAIN BUTTON Single clicks Double clicks Drag Highlight.
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
Prototyping 1. Design Document How express your design ideas. How express your design ideas. Key notions Key notions Cheap, FastCheap, Fast Flexibility.
Video Editing & System Review October 5, 2006 Benjamin Hammel Senior, IST October 5, 2006 Benjamin Hammel Senior, IST
1 Paper (low-fidelity) Prototypes. 2 When we are designing When we are thinking about design We are visualizing the interface inside our head (imaginary)
Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,
line.net/ okpop.com/bar elythereflashin dex.html.
Begin Class with More Studio. Introduction to Prototyping.
Main Computer Components
Task Analysis Lecture # 8 Gabriel Spitz 1. Key Points  Task Analysis is a critical element of UI Design  It describes what is a user doing or will.
Task Analysis Lecture # 8 Gabriel Spitz 1. Key Points  Task Analysis is a critical element of UI Design  It specifies what functions the user will need.
Low-fidelity Prototyping. Outline Low-fidelity prototyping Wizard of OZ technique Informal user interfaces Sketching user interfaces electronically Informal.
Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.
Team Skill 2 Understanding User and Stakeholder Needs Storyboarding (13)
Virtual University - Human Computer Interaction 1 © Imran Hussain | UMT Imran Hussain University of Management and Technology (UMT) Lecture 36 Behavior.
Design, prototyping and construction(Chapter 11).
Prototyping Creation of concrete but partial implementations of a system design to explore usability issues.
HCDE 418 Monday, February 11 Prototyping. Today Announcements – 5 min P2 debrief – 5 min Lecture – 40 min Break – 5 min Prototyping tools demos – 30 min.
Pasewark & Pasewark Microsoft Office XP: Introductory Course 1 INTRODUCTORY MICROSOFT WORD Lesson 2 – Basic Editing.
Digital Media & Interaction Design LECTURE 4+5. Lecture 4+5 Draw requirement + Prototyping.
Lecture 2 Supplement - Prototyping
Sampath Jayarathna Cal Poly Pomona
Prototyping & Design CS 352.
Chapter 6. Data Collection in a Wizard-of-Oz Experiment in Reinforcement Learning for Adaptive Dialogue Systems by: Rieser & Lemon. Course: Autonomous.
Wrapping up prototyping
Prototyping.
Introduction to Prototyping
Design, prototyping and construction
CS 522: Human-Computer Interaction Lab: Formative Evaluation
Design, prototyping and construction
Presentation transcript:

Human-Computer Interaction Lecture 4: Inference-based approaches

WHAT MAKES SYSTEMS ‘INTUITIVE’?

From Part 1a Software Design …

outputinput output The human operator as a black box User Computer keypresses & gestures visual representation

long term memory working memory vision motion control problem solving input output

What is going on inside that thing? How can I get it to do what I want?

What is going on inside that thing? How can I get it to do what I want? ?

MENTAL MODELS

Mental models Study of the mental representations used for everyday problem-solving by ordinary people Can be more or less structured: – From narrative descriptions in a user persona – To AI-style cognitive models of state-space planning The mental model of the user is not the mental model of the designer … – but can be influenced by the designer.

User’s model

Designer’s model? Wiring closet Toilets Kitchen Stairs Plantroom

Designer’s model Dry Wet

What happened? Data discarded? Translation? Override? Two clipboards? Layers? What happened? Data discarded? Translation? Override? Two clipboards? Layers? Solving problems with mental models Copy in Illustrator Paste in Photoshop Copy in Illustrator Paste in Word Can’t edit text Can edit text

Think-aloud studies Attempt to study a user’s mental model directly in a controlled task – Originally for research into “problem-solving” Subject talks continuously while performing task. – Transcribed as a verbal protocol for detailed study Also used to “evaluate” software when no alternative designs are available Or even when you don’t have any software at all! – (how?)

Pay no attention to the man behind the curtain! ‘Wizard of Oz’ studies

Wizard-of-Oz implementation Originally invented to evaluate artificially intelligent dialogue systems – User typed on a real computer, but computer answers were simulated by a ‘man behind the curtain’ With a paper prototype, it’s not necessary to hide behind a curtain! – Just ask the user to ‘click’ by pointing on your paper prototype – Simulate the system response by sticking on another Post- it note ‘window’, or replacing the piece of paper Paper can be more or less ‘low-fidelity’

Low-fidelity prototypes

Computer tools for lo-fi prototyping Some of the WoZ functions can use a computer: – e.g. DENIM from University of Washington – Take photographs of your paper sketches – Display the rough pencil drawings on the screen – Define control areas and ‘buttons’ – Simulation tool changes to other sketch screens in response to user actions Variants – SILK – ‘sketch’ by drawing on the screen itself – Or just load sequence of photos on an iPod and flick through them The ‘sketchy’ appearance helps users comment

DENIM

Storyboard or ‘click-through’ prototypes Doesn’t allow user interaction, but does help them imagine what the system will be like to use. PowerPoint is the most commonly used tool – Load a series of screen mockups – Move the mouse pointer over the screen as though you are controlling it – Point at a button and click – (but of course, Powerpoint will always go to the next slide, regardless of where the pointer is when you click)

USER MODELS (≠ MENTAL MODELS)

What is going on inside that thing? How can I get it to do what I want?

(BAYESIAN) USER MODELS

A probabilistic view of user interaction Machine: – I know how to do several things. – I wonder which one the user wants me to do? User: – This machine can do a whole bunch of stuff. – What is most likely to make it do the right stuff? Machine: – I think the user has made a mistake User: – I think the machine has made a mistake

Bayes theorem (for Bayesian inference) H: Hypothesis E: Evidence Posterior probability of Hypothesis after taking new Evidence into account Prior inferred probability of this Hypothesis before new Evidence became available. If Hypothesis is true, how likely is it that we would see this Evidence? What is the probability of seeing E, under all possible hypotheses? P(H|E) = P(E|H) P(E) P(H)

Bayesian inference inference of user intention D: User wants to Delete all their files R: User has typed ‘rm –rf’ Probability that user wants to delete all files, given that they just typed ‘rm –rf’ (Prior) probability that user wanted to delete all files before we saw this. If user does want to delete all files, how likely is it that they would type ‘rm –rf’? What is the probability user would type ‘rm –rf’, under all possible hypotheses? P(D|R) = P(R|D) P(R) P(D)

The case of Clippy

Flash Fill: programming by example

‘Semantic pointing’

Dasher as a user model