Stretch tasks R097 TA1: Planning Interactive Digital Media

Round 1: Quiz Blitz

1. The user's choices change what happens next Websites, apps, kiosks, games and quizzes all respond to the user.
2. Hierarchical Home, sections and sub-sections.
3. Networked Many screens linked many ways suits reference material, but disorients.
4. orphan It can never be reached.
5. True The user is stuck there.
6. Navigation diagram It shows every screen and every link.
7. The error screen Wireframe the confirmation and error states too.
8. 4.5:1 Large text needs at least 3:1.
9. Feedback; Consistency Also clarity, affordance, forgiveness and efficiency.
10. A visual cue that something can be tapped Things that can be tapped should look tappable.
11. Before building, as part of planning Tests written afterwards only test what already works.
12. About 44 pixels Big enough for a thumb, within thumb reach.

Round 2: Quick Fire

1. • An orphan screen has nothing linking to it, so it cannot be reached
   • A dead end has nothing linking out, so the user is stuck
   Model answer

   An orphan screen is one that nothing links to, so it can never be reached. A dead end is one that nothing links out of, so the user is stuck there.

2. • It records which screen each button leads to
   • That turns it into a specification someone can build from
   Model answer

   Annotations record what each button does and which screen it leads to. That turns the wireframe from a picture into a specification that someone can build from without guessing.

3. • A feature, such as alt text, captions or keyboard access
   • Who it helps, such as screen reader users or deaf users
   Model answer

   Alternative text on every meaningful image helps blind users with a screen reader. Captions on every video help deaf users and anyone watching with the sound off.

4. • Tests written afterwards only test what already works
   • Expected results come from the brief, set in advance
   Model answer

   A test plan written after the build only ever tests what already works. Written first, each test's expected result comes from the brief, so the product is checked against what it should do.

Round 3: Big Think

1. • A hub and spoke structure
   • So visitors are always one tap from the start and never lost
   • A navigation diagram checked for dead ends and orphans
   • Wireframes for every distinct screen, including errors
   • A mind map and a mood board
   • A storyboard and script for any narrated video
   • An asset table with licences
   • A test plan covering accessibility
   Model answer

   I would use a hub and spoke structure: a central screen with a button for each dinosaur, each branch returning to the hub, so a visitor who walks up mid-session is always one tap from the start and never gets lost. A navigation diagram would show every screen and link, checked for dead ends and orphan screens, and wireframes would plan every distinct screen, including the idle and error screens. A mind map and mood board would explore the content and agree the look. A storyboard and script would plan any narrated video, and an asset table would record every image and sound with its licence. Finally, a test plan would check large tap targets, strong contrast and captions.

2. • Consistency: elements look and behave the same everywhere
   • Feedback: every tap gives a visible response
   • Clarity: labels say what they do
   • Forgiveness: mistakes can be undone
   • Efficiency: the common task takes the fewest steps
   • Strong contrast and resizable text
   • Alt text, captions and keyboard access
   • Tap targets of about 44 pixels, in thumb reach
   Model answer

   Consistency means the menu and buttons look and behave the same on every screen, so pupils always know where they are. Every tap gives feedback, such as a pressed state or a confirmation that homework was submitted, so nobody taps twice. Buttons have clear labels, such as Submit homework rather than OK, and forgiveness means mistakes can be undone, with deleting work confirmed first. Efficiency puts the common task, checking what is due, one tap away. For accessibility, text needs a contrast of at least 4.5:1 and must be resizable, images need alt text for screen readers, videos need captions, every control must work by keyboard, and tap targets should be about 44 pixels, within thumb reach.

This or That

1. Linear A tutorial moves one screen after another.
2. Hub and spoke A centre with branches that return is hub and spoke.
3. Send message A button should say what it does.
4. Risky: people give up More than three or four steps and people give up.
5. Colour and text Meaning must never be carried by colour alone.
6. Without Leaving out styling keeps the review on structure.
7. Yes: forgiveness Destructive actions should be confirmed, and mistakes undoable.
8. Yes: keyboard access Keyboard access is an accessibility requirement.

Memory Match

• A 4 Navigation diagram: Every screen and the links between them
• B 3 Orphan screen: A screen nothing links to
• C 2 Dead end: A screen nothing links out of
• D 6 Affordance: A cue that something can be tapped
• E 1 Feedback: A visible response to an action
• F 5 Test plan: Tests and expected results, written first

Sort It

1. Hub and spoke A museum kiosk menu Branches return to a central screen.
2. Linear A quiz, one question at a time Each question follows the last.
3. Networked Reference pages cross-linked many ways That is a networked structure.
4. Hub and spoke An exhibit screen that returns to the start Returning to the centre is hub and spoke.
5. Hierarchical A school website with sections Home, sections and sub-sections.
6. Linear An interactive story A story moves forward screen by screen.
7. Networked A wiki Pages link to each other many ways.
8. Hierarchical A council website with sub-sections Most websites are hierarchical.
9. Hub and spoke A phone app's main menu Apps often use hub and spoke.
10. Linear A step-by-step tutorial One screen after another.
11. Networked An online encyclopedia Reference material is networked.
12. Hierarchical A shop with departments and products Departments contain products: a hierarchy.