IAT 334 Interface Design Chris Shaw

IAT 334 Interface Design Chris Shaw
______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | May 18, 2010 IAT 334

Exam Materials Slides Shneiderman & Plaisant Chapters 1-8
Programming materials Supplemantary: Glassner Book Chapters 1-5, Chapters 10.2, On Sakai: Password: GlassnerIAT334 May 18, 2010 IAT 334

Why We Are Here Look at human factors that affect software design and development Central Topic: User interface design May 18, 2010 IAT 334

HCI What happens when a human and a computer get together to perform a task Task Write a document Plan a budget Design a presentation Play a video game Not a task.. Goof off (obviously) May 18, 2010 IAT 334

Why is this important? Computers (in one way or another) affect every person in society Increasing % use computers in work, at home in the road… Product success depends on ease of use May 18, 2010 IAT 334

Course Aims Consciousness raising for you Design critic Eg. Don Norman
“The Design of Everyday Things” Doors Handles afford various opening method Design critic May 18, 2010 IAT 334

Goals of HCI (Shneiderman & Plaisant Chap1)
Allow users to carry out tasks Safely Effectively Efficiently Enjoyably May 18, 2010 IAT 334

Goals of System Engineering
Functionality Tasks and sub-tasks to be carried out Reliability Maintaining trust in the system Standardization, integration, consistency and portability Schedules and budgets Adhering to timelines and expense Human factors principles and testing reduces costs May 18, 2010 IAT 334

Usability Five Measurable Goals of UI Design Combination of
Ease of learning High speed of user task performance Low user error rate Subjective user satisfaction User retention over time May 18, 2010 IAT 334

Interests in Human Factors in Design
Life-critical systems: air traffic control, emergency, power utilities etc. high reliability, error-free performance, lengthy training for systems, subjective satisfaction less of an issue Industrial and commercial uses: banking, inventory management, airline and hotel reservations, etc. low costs is critical over reliability, ease of learning, errors calculated against costs, subjective satisfaction of modest importance May 18, 2010 IAT 334

Interests in Human Factors in Design
Office, home, entertainment: productivity and entertainment applications ease of learning, low error rates, subjective satisfaction are paramount since use is discretionary and competition is fierce. Range of types of users from novice to expert. Exploratory, creative, and cooperative: web-based, decision-making, design-support, collaborative work, etc. users knowledgeable in domain but vary in computer skills, direct-manipulation using familiar routines and gestures work best, difficult systems to design and evaluate. Sept14, 2009 IAT 334

Accommodating Human Diversity
Personality Differences Physical Abilities and Workplaces Users with Disabilities Cognitive and Perceptual Abilities Elderly Users Cultural and International Diversity May 18, 2010 IAT 334

Key Historical Event Design of the first Mac 1983-1984
“The computer for the rest of us” May 18, 2010 IAT 334

Improving Interfaces Know the User! Physical abilities
Cognitive abilities Personality differences Skill differences Cultural diversity Motivation Special needs May 18, 2010 IAT 334

Two Crucial Errors Assume all users are alike
Assume all users are like the designer May 18, 2010 IAT 334

Another Crucial Error Have the user design it!
Users bring vital knowledge to design: They know a lot about the problem They know a lot about the current tools They typically know very little about design May 18, 2010 IAT 334

UI Design/Develop Process
Analyze user’s goals Create design alternatives Analyze designs Implement prototype Test Refine Design Implement Evaluate May 18, 2010 IAT 334

Evaluation Things we can measure Time to learn Speed of performance
Rate of errors by user Retention over time Subjective satisfaction May 18, 2010 IAT 334

Interfaces in the World
VCR Mouse Phone Copier Car Airline reservation Air traffic control May 18, 2010 IAT 334

History of HCI ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | May 18, 2010 IAT 334

Ivan Sutherland SketchPad - ‘63 PhD thesis at MIT
Hierarchy - pictures & subpictures Master picture with instances Constraints Icons Copying Light pen as input device Recursive operations May 18, 2010 IAT 334

Douglas Engelbart Invented the mouse Landmark system/demo:
hierarchical hypertext, multimedia, mouse, high-res display, windows, shared files, electronic messaging, CSCW, teleconferencing, … May 18, 2010 IAT 334

Doug Engelbart’s mouse - 1963-64
The Mouse Doug Engelbart’s mouse source: resonancepub.com & brittanica.com May 18, 2010 IAT 334

Alan Kay Dynabook - Notebook sized computer loaded with multimedia and can store everything Personal Computing Desktop Interface May 18, 2010 IAT 334

PCs with GUIs Xerox PARC - mid 1970’s Alto
Local processor, Bitmap display, Mouse Precursor to modern GUI LAN - Ethernet May 18, 2010 IAT 334

Menus Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979 source: folklore.org May 18, 2010 IAT 334

Xerox Star - ‘81 First commercial PC designed for “business professionals” Desktop metaphor, pointing, WYSIWYG First system based on usability engineering May 18, 2010 IAT 334

Windows 95 May 18, 2010 IAT 334

Handhelds Portable computing + phone Newton, Palm, Blackberry, iPhone
May 18, 2010 IAT 334

Human Capabilities Want to improve user performance Know the user!
Senses Information processing systems May 18, 2010 IAT 334

Senses Sight, hearing, touch important for current HCI
smell, taste ??? May 18, 2010 IAT 334

Sight Visual System workings
Color - color blindness: 8% males, % females Much done by context & grouping (words, optical illusions, …) May 18, 2010 IAT 334

Hearing Often taken for granted how good it is
Pitch - frequency Loudness - amplitude Timbre - type of sound (instrument) Sensitive to range 20Hz Hz Limited spatially, good temporal performance May 18, 2010 IAT 334

Touch Three main sensations handled by different types of receptors:
Pressure (normal) Intense pressure (heat/pain) Temperature (hot/cold) Where important? May 18, 2010 IAT 334

Models of Human Performance
Predictive Quantitative Time to perform Time to learn Number and type of errors Time to recover from errors Approximations May 18, 2010 IAT 334

Basic HCI Model Human Processor Components:
A simple model of human cognition Card, Moran, Newell 1983 Components: Senses Sensory store Short-term memory Long-term memory Cognition May 18, 2010 IAT 334

Information Processing
Usually serial action Respond to buzzer by pressing button Usually parallel recognition Driving, reading signs, listening to radio May 18, 2010 IAT 334

Model Human Processor Basics
Parameters Processors cycle time of ms Memories have type, capacity, decay time Types Visual Auditory Tactile Taste, smell, proprioception, etc May 18, 2010 IAT 334

Model Picture Closeup May 18, 2010 IAT 334

Perceptual Processor Continually “grabs data” from the sensory system
Cycle time: 100ms [ ] ms Passes data to Image Store in unrecognized form “Array of Pixels” (or whatever it is) from eyes “Sound Intensities” from ears May 18, 2010 IAT 334

Sensory Store The “input buffer” of the senses
Stores most recent input unrecognized Storage time and capacity varies by type Visual: Nominal Range Capacity: 17letters of text [7 - 17] letters Decay Time: 200ms [ ] ms Audio: Capacity: 5 letters of text [ ] letters Decay Time: ms [ ] ms May 18, 2010 IAT 334

Memory Three “types” Short-term memory Conscious thought, calculations
Intermediate Storing intermediate results, future plans Long-term Permanent, remember everything ever happened to us May 18, 2010 IAT 334

Memory: Sort Term Short Term (Working) Memory (WM)
Gets basic recognition from Sensory Store “Stop sign” vs. “red octagon w/white marks” 7 +/- 2 “chunks” vs WM: Nominal Range Capacity: 7 chunks [5 - 9] chunks Decay Time: 7 seconds [ ] seconds Access Time: 70ms [ ] ms May 18, 2010 IAT 334

Memory: Long Term Long Term Memory (LTM) Why learn about memory?
“Unlimited” size Slower access time (100ms) Little decay Episodic & Semantic Why learn about memory? Know what’s behind many HCI techniques Predict what users will understand May 18, 2010 IAT 334

LT Memory Structure Episodic memory Semantic memory
Events & experiences in serial form Semantic memory Structured record of facts, concepts & skills May 18, 2010 IAT 334

Black Red Orange Yellow Blue
Read the colors of the words Black Red Orange Yellow Blue May 18, 2010 IAT 334

MHP Operation Recognize-Act Cycle Discrimination Principle
On each cycle, contents in WM initiate actions associatively linked to them in LTM Actions modify contents of WM Discrimination Principle Retrieval is determined by candidates that exist in memory relative to retrieval cues Interference by strongly activated chunks May 18, 2010 IAT 334

Perception Stimuli that occur within one PP cycle fuse into a single concept movies (frame rate) Frame rate > 1 / Tp = 1/(100 msec/frame) = 10 f/sec morse code listening rate Perceptual causality two distinct stimuli can fuse if the first event appears to cause the other events must occur in the same cycle May 18, 2010 IAT 334

Operation Variable Cognitive Processor Rate
Cognitive Processor cycle time Tc is shorter with greater effort Induced by increased task demands/information Decreases with practice May 18, 2010 IAT 334

Operation: Target finding
Task: Move hand to target area Fitts Law A series of microcorrections Correction takes Tp + Tc + Tm Time Tpos to move hand to target width W which is distance D: Tpos = a + b log2 (d/w + 1.0) Movement time depends on relative precision May 18, 2010 IAT 334

IAT 334 Interface Design Task Analysis
______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | Jan 13, 2011 IAT 334

Task Conformance Task coverage Task adequacy
Can system do all tasks of interest? Task adequacy Can user do tasks? Does system match real-world tasks? Jan 13, 2011 IAT 334

Task Analysis Analyzing how people do their jobs
Go to their environment Learn about, analyze and describe their tasks Examine users’ tasks to better understand what they need from interface and how they will use it Jan 13, 2011 IAT 334

Task Analysis Gather data about what users need to do or accomplish
…then… Represent data for interpretation and use in design decisions Jan 13, 2011 IAT 334

Information to be Gathered
Information about users Description of environment where the tasks will be performed Major goals of the job what will result in a successful end state? User preferences & needs before they even start: coffee, pen, notebook, log sheets… Jan 13, 2011 IAT 334

Task Analysis Broad Focus Observe users of current system(s)
Generate requirements Hierarchical task analysis Knowledge-based task analysis Entity-Relationship model Jan 13, 2011 IAT 334

Data Gathering Techniques
Observation Interviews & Contextual Inquiry Ethnography also… Surveys & Questionnaires Focus Groups & Expert Debriefing Competitive Product Review Documentation mining Data logging Jan 13, 2011 IAT 334

Information to be Gathered
Tasks & Subtasks: Physical Cognitive Communication Conditions under which these tasks are done Results/outcomes of tasks Requirements to perform task: Information Communication with others Equipment Jan 13, 2011 IAT 334

1. Observation Watch users do what they do Record with videotape
Typically from a distance Record with videotape May require coding video later Take lots of notes, sketches Focus on specific task-relevant behaviors in notes, but later convert to abstract subtasks Jan 13, 2011 IAT 334

2. Interviews Engage the user more than just watching
Structured interviews Efficient, but requires training Unstructured Inefficient, but requires no training Semi-structured Good balance Often appropriate Jan 13, 2011 IAT 334

3. Ethnography Deeply contextual inquiry “Live among” the users
“Wallow in the data” “Live among” the users Understanding the full complexity of behavior, in its complete social context Note: Techniques based in sociology and anthropology--the study of humans Jan 13, 2011 IAT 334

4. Surveys & Questionnaires
Subjective answers in a quantitative format What does this mean? Questions: Exploratory vs. confirmatory Open-ended vs. categorical (exhaustive) NB: If you ask it, use it. If you won’t/can’t use it, don’t ask it. Jan 13, 2011 IAT 334

5. Focus Groups Structured Interview with groups of individuals
3 to 10 persons Use several different groups with different roles or perspectives Manage the interaction Avoid few people dominating the discussion Focus on preferences and views, not performance Relatively low cost, quick way to learn a lot Audio or video record, with permission Jan 13, 2011 IAT 334

6. Competitive Products Looking for both good and bad ideas
Functionality UI style Why are they successful or unsuccessful? What does successful really mean? (Note: Successful does not equal usable) Jan 13, 2011 IAT 334

7. Document Mining Documentation
Often contains description of how the tasks should be done Standards docs Manuals Histories Best Practices Jan 13, 2011 IAT 334

8. Data Logging Automatically tracking: Keystroke/mouse clicks Timers
Logs of transactions Physical location/movement trackers Cell phones GPS Jan 13, 2011 IAT 334

Now that you have observed…
You have piles of notes, hours of video, surveys up to here… How can you digest and represent the data, to turn it into information? Jan 13, 2011 IAT 334

Describe Tasks Task Outlines Narratives Hierarchies & Network Diagrams
Hierarchical Task Analysis (HTA) Entity-Relationship Diagrams Flow Charts Card Sorting Jan 13, 2011 IAT 334

1. Task Outline Using a lawnmower to cut grass Step 1. Examine lawn
Make sure grass is dry Look for objects laying in the grass Step 2. Inspect lawnmower Check components for tightness Check that grass bag handle is securely fastened to the grass bag support Make sure grass bag connector is securely fastened to bag adaptor Make sure that deck cover is in place Check for any loose parts (such as oil caps) Check to make sure blade is attached securely Check engine oil level Remove oil fill cap and dipstick Wipe dipstick Replace dipstick completely in lawnmower Remove dipstick Check that oil is past the level line on dipstick Jan 13, 2011 IAT 334

2. Narratives Describe tasks in sentences
Often expanded version of task outline More effective for communicating general idea of task Not effective for details Not effective for branching tasks Not effective for parallel tasks Jan 13, 2011 IAT 334

3. Hierarchies & Networks
Hierarchical Task Analysis (HTA) Graphical notation & decomposition of tasks Tasks as sets of actions Tasks organized into plans (describes sequence) Network / Entity-Relationship Diagrams Objects/people with links to related objects Links described functionally and in terms of strength Jan 13, 2011 IAT 334

4. Flow Charts Flow Chart of Task Steps
Combines Entity-relationship (network) with sequential flow, branching, parallel tasks. Includes actions, decisions, logic, by all elements of the system Abstracted Mature, well-known, good tools Jan 13, 2011 IAT 334

5. Knowledge-based Analysis
List all objects and actions involved in a task, then build a taxonomy of them Often times, work with domain expert to get help Jan 13, 2011 IAT 334

Summary: Data Gathering Techniques
Observation Interviews & Contextual Inquiry Ethnography also… Surveys & Questionnaires Focus Groups & Expert Debriefing Competitive Product Review Documentation mining Data logging Jan 13, 2011 IAT 334

Summary: Describe Tasks
Task Outlines Narratives Hierarchies & Network Diagrams Hierarchical Task Analysis (HTA) Entity-Relationship Diagrams Flow Charts Card Sorting Jan 13, 2011 IAT 334

UI Design Principles Categories
Learnability support for learning for users of all levels Flexibility support for multiple ways of doing tasks Robustness support for recovery Always think about exceptions, suitability Jan 20, 2011 IAT 334

Learnability Principles
Predictability Synthesizability Familiarity Generalizability Consistency Jan 20, 2011 IAT 334

Predictability I think that this action will do…
Operation visibility - can see avail actions e.g. menus vs. command shell grayed menu items Jan 20, 2011 IAT 334

Synthesizability From the resulting system state, My previous action did… compare in command prompt vs UI same feedback needed for all users, all apps? Jan 20, 2011 IAT 334

Familiarity Does UI task relate real-world task or domain knowledge?
to anything user is familiar with? Use of metaphors pitfalls Are there limitations on familiarity? Jan 20, 2011 IAT 334

Generalizability Does knowledge of one UI apply to others?
Cut and paste in many apps Does knowledge of one aspect of a UI apply to rest of the UI? File browsers in MacOS/ Windows Aid: UI Developers guidelines Jan 20, 2011 IAT 334

Consistency Similar ways of doing tasks
interacting output screen layout Is this always desirable for all systems, all users? Jan 20, 2011 IAT 334

Flexibility Principles
Dialog Initiative Multithreading Task migratibility Substitutivity Customizability Jan 20, 2011 IAT 334

Dialog Initiative System pre-emptive User pre-emptive
system does all prompts, user responds sometimes necessary Eg. Bank machine User pre-emptive user initiates actions more flexible Jan 20, 2011 IAT 334

Multithreading Two types Concurrent Interleaved
input to multiple tasks simultaneously Interleaved many tasks, but input to one task at a time Jan 20, 2011 IAT 334

Task migratability Ability to move performance of task to entity (machine or person) that can do it better Eg. Autopilot Spellchecking When is this good? Bad? User in control when human decisions are required Jan 20, 2011 IAT 334

Substitutivity Flexibility in details of operations
Allow user to choose suitable interaction methods Allow different ways to perform actions specify data configure Allow different ways of presenting output to suit task, user Jan 20, 2011 IAT 334

Customizability Ability to modify interface By user - adaptability
By system - adaptivity Jan 20, 2011 IAT 334

Robustness Principles
Observability Recoverability Responsiveness Task Conformance Jan 20, 2011 IAT 334

Observability Can user determine internal state of system from observable state? Browsability explore current state (without changing it) Reachability navigate through observable states Persistence how long does observable state persist? Jan 20, 2011 IAT 334

Recoverability Ability to continue to a goal after recognizing error
Difficulty of Recovery procedure should relate to difficulty of original task Forward Recoverability ability to fix when we can’t undo? Backward Recoverability undo previous error(s) Jan 20, 2011 IAT 334

Responsiveness Rate of communication between user and system
Response time time for system to respond in some way to user action(s) Stability principle response time, rate should be consistent As computers have gotten better, required computer response has gotten shorter Jan 20, 2011 IAT 334

Task Conformance Task coverage Task adequacy
can system do all tasks of interest? Task adequacy Can user do tasks? Does system match real-world tasks? Jan 20, 2011 IAT 334

User Centered Design Metaphor Models Practice
IAT 334 Interface Design User Centered Design Metaphor Models Practice ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | Feb 3, 2011 IAT 334

Agenda User Centered Design -- Overall Process Design
Metaphors Mental Models Idea generation Design principles Displaying your designs Storyboards Lo-Fi Wizard of Oz Visual Basic, Flash, etc Feb 3, 2011 IAT 334

User-Centered Design User-centered design process
Analysis of user needs Prototype Informal feedback Iterate on design Final application Formal feedback Feb 3, 2011 IAT 334

Analysis of User Needs Techniques: Surveys Card-sorting tasks
Interviews Focus groups Look at competing products Ethnography Participant observation Feb 3, 2011 IAT 334

Prototyping Storyboards Paper simulations of application
Wizard of Oz experiment Prototyping tools Cheap! Feb 3, 2011 IAT 334

Informal Feedback Present prototype to users Do a quick questionnaire
Observe the user struggle with your lousy design Feb 3, 2011 IAT 334

Iterate on Design Redesign system Be prepared to abandon bad ideas!!
in light of initial user impressions pay attention to common complaints Be prepared to abandon bad ideas!! It’s just an idea, not a measure of your worth! Feb 3, 2011 IAT 334

Idea Creation How do we create and develop new interface ideas and designs? Ideas come from Imagination Analogy Observation of current practice Observation of current systems Borrow from other fields Animation Theatre Information displays Architecture ... Feb 3, 2011 IAT 334

Interface Metaphors Metaphor - Application of name or descriptive term to another object which is not literally applicable Use: Natural transfer - apply existing knowledge to new, abstract tasks Problem: May introduce incorrect mental model Feb 3, 2011 IAT 334

Mental Models What models of the world are the users using?
Two Classes: Functional model “Press the accelerator once, then turn the key” Structural model OK, why do we do that? Feb 3, 2011 IAT 334

Another example... Functional model Structural model
“Go north on King George, Cross the Pattullo, Turn left at 10th Ave, Turn right at Kingsway, go 4.5km” Structural model What location?? Feb 3, 2011 IAT 334

Idea Creation Methods for creating and developing interface ideas
Turn off your natural critique mechanism! ? Feb 3, 2011 IAT 334

Idea Creation Methods 1. Consider new use for object
2. Adapt object to be like something else 3. Modify object for a new purpose Feb 3, 2011 IAT 334

Idea Creation Methods 4. Magnify - add to object
5. Minimize - subtract from object 6. Substitute something similar Feb 3, 2011 IAT 334

Idea Creation Methods 7. Rearrange aspects of object
8. Change the point of view 9. Combine data into an ensemble Feb 3, 2011 IAT 334

Guidelines for Design 1. Provide a good conceptual model
User has mental model of how things work Build design that allows user to predict effects of actions 2. Make things visible Visible affordances, mappings, constraints Remind person of what can be done and how to do it Feb 3, 2011 IAT 334

Design Principles 1. Use simple and natural dialog in user’s language
Match user’s task in a natural way Avoid jargon, techno-speak Present exactly info that user needs Less is more! Feb 3, 2011 IAT 334

Design Principles Here are 10 more detailed principles to follow about what to design and why Feb 3, 2011 IAT 334

Design Principles 2. Strive for consistency
Sequences, actions, commands, layout, terminology Makes more predictable Dialog boxes all having same “closure” options Feb 3, 2011 IAT 334

Design Principles 3. Provide informative feedback
Continuously inform user about what is occurring Most important on frequent, substantive actions % in file How to deal with delays? Special cursors % Done graphs Feb 3, 2011 IAT 334

Design Principles 4. Minimize user’s memory load
Recognition is better than recall Make visible! Describe required input format, include example and default Date: _ _ - _ _ - _ _ (DD-MM-YY) Use small # of generally applicable cmds Feb 3, 2011 IAT 334

Design Principles 5. Permit easy reversal of actions Undo!
Reduces anxiety, encourages experimentation Feb 3, 2011 IAT 334

Design Principles 6. Provide clearly marked exits
Don’t want the user to feel trapped Examples Cancel button on dialogs Quit any time Interrupt/resume on lengthy operations Feb 3, 2011 IAT 334

Design Principles 7. Provide shortcuts
Enable frequent users to perform often-used operations quickly Keyboard & mouse Abbreviations Menu shortcuts Function keys Command completion Double click vs. menu selection Navigation between windows/forms Reuse Provide a history system Feb 3, 2011 IAT 334

Design Principles 8. Support internal locus of control
Put user in charge, not computer Can be major source of anxiety Feb 3, 2011 IAT 334

Design Principles 9. Handle errors smoothly and positively
“That Filename already exists” vs. “Rename failed” 10. Provide useful help and documentation Feb 3, 2011 IAT 334

Dialog Design Categories of Dialogs

Agenda Dialog design Command Language
WIMP - Window, Icon, Menu, Pointer Direct manipulation Speech/Natural language Gesture, pen, multi-touch, VR… Feb 10, 2011 IAT 334

Command Languages Earliest UI interaction paradigms Examples
MS-DOS shell UNIX shell Feb 10, 2011 IAT 334

CL Attributes Work primarily by recall, not recognition
Heavy memory load Little or nothing is visible so… Poor choice for novices but... Feb 10, 2011 IAT 334

CL Attributes Specify commands to operate on current data collection
User only controls initiation Single thread of control Some other display area needed Feb 10, 2011 IAT 334

CL Design Goals Consistency Good naming and abbreviations
Syntax, order Good naming and abbreviations Doing your homework in design can help alleviate some of the negatives Feb 10, 2011 IAT 334

Consistency Provide a consistent syntax
In general: Have options and arguments expressed the same way everywhere UNIX fails here because commands were developed by lots of different people at different organizations No guidelines provided Feb 10, 2011 IAT 334

Dialog Order English: SVO subject verb object CL: S assumed (you)
Is VO or OV better? % rm file % file rm V dO iO vs. V iO dO % print file thePrinter % lpr -PthePrinter file Feb 10, 2011 IAT 334

Dialog Order Technical issues dictate the choice: V iO dO
% lpr -PthePrinter file The command must parse the arguments So the command comes first Flags control how to act on the file Want to parse all flags before checking files e.g. -o outputFile Feb 10, 2011 IAT 334

Syntax Pick a consistent syntax strategy Simple command list
eg., vi minimize keystrokes Commands plus arguments realistic, can provide keyword parameters % cp from=foo to=bar Commands plus options plus arguments what you usually see Feb 10, 2011 IAT 334

Terminology Keep terminology consistent
Same concept expressed with same options Useful to provide symmetric (congruent) pairings forward/backward next/prev control/meta Feb 10, 2011 IAT 334

WIMP Focus: Menus, Buttons, Forms
Predominant interface paradigm now (with some direct manipulation added) Advantages: ? Feb 10, 2011 IAT 334

Recognition Recognition is easier than recall! Recall has one cue
Recognition has the recall cue + the presence of the prompting word/icon Feb 10, 2011 IAT 334

Menus Key advantages: 1 keystroke or mouse operation vs. many
No memorization of commands Limited input set Feb 10, 2011 IAT 334

Menus Many different types pop-up pull-down radio buttons pie buttons
hierarchies Feb 10, 2011 IAT 334

Menu Items Organization strategies
Create groups of logically similar items Cover all possibilities Ensure that items are non-overlapping Keep wording concise, understandable Feb 10, 2011 IAT 334

Presentation Sequence
Use natural if available Time e.g. Breakfast, Lunch, Dinner Numeric ordering e.g. Point sizes for font Size Canada-> BC -> Surrey Feb 10, 2011 IAT 334

Presentation Sequence
Choices Alphabetical Group related items Frequently used first Most important first Conventional order (MTWRF) Don’t change the order on the fly! Feb 10, 2011 IAT 334

Direct Manipulation Continuous visibility of the objects and actions of interest Rapid, incremental actions Reversibility of all actions to encourage experimentation Syntactic correctness of all actions—every action is syntactically legal Replacement of command language syntax by direct manipulation of object of interest Feb 10, 2011 IAT 334

Direct Manipulation Examples WYSIWYG editors and word processors
VISICALC - 1st electronic spreadsheet CAD Desktop metaphor Video games Feb 10, 2011 IAT 334

DM Syntax Typical DM syntax is postfix
DirectObjects first, Verb second In this case, the command completes the utterance Enables separate selection syntax Indirect objects typically specified before direct objects e.g. brush size before painting in Photoshop Feb 10, 2011 IAT 334

DM Essence Representation of reality that can be manipulated
The user is able to apply intellect directly to the task Don’t have to name things, just touch them The tool itself seems to disappear Feb 10, 2011 IAT 334

Direct Manipulation is Locality
DM Relies on a primary geometric organization Items located nearby are frequently edited together The words in a sentence A column of numbers in a spreadsheet Less related -> Less local -> Less DM! Feb 10, 2011 IAT 334

Predicting thoughts and actions GOMS
User Modeling Predicting thoughts and actions GOMS

Agenda User modeling Fitt’s Law GOMS Feb 24, 2011 IAT 334

User Modeling Idea: If we can build a model of how a user works, then we can predict how s/he will interact with the interface Predictive modeling Many different modeling techniques exist Feb 24, 2011 IAT 334

User Modeling – 2 types Stimulus-Response
Hick’s law Practice law Fitt’s law Cognitive – human as interperter/predictor – based on Model Human Processor (MHP) Key-stroke Level Model Low-level, simple GOMS (and similar) Models Higher-level (Goals, Operations, Methods, Selections) Not discussed here Feb 24, 2011 IAT 334

Power Law of Practice Tn = T1n-a
Tn to complete the nth trial is T1 on the first trial times n to the power -a; a is about .4, between .2 and .6 Skilled behavior - Stimulus-Response and routine cognitive actions Typing speed improvement Learning to use mouse Pushing buttons in response to stimuli NOT learning Feb 24, 2011 IAT 334

Hick’s Law Decision time to choose among n equally likely alternatives
T = Ic log2(n+1) Ic ~ 150 msec Feb 24, 2011 IAT 334

Fitts’ Law Models movement times for selection (reaching) tasks in one dimension Basic idea: Movement time for a selection task Increases as distance to target increases Decreases as size of target increases Feb 24, 2011 IAT 334

Fitts: Index of Difficulty
ID - Index of difficulty ID is an information theoretic quantity Based on work of Shannon – larger target => more information (less uncertainty) ID = log2 (d/w + 1.0) width (tolerance) of target bits result distance to move Feb 24, 2011 IAT 334

Design implications Menu item size Icon size
Put frequenlty used icons together Scroll bar target size and placement Up / down scroll arrows together or at top and bottom of scroll bar Feb 24, 2011 IAT 334

GOMS One of the most widely known Assumptions
Know sequence of operations for a task Expert will be carrying them out Goals, Operators, Methods, Selection Rules Feb 24, 2011 IAT 334

GOMS Procedure Walk through sequence of steps
Assign each an approximate time duration -> Know overall performance time (Can be tedious) Feb 24, 2011 IAT 334

Limitations GOMS is not for Why?
Tasks where steps are not well understood Inexperienced users Why? Good example: Move a sentence in a document to previous paragraph Feb 24, 2011 IAT 334

Goal End state trying to achieve Then decompose into subgoals
Select sentence Moved sentence Cut sentence Move to new spot Paste sentence Place it Feb 24, 2011 IAT 334

Operators Basic actions available for performing a task (lowest level actions) Examples: move mouse pointer, drag, press key, read dialog box, … Feb 24, 2011 IAT 334

Methods Sequence of operators (procedures) for accomplishing a goal (may be multiple) Example: Select sentence Move mouse pointer to first word Depress button Drag to last word Release Feb 24, 2011 IAT 334

Selection Rules Invoked when there is a choice of a method
Example: Could cut sentence either by menu pulldown or by ctrl-x Feb 24, 2011 IAT 334

Further Analysis GOMS is often combined with a keystroke level analysis Assigns times to different operators Plus: Rules for adding M’s (mental preparations) in certain spots Feb 24, 2011 IAT 334

Example Move Sentence 1. Select sentence Reach for mouse H 0.40
Point to first word P 1.10 Click button down K 0.60 Drag to last word P 1.20 Release K 0.60 3.90 secs 2. Cut sentence Press, hold ^ Point to menu Press and release ‘x’ or Press and hold mouse Release ^ Move to “cut” Release 3. ... Feb 24, 2011 IAT 334

Keystroke-Level Model
Simplified GOMS KSLM - developed by Card, Moran & Newell, see their book The Psychology of Human-Computer Interaction, Card, Moran and Newell, Erlbaum, 1983 Skilled users performing routine tasks Assigns times to basic human operations - experimentally verified Based on MHP - Model Human Processor Feb 24, 2011 IAT 334

User Profiles Attributes: Novice, intermediate, expert
attitude, motivation, reading level, typing skill, education, system experience, task experience, computer literacy, frequency of use, training, color-blindness, handedness, gender,… Novice, intermediate, expert Feb 24, 2011 IAT 334

Motivation User Design goal Low motivation, discretionary use
Low motivation, mandatory High motivation, due to fear High motivation, due to interest Design goal Ease of learning Control, power Ease of learning, robustness, control Power, ease of use Feb 24, 2011 IAT 334

Knowledge & Experience
task system low low high high low high high low Design goals Many syntactic and semantic prompts Efficient commands, concise syntax Semantic help facilities Lots of syntactic prompting Feb 24, 2011 IAT 334

Job & Task Implications
Frequency of use High - Ease of use Low - Ease of learning & remembering Task implications Low - Ease of learning System use Mandatory - Ease of using Discretionary - Ease of learning Feb 24, 2011 IAT 334

Modeling Problems 1. Terminology - example
High frequency use experts - cmd language Infrequent novices - menus What’s “frequent”, “novice”? Feb 24, 2011 IAT 334

Modeling Problems (contd.)
2. Dependent on “grain of analysis” employed Can break down getting a cup of coffee into 7, 20, or 50 tasks That affects number of rules and their types Feb 24, 2011 IAT 334

Modeling Problems (contd.)
3. Does not involve user per se Don’t inform designer of what user wants 4. Time-consuming and lengthy Feb 24, 2011 IAT 334

IAT 334 Interface Design Chris Shaw

Similar presentations

Presentation on theme: "IAT 334 Interface Design Chris Shaw"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

IAT 334 Interface Design Chris Shaw

Similar presentations

Presentation on theme: "IAT 334 Interface Design Chris Shaw"— Presentation transcript:

Similar presentations

About project

Feedback