Interactive Media and the User Experience

Communicating with Interactive Media

🎯 (EC-11-01, EC-11-11)

📌 Investigate how interactive media and the user experience (UX) is used to communicate information to an audience

Interactive media is a two-way conversation

NESA defines interactive media as the use of digital technologies to present combinations of text, graphics, video, animation and/or sound in an integrated way, where the user can interact with the result. Games, media-rich websites and e-books are all examples. A poster or a radio broadcast sends a message one way. Interactive media sends a message and then listens: every tap, search, pause, share and abandoned form tells the sender something about whether the message worked.

To investigate how it communicates, break any example into five parts: the sender and its purpose, the message and the media used to encode it, the channel and device, the audience, and the feedback that returns to the sender. Anything that gets in the way of the message between sender and audience (slow loading, tiny text, no captions, confusing navigation) is a barrier. Removing barriers is the job of user experience design.

Matching the medium to the audience and purpose

No single medium suits every message. Effective communication starts by asking who the audience is (age, language, prior knowledge, devices, abilities, connection speed) and what they should know or do afterwards.

What user experience (UX) adds

NESA's glossary defines user experience (UX) as "the usability, ease of use, and enjoyment provided in the interaction between the customer and the product". Good UX means people can reach their goal, with little effort and few errors, and feel positive about it. International standard ISO 9241-210 describes this way of working as human-centred design: involve real users early, understand the context of use, and iterate from evidence. UX is broader than how a screen looks. It includes speed, clarity of wording, error messages, accessibility and support.

Usability heuristics as investigation criteria

To investigate an interface systematically, use published criteria rather than personal taste. The best known are the ten usability heuristics developed by usability researcher Jakob Nielsen in the 1990s and published by the Nielsen Norman Group. A heuristic evaluation has one or more reviewers work through an interface and record which heuristics it breaks, where, and how serious the problem is.

Social, Ethical and Legal Issues

🎯 (EC-11-07)

📌 Investigate social, ethical and legal issues when developing and implementing interactive media systems

Three lenses on the same decision

Every interactive media project raises questions that are legal (what the law requires), ethical (what is right, even if it is legal) and social (how the system affects people and communities). The lenses often disagree. A tracking script may be legal and still be ethically doubtful if users cannot understand it. Investigating means examining each issue from the point of view of the people affected, not only the developer.

Issues arise at different stages

When developing a system the questions are about inputs: Do we have the right to use these images, fonts, music and data? Have the people in our photos and videos agreed, and are they old enough to agree? Are we testing with people who use assistive technology? When implementing (releasing and running) the system the questions are about ongoing effects: What data do we keep, for how long and who can see it? How will we respond to a breach, a complaint or a takedown request? Who moderates user comments?

Evolution of Interactive Media

🎯 (EC-11-06, EC-11-07)

📌 Research the evolution of interactive media

• prevalence of blogs, online video and digital radio
• privacy issues and the use of intellectual property, including Indigenous Cultural and Intellectual Property (ICIP)

A short history of interactive media

Interactive media has changed because three things changed together: bandwidth (from dial-up to broadband and mobile data), devices (from desktop computers to smartphones, tablets and headsets) and tools (from hand-coded pages to platforms that let anyone publish). Each shift lowered the cost of creating and sharing media and raised the number of people who can take part.

Prevalence of blogs, online video and digital radio

Blogs (from "weblog") began as personal online journals in the late 1990s. Easy platforms such as Blogger (launched 1999) and WordPress (2003) let people publish without writing HTML. Blogs turned readers into publishers, gave niche communities and independent journalists a voice, and led to the comment sections, feeds and subscriptions that later social media adopted. Many organisations now run blogs to communicate news and build trust.

Online video became mainstream once broadband and better compression (see digitising assets) made streaming practical. YouTube, founded in 2005, made it easy for anyone to upload and share video. Streaming services, live streaming and short-form video followed. Video is now a main way audiences learn, shop and are entertained, which is why captions, file formats and performance matter.

Digital radio moves audio from analogue broadcast to digital delivery. In Australia, DAB+ digital radio began broadcasting in the capital cities in 2009, offering more stations and extra data such as station and song details. Radio also moved online through internet streaming and podcasts: audio files delivered by subscription that people play when and where they choose. This on-demand model changed radio from a schedule to a library.

Privacy issues and the use of intellectual property

As media became participatory, two problems grew: personal information became valuable, and it became easy to copy other people's work.

Privacy issues

Early websites collected little. Modern interactive media collects data trails: accounts, cookies, device and location data, purchases and behaviour. That data enables personalisation but also profiling, targeted advertising and identity theft after a breach. In Australia the Privacy Act 1988 (Cth) and the Australian Privacy Principles (APPs) set rules for how covered organisations collect, use, store and disclose personal information. Under the Notifiable Data Breaches (NDB) scheme they must notify affected people and the Office of the Australian Information Commissioner (OAIC) about eligible breaches likely to cause serious harm. The 2022 breaches at Optus and Medibank, in which customers' personal information was accessed by criminals, made many Australians more aware of how much data organisations hold and how long they keep it. Since then, changes such as the Privacy and Other Legislation Amendment Act 2024, which created a statutory tort for serious invasions of privacy, have increased the pressure on organisations.

Intellectual property (IP)

Copyright is a form of intellectual property. Under the Copyright Act 1968 (Cth), copyright arises automatically when an original work (text, image, music, film, software) is created and recorded. There is no registration. The owner, usually the creator unless an employment contract or assignment says otherwise, controls copying, publishing and adapting the work. Copyright lasts for a long time (for most works, the life of the creator plus 70 years), so most media found online is not free to reuse. Creators also have moral rights: to be attributed, not to be falsely credited and not to have the work treated in a derogatory way.

Australia does not have a general "fair use" rule. It has specific fair dealing exceptions, such as research or study, criticism or review, parody or satire, and reporting news, each with limits. "It's for a school project" does not automatically make copying legal. Instead, choose media with a clear licence: your own work, work you have permission to use, public-domain work, or work under an open licence such as Creative Commons (see supporting creative processes). The Copyright Act 1968 is on the Federal Register of Legislation, and the Australian Copyright Council explains it in plain language at copyright.org.au.

Indigenous Cultural and Intellectual Property (ICIP)

Indigenous Cultural and Intellectual Property (ICIP) is the term used for the rights that Aboriginal and Torres Strait Islander Peoples hold in their cultural heritage: for example their knowledge, stories, languages, art, designs, music, dance, ceremonies and cultural sites. ICIP belongs to communities and is connected to Country, kinship and cultural responsibility. It is not simply a resource for other people to use.

Copyright law fits ICIP poorly. Copyright generally protects an individual creator's original work for a limited time. ICIP is often communal, passed down through generations, and continues to live in the community. As Dr Terri Janke, an Indigenous Australian solicitor who has led this work for many years, and others have explained, Australian copyright law does not on its own prevent the misuse, distortion or alteration of communally owned cultural material. That is why ethical protocols matter.

The Protocols for using First Nations Cultural and Intellectual Property in the Arts, authored by Dr Terri Janke and published through the Australia Council for the Arts (now Creative Australia), guide artists, designers and media makers. Its principles include respect for cultural heritage, self-determination, communication, consultation and consent, correct interpretation, cultural integrity, protection of secret or sacred material, attribution, benefit sharing and the recognition and protection of cultures. (Check the current edition for the exact wording.) Terri Janke and Company's True Tracks framework applies similar ideas to business and organisations.

Interactive Media in Enterprises

🎯 (EC-11-01)

📌 Describe the contribution of interactive media systems to a range of enterprises

• how simulation, gamification and augmented reality (AR) support online training and learning
• how streaming services, gaming and virtual reality (VR) improve access to entertainment
• how specialist apps support delivery tracking, advertising and communication

An enterprise is an activity that produces goods or services, from a corner shop to a national broadcaster. Interactive media contributes to enterprises by reaching customers, training staff, delivering services and gathering data. The three groups below correspond to the three NESA "including" points.

Simulation, gamification and AR in online training and learning

A simulation is a digital model that lets people practise a task and see the results without real-world risk or cost. Flight, driving and machinery simulators, and clinical simulations that let nursing students practise patient assessment, are common examples. Learners can repeat difficult or dangerous tasks as often as they need, and the system can record every decision for feedback.

Gamification is, in NESA's words, the adjustment of a task using digital technologies into a computer game in an attempt to make it more appealing. Points, badges, levels, streaks and leaderboards add motivation to routine training such as safety modules or language practice. It works best when the game elements reward genuine learning; it can backfire if learners chase points and ignore content.

Augmented reality (AR) overlays computer-generated information on the real environment, through a phone camera or smart glasses. In training, AR can label the parts of a machine as a trainee looks at it or show a repair step in place, so that instructions appear where they are needed. Because AR relies on a camera, location and sensors, it also raises privacy questions about what is being captured.

Streaming, gaming and VR improving access to entertainment

Streaming services deliver video and audio over the internet on demand, so viewers watch when and where they like without buying a disc or waiting for a broadcast. Australian audiences use national broadcasters' catch-up services and commercial and international subscription services. Streaming reduces the barriers of distance, timing and cost: a viewer in a remote town can watch the same programs as a viewer in the city, provided they have a reliable connection. Video games, from phone games to console and PC titles, bring interactive stories and shared play to people of all ages, and online play lets friends in different places play together.

Virtual reality (VR) places the user inside a simulated three-dimensional environment using a headset and motion tracking. It can give access to experiences that are otherwise out of reach, such as touring a museum, sitting in a concert audience or exploring a place without travelling, and it can be a comfortable way to take part for people with limited mobility. Its limits are cost, the need for space and powerful hardware, and motion discomfort for some users.

Specialist apps: delivery tracking, advertising and communication

Hardware Performance Requirements

🎯 (EC-11-08, EC-11-10)

📌 Evaluate the performance requirements of hardware for specific interactive media projects

Evaluating means judging against criteria

To evaluate hardware for an interactive media project, first list what the project must do, then compare hardware against those requirements, then make a justified judgement. NESA's glossary defines evaluate as making a judgement based on criteria and determining value. The wrong question is "What is the best computer?" The right question is "What is the cheapest hardware that reliably meets this project's requirements, including for the audience's devices?"

Requirements differ by project

Working out storage and bandwidth

Calculating file sizes turns "large" into evidence. The examples below show why compression is essential.

• One uncompressed 1080p frame: 1920 × 1080 pixels × 3 bytes (24-bit colour) = 6,220,800 bytes, about 6.2 MB.
• One second at 30 frames per second: 6,220,800 × 30 = 186,624,000 bytes, about 187 MB. One minute is about 11.2 GB. Editing and streaming video are only practical because of compression.
• CD-quality stereo audio: 44,100 samples/s × 16 bits × 2 channels = 1,411,200 bits per second, about 10.6 MB per minute.

Making the judgement

Supporting Creative Processes

🎯 (EC-11-06, EC-11-07)

📌 Explain how interactive media systems can support creative processes

• sandbox gaming
• social media
• digital creative commons

A creative process moves from an idea to a finished work through cycles of making, sharing, feedback and improving. Interactive media systems support that process by lowering the cost of trying ideas, letting creators show work-in-progress to an audience, and letting others build on it. The three NESA examples show three different supports.

Sandbox gaming

NESA describes sandbox gaming as a virtual world where players can build their playscapes, invite other players to play and test game play. Games such as Minecraft and platforms such as Roblox give players building blocks, scripting tools and a shared world rather than a fixed storyline. They support creative processes in these ways:

• Ideate and prototype: players sketch a build or a mini-game quickly and change it instantly.
• Test with an audience: friends play the creation and the creator sees where they get stuck, which is usability testing in miniature.
• Learn design and coding: logic blocks, redstone circuits or a scripting language teach systems thinking. Education editions of these games are used in classrooms for design and history projects.
• Collaborate: several players build one world together, dividing roles as a real production team would.

The issues to weigh are moderation of user-made content, protection of young players in shared spaces, and who owns what players create. That last point is set by each platform's terms of use.

Social media

Social media supports creative work at every stage: finding inspiration and references, sharing drafts for feedback, collaborating across distance, building a portfolio and reaching an audience. A student filmmaker can post a trailer, read the comments and re-cut the ending. Remix features (duets, stitching, sharing a template) let creators build on each other's work, which raises questions of permission and credit. Algorithms decide what is seen, so reach is not a fair measure of quality.

Digital creative commons

Creative Commons (CC) is a non-profit organisation that enables the sharing of creative content without the need to seek legal approval each time (NESA glossary). Creators choose a standard licence that tells everyone in advance what they may do. Because permission is built in, others can legally reuse, adapt and combine work, which is a creative process in its own right.

The elements combine into six licences, from the most open (CC BY) to the most restrictive (CC BY-NC-ND). Good practice is TASL attribution: Title, Author, Source, Licence. For example (a made-up credit): "Reading Room" by Jordan Lee, from example.org/reading-room, licensed CC BY 4.0. Check that the person offering the work actually owns it, and check the licence version and its link. A CC licence does not remove other rights such as privacy or ICIP. A CC licence on a photo of a person does not give you permission to use their image in an advertisement, and material based on Aboriginal or Torres Strait Islander cultural heritage may need community consent even when it appears online with a CC label.

Influencing Human Behaviour

🎯 (EC-11-01, EC-11-07)

📌 Examine how human behaviour may be influenced by interactive media, including opportunities for people with disability to explore and participate in their environment

How interactive media influences behaviour

Designers use knowledge of how people think and feel to shape what they do. This is called persuasive design when it helps people reach their own goals and manipulative design when it works against them. Most techniques can be used either way. What separates them is transparency and whose interests they serve.

Interactive media also shapes behaviour positively. Fitness apps encourage movement, learning platforms build study habits, and civic tools help people find services or take part in consultations. The eSafety Commissioner provides guidance on online wellbeing and safety, and Australian law now sets a minimum age for holding an account on certain social media platforms (the Online Safety Amendment (Social Media Minimum Age) Act 2024, in effect from December 2025), reflecting community concern about the effect of design on young people.

Opportunities for people with disability

Well-designed interactive media can remove barriers that the physical world puts in the way, so that people with disability can explore their environment and take part in study, work, culture and social life. The key is that accessibility is designed in and that people with disability are involved in designing and testing. The technical benchmark is the W3C's Web Content Accessibility Guidelines (WCAG) 2.2, and in Australia the Disability Discrimination Act 1992 (Cth) makes disability discrimination unlawful, including in the provision of services online.

For example, an interactive museum tour with captions, audio description and keyboard navigation lets a visitor who cannot travel, or who cannot see the exhibits, take part. Voice control and adaptive input devices allow gaming with limited hand movement. The same features often help everyone: captions are used on noisy trains and clear layouts help tired or distracted users.

Digital Marketing and Consumer Behaviour

🎯 (EC-11-04, EC-11-07)

📌 Investigate how digital marketing techniques influence consumer behaviour

• guided choice (nudging)
• default settings, including cookies
• autofill
• pop-ups promoting online shopping

Digital marketing promotes products and services through online channels such as search, social media, email, apps and websites. Because every click is measurable, marketers can test small design changes and keep the ones that increase sales. Understanding these techniques lets you use them responsibly and recognise when you are being steered.

Guided choice (nudging)

A nudge is a design choice that steers people towards an option without forbidding any other. The idea comes from behavioural economics and was popularised by Richard Thaler and Cass Sunstein in their book Nudge (2008). The way options are arranged is the choice architecture. Examples in online shopping include:

• a "Recommended" or "Most popular" badge on one product (social proof);
• listing a mid-priced plan between a very cheap and a very expensive one so that it looks reasonable;
• a "Frequently bought together" bundle;
• a pre-selected delivery option.

A nudge can serve the user (a default that protects privacy, a healthy option placed first) or the seller only (an expensive add-on ticked by default). A fair test: would the user be comfortable if they understood exactly what the nudge was doing?

Default settings, including cookies

Most people never change a default, a tendency called the default effect (or status quo bias). Whoever chooses the default therefore makes the decision for most users. Defaults appear in settings such as location sharing, marketing emails, auto-renewing subscriptions, and pre-ticked boxes for optional extras.

Cookies are small pieces of data a website stores in your browser. Session cookies last until you close the browser and keep you logged in or hold your cart. Persistent cookies last longer and remember preferences. Third-party cookies, set by advertising or analytics companies embedded in the page, can follow you across many sites and build a profile. Essential cookies are needed for the site to work; analytics and advertising cookies are optional. Cookie banners exist because some regions, notably the European Union, require consent before setting non-essential cookies. Australia has no single "cookie law", but the Privacy Act 1988 and the APPs apply when cookies and similar identifiers relate to an identifiable person, so notice and transparency still matter. The default in the banner matters: an unticked box and an equal-weight "Reject" button respect the user, while pre-ticked boxes and a hidden "Manage options" link steer them.

Autofill

Autofill lets a browser or password manager fill in saved names, addresses, card details and passwords. It reduces typing and errors, and is a real accessibility gain for people who find typing difficult. It is also a marketing tool, because every removed step makes it easier to complete a purchase. The risks: a shared device can expose saved details, and a malicious form can include hidden fields that quietly collect autofilled data. Good practice is to use a reputable password manager, keep card autofill for trusted sites, use a device lock, and turn autofill off on shared computers. Designers should mark fields with the correct autocomplete attributes so autofill works, and ask only for what is needed.

Pop-ups promoting online shopping

Pop-ups appear over a page to grab attention. Common shopping examples are a "10% off if you subscribe" window, an exit-intent pop-up when the cursor heads for the tab bar, a reminder of items left in the cart, a countdown timer, and "Sam from Parramatta just bought this" notices. They work because they interrupt at a decision point. They also annoy users, cover content, and can trap keyboard and screen-reader users if they are not built correctly. Sending marketing email or SMS to people who sign up needs their consent and a working unsubscribe under the Spam Act 2003.

Dark patterns and the law

Design that steers people into choices that are not in their interests is called a dark pattern (a term coined by user experience designer Harry Brignull), also called deceptive design. Examples include confirmshaming ("No thanks, I don't like saving money"), extra fees revealed only at the last step, a subscription that is easy to start and hard to cancel, and fake scarcity or fake countdowns.

In Australia, the Australian Consumer Law prohibits misleading or deceptive conduct in trade or commerce and false representations, and the Australian Competition and Consumer Commission (ACCC) enforces it. In 2022 the Federal Court ordered Google to pay $60 million in penalties after the ACCC showed that Google had misled some Android users about what location data it collected. Google said one setting controlled this when another also enabled collection (see the ACCC media release). The case shows that how a settings screen is worded can be a legal matter.

Social Media and Human Connection

🎯 (EC-11-01, EC-11-07)

📌 Evaluate social media applications that encourage human connections

• crowdsourcing through a social media app
• learning via massive online open courses (MOOCs)
• gaming platforms that encourage massive multiplayer online games (MMOGs)

Criteria for evaluating a connection platform

Evaluating means judging value against criteria. For a platform that is meant to connect people, useful criteria are:

• Quality of connection: does it help people form real relationships, share knowledge or work together?
• Inclusion and accessibility: who can join (cost, age limits, language, disability)?
• Safety and moderation: can users report abuse, and does the platform act?
• Privacy and data use: what does it collect, and can users control it?
• Wellbeing and design: does it help users stop, or keep them hooked?
• Reliability and reach: does it work well on ordinary devices and connections?

Crowdsourcing through a social media app

Crowdsourcing uses a large group of people to contribute information, ideas or work, usually online. Social media makes it fast: a community page asks residents to report potholes, a fan group identifies a song, and during a flood or bushfire people share observations and photos. Citizen-science apps, where users upload photos of plants and animals for experts to identify, collect far more sightings than a few researchers could.

Strengths: speed, scale, local knowledge and low cost. Weaknesses: accuracy and bias (who takes part, who does not), rumours spreading as fact, privacy of people in photos, and no accountability. Organisations reduce these risks by verifying reports, using moderators and showing sources.

Learning through massive online open courses (MOOCs)

A massive online open course (MOOC) is an online course open to a very large number of learners, often free to start. Coursera, edX, FutureLearn and Open Universities Australia host courses from universities and other providers. Learners use videos, readings, quizzes and discussion forums, and peers connect in those forums.

Strengths: access regardless of location, flexible pace, low or no cost, and courses in specialist topics. Weaknesses: many learners do not finish, there is little individual support, a reliable internet connection is needed, discussion can be uneven, and employers and institutions vary in how much they recognise a certificate.

Gaming platforms and massive multiplayer online games (MMOGs)

A massive multiplayer online game (MMOG) lets very large numbers of players share one persistent online world. Players form teams and guilds, trade, chat by voice and text, and take on shared goals. For many players, especially those who are isolated or live in remote areas, these communities offer friendships and a sense of belonging. Skills such as teamwork, leadership and problem solving develop through play.

The risks are contact with strangers, bullying and harassment, exposure to inappropriate content, in-game spending (including "loot box" mechanics that resemble gambling), and time displacing sleep and study. Platforms respond with parental controls, chat filters, reporting tools and spending limits. The eSafety Commissioner publishes guidance for young people and families.

Making the judgement

Sample judgement: For building human connection, an MMOG platform is the strongest of the three because it produces repeated, shared activity, but only if safety tools are used and time is balanced. Crowdsourcing is best for a specific community task, and a MOOC is best for learning but weakest for personal connection. Your own judgement may differ if you weight the criteria differently. What matters is that you state your criteria and support your conclusion. Also note the current law: from December 2025 certain social media platforms must take reasonable steps to prevent under-16s holding accounts, which affects who can take part.

Digital Identities and Profiling

🎯 (EC-11-03, EC-11-07)

📌 Explore how interactive media platforms support the creation of digital identities

• personal e-profiles
• identifier versus identity
• profiling and auto-profiling
• privacy settings

Personal e-profiles

A personal e-profile is the account page you build on a platform: display name, photo, biography, links, interests, and sometimes date of birth, school or workplace. You choose these details, so a profile is a deliberate presentation of yourself. People use different profiles for different audiences: a professional one, a gaming one, a school one. Interactive media platforms support profile creation with templates, prompts, verified badges, follower counts and portfolios. What you put in a profile is durable and searchable, and can be copied or screenshotted, so consider what a future employer or university might see.

Identifier versus identity

An identifier is a value that points to one account, person or device: a username, email address, phone number, IP address, device ID or cookie ID (and in the offline world, a student number or a Medicare number). An identity is richer: the collection of characteristics, behaviours, relationships and reputation that makes up who you are online and how others and systems see you.

Your digital footprint is the data you leave behind (NESA glossary). The active part is what you post and submit. The passive part is collected without you doing anything: your IP address, device details and browsing history. Identifiers connect these traces so they add up to a profile, even if you never give your name. Government "digital ID" systems, such as myID used with Australian Government services, are a different use of the words: a way to prove who you are to a service under a legal framework, the Digital ID Act 2024.

Profiling and auto-profiling

Profiling is building a description of a person from data, in order to predict what they want, like or will do. It can be done by people (a manager checking your public posts) or systems. Auto-profiling means the system does it automatically, by inferring characteristics from your behaviour without you entering them: your likely age range, interests, income or life events, from what you watch, buy, search and where you go.

Profiles power the "For you" page, product recommendations, personalised prices and offers, and the ads you see. They are useful, but they can be wrong, can lock in stereotypes and bias, can feel intrusive, and can be exposed in a breach. Individuals can ask organisations covered by the Privacy Act what personal information they hold about them, and can generally ask for it to be corrected. The OAIC explains those rights and the APPs on its website (see Australian Privacy Principles).

Privacy settings

Privacy settings are the controls that let you decide what data is collected, who can see your profile and content, and how your information is used. Defaults are often more open than you might choose, so check them rather than assume. A short audit:

1. Set the profile and posts to private or friends-only where possible.
2. Turn off location sharing and remove location from photos you share.
3. Limit who can tag, message or find you by phone number or email.
4. Review ad personalisation and turn off cross-site tracking if offered.
5. Check which apps and games have access to your account and remove those you no longer use.
6. Use unique passwords, a password manager and multi-factor authentication.
7. Repeat every few months, because platforms change their settings.

Choosing File Formats

🎯 (EC-11-02, EC-11-08)

📌 Select and use appropriate file formats for a defined purpose

A file format defines how data is organised inside a file. Choosing a format is a trade-off between quality, file size, features (such as transparency or animation) and compatibility with the devices and software your audience uses. Two ideas underpin the tables below: bitmap images store a grid of coloured pixels, while vector images store shapes as mathematical descriptions; and lossy compression discards some data to save space while lossless compression keeps everything (explained in full under digitising assets and compression).

Image formats

Audio formats

Video and other formats

A video file has two layers. The codec compresses the video and sound, and the container packages the video, audio, subtitles and metadata into one file. MP4 is a container that most commonly holds H.264 video and AAC audio. This combination plays on almost every phone, browser and television, which is why it is the safe default for interactive media.

Choosing a format for a defined purpose

Work from the purpose to the format by asking five questions in order: What is it? (photo, drawing, sound, moving image, data); Will it be edited again? (keep a lossless master); What must it do? (transparency, animation, scaling); Where will it be used? (web, mobile, print, email); and How large can it be? (connection speed, storage, load time).

Software for Interactive Elements

🎯 (EC-11-08)

📌 Use software to develop elements of interactive media in a project

Choosing software for each type of element

Interactive media combines several kinds of element, and each is made with software suited to it. A project usually uses one tool per element and a way of assembling them (a web page, a game engine or presentation software).

Choose tools by what your school provides, what is free and what you already know. Many of these are free and open source. Whatever you use, keep original files (for example a layered image or an audio project file) separate from exported files.

Features you should be able to use

The NESA Course Specifications (p.21) describe the features of two types of application software you should be familiar with. Graphics software should allow you to create and manipulate bitmapped images; create and manipulate vector graphics as geometric shapes; rotate, crop, resize and distort images; import and export graphic data in a variety of formats; apply textures, patterns and transparent backgrounds; and use templates, colour themes and animations. Presentation software should allow you to create and manipulate text; apply editing and formatting features; insert and display text, images, audio, video and animations; import and export data; embed objects such as charts and tables from other applications; use hyperlinks within and outside the presentation; and use templates and themes.

A worked example: an interactive "click to reveal" element

Interactive elements do not need heavy software. A reveal button is a common pattern in learning media: the user thinks first, then checks. The steps are to (1) design the element on a wireframe, (2) write the HTML for the button and the hidden content, (3) write JavaScript to toggle it, (4) test with mouse and keyboard, and (5) check with a screen reader. The code below is accessible because it uses a real <button> (focusable and operable with the keyboard) and aria-expanded to announce whether the content is open.

<button type="button" id="hint-btn" aria-expanded="false" aria-controls="hint">Show a hint</button>
<p id="hint" hidden>The Sydney Harbour Bridge opened in 1932.</p>

<script>
  const btn = document.getElementById('hint-btn');
  const hint = document.getElementById('hint');
  btn.addEventListener('click', () => {
    const wasOpen = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!wasOpen));   // tells screen readers the state
    btn.textContent = wasOpen ? 'Show a hint' : 'Hide the hint';
    hint.hidden = wasOpen;                                   // shows or hides the paragraph
  });
</script>

Try it: save the code as reveal.html and open it in a browser. Press Tab to reach the button and Enter or Space to use it. Then extend it: add a second hint, or use the same pattern for a glossary term.

Workflow for using software in a project

1. Plan: list every asset in an asset register (name, type, source, licence, format, status).
2. Create or capture: record, photograph, draw or write the source material.
3. Edit: improve each asset in the right tool, saving the master first.
4. Export: save each asset in the format and size chosen for its purpose.
5. Assemble: combine assets and add interaction (navigation, buttons, forms).
6. Test: on different devices, with keyboard only, and with a real user.
7. Document: record your progress and decisions in a process diary.

Digitising Assets and Compression

🎯 (EC-11-02, EC-11-08)

📌 Use hardware and software to digitise assets for use in interactive media systems, including lossy and lossless data compression

NESA's glossary defines assets as the digital elements that can be used or incorporated into a multimedia production: graphics, photographs, video, audio, animations and other artistic data. To digitise means to convert something analogue (a printed photo, a voice, a hand drawing) into digital data using a combination of hardware that captures it and software that stores and refines it.

Hardware and software for digitising

Digitising images: resolution and colour depth

A bitmap image is a grid of pixels. Resolution is how many pixels there are (for example 1920 × 1080), or for scanning and print, how many dots per inch (dpi). More pixels capture more detail and make larger files. Colour depth (bit depth per pixel) is how many bits describe each pixel's colour: 1 bit gives 2 colours (black and white), 8 bits give 256 colours, and 24 bits (8 each for red, green and blue) give 2²⁴ = 16,777,216 colours.

Uncompressed size = width × height × colour depth ÷ 8 (bytes). Worked example: an A4 page (8.27 × 11.69 inches) scanned at 300 dpi is about 2481 × 3507 pixels = 8,700,867 pixels. At 24-bit colour that is 8,700,867 × 3 bytes = 26,102,601 bytes, about 26 MB before compression. Scanning at 600 dpi would multiply the pixel count by four. Use the resolution you need: about 300 dpi is common for print; a screen usually needs far fewer pixels than a print scan.

Digitising sound: sampling rate and bit depth

Sound is a continuous wave. Digitising samples it: measuring the wave's height many times per second. The sampling rate (in hertz) is how many measurements per second; the bit depth is how many bits record each measurement, which sets how many different heights can be stored. A higher sampling rate captures faster changes; a higher bit depth captures finer differences in loudness. To capture a frequency correctly you need to sample at more than twice that frequency (the Nyquist rule). People hear up to about 20 kHz, so audio CDs use 44,100 samples per second (44.1 kHz) with 16 bits (65,536 possible heights) per sample per channel. Video production commonly uses 48 kHz.

Worked example: a 3-minute (180 s) stereo recording at 44,100 Hz and 16 bits: 44,100 × 16 × 2 = 1,411,200 bits per second; × 180 seconds = 254,016,000 bits, which is 31,752,000 bytes, about 31.8 MB uncompressed. An MP3 of the same track is a small fraction of that size.

Digitising video

Video is a sequence of images (frames) plus sound. Its size depends on resolution, frame rate (frames per second), colour depth and length, and then on the bitrate chosen by the codec. As calculated earlier, uncompressed high-definition video is enormous, so video is always compressed for storage and streaming.

Data compression

NESA's glossary defines data compression as a reduction in the number of bits needed to represent data. It saves storage and speeds up transmission. There are two families.

Lossless compression

Lossless compression finds and removes redundancy (repeated patterns) but keeps every bit of information, so the original can be perfectly rebuilt. A simple technique is run-length encoding: WWWWWWBBBW can be stored as 6W3B1W. Real formats use more advanced methods. PNG, FLAC and ZIP are lossless. What is discarded: nothing. Artefacts: none. Trade-off: the saving is limited, especially for detailed photographs and natural sound. Use it when exactness matters: text, code, logos and screenshots, master copies, and archives.

Lossy compression

Lossy compression permanently discards information that people are unlikely to notice. The discarded data cannot be recovered. It can shrink files a great deal, which is why photographs, music and video are delivered this way.

• JPEG splits an image into small blocks, then reduces fine detail and colour resolution that the eye is less sensitive to. Too much compression produces artefacts: blocky squares, blurred edges and ringing around sharp lines such as text.
• MP3 and AAC remove sounds masked by louder ones and frequencies most people cannot hear. At low bitrates you may hear a thin, watery sound or smeared sharp sounds.
• H.264 video stores full frames only occasionally and then just the changes between frames. At low bitrates you see blocks in fast motion and smearing or banding in smooth gradients.

Every re-save of a lossy file discards more, called generation loss. Edit from a lossless master and export a lossy copy once, at the end. Use lossy compression when the audience cannot notice the loss and file size or speed matters most: web photos, streaming audio and video, and mobile delivery.

How the UI Shapes the UX

🎯 (EC-11-08, EC-11-10)

📌 Explain how the user interface (UI) impacts on the user experience (UX)

The relationship

NESA's glossary defines the user interface (UI) as the means by which users interact with computer hardware or software. In software this is fields for text and number entry, mouse pointers, buttons and other graphical elements; in hardware it is switches, dials and lights. The user experience (UX) is the whole result of that interaction: usability, ease of use and enjoyment. The UI is what the user meets; the UX is what the user goes through and feels. A UI is therefore one of the biggest influences on UX, but not the only one, because speed, content, reliability and support also count.

How UI decisions change the UX

UI design principles

• Consistency: use the same colours, wording, icons and layout for the same things, both within your system and following common conventions (a magnifying glass means search).
• Visual hierarchy: use size, weight, colour, contrast, position and white space to show what matters most. People scan pages, so the first things noticed should be the important ones.
• Feedback: respond to every action within a moment: a pressed state, a spinner, a success or error message.
• Affordance and signifiers: an affordance is what an object allows you to do; a signifier is the visible clue that tells you (a raised button, a text cursor). Design so that the clue is obvious.
• Simplicity: remove what does not help the task. Hick's law observes that decision time grows with the number of choices, so fewer, clearer options are faster.
• Target size and distance: Fitts's law observes that a target is quicker to hit if it is larger and closer, so make touch targets comfortably large, especially on phones.
• Error prevention and recovery: design so mistakes are unlikely, and make recovery easy.
• Accessibility: design for the widest range of users from the start.

Accessibility: WCAG 2.2

The World Wide Web Consortium (W3C) publishes the Web Content Accessibility Guidelines (WCAG) 2.2, a W3C Recommendation released in October 2023. It sets testable success criteria at three levels (A, AA and AAA) and is organised under four principles, remembered as POUR. Level AA is the usual target for websites.

Accessibility is also a legal matter. The Disability Discrimination Act 1992 (Cth) makes discrimination on the basis of disability unlawful in the provision of services, and inaccessible websites can breach it. WCAG is the accepted technical measure. Accessible design also helps many people without disability: captions in noisy places, high contrast in bright light, and keyboard shortcuts for speed.

Design Tools for an Engaging UI

🎯 (EC-11-08, EC-11-11)

📌 Apply design tools and techniques to develop an engaging UI

From idea to interface: the design tools

Designers do not start by building. They use a sequence of design tools that get more detailed, and more expensive to change, at each step. Finding a problem on paper costs minutes. Finding it after coding costs days.

Storyboards using NESA notation

NESA's Course Specifications (p.9) describe a storyboard as showing the various interfaces (screens) as well as the links between them. Each screen is drawn as a rectangle containing a title, a Help button, a column of navigation buttons (the button for the current page is highlighted) and a content panel. A small dot on a button with an arrow means "this button opens that screen". The example below is NESA's own: three pages promoting a school canteen.

In the exam, apply the same conventions to a new scenario. The storyboard below is a new example that follows the same notation: three pages for a community library events website.

Form controls

Screen design questions often ask you to choose controls for input. Choose the control that matches the data and limits mistakes.

Applying the tools: an engaging UI for the library events site

1. Define the audience and tasks. Residents of all ages need to find an event, see if seats are left, and book a seat. Some use screen readers; many use phones.
2. Site map. Home → Events, Bookings, Contact; each event page links to Bookings.
3. Storyboard the key path (Home → Events → Bookings) using NESA notation, as above.
4. Wireframe each screen with paper or a tool such as Figma or Penpot. Check hierarchy: the event name and date first, then the Book button.
5. Style guide. Choose two colours with sufficient contrast, one readable font, a spacing scale, and one button style used everywhere.
6. Mock-up with real event names and photos. Check contrast and text size.
7. Prototype the booking flow and test it with a few users, from young to old, including one using a screen reader or keyboard only.
8. Refine from what you saw, not what you assumed.

An engaging UI is one people want to use, not one that is merely decorated. It has a clear purpose on each screen, a strong visual hierarchy, quick feedback, a consistent style and small touches of delight (a friendly confirmation message) that never get in the way. Techniques that support this include a layout grid, generous white space, limited colours, a clear type scale, meaningful images, and responsive design so that the layout adapts to phones and tablets.

Design Thinking for a Front-End System

🎯 (EC-11-08, EC-11-09, EC-11-11)

📌 Apply design thinking to develop a front-end, web-based interactive media system incorporating UX and UI principles

NESA's glossary describes design thinking as a process where a need or opportunity is identified and a design solution is developed, with economic, environmental and social impacts core to it. It can be used to understand a problem, generate ideas and refine a design based on evaluation and testing. The stages below (empathise, define, ideate, prototype, test) are applied here to a front-end web-based system: the part of a web system that users see and use, built with HTML, CSS and JavaScript. The running example is a lunch pre-ordering website for a school canteen.

1. Empathise

Understand the people you are designing for. Interview students, staff and canteen volunteers, observe the lunch queue, and survey people about how they currently order. Build a short persona (a fictional but evidence-based user: for example "Sam, Year 8, orders on a phone on the bus") and an empathy map (what they say, think, do and feel). Include users with different abilities and devices, for example a student who uses a screen reader. Outputs: notes, quotes and observed pain points (for example, "the queue is too long and I miss out on my order").

2. Define

Turn what you learned into a clear problem statement and measurable goals. Example: "Students need a fast, easy way to order lunch before school so they can avoid queues, and volunteers need orders arranged in advance." Add success criteria you can test: "A new user can place an order in under a minute without help", and "The site meets WCAG 2.2 level AA". Output: problem statement, requirements and success criteria.

3. Ideate

Generate many possible solutions before choosing one. Use brainstorming, sketching several layouts quickly, and mapping the user's journey. Then choose ideas using criteria such as desirable (users want it), feasible (we can build it) and viable (it is sustainable within the time and budget). Output: a chosen concept, a site map and a storyboard of the main path (see design tools).

4. Prototype

Build a cheap, quick model to test. Start with paper or wireframes, move to a clickable mock-up, and for a front-end web system build a working page in HTML, CSS and JavaScript. A prototype can be incomplete because its purpose is learning. Incorporate UX and UI principles from the start: semantic HTML (headings, labels, buttons), consistent layout, a clear hierarchy, immediate feedback, adequate contrast and keyboard access. A small front-end prototype of the ordering screen:

<main>
  <h1>Order lunch</h1>
  <form id="order">
    <p id="order-help">Order before 10:30 am to collect at first break.</p>
    <fieldset>
      <legend>Choose your lunch</legend>
      <label><input type="radio" name="item" value="6.50" checked> Chicken wrap ($6.50)</label>
      <label><input type="radio" name="item" value="3.00"> Fruit cup ($3.00)</label>
      <label><input type="radio" name="item" value="5.00"> Veggie roll ($5.00)</label>
    </fieldset>
    <label for="qty">Quantity</label>
    <input id="qty" name="qty" type="number" min="1" max="5" value="1" inputmode="numeric">
    <p id="total" role="status">Total: $6.50</p>
    <button type="submit">Order now</button>
  </form>
</main>

<script>
  const form = document.getElementById('order');
  const total = document.getElementById('total');
  form.addEventListener('input', () => {
    const price = Number(form.item.value);
    const qty = Number(form.qty.value) || 1;
    total.textContent = 'Total: $' + (price * qty).toFixed(2);
  });
</script>

Notice which UX and UI principles this code applies. A <label> and <fieldset>/<legend> tell screen-reader users what each control is (perceivable, understandable). Radio buttons enforce one choice (error prevention). The role="status" total is announced as it changes (feedback). The type="number" field with min and max limits valid input. Native controls are keyboard operable by default (operable). Add responsive CSS so the layout works on a phone.

5. Test

Watch real users try the prototype. Give each a realistic task ("Order a chicken wrap for first break"), ask them to think aloud, and observe without helping. Record task success, time taken, errors and comments. Five users will usually reveal most serious problems. Then decide what to change. This might mean fixing a label, redesigning a screen, or going back to Define if you discover you solved the wrong problem. Repeat until the success criteria are met, then evaluate against the requirements and accessibility guidelines.

Mapping the stages to UX and UI principles

Record decisions in a process diary (NESA Course Specifications, p.13). Each entry should include the date, who made the entry, progress since the last entry, tasks achieved, stumbling blocks and how they were managed, possible approaches for the next tasks, reflective comments and resources used. For example: "12 Feb, Priya. Tested the paper prototype with three Year 8 students; two missed the quantity field. Moved it beside the item and retested. Next: contrast check on the colour palette."

Interactive Data Journalism

🎯 (EC-11-04, EC-11-05, EC-11-11)

📌 Develop and publish an interactive work of data journalism

What is data journalism?

Data journalism finds, analyses and presents data to tell a news story or explain an issue. The story is built from evidence in a dataset, such as government statistics, and is often presented with interactive charts, maps or searchable tables so the audience can explore the evidence for themselves. For example, instead of writing "rents rose", an interactive graphic lets each reader look up their own suburb. Interactive data journalism combines skills you already use: research, data handling, visualisation, front-end development and writing.

Workflow, step by step

1. Question. Ask something specific and answerable: "Has the share of students who walk or ride to school changed since 2019?" Identify the audience and what they need to know.
2. Data. Find trustworthy data: national statistics from the Australian Bureau of Statistics (abs.gov.au), the government data portal data.gov.au, or Transport for NSW open data. Record the source, date, licence and definitions. Check whether you may reuse it and how to credit it. Or collect your own data by survey, and record how.
3. Clean and analyse. Remove duplicates and errors, make units and dates consistent, and handle missing values openly. Then calculate the summaries that answer the question (totals, percentages, change over time) in a spreadsheet or code. Check results against a second source, and ask whether the data could tell a different story.
4. Visualise. Choose the chart that suits the question: lines for change over time, bars for comparing categories, maps for location. Label axes and units, start bar-chart scales at zero, use a colour scheme that works for colour-blind readers, and add alt text and a data table.
5. Publish. Build the interactive page, test it on phones and with a keyboard, and publish it to your school's web space or a free static host so your audience can read it. State the source, the date and the method, and give a way to send corrections.

Ethics of data journalism

• Accuracy and honesty: report what the data shows. Do not cherry-pick, and do not imply that correlation proves cause.
• Context and fair scales: a truncated axis or unlabelled units can make small changes look dramatic. Present the numbers in context, such as rates per 1,000 people rather than raw counts when populations differ.
• Privacy: small groups can be re-identified from data that looks anonymous. Publish only what is needed and never expose personal details.
• Consent and sources: if you collect data from people, explain the purpose and get consent (and a guardian's if under 18).
• Bias and representativeness: ask who is missing from the data. A survey of 20 friends does not represent a school.
• Indigenous data: data about Aboriginal and Torres Strait Islander Peoples raises data sovereignty. NESA describes data sovereignty as the right of Indigenous Peoples to determine the creation, collection, ownership and application of data that is for and about them. Frameworks such as the CARE Principles for Indigenous Data Governance (collective benefit, authority to control, responsibility, ethics) and Maiam nayri Wingara are guides to good practice; involve the communities concerned rather than speaking for them.
• Accessibility and transparency: make the story usable by everyone, share the method and correct mistakes openly.

A worked mini-example you can build

Story: "How do students get to school?" The dataset below is invented for practice and is not real. For a real story you would use a published dataset or your own survey. The interactive page has a slider to choose a year; the bars update, a sentence summarises the biggest mode for screen-reader users, and a table gives the underlying data.

1. Question: Which way of getting to school is most common, and how has that changed?
2. Data: percentages for four travel modes in four years, stored in a small JavaScript object (a real project would load a CSV or JSON file and record the source).
3. Analyse: find the largest value in each year; check that each year sums to 100%.
4. Visualise: bars of equal thickness with one colour (length carries the data), value labels, and a table.
5. Publish: save the file as index.html, upload it, and add a source line and a contact for corrections.

<h1>How do students get to school?</h1>
<p>Practice data made up for this exercise. Not real figures.</p>
<label for="year">Year: <output id="yr">2025</output></label>
<input id="year" type="range" min="0" max="3" value="3" step="1">
<div id="chart" role="img" aria-label="Bar chart of travel modes"></div>
<p id="summary" aria-live="polite"></p>
<table id="table"><caption>Data behind the chart (% of students)</caption></table>

<style>
  .row { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
  .row span:first-child { width: 4rem; }
  .bar { height: 1.4rem; background: #0a7c86; }   /* one colour: length, not colour, carries the data */
</style>

<script>
  const years = [2019, 2021, 2023, 2025];
  const data = {                       // % of students; invented for practice
    Walk: [22, 24, 26, 27], Bike: [6, 7, 9, 11],
    Bus:  [28, 22, 24, 25], Car:  [44, 47, 41, 37]
  };
  const slider = document.getElementById('year');

  function draw() {
    const i = Number(slider.value);
    document.getElementById('yr').textContent = years[i];
    document.getElementById('chart').innerHTML = Object.entries(data).map(([mode, v]) =>
      `<div class="row"><span>${mode}</span><span class="bar" style="width:${v[i] * 4}px"></span><span>${v[i]}%</span></div>`
    ).join('');
    const top = Object.entries(data).sort((a, b) => b[1][i] - a[1][i])[0];
    document.getElementById('summary').textContent =
      `In ${years[i]}, ${top[0]} was the most common way to get to school (${top[1][i]}%).`;
  }

  document.getElementById('table').innerHTML = '<caption>Data behind the chart (% of students)</caption>' +
    '<tr><th>Mode</th>' + years.map(y => `<th>${y}</th>`).join('') + '</tr>' +
    Object.entries(data).map(([m, v]) => `<tr><th>${m}</th>${v.map(n => `<td>${n}</td>`).join('')}</tr>`).join('');

  slider.addEventListener('input', draw);
  draw();
</script>

Extend it: add a "Year" label to the table, replace the data with a real dataset from data.gov.au (recording its licence), add a second chart, or add tooltips. Test that it works with the keyboard only, at phone width, and at 200% zoom.

Choosing a Project Management Approach

🎯 (EC-11-08, EC-11-09)

📌 Select an appropriate project management approach to develop an interactive media-based solution

NESA's glossary defines project management as the process of planning, organising, controlling resources, monitoring timelines and activities, and completing a project to achieve a goal that meets identified criteria. The approach you choose sets how the work is organised over time. Three are common for interactive media projects.

Three approaches

• Waterfall completes the stages in order (requirements, design, development, testing, installation, maintenance). Each stage is finished and signed off before the next starts, and the client sees a working system near the end. It emphasises planning and documentation.
• Agile works in short cycles (often one to four weeks, called sprints in Scrum). Each cycle plans, builds, tests and reviews a small working piece, with the client giving feedback each time. Work is prioritised from a backlog, and the plan changes as learning arrives.
• Prototyping builds a quick, cut-down version early so users can react to it, then refines it (or throws it away and builds properly). It focuses on discovering what users need before committing to a full build. Prototyping is often used inside waterfall or agile projects.

Selecting an approach: criteria

Applying the criteria

Whatever the approach, use the same planning and tracking tools: a Gantt chart for tasks, durations and dependencies (NESA Course Specifications, p.12), and a process diary for progress and decisions (p.13). Year 12's Enterprise project covers these in more depth; see the Enterprise Project notes.

User Interaction in Web-Based Systems

🎯 (EC-11-01, EC-11-10)

📌 Apply features of user interaction and UX within web-based systems

• communication processes via social media
• search, sort and selection processes via online retail services
• online gaming platforms

Applying features of user interaction and UX means choosing interface features and processes for a real system so people can reach their goals quickly and safely. The three contexts below appear in the syllabus. In each, ask what the user is trying to do, which features help, and which UX principles those features apply.

Communication processes via social media

Social media communication follows a repeatable process: compose (write, add media, add alt text and captions), publish (choose the audience), notify (followers see it in a feed or notification), react and reply (likes, comments, shares, direct messages), and moderate (report, hide, block, remove). Each stage relies on a UI feature and a UX principle:

Design a class discussion board: require a name (or a chosen display name), allow replies within a topic, let teachers pin announcements and hide inappropriate comments, notify users of replies only, and show a clear "Report" option on every post. Consider privacy (who can see the board) and accessibility (keyboard-operable reply buttons).

Search, sort and selection processes via online retail services

Online retail depends on helping people find the right item among many. The typical path is search, filter, sort, compare and select, then add to cart. Each step reduces the number of choices, which speeds decisions. The flowchart shows the logic, using NESA's flowchart symbols.

Good retail interaction features include a search box that suggests terms as you type and tolerates spelling mistakes; filters shown as check boxes or sliders (category, size, price); a sort menu; a results count; clear product cards with price and image; and a cart that always shows what is in it. Here is a small working example of search, filter and sort in JavaScript:

<label for="q">Search</label> <input id="q" type="search">
<label for="cat">Category</label>
<select id="cat"><option value="">All</option><option>Shirts</option><option>Shoes</option><option>Bags</option></select>
<label for="sort">Sort by</label>
<select id="sort"><option value="name">Name (A to Z)</option><option value="low">Price (low to high)</option><option value="high">Price (high to low)</option></select>
<p id="count" role="status"></p>
<ul id="results"></ul>

<script>
  const products = [
    { name: 'Polo shirt', category: 'Shirts', price: 24 },
    { name: 'Sports shirt', category: 'Shirts', price: 19 },
    { name: 'Leather shoes', category: 'Shoes', price: 65 },
    { name: 'Sneakers', category: 'Shoes', price: 48 },
    { name: 'School bag', category: 'Bags', price: 39 }
  ];
  const q = document.getElementById('q'), cat = document.getElementById('cat'), sort = document.getElementById('sort');

  function show() {
    let list = products
      .filter(p => p.name.toLowerCase().includes(q.value.trim().toLowerCase()))   // search
      .filter(p => !cat.value || p.category === cat.value);                        // filter
    if (sort.value === 'name') list.sort((a, b) => a.name.localeCompare(b.name));  // sort
    if (sort.value === 'low') list.sort((a, b) => a.price - b.price);
    if (sort.value === 'high') list.sort((a, b) => b.price - a.price);
    document.getElementById('count').textContent = list.length + ' items found';
    document.getElementById('results').innerHTML = list.map(p => `<li>${p.name}: $${p.price}</li>`).join('')
      || '<li>No matches. Try a different word or clear the filters.</li>';
  }
  [q, cat, sort].forEach(el => el.addEventListener('input', show));
  show();
</script>

Notice that every control has a visible <label>, the item count is announced (role="status"), and an empty search tells the user what to do next. Try searching "shirt", choosing a category and sorting by price.

Online gaming platforms

A gaming platform combines a store, a social network and a match-making service. The interaction features that shape the UX include:

• Onboarding and tutorials: teach the controls in play rather than in a manual, with adjustable difficulty.
• Lobbies and match-making: match players by skill and connection quality, and show waiting time (visibility of status).
• Immediate feedback: sound, animation and vibration confirm actions; health and score are always visible.
• Social features: friends lists, party chat, quick text phrases, and leaderboards that motivate without shaming.
• Performance indicators: a visible ping or connection warning, because delay damages the experience.
• Accessibility options: remappable controls, subtitles, colour-blind modes, adjustable text size and reduced-motion settings.
• Safety and control: report and mute buttons, parental controls, spending limits and clear age ratings.