TK Study
HomeLearn step by stepHow to answerMemoriseKey termsFlashcardsNotesMaster answersPast questionsMultiple choiceMock examPractice & marker

Software Engineering › How to answer › Drawing › a storyboard

How to draw a storyboard

A storyboard shows the screens of an interface in order and the actions that move between them. From course notes

What it looks like in the real exam

Reasoned No 2025 NESA question in our bank is a storyboard. It is in the syllabus modelling tools and the school grid gives it about 3 marks (target band 3–4).

From course notes Course grid: Storyboard is worth about 3 marks in the school’s exam-style grid (target band 3–4).

What to show

ItemHow to draw it
Screen (frame)A box for each screen, in order, numbered
ContentThe key elements on each screen (title, buttons, text, images)
NavigationAn arrow from the button or link to the screen it opens, labelled with the user’s action
NotesShort annotations: what a control does, what data appears

From NESA material “Shows the screens of an interface and the links (navigation) between them.”

Method

  1. Read the scenario and list the screens the user needs (Home, Menu, Summary). From course notes
  2. Draw one box per screen in the order a user visits them, left to right. From course notes
  3. Sketch the main elements inside each box (title, buttons, fields) with simple labels. General advice
  4. Draw arrows between screens and label each with the action (“tap Menu”). From course notes
  5. Annotate any behaviour that is not obvious. Check every screen has a way in and out. General advice

Worked example: a food ordering app (original)

HomeMenuMy ordersMenuBurger $8Salad $7Add to orderOrder summary1 x Burger $8Total $8Pay nowtap Menutap AddFrame 1Frame 2Frame 3One frame per screen, in order. Arrows show the user action that moves between frames. Annotate what each button does.
Storyboard of three screens: Home, Menu, Order summary, with arrows labelled by the user action that moves between them

Markers’ checklist

  • One frame per screen, numbered, in order.
  • Key controls and content shown in each frame.
  • Navigation arrows labelled with the user action.
  • Every screen can be reached, and the user can go back or finish.
  • Consistent layout and clear labels.

Common mistakes

  • General advice Frames with no arrows between them.
  • General advice Arrows with no label.
  • General advice Showing one screen only.

Time per mark

Derived The paper averages 1.75 minutes per mark (140 minutes ÷ 80 marks), so a 3-mark drawing question is about 5.3 minutes in total. General advice Suggested split: 1 minute reading and planning, most of the time drawing, and the last minute checking labels against the checklist. Drawing in an online tool is slower than on paper, so practise with the tool on NESA’s familiarisation site.

Practice (3 prompts, with answers)

Item 1 · login flow

Storyboard a login: Login screen, then Home if the login works, or back to Login with an error if it fails.

Show the answer

Frame 1 Login (username, password, Login button); arrow “login correct” → Frame 2 Home; arrow “login fails” → back to Frame 1 with an error message. Original practice

Item 2 · quiz app

Storyboard a quiz: Start, Question, Result.

Show the answer

Frame 1 Start (Start button) → “tap Start” → Frame 2 Question (question text, answer buttons) → “choose answer” → Frame 3 Result (score, Play again). Arrow “tap Play again” from 3 to 1. Original practice

Item 3 · what is missing?

A storyboard shows Home, Menu and Checkout boxes with no arrows. What must be added?

Show the answer

Labelled arrows for the actions (Home → Menu “tap Menu”; Menu → Checkout “tap Checkout”), and the key content in each frame. Original practice

← How to draw an entity relationship diagram (ERD)How to design a user interface mock-up →