storyboarding nav maps part i: design 1: tools and techniques … · 2015-01-27 · through,...

Part I: Design 1: Tools and Techniques

& Part II: Design 2: Prototyping,

Testing & Delivery Spring 2014 © University of Stirling

ITNP80: Multimedia 1

Design Tools and Techniques

Spring 2014 © University of Stirling


•  Brainstorming

•  Storyboarding

•  Nav Maps

•  Task analysis

•  Prototyping

•  Testing

•  Delivery

Brainstorming



The term �Brainstorming��is commonly used as a generic term for �Creative Thinking�.

The basis of brainstorming is generating ideas in a group situation based on the principle of...

Brainstorming (2)



Brainstorming is a process that works best with a group of people when you use the following four rules*:

1. Have a well-defined and clearly stated problem

2. Have someone assigned to write down all the ideas as they occur

3. Have the right number of people in the group

4. …

*from Michael Morgan's book Creative Workforce Innovation

Brainstorming (3)



4. Have someone in charge to help enforce the following guidelines:

•  Suspend judgment •  Every idea is accepted and recorded •  Encourage people to build on the ideas of others •  Encourage way-out and odd ideas.

Brainstorming (4)



The whole idea of brainstorming is that other people's remarks act to stimulate your own ideas in a sort of chain reaction of ideas.

However, you do not have to have a group to brainstorm an idea.

It is a good starting point to use creative thinking on an idea on your own and then, once you�ve thought it through, brainstorm it in a group.

Brainstorming - The Results

•  Select the 5 ideas you like best •  Write down 5 criteria for judging which ideas best

solve the problem: “should” –  “it should be cost effective” –  “it should be possible to finish on time”

•  Give each idea a score from 0 to 5 depending on how well it meets each criteria

•  Idea with the highest score wins! But DO NOT throw the other ideas away - your top idea may prove unworkable later on!



Storyboarding



Storyboarding is exactly what it sounds like.

Consider the approach taken from the film industry...

The writers or directors produce a storyboard for the movies they want to make.

Each scene is depicted with the actors, their movements, the camera positions etc in enough detail that the crew know what to set up.

This approach can be used for multimedia (and app) design.



Example Storyboards http://staff9.cis.uoguelph. ca/planets.htm (defunct)

Storyboarding (3)



Each screen is documented… �sketched�

It used to be by hand with rough drawings, now you can get software tools which assist the designer…

http://www.powerproduction.com/quick/example/example.html

Personally I still think you can�t beat a good sharp pencil and some A3 or A4 paper.

Coloured crayons can be used to highlight themes etc

Storyboarding (4)



You sketch out every page or screen of the presentation, highlighting interactions and components such as:

•  Description of page •  Text and narration content •  Graphics •  Video: including voice-over script •  3D/animation •  Audio •  Links to & from any external programs

Nav Maps



NAVigational MAPS are the next stage in developing the overall design of a multimedia project.

They show how a user will navigate through the various screens and individual elements of the presentation.

There are a number of different forms of Nav Maps indicating the navigational possibilities of the user�s experience...

Nav Maps (2)



Linear:

Hierarchical:

Nonlinear:

Nav Maps (3)



Composite:

Users may navigate freely (nonlinear) but are constrained to linear presentations of movies or critical information and/or to data that are most logically organised in a hierarchy.

Nav Maps and Storyboards

•  Nav Maps can often be shown in combination with the storyboards

•  Use separate Nav Map when this gets unmanageable on a single sheet of paper



(http://staff9.cis.uoguelph. ca/planets.htm)

Tasks



So we have our brainstormed ideas, roughed out storyboards and nav maps drawn to match our storyboards.

To complete our initial design, we need to be able to judge whether or not it has logical, sensible, �easy� tasks that the user wants to do...

Can they traverse from A to B simply and easily within 3 clicks or less?

Can they find the information on… ?

e.g. Find out about the Wallace Monument in a Stirling tourist information system.

User-Centered Design

•  Analyse the design from the user�s point of view... •  Goals - a state of the system that the user wishes to

achieve •  Tasks - activities required to achieve a goal •  Actions - simple tasks involving no problem solving

–  E.g. simple actions, such as clicking buttons, required to carry out tasks

•  Preece et al, Chapt. 20 pg 409



Goals-Tasks-Actions

•  Goal is driving a car •  Tasks: start the car, put it in gear, release brake,

accelerate, steer •  Actions: insert the key, turn the key, select a gear,

press the accelerator, turn the steering wheel

•  What happens when someone who has only driven an automatic finds themselves in a manual car?

•  Preece et al, Chapt. 20 pg 409 Spring 2014 © University of Stirling


Task Analysis



We approach a user-centered design by carrying out a task analysis.

There are 3 basic forms of task analysis:

•  Hierarchical task decomposition

•  Knowledge analysis of tasks

•  Entity-relation based analysis

Hierarchical Task Decomposition



The task or goal which is set for the user is �decomposed� into sets of sequential steps.

This approach has traditionally been used for usability testing. However it can be successfully applied to the initial stages of product design.

This approach highlights usability and design problems much earlier in the multimedia design life cycle.

Task Decomposition (2)



Consider vacuum cleaning a house… •  We need to get the vacuum cleaner out •  Fix the appropriate attachment •  Plug the cleaner into the socket •  Clean the rooms

–  hall –  living rooms –  bedrooms etc

•  Empty the dust bag •  Put the vacuum cleaner and attachments away

Task Decomposition (2b)



0 In order to clean a house 1 Get the vacuum cleaner out 2 Fix the appropriate attachment 3 Clean the rooms 3.1 clean the hall 3.2 clean the living rooms 3.3 clean the bedrooms

4 Empty the dust bag 5 Put the vacuum cleaner and attachments away.

Identify each step and associated sub-step...

Task Decomposition (2c)



Plan 0: Do 1-2-3-5 in that order, when the dust bag gets full do 4.

Plan 3: Do any of 3.1, 3.2, 3.3 in any order depending on which rooms need cleaning.

(We might want to be more specific about task 3)

Define the processing order...




Our aim in Hierarchical Task Analysis (HTA) is to discover the most meaningful representation of the decomposition structure.

We do this by asking: what sub-tasks must be accomplished in order to perform the main task?

To answer the question we refer to various sources, such as direct observation, expert opinion, documentation and so on...

Knowledge acquisition and analysis




We now look at each sub-task and seek to subdivide it...

We could continue this process indefinitely, which means we must apply some form of �Stopping Rule�.

The level at which we do this will depend on

(a) the purpose of the task analysis

(b) when sub-tasks can be considered actions

Stopping rule: we could apply the following formula: P (Probability of making a mistake) X C (Cost of mistake made)

- if the value is below a threshold the expansion is stopped.




Consider a �First Level� decomposition of what to do in an emergency at a chemical plant:- 0 In an emergency

1 Read the alarms 2 Work out appropriate corrective action 3 Perform corrective action

If our aim is to install computer monitoring of the plant, we would want to expand 1 and 3.

However, if we want to produce on-line operations manuals we would expand 2.

Knowledge Analysis of Tasks



Knowledge-based techniques look at what the users need to know about the objects and actions involved in a task, and how that knowledge is organised. Knowledge-based task analysis begins by listing all the objects and actions involved in the task and then building taxonomies of these...

Animals are invertebrates or vertebrates, vertebrates are fish, birds, reptiles, amphibians or mammals etc.

•  General organisation of presentation

•  Online help

Entity-Relationship Analysis



An object-based approach where the emphasis is on:

•  Identifying the actors and objects,

•  The relationships between them and

•  The actions they perform

Useful for development of nonlinear or composite navigational structures.

Person Car Owns

Person Car Drives



End Of Lecture Design 2: Prototyping, Testing & Delivery



The Design Lifecycle



•  Brainstorming

•  Storyboards •  Nav Maps

•  Task Analysis

•  Prototyping

•  Testing

•  Delivery

Prototyping



We have our brief…

-We have brainstormed our ideas..

-Designed our presentation using storyboarding, nav maps and task analysis…

But before we present to the client it is as well to show them something of the functionality…

-Here we use a prototype or proof of concept approach.

-Prototypes are nothing new or novel. They are a mock up of what the real thing will be or do.

Prototyping (2)



If we were designing a car we would probably have a mock-up made in wood to show the design - this mock up would be our �prototype�.

For the multimedia presentation we use different tools but the objectives are the same...

Building a Prototype

•  Collect together what assets you have –  text, images, video, sound etc

•  Create mock-ups of any media that are missing

•  Create a prototype presentation based on your storyboards, nav maps and task analysis.



That�s a tree!

Building a Prototype (2) •  Build enough to demonstrate the “look and feel” of

the final system –  different styles of content and its presentation –  different methods of navigation and interaction –  horizontal / vertical prototypes

•  Indicate clearly when content is incomplete –  text box saying “30 second video clip of blah, blah, blah…

goes here” –  popup saying “This path will contain…” when user clicks on

a navigational button for an incomplete subsection •  Now you are ready for some serious testing...



Testing Your Multimedia System



Functionality:

•  Does clicking this button take you to the right screen?

•  Collection and collation of results from quizzes

Usability:

•  Can a user navigate as you expect?

•  Does the message get across?

Testing Functionality •  Functionality includes the entire operation of your

multimedia system –  layout of media –  navigation

•  Specified by storyboards, nav maps and task analysis •  May be simpler than your average computer

program, but still needs testing! –  And there could be complex code underlying the dynamics,

interactivity and navigational strategies



White Box Testing •  For a multimedia presentation … •  Detailed check of functionality against storyboards,

nav maps and task analysis •  Check of control code for interactivity and navigation •  Very easy to have a button with a link to the wrong

place, or accidentally include an image on the wrong page or in the wrong place!

•  White box testing precedes black box testing –  will be going on throughout the development of the prototype



Black Box Testing



We are asking, �Does the presentation match the specification?� (verification)

For a multimedia presentation, this means

•  Are all the strands of the presentation there?

•  Is all the necessary information included?

•  Can all the goals specified in a task analysis actually be reached?

BEWARE ! - specifications are not always a statement of what the user wants!

Usability Testing



We want our presentation to be usable… All issues and techniques of usability testing from HCI apply… But also...

We want our multimedia system to be suitable for the user.

We differ in terms of usability in that we are also looking to see if our presentation �works� and to evaluate whether we achieve our goals by using multimedia or if we have chosen the correct delivery environment for the presentation.

Gathering Usability Information



How do we gather information about the usability of our presentation?

There are many approaches we can adopt…

•  Questionnaires

•  Field trials

•  Focus groups

Questionnaires



The questionnaire approach can prove very useful.

Firstly we have to decide what it is we want to find out:

•  Validation – does the concept work?

•  Verification – does it match the specification?

•  Functionality – does it have the right functionality?

•  Enhancement – what more could it have?

Structuring questionnaires is a distinct skill where the designer can, if not careful, ask the wrong question to find out the information.

Questionnaires (2)



Questionnaires are used

•  on a cold call basis - e.g. here is a sample of our product…

•  in field trials

The major problem with a questionnaire... given that you have designed one exactly how it is required! … is that it requires processing... i.e. effort and time… that means money.

Field Trials



Field trials are an essential component in the testing of a multimedia project.

This is where we throw the presentation at the real users to see how they interact with it and how the interface components perform.

Typically a number of users are given the program to run and are either asked to fill in a questionnaire or are asked pointed comments by the facilitator.

Users are given more or less direction on what to do with the presentation. Task analysis can form the basis of this testing.

Focus Groups



Focus groups form an added input into both the design and re-design process.

Here we can conduct guided field trials or discuss the whole aspect of the presentation i.e.

What would you want from a tour of Stirling?

What kinds of things would you like this program or presentation to involve?

Here we can also attempt to gain a better insight into what the user expects etc

What do you understand by the term Multimedia Presentation?

Focus Groups (2)



The other format of a focus group is to run a lab session or introduction to the software or presentation and then allow the focus group to utilise the program without supervision.

This approach is especially useful for educational titles where the teacher can effectively run a complete lesson and observe the students whilst they operate the multimedia system.

Delivery to the Client



So we have tested, gained feedback, modified the product so that everything is now ready to deliver to the customer…

But exactly what do we deliver?

This will depend on the goal of the presentation… is it aimed at a kiosk (stand-alone installation) or for delivery in a magazine (CD-Rom) or are we delivering a web-based presentation etc

Each has it�s own foibles and pitfalls… the biggest is maintenance and upgrades.

Delivery Methods

•  CD-ROM and DVD –  large amounts of storage (650Mb for CD) with fast access –  playable on most PCs with predictable results –  always available (providing PC is working!) –  user has no need for an Internet connection –  no ongoing costs to user after initial purchase –  expensive to update: production and distribution



(Useful summary in David Dick�s �PC Multimedia & Web Handbook�)

Delivery Methods (2)

•  Internet –  potentially accessed by huge audience –  access can be very slow

•  streaming techniques for audio and video –  two-way traffic possible

•  email, forms for feedback –  easily updated –  ISP will charge producer by bandwidth usage

•  unless producer has own (expensive) web server –  ongoing costs to user for Internet access –  additional commercial opportunities

•  advertising, mailing lists



Delivery Methods (3) •  Intranet

–  (fast) local area network with own web server –  known user technology

•  bandwidth and browser –  secure

•  Kiosk –  fixed installation with producer-specified hardware

•  touch sensitive screen –  hard disks provide high bandwidth and (unlimited) storage –  must be reliable (perhaps 24 hours a day)

•  Electronic presentations –  maybe stored on laptop PC –  data projector



What to Deliver



Remember to deliver only the protected presentation, unless you want everyone to copy your code or to �borrow� your artwork etc

Once the CD-Rom or other delivery medium is sorted, another phase of testing on a cleaned down platform or virgin platform is essential!

You need to have a platform which contains ONLY the minimum spec that you have specified for the production. NOTHING ELSE!!!!



End Of Lecture

storyboarding nav maps part i: design 1: tools and techniques … · 2015-01-27 · through,...

Documents