By: Andika Pratama

When using an application, device users rarely examine every visual element on the screen individually. Instead, they tend to recognize familiar shapes, follow the available menu labels, and act based on their expectations of what will happen when they tap the screen. This navigation process appears almost automatic because various digital conventions have gradually become part of everyday habits. A house-shaped icon, for example, is immediately understood as a button for returning to the application's home page. This understanding does not arise because an image of a house inherently represents an application's home page, but because the relationship between the symbol and its function has been consistently reinforced across different digital services.

The ease with which users move from one application to another by relying on these visual habits demonstrates that user interface (UI) design never operates in a neutral space. Every choice of icon, arrangement of words, and form of system feedback subtly guides how users understand a particular feature. In this context, semiotics, the field of study concerned with signs and the processes through which meaning is constructed, provides a valuable perspective for examining how our digital screens work. In software development, a semiotic perspective helps address a fundamental issue that technical testing often overlooks: the extent to which the meanings users construct in their minds genuinely align with the actions performed by the system.

Why Can the Same Icon Have Different Meanings?

Different interpretations of the same symbol can be clearly observed in the use of heart-shaped icons across digital platforms. On social media feeds, users tap the heart icon to express appreciation or liking for another person's post. However, when they switch to an online shopping application, a similar heart icon serves to save a desired product to a wish list so that it can be easily found later. Although the visual forms are identical, users rarely struggle to distinguish their functions because they interpret the sign alongside the other elements surrounding it. A collection of friends' photos and the number of likes directs the mind toward one interpretation, whereas product photos and price labels evoke another.

Semiotics explains this phenomenon through the relationship between the signifier and the signified. The heart image displayed on the screen functions as the signifier, or the perceptible form of the sign, while the concepts of liking a post or saving a product represent the signified, or the mental concepts that arise in the user's mind. The relationship between visual form and mental concept turns out to depend heavily on page layout and a person's previous experience with technology. This is why an icon that seems perfectly clear to a loyal online shopper may not be immediately understood in the same way by a new user who rarely shops through a mobile device.

The dependence of meaning on surrounding context is also evident when people use digital maps in ride-hailing applications. Within the limited space of a single screen, users may see their phone's location marker, a pickup pin, and an icon representing an approaching vehicle simultaneously. If the pickup pin accidentally shifts to the opposite side of the street, users need to understand that the driver will navigate toward the pin rather than automatically approach the phone's physical location. A pin icon may be easily recognized as a location marker, but recognizing its shape alone is insufficient to explain whose location the system is referring to. Brief explanatory labels and directional lines therefore play a crucial role, because the way users interpret signs on the screen directly determines where they need to go in the real world.

Maintaining Clarity of Meaning After a Button Is Pressed

The construction of meaning in interface design does not end when users recognize an icon; it continues throughout the sequence of actions they perform. When someone presses a button labeled “Pay Now,” the text establishes an expectation that the transaction process will begin immediately. The appearance of a spinning circular animation after the button is tapped provides a visual indication that the application is processing the request. Once the animation stops, users need more definite information because statuses such as “Request Submitted,” “Awaiting Confirmation,” and “Payment Successful” refer to entirely different system conditions.

This layered communication between the screen and its users is examined in depth through the approach known as semiotic engineering. This framework views an application interface as a message from system designers to users about the features available and how the program will respond to each command. If the signs presented at the beginning, middle, and end of a process are inconsistent, users are forced to guess what is happening behind the scenes. In sensitive situations such as digital payments, this information gap may encourage users to repeat a transaction while the system is still processing the original request, or cause them to wait too long when the payment has actually failed.

When Easily Read Signs Become Misleading

A sign's visual clarity does not necessarily guarantee that an interface communicates the truth about a situation. In various shopping applications, we often encounter prominent countdown timers displaying messages such as “Sale Ends in Five Minutes” beside product prices. Anyone who sees the numbers steadily decreasing can immediately understand the message that they must make a purchasing decision quickly. However, if the promotional price remains available even after the countdown expires, the display is creating an artificial sense of urgency. A large-scale study examining thousands of online shopping websites found that manipulative design techniques known as dark patterns, including fake countdown timers, continue to appear alongside other practices that deliberately conceal cost information until the final stages of a purchase.

These findings on deceptive design take semiotic analysis beyond the technical question of how easily users can find a button. A semiotic perspective encourages us to examine whether the impressions created by the combination of colors, words, and numbers on the screen correspond to how the application actually operates. It also prompts us to ask who benefits most when users interpret an offer as an opportunity that is about to disappear. To ensure that a design remains honest and communicative, interface testing needs to involve real user experiences from the development stage onward. Designers can ask users to explain what they expect to happen before tapping a button, then observe whether the screen's response clearly confirms the outcome of their action. Various semiotic evaluation studies of web and mobile interfaces have demonstrated that this approach can reveal misinterpretation problems that conventional usability testing often overlooks.

Ultimately, an application deserves to be called user-friendly when people can understand the choices presented on the screen without having to guess what its designers had in mind. Carefully designed icons help users identify possible actions, appropriate wording explains the consequences of a command, and honest screen responses provide certainty after users make a decision. Through a semiotic approach, these three interface elements can be examined together as matters of meaning that bridge communication between people and technology, rather than being treated merely as issues of visual appearance.

References

Chandler, D. (2022). Semiotics: The Basics (4th ed.). Routledge. https://books.google.com/books/about/Semiotics_The_Basics.html?id=Yx1tEAAAQBAJ

de Souza, C. S. (2005). The Semiotic Engineering of Human-Computer Interaction. MIT Press. https://mitpress.mit.edu/9780262527095/the-semiotic-engineering-of-human-computer-interaction/

Islam, M. N., Bouwman, H., & Islam, A. K. M. N. (2020). Evaluating web and mobile user interfaces with semiotics: An empirical study. IEEE Access, 8, 84396–84414. https://doi.org/10.1109/ACCESS.2020.2991840

Mathur, A., Acar, G., Friedman, M. J., Lucherini, E., Mayer, J., Chetty, M., & Narayanan, A. (2019). Dark patterns at scale: Findings from a crawl of 11K shopping websites. Proceedings of the ACM on Human-Computer Interaction, 3(CSCW), Article 81. https://doi.org/10.1145/3359183