Introduction to User Interface (UI) Design

Active learning works for UI design because students need to experience the gap between intention and outcome firsthand. By sketching, testing, and iterating, they confront real user frustrations that lectures alone cannot convey. This hands-on cycle builds both empathy and technical skill in equal measure.

• Year 7
• Technologies
• 4 activities
• 20 min–40 min

Learning Objectives

1. Design a simple user interface for a given application using wireframing tools.
2. Evaluate the usability of different UI elements based on principles of clarity and consistency.
3. Justify UI design choices by explaining how they support user experience goals.
4. Compare two different UI designs for the same application, identifying strengths and weaknesses of each.

Think-Pair-Share

⏱ 20 min·Pairs

Think-Pair-Share: UI Sketch Challenge

Students think individually for 3 minutes about a simple app interface, like a quiz game menu. They pair up to sketch and share designs, then discuss one strength and one improvement. Share top ideas with the class on a shared board.

Prepare & details

Design a simple user interface for a given application.

Facilitation Tip: During Think-Pair-Share, circulate to push students beyond 'it looks nice' by asking, 'How does this help someone find the button quickly?'

Setup: Standard classroom seating; students turn to a neighbor

Materials: Discussion prompt (projected or printed), Optional: recording sheet for pairs

• Understand
• Apply
• Analyze
• Self-Awareness
• Relationship Skills

Stations Rotation

⏱ 40 min·Small Groups

Stations Rotation: UI Principles Stations

Set up stations for clarity (labeling sketches), consistency (matching buttons), feedback (simulating clicks), and hierarchy (organizing elements). Groups rotate every 7 minutes, applying one principle to a template interface and noting examples. Debrief as a class.

Prepare & details

Evaluate the usability of different UI elements.

Facilitation Tip: In Station Rotation, assign clear roles at each station (e.g., recorder, tester) to ensure every student contributes to the principle cards.

Setup: Tables/desks arranged in 4-6 distinct stations around room

Materials: Station instruction cards, Different materials per station, Rotation timer

• Remember
• Understand
• Apply
• Analyze
• Self-Management
• Relationship Skills

Gallery Walk

⏱ 30 min·Pairs

Peer Testing Circuit: Usability Walkthrough

Pairs create a digital prototype in Scratch. They swap with another pair for a 5-minute think-aloud test, noting confusions. Designers revise based on feedback and report changes to the whole class.

Prepare & details

Justify design choices based on principles of user experience.

Facilitation Tip: For the Peer Testing Circuit, provide a simple task script so testers observe the same behaviors and can compare notes afterward.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Gallery Walk

⏱ 25 min·Small Groups

Gallery Walk: Design Critique

Display printed or projected student interfaces around the room. Students walk in small groups, leaving sticky-note feedback on usability. Hosts respond to notes and select one change to implement immediately.

Prepare & details

Design a simple user interface for a given application.

Facilitation Tip: During Gallery Walk, require students to leave sticky notes with both praise and one specific question, modeling constructive critique.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Teaching This Topic

Teach UI design by framing it as a problem-solving process, not a creativity contest. Research shows that novices focus on decoration until forced to confront user behavior, so prioritize testing early. Avoid letting students spend too long perfecting visuals before validating function. Use real-world examples to anchor abstract principles like hierarchy and feedback, but keep tasks small enough to iterate within one lesson.

What to Expect

Successful learning looks like students confidently balancing aesthetics and function, justifying choices with user needs rather than personal preference. They should critique designs by identifying specific usability issues and propose clear improvements based on peer feedback.

Watch Out for These Misconceptions

Common Misconception

During Think-Pair-Share: UI design is only about colours and images looking attractive.

What to Teach Instead

During Think-Pair-Share, circulate with a simple checklist: 'Is the main action labeled clearly? Can a peer find it without asking?' Redirect students to focus on labeling and placement before they choose colors or fonts.

Common Misconception

During Station Rotation: All users interact with interfaces the same way.

What to Teach Instead

During Station Rotation, provide role cards (e.g., 'grandparent,' 'child,' 'expert gamer') and ask testers to observe how each user navigates the prototype. Students will notice different paths and should adjust button sizes or labels to accommodate them.

Common Misconception

During Gallery Walk: The first design idea is always the best.

What to Teach Instead

During Gallery Walk, post a sign that reads, 'What’s one thing you’d change to make this easier?' This forces students to compare multiple solutions and recognize that iteration improves every design.

Assessment Ideas

Quick Check

After Think-Pair-Share, collect wireframes and review for three elements: a clear main action, consistent labeling, and visible feedback. Ask students to explain their choices aloud to assess understanding.

Peer Assessment

During Peer Testing Circuit, partner students to test each other’s prototypes using a shared task list. Listen for whether they ask testers to explain their actions and whether they identify at least one usability issue with evidence.

Exit Ticket

After Gallery Walk, ask students to complete an exit-ticket naming one UI element they saw that improved usability and one that hindered it, with a brief reason based on today’s activities.

Extensions & Scaffolding

• Challenge: Ask early finishers to redesign their prototype for a user with low vision, using only 2 colors and larger buttons.
• Scaffolding: Provide a partially labeled wireframe template for students who struggle with layout, focusing their energy on one principle at a time.
• Deeper: Invite students to interview a family member about their experience with a common app, then propose one UI change based on that conversation.

Key Vocabulary

User Interface (UI)	The visual elements and interactive components that a user engages with when using a digital product, such as buttons, menus, and screens.
User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a product; good UX means the product is easy, efficient, and enjoyable to use.
Wireframe	A basic visual guide or blueprint that represents the skeletal framework of a user interface, showing layout and content placement without detailed design elements.
Usability	The ease with which users can learn and operate a product to achieve their goals effectively and efficiently.
Hierarchy	The arrangement of elements in order of importance, guiding the user's eye and indicating the relationship between different parts of the interface.