Interaction Design
Interaction design defines how people and interactive systems communicate through actions, states, feedback, and recovery. It turns a task into a usable flow and tests whether people can understand, control, and complete it.
itWeb development | OpenSkills.info
Intro
Interaction Design
Interaction design specifies the conversation between a person and an interactive system. The person forms an intent, notices an available action, acts, receives feedback, and interprets the result. The system moves from one state to another throughout that exchange. A screen layout matters, but the interaction also includes timing, language, input method, rules, errors, and recovery.
The central design object is behavior over time. A static mockup can show a button and a form. An interaction model states when the button is enabled, what happens after activation, how progress is communicated, what invalid input does, whether work can be undone, and what remains true after a failure.
The interaction loop
A useful interaction loop has six parts:
- Intent: The person has a goal in a real context.
- Opportunity: The interface makes a relevant action perceivable.
- Action: The person uses a supported input method.
- State change: The system accepts, rejects, or continues the operation.
- Feedback: The interface communicates what happened in time to guide the next decision.
- Interpretation: The person compares the result with the goal and continues, recovers, or stops.
Breaks can occur at every boundary. A control without a clear label hides the opportunity. A pointer-only gesture excludes keyboard use. Delayed or absent feedback makes a completed action look ignored. An error message that describes the system rather than the remedy prevents recovery.
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://www.iso.org/standard/77520.html
Supports
- Human-centred design activities across the life cycle of interactive systems
- Scope across hardware, software, products, systems, and services
- Relationship among human factors, usability, and accessibility
- https://www.iso.org/obp/ui?_escaped_fragment_=iso%3Astd%3Aiso%3A9241%3A-110%3Adis%3Aed-2%3Av1%3Aen
Supports
- Interaction principles independent of a specific interaction technique
- Usability framed through effectiveness, efficiency, and satisfaction in context
- Task suitability and user-system interaction guidance
- https://www.interaction-design.org/literature/topics/interaction-design
Supports
- Interaction design as the design of interactive products and services
- Scope including behavior, motion, sound, space, and interface qualities
- Relationship between interaction design and user experience
- https://www.nngroup.com/articles/ten-usability-heuristics/
Supports
- Ten usability heuristics and their review purposes
- Visibility of system status and timely feedback
- User control, consistency, error prevention, recognition, recovery, and help
- https://m3.material.io/foundations/interaction/states/overview
Supports
- Enabled, disabled, hover, focused, pressed, and dragged states
- Consistent and accessible state indicators
- Combined component states
- https://www.w3.org/WAI/WCAG22/Understanding/input-modalities.html
Supports
- Pointer gestures and cancellation
- Label in name, motion actuation, concurrent inputs, dragging, and target size
- Touch precision and motor-access considerations
- https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
Supports
- Programmatic exposure of status without unnecessary focus change
- Distinction between status messages and modal interruption
- Accessible validation and progress feedback
- https://www.designcouncil.org.uk/resources/the-double-diamond/
Supports
- Discover, Define, Develop, and Deliver phases
- Divergent and convergent work around problem and solution
- Iteration through research, prototyping, and testing
- https://www.designcouncil.org.uk/resources/the-double-diamond/history-of-the-double-diamond/
Supports
- Double Diamond development in 2003
- Naming and purpose of its four phases
- Publication as a shared representation of design process
- https://www.gov.uk/service-manual/design/making-prototypes
Supports
- Prototype fidelity from paper sketches to code
- Selecting a prototype for the question and project phase
- Testing alternatives before production commitment
- https://www.gov.uk/service-manual/user-research/using-moderated-usability-testing
Supports
- Moderated task-based usability testing process
- Research questions, representative participants, and believable non-leading tasks
- Observation, think-aloud practice, and moderator responsibilities
- https://www.gov.uk/service-manual/user-research/analyse-a-research-session
Supports
- Separating raw observations from interpreted findings and actions
- Collaborative analysis after research sessions
- Turning findings into prototype changes for further testing
- https://github.com/sindresorhus/awesome
Supports
- Discovery of Awesome Product Design, Awesome Web Design, Awesome Framer, and Awesome Design Principles
- https://github.com/ttt30ga/awesome-product-design
Supports
- Discovery of Origami Studio, Framer, Proto.io, ProtoPie, Lottie, and UX Checklist
- Interaction-design ecosystem categories spanning research, prototyping, and accessibility
- https://github.com/nicolesaidy/awesome-web-design
Supports
- Discovery of Figma, Sketch, Framer, Justinmind, Marvel, and Flinto
- Separation of general design tools and prototype tools
- https://github.com/podo/awesome-framer
Supports
- Discovery of Framer learning and prototyping resources
- https://github.com/robinstickel/awesome-design-principles
Supports
- Discovery of Apple, Material, GOV.UK, and Ant Design principle collections
- https://origami.design/tutorials/
Supports
- Origami tutorials for conditional behavior, components, live data, and interaction
- https://origami.design/documentation/patch-editor/patches
Supports
- Origami patches as connected blocks for interaction, animation, and behavior
- https://www.protopie.io/learn
Supports
- ProtoPie learning path for triggers, responses, scenes, variables, and formulas
- https://www.protopie.io/learn/docs/formulas-getting-started
Supports
- ProtoPie formulas, layer properties, calculations, and local or global variables
- https://www.framer.com/academy/lessons/framer-animations-component-interactions
Supports
- Framer component interactions and animated state changes
- https://www.framer.com/help/articles/using-event-variables/
Supports
- Events connecting nested component actions to parent and canvas behavior
- https://airbnb.io/lottie/
Supports
- Cross-platform rendering and implementation guidance for motion assets
- https://uxchecklist.github.io/
Supports
- Adjacent UX research, design, testing, and delivery activities
- https://www.figma.com/prototyping/
Supports
- Figma triggers, transitions, variables, conditions, expressions, and responsive prototype viewing
- https://www.sketch.com/docs/prototyping/
Supports
- Sketch links, hotspots, overlays, scrolling, fixed elements, start points, preview, and sharing
- https://www.axure.com/support
Supports
- Axure training for interactions, dynamic panels, shared prototypes, and team projects
- https://www.axure.com/prototype
Supports
- Axure events, actions, conditions, variables, and data-driven prototypes
- https://www.uxpin.com/docs/editor/interactions/
Supports
- UXPin triggers, actions, states, variables, API requests, and conditional branches
- https://balsamiq.com/support/docs/wireframing/linking/
Supports
- Linked boards for click-through prototypes and usability testing
- https://www.computerhistory.org/tdih/january/7/
Supports
- Ivan Sutherland's 1963 Sketchpad thesis and direct graphical manipulation with a light pen
- https://www.computerhistory.org/timeline/1968/
Supports
- The 1968 NLS demonstration of mouse input, hypertext, collaborative editing, and videoconferencing
- https://engineering.stanford.edu/news/stanford-researcher-doug-engelbart-inventor-computer-mouse-dies
Supports
- Engelbart's 1968 demonstration and its interactive-computing features
- https://computerhistory.org/press-releases/xerox-alto/
Supports
- Xerox Alto design in 1973 and its bitmap display, mouse, windows, menus, and direct manipulation
- https://www.cs.umd.edu/~ben/publications.html
Supports
- Shneiderman's 1983 Direct Manipulation publication
- Continuous object representation, physical actions, reversible operations, and visible effects
- https://www.computerhistory.org/timeline/1984/
Supports
- 1984 Macintosh as a successful mouse-driven graphical personal computer
- MacPaint and MacWrite use of mouse and WYSIWYG interaction
- https://www.w3.org/press-releases/1999/wcag/
Supports
- WCAG 1.0 publication as a W3C Recommendation on 5 May 1999
- https://www.apple.com/newsroom/2007/01/09Apple-Reinvents-the-Phone-with-iPhone/
Supports
- iPhone introduction on 9 January 2007
- Multi-touch interface controlled with fingers and device sensors
- https://www.w3.org/TR/2008/REC-WCAG20-20081211/
Supports
- WCAG 2.0 publication as a W3C Recommendation on 11 December 2008
- Technology-independent, testable accessibility guidance
- https://www.iso.org/standard/52075.html
Supports
- ISO 9241-210 first edition publication in 2010
- Human-centred design requirements for interactive systems
- https://www.w3.org/WAI/news/2018-06-05/wcag-21-is-a-web-standard/
Supports
- WCAG 2.1 publication as a W3C Recommendation on 5 June 2018
- Additional success criteria beyond WCAG 2.0
