Understanding HCI

Storyboards

What is a Storyboard?

Technique from film-making:

  1. series of scenes/frames from the user experience point of view
  2. communicate the feel of the ‘flow’ of the design
  3. usually based on scenarios
  4. storyboards normally contain
    1. a sketch of the visual elements
    2. descriptions of animations
    3. descriptions of interactions (e.g. dialog boxes)
    4. descriptions of sounds
    5. descriptions of any other media

Types of storyboards:

  1. traditional - frames with a sketch of what is on screen sometimes with some text underneath.
  2. scored - Style applicable to multi-media presentations / dynamic designs. Uses notation that tells you what motion effects, sounds, animations are occurring.
  3. text only: what images/text/other media are on screen, what’s happening – but using text only.

Why Use it?

The storyboard can be used in two ways:

  1. It can consist of mock-ups of the screens with the various elements moveable around each screen. Blu-tack can be used to hold the final structure in place
  2. It can be used to trace progression from one part of the screen to another and to check understanding of the various commands, dialogues etc. to confirm previous task analysis

Participants Needed

The designer is the only participant needed for the actual creation of the storyboard.

Conditions required

  1. Need paper, pens, colouring pencils to sketch initial concepts
  2. Is first draft of actual design so inspiration is needed - moodboards, magazines, tactile and visual materials
  3. Need list of requirements from requirements analysis
  4. May need navigation chart - which pages link to each other, how many 'types' of pages / screen are there?

Task List

  1. View source material - moodboards, requirements, navigation map
  2. Quickly sketch on paper several initial concepts
  3. Select some of these sketches and check that they meet the requirements and navigation map
  4. Refine these to meet requirements and navigation map criteria if they do not already
  5. In some situations, clients may like to view an image of the final piece, so it may be necessary to mock up a digital version using image editing tools - experienced designers occasionally go straight to this stage but it can constrain creativity as it is very time intensive

Examples

Edinburgh Tourist website

  1. intro, results & detail screens

GI unit PDA

  1. Storyboard for Checking Drug Compatibility Scenario
  2. Storyboard for Complete Process Scenario from Login to Print Bill

Other

Limitations Of method

  1. Can be time consuming
  2. If analysis stage is incomplete, storyboards may not accurately reflect actual process to be implemented
  3. Some individuals can be overwhelmed by the 'drawing' process

Exercise

You have been commissioned to design the interface for an on-line phone messaging management system. In this system, messages which are recorded in a phone inbox or message minder system are converted to text and stored on-line on a system similar to email. Since this is an original system it is your job to explore and experiment with the types of facilities a user may require. Examples include saving, deletion, message management, number blocking and direct to inbox for certain numbers. Feel free to come up wtith new and innovative features which may attract users. Use brainstorming, scenarios and task analysis for this phase. Finally, create a series of storyboards which visually explore a particular scenario..

Reading

  1. How to do storyboards in Director
  2. Screen Layout – Part I: General Considerations
  3. Understanding Screen Layout
  4. big, Stark & Chunky