Session Teaching Card
Design the Interface and Content
What structure, words, and choices make the experience clear?
Objective
Create structure, hierarchy, navigation, and key messages.
Method
Wireframing and content hierarchy
Evidence
Wireframe
Setup Notes
- Prepare wireframe examples showing hierarchy, navigation, labels, calls to action, and empty states.
- Review accessibility basics: readable text, contrast, clear labels, and predictable navigation.
- Make paper or digital wireframe templates available.
Key Teaching Points
- Interface design makes the promise visible.
- Words are part of the design, not decoration after the fact.
- The most important action or information should be obvious without explanation.
Activity Guidance
- 1Annotate a model wireframe and name hierarchy decisions.
- 2Students draft a wireframe and write the key content blocks.
- 3Run a clarity pass where peers point to the first thing they notice and the next action.
Discussion Prompts
- What should the user see first?
- Which words make the action clearer?
- What information can move later or disappear?
Reflection
What should be obvious without explanation?
Teacher Watch
Challenge decorative design choices that do not support the user path.
Support
Give a simple page structure: title, user need, action, supporting details, next step.
Extension
Ask students to create mobile and desktop versions with the same hierarchy.