Prototyping

After conducting User and Task Analysis and developing a plan it is time to prototype

Also prototype proposed changes to site

Prototyping

Goals:Observe aspects of web siteEvaluate design ideasConsider alternatives

Why Prototype?

Can’t test until you have a siteBut, implementing a site is:

Expensive Time consuming

Result: a paradox

Prototyping

Breaks this paradoxAllows evaluation of designs earlyTechnique not a specific tool

Prototyping

Programmers want to program not design

HCI people want to testPrototyping allows a compromiseSimilar to artillery method of Ready-

Aim-Fire

Ready Aim Fire

Types of Prototypes

Evolutionary - complete enough to become site

Revolutionary or Throwaway - prototype guides design but is thrown away

Horizontal Prototype

Little depth of functionalityBroad designHomepagePresent overview of site’s look

Horizontal Prototype

Vertical Prototype

Limited number of featuresFunctionally of features fully

developedUsed to prototype a complete task

Vertical Prototype

Global Prototype

Prototype of entire siteGives complete look and feel of site

Global Prototype

Local Prototype

Models small part of siteVery short life spanUsed for subtask

Local Prototype

Types of Prototype Implementations

Low Fidelity - LowFiHigh Fidelity - HiFi

Low-fidelity prototyping

Do not fully resemble final siteFast and cheap to assembleMost commonly implemented using

paper

Hi-fidelity prototyping

Implemented on computer Advantages:Allows for more accurate timingsDisadvantages:More time to create (more expensive)Might think it is final versionChanges take a lot of timeOne bug can destroy a user test

Paper Prototype

Constructed with paper, glue, printout

Tested on users with one person playing the “computer”

Paper Prototype

Advantages:CheapNo implementationFast to changeLook to does affect user’s opinion

Paper Prototype

Disadvantages:Not the same type of interactionsDo not show well to managementDo not accurately simulate response

times

Creating a Paper Prototype

Supplies: White paper or card stock Regular 8.5 x 11 paper 5x8 index card for notes Rubber cement Color Markers Post-it notes Acetate sheets Scissors

User Testing

Process of testing a prototypeFormative Evaluation: during

development phaseSummative Evaluation: occurs the

completion of a project

User Testing

Why not use experts?Experts not primary usersCan miss critical usability problemsAvailability

User Testing Overview

Team constructs paper prototypeOne team member “plays” computerOne team member takes careful

notesTeam analysis of resultsProduce final report

User Testing Materials

Screening QuestionnaireOrientation ScriptConsent FormPre-Test QuestionnaireTask ScenariosPost-Test Questionnaire

Screening Questionnaire

Means for qualifying and selecting participants

Content obtained from user profileCan be given over phoneSimple to Complex

Orientation Script

Script read to participants verbatimDescribes what will happen during

testSets the tone for the sessionPuts participants at easeGiven beofre moving to testing area

Orientation Script

Development Guidelines:Keep tone professional but friendlyLimit it to 1 or 2 pagesRead the script to each participant

Orientation Script

Typical Contents: Make introduction Offer refreshment Explain why they are here Explain what is expected of them Assure they are being tested Explain any unusual requirements Mention okay to ask questions Refer to any forms

Orientation Script Example

Informed Consent

Get written permission from participant

Proof of that permission

Consent Example

Pre-test Questionnaire

Addresses specific test objectivesQualify placement of participant into

specific categoriesGet participant attitudesGet participant opinionsEstablish participants prerequisite

knowledge of site

Task Scenarios

Tasks carried out by usersRepresentative of normal workProvide realistic scenariosSequence in order most likely to performMatch scenarios with experience of

participantAvoid using jargonProvide substantial amount of work

Task Scenarios

Provide substantial amount of workDo not guide through the site

piecemealForce participants to exhibit

conceptual understanding of siteHave associated usability measures.

Post-test Questionnaire

Gather preference informationUse task scenarios as basis for contentAsk questions to tasks cannot directly

observeDo not ask performance questionsDesign questions for simplicity

Post-test Questionnaire

Question format:Check boxesTrue or FalseScales Short fill in the blank

Question Format

Semantic Differentials

Question Format

Fill In

Check-Box

User Testing Layout

User Testing Layout

User Testing Layout

Arrangement as shownVideotape if possible

User Testing Roles

GreeterFacilitatorComputer Observer

Greeter

Welcomes userExplain purpose and format of testRead from scriptObtain informed consentAdminister pre-test questionnaire

Facilitator

Person who conducts the testPresents task scenariosAssists when user gets stuckMaintains neutral demeanorKeeps things moving

Computer

Rearranges interface in response to user

QuickQuiet

Observer

Take careful notesTimes tasksNotes errorsNotes when user gets “stuck”

Team Demeanor

Act professionalNever blame userDon’t act nervous

Finishing Test

Debrief userGive post-test questionnaireGather and mark all dataThank userEscort user