Usability and User Experience (UX)

Active learning works well for UI/UX because students must experience design flaws firsthand to truly grasp their impact. When students test and critique real interfaces, they move from abstract ideas to concrete understanding of how visual and interactive elements shape user behavior.

• Year 8
• Technologies
• 3 activities
• 20 min–45 min

Learning Objectives

1. Compare and contrast the core principles of User Interface (UI) and User Experience (UX) design.
2. Analyze specific examples of digital products to identify instances of poor UX leading to user frustration.
3. Evaluate the impact of usability, utility, and desirability on the success of a digital product.
4. Justify design choices for a digital interface based on UX principles to improve user satisfaction.
5. Synthesize user feedback to propose improvements for an existing digital product's UX.

Gallery Walk

⏱ 40 min·Small Groups

Gallery Walk: UI Hall of Fame and Shame

Students bring in screenshots of apps they love and hate. They display them around the room and use sticky notes to identify specific UI principles (like contrast or consistency) that make the interface successful or frustrating.

Prepare & details

Differentiate between User Interface (UI) and User Experience (UX) design.

Facilitation Tip: During the Gallery Walk, position yourself near the 'Shame' section first to model how to frame constructive criticism without discouraging creators.

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

Think-Pair-Share

⏱ 20 min·Pairs

Think-Pair-Share: The Icon Challenge

Students are given a list of abstract functions (e.g., 'sync data', 'archive', 'view history') and must sketch an icon for each. They pair up to see if their partner can guess the function without being told, testing the clarity of their design.

Prepare & details

Analyze how poor UX design can lead to user frustration and abandonment.

Facilitation Tip: During the Think-Pair-Share, provide a handout with iconography examples so students can annotate their thoughts before sharing aloud.

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

Inquiry Circle

⏱ 45 min·Small Groups

Inquiry Circle: Color Psychology

Groups research how different colors are perceived in different cultures (e.g., red for danger vs. red for luck). They then redesign a 'Warning' button for a global audience, presenting their choice of color and shape to the class.

Prepare & details

Justify the investment in good UX design for digital products.

Facilitation Tip: During the Collaborative Investigation, assign each group a different color emotion to research so presentations stay focused and time-efficient.

Setup: Groups at tables with access to source materials

Materials: Source material collection, Inquiry cycle worksheet, Question generation protocol, Findings presentation template

• Analyze
• Evaluate
• Create
• Self-Management
• Self-Awareness

Teaching This Topic

Teachers should treat UI/UX as a user-centered process, not a technical skill. Focus on empathy-building activities where students step into the user’s shoes. Avoid teaching design rules in isolation; instead, connect principles to real user frustrations and successes. Research shows that students retain UX concepts better when they experience the consequences of poor design choices themselves.

What to Expect

By the end of these activities, students will confidently identify UI principles in existing designs and apply them to their own projects. They will recognize that good UX feels effortless and that their role is to make technology intuitive for users not technically savvy.

Watch Out for These Misconceptions

Common Misconception

During Gallery Walk: Watch for students who dismiss designs as 'just ugly' without considering usability.

What to Teach Instead

Ask them to identify a specific UI element that failed to communicate its function, such as a poorly labeled icon or a confusing button placement.

Common Misconception

During the Icon Challenge: Watch for students who assume icons must represent their literal meaning.

What to Teach Instead

Have them test their icons by covering the label and asking a peer to guess the function, then refine based on the results.

Assessment Ideas

Exit Ticket

After Gallery Walk, provide a QR code linking to a poorly designed digital form. Ask students to write one UI flaw they observed and one UX frustration they predicted a user would feel.

Quick Check

After the Icon Challenge, present two sets of icons for the same function (e.g., save). Ask students to identify which set better suggests the action and explain their choice in one sentence.

Discussion Prompt

During Collaborative Investigation, have groups share their color psychology findings and ask the class to vote on which color scheme would work best for a school library app and why.

Extensions & Scaffolding

• Challenge: Ask students to redesign a poorly rated UI element from the Gallery Walk and present their solution to the class.
• Scaffolding: Provide a template with labeled UI components (e.g., navigation bar, buttons) for students to fill in during the Icon Challenge.
• Deeper exploration: Have students research accessibility guidelines (e.g., WCAG) and revise their designs to meet at least two criteria.

Key Vocabulary

User Interface (UI)	The visual and interactive elements of a digital product that a user directly interacts with, such as buttons, menus, and screens.
User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a digital product, encompassing usability, utility, and desirability.
Usability	The ease with which users can learn and use a digital product to achieve their goals effectively and efficiently.
Utility	The degree to which a digital product meets the needs of its users and provides them with valuable functionality.
Desirability	The extent to which a digital product is appealing, engaging, and enjoyable for users, often influenced by branding and emotional connection.