← Back to list

Canto 8: The Witnessed Path

Continuous Improvement & Character Development

Tino · 2026-05-31 14:56 · 0 claps · 7.2 min read
#ux-design #software-engineering-team #ui-design #usability #technology
Open on Medium ↗
Wiki topics: UX · UI/UX Design

Canto 8: The Witnessed Path

Image: Hong Lu — Limbus Company © Project Moon. Used for non-commercial, illustrative purposes.

Image: Hong Lu — Limbus Company © Project Moon. Used for non-commercial, illustrative purposes.

Continuous Improvement & Character Development

User experience is easy to overlook when you’re deep in the weeds of feature development. You get the logic working, the tests pass, and it feels done. But there’s a quieter question worth asking: does the person using this actually have a good time doing it?

This sprint, I took a step back to evaluate the visual design of a feature I worked on — the classroom seat map — through the lens of Nielsen’s Usability Heuristics. What started as a simple evaluation turned into a concrete design improvement that made the feature genuinely more useful.

The Feature: Classroom Seat Map

The application is a student-facing exam schedule platform. One of its features is a classroom seat map — when a student clicks “Lihat Peta” (View Map), they’re shown a visual layout of the exam room so they can locate their assigned seat before the exam.

Simple enough on paper. But when you actually sit down and use it, a problem surfaces.

Benchmarking: What Cinema Apps Do Right

Before evaluating the design, I looked at how a similar problem is solved in a different domain — cinema ticketing apps. Apps like CGV and Cinema XXI have been solving the “show the user where they’re sitting” problem for years, and they’ve converged on a pattern that works well.

When you book a cinema seat, the interface shows you two things simultaneously: the full seat map of the theatre, and a clear indicator of which seat is yours — right there on the same screen. You don’t have to memorize your seat number from a previous step and then hunt for it on the map. The information travels with you.

That’s a small detail with a big impact on usability. And it’s exactly the principle this benchmark is built on.

Evaluating Against Nielsen’s Heuristic 6: Recognition Rather than Recall

Nielsen’s sixth heuristic states that interfaces should minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the interface to another.

Looking at the old design of the seat map, this heuristic is where it falls short.

Old Design of Seat Map

Old Design of Seat Map

In the old version, the page shows the classroom layout — seats numbered, rows arranged, a reasonably clear visual. But that’s all it shows. If a student clicks “Lihat Peta” and wants to find their seat, they need to already know their seat number. That number lives on the previous page. If they forgot it — which is entirely plausible, especially on an exam day when stress levels are high — they have to hit the back button, read the number again, and return to the map.

That’s a textbook Recall problem. The user is being asked to hold information in working memory and carry it manually from one screen to another. The interface is not doing the work it could be doing.

The cinema benchmark makes this gap obvious. CGV doesn’t ask you to remember your seat number and then find it on the map. It shows you both at the same time. The cognitive load is near zero.

The Alternative Design: Bringing the Information to the User

The evaluation pointed clearly toward one fix: surface the seat information directly on the map page, so the student never has to leave to retrieve it.

New Design of Seat Map

New Design of Seat Map

The new design adds a side panel to the seat map. It shows the class name and the student’s seat number right alongside the classroom layout. There’s also a “Kembali” (Back) button so navigation remains accessible. The map itself is unchanged — the same numbered seats, the same room layout — but now the student has everything they need on one screen.

This is Recognition in practice. The student opens the map, sees “Nomor Bangku: 10” on the panel, and scans the map for seat 10. No memory required, no back-and-forth navigation. The interface carries the context for them.

Positive and Negative Evaluation of the New Design

The improvement is real, but an honest evaluation has to account for both sides.

What works well:

The side panel directly addresses the recall problem. The seat number is visible at all times while the student is looking at the map, which means the cognitive task of “find my seat” is reduced to a simple visual scan rather than a memory exercise. This aligns cleanly with Heuristic 6 and mirrors what cinema ticketing interfaces have proven effective.

The addition of the “Kembali” button on the panel also supports Heuristic 3: User Control and Freedom — the student always has a clear, labeled exit route without relying on the browser’s back button.

What could still be improved:

The seat number is displayed in the panel, but the corresponding seat on the map is not visually highlighted. A student sitting in seat 10 still has to scan all 60 seats to find number 10. In a cinema app, your seat is typically highlighted or marked distinctly on the map itself. The current design gets halfway there — it tells you what your seat number is — but doesn’t yet show you exactly where it is on the map at a glance.

This is a remaining gap against Heuristic 6. Full recognition would mean the student’s seat is visually distinguished on the map — highlighted, colored differently, or marked with an indicator — so that the act of locating it requires zero scanning effort. However, given that the classroom layout is rendered as a static image, implementing dynamic seat highlighting would require a significant rework of how the map is generated and annotated — a worthwhile improvement, but one that sits outside the scope of this sprint.

Part 2: User Observation and What We Learned

Evaluating your own design only gets you so far. At some point, you have to put it in front of real users and listen. That’s exactly what this next step was — a direct observation session with 11 students who were asked to look at both the old and new seat map design and share their honest reactions.

The results were more telling than expected.

What the Users Said

The first thing that stood out was the unanimity. All 11 respondents agreed that the new design was a clear improvement over the old one. Nobody struggled with it, nobody preferred the old version, and nobody was confused by the added panel. A few representative responses:

“I notice the improvement in the UI, where I now know my seat number without having to go back or memorize it from the main page.”

“The user doesn’t need to go back to the previous page to find out the seat number and subject. The back button is also a plus compared to the old design that required the browser’s back button.”

“There’s an addition of seat info from our exam session — this is very helpful so you don’t have to memorize or go back and forth to check your own seat number.”

This validates the core design decision. The Recognition Rather than Recall improvement worked exactly as intended — users immediately understood its value and felt the difference.

The Pattern in the Feedback

What was genuinely surprising was how independently the users converged on the same suggestion. Without being prompted, multiple respondents asked for the same thing: a visual highlight or marker on the map itself to indicate exactly where the student’s seat is located.

“Maybe the seat map feature can add some indicator like a bookmark with a bright color or a specific marking symbol on the exact location of the seat, so I can instantly find my seat location without any struggle.”

“It might help to add a highlight or mark on the assigned seat number directly on the map image — for example, making the box numbered 10 turn yellow — because when there are many seats or you’re in a hurry, finding the right number can take a while.”

“Highlight the seat based on the number — if the seat number is 10, then the box with value 10 gets highlighted.”

This is significant for two reasons. First, it means the remaining gap identified in the heuristic evaluation — that the design tells you what your seat number is but not exactly where it is on the map — was felt naturally by real users, not just identified theoretically. Second, it shows that the current design, while improved, still has room to move further along the Recognition Rather than Recall spectrum.

Other recurring suggestions included adding a door or entrance marker as a spatial frame of reference, and displaying the room name directly on the map panel. One respondent also noted an interesting navigation idea — a button to switch between exam room maps if a student has multiple exams.

What the Observation Confirms and What It Adds

The heuristic evaluation and the user observation tell a consistent story, which is itself a useful finding. When your theoretical framework and your real user feedback point in the same direction, you can act on that direction with confidence.

The observation confirms that the shift from recall to recognition — surfacing the seat number directly on the map page — was the right call. It also adds nuance that the evaluation alone couldn’t provide: the next meaningful step is not just showing the seat number, but visually locating it on the map. That’s the difference between telling someone “you’re in seat 10” and actually pointing to seat 10 on the layout.

That future improvement — dynamic seat highlighting — remains a technically involved change given that the classroom layout is rendered as a static image. But the user observation has now given it clear priority and concrete justification. It’s no longer just a theoretical gap; it’s something real users asked for independently and consistently.

Closing Thoughts

This two-part process — heuristic evaluation followed by direct user observation — produced something neither could have produced alone. The evaluation gave the design direction. The observation validated that direction and sharpened the next target.

Nielsen’s Heuristic 6 turned out to be the right lens for this feature. The old design asked students to remember. The new design lets them recognize. And the user feedback tells us clearly where to go next: make recognition even more immediate by bringing the highlighted seat directly into the map itself.

That’s the kind of iterative, evidence-backed design process that separates a feature that works from a feature that genuinely serves its users.


메타데이터
post_id
62116d68abfd
slug
canto-8-the-witnessed-path-62116d68abfd
url
https://medium.com/@valentinozhuo2/canto-8-the-witnessed-path-62116d68abfd
canonical_url
https://medium.com/@valentinozhuo2/canto-8-the-witnessed-path-62116d68abfd
author_url
https://medium.com/@valentinozhuo2
status
ok
fetched_at
2026-06-09 15:37:30