Brett LindenbergInteractivity is the quality of a product or piece of content that responds to what a person does. You click, type, drag, speak, or choose, and the system answers with a change you can see or hear. Everyday examples of interactivity include a button that changes when you press it, a form that flags a mistake as you type, a card you drag to a new column, a document several people edit at once, a voice assistant that answers a spoken question, and a video that stops to ask you something. The short demo below shows one pattern, progressive disclosure: pick the task you came to do, and the screen shows only the controls for that task.
What is interactivity?
In software, interactivity is a loop. A person gives input, the system processes it, and the system shows the result. The loop feels responsive when the result arrives fast. Jakob Nielsen's three response time limits, first published in 1993, still guide interface design: a response within 0.1 second feels instant, a delay of about 1 second is noticeable but keeps the person's flow of thought, and after about 10 seconds people turn to something else unless the system shows progress.
An interaction is one turn of that loop, such as a click and what follows it. Interactivity describes how much a product lets people do and how much it changes in response. A video player with play and pause buttons has a little. A video that asks a question and plays a different scene for each answer has much more, because the viewer's input changes the content itself.
Digital interactivity covers websites, apps, games, e-learning, and interactive video. The research field behind it is human-computer interaction (HCI). The examples below are the patterns you are most likely to design or use, with what each one is good for and the accessibility check that applies to it.
Interactivity examples at a glance
| Example | What the person does | What the product does | Use it for | Check before launch |
|---|---|---|---|---|
| Instant feedback | Presses a button, flips a toggle, fills in a field | Changes state, confirms, or flags an error | Every control | Errors are not shown by color alone |
| Drag and drop | Moves an item with a pointer or finger | Moves, sorts, or groups the item | Ordering, sorting, uploading files | The same result works without dragging |
| Progressive disclosure | Opens a section, tab, or next step | Shows more detail or more options | Long forms, settings, help content | The control works by keyboard and reports whether it is open |
| Real-time collaboration | Edits a shared file | Shows other people's changes as they happen | Team documents, designs, whiteboards | Permissions and version history |
| Gamification | Completes lessons or tasks | Awards points, streaks, or badges | Habits and practice | Rewards follow real progress |
| Voice and chat | Asks in their own words | Answers, or carries out the request | Quick questions, hands-busy tasks | Example prompts and an on-screen confirmation |
| Augmented reality | Points a camera at a room or object | Places digital objects in the camera view | Sizing products, guided repairs | A fallback for people without a capable device |
| Infinite scroll | Scrolls down | Loads more items | Feeds people browse with no goal | People can reach the footer and find items again |
| Quizzes | Answers a question | Scores it and explains the result | Learning and assessment | Time limits can be turned off or extended |
| Interactive video | Answers, clicks, or picks a path in the player | Pauses, branches, or shows content, and records the response | Training, sales, marketing, support | Captions, and tap targets large enough for a phone |
10 examples of interactivity
1. Instant feedback on buttons, toggles, and forms
The smallest example of interactivity is a control that responds the moment you use it. A button darkens when pressed, a toggle slides to On, a field says "Enter a valid email address" as soon as you leave it, and a small "Saved" note appears after you change a setting. Designers call these microinteractions. Each one tells the person that the system heard them.
Keep them fast. Nielsen Norman Group's guide to animation duration (2020) recommends about 100 milliseconds for simple feedback such as a checkbox or a toggle, and 100 to 500 milliseconds for most interface animations. Some people turn on a reduce-motion setting in their operating system, and a website can read it through the CSS prefers-reduced-motion media feature, so replace large movements with a simple fade for those visitors. Show an error with words or an icon as well as a color change: WCAG 2.2, the web accessibility standard, does not allow color to be the only way to convey information (success criterion 1.4.1, Level A).
2. Drag and drop
Drag and drop lets people move an object directly: a task card from "To do" to "Done" on a kanban board, a file into an upload area, a photo to a new place in an album. People learn it quickly because it works like moving a real object, and it suits any job where an item's position means something, such as its order, its group, or its priority.
Dragging is hard for people with limited hand control, for many screen reader users, and on small touch screens, where a drag can turn into a scroll. WCAG 2.2 added success criterion 2.5.7, Dragging Movements (Level AA): anything a person can do by dragging must also work with a single tap or click and no drag, unless dragging is essential. In practice, add a "Move to" menu or up and down buttons next to each item, give touch users a visible handle, and highlight the drop area while an item is moving.
3. Progressive disclosure: accordions, tabs, and step-by-step forms
Progressive disclosure shows the few options most people need and keeps the rest one click away. Jakob Nielsen described the pattern in 2006: show a small set of the most important options first, and offer the specialized options on request. Beginners see less and make fewer errors, and experienced users can still reach the advanced settings. Accordions, "Show more" links, advanced-settings panels, and step-by-step forms (Nielsen calls these staged disclosure) all use it.
The risk is hiding something most people need. Decide what goes on the first screen from what people do most often, and label the hidden part so they know it exists. For accessibility, follow the W3C disclosure pattern: the control is a button, its aria-expanded attribute says whether the section is open, and both Enter and Space open and close it. The demo at the top of this page applies the same idea to a video. It asks what you want to do and jumps to the part that covers it, which is a simple form of video branching.
4. Real-time collaboration
In a collaborative editor, several people work on the same file at once and see each other's changes as they happen, usually with a named cursor or a profile picture for each person. Google Docs is a familiar example. Google's help center says a Docs, Sheets, Slides, or Vids file can be edited from up to 100 open tabs or devices at the same time (checked October 2026). Shared whiteboards and design tools work the same way.
Here the product mostly helps people respond to each other. Make it clear who is in the file and who changed what. Show each person's name on their cursor, keep a version history so any change can be undone, and set who can view, comment, or edit before you share the link.
5. Gamification: points, streaks, and badges
Gamification adds game mechanics to a task that is not a game, usually points, levels, progress bars, streaks, badges, and leaderboards. Duolingo's streak, the count of consecutive days on which a learner finishes a lesson, is a well-known example. In a 2022 post, Duolingo reported that learners who reach a 7-day streak are 3.6 times more likely to complete their course. That is the company's own data, and it shows that streaks and completion go together, which is not the same as proof that the streak causes completion.
Rewards can also backfire. A 1999 meta-analysis of 128 experiments by Deci, Koestner, and Ryan found that tangible rewards people expected, whether given for doing a task, finishing it, or doing it well, made them less likely to keep at the task once the rewards stopped. Positive feedback about their performance had the opposite effect. So tie points and badges to real progress, tell people what they did well, and do not reward attendance alone. Our guide to gamification in corporate training applies this to learning programs.
6. Voice and chat interfaces
Conversational interfaces let people ask for what they want in their own words, by voice or by typing. Apple introduced its voice assistant, Siri, with the iPhone 4S on October 4, 2011, and chat assistants now sit in many apps and help centers. They help when a person's hands or eyes are busy, and for quick questions that would otherwise take several taps through menus.
A conversation has no visible menu, so people do not know what they can ask. Show example prompts, give a text version of spoken answers, confirm important actions on screen before you carry them out, and offer a way to reach a person. Video can work the same way: Mindstamp's Genie AI, on supported plans, answers viewers' questions from the video and the material you give it, and the questions viewers ask show you what the video left unclear.
7. Augmented reality
Augmented reality (AR) places digital objects into the live camera view, so they appear to sit in the real room. IKEA launched IKEA Place in September 2017, built on Apple's ARKit, so shoppers could place true-to-scale 3D furniture in their homes before buying. AR suits decisions where size, fit, or position in a real space matters, and repair guides that point at the part to touch.
AR needs a recent phone or a headset, a camera, and good light. Give everyone a fallback, such as photos with exact measurements, and remind people to watch their surroundings while they move with the camera raised.
8. Infinite scroll and "Load more"
Infinite scroll loads more items when you reach the bottom of the page, so a feed never ends. It suits browsing without a goal, such as scrolling a social feed. Nielsen Norman Group's analysis of infinite scrolling (Hoa Loranger, 2014) lists the costs: the scroll bar stops showing how long the page is, people struggle to find an item again, the footer becomes hard to reach, and an endless page can overwhelm people who came to make a decision.
For search results, product lists, and anything people compare, use a "Load more" button or numbered pages. Keep the person's place when they come back to the list, and put contact and legal links where they can reach them.
9. Quizzes and knowledge checks
A quiz becomes interactive when it responds to each answer: it scores the answer, explains why it is right or wrong, and lets the person try again. Answering also helps people remember. In a 2006 study in Psychological Science, Roediger and Karpicke found that students who took recall tests on prose passages remembered more of them 2 days and 1 week later than students who spent the same time studying the passages again, even though the students who restudied felt more confident. H5P, a free and open-source tool for building interactive content in an LMS or a website, lists 54 content types, including multiple choice, drag-and-drop exercises, and branching scenarios (checked October 2026).
If a quiz has a time limit, WCAG 2.2 expects people to be able to turn it off, adjust it, or extend it, unless the limit is essential to the activity (success criterion 2.2.1, Level A). Use a timer only when speed is the skill you are testing.
10. Interactive video
Interactive video brings these patterns into the video player. The video pauses for a question, a hotspot makes an object in the frame clickable, and a choice decides which scene plays next. The player records each answer and click against the viewer, so the creator sees who chose what, which a play count cannot show. In Mindstamp, you add questions, hotspots, and branches on top of a video you already have, without editing the file.
For the types of interactive video and the research behind them, read what interactive video is. To try finished formats, browse our interactive video examples. To build one, follow how to create an interactive video, then check your design against our best practices for interactive video.
How to add interactivity to a website, app, course, or video
Each interactive element asks for some of a person's attention and adds work to build, test, and maintain. Add one where a response helps someone finish a task, learn something, or make a decision.
- Write down the person's task and the moment they need to act or decide. That moment is where the interaction goes.
- Pick the simplest pattern that does the job. The table below maps common needs to the examples above.
- Respond within 0.1 second, or show progress when an action takes longer, so people know the system heard them.
- Make it work without a mouse. Every control should work from the keyboard (WCAG 2.2 success criterion 2.1.1, Level A), and touch targets should be at least 24 by 24 CSS pixels unless they have enough space around them (success criterion 2.5.8, Level AA).
- Test with real people on a phone and on a computer, and note where they hesitate or tap the wrong thing.
- Measure whether people use it and whether the task gets easier: completion, errors, and time on task, or for a video, the answers and clicks of each viewer.
| If people need to | Use |
|---|---|
| Know that an action worked | Instant feedback on the control |
| Put items in order or in groups | Drag and drop, with a menu that does the same thing |
| Find one setting among many | Progressive disclosure |
| Work on the same file together | Real-time collaboration |
| Practice a little every day | Streaks and progress tied to real progress |
| Ask questions in their own words | A chat or voice assistant |
| See how a product fits a real space | Augmented reality, with photos and measurements as a fallback |
| Browse with no fixed goal | Infinite scroll |
| Check what they learned | A quiz with feedback |
| Reach the part of a video that applies to them | Interactive video with branching |
Common questions about interactivity
What is interactivity in simple terms?
Interactivity means that something responds to you. If you can act and the content or the system changes because of what you did, it is interactive. A printed page and a video you can only play and pause sit at the low end. A game, a form that checks your entries, and a video that changes with your choices sit much higher.
What are interactive features?
Interactive features are the parts of a website, app, or piece of content that respond to input. Common ones on websites and in apps include:
- buttons and forms that check entries as you type,
- menus, accordions, and tabs,
- search boxes that suggest results,
- filters and sliders that update a list,
- comments, polls, and quizzes,
- chat assistants,
- clickable areas in images and videos.
What is an example of digital interactivity?
Product filters in an online store are a good one. You tick a size and a color, and the list of products updates at once. Your input changes what you see within a moment, and one more click undoes it.
What is human-computer interaction?
Human-computer interaction (HCI) is the field that studies how people use computers and how to design systems that respond well to them. It draws on computer science, psychology, and design. Guidance used on this page, such as the response time limits and the accessibility criteria, comes out of HCI research and practice.
What tools can I use to add interactivity?
That depends on what you are making. Designers build clickable prototypes in tools such as Figma, whose prototype triggers include click or tap, drag, hover, key press, and after a delay (checked October 2026). Course authors can use H5P inside an LMS or a website. For video, an interactive video platform such as Mindstamp adds questions, buttons, hotspots, and branches to a video you already have, and reports what each viewer did.
Is more interactivity always better?
No. Every extra control on a screen makes the others harder to find, and an interaction with no purpose wastes the person's time. Progressive disclosure exists for this reason. Add interactivity where a response helps someone at that moment, and keep the rest simple.
To start, pick one page, screen, or video you own and find the moment where people most often hesitate or leave. Add the one interaction that would help them there, and watch a few people use it before you add another.
