UTM · Human–Computer Interaction · 2026/27
We are The Ghosters. Across four project stages, we look for the small frictions people meet with technology—and design calmer ways through them.
First things first · Project 0
We create behind the scenes, so people can move through technology with less friction. Meet the five students behind the work.
Second-year Cybersecurity student who enjoys protecting digital systems and solving complex challenges. He sees cybersecurity as an intricate puzzle: connect the dots, anticipate threats, and make technology safer and easier to use.
HCI · Cybersecurity · Accessibility
First-year Computer Network and Security student. She describes herself as an INFP and enjoys playing musical instruments and reading.
Networks & Security · INFP
Hong Grace Enying is a second-year Computer Graphics student. She describes herself as an ENTP and enjoys playing games.
Computer Graphics · ENTP
First-year Computer Network and Security student, usually called Syakirah. She enjoys hiking with her family and listening to music.
Networks & Security
Second-year Computer Networks and Security student at UTM. She codes in C++ and JavaScript, enjoys thrillers and travelling, and cares about making technology simple and friendly for everyone.
Networks & Security · SECRHWhy “Ghost In UI”? The best interface often goes unnoticed when it works smoothly. Our motto is: “We haunt the bugs, not the users.”
The beginning · Group establishment
Our first step was to form a team, give it an identity, and create a public home for the work we will publish throughout the semester.
The Ghosters · Human–Computer Interaction
Hello, and welcome to our HCI project journal. We are five UTM students exploring how thoughtful interface design can make everyday technology clearer, more inclusive, and easier to use.
A good interface often fades into the background: people can focus on their task instead of fighting the screen. We chose the name “The Ghosters” to represent that quiet work. We look for the small friction points hiding in an interface, then try to make them disappear.
Our motto is “We haunt the bugs, not the users.” Throughout the semester, this blog will bring together our team, our observations, and the ideas we develop across Project 0, Project 1, Project 2, and Project 3.
Group leader: confirm with the team before submission. This page is the group’s blog home.
Project 1 · Proposal
Our project focus has shifted from restaurant ordering to the supermarket self-checkout kiosk. A teammate reported that a kiosk they encountered at AEON felt difficult to use. We treat that as an initial observation to investigate, not as a claim about every store.
See what gets in the way01 / Problem space
Self-checkout asks shoppers to identify products, scan or search, resolve mistakes, and confirm a basket—often while keeping track of what they have already done. Clear steps, visible recovery, and accessible controls can make that process easier to follow.
Three usability problems
The examples below focus on how kiosk screens, basket controls, and physical reach can affect a shopping task.
Finding an item
Product categories, produce look-up, promotions, bag prompts, and scan guidance can compete for attention. When secondary choices interrupt the main task, shoppers must work harder to find and add the right item.
Correcting a mistake
A shopper may scan an item twice, choose the wrong produce entry, or need to change a quantity. If correction tools are hard to find, the person may have to repeat steps or ask staff for help.
Reaching and confirming
Small touch targets, low contrast, unclear response after a tap, or controls placed beyond comfortable reach can make a kiosk difficult to use. Where a display is fixed high or controls sit near the top edge, wheelchair users or shorter shoppers may need to stretch or ask for help.
02 / User experience
At a busy checkout, people want to finish confidently and keep the line moving. Extra decisions can add mental effort; unclear recovery can make a simple slip feel costly; and a screen that is hard to reach or read can take away a shopper's independence.
These effects matter for wheelchair users, older adults and people with low vision, and shoppers who do not use self-checkout often.
Kiosk photo examples
The images show checkout screens, station layouts, and physical interactions related to the usability problems described above.
03 / Proposed solution
A supermarket self-checkout concept that keeps the next step clear, makes basket edits forgiving, and lets shoppers listen to spoken guidance if they want it.
→ Focus item search. Show essential information first and keep promotional prompts optional.
→ Edit quantities, remove an item, and undo the last change directly in the basket.
→ Offer a reach-friendly layout that groups key actions in a full-width lower panel, with larger controls, strong contrast, clear tap confirmation, and optional voice narration. Pair it with an adjustable, tilting display mount where the kiosk hardware allows it.
Concept interface · Try it
This browser prototype uses sample items only. It does not scan barcodes, contact a store, or take payment.
Step 1 of 3
Scan a product or find it below. You can review every item before checkout.
No products match that search. Try a different name.
The prototype illustrates the proposed interaction. It is not connected to a store kiosk or payment service.
04 / Target users
These groups are specific shoppers who may use a self-checkout differently. We will validate the needs through observation and feedback.
Reach layout groups key basket actions in a full-width lower panel with larger controls. Stores should pair the interface with an adjustable, tilting display where possible, then validate reach through observation with wheelchair users.
Reach · independence · feedbackLarger type, strong contrast, distinct touch controls, and optional spoken prompts can make product details and checkout steps easier to perceive.
Legibility · narrator · confidenceSimple instructions, visible progress, and direct basket recovery help shoppers who do not already know where each control lives.
Learnability · recovery · clarity05 / Sustainability connection
Our contribution is a design proposal, not a measured sustainability outcome. The links below explain why the project is relevant.
UN Target 10.2 calls for promoting social, economic, and political inclusion regardless of age or disability. MarketMate explores how a self-checkout can offer more people a clear, independent path.
Read Goal 10 ↗UN Target 12.3 includes reducing food waste at retail and consumer levels. A clear basket review could help shoppers catch accidental duplicate or unwanted items; whether that changes waste needs to be tested.
Read Goal 12 ↗The concept relates to UTM's ESG framing through accessible interaction (Social) and visible item, quantity, and price changes (Governance). Environmental impact is indirect and unverified.
Read UTM's statement ↗Next stage
Details will be added when the team receives and shares the Project 2 brief.
Coming soonLater stage
Details will be added when the team receives and shares the Project 3 brief.
Coming soonSources
Sources supporting the design principles and sustainability links in this proposal.