The fastest way to find bad HCI is to test what users actually do, not what the interface looks like in a polished mockup. Figma helps teams build and review interface designs, while Maze helps expose where people get stuck, misclick, hesitate, or quit. They work best together, but neither one saves a weak design by itself.
TLDR: Figma is great for creating prototypes, but it can hide usability problems because the design often feels cleaner than the real product. Maze is better for spotting friction through task completion rates, misclicks, and heatmaps. For example, a sign-up flow may look perfect in Figma, yet Maze might show that 38% of users click the wrong “Continue” button because the primary action is visually unclear. Use Figma to build, Maze to test, and tools like Hotjar, Clarity, Stark, and UserTesting to catch problems from different angles.
Why “bad HCI” often survives beautiful design
Bad human-computer interaction is not always ugly. Sometimes it has smooth gradients, neat spacing, and lovely icons. That is what makes it dangerous. A screen can pass a design review and still confuse real users within seconds.
Common bad HCI examples include:
- Hidden controls that require guessing.
- Ambiguous labels such as “Next,” “Done,” or “Apply” with no clear result.
- Inconsistent buttons where the same color means different things.
- Tiny touch targets that punish mobile users.
- Forms that blame users with vague errors like “Invalid input.”
- Modals that trap people or hide key actions.
It drives me crazy that many teams still call these “edge cases.” They are not edge cases if 1 in 4 users hits them during a basic task.
Figma vs Maze: what each tool is really good at
Figma is a design and prototyping tool. It is where teams create screens, flows, components, variants, and clickable prototypes. It is excellent for collaboration. Designers, product managers, developers, and researchers can comment in one shared space.
But Figma is not a usability testing platform. It can show whether a flow can be clicked. It cannot prove whether the flow makes sense to users.
Maze is built for usability testing. You can import Figma prototypes, create tasks, ask follow-up questions, and collect behavioral data. Maze tracks metrics such as:
- Task success rate
- Time on task
- Misclick rate
- Drop-off points
- Heatmaps
- User paths
This makes Maze more useful for finding patterns. If 62% of users miss the pricing toggle, you have evidence. If users spend 48 seconds on a screen that should take 10, the interface is probably asking too much.
Where Figma can accidentally hide usability problems
Figma prototypes often feel simpler than real software. There is no slow loading state. No broken internet connection. No messy user data. No weird browser extension blocking a button. That clean demo can create false confidence.
Some HCI problems that Figma may hide include:
- Dead-end flows: The prototype works only if users click the “right” hotspot.
- Fake simplicity: Empty states look clean, while real dashboards become crowded.
- Overdesigned microinteractions: Animations look nice but slow down repeat tasks.
- Unclear hierarchy: Stakeholders understand the layout because they already know the product.
- Missing accessibility checks: Color contrast and keyboard behavior may be ignored.
Honestly, it feels like some teams use Figma comments as if they were user research. “Looks good to me” is not data. It is a mood.
Where Maze helps, and where it can mislead
Maze catches friction that design reviews miss. If users search the wrong area, click labels instead of buttons, or abandon a task, Maze makes that visible. Heatmaps are especially helpful for spotting attention problems.
Still, Maze is not magic. A poorly written task can ruin the test. If you ask, “Click the Settings icon to change your email,” you have already told users what to do. A better task is: “Change the email address connected to your account.”
Maze can also create false certainty when the sample is weak. Ten testers from the wrong audience may produce neat charts and bad advice. If you are testing accounting software, feedback from random students may not mean much.
Expect to waste time on setup if your Figma file is messy. Broken links, overlapping hotspots, and complex overlays can cause test results that blame the user when the prototype is the real problem. A button that takes 3 seconds to respond in a prototype can make users think they clicked the wrong thing.
Bad HCI examples Maze can reveal quickly
Here are common interface mistakes that Maze is good at exposing:
- The invisible primary action: Users click secondary buttons because the main CTA blends into the layout.
- The confusing checkout step: Users cannot tell if shipping, payment, or review comes next.
- The misleading icon: A filter icon is mistaken for settings, or a trash icon is mistaken for archive.
- The hostile form: Users see errors only after submitting a long page.
- The overloaded dashboard: Users scan charts but cannot find the one number they need.
A simple example: a SaaS team tests a billing page. In Figma, everyone agrees the “Change plan” link is elegant. In Maze, only 54% complete the task. Most users click “Manage billing” instead. The fix is not another tooltip. The fix is clearer wording and stronger visual priority.
Other tools for finding usability problems
No single tool catches every HCI issue. A strong workflow uses several tools, each with a clear job.
- UserTesting: Best for recorded sessions with spoken feedback. Great when you need to hear why users are confused.
- Lookback: Useful for moderated interviews, screen sharing, and observing real reactions.
- Hotjar: Strong for heatmaps, scroll maps, and feedback widgets on live sites.
- Microsoft Clarity: Free session recordings, rage-click detection, and scroll behavior.
- Useberry: Similar to Maze, with prototype testing, preference tests, and click tracking.
- Lyssna: Good for first-click tests, five-second tests, and quick design validation.
- Optimal Workshop: Strong for card sorting and tree testing, especially for menus and information architecture.
- Stark: Helps catch accessibility issues inside design tools, including contrast and color blindness checks.
- Axe and WAVE: Better for accessibility testing on actual web pages.
Figma plus Maze is a solid pair for early testing. Hotjar or Clarity then checks behavior after launch. Stark, Axe, and WAVE help verify that the interface works for more people, not just people with perfect vision and a mouse.
A practical workflow for spotting bad HCI
Use this simple process:
- Design the core flow in Figma. Focus on the task users care about most.
- Run an accessibility pass. Check contrast, text size, focus order, and touch targets.
- Import the prototype into Maze. Test realistic tasks, not guided instructions.
- Review failures first. Drop-offs and misclicks matter more than compliments.
- Watch recordings or run interviews. Numbers show where. People explain why.
- Fix one major issue at a time. Retest before redesigning everything.
What to measure before calling a design “usable”
Good usability is measurable. Track task success, time on task, error rate, confidence rating, and accessibility failures. If users complete a task but feel unsure, the interface still needs work.
A good target for a simple flow might be a 90% completion rate, under 30 seconds for repeat tasks, and fewer than 10% misclicks on key screens. These numbers will vary by product, but they push teams away from taste-based decisions.
Figma helps you make the interface. Maze helps you question it. Other tools help test it in the real world. Bad HCI hides in assumptions, vague labels, tiny buttons, and flows that only make sense to the team that designed them. The best fix is not prettier UI. It is watching users struggle, taking the hint, and improving the design before customers pay the price.
