1

2D Multimedia Authoring2D Multimedia Authoring

Prototyping & Prototyping & Storyboarding Storyboarding The User InterfaceThe User Interface

2

Lecture OverviewLecture Overview

• Purpose of prototypingPurpose of prototyping• Merits of prototypingMerits of prototyping• Types of prototypingTypes of prototyping

Prototyping is Prototyping is common in common in almost every almost every field of field of engineering engineering designdesign

3

Purpose of PrototypingPurpose of Prototyping

• To identify user interface (and other) To identify user interface (and other) requirements - almost impossible to specify requirements - almost impossible to specify in advancein advance

““It is not until users interact with It is not until users interact with

something concrete that their rich something concrete that their rich

expertise about their working expertise about their working

environment will surface.”environment will surface.”

4

Prototyping the Prototyping the User InterfaceUser Interface

Requirements Requirements GatheringGathering

Classic Classic LifecycleLifecycle

HCI HCI GuidelinesGuidelines

Knowledge of Knowledge of TechnologyTechnology

Build Build PrototypePrototype TestTest

Enhance Enhance DesignDesign

5

PrototypingPrototyping

• The Prototyping approach provides continuous The Prototyping approach provides continuous feedback on the current design situationfeedback on the current design situation

• In HCI there will never be fully satisfactory design In HCI there will never be fully satisfactory design guidelines applicable in all circumstancesguidelines applicable in all circumstances

• Need not be computer based or have full functionalityNeed not be computer based or have full functionality• Greatly aided by good software toolsGreatly aided by good software tools

• Graphical editors, construction kits, User Interface Management Graphical editors, construction kits, User Interface Management Systems (UIMS)Systems (UIMS)

• Prototyping does Prototyping does NOTNOT mean ‘build in haste’ !!! mean ‘build in haste’ !!!

6

Merits of PrototypingMerits of Prototyping

• Requirements captureRequirements capture• Interface and functional requirementsInterface and functional requirements

• Reveals problems / prevents gross mistakesReveals problems / prevents gross mistakes• Allows evaluation and discussion which fosters Allows evaluation and discussion which fosters

innovative ideas (from designers and users)innovative ideas (from designers and users)• Users enjoy prototyping and feel involvedUsers enjoy prototyping and feel involved• Suggests level of user supportSuggests level of user support• Results in better usabilityResults in better usability• Reduced deadline effectReduced deadline effect• Fewer lines of codeFewer lines of code

7

Types of PrototypingTypes of Prototyping

Software --------- Life -------- Software --------- Life -------- CycleCycle

ExploratoryExploratoryExperimentalExperimental

R a p i dR a p i d

E v o l u t i o n a r yE v o l u t i o n a r y

HorizontalHorizontalV e r t i c a lV e r t i c a l FullFull

Fragmentary ------------- CompleteDivergent -------------- Convergent

‘Throw-it-away’

prototypes

I n c r e m e n t a lI n c r e m e n t a l

(Unstructured development)

(Section-at-a-time )

8

Prototyping on its Own: Possible Prototyping on its Own: Possible Limitations Limitations (see Redmond-Pyle and Moore, 1995)(see Redmond-Pyle and Moore, 1995)

• No coherent conceptual model -> users’ feel No coherent conceptual model -> users’ feel system has unpredictable componentssystem has unpredictable components

• Uneven appreciation of various user groupsUneven appreciation of various user groups• Lack of task analysis -> lack of breadth of task Lack of task analysis -> lack of breadth of task

supportsupport• Failure to fully comply with a style guide -> lack Failure to fully comply with a style guide -> lack

of internal and external consistencyof internal and external consistency• Lack of usability evaluationLack of usability evaluation• Users involved with prototype development Users involved with prototype development

may not represent cross-section of usersmay not represent cross-section of users• Not easy to learn or intuitive for newcomersNot easy to learn or intuitive for newcomers

9

STORYBOARDINGSTORYBOARDING

• First utilised in audio/visual productionFirst utilised in audio/visual production• Analogous to comic-strips and cartoons (Mike Vance - Analogous to comic-strips and cartoons (Mike Vance -

Disney)Disney)• Helps catalyse feelings about feasibility of ideas. Helps catalyse feelings about feasibility of ideas. • Common point of reference, enabling the design team Common point of reference, enabling the design team

(which includes the client) to say, 'Yes, that is what I (which includes the client) to say, 'Yes, that is what I meant', or 'No, we've a problem here'. meant', or 'No, we've a problem here'.

• The storyboard helps focus on the total content of the The storyboard helps focus on the total content of the program, both from the point of view of the overall size program, both from the point of view of the overall size of the program, and in discussing user interaction of the program, and in discussing user interaction times. times.