Visual & Performing Arts · 6th Grade · Media Arts and Digital Storytelling · Weeks 28-36

Interactive Media and User Experience

Introduction to interactive media, exploring how user experience (UX) design influences engagement and usability.

• Common Core State Standards
• NCAS: Creating MA.Cr1.1.6
• NCAS: Connecting MA.Cn10.1.6

About This Topic

Interactive media design asks a question that students rarely think to ask about the digital tools they use every day: why is this built the way it is? User experience (UX) design is the practice of shaping digital interactions so they feel intuitive, efficient, and appropriate for the intended audience. For sixth graders in US K-12 arts classrooms, this topic introduces concepts like visual hierarchy, navigation, affordance, and feedback -- the principles that determine whether clicking a button feels satisfying or confusing.

The NCAS Creating standards at this level ask students to generate and develop artistic ideas using varied media, which maps directly onto the iterative process of UX design: sketch, prototype, test with a real user, and revise. Students who have already worked with graphic design and digital storytelling in this unit bring relevant prior knowledge about visual composition and audience awareness that transfers naturally to interaction design.

Active learning is especially effective for UX because the whole discipline is grounded in observing how real people behave with designed systems. When students prototype on paper, navigate each other's interfaces, and give specific feedback about where they got confused or lost, they experience both sides of the design relationship. That firsthand observation of user behavior is more instructive than any definition of good design.

Key Questions

1. How does user interface design impact a user's interaction with digital media?
2. Analyze the elements that contribute to a positive or negative user experience.
3. Design a simple interactive element, justifying your choices for user engagement.

Learning Objectives

• Analyze the visual hierarchy and navigation of a given website or app to identify elements that enhance or hinder usability.
• Evaluate the effectiveness of affordances and feedback mechanisms in a digital interface for a target audience.
• Design a simple interactive element, such as a button or navigation menu, for a hypothetical app, justifying design choices based on UX principles.
• Compare and contrast the user experience of two different digital products, citing specific examples of good and bad design.

Before You Start

Introduction to Digital Storytelling

Why: Students need foundational knowledge of digital tools and narrative structure to understand how interactive elements support storytelling.

Principles of Graphic Design

Why: Understanding concepts like color, typography, and layout is essential for creating visually clear and effective user interfaces.

Key Vocabulary

User Experience (UX)	The overall feeling a person has when interacting with a product, system, or service. Good UX makes interactions easy and enjoyable.
User Interface (UI)	The visual elements and controls a user interacts with on a digital device, such as buttons, menus, and screens.
Affordance	A visual cue that suggests how an object should be used, like a button looking like it can be pressed.
Feedback	Information provided to the user to indicate that an action has been completed or is in progress, such as a button changing color when clicked.
Visual Hierarchy	The arrangement of elements on a screen to show their order of importance, guiding the user's eye to what matters most.

Watch Out for These Misconceptions

Common Misconception

The most visually complex or detailed interfaces are the most sophisticated and impressive.

What to Teach Instead

Complexity often signals a design problem rather than design expertise. Users interact with digital media to accomplish goals, and unnecessary visual complexity slows them down or creates confusion. The clearest marker of good UX is that users can complete a task without needing to be told how. Students who test their paper prototypes with real users quickly discover that simpler designs tend to perform better.

Common Misconception

UX design is only relevant for professional app and website developers.

What to Teach Instead

Anyone who creates a digital presentation, a Google Form, a class newsletter, or a social media post is making UX decisions. Choices about button placement, color contrast, font size, and the order of information all affect how a viewer interacts with the content. Understanding these principles gives students agency in all their digital work, not just dedicated design projects.

Common Misconception

If the designer understands how to use their own design, it is intuitive enough for everyone.

What to Teach Instead

Designers are the worst judges of their own interfaces because they already know how everything works. This is why UX design depends on user testing with people outside the design team. The paper prototype activity is specifically structured so that designers stay silent while other students navigate -- that constraint forces them to observe actual user behavior rather than explaining their way past confusion.

Active Learning Ideas

Think-Pair-Share: App Audit

Students open a familiar app or website (school-approved) and spend five minutes independently noting two things that make it easy to use and two things that create friction or confusion. Partners compare observations, then pairs share findings with the class to build a collective list of what makes an interface work. This grounds abstract UX vocabulary in concrete, personal experience.

20 min·Pairs

Paper Prototype: Three-Screen App

Small groups receive a simple design brief (a homework tracker, a classroom library check-out system) and sketch three connected screens on paper index cards. Groups then swap prototypes and attempt to navigate the other team's design without any explanation from the designers. Designers observe silently and take notes on where users hesitate, then receive verbal feedback before revising one screen.

50 min·Small Groups

Gallery Walk: Before and After Interface Comparison

Post paired screenshots of the same interface -- a before and after redesign -- at four to five stations around the room. Students rotate with a structured observation sheet, identifying what changed, why each change likely improved usability, and what they would still adjust. The debrief focuses on which specific changes had the biggest impact on clarity.

30 min·Small Groups

Design Journal: Interactive Element Sketch

Students choose one interactive element (a navigation menu, a submit button, a search bar) and sketch three different design versions for the same function. Each sketch includes annotations explaining the visual choices and how each version communicates its purpose to a user. Students select their preferred version and write two sentences explaining why it would work best for their target audience.

25 min·Individual

Real-World Connections

• UX designers at companies like Google and Apple work to make complex software, like operating systems or productivity apps, intuitive for millions of users worldwide.
• Video game developers use UX principles to create engaging gameplay, ensuring controls are responsive and game information is clear, which is crucial for games like Fortnite or Minecraft.
• Web designers for e-commerce sites, such as Amazon or Etsy, focus on making the shopping experience smooth, from product discovery to checkout, to encourage customer purchases.

Assessment Ideas

Quick Check

Present students with screenshots of two different app interfaces. Ask them to write down two specific elements that make one interface easier to use than the other, referencing terms like 'affordance' or 'visual hierarchy'.

Peer Assessment

Students sketch a simple interactive element (e.g., a login screen). They then exchange sketches with a partner. Partners provide feedback using prompts: 'What does this element suggest you can do?' (affordance) and 'How do you know it worked?' (feedback).

Exit Ticket

Ask students to identify one digital product they use daily. On their exit ticket, they should name one aspect of its design that creates a positive user experience and one aspect that could be improved, explaining why.

Frequently Asked Questions

What is user experience (UX) design for middle school students?

UX design is the practice of planning how people will interact with a digital product so the experience feels clear and intentional. It includes decisions about layout, navigation, visual hierarchy, and feedback (what happens when you tap a button). For middle school students, UX thinking starts with asking: what does the user want to do, and does this design make that easy or hard?

How does interface design affect how people use apps and websites?

Interface design shapes every interaction a user has with a digital product. Clear navigation helps users find what they need quickly. Good contrast makes text readable. Consistent button placement reduces the mental effort required to complete a task. When these elements are poorly designed, users make errors, feel frustrated, or give up entirely -- even when the underlying content or function is valuable.

What are examples of good and bad user experience design?

Good UX: a checkout process that shows exactly how many steps remain, a search bar positioned where users expect to find it, error messages that explain what went wrong and how to fix it. Bad UX: a "close" button that is nearly invisible, a form that clears all entries after a single mistake, navigation menus that change position between pages. Students find it useful to audit apps they already use before designing anything themselves.

How does active learning help students understand UX design principles?

UX principles become meaningful when students test them rather than memorize them. Paper prototyping and user testing let students observe real confusion in real time -- a classmate hesitating over which button to press teaches more about affordance than any definition. Active learning also mirrors the actual UX design process, which is built around cycles of making, testing, and revising based on observed user behavior.