Technologies · Year 5

Active learning ideas

Principles of User Interface (UI) Design

Active learning helps students see UI design principles in real contexts, not just abstract ideas. When students critique apps, build wireframes, and test colors, they connect theory to visible results, making abstract concepts concrete and memorable.

• ACARA Content Descriptions
• AC9TDI6P05

• 25–40 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Think-Pair-Share
• 25 min · Pairs

Think-Pair-Share: App Interface Critique

Show screenshots of familiar apps on the board. Students think individually for 2 minutes about layout strengths and weaknesses, pair up to discuss button placement and colors, then share one insight with the class. Record class ideas on a shared chart.

Analyze factors contributing to user-friendly versus frustrating interfaces.

Facilitation Tip

During the Think-Pair-Share, provide a timer so students practice concise feedback, modeling how professionals communicate design critiques.

What to look for

Present students with two different website homepage mockups for a fictional school event. Ask them to identify one element in each design that makes it user-friendly and one element that could be frustrating, explaining their reasoning.

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

Activity 02

• Gallery Walk
• 35 min · Small Groups

Small Group Wireframing: Navigation Challenge

Provide paper templates for a simple app screen. Groups sketch layouts with navigation menus and buttons for a task like 'book a library slot.' Test sketches by passing to another group for 3-minute usability checks and notes.

Explain how button placement influences user behavior.

Facilitation Tip

When groups wireframe, circulate to ask guiding questions like 'Who is the main user? What task should this button complete?' to keep focus on user needs.

What to look for

Students create a simple paper prototype for a new app feature. They then swap prototypes with a partner and attempt to complete a specific task using the prototype. Partners provide feedback on clarity of navigation and button placement, noting any points of confusion.

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

Activity 03

• Stations Rotation
• 40 min · Small Groups

Stations Rotation: Color and Layout Stations

Set up stations with printed grids: one for color contrast tests using markers, one for drag-and-drop button placement puzzles, one for navigation flowchart builds. Groups rotate every 7 minutes, documenting choices and rationale at each.

Design an intuitive interface for a new user.

Facilitation Tip

Set a 2-minute rotation timer for the color and layout stations so students experience quick, focused trials before discussing patterns as a class.

What to look for

Ask students to name one website or app they use regularly and identify one specific UI element (e.g., a button, a menu, a color choice) that they find particularly effective or ineffective, explaining why.

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

Activity 04

• Gallery Walk
• 30 min · Whole Class

Gallery Walk: Peer Designs

Students post their wireframes around the room. Class walks silently, placing dot stickers on effective elements and question marks on confusing ones. Debrief with votes and redesign suggestions.

Analyze factors contributing to user-friendly versus frustrating interfaces.

Facilitation Tip

During the gallery walk, ask each student to find one design element they would reuse and one they would change, reinforcing observational skills.

What to look for

Present students with two different website homepage mockups for a fictional school event. Ask them to identify one element in each design that makes it user-friendly and one element that could be frustrating, explaining their reasoning.

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

A few notes on teaching this unit

Teachers should model how to analyze UI choices using everyday examples students know, like school apps or games. Avoid lecturing about principles first—instead, let students discover them through structured activities. Research shows that hands-on prototyping and immediate feedback help students grasp why certain designs work better than others.

Students will identify how layout, color, and navigation shape user experience. They will explain the purpose behind UI choices and use feedback to refine their designs, showing understanding through discussion, prototypes, and peer reviews.

---

Watch Out for These Misconceptions

• During the Small Group Wireframing, watch for groups adding excessive colors or decorative elements to make their interface 'look fun.'

  Pause the activity and ask groups to consider the purpose of each color. Provide a color wheel with contrast ratios and challenge them to limit their palette to three colors, explaining how each serves a function like alerts or navigation.

• During the Think-Pair-Share, listen for students saying buttons can be placed anywhere as long as they are visible.

  After sharing, display a wireframe with buttons placed randomly and ask pairs to simulate using it. Time how long it takes to complete a task, then compare it to a logical layout. Have students revise the wireframe to follow common UI patterns like the 'F-shaped' scanning path.

• During the Station Rotation, notice students assuming all users prefer the same color schemes or button sizes.

  Provide role cards at each station (e.g., 'older adult,' 'child,' 'person with low vision') and ask students to test layouts under these conditions. Use the debrief to highlight how inclusive design requires testing with diverse user needs.

---

Methods used in this brief

• Think-Pair-Share
• Gallery Walk
• Stations Rotation