CEPD · Module 2 — Visual and information design for screens
One primary action, one focal graphic, CAP checklist (contrast, alignment, proximity, white space, balance, repetition), and a clear reading order.
About 18 min
Practice in the lesson player
Sorting, matching, quizzes, and the module gate stay behind a free account so scored answers are not public. The teaching notes below are the same cited curriculum.
01
Information design on a learning screen is not decoration. Nielsen Norman’s visibility heuristic applies to lesson players: learners should see where they are, what matters now, and what to do next. A screen with equal-weight bullets, a stock photo, and three buttons competes with itself.
02
Open each zone. Production maps title, focal graphic, and primary action — not decorative clutter.
Title = outcome: States what the learner will do, not chapter number.
Focal graphic: Instructional art — not wallpaper.
Primary CTA: One obvious continue/check action.
03
Six QC checks before you ship a screen. Fail any one → fix before Studio polish.
Contrast — Text and critical UI meet WCAG contrast; key actions do not blend into the background.
Alignment — Edges share a grid. Random left/right offsets look unfinished and raise scanning cost.
Proximity — Related items sit together; unrelated items separate. Labels hug their fields.
White space — Breathing room is instructional — not “empty.” Crowding raises extraneous load.
Balance — Visual weight matches importance. A huge stock photo and a tiny CTA reverse the hierarchy.
Repetition — Chrome, type scale, and button styles repeat across the course so learners learn the UI once.