← Back to course
Intro to CS 9-10 / Week 01 / Wednesday
3/6
Week 01 · Design Before Code

Wednesday

Beacon Lab: Storyboard three screens
// Investigate, plan and storyboard Beacon
⏱ about 20 min

Wednesday: Beacon Lab: Storyboard Three Screens

Comet has already drawn a single giant screen packed with every number Beacon could ever show.

Wren tilts his head at it. "What do you notice? Lena would need a magnifying glass to find her dry row."

Comet laughs at her own sketch. "Okay, okay. We can improve it."

Nova projects three empty rectangles onto the greenhouse wall. "Would you like a hint?" she asks.

"Give each requirement a home. One screen for the plants, one for alerts, one for mission control."

Comet tears off three fresh index cards and slides them across to you. "Developer, you sketch. I will hold the pencils."

Your mission

The design phase of a program may include brainstorming, storyboarding and diagrams of the user interface layout.

Today you storyboard Beacon on paper. A storyboard is a set of sketches that plans each screen and what the user does on it.

You will place each requirement on the right screen, then test your storyboard with a partner.

  • Three index cards or three sheets of paper
  • A pencil and an eraser
  • A ruler (optional)
  • Sticky notes or scraps of paper for buttons
  • A partner or family member to play Lena
  1. Label your three cards: Plant Status, Alerts, and Send to Mission Control.
  2. Read the requirements table below. Decide which screen each requirement belongs on.
  3. On Plant Status, sketch a box for each row of plants with a place for its water level.
  4. On Alerts, sketch where a calm message such as "The tomatoes need water" would appear.
  5. On Send to Mission Control, sketch a photo box and a message box.
  6. Add one button per screen on a sticky note, and draw an arrow to the screen it opens.
  7. Hand the cards to your partner. Ask them to find the driest row without your help, and watch.
  8. No partner today? Set the cards aside for an hour, then try the task yourself as if you were Lena.
RequirementWhich screen?
R1: Show the water level of every row.
R3: Send one photo of the beans each morning.
R4: Message mission control only when a plant needs attention.
R5: Show light and temperature readings next to each row.
R6: Let a crew member add a short note to a photo.
PLACE THE REQUIREMENTS
  • Read the question.
  • Tap your answer.
R1: Show the water level of every row. Which screen?
R6: Let a crew member add a short note to a photo. Which screen?
A calm message, "The beans need water." Which screen?
PREDICT BEFORE YOUR PARTNER TESTS IT
  • Read the question.
  • Tap your answer.
Will your partner find the driest row faster on Comet's one giant screen, or on your Plant Status card?
On paper, sketch all three Beacon screens side by side. Label each button and draw arrows between the screens.
A set of sketches that plans each screen is a ____.
Watching your partner use your paper screens is user ____.
What the lab showsTrue or false?
A storyboard can be tested before any code is written.?
Every requirement should be crammed onto one screen.?
Watching a partner use your sketch is a kind of user testing.?
If your partner gets confused, the partner made a mistake.?
WHY THIS EXERCISEWhen a user gets confused, it is a clue about the design, not a failure by the user.
Try it
Find a printed form, a menu board or a sign at home or school.
Sketch how you would split its information across two or three simpler screens.

Excellent lab work. Tomorrow you learn how teams build a program one piece at a time.

← Tuesday