CS/ITDE 2009-10

Applying HCI:Prototypes and storyboards in interactive systems designinteractive systems design

1

CS/ITDE 2009-10

Rapid Application

Development (RAD)

Iterative prototyping• Early prototypes are used to create system

documentation• The prototype becomes an object of communication• The prototype becomes an object of communication• Early prototypes are used to refine the systems• Requirements become clarified with reference to

the prototype and in the light of design possibilit ies thrown up by the prototype.

• Misconceptions between designer and clients become apparent early in the stage.

2

CS/ITDE 2009-10

Iterative prototyping

Analysis

Design

Implement

EvaluateFormativeEvaluation

3

CS/ITDE 2009-10

Creating the prototype

• Rapid prototyping - RAD methodology

• Create design in early stages of project

• Fosters communication between art and science

• Reduce temptation to get locked into data

• Allows contribution from non-technical team members

• Examine interface design solutions

• User centred method important in evaluation

4

CS/ITDE 2009-10

Prototyping and UCD

• Develop a prototype

• Conduct a design review• Revise the prototype

• Usability test and evaluate• Usability test and evaluate

• Revise the prototype• Repeat above stages

• Create a user interface design document

User

5

CS/ITDE 2009-10

The prototype

• Final screen decisions are made in the prototype:

• Fonts, Wording, Texts• Colours, screen layout, etc.• Colours, screen layout, etc.

• Navigation tools

• Buttons and controls• Menus

• Look and feel of the application

6

CS/ITDE 2009-10

What type of prototype

• A prototype to test navigation and menu

Prototype need not be fully functionalThe purpose of the prototype will determine how much function it shall have. Consider the following:

function

• A prototype to test user satisfaction with screen design

• A prototype to test system response times

7

CS/ITDE 2009-10

Types of Prototype• Horizontal prototype

• Vertical prototype

• High fidelity prototype

• Low fidelity prototype

• Paper prototype

• Requirements animation

• Rapid prototyping

• Evolutionary prototyping

• Incremental prototyping

• Chauffeured prototyping

• Wizard of Oz prototyping

8

CS/ITDE 2009-10

Horizontal prototype

• A prototype that covers a fairly large

section of the application or project

• Functionality might be limited in any

particular area or areasparticular area or areas

• For example all screens may be

present but few of them actually work

• May be used to test navigation for

example

9

CS/ITDE 2009-10

Vertical prototype

• A prototype that covers a fairly small

section of the application or project

• One section of the application is almost

fully functionalfully functional

• Few areas of the application are present

• For example a single screen may be used

to test database performance

10

CS/ITDE 2009-10

High fidelity prototype

• A prototype that is intended to represent the final application to a high degree of accuracy in some specific way

• Functionality may or may not be limited in any specific areaspecific area

• Some areas are likely to be fully functional

• Screens will closely resemble the finished application

• May be used for evaluation, marketing etc. But will be expensive to produce

11

CS/ITDE 2009-10

Low fidelity prototype

• A prototype that has only a passing resemblance to the final product

• Functionality will be limited in most areas

• The prototype may be used to communicate early • The prototype may be used to communicate early ideas to teams

• Quick and cheap to do

• May involve many persons with different ideas

• May be too flexible - use early on

12

CS/ITDE 2009-10

Paper prototype

• A low fidelity prototype comprising screen design and information structure ideas.

• May be used with evaluation methods such as cognitive walkthrough, in early stages of the cognitive walkthrough, in early stages of the project

• Very cheap to do

• All stakeholders are able to take part

13

CS/ITDE 2009-10

Requirements animation

• A prototype, usually with high fidelity screen design, but low functionality

• Used to convey screen ideas between artistic team and othersteam and others

• Use Macromedia Director or similar application

14

CS/ITDE 2009-10

Rapid prototyping

• A throw away low fidelity method

• Used in requirements gathering

• Ideas about potential designs• Ideas about potential designs

15

CS/ITDE 2009-10

Evolutionary prototyping

• Prototypes develop throughout the project

• Earlier prototypes are modified and used later in the project

• A single strand of development may be • A single strand of development may be carried through until the end

• Prototypes are modified based on evaluation

16

CS/ITDE 2009-10

Incremental prototyping

• Prototypes are develop throughout the project in small steps or modules

• Many strands of development may be seen throughout the projectthroughout the project

• The final application may be composed of the incremental prototype modules and may be released over a period of time as a succession of components

17

CS/ITDE 2009-10

Throw away prototype

• Prototypes develop in isolation during the project to address specific problems

• Earlier prototypes are discarded once the problems have been solvedproblems have been solved

• Many strands of development are evident

• Prototypes are used to design high fidelity prototypes based on results of evaluation

18

CS/ITDE 2009-10

Chauffeured

prototyping

• Users watch as a member of the design team drives the application - high fidelity prototype

• The method is used to test whether interface meets users needs, without the user having to meets users needs, without the user having to learn the application

• Useful for testing out or confirming ideas

• Designers closely involved with users

19

CS/ITDE 2009-10

Wizard of Oz

prototyping

• Users are unaware that they are being observed as they use and interact with a high fidelity prototypefidelity prototype

• Designers closely involved with users

20

CS/ITDE 2009-10

Choice of prototyping tool• Paper prototype

– Cheap and available for early design decisions

• PowerPoint

– Good for showing screen dumps and bitmaps

– Simple easy to use animation and navigation

• Visual Application (Basic, Access)• Visual Application (Basic, Access)

– Has good all round functionality

– Can be used for final version

– Has MS Windows functionality

• Authoring software - Director etc.

– May have reduced speed but good for animation and screen designs

21

CS/ITDE 2009-10

Storyboards

Storyboards are graphic organizers such as a series of illustrations or images displayed in sequence for the purpose of previsualizing a motion graphic or interactive media sequence, including website interactivity. See [1, 2].including website interactivity. See [1, 2].

The storyboarding process, in the form it is known today, was developed at the Walt Disney Studio during the early 1930s, after several years of similar processes being in use at Walt Disney and other animation studios.

22

CS/ITDE 2009-10

Storyboards: an example

From: http://www.storyboards.co.nz/

23

CS/ITDE 2009-10

Storyboards: Creating User-Oriented Work Scenarios

From: http://www.sapdesignguild.org/editions/edition3/print_interact_design.asp

24

CS/ITDE 2009-10

Storyboards: Designing a website

(c) Jenny Wakefield’s website storyboard [5]

25

CS/ITDE 2009-10

Information Structure

examples

• Linear structure

• Hierarchy - menu

How can the logical representation of data be mappedto a) The human mind, and b) A computer application ?

• Hierarchy - menu

• Explorer - Browser - Windows

• Hyper-linked system

• Search engine

• Artificial Intelligence (?)

26

CS/ITDE 2009-10

The users’ mind

How to understand it?• User Centred Design• Task analysis• Requirements• Audience survey

?

• Audience survey

It is important that thedesigner understandsexactly what the userwants to do within and by means of the application.

27

CS/ITDE 2009-10

The designers’ mind

How can ideas, assumptions, guessesabout how the userwants to use an application be translated into a be translated into a structure for a computerapplication?

28

CS/ITDE 2009-10

Shared representation

The stake-holders will all want tohave a say in the design processYour representation must be accessible to

* (Artistic) designers* (Artistic) designers* Users* Media people* Programmers* Project managers* Funders

29

CS/ITDE 2009-10

Flowcharts

Flowcharts are schematic representations

of the interactive flow of a program.

All possible user interaction pathways, All possible user interaction pathways,

expressed through labelled boxes and

directional arrows, are traced through any

hierarchical menu tree structures and

along various screen branches.

30

CS/ITDE 2009-10

Flowcharts

• Gives shape and structure to the content

so people can get a sense of how the real

product might work

• It is a living document that is returned to

throughout the project, as the basis for

decisions about navigation and structure

31

CS/ITDE 2009-10

Flowcharts

Three forces drive the design of the

flowchart:

• Content: The organisation and structure

mapped out for the informationmapped out for the information• Usability: The topic categories and access

routes the audience will expect to find• Simplicity: The need to keep the design clear

and focused, to control production time & costs

32

CS/ITDE 2009-10

Flowcharts & PIMSs [3]

Remember, we are talking about “interaction” here!

Matt Queen (2006): Preferred Interaction Model (PIM)

“A PIM is a type of flow diagram that represents the user’s probable decisions, cognitive processes, and user’s probable decisions, cognitive processes, and actions.”

“PIM entities are the decision (diamond), cognitive process (rounded box), action (square box), and system signal (circle). The model ends with a special action entity represented by a rhombus shape.”

33

CS/ITDE 2009-10

An example of PIM

PIM for a phone number retrieval retrieval interface of a contact database application

34

CS/ITDE 2009-10

Interface Structure

A simple method of deciding on a structure is to create a topics list.

Then identify “meaningful” Then identify “meaningful” relationships among topics.

For example:

35

CS/ITDE 2009-10

More complex

structures

Can you identify more relationships?

Are they misleading?Are they misleading?

Are they suggesting “path”?

36

CS/ITDE 2009-10

Every link needsa control

A box for everytopic

Multiple subtopics in each topic

37

CS/ITDE 2009-10

Mapping a structure on

to mental models

The designer should aim to simplify the information space - this will make navigation, location and orientation more easy.

Information is ordered logically in the human Information is ordered logically in the human mind. Aim to reproduce this structure

People often think in pictures - but also in words. Try not to impose your logic - offer alternatives where possible.

38

CS/ITDE 2009-10

Navigation

• the ability to move around within the application.

• For example, hyper-linking within a web browser or an interactive menu system

39

CS/ITDE 2009-10

Location

• the ability to search for and find specific information within the application

• For example the provision of search engines in a web browser, or the sensible structuring of information in a database to facilitate location of related items

40

CS/ITDE 2009-10

Orientation

• The ability of the user to be aware of their position in the application in terms of

a) The knowledge spacea) The knowledge spaceb) The structure of the application

• for example the provision of interactive maps or descriptions of the knowledge space provided to assist users.

41

CS/ITDE 2009-10

Interaction guidelines• Keep it simple - don’t confuse interaction with navigation

(KISS principal)

• Make sure you understand the information structure before you code it

• Be clear what your aims are - locate - explore - browse

• Provide tools - maps - overviews - buttons - multi-modal?• Provide tools - maps - overviews - buttons - multi-modal?

• Provide support and help features -tips -clues

• Don’t hide information - but also…...

• Don’t put too much on the screen at once

• Be logical - keep things that belong together near together

• Encourage exploration where required, but still give clues.

42

CS/ITDE 2009-10

Some general design

guidelines

• Try to keep information within easy reach

• Relate work-flow to screen layout

• Keep related information together

• A hierarchy with four levels needs three clicks to find anything • A hierarchy with four levels needs three clicks to find anything

• Keep ideas present on the screen - don’t hide

• Keep the need to learn down to a minimum in seldom used applications

• Make sure that standard metaphor is used

• Keep screen design simple - don’t clutter

• Use white space to separate- not boxes

43

CS/ITDE 2009-10

The storyboard

• Once you have decided on a structure, you next create a storyboard.

• Each of the final destinations in your structure can be mapped to a screen in the storyboard

• Keep it simple at first - then add complexity as you • Keep it simple at first - then add complexity as you develop ideas.

• Discuss with colleagues - stakeholders

• This will allow you to build a prototype to test

44

CS/ITDE 2009-10

Merging Flowcharts, PIMSs

and Storyboards

45

CS/ITDE 2009-10

References[1] http://en.wikipedia.org/wiki/Storyboard

[2] Owen Hill, 2007. http://www.storyboards.co.nz/

[3] Matt Queen, 2006. Interaction modeling. User State-Trace Analysis. On: http://www.boxesandarrows.com/view/interaction_modeling[4] SAP DESIGN GUILD, Creating an Interaction Design, Margarete Fuss, Usability Engineering Center, SAP AG – 05/21/2001http://www.sapdesignguild.org/editions/edition3/print_interact_design.asphttp://www.sapdesignguild.org/editions/edition3/print_interact_design.asp

[5] http://jenny.wakefield.net/instruction/instructional-design/design2/storyboarding.html

46