Tag: ux design patterns

  • How to Design Effective Empty States: The UI Pattern UK SaaS Products Consistently Underestimate

    How to Design Effective Empty States: The UI Pattern UK SaaS Products Consistently Underestimate

    Empty states are the screens nobody designs until the last sprint. You know the ones: the blank table with no rows, the notification panel with nothing in it, the inbox on day one. Most UK SaaS products treat these moments as edge cases. I’d argue they’re some of the most consequential screens in your entire product, and getting them wrong is quietly killing your activation rates.

    The idea behind empty state UI design is simple enough. When a user has no data, no content, and no history in a given context, what do they see? If the answer is a white box and a sad little grey sentence reading “No items found”, you’ve essentially handed a new customer a locked room and no key.

    Smartphone displaying an empty state UI design example relevant to SaaS UK product teams
    Photo by Tima Miroshnichenko on Pexels

    Why empty states matter more than your onboarding flow

    There’s a tendency in UK SaaS product teams to spend weeks on the formal onboarding wizard, complete with progress bars and illustrated walkthroughs, and then dump the user into an empty dashboard with zero guidance. The problem is that onboarding ends. Empty states don’t. A user who creates a new project, a new workspace, a new report, or a new team will hit an empty state every single time they do something new. That’s not an edge case; it’s a recurring event across the entire user lifecycle.

    Slack does this brilliantly. Every new channel you create opens with a short message explaining the channel’s purpose and what a first message might look like. It costs almost nothing to implement and transforms what would be a void into a prompt. Notion does something similar with placeholder text in empty databases. These aren’t accidents; they’re the result of product teams treating empty states as part of the core UX, not an afterthought.

    The three types of empty state and how to handle each one

    Not all empty states are the same, and designing a single generic treatment for all of them is a mistake. I tend to split them into three categories.

    First-use empty states appear when someone uses a feature for the first time and has no data yet. This is prime onboarding real estate. The design should explain what the feature does, show the user what the filled state will look like (even if just as an illustration), and give them a single, clear call to action. One button. Not three. The copy should be active and encouraging without being patronising.

    No-results empty states happen after a search or filter returns nothing. These are different because the user has intent. They were looking for something specific. The design here should acknowledge what they searched for, suggest alternatives (fix the filter, broaden the search, check the spelling), and avoid making the user feel like they’ve hit a wall. If your product is a UK-facing B2B tool and someone searches for an invoice that doesn’t exist, the worst possible response is just “No results”.

    Cleared or completion states occur when a user has genuinely finished something: an empty inbox, a completed task list, a fully processed queue. These deserve a moment of positive reinforcement. Something brief that says “you’re done” works better than the same blank void that appears everywhere else. The tone should feel different to the first-use state, because the context is totally different.

    Copy is doing 70% of the work

    Most empty state design discussions focus heavily on the illustration. And look, a well-crafted illustration helps. But I’ve reviewed products where a decent illustration sat above catastrophically bad copy, and the screens were still useless. The copy is doing most of the heavy lifting.

    A few principles I come back to repeatedly. First: lead with what the feature does, not with what’s missing. “You haven’t added any team members yet” is worse than “Invite your team to start collaborating on projects.” One focuses on absence; the other focuses on possibility. Second: keep the call to action on the screen and make it obvious. Users who hit a blank state shouldn’t have to navigate somewhere else to fix it. If the empty state is a contacts list, there should be an “Add contact” button right there on the screen. Third: match the tone of your product voice. A fintech product aimed at UK accountants shouldn’t suddenly go whimsical with a cartoon dog in the empty state. Consistency matters.

    The GOV.UK Service Manual has good underlying principles about clarity and plain language that translate usefully into SaaS copy, even if the style is obviously different. The core idea, that users shouldn’t need to think hard about what to do next, applies everywhere.

    Illustrations: useful tool or distraction?

    The illustrated empty state became almost universal in SaaS products around 2019 and I’ve watched it calcify into a cliché. Teams reach for an undraw.co illustration, drop it above a heading and a button, and call it done. That’s not necessarily wrong, but it’s rarely right either.

    An illustration earns its place when it genuinely communicates something: the nature of the feature, what the filled state might contain, or a sense of scale. It doesn’t earn its place when it’s decorative filler that adds loading weight without adding meaning. For mobile especially, an oversized illustration that pushes the call to action below the fold is doing active harm.

    If you’re working on a product that needs to feel serious, like a compliance tool, a legal SaaS, or anything facing UK regulated industries, an illustrated empty state can actually undermine trust. A clean typographic treatment with precise copy often performs better than anything illustrated. Test it. Don’t assume.

    Empty states in dashboards: the hardest case

    Dashboard empty states are particularly awkward because dashboards are often module-based. You might have eight widgets and only three have data yet. The result is a patchy grid of partially populated information and multiple empty modules, each with their own small sad state. This fragments the experience badly.

    There’s a strong argument for using a progressive disclosure approach here: show only the modules the user has data for, surface the others as locked or greyed-out with a prompt to set them up. This is the approach I’ve seen work well in UK SaaS products that handle analytics or project management. It’s related to a broader point about structured layout thinking; the article on why British editorial and SaaS sites are returning to structured grid layouts has some useful thinking about how composition affects perceived completeness.

    For data-heavy dashboards specifically, there’s real value in pre-populating with sample data. Show the user what their dashboard could look like with placeholder numbers, labelled clearly as sample data, so they understand the value proposition before they’ve put any real information in. Notion does a version of this with their templates. It’s honest, it’s useful, and it turns what would be a confusing blank grid into an immediate demonstration of product value. More on designing those kinds of interfaces in the piece on designing data-dense dashboards that actually work.

    Testing your empty states properly

    Most teams test empty states by manually clearing their test account and looking at the screen. That’s better than nothing. But the real test is watching a real new user hit an empty state for the first time and seeing what they do. Do they understand what the feature is for? Do they know what to do next? Do they feel lost or do they feel guided?

    User testing sessions with participants who are genuinely unfamiliar with the product are invaluable here. If your team is based in the UK and doing any kind of remote testing through tools like Maze or UserTesting, recruit participants who match your actual user profile, not just whoever is convenient. You’ll learn things from a 45-year-old accountant in Birmingham navigating your empty transaction list that you’d never catch internally.

    Typography also matters on these screens more than people expect. A well-chosen typeface with the right weight and spacing can make empty state copy feel considered rather than thrown together. If you’re still using system defaults without thinking about hierarchy, the piece on building a proper typography stack in 2026 is worth your time.

    The bottom line is that empty states are not maintenance work. They’re product design work. Every time a UK SaaS product ships a blank white screen with two words of placeholder text, it’s leaving activation, retention, and trust on the table. The fix isn’t expensive. It’s just attention, and a bit of craft applied to the moments most teams skip.

  • Micro-Interactions: The Tiny Design Details That Make Users Trust Your Product

    Micro-Interactions: The Tiny Design Details That Make Users Trust Your Product

    There’s a specific moment, probably too brief to consciously register, when you click a button and it responds with a satisfying little bounce. Or when a form field turns green the instant your postcode validates. Something tiny happens, and your brain quietly files it under this product knows what it’s doing. That’s micro-interactions UX design doing exactly what it’s supposed to. Invisible when they work. Painfully noticeable when they don’t.

    I spend a disproportionate amount of time obsessing over these moments. Not because I have nothing better to do (debatable), but because the evidence is pretty overwhelming: the cumulative effect of well-crafted micro-interactions is a product that users trust before they’ve even consciously evaluated it. Let’s dig into the psychology, the mechanics, and the practical execution of getting them right.

    Designer reviewing micro-interactions UX design patterns on a large monitor in a modern studio
    Designer reviewing micro-interactions UX design patterns on a large monitor in a modern studio

    What Actually Are Micro-Interactions UX Design Patterns?

    Micro-interactions are contained product moments that revolve around a single use case. Dan Saffer, who literally wrote the book on the subject, defined them as having four components: a trigger, rules, feedback, and loops/modes. That framework holds up well. But the way I think about it is simpler: a micro-interaction is any moment where the interface acknowledges the user. It says, yes, I heard you, here’s what happened.

    They live everywhere. The pull-to-refresh gesture on your phone. The unread badge count on an app icon. The subtle colour shift when you hover over a navigation link. The progress bar that ticks along while your file uploads. Each one is a tiny contract between the interface and the human operating it. Break enough of those contracts and trust erodes fast, even if the user couldn’t tell you exactly why they stopped liking the product.

    The Psychology Behind Why These Tiny Details Work

    Humans are pattern-recognition machines. We’re wired to notice cause and effect, and when a digital interface behaves predictably in response to our actions, our nervous systems genuinely relax. This is related to what psychologists call effectance motivation, the intrinsic satisfaction we get from making things happen. A button that visually depresses when clicked isn’t just skeuomorphic nostalgia; it’s confirming the causal loop in a way our brains find deeply satisfying.

    Feedback loops are particularly powerful. When users get immediate, proportionate feedback to their actions, it reduces cognitive load because they don’t have to hold uncertainty in working memory. Did my form submit? Did my item save? Is something loading or has it crashed? Each unanswered question is a small tax on attention and trust. Micro-interactions UX design is, at its core, the business of answering those questions before the user even thinks to ask them.

    There’s also a strong connection to what Nielsen Norman Group describes as visibility of system status, the very first of the ten usability heuristics. If you want a solid grounding in this thinking, their ten usability heuristics are worth bookmarking. Everything from loading spinners to error states maps back to keeping users informed at all times.

    Hover States: The Most Underrated Micro-Interaction

    Designers spend ages on hero sections and almost no time on hover states. Which is baffling, because hover states are often the first interactive feedback a user receives on a page. Get them wrong and the product immediately feels cheap.

    A solid hover state communicates affordance. It tells the user this thing is clickable, and it gives them a moment of anticipation before committing. The best ones do it with restraint: a subtle background fill, a slight scale transform, a colour transition timed at around 150 to 200 milliseconds. Go slower and it feels sluggish. Go faster and it’s jarring. That 150 to 200ms sweet spot is the interface equivalent of a firm handshake.

    Where I see teams go wrong most often is inconsistency. Three different hover treatments across one page is a trust-eroding disaster. If links behave one way in the nav, a different way in the body copy, and a third way in the footer, users unconsciously sense the incoherence even if they never articulate it. Systematise your hover states in your design tokens early and stick to them.

    Smartphone displaying micro-interactions UX design feedback states including inline form validation
    Smartphone displaying micro-interactions UX design feedback states including inline form validation

    Loading Animations: Turning Dead Time Into Active Trust-Building

    Loading states are where a lot of products go catastrophically wrong, mostly by having nothing happen at all. A blank screen or an unresponsive button during a two-second API call is enough to make users tap twice, assume it’s broken, or abandon altogether.

    The research on perceived performance is genuinely fascinating. Studies consistently show that users rate a product as faster when there’s visible progress feedback, even if the actual load time is identical. Skeleton screens (the greyed-out placeholder layouts that appear before content loads) are particularly effective because they set spatial expectations and signal that content is on its way. Compared to a generic spinner, they’ve been shown to reduce perceived wait time noticeably.

    For loading micro-interactions UX design, the key questions are: Is it proportionate? A 200ms action doesn’t need a progress bar; a file upload absolutely does. Is it interruptible? Users should be able to cancel long operations. And does it give accurate feedback? An indeterminate spinner is better than a fake progress bar that stalls at 99% for seven seconds. That specific crime against UX has haunted me since about 2009.

    Feedback Loops That Actually Build Confidence

    The best feedback loops operate at three levels: immediate, short-term, and completion. Immediate feedback is the button press response. Short-term is the inline form validation as you type. Completion is the success state after a transaction finalises.

    Inline validation is worth dwelling on because teams chronically under-invest in it. Telling a user their password is too short after they’ve submitted the form is a UX failure. Telling them in real time, with a clear visual indicator as they type, removes friction and builds confidence simultaneously. A green tick appearing next to a valid email address is a small celebration. It’s the interface saying nice one without being annoying about it.

    Success states are equally neglected. After a user completes a key action (a purchase, a sign-up, a file save), the interface has a brief window to reinforce that they did the right thing. Monzo does this brilliantly with their payment confirmations; the little animation and clear confirmation copy make spending money feel almost pleasant, which is no small feat. It’s not accidental. That’s deliberate micro-interaction design working at full effectiveness.

    The Curious Overlap With Physical Craft

    Here’s a slightly left-field observation. The philosophy behind micro-interactions maps surprisingly well onto the idea that precision and feedback in physical tools build trust in the person using them. A well-calibrated piece of woodworking machinery gives the craftsperson constant feedback through resistance, sound, and result, much like a well-designed interface gives users constant feedback through visual, tactile, and auditory cues. Both create confidence through predictable, proportionate response. It’s the same underlying principle: feedback is what separates a tool you trust from one you fear.

    How to Implement Micro-Interactions Without Overengineering

    The trap is over-animating everything. I’ve seen portfolios where every single element bounces, spins, or fades, and within thirty seconds the site feels like a fever dream. Micro-interactions should be in service of clarity, not applause for the designer’s technical skills.

    Start with the high-stakes moments: form validation, loading states, error messages, and success confirmations. These are the places where the user is most uncertain and where feedback matters most. Once those are solid, look at primary CTAs and navigation. Then, and only then, consider the delightful extras like subtle parallax effects or playful empty states.

    For implementation in CSS, the transition and animation properties cover most hover and feedback states elegantly. For more complex sequenced animations, tools like GSAP (GreenSock) give you precise timing control without wrestling the browser. For React-based projects, Framer Motion handles the physics-based interactions brilliantly and keeps your component logic clean. The right tool depends on the complexity of the interaction, not on which library is currently trending on dev Twitter.

    The principle to carry through every decision: if removing the micro-interaction would make the interface harder to use or understand, it’s load-bearing and should stay. If removing it just makes it slightly less delightful, it’s ornamental. Both have their place. But know which is which before you ship.

    Frequently Asked Questions

    What are micro-interactions in UX design?

    Micro-interactions are small, contained moments in a digital interface that respond to a user’s action, such as a button animation on click, inline form validation, or a loading spinner during a file upload. They communicate system status, confirm actions, and build user confidence through consistent, proportionate feedback.

    Why do micro-interactions improve user trust?

    They work by reducing uncertainty. When an interface immediately acknowledges every user action, it confirms that the product is working correctly and listening. This satisfies a deep psychological need for cause-and-effect confirmation, which lowers cognitive load and builds trust over repeated interactions.

    How long should a hover state animation be?

    The widely accepted sweet spot for hover state transitions is between 150 and 200 milliseconds. Slower than that feels sluggish; faster feels abrupt. For exit transitions (mouse leaving an element), slightly longer durations around 200 to 250ms tend to feel more natural.

    What is the difference between a skeleton screen and a loading spinner?

    A skeleton screen shows a greyed-out placeholder layout that mimics the structure of the content being loaded, setting spatial expectations and signalling progress visually. A loading spinner is a generic rotating indicator with no contextual information. Research consistently shows skeleton screens reduce perceived wait time more effectively than spinners.

    Are micro-interactions bad for performance?

    Not if implemented carefully. CSS transitions using transform and opacity properties are GPU-accelerated and have negligible performance cost. Problems arise when developers animate properties that trigger browser reflows (like width, height, or top/left). Stick to transform and opacity for smooth, performant micro-interactions on any device.