What is Interaction Design? Principles and Examples

TL;DR: What You Will Learn

• Interaction design is about how a product responds to what you do, not just how it looks.
• We cover five core principles: feedback, affordances, states, microinteractions, and consistency.
• You will see concrete Singapore examples, from Singpass to banking and food delivery apps.
• Written for beginners, aspiring designers, product owners, and marketers who want products that feel intuitive.

Who should read this: anyone curious about UX, career switchers eyeing design, or founders and PMs trying to understand why users keep dropping off.

A quick note on where these examples come from: the apps and patterns referenced throughout Singpass, PayLah!, Grab, foodpanda, and others are ones I use personally, or have watched trip up and succeed for real users while coaching junior designers and reviewing their portfolios over the years. The claims about what works and what doesn’t reflect that hands-on, practitioner-level observation rather than formal usability studies or controlled research, so read them as seasoned judgment calls, not peer-reviewed findings.

Let us begin with the basics, so the rest makes sense no matter your background.

Understanding What Interaction Design Really Means

Let me start with a simple idea. Interaction design is the design of the dialogue between a person and a product, the back-and-forth that happens every time you tap, swipe, type, or wait for a response.

Think about opening the Singpass app to sign a document or log in to a government service. Every prompt, button, confirmation, and loading state is part of that conversation, and interaction design decides whether it feels smooth or frustrating.

People often blur interaction design with UI and UX, so let me place it clearly for you.

UX is the umbrella: the entire journey a person has with a product, from the ad that first caught their eye to the support ticket they file six months later. UI is the visual surface: colour, typography, layout, the look of every screen. Interaction design sits inside both, focused narrowly on behaviour, on what happens the moment you tap, swipe, type, or wait.

A simple way to remember it: UX asks “was this worth doing?”, UI asks “does this look right?”, and IxD asks “does this respond the way I expect?” A product can have gorgeous UI and still fail on IxD, which is exactly the government-app scenario we opened with: a good-looking screen that doesn’t respond the way you expect when you tap it.

If you want the wider picture, this guide on the difference between UI and UX is a useful companion.

The Five Dimensions of Interaction Design

I find it easiest to explain IxD through its five dimensions. A model Gillian Crampton Smith first outlined in her introduction to Bill Moggridge’s book Designing Interactions (MIT Press, 2007), which interaction designer Kevin Silver later expanded with a fifth dimension, behaviour, in a 2007 UXmatters essay. Each one is a lever you can pull to shape that dialogue.

• Words: the labels, button text, and instructions, like whether Singpass says “Verify” or “Confirm your identity”.
• Visual representations: icons, images, and diagrams that support the words, such as a padlock icon signalling a secure step.
• Physical objects: the device and how you touch it, from a phone screen to a fingerprint sensor.
• Time: how the experience unfolds, including animations, delays, and progress indicators.
• Behaviour: how the product reacts, like showing an error before you submit rather than after.

When these five work together, a task feels effortless. When they clash, people abandon the task, which is exactly what interaction designers work to prevent.

Where IxD Sits Within the UX Process

Interaction design is not a separate discipline that lives on an island. It sits inside the broader UX process, usually after research and information architecture, and alongside UI design.

Picture the SingHealth Health Buddy app, where a patient tries to book an appointment or view a report. Researchers uncover what patients need, information architects organise the content, and interaction designers decide how each step flows, what happens on a tap, and how the app confirms a booking went through.

The UI designer then makes those interactions look polished, but the underlying logic of the conversation is IxD’s job.

Why Interaction Design Matters Commercially

Here is the part that gets business owners paying attention. Good interaction design directly affects whether people complete the tasks that matter to you.

If a citizen gives up halfway through a Singpass verification, that is a failed transaction, more calls to a helpdesk, and lower adoption of a digital service the government invested heavily in. The same logic applies to any Singapore e-commerce store or fintech app.

Every confusing interaction is a moment where you lose a user, a sale, or trust. That is why the principles we cover next are worth taking seriously, not as theory, but as commercial decisions.

Feedback: Telling Users Their Actions Worked

Feedback is the system’s way of saying “I heard you.” Every tap, swipe, or click should trigger a visible, audible, or physical response that confirms the action was received.

When feedback is missing, users assume nothing happened. This silence is one of the biggest causes of frustration and duplicate actions in interaction design, because a confused user will tap again, then again, then wonder if they just paid twice.

I have watched people jab a checkout button five times because the screen sat there doing nothing. Good feedback prevents that spiral before it starts.

Visual Feedback: States and Spinners

Visual feedback is the most common form you will design. A button that darkens when pressed, a spinner while data loads, a checkmark on success: these small cues tell users the machine is working.

Think about a PayNow transfer in DBS PayLah! or the DBS digibank app. When you send money, you get a clear success animation and a reference number, and that instantly reassures you the funds actually moved.

Now contrast that with a poorly built local checkout that freezes after you tap “Pay” with no spinner and no confirmation. Users cannot tell if payment went through, so they resubmit and risk a duplicate order.

Do show a loading state the moment an action starts. Don’t leave a button looking clickable while the request is already processing in the background.

Audio and Haptic Feedback on Mobile

On mobile, feedback does not have to be visual. A short vibration when you confirm a Grab booking or a soft click sound when you scan an EZ-Link card at an MRT gate reinforces that the tap registered.

Haptics are especially useful when the user is not looking directly at the screen or when a subtle nudge is enough. A gentle buzz on a successful biometric login feels reassuring without cluttering the interface.

Do use haptics sparingly for meaningful moments. Don’t buzz the phone for every scroll or minor tap, or users will feel nagged and switch it off.

Error Feedback That Guides Recovery

The hardest feedback to get right is error feedback. A red border alone tells users something is wrong, but not how to fix it.

Good error feedback names the problem and points to the solution. Instead of “Invalid input,” write “Your NRIC should have 9 characters. Please check and try again.”

When a PayNow transfer fails because of a daily limit, a helpful app explains exactly that and shows where to raise the limit, rather than dumping a generic error code.

Follow these cues for error feedback:

• Do place the message next to the field that caused it.
• Do use plain language that suggests the next step.
• Don’t blame the user or hide errors in a vague pop-up.

Get feedback right, and your interface feels alive and trustworthy. Get it wrong, and users lose confidence in seconds.

Affordances and Signifiers That Guide Behaviour

The best proof of good interaction design is when someone walks up to a product and just uses it, no instructions, no hesitation.

That instinct comes from two ideas Don Norman introduced in The Design of Everyday Things (Basic Books, 2013): affordances and signifiers. An affordance is what an element allows you to do. A signifier is the cue that tells you it is there. Norman himself puts the priority bluntly: “signifiers are of far more importance to designers than are affordances.” In other words, what a thing can do matters less than whether people can actually tell it can do it, which is exactly the gap the rest of this section is about closing.

Think of the EZ-Link and SimplyGo card readers at Singapore’s MRT gantries. The fare gate gives commuters a clear place to tap, while the reader’s display, light, and beep confirm that the card has been detected.

Nobody hands you a manual at Dhoby Ghaut. Commuters tap their card or device at the designated reader and continue once the gate confirms the transaction. The interaction works because the physical placement tells you where to act, while the device’s visual and audio feedback tells you the tap registered.

Perceived Versus Real Affordances

Here is the distinction that trips up many new designers I coach.

A real affordance is what an object can actually do. A perceived affordance is what the user believes it can do.

On screen, this matters enormously, because a flat rectangle can be tappable (real affordance) while looking completely inert (no perceived affordance). If the user cannot perceive it, the affordance may as well not exist.

Your job is to close that gap so that what a thing can do and what it appears to do line up.

Signifiers: Shadows, Colour and Shape

Signifiers are the visual grammar users read without thinking. On a digital interface, a few reliable cues tell people something is interactive:

• A subtle drop shadow that lifts a button off the page, implying you can press it down
• A filled colour block, especially a warm accent colour, that draws the finger toward the primary action
• Rounded pill or rectangle shapes that we culturally associate with buttons
• Underlined or coloured text that reads as a link
• A slight hover or press state that confirms the element responds

When you learn to apply these deliberately in a tool, layering shadows and states properly, your prototypes start feeling clickable before you write a line of code. I cover a lot of this in Figma design basics every beginner should master.

Avoiding False Affordances

The opposite problem is just as common, and I see it often on local e-commerce sites.

Some Singapore online stores have pushed the minimalist, flat look so far that an “Add to Cart” or “Checkout” label sits as plain text with no shadow, no fill, no shape. Shoppers cannot tell it is a button, so they tap around, get frustrated, and abandon the cart.

That is a missing signifier. The reverse is a false affordance: a decorative card or image styled to look pressable that does nothing when tapped.

Both erode trust. A good rule of thumb: if it looks tappable, it must be tappable, and if it is tappable, it must look tappable. Match perceived affordances to real ones, every time.

Designing States and Transitions for Clarity

When I review junior portfolios, most screens look beautiful in their perfect, filled-out form. Then I ask a simple question: what happens when the data has not loaded yet, or when something breaks?

That awkward silence tells me the designer only designed the happy path. Good interaction design covers the full lifecycle of every element, not just the moment when everything goes right.

The Essential States Every Component Has

A single button is never just one thing. It shifts appearance depending on how the user is engaging with it, and each shift is a signal.

At minimum, you should design these five interactive states for any clickable element:

• Default: the resting state before any interaction.
• Hover: feedback that the element is interactive, mostly relevant on desktop.
• Active: the pressed moment when a user clicks or taps.
• Focus: a visible outline for keyboard and accessibility users, often forgotten.
• Disabled: a clearly greyed-out state that explains why an action is unavailable.

Skip the focus state, and you quietly exclude anyone navigating by keyboard or assistive tech. That is not a cosmetic gap; it is an accessibility failure.

The Empty, Loading and Error States People Forget

Beyond individual controls, whole screens have states too. The three that get neglected most are empty, loading, and error.

An empty state is what a user sees before they have added any data, like a fresh Grab wallet with no transactions yet. Rather than a blank void, use it to guide the next action.

A loading state reassures people that something is happening. A skeleton screen or spinner stops users from thinking the app has frozen and hammering the back button.

An error state should tell users what went wrong and how to recover. “Payment failed, please check your card details” is far kinder than a cryptic red cross.

Using Transitions to Preserve Context

Transitions are how you move smoothly between all these states without disorienting the user. Done well, they reduce cognitive load by showing where things came from and where they went.

Think about ordering on foodpanda in Singapore late at night. The live tracking screen moves your order from confirmed to preparing to on the way, each change animated so a hungry user always knows what is happening.

That smooth progression keeps context intact. If the status simply jumped without any transition, you would feel unsure whether the update was real.

My strong advice: map every state of a component before you touch the visuals. List the default, empty, loading, error, and success cases first, then design each one deliberately, and your interfaces will feel far more trustworthy.

Microinteractions: The Small Details That Delight

Think about the last time you tapped your card at an MRT gate. That tap, the beep, and the fare balance flashing on the reader all happened in under a second, yet the whole thing felt reassuring. That is a microinteraction at work.

A microinteraction is a tiny, single-purpose moment in a product: flipping a toggle, pulling down to refresh a feed, or watching a heart animate when you like a post. Each one does exactly one job.

Interaction designer Dan Saffer laid out a widely used framework for this in Microinteractions: Designing with Details (O’Reilly, 2013). Saffer defines a microinteraction as “a contained product moment that revolves around a single use case”; every microinteraction has four parts. There is the trigger that starts it, the rules that govern what happens, the feedback that tells you what is going on, and the loops and modes that decide how it behaves over time or in different states.

These small details are often what separate a forgettable product from one people quietly love. Nobody remembers a good login form, but they remember an app that felt alive in their hands.

What Makes a Microinteraction Feel Good

A good microinteraction feels good because the feedback matches the action in both timing and weight. When you swipe to confirm a payment in GrabPay, the slider moves with your thumb and locks in with a subtle confirmation, so you feel in control the whole time.

SimplyGo does the same with its tap and beep plus balance display. The response is instant, the sound is clear, and you know without thinking whether the tap worked.

The best ones respect context too. A pull to refresh only fires when you are at the top of a list, not halfway down, because the rules understand where you are.

Common Examples Across Mobile Apps

You interact with dozens of these every day, often without noticing. A few recurring patterns show up across almost every mobile app:

• A toggle switch that slides and changes colour to confirm a setting has changed.
• Pull to refresh, where the loading spinner appears as you drag.
• A like or reaction animation that gives instant emotional feedback.
• Haptic buzzes when you long-press an icon or reach the end of a scroll.
• Progress indicators during a file upload or payment.

If you want to start building these yourself, a step-by-step Figma tutorial for beginners is a practical place to prototype your first toggle or button state.

How to Avoid Overdoing Animation

The trap is treating animation as decoration. When every button bounces and every card spins, the delight wears off fast, and the app starts to feel slow.

My rule is function first, delight second. An animation should help you understand what happened, then add a little joy, never the other way around.

Keep it accessible as well. Honour reduced motion settings, never rely on colour or movement alone to signal state, and make sure a beep or vibration has a visual equivalent for users who need it.

Consistency and Predictability Across the Experience

One of the quietest wins in interaction design is consistency. When a button behaves the same way on every screen, users stop having to think about it, and that saved mental effort goes straight into finishing their task.

The idea is simple: consistency lets people transfer what they learned on one screen to the next. Every time a pattern repeats predictably, the learning curve for the rest of the product drops.

Predictable interactions build trust, and unpredictable ones quietly erode it.

Internal Consistency Within a Product

Internal consistency means your own patterns stay stable across the whole product. If a primary action is a solid orange button on the login screen, it should not become a plain text link on the payment screen.

Think about a banking app like DBS, OCBC, or UOB. If “Transfer” sits in the same place, uses the same icon, and confirms with the same style of dialog every time, a user moving money to a new payee never has to relearn the flow.

The moment that breaks- say, a transfer icon that looks like an arrow in one place and a paper plane in another- people hesitate. In banking, hesitation feels like risk, and risk feels like distrust.

External Consistency With Platform Conventions

External consistency is about matching the conventions users already know from the platform. iOS and Android users carry expectations before they ever open your app.

On iOS, a swipe from the left edge usually goes back, and a bottom sheet slides up for options. On Android, users expect the system back gesture and Material style navigation.

If your Singapore app fights these conventions, you force people to relearn gestures they mastered years ago. A well-built local app respects the platform first, then layers its own brand on top, rather than inventing its own gestures for no reason.

How Design Systems Enforce Consistency at Scale

At scale, consistency cannot survive on discipline alone. That is where design systems come in, giving teams shared components, tokens, labels, and rules so every screen inherits the same behaviour by default.

A strong example is the Singapore Government Design System (SGDS), which helps public digital services stay predictable across agencies. When you renew something on one government portal, and it looks and behaves like the last one, that is a design system doing its job.

Watch out for three trust killers as your product grows:

• Icons that mean different things in different sections
• Labels like “Cancel” and “Close” used interchangeably for different actions
• Gestures that change behaviour from one screen to the next

Fix these early, because inconsistency compounds. Every mismatched pattern is one more thing your user has to relearn, and every relearning moment is a small crack in their confidence.

Accessibility and Inclusive Interaction Choices

When I design an interaction, I keep reminding myself that the “average user” is a myth. Real users include someone squinting at their phone on a crowded MRT, a senior with slight hand tremors, and a person navigating entirely by screen reader.

Good interaction design has to work for everyone, not just the fully sighted, dexterous, twenty-something user who happens to look like the design team. In Singapore, this matters because our population is ageing fast, and services like the HealthHub app or Singpass need to be usable by people in their seventies and eighties.

Touch Target Sizes and Tap Tolerance

I have watched older testers try to tap a tiny “confirm” button three times before hitting it. Small targets punish anyone whose fingers are less precise, which is most of us on a moving bus.

I aim for generous tap areas with breathing room between them, so a slightly off aim still lands. When Digital for Life volunteers help seniors set up Singpass, the buttons that succeed are the big, well-spaced ones, not the cramped icon rows.

Colour Contrast and Not Relying On Colour Alone

Low-contrast text looks elegant in a mockup and disappears in bright outdoor light. I always check that text stands clearly against its background, and I test it on an actual phone outside, not just my monitor.

Just as important, I never let colour carry meaning on its own. If a form field goes red for an error, I add an icon and a text message too, because a colour blind user or someone with a cheap screen will miss the red entirely.

Supporting Screen Readers and Keyboard Navigation

Some users never touch the screen the way I do. They tab through a form with a keyboard or listen to it read aloud by VoiceOver or TalkBack.

That means every button needs a clear label, every image needs meaningful alt text, and the focus order has to follow the visual flow. If you cannot complete a HealthHub booking using only the keyboard and a screen reader, the design is not finished.

IMDA’s push for inclusive digital services and the wider Digital for Life movement have made this expectation mainstream, and I see it come up when hiring managers probe candidates on inclusive thinking during UX designer interview questions hiring managers ask.

Here is the part leadership tends to care about most: accessible interaction is good business. Every user you accommodate is a user who completes the task, buys the product, and never calls your support line asking how to log in.

Inclusion widens your market and lowers your support costs, so it is far more than a compliance checkbox.

Real Product Examples Worth Learning From

Principles feel abstract until you watch them working inside apps you actually use. So let me walk you through a few products that get interaction design right, and one that reminds us how easily it goes wrong.

Singpass and The Myinfo Autofill

If you have applied for anything official in Singapore recently, you have felt this one. Opening a bank account or a government e-service used to mean keying in your NRIC, address, and date of birth by hand, then hoping you did not fat-finger a digit.

The Singpass app’s Myinfo autofill collapses that whole ordeal into a tap. You authorise the data pull, and the form populates itself with verified details.

What makes it good interaction design is not just convenience. It is the clear feedback (you see exactly which fields will be shared before you confirm), the trust signal built into that consent screen, and the way it removes an entire category of tedious, error-prone work.

Grab's Booking Flow

Grab is a masterclass in states and microinteractions. From the moment you set a pickup point, the map, the fare estimate, and the driver-matching animation all keep you informed about where you are in the process.

The little details matter here. The pin that snaps to a road, the loading pulse while it finds a driver, the live car icon crawling towards you: each one is a microinteraction that answers the silent question “is this working?” before you even ask it.

Google's Material Patterns

Google’s Material Design is where you learn consistency and affordances at scale. Buttons look pressable, floating action buttons signal the primary task, and ripple effects confirm every touch.

Because the patterns are shared across countless apps, a user who learns one Material app already half-knows the next. That is affordance and consistency doing quiet, compounding work.

The Cautionary Example

Now picture the opposite. You have all met a checkout page where you click “Pay”; nothing visibly happens, so you click again, and suddenly you are worried you have been charged twice.

That is a feedback failure. No spinner, no disabled button, no confirmation state, just silence that breeds anxiety and, often, duplicate submissions. A single missing microinteraction undermines the whole experience.

Make Deconstruction a Habit

Here is the practice I recommend to everyone starting: pick one app you open daily and interrogate it. What happens when you tap? Does it acknowledge you? What state are you in, and how do you know?

Notice which affordances guide you and which leave you guessing. Over time, this trains your eye far faster than reading theory alone.

If you want to go further and actually rebuild these flows, you will need prototyping tools, which is why it helps to understand what Figma is used for in design teams and real projects. Structured practice turns casual observation into a repeatable design skill.

Building Interaction Design Skills in Singapore

Understanding interaction design is one thing. Actually doing it, day after day, on real products with real users, is where careers are built.

So how do you actually become an interaction designer? In short: learn the tools (Figma and prototyping), build a portfolio of case studies that show your decision-making rather than just final screens, and get real user-testing reps in, ideally through a structured, accredited programme if you’re eligible for SkillsFuture funding. The rest of this section breaks each of those down.

The good news is that the path from curious beginner to hireable practitioner is more structured than it looks, especially here in Singapore where employers are actively hunting for this talent.

Core Skills and Tools to Learn

If you want to practise interaction design professionally, start with the tools teams actually use. Figma is the industry standard here, and you should get comfortable building clickable prototypes with transitions, hover states, and micro-interactions, not just static screens.

Beyond the software, learn to run user testing. Watching five real people fumble through your prototype teaches you more than any theory ever will.

I always tell learners to build a simple test script, recruit a handful of users (even friends who match your target persona), and observe where they hesitate. Those hesitation points are your redesign priorities.

You will also want a working grasp of information architecture, interaction patterns, and how to document flows so developers can build what you designed without guessing.

Building a Portfolio With Interaction Case Studies

No hiring manager in Singapore will hire you on tools alone. They want to see how you think, and that lives in your portfolio.

Rather than showing pretty final screens, write case studies that walk through a problem, your research, the interaction decisions you made, and what changed after testing.

A strong case study might cover something local and recognisable, like redesigning the booking flow for a clinic app or simplifying a hawker payment interface. Pick projects that show cause and effect.

Funding Accredited Training With SkillsFuture

Here is where Singapore genuinely helps you. SkillsFuture Credit and SSG funding can make accredited UX/UI training substantially more affordable, and for eligible Singaporeans and PRs, the out-of-pocket cost drops considerably.

That matters because demand for UX/UI talent keeps growing across banks, government digital services, e-commerce, and startups. Roles like UX designer, product designer, and interaction designer appear regularly on local job boards, and the compensation reflects that demand.

If you are weighing whether it is worth the effort, take a look at these realistic UX designer salary figures in Singapore to see where a career track can lead.

Self-study works, but it is slow and full of blind spots. A structured, career-track programme with a mentor reviewing your work is the fastest way to close skill gaps, build a defensible portfolio, and use your SkillsFuture funding on something that actually moves your career forward.

Conclusion

Remember that moment of friction we opened with: the app that made you tap three times to do something that should have taken one? The reason you barely notice good interaction design is precisely because it works. When a product feels intuitive, that ease is not an accident; it is the result of deliberate choices most people never see.

That is the quiet promise of interaction design. It takes something confusing and makes it effortless, so the person using it never has to stop and think about the interface at all.

Across this article, we walked through the five principles that make that possible. Feedback reassures people that their action landed. Affordances and signifiers tell them what they can do without a manual. Well-designed states cover the full lifecycle of every screen, not just the happy path. Microinteractions add the small moments that make a product feel alive. And consistency lets people carry knowledge from one screen to the next without relearning anything.

Master these together, and you can turn a frustrating product into one people enjoy using, whether that is a healthcare portal, a food delivery app, or an internal tool your colleagues rely on every day.

The best way to sharpen your eye is to start paying attention. The next time you top up an EZ-Link card in an app, book a hawker table, or pay through PayNow, ask yourself what made it smooth or clumsy, then try to name the principle at play.

When you are ready to move from noticing to building, structured training will get you there faster than trial and error alone. Consider enrolling in the Certified UX Designer (CUXD) programme at Equinet Academy, which is SkillsFuture funding eligible and designed to help you practise these principles on real projects.

Start observing today, and design the interactions people never have to think about.