Embrace Abbreviations to Enhance UX

Historically, first came the symbols, then the abbreviations. Early men carved the first symbols on the cave walls while abbreviations are only as old as the Romans. Which of both is understood better, depends on the context. Symbols have already proven their indispensability in the digital products, whereas, abbreviations have had their own niche. Interestingly, they both bring in similar value in some ways. They are both used as placeholder for the actual word to be displayed and are often easier and faster to read than the words they have been holding the place for.

Symbols and icons are the bread and butter of the visual languages used by design conscious companies. Meanwhile, there are only a few examples of abbreviations playing a significant role in UI, a notable one being the airline booking engines. The widespread use of airport name abbreviations (IATA codes) has a history going back to the 1930s. It is hard to escape the use of abbreviations in that sector, nevertheless, it is a perfect example where it is easy to read a system of coded names and easily guess what those codes stand for. Now imagine a system where symbols replace the abbreviations to represent city or country names. Actually, it already exists. We call them flags. Now, how many country flags do you think you know?

While building Squirro User Interface, we had an opportunity to experiment with the use of abbreviations. The sacrificial lamb was the Squirro dashboard editor. The editor has two panels: a tree panel where all widgets are listed and a properties panel where they can be configured. While most design tools place the tree panel on the left and the properties panel on the right, they do provide the options to move it around. Some users prefer the conventional way of having the properties panel on the right, others prefer the properties panel on the left, so they can reduce the mouse movement between both panels.

• We decided to have fixed positioning for the tree panel on the left and allow the user to choose the positioning of the properties panel to be either on the left or the right of the screen. Here comes the protagonist of this story, the LEFT / RIGHT switcher. Symbols or abbreviations? Arrows or L|R? Before you pick sides, let’s take stock of the situation here. Three things stand out.
• First, the words in question, i.e. LEFT and RIGHT, can be very well understood in both symbols and abbreviations.Second, it is one of those cases where the abbreviation is probably more clear than the symbol itself. Consider this unique thing about this particular abbreviation. Left and Right are co-dependent and make sense only when used together. L alone is just a letter L. R alone is just a letter R. Join them, they make LR which is gibberish but only together and yet separated with a vertical separator, they make LEFT and RIGHT.
• Third, for a change, for freshness. With standardized design norms being adopted by all, abbreviation is a breath of fresh air, isn’t it?
  
  

What are the first visuals that come to your mind when you hear the words left and right? Headphones? Signboards at the airport? Milestones on the highway? Hand gestures? Or blinking of a car bumper light while taking a turn? You see, symbols and abbreviations are just two grains in the sand when one talks about the science of cognition, conation and connotation. We need to analyse each context and look out for opportunities to experiment with the established way of doing things. Remember, these opportunities are inconspicuous because of the norms set as a part of the evolution of the design standardization. Embrace abbreviations or any other system of communication that you think speaks louder than the rest. Bonus: Your ‘moments of delight’ are on the house.