User Experience and Human Centered Design · Term 4

UI vs UX Design Principles

Distinguishing between visual aesthetics and the holistic experience of a user interacting with a product.

About This Topic

Accessibility and inclusive design ensure that technology is usable by everyone, regardless of their physical or cognitive abilities. In Year 10, students learn that accessibility is not a 'niche' requirement but a fundamental part of good design. This topic connects to ACARA's focus on the social and ethical protocols of digital systems and designing for diverse users (AC9DT10P03, AC9DT10K01).

Students explore tools like screen readers, high-contrast modes, and alt-text. They also learn that inclusive design often benefits everyone, for example, captions help people in loud environments, and high-contrast screens help people in bright sunlight. This topic is best taught through 'empathy simulations' where students experience the web through the lens of different abilities, fostering a deeper commitment to ethical design.

Learning Objectives

• Compare and contrast the core principles of UI design with those of UX design, identifying at least three distinct differences.
• Analyze the impact of specific UI design choices on user satisfaction and task completion rates in a given digital product.
• Evaluate the effectiveness of a digital interface based on established UX heuristics, providing specific examples of strengths and weaknesses.
• Design a simple wireframe for a mobile application feature, justifying design decisions based on user-centered principles.
• Explain how accessibility considerations directly influence both UI and UX design strategies for diverse user groups.

Before You Start

Introduction to Digital Systems

Why: Students need a foundational understanding of how digital systems function to appreciate the context in which UI and UX are applied.

Basic Design Principles

Why: Familiarity with concepts like color theory, layout, and visual hierarchy is helpful for understanding UI elements.

Key Vocabulary

User Interface (UI)	The visual elements and interactive components of a digital product that a user directly interacts with, such as buttons, icons, and layout.
User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a digital product, encompassing usability, accessibility, and emotional response.
Usability	The ease with which users can learn and use a product to achieve their goals effectively, efficiently, and with satisfaction.
Heuristics	General principles or rules of thumb used to evaluate the usability of an interface, such as Nielsen's 10 Usability Heuristics.
Wireframe	A basic visual guide representing the skeletal framework of a digital product's interface, focusing on layout and content placement.

Active Learning Ideas

Simulation Game: The Screen Reader Challenge

Students close their eyes and try to navigate a popular website using only a screen reader or a partner's verbal description. They must identify three barriers that make the site difficult to use without sight.

⏱ 40 min·Pairs

Generate mission

Inquiry Circle: The Curb-Cut Effect

Groups research 'The Curb-Cut Effect' and find three examples of digital tools originally designed for people with disabilities that are now used by everyone (e.g., voice-to-text, captions, or dark mode).

⏱ 45 min·Small Groups

Generate mission

Gallery Walk: Inclusive Design Audit

Students bring in a screenshot of an app they use. They move around the room and use a checklist to 'audit' each other's apps for accessibility features like font size, color contrast, and button spacing.

⏱ 30 min·Small Groups

Generate mission

Real-World Connections

Product designers at Google use UX principles to ensure that new features in Android apps are intuitive and enjoyable for millions of users worldwide, considering factors from button placement to navigation flow.

Web developers for e-commerce sites like Amazon employ UI and UX best practices to optimize the checkout process, aiming to reduce cart abandonment and increase customer conversion rates by making the purchasing journey seamless.

UX researchers at gaming companies conduct user testing sessions to identify pain points in game interfaces, ensuring that controls are responsive and information is presented clearly to enhance player immersion and enjoyment.

Watch Out for These Misconceptions

Common Misconception

Accessibility is only for a small number of people.

What to Teach Instead

Over 4 million Australians have a disability. 'situational' disabilities (like a broken arm or a glare on a screen) affect everyone. Empathy simulations help students see that 'inclusive design' is just 'good design'.

Common Misconception

Making an app accessible is too expensive or difficult.

What to Teach Instead

If built-in from the start, accessibility adds very little cost. Using 'automated accessibility checkers' helps students see that many fixes (like adding alt-text) are simple and fast to implement.

Assessment Ideas

Quick Check

Present students with two screenshots of similar apps, one with a clean, intuitive interface and another with a cluttered, confusing one. Ask them to write down two specific UI elements that make one app's interface more appealing and two UX principles that are better applied in the other.

Discussion Prompt

Facilitate a class discussion using the prompt: 'Imagine you are designing a mobile app for ordering food. How would you ensure both a visually appealing UI and a smooth, frustration-free UX for a first-time user?' Encourage students to share specific design choices and their reasoning.

Peer Assessment

Students bring a simple sketch or digital mockup of a single screen for a hypothetical app. In pairs, they present their design and ask their partner to identify one UI element they like and one UX aspect that could be improved, providing a brief justification for each.

Frequently Asked Questions

What are the WCAG guidelines?

The Web Content Accessibility Guidelines (WCAG) are the international standard for making web content more accessible. They focus on four principles: Perceivable, Operable, Understandable, and Robust (POUR).

How can I teach accessibility in a hands-on way?

Use 'Empathy Labs'. Have students try to use their computers with only their non-dominant hand, or use a color-blindness simulator on their favorite websites. This makes the need for inclusive design immediate and personal.

How can active learning help students understand accessibility?

Active learning, such as 'Accessibility Audits', turns students into investigators. When they have to find and fix barriers in a real-world product, they move from theoretical knowledge to practical application, internalizing the importance of inclusion as a core design value.

Is accessibility a legal requirement in Australia?

Yes. Under the Disability Discrimination Act 1992, Australian organizations are required to provide equal access to information and services, which includes digital platforms and websites.