October 13th 2014 LECTURE 11 USABILITY...

LECTURE 11

USABILITY - PROTOTYPING

October 13th 2014

human computer interaction 2014, fjv1

Recapitulation Lecture #10

Tool box for HCI

• Task Analysis

• Cognitive techniques

– GOMS/CCT

– ERMIA

– CWA

• Dialogue Analysis-Design

• Color/Text Analysis-Design


Example: Cognitive Task Analysis


A B

C D

C D

A B

Send in 2011, by former CS HCI student

OV Chipcard Checkout Counter

Waterfall with iteration

Requirementsspecification

Architecturaldesign

Detaileddesign

Coding andunit testing

Integrationand testing

Operation andmaintenance

• Discoveries in later stages can be reflected in

iterations

• Requirements were incomplete in the analysis

phase

• Therefore sometime better to acknowledge

incompleteness and use advanced understanding

• It is clear that the design process is not at all linear

• Preference for Star Model ?


Star Model – Representations ...


Dialog Analysis

Cognetics

User Analysis

Task Analysis

Technology

Assessment

Problem

Statement

Context

Analysis

Usability

Analysis

Specification

Prototype

Cognetics

Prototype

High-Fidelity

Usability

testing

Interaction

Design

USABILITY

USABILITY ENGINEERING

6human computer interaction 2014, fjv

Usability

• Definition: Usability comprises the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment

• In design/development process– Usability Specifications

– Levels of Specification

– Measurement

• Usability engineering – Comparable to Software Engineering


Usability & 7 Stages model

• Gulf of execution

– Translate user’s formulation of actions

to the system

• Gulf of evaluation

– Effect of action in user’s expectation of changed

system state

• A good conceptual design & Mental Model

helps in dealing with Gulf of

execution/evaluation


Usability engineering

• Providing structured methods in UI design during product development

• Measuring very specific user actions in specific situations

• Try to find real usability problem(s)

– e.g. programming errors in VCR/interactive TV

• Usability specifications is not the same as Usability

– e.g. Video Recording still a pain to program!


Usability Engineering Life Cycle

• Close to Soft Systems (lecture 9)

• Holistic view of usability engineering

• Links to software engineering

– OOSE

• Requirements, Design, Evaluating, Prototyping

• Scaled down for smaller projects

• Usability goals are formulated in a style guide


Usability ~ Prototyping

• A chick and egg problem

• The sequence in which we discuss it does not reflect the sequence of its natural occurrence

• Imagine the Star Model

• How do usability & prototyping relate to evaluation!

• Focus on Usability specification!, this happens early in the design trajectory:

– requirements engineering


Usability

“Usability comprises the effectiveness, efficiency and satisfaction with which

specified users can achieve specified goals in a particular environment.”

Usability Components (from #1)

• Learnability (also referred to as Memorability)

• Ease of learning the system, i.e. the basic tasks

• Skills retained over time

• Throughput (also referred to as Efficiency)

• Speed of task performance

• Low user error rate

• Flexibility• Suitability for intended user expertise

• Can system be customised?

• Attitude (also referred to as Satisfaction)• User subjective satisfaction with system


Usability Studio’s

• Studios are decorated according to specific usability questions

• Studio equipment is context dependent


Usability Specifications

• Definition and purpose

• Usability factors

• Measuring instruments

• Usability specification process

• Setting usability levels

• Advantages and disadvantages


Usability Definition (1990)

• ISO 9241definition

“Effectiveness, efficiency and satisfaction with

which specified users can achieve specified

goals in a particular environment.”

• Functional ~ Usability Specifications

– Functional specifications:

are central to ensuring system functionality

– Usability specifications:

are central to ensuring system usability


ISO usability standard 9241

Adopts traditional usability categories:

• effectiveness

– can you achieve what you want to?

• efficiency

– can you do it without wasting effort?

• satisfaction

– do you enjoy the process?


Purpose Usability Specifications

1. Establish when an interface is ‘good

enough’

2. When to stop iteration

3. Controlling document of design process


Common Usability Factors

• Speed of operation

• Completion rate

• Error free rate

• Satisfaction rating

• Learnability

• Retainability

• Advanced feature usage

Most important Software measures

as identified/used by IBM in 1990


Time Dimension Usability Factors

• Initial performance

• Long-term performance

• First impression

• Long-term user satisfaction


Usability Measuring Instrument

• Method for providing values for a particular usability factor

• Always quantitative, i.e. numerically measured

– Objective

• Observable user performance

• Often associated with a benchmark test

• Involves typical user task (normally simple and frequent)

– Subjective

• User opinion

• Usually associated with a user questionnaire

• Objective and subjective measures are of equal importance


Important metrics from ISO 9241

Usability Effectiveness Efficiency Satisfactionobjective measures measures measures

Suitability Percentage of Time to Rating scale for the task goals achieved complete a task for satisfaction

Appropriate for Number of power Relative efficiency Rating scale fortrained users features used compared with satisfaction with

an expert user power features

Learnability Percentage of Time to learn Rating scale forfunctions learned criterion ease of learning

Error tolerance Percentage of Time spent on Rating scale for errors corrected correcting errors error handling successfully


Usability Specification Process

• Defining usability through metrics

– duration metrics

– count measures

– proportion completed

– quality

• Setting and agreeing planned levels of metrics

• Analysing impact of design solutions

• Incorporating user-derived feedback

• Iterating until planned levels are achieved

• SUS questionnaire (for assignment)


e.g. Usability Specs DTP package

Time Task Measured Current Worst Planned Best

Initialization Benchmark #1

Time to

successful

installation

Difficult

to install90 min 30 min 20 min

Initial

performanceSet TAB # errors 3 errors 3 errors 2 errors 0 errors

Initial

performanceDelete TAB

Time on first

trial6 s 6 s 4 s 2 s

First Impression QuestionnaireAverage score

(1-5)NA 3 4.2 5


Usability and Requirements

• Usability levels become part

– first of the requirements document

– then of the system specification

– then of the complete system documentation

– then of report on system design / implementation


Setting Levels for Usability

• Restrict to major / critical issues

• Method: guesses agreed by a team, i.e.

– user interaction designer

– user interface software developer

– marketing person

– project manager …

– generates team commitment to usability targets

• Initial performance and first impression are

almost always appropriate


Current & Worst Acceptable Levels

• Current Level– Present level of value to be measured

– Possible even from manual system or initial prototype

– May be related to a competitive system

• Worst Acceptable Level– Worst acceptable, not worst possible

– Eventually, if any observed value on any attribute is does not meet this level then:

the system is formally unacceptable

– Level should equal or improve current level • except for initial performance

• slower and error prone

• make an educated guess


Planned Target & Best Possible Levels

• Planned Target Level

– The ‘what you would like’ level

– Attributes not yet at this level focus development effort

– Set higher than current level (if known)

– Match or exceed competitor’s product

• Best Possible Level

– Realistic state-of-the-art upper limit

– Indicates room for future improvement

– Assumes expert user, best design, best available

technology


Advantages Usability Specs

• Part of the management and control mechanisms for

the iterative refinement process

– Define a quantitative end to the (potentially endless)

iterative refinement process

• Allows clear assessment of usability during iterative

prototyping cycles

• Identifies data to be collected, avoids gathering

unusable or irrelevant data

• Objectively identifies interface weaknesses which

need further design effort


Disadvantages Usability Specifications

• Measures of specific user actions in specific

situations

• No reliable technique for setting usability

specifications; Issue of globalization

• Different tasks and user groups may need

different usability specifications


PROTOTYPING

Prototyping is common in almost every fieldof engineering design

In prototyping one has to plan to throw away


Prototyping the User-Interface

• Purpose of prototyping

• Merits of prototyping

• Types of prototyping

• Prototyping and management

• Limitations of prototyping on its own


• Identifying user interface (and other)

requirements:

• almost impossible to specify in advance

• “It is not until users interact with something

concrete that their rich expertise about their

working environment will surface.”

Purpose of Prototyping


Design is Developing Artifact

• Indeed, “Magritte” was right!


Prototyping

• The prototyping approach provides continuous

feedback on the current design situation

• In HCI there will never be fully satisfactory design

guidelines applicable in all circumstances

• Need not be computer based or have full functionality

• Supported by good software tools

– Graphical editors, construction kits

– User Interface Management Systems (UIMS)

– Wireframes

• “Prototyping does NOT mean ‘build in haste’”


Prototyping the User Interface

37

Build

Prototype

Test Prototype

Enhance

Design

Life Cycle

requirements

engineering

Technology

Guidelines

human computer interaction 2014, fjv

PACT

Analysis

People

Activities

Context

Technologies

Prototype Fidelity

• Prototyping is concerned with the design

process leading up to production of a final

system

• Prototypes are not the final system, merely

representations of that system: Artifact

• As the Prototyping refines, the Fidelity of the

prototype increases.

low fidelity high fidelity

start design end design


39

Merits of Prototyping

• Requirements capture

– Interface and functional requirements

• Reveals problems / prevents gross mistakes

• Allows evaluation and discussion

– Fostering innovative ideas (from designers and users)

• Users enjoy prototyping and feel involved

– Participatory design

• Suggests level of user support

• Results in better usability

• Reduced deadline effect

• Fewer lines of code


Fidelity in Prototyping

• Fidelity refers to the level of detail

• High fidelity:

– A prototype that looks like the final product

• Low fidelity:

– Artists renditions with many details missing


Why Low-Fidelity Prototype ?

• Traditional methods take too long

– sketches prototype evaluate iterate

• Can simulate the prototype

– sketches evaluate iterate

– sketches act as prototypes

• designer “plays computer”

• other design team members observe & record

• Requires “Fröbel” implementation skills

– allows non-programmers to participate


Construct Low-Fidelity Prototype


Sketched Paper Design


Low-Fidelity Prototyping

• Takes only a few hours

– no expensive equipment needed

• Can test multiple alternatives!!!

• Can change the design as you test

– If users are trying to use the interface in a way you

did not design/intend it

– go with what they think! Adapt!

• Allows designers & users to work together


Storyboards

• Series of sketches showing how a user might

progress through a task using an interface

• Film industry

• Graphical snapshots

• Often used with scenarios, bringing more detail

• Derived from the scenario

• Focus on history of events (task-analysis)

• Help envisioning the progress of the interaction


Example Story Board (scenario)


Example Lo-Fi Prototype


Example Med-Fi Prototype


Includes a Scenario for use

Prototyping – Increasing Fidelity


Benefits of Participatory Design

“Computer-based systems that are poorly suited to how people

actually work impose cost not only on the organisation in terms

of low productivity but also on the people who work with them.

Studies of work in computer-intensive workplaces have pointed

to a host of serious problems that can be caused by job design

that is insensitive to the nature of the work being performed, or

to the needs of human beings in an automated workplace.”

Kuhn, S. in Bringing Design to Software, 1996


Prototyping: Participatory Design

• Involving users as full partners in design.

– Intention, Scandinavian origin (law)

• Two methods are frequently used:

– CARD: Collaborative Analysis of Requirements & Design

• Goal: design workflow

• Higher level of abstraction

– PICTIVE: Plastic Interface for Collaborative Technology

Initiatives through Video Exploration

• Goal: design screens

• Find interaction

– PICTIVE and CARD can be used together.


CARD


Collaborative Analysis of Requirements & Design

PICTIVE


Low fidelity prototyping & PICTIVE

55

• Use pre-made interface components on paper

• Empty widgets are created and printedbuttons menu alert box

combo box

tabs

entries

list box


Working with PICTIVE

• A PICTIVE session has four parts:

– Stakeholders all introduce themselves

– Brief tutorials about areas represented in the

session (optional)

– Brainstorming of ideas for the design

– Walkthrough of the design and summary of

decisions made

– Video capture of all interactions on the “table”


57

Ex. Results PICTIVE/Sketching

Collections of Sreens & Screen Interaction(s), from Univ. of Manchester (2000)


58

Ex. Results Paper Design (LoFi)

Collections of Screens & Screen Interaction(s), from Univ. of Oslo (2011)


PICTIVE Session Example


Prototype for the LOL system (Aus)

Computer Assisted LowFi Prototyping

60

The SILK System

Sketching Interfaces Like Krazy

The Denim System

Designing Web Sites by Sketching

Interactive Storyboarding for WWW


Designing Interfaces with SILK

• Designer sketches ideas rapidly with

electronic pad and pen

– SILK recognizes widgets

– easy editing with gestures

• Designer or end-user tests interface

– widgets behave

– specify additional behavior visually

• Automatically transforms to a “finished” UI


Specifying Behavior

• Storyboards– series of rough sketches depicting changes in

response to end-user interaction

• Expresses many common behaviors• Widgets are linked HyperCard like

before after

Sequencing behavior between widgets


SILK Storyboards

• Copy sketches to storyboard window

• Draw arrows from objects to screens

Switch to run mode to test

SILK changes screens on mouse clicks


DENIM:Designing Web Sites by Sketching

• Early-phase information & navigation design

• Integrates multiple views

– site map – storyboard – page sketch

• Supports informal interaction

– sketching, pen-based interaction

• Includes special gestures for fast interaction


Working with DENIM

66

Sketch Storyboard Run-prototype

Image from James Landay


Denim Demo


“Wizard of Oz”


“Wizard of Oz” prototyping

• User thinks having interacting with a computer, but

a developer is responding to output rather than the

system.

• Usually done early in design to understand users’

expectations (requirements)

69

>Blurb blurb>Do this>Why?

User


Example Wizard of Oz


Early “wizard of Oz”

• Chess machine built in Hungary (Kempelen)

• It worked remarkably well …


Wizard of Oz Prototyping


Types of Prototyping (1)

• Low-fidelity // High-fidelity

• Vertical

– Focus on a specific element and simulate in depth

• Horizontal

– Take a broad perspective but with reduced

functionality at any point

• Full

– Complete functionality, but less performance than

final system


74

Granularity in Prototyping

Low-Fidelity

High-Fidelity

• Paper-based Sketching

• Paper-based Storyboard a.k.a. PICTIVE

• Computer Aided Sketches / Storyboard

• Wizard of Oz / Slide Shows / Video

• Computer based Scenario Simulation

• Computer based Horizontal Simulation

• Computer based Vertical Simulation

• Computer based Full-Functional Simulation


Types of Prototyping (2)


Number of different Features

Ava

ilab

le F

un

ction

ality

Horizontal Prototype

Ve

rtic

al

Pro

toty

pe

Full System

Scenario

T0

Prototyping Methods (1)

76

Throw-away prototypes (rapid)

Incremental

prototypes

Evolutionary

Requirements

Animation


Prototyping Methods (2)

• Requirements Animation

• Functional requirements are demonstrated in prototype (mock-up)

• Throw-away prototyping

• Similar to requirements animation

• Prototype is not developed into the final product

• Evolutionary prototyping

• Prototype is not discarded

• Prototype used as the basis for next iteration of design

• i.e. system “evolves” from prototype

• Incremental prototyping

• Final product is build as separate components, one at a time

• allows large systems to be installed in phases to avoid delays between specification and delay

• Typical with larger projects


Prototyping

Brainstorm different representations

Choose a representation

Rough out interface style

Task centered walkthrough and redesign

Fine tune interface, screen design

Heuristic evaluation and redesign

Usability testing and redesign

Limited field testing

Alpha/Beta tests

Low fidelity paper prototypes

Medium fidelity prototypes

High fidelity prototypes / restricted systems

Working systems

78

Early design

Late design


Comparison of Techniques

79

Technique Advantages Disadvantages

Vertical Realistic,

In depth implementation

Real user task

Limited part of UI

Horizontal Test entire UI

Fast implementation

Cannot perform real tasks

Scenario Easy and cheap to construct

Cannot perform real tasks

Limited part of UI

Wizard-of Oz Save programming time

Renders understanding

Train people as computers

Less realistic

Animation

(slides & video)Simple

System simulation

No real interaction

Little flexibility


Groups Involved in Prototyping

80

Designers End UsersEnd Users

ManagersManagersManagers


Management Issues

• Time

– takes time to developparticularly for throw-away prototypes

• Planning

– managers do not always have experience required to plan and cost a design process with prototyping

• Non-functional features

– e.g. safety and reliability not included

• Contracts

– difficult to manage prototyping activities via a contract


Choosing a prototyping technique

• Cost and schedule constraints

• Proof-of-concept

• Navigation and flow

• User-driven or Facilitator-driven

• Look-and-feel of product

• Usability test

• Available facilitation/ programming skill

• What developmental stage are you in?


Performance of a technique

Suitable for:

• quick-and-easy application?

• providing controlled study?

• qualitative analysis?

• quantitative analysis?

Requires:

• special equipment?

• special personnel?


Limitations on just Prototyping?

• Difficult for users: no coherent conceptual model

– users’ feel system has unpredictable components

• Uneven appreciation of various user groups

– users involved with prototype development may not represent cross-section of users

– not easy to learn or intuitive for newcomers

• Lack of task analysis

– lack of breadth of task support

• Failure to fully comply with a style guide

– lack of internal and external consistency

• Lack of usability evaluation


Recapitulation Lecture #11

• Definition of Usability• Definition of Usability Engineering • Usability

– Specification– Levels– Measurement Instruments

• Definition of Prototyping• From Low-Fidelity to High-Fidelity• Types and Methods of Prototyping• Management Issues • Pitfalls in Prototyping


We have used a computer to prototype the

structural strength of our project and I am afraid

the results aren’t encouraging


October 13th 2014 LECTURE 11 USABILITY...

Documents

Transcript of October 13th 2014 LECTURE 11 USABILITY...

The use of feasibility - SINTEF...Feasibility vs. Usability ‐A prototype is just one possible manifestation of the design idea ‐Usability of prototypes cannot express the feasibility

The Golden Circle - GOTO Conference · Ethnographic study Contextual inquiry Prototype testing Usability testing . Story Mapping Jeff Patton . Sequencing backlog ... “The Golden

Usability & Usability Testing

Usability Testing Report - PEN America Archive · performed a usability test of the prototype. We utilized the user testing software Lookback.io to record audio, video and screen

MoogleMoogle Team H Holt, Varun, Evan, Eugene. OverviewOverview Predispositions Research Insights Concepts Prototype Usability tests Redesign Strategies.

ACCEPTANCE AND USABILITY OF TECHNOLOGY … and usability of technology-supported interventions for motivating patients with copd to be physically active 105 prototype product implementationAuthors:

UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

Evaluating the Usability of a Teacher Created Classroom ......Usability issues were resolved over the 2 rounds of usability testing with improvements made to the prototype in between

Note-Taker: Enabling Students who are Legally Blind …...Usability studies with the proof-of-concept Note-Taker prototype The proof-of-concept Note-Taker prototype was developed during

Peer Reviewing System Instructor’s Dashboard ofkobsa/courses/INF231/14F/Group3...Low-fidelity Mockups Usability tests & Evaluation Iteration Prototype High-fidelity Mockups Methods

PROTOTYPE - ddbunlimited.comprototype prototype prototype prototype prototype prototype prototype prototype prototype prototype prototype prototype f e g h f e g h scale: 1:12 4. 4.875

THE HUMANE INTERFACEllrc.mcast.edu.mt/digitalversion/Table_of_Contents_30009.pdf · TWO Cognetics and the Locus of Attention 9 2-1 Ergonomics and Cognetics: What We Carl: and Cannot

Lecture 7 - Usability Studies - George Mason Universitytlatoza/teaching/swe632f15/Lecture 7... · paper prototype study Wizard of Oz study usability studies ... is and what actions

Usability & Usability Engineering

Dalhousie Libraries Prototype Website Usability Test · usability best practices literature review to design a prototype Dalhousie Libraries Website. Usability testing of the prototype

User-Centred Design of a Pervasive Interface · David Nelson 203CR – Designing for Usability 2: Assignment 2 2. Interactive Paper Prototype Figure 1.1. - My interactive paper prototype.

VWHPVD QG1 HWZRUNV - Covenant Universitycovenantuniversity.edu.ng/layout/set/print/content/download/22866/154581/file/...prototype application developed for the school has Good Usability

Milestone 6 pptx-- usability testing & final prototype

Resource Management System (RMS) Prototype & Pilot Testing › portfolio › wp-content › ... · general structure of the application and its usability, while allowing the user

Usability 2009 J T Burns1 Usability & Usability Engineering.