iat 334 interface design n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
IAT 334 Interface Design PowerPoint Presentation
Download Presentation
IAT 334 Interface Design

Loading in 2 Seconds...

play fullscreen
1 / 168

IAT 334 Interface Design - PowerPoint PPT Presentation


  • 92 Views
  • Uploaded on

IAT 334 Interface Design. Chris Shaw. ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA. Exam Materials. Slides Shneiderman & Plaisant Chapters 1-8 Programming materials

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'IAT 334 Interface Design' - kyrene


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
iat 334 interface design

IAT 334Interface Design

Chris Shaw

______________________________________________________________________________________SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

IAT 334

exam materials
Exam Materials
  • Slides
  • Shneiderman & Plaisant Chapters 1-8
  • Programming materials
    • Supplemantary: Glassner Book
      • Chapters 1-5,
      • Chapters 10.2, 13.1-13.6
    • On Sakai: Password: GlassnerIAT334

IAT 334

why we are here
Why We Are Here
  • Look at human factors that affect software design and development
  • Central Topic: User interface design

IAT 334

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

IAT 334

why is this important
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

IAT 334

course aims
Course Aims
  • Consciousness raising for you
    • Eg. Don Norman
      • “The Design of Everyday Things”
    • Doors
      • Handles afford various opening method
  • Design critic

IAT 334

goals of hci shneiderman plaisant chap1
Goals of HCI (Shneiderman & Plaisant Chap1)
  • Allow users to carry out tasks
    • Safely
    • Effectively
    • Efficiently
    • Enjoyably

IAT 334

goals of system engineering
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

IAT 334

usability
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

IAT 334

interests in human factors in design
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

IAT 334

interests in human factors in design1
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.

IAT 334

accommodating human diversity
Accommodating Human Diversity

Personality

Differences

Physical

Abilities and

Workplaces

Users with

Disabilities

Cognitive

and Perceptual

Abilities

Elderly

Users

Cultural

and International

Diversity

IAT 334

key historical event
Key Historical Event
  • Design of the first Mac 1983-1984
  • “The computer for the rest of us”

IAT 334

improving interfaces
Improving Interfaces
  • Know the User!
    • Physical abilities
    • Cognitive abilities
    • Personality differences
    • Skill differences
    • Cultural diversity
    • Motivation
    • Special needs

IAT 334

two crucial errors
Two Crucial Errors
  • Assume all users are alike
  • Assume all users are like the designer

IAT 334

another crucial error
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

IAT 334

ui design develop process
UI Design/Develop Process
  • Analyze user’s goals
  • Create design alternatives
  • Analyze designs
  • Implement prototype
  • Test
  • Refine

Design

Implement

Evaluate

IAT 334

evaluation
Evaluation
  • Things we can measure
    • Time to learn
    • Speed of performance
    • Rate of errors by user
    • Retention over time
    • Subjective satisfaction

IAT 334

interfaces in the world
Interfaces in the World
  • VCR
  • Mouse
  • Phone
  • Copier
  • Car
  • Airline reservation
  • Air traffic control

IAT 334

history of hci

History of HCI

______________________________________________________________________________________SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

IAT 334

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

IAT 334

douglas engelbart
Douglas Engelbart
  • Invented the mouse
  • Landmark system/demo:
    • hierarchical hypertext, multimedia, mouse, high-res display, windows, shared files, electronic messaging, CSCW, teleconferencing, …
  • http://www.youtube.com/watch?v=JfIgzSoTMOs

IAT 334

the mouse
The Mouse

Doug Engelbart’s mouse - 1963-64

source: resonancepub.com & brittanica.com

IAT 334

alan kay
Alan Kay
  • Dynabook - Notebook sized computer loaded with multimedia and can store everything
  • Personal Computing
  • Desktop Interface

IAT 334

pcs with guis
PCs with GUIs
  • Xerox PARC - mid 1970’s
    • Alto
    • Local processor, Bitmap display, Mouse
    • Precursor to modern GUI
    • LAN - Ethernet

IAT 334

menus
Menus

Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979

source: folklore.org

IAT 334

xerox star 81
Xerox Star - ‘81
  • First commercial PC designed for “business professionals”
    • Desktop metaphor, pointing, WYSIWYG
  • First system based on usability engineering

IAT 334

windows 95
Windows 95

IAT 334

handhelds
Handhelds
  • Portable computing + phone
  • Newton, Palm, Blackberry, iPhone

IAT 334

human capabilities
Human Capabilities
  • Want to improve user performance
  • Know the user!
    • Senses
    • Information processing systems

IAT 334

senses
Senses
  • Sight, hearing, touch important for current HCI
    • smell, taste ???

IAT 334

sight
Sight
  • Visual System workings
  • Color - color blindness: 8% males, 1% females
  • Much done by context & grouping (words, optical illusions, …)

IAT 334

hearing
Hearing
  • Often taken for granted how good it is
    • Pitch - frequency
    • Loudness - amplitude
    • Timbre - type of sound (instrument)
  • Sensitive to range 20Hz - 22000Hz
  • Limited spatially, good temporal performance

IAT 334

touch
Touch
  • Three main sensations handled by different types of receptors:
    • Pressure (normal)
    • Intense pressure (heat/pain)
    • Temperature (hot/cold)
  • Where important?

IAT 334

models of human performance
Models of Human Performance
  • Predictive
  • Quantitative
    • Time to perform
    • Time to learn
    • Number and type of errors
    • Time to recover from errors
  • Approximations

IAT 334

basic hci
Basic HCI
  • Model Human Processor
    • A simple model of human cognition
    • Card, Moran, Newell 1983
  • Components:
    • Senses
    • Sensory store
    • Short-term memory
    • Long-term memory
    • Cognition

IAT 334

information processing
Information Processing
  • Usually serial action
    • Respond to buzzer by pressing button
  • Usually parallel recognition
      • Driving, reading signs, listening to radio

IAT 334

model human processor basics
Model Human Processor Basics
  • Parameters
    • Processors cycle time of 50-200ms
    • Memories have type, capacity, decay time
  • Types
    • Visual
    • Auditory
    • Tactile
    • Taste, smell, proprioception, etc

IAT 334

perceptual processor
Perceptual Processor
  • Continually “grabs data” from the sensory system
  • Cycle time: 100ms [50 - 200] ms
  • Passes data to Image Store in unrecognized form
    • “Array of Pixels” (or whatever it is) from eyes
    • “Sound Intensities” from ears

IAT 334

sensory store
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 [70 - 1000] ms
    • Audio:
      • Capacity: 5 letters of text [4.4-6.6] letters
      • Decay Time: 1500 ms [900 - 3500] ms

IAT 334

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

IAT 334

memory sort term
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”
      • 4048946328 vs. 404-894-6328
    • WM: Nominal Range
      • Capacity: 7 chunks [5 - 9] chunks
      • Decay Time: 7 seconds [5 - 226] seconds
      • Access Time: 70ms [25 - 170] ms

IAT 334

memory long term
Memory: Long Term
  • Long Term Memory (LTM)
    • “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

IAT 334

lt memory structure
LT Memory Structure
  • Episodic memory
    • Events & experiences in serial form
  • Semantic memory
    • Structured record of facts, concepts & skills

IAT 334

slide46
Read the colors of the words

Black Red Orange Yellow Blue

IAT 334

mhp operation
MHP Operation
  • Recognize-Act Cycle
    • 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

IAT 334

perception
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

IAT 334

operation
Operation
  • Variable Cognitive Processor Rate
    • Cognitive Processor cycle time Tc is shorter with greater effort
    • Induced by increased task demands/information
    • Decreases with practice

IAT 334

operation target finding
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

IAT 334

iat 334 interface design1

IAT 334Interface Design

Task Analysis

______________________________________________________________________________________SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

IAT 334

task conformance
Task Conformance
  • Task coverage
    • Can system do all tasks of interest?
  • Task adequacy
    • Can user do tasks?
    • Does system match real-world tasks?

IAT 334

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

IAT 334

task analysis1
Task Analysis
  • Gather data about what users need to do or accomplish

…then…

  • Represent data for interpretation and use in design decisions

IAT 334

information to be gathered
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…

IAT 334

task analysis2
Task Analysis
  • Broad Focus
  • Observe users of current system(s)
  • Generate requirements
    • Hierarchical task analysis
    • Knowledge-based task analysis
    • Entity-Relationship model

IAT 334

data gathering techniques
Data Gathering Techniques
  • Observation
  • Interviews & Contextual Inquiry
  • Ethnography

also…

  • Surveys & Questionnaires
  • Focus Groups & Expert Debriefing
  • Competitive Product Review
  • Documentation mining
  • Data logging

IAT 334

information to be gathered1
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

IAT 334

1 observation
1. Observation
  • Watch users do what they do
    • 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

IAT 334

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

IAT 334

3 ethnography
3. Ethnography
  • Deeply contextual inquiry
    • “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

IAT 334

4 surveys questionnaires
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.

IAT 334

5 focus groups
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

IAT 334

6 competitive products
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)

IAT 334

7 document mining
7. Document Mining
  • Documentation
    • Often contains description of how the tasks should be done
    • Standards docs
    • Manuals
    • Histories
    • Best Practices

IAT 334

8 data logging
8. Data Logging
  • Automatically tracking:
    • Keystroke/mouse clicks
    • Timers
    • Logs of transactions
    • Physical location/movement trackers
      • Cell phones
      • GPS

IAT 334

now that you have observed
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?

IAT 334

describe tasks
Describe Tasks
  • Task Outlines
  • Narratives
  • Hierarchies & Network Diagrams
    • Hierarchical Task Analysis (HTA)
    • Entity-Relationship Diagrams
  • Flow Charts
  • Card Sorting

IAT 334

1 task outline
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

IAT 334

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

IAT 334

3 hierarchies networks
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

IAT 334

4 flow charts
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

IAT 334

5 knowledge based analysis
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

IAT 334

summary data gathering techniques
Summary:Data Gathering Techniques
  • Observation
  • Interviews & Contextual Inquiry
  • Ethnography

also…

  • Surveys & Questionnaires
  • Focus Groups & Expert Debriefing
  • Competitive Product Review
  • Documentation mining
  • Data logging

IAT 334

summary describe tasks
Summary:Describe Tasks
  • Task Outlines
  • Narratives
  • Hierarchies & Network Diagrams
    • Hierarchical Task Analysis (HTA)
    • Entity-Relationship Diagrams
  • Flow Charts
  • Card Sorting

IAT 334

ui design principles
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

IAT 334

learnability principles
Learnability Principles
  • Predictability
  • Synthesizability
  • Familiarity
  • Generalizability
  • Consistency

IAT 334

predictability
Predictability
  • I think that this action will do…
  • Operation visibility - can see avail actions
    • e.g. menus vs. command shell
    • grayed menu items

IAT 334

synthesizability
Synthesizability
  • From the resulting system state, My previous action did…
    • compare in command prompt vs UI
    • same feedback needed for all users, all apps?

IAT 334

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

IAT 334

generalizability
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

IAT 334

consistency
Consistency
  • Similar ways of doing tasks
    • interacting
    • output
    • screen layout
  • Is this always desirable for all systems, all users?

IAT 334

flexibility principles
Flexibility Principles
  • Dialog Initiative
  • Multithreading
  • Task migratibility
  • Substitutivity
  • Customizability

IAT 334

dialog initiative
Dialog Initiative
  • System pre-emptive
    • system does all prompts, user responds
      • sometimes necessary
      • Eg. Bank machine
  • User pre-emptive
    • user initiates actions
      • more flexible

IAT 334

multithreading
Multithreading
  • Two types
    • Concurrent
      • input to multiple tasks simultaneously
    • Interleaved
      • many tasks, but input to one task at a time

IAT 334

task migratability
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?

IAT 334

substitutivity
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

IAT 334

customizability
Customizability
  • Ability to modify interface
    • By user - adaptability
    • By system - adaptivity

IAT 334

robustness principles
Robustness Principles
  • Observability
  • Recoverability
  • Responsiveness
  • Task Conformance

IAT 334

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

IAT 334

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

IAT 334

responsiveness
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

IAT 334

task conformance1
Task Conformance
  • Task coverage
    • can system do all tasks of interest?
  • Task adequacy
    • Can user do tasks?
    • Does system match real-world tasks?

IAT 334

iat 334 interface design2

IAT 334Interface Design

User Centered Design

Metaphor

Models

Practice

______________________________________________________________________________________SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

IAT 334

agenda
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

IAT 334

user centered design
User-Centered Design
  • User-centered design process
    • Analysis of user needs
    • Prototype
    • Informal feedback
    • Iterate on design
    • Final application
    • Formal feedback

IAT 334

analysis of user needs
Analysis of User Needs
  • Techniques:
    • Surveys
    • Card-sorting tasks
    • Interviews
    • Focus groups
      • Look at competing products
    • Ethnography
      • Participant observation

IAT 334

prototyping
Prototyping
  • Storyboards
  • Paper simulations of application
  • Wizard of Oz experiment
  • Prototyping tools
  • Cheap!

IAT 334

informal feedback
Informal Feedback
  • Present prototype to users
  • Do a quick questionnaire
  • Observe the user struggle with your lousy design

IAT 334

iterate on design
Iterate on Design
  • Redesign system
    • 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!

IAT 334

idea creation
Ideas come from

Imagination

Analogy

Observation of current practice

Observation of current systems

Borrow from other fields

Animation

Theatre

Information displays

Architecture

...

Idea Creation

How do we create and develop new interface ideas and designs?

IAT 334

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

IAT 334

mental models
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?

IAT 334

another example
Another example...
  • Functional 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??

IAT 334

idea creation1
Idea Creation
  • Methods for creating and developing interface ideas
    • Turn off your natural critique mechanism!
    • ?

IAT 334

idea creation methods
Idea Creation Methods
  • 1. Consider new use for object
  • 2. Adapt object to be like something else
  • 3. Modify object for a new purpose

IAT 334

idea creation methods1
Idea Creation Methods
  • 4. Magnify - add to object
  • 5. Minimize - subtract from object
  • 6. Substitute something similar

IAT 334

idea creation methods2
Idea Creation Methods
  • 7. Rearrange aspects of object
  • 8. Change the point of view
  • 9. Combine data into an ensemble

IAT 334

guidelines for design
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

IAT 334

design principles
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!

IAT 334

design principles1
Design Principles
  • Here are 10 more detailed principles to follow about what to design and why

IAT 334

design principles2
Design Principles
  • 2. Strive for consistency
    • Sequences, actions, commands, layout, terminology
    • Makes more predictable
    • Dialog boxes all having same “closure” options

IAT 334

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

IAT 334

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

IAT 334

design principles5
Design Principles
  • 5. Permit easy reversal of actions
    • Undo!
    • Reduces anxiety, encourages experimentation

IAT 334

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

IAT 334

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

IAT 334

design principles8
Design Principles
  • 8. Support internal locus of control
    • Put user in charge, not computer
    • Can be major source of anxiety

IAT 334

design principles9
Design Principles
  • 9. Handle errors smoothly and positively
    • “That Filename already exists”

vs.

    • “Rename failed”
  • 10. Provide useful help and documentation

IAT 334

dialog design

Dialog Design

Categories of Dialogs

agenda1
Agenda
  • Dialog design
    • Command Language
    • WIMP - Window, Icon, Menu, Pointer
    • Direct manipulation
    • Speech/Natural language
    • Gesture, pen, multi-touch, VR…

IAT 334

command languages
Command Languages
  • Earliest UI interaction paradigms
  • Examples
    • MS-DOS shell
    • UNIX shell

IAT 334

cl attributes
CL Attributes
  • Work primarily by recall, not recognition
  • Heavy memory load
  • Little or nothing is visibleso…
  • Poor choice for novicesbut...

IAT 334

cl attributes1
CL Attributes
  • Specify commands to operate on current data collection
  • User only controls initiation
  • Single thread of control
  • Some other display area needed

IAT 334

cl design goals
CL Design Goals
  • Consistency
    • Syntax, order
  • Good naming and abbreviations
  • Doing your homework in design can help alleviate some of the negatives

IAT 334

consistency1
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

IAT 334

dialog order
Dialog Order
  • English: SVO subject verb object
  • CL: S assumed (you)

Is VO or OV better? % rm file

% file rm

  • VdOiO vs. ViOdO

% printfilethePrinter

% lpr -PthePrinterfile

IAT 334

dialog order1
Dialog Order
  • Technical issues dictate the choice:
  • ViOdO

% lpr -PthePrinterfile

  • 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

IAT 334

syntax
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

IAT 334

terminology
Terminology
  • Keep terminology consistent
    • Same concept expressed with same options
    • Useful to provide symmetric (congruent) pairings
      • forward/backward
      • next/prev
      • control/meta

IAT 334

slide131
WIMP
  • Focus: Menus, Buttons, Forms
  • Predominant interface paradigm now (with some direct manipulation added)
  • Advantages:
    • ?

IAT 334

recognition
Recognition
  • Recognition is easier than recall!
    • Recall has one cue
    • Recognition has the recall cue + the presence of the prompting word/icon

IAT 334

menus1
Menus
  • Key advantages:
    • 1 keystroke or mouse operation vs. many
    • No memorization of commands
    • Limited input set

IAT 334

menus2
Menus
  • Many different types
    • pop-up
    • pull-down
    • radio buttons
    • pie buttons
    • hierarchies

IAT 334

menu items
Menu Items
  • Organization strategies
    • Create groups of logically similar items
    • Cover all possibilities
    • Ensure that items are non-overlapping
    • Keep wording concise, understandable

IAT 334

presentation sequence
Presentation Sequence
  • Use natural if available
    • Time
      • e.g. Breakfast, Lunch, Dinner
    • Numeric ordering
      • e.g. Point sizes for font
    • Size
      • Canada-> BC -> Surrey

IAT 334

presentation sequence1
Presentation Sequence
  • Choices
    • Alphabetical
    • Group related items
    • Frequently used first
    • Most important first
    • Conventional order (MTWRF)
  • Don’t change the order on the fly!

IAT 334

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

IAT 334

direct manipulation1
Direct Manipulation
  • Examples
    • WYSIWYG editors and word processors
    • VISICALC - 1st electronic spreadsheet
    • CAD
    • Desktop metaphor
    • Video games

IAT 334

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

IAT 334

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

IAT 334

direct manipulation is locality
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!

IAT 334

user modeling

User Modeling

Predicting thoughts and actions

GOMS

agenda2
Agenda
  • User modeling
    • Fitt’s Law
    • GOMS

IAT 334

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

IAT 334

user modeling 2 types
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

IAT 334

power law of practice
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

IAT 334

hick s law
Hick’s Law
  • Decision time to choose among n equally likely alternatives
    • T = Ic log2(n+1)
    • Ic ~ 150 msec

IAT 334

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

IAT 334

fitts index of difficulty
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

IAT 334

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

IAT 334

slide152
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

IAT 334

goms procedure
GOMS Procedure
  • Walk through sequence of steps
  • Assign each an approximate time duration

-> Know overall performance time

  • (Can be tedious)

IAT 334

limitations
Limitations
  • GOMS is not for
    • Tasks where steps are not well understood
    • Inexperienced users
  • Why?
  • Good example: Move a sentence in a document to previous paragraph

IAT 334

slide155
Goal
  • End state trying to achieve
  • Then decompose into subgoals

Select sentence

Moved sentence

Cut sentence

Move to new spot

Paste sentence

Place it

IAT 334

operators
Operators
  • Basic actions available for performing a task (lowest level actions)
  • Examples: move mouse pointer, drag, press key, read dialog box, …

IAT 334

methods
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

IAT 334

selection rules
Selection Rules
  • Invoked when there is a choice of a method
  • Example: Could cut sentence either by menu pulldown or by ctrl-x

IAT 334

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

IAT 334

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

IAT 334

keystroke level model
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

IAT 334

user profiles
User Profiles
  • Attributes:
    • attitude, motivation, reading level, typing skill, education, system experience, task experience, computer literacy, frequency of use, training, color-blindness, handedness, gender,…
  • Novice, intermediate, expert

IAT 334

motivation
User

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

Motivation

IAT 334

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

Knowledge & Experience

IAT 334

job task implications
Job & Task Implications
  • Frequency of use
    • High - Ease of use
    • Low - Ease of learning & remembering
  • Task implications
    • High - Ease of use
    • Low - Ease of learning
  • System use
    • Mandatory - Ease of using
    • Discretionary - Ease of learning

IAT 334

modeling problems
Modeling Problems
  • 1. Terminology - example
    • High frequency use experts - cmd language
    • Infrequent novices - menus
  • What’s “frequent”, “novice”?

IAT 334

modeling problems contd
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

IAT 334

modeling problems contd1
Modeling Problems (contd.)
  • 3. Does not involve user per se
    • Don’t inform designer of what user wants
  • 4. Time-consuming and lengthy

IAT 334