R097 TA1: Planning Interactive Digital Media
Interactive means the user decides what happens, so you are not planning one experience but every route through it. Internally assessed.
Types of interactive product and their structures
What counts as interactive
Websites, apps, kiosks and exhibits, e-learning, interactive video, games, quizzes, virtual tours. The common property is that the user's choices change what happens next.
Navigation structures
| Structure | Shape | Suits | Risk |
|---|---|---|---|
| Linear | One screen after another | A tutorial, a story, a quiz | Frustrating if the user wants to skip ahead |
| Hierarchical | Home, sections, sub-sections | Most websites | Content buried too deep |
| Hub and spoke | A centre with branches that return | Apps, kiosks, menus | The hub becomes crowded |
| Networked | Many screens linked many ways | Reference material, wikis | Users lose track of where they are |
Most real products mix them: a hierarchical site with a linear checkout inside it.
The planning documents
| Document | Purpose |
|---|---|
| Client brief interpretation | Purpose, audience, message, content, constraints |
| Mind map | Exploring content and features before committing |
| Mood board | Agreeing look and feel |
| Navigation diagram | Every screen, every link. The most important document here |
| Wireframes | The layout of each distinct screen, without styling |
| Storyboard | Any video or animated sequence inside the product |
| Script | Narration, dialogue and on screen text |
| Asset table | Every asset, with source, format and licence |
| Work plan | Tasks, order, dependencies, milestones, contingency |
Step 1 of 3 Linear: one route, start to finish. A guided tour or a quiz.
Navigation diagrams and wireframes
Checking a navigation diagram
Every screen is a box, every link an arrow. Then test it:
- Can every screen be reached from the entry point?
- Does every screen have a route back or onward?
- Are there dead ends, where the user is stuck?
- Is anything too deep? More than three or four steps and people give up.
- Is the structure consistent, so the user always knows where they are?
An orphan screen is one nothing links to. A dead end is one nothing links out of. Both are obvious on a diagram and invisible in a half built product.
Wireframes
A wireframe shows placement and nothing else: boxes with a cross for images, grey bars for text, named rectangles for buttons. Leaving out colour and type is deliberate, because it keeps the review focused on structure rather than taste.
Wireframe every distinct screen: the home screen, a content screen, a form, a confirmation, and the error state. The error state is the one everybody forgets and users see most.
Write what each button does and which screen it leads to. A wireframe without that is a picture; with it, it is a specification.
- The home screen is the entry point. Everything is measured from here.
- One click down: the main sections. This is where most visitors stop.
- Two clicks down: the content itself. Still comfortable.
- Four clicks down: almost nobody gets here, however good it is.
- And watch for a screen with no way out, or no way in at all.
Interface design and accessibility
Principles that get credited
- Consistency — the same element looks and behaves the same everywhere
- Feedback — every action produces a visible response, so nobody taps twice
- Clarity — buttons say what they do; "Submit" is worse than "Send message"
- Affordance — things that can be tapped look tappable
- Forgiveness — mistakes can be undone and destructive actions confirm first
- Efficiency — the common task takes the fewest steps
- Recognition over recall — show the options rather than making people remember them
Accessibility, which is both assessed and a legal duty
| Requirement | What it means in practice |
|---|---|
| Contrast | At least 4.5:1 for body text, 3:1 for large text |
| Text size | Resizable, and never below about 16 pixels for body text on screen |
| Alternative text | Every meaningful image described; decorative images marked as such |
| Captions and transcripts | For all video and audio |
| Keyboard access | Every control reachable and operable without a mouse |
| Focus visible | It is always clear which control is selected |
| Not colour alone | Meaning carried by text or shape as well as colour |
| Tap targets | Around 44 pixels minimum, within thumb reach on mobile |
Planning the testing before building
Write the test plan as part of the planning, not afterwards. For each test: what is being tested, the data or action used, the expected result, and space for the actual result. Tests written after the build only ever test what already works.
- Consistency: the same action looks and behaves the same everywhere.
- Accessibility: large tap targets and strong colour contrast.
- Clarity: buttons say what they do, so Next question beats OK.
- Simplicity: fewer options, one thing at a time.
- Feedback: every action gets a visible response.
- Forgiveness: mistakes can be undone.
Key terms you must be able to define
- Interactive product
- A product in which the user's choices determine what happens next.
- Navigation diagram
- A diagram of every screen in a product and the links between them.
- Wireframe
- A layout plan of one screen showing placement without styling.
- Dead end
- A screen the user cannot continue or return from.
- Orphan screen
- A screen that nothing links to, so it can never be reached.
- Hub and spoke
- A structure with a central screen and branches that return to it.
- Affordance
- A visual cue showing that an element can be interacted with.
- Feedback
- A visible response confirming to the user that an action registered.
- Test plan
- A document written before building, listing each test, its data and its expected result.
Flashcards
Say the definition out loud before you flip the card. Retrieving it from memory is what builds recall, reading it again is not.
Reach the top grade on this topic
- Produce a navigation diagram covering every screen, with no dead ends or orphans
- Wireframe every distinct screen, including the error and confirmation states
- Annotate each wireframe with what every control does and where it leads
- Plan accessibility in, rather than retrofitting it
- Write the test plan before building, including tests you expect to fail
- Justify structural choices against the audience and the purpose
Mistakes that cost marks here
- Producing a navigation diagram with dead ends or unreachable screens.
- Wireframing only the home screen.
- Forgetting the error and confirmation screens, which users see most.
- Leaving accessibility until after the build, when it means rework.
- Writing the test plan after building, so it only tests what already works.
- Choosing a structure by habit rather than by what the content needs.
Interactive means the user controls what happens, and that single property changes everything about planning. You are not designing one path, you are designing every path somebody could take, including the ones you would never choose yourself.
Knowledge check
Check you could explain this
Five written questions in the style of the real paper. Write a full answer, then let the marker check it against the mark scheme.
- LIt shows every screen and how they connect
- LIt allows checking that every screen is reachable with a route back
- LStructural problems are far cheaper to fix on a diagram
A navigation diagram maps every screen as a box and shows with arrows which screen each link leads to, so the whole structure can be seen at once. That makes it possible to verify that every screen can be reached, that there is always a route back or onward so nobody becomes stuck at a dead end, and that nothing important is buried so deep that users abandon it. Fixing those problems on a diagram takes minutes; discovering after the product is built that a whole section is unreachable means rebuilding the navigation and often restructuring several screens with content already in them.
- LSufficient colour contrast
- LAlternative text for images
- LCaptions or transcripts for audio and video
- LKeyboard operability, or not relying on colour alone
Text must meet a contrast ratio of at least 4.5:1 against its background, so it stays readable for users with low vision. Every meaningful image needs alternative text, so a screen reader can describe it rather than announcing an unlabelled graphic. All video and audio needs captions or a transcript, which serves deaf users and also the many people using the product with the sound off. Every control must be operable by keyboard alone, with a visible focus indicator, because a large number of users cannot use a mouse or a touchscreen accurately.
- LA suitable structure is named
- LJustified for a public kiosk
- LThe navigation diagram is described
- LDead ends and depth are addressed
- LWireframes for each distinct screen
- LA kiosk specific consideration
A hub and spoke structure is the right choice. The menu is the hub, each of the six topics is a spoke, and every topic screen returns directly to the menu, which means the deepest the visitor ever goes is two taps and they can always get back in one. That suits a public kiosk specifically: visitors arrive with no instructions, stay for a minute or two, and the next person needs to find the exhibit in its starting state. A hierarchical structure with sub-sections would bury content and leave people stranded; a linear structure would force them through topics they do not care about. I would plan it with a navigation diagram showing the attract screen, the menu, the six topic screens and the video on each, with arrows in both directions, which makes it easy to confirm there are no dead ends and no screen more than two steps from the menu. Then I would wireframe each distinct screen rather than just the menu: the attract loop, the menu, a topic screen with text, image and video, and the video playing state with its own controls. Being a kiosk adds requirements that belong in the plan rather than being discovered later: an idle timeout that returns to the attract screen after a minute of no input, tap targets large enough for a visitor who is standing and not looking closely, no reliance on a keyboard, and a layout that works for both a child and an adult at a fixed screen height.