Prototyping

1
Prototyping

• After conducting User and Task Analysis and
  developing a plan it is time to prototype
• Also prototype proposed changes to site

2
Prototyping

• Goals
• Observe aspects of web site
• Evaluate design ideas
• Consider alternatives

3
Why Prototype?

• Cant test until you have a site
• But, implementing a site is
• Expensive
• Time consuming
• Result a paradox

4
Prototyping

• Breaks this paradox
• Allows evaluation of designs early
• Technique not a specific tool

5
Prototyping

• Programmers want to program not design
• HCI people want to test
• Prototyping allows a compromise
• Similar to artillery method of Ready-Aim-Fire

6
Ready Aim Fire
7
Types of Prototypes

• Evolutionary - complete enough to become site
• Revolutionary or Throwaway - prototype guides
  design but is thrown away

8
Horizontal Prototype

• Little depth of functionality
• Broad design
• Homepage
• Present overview of sites look

9
Horizontal Prototype
10
Vertical Prototype

• Limited number of features
• Functionally of features fully developed
• Used to prototype a complete task

11
Vertical Prototype
12
Global Prototype

• Prototype of entire site
• Gives complete look and feel of site

13
Global Prototype
14
Local Prototype

• Models small part of site
• Very short life span
• Used for subtask

15
Local Prototype
16
Types of Prototype Implementations

• Low Fidelity - LowFi
• High Fidelity - HiFi

17
Low-fidelity prototyping

• Do not fully resemble final site
• Fast and cheap to assemble
• Most commonly implemented using paper

18
Hi-fidelity prototyping

• Implemented on computer
• Advantages
• Allows for more accurate timings
• Disadvantages
• More time to create (more expensive)
• Might think it is final version
• Changes take a lot of time
• One bug can destroy a user test

19
Paper Prototype

• Constructed with paper, glue, printout
• Tested on users with one person playing the
  computer

20
Paper Prototype

• Advantages
• Cheap
• No implementation
• Fast to change
• Look to does affect users opinion

21
Paper Prototype

• Disadvantages
• Not the same type of interactions
• Do not show well to management
• Do not accurately simulate response times

22
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

23
User Testing

• Process of testing a prototype
• Formative Evaluation during development phase
• Summative Evaluation occurs the completion of a
  project

24
User Testing

• Why not use experts?
• Experts not primary users
• Can miss critical usability problems
• Availability

25
User Testing Overview

• Team constructs paper prototype
• One team member plays computer
• One team member takes careful notes
• Team analysis of results
• Produce final report

26
User Testing Materials

• Screening Questionnaire
• Orientation Script
• Consent Form
• Pre-Test Questionnaire
• Task Scenarios
• Post-Test Questionnaire

27
Screening Questionnaire

• Means for qualifying and selecting participants
• Content obtained from user profile
• Can be given over phone
• Simple to Complex

28
Orientation Script

• Script read to participants verbatim
• Describes what will happen during test
• Sets the tone for the session
• Puts participants at ease
• Given beofre moving to testing area

29
Orientation Script

• Development Guidelines
• Keep tone professional but friendly
• Limit it to 1 or 2 pages
• Read the script to each participant

30
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

31
Orientation Script Example
32
Informed Consent

• Get written permission from participant
• Proof of that permission

33
Consent Example
34
Pre-test Questionnaire

• Addresses specific test objectives
• Qualify placement of participant into specific
  categories
• Get participant attitudes
• Get participant opinions
• Establish participants prerequisite knowledge of
  site

35
Task Scenarios

• Tasks carried out by users
• Representative of normal work
• Provide realistic scenarios
• Sequence in order most likely to perform
• Match scenarios with experience of participant
• Avoid using jargon
• Provide substantial amount of work

36
Task Scenarios

• Provide substantial amount of work
• Do not guide through the site piecemeal
• Force participants to exhibit conceptual
  understanding of site
• Have associated usability measures.

37
Post-test Questionnaire

• Gather preference information
• Use task scenarios as basis for content
• Ask questions to tasks cannot directly observe
• Do not ask performance questions
• Design questions for simplicity

38
Post-test Questionnaire

• Question format
• Check boxes
• True or False
• Scales
• Short fill in the blank

39
Question Format
Semantic Differentials
40
Question Format
Fill In
Check-Box
41
User Testing Layout
42
User Testing Layout
43
User Testing Layout

• Arrangement as shown
• Videotape if possible

44
User Testing Roles

• Greeter
• Facilitator
• Computer
• Observer

45
Greeter

• Welcomes user
• Explain purpose and format of test
• Read from script
• Obtain informed consent
• Administer pre-test questionnaire

46
Facilitator

• Person who conducts the test
• Presents task scenarios
• Assists when user gets stuck
• Maintains neutral demeanor
• Keeps things moving

47
Computer

• Rearranges interface in response to user
• Quick
• Quiet

48
Observer

• Take careful notes
• Times tasks
• Notes errors
• Notes when user gets stuck

49
Team Demeanor

• Act professional
• Never blame user
• Dont act nervous

50
Finishing Test

• Debrief user
• Give post-test questionnaire
• Gather and mark all data
• Thank user
• Escort user