The Language of Signs in User Experience Design

Written by Justine Lapointe, Experience Designer

Signs and symbols are all around us, subconsciously communicating to us in a visual, auditory, and tactile language. For example, we know that a red octagon means “stop,” and that a siren means emergency. The study of signs and symbols, their use and interpretation, is called semiotics, and semiotics are a key element of user experience (UX) on the web. By understanding how, and what, the symbols on your website communicate to a user, you can design a seamless user experience that ultimately builds consumer trust, and results in conversions. 

Semiotics in user experience 

Semiotics plays a significant role within the UX design process in that it allows us to convey meaning through the creation of signs. Everything that goes into creating a website elicits meaning through a type of signifier (image, symbol, word, sound). These signs make it easy for a user to navigate a website without any confusion. 

Certain signs within the UX space, like product images, should be more literal in their form and make more sense as iconic representations. Pre-established conventions for certain signs should stay consistent to avoid confusion, for example, the icon for a cursor is an established norm that is best adhered to. Changing the appearance of these signs now would cause them to lose their meaning; because their meaning is dependent on recognizability.

Semiotics enables designers to consider how their users think and cover all potential outcomes, because it allows designers to organize their ideas in order to create a solid flow within a user interface (UI). This is a key element of a successful ecommerce business. If your site is easy and non-confusing to navigate, your customer will be more likely to convert, and return in the future. 

Signs on the web

The language of signs on the web informs our daily experience of the web. It is so established, that many of us may not recognize this language when we encounter it. Semiotics on the web include signs like the hamburger symbol, account symbol, store locator symbol, and search symbol, which are commonly used symbols that people understand . They are known indicators that have been given meaning to make accessing information quick and effortless.

Here are some of the established signs that contribute to web semiotics: 

Do's and don't of semiotics in user experience

Here are a few examples of how to use signs correctly on the web:

DO use signs to simplify the user experience. Commonly used signs are symbols such as: menu symbol (ie. hamburger), person (ie. account), pinpoint (ie. store locator), language selector (ie. EN). These are commonly used across the web, so most users are familiar with them. 

DON’T establish new conventions for commonly used signs unless you intend to educate your audience through a tutorial or pop-ups in order to re-establish meaning.

DO use a hamburger symbol on mobile and tablet to nest all main navigational categories and courtesy elements within it. 

DON’T create a hamburger symbol on desktop to nest settings or courtesy navigation signs, these things should be exposed and close to the main navigation. The hamburger symbol was created to represent top level menu items, not to hide away information that can sit in the footer.

DO use signs to support. When text just isn’t enough, adding a visual aid helps to get the message across and also instills trust in users. 

DON’T use signs when there isn’t a need for them. For example, if a numbered scale makes more sense to indicate strength than creating a symbolic set of signs does, use the numbers. Developing a set of signs used to represent important information should be clear on their own without the aid of tool tips. 

A universal language of signs

Not everyone speaks the same language when it comes to semiotics. That is why for some signs, it is important to establish a universal meaning that would be understood regardless of the type of user. However, some products and brands will be tailored to different types of users based on their culture, age, and other demographics. In an effort to create signs that are understood globally without misinterpretation, research is conducted prior to developing anything new. For example, millennials would remember a floppy disc being used as a symbol to represent the idea of “saving” information. Whereas Gen X (born mid 1960s to early 1980s) may not have a clue what that iconic sign is and would see it as more of a symbolic sign. 

The brand and product also have a lot to do with the design and usage of signs. Brands operating in specific sectors like travel, healthcare, or sports may already have pre-established visual conventions being used to denote important information. These brands would have developed their own semiotic language and would benefit from maintaining that set language. For example, technology brands often use icons to illustrate their specific products. When we see an icon of headphones, we know that a brand is selling them.  By better understanding a client’s product we can make better judgements on whether the use of signs should come into play. 

The perfect balance

Semiotics are essential to UX design because users want information fast and at their fingertips; they don’t want to have to hunt for information or second guess the meaning of something. Users will abandon sites that lack clear, concise signs and symbols. The good news is that adherence to semiotics still leaves space for creativity. The perfect balance is struck when designers can maintain visual conventions while creating a unique experience. 

Are you wondering if your website is communicating with signs and symbols that your users can understand easily? Diff has a user experience team that is ready to help ensure your store delivers a seamless user experience that builds consumer trust, and results in conversions.

 If you have any questions about semiotics, let’s chat!