I started using Microsoft Teams daily when I was hired by Synergex back in May. While there were some features of the user interface (UI) that took a bit longer to master, I was able to discern most of what Teams was telling me about the status of my coworkers immediately. I looked at the green dot and intuited its meaning as “Available,” and by a similar process, came to the correct conclusion that red communicates the opposite state.

My general comfort level with user statuses in Teams is due to the design pattern that this UI component follows: the placement of a status icon next to, or partially on top of, the user icon. I’m a millennial, so I was exposed to this pattern early on via AOL Instant Messenger and saw it again in a more sophisticated form when Skype started its ascent to mass popularity during the early aughts.

Design patterns are powerful because they provide users with context. The widgets and components of an application that follows design patterns are immediately imbued with meaning by the user, while a layout that shuns convention risks a discouraging and confusing user experience. For example, the “infinite scroll” design trend, while still used in social media feeds, has fallen out of favor in the context of website landing pages, partially because visitors expect to arrive at a footer and don’t enjoy finding themselves lost in an unorganized (and data-intensive) sea of content.  

Context-Independent Components

There is, however, a limit to what users can understand about your application using background information gleaned from previous experience. To create a comprehensible and easy-to-navigate UI, components should provide enough information about themselves to make sense regardless of the varying expectations and abilities users bring to the table (i.e., the context from which someone is accessing your application). In regard to my earlier anecdote, I made the correct assumption about the green, yellow, and red dots in Teams right away. On the other hand, there was one status icon that meant nothing to me at first, as it resembled a sideways magenta jellyfish. Thankfully, in anticipation of this type of ambiguity, as well as the very real possibility that some Teams users may be color blind¹, Microsoft included a description of each status in the tooltip, so by simply hovering over the magenta jellyfish, I learned that a) it was not, in fact, a jellyfish and b) it was the “out of office” symbol. Mystery solved.

It doesn’t take a visual impairment (or cluelessness, in my case) for accessibility issues to arise, just a lack of information about information. Take abbreviations, for example. New employees may not be familiar with the acronyms that populate the tabs and menus of your application. By providing a mechanism for identifying the full meaning of abbreviations and acronyms in the user interface, you’re lowering barriers to accessibility. This strategy is discussed in the Web Content Accessibility Guidelines and applies to mobile, web-based, and desktop applications, as well as traditional websites. Form validation is another area where a “more is more” approach to information is appropriate. I can’t count the number of times I’ve submitted a form and the only indication I’ve received that something isn’t right is a grayed-out submit button. Often it takes several trial-and-error attempts before I realize that the form wants me to format my date differently or add punctuation to a new password. In this situation, technically speaking, I’m receiving just enough information to have a sense of what’s going on, but not nearly enough to make an informed decision about what the application wants me to do next. Designers and UI developers can inject extra information into each field to guide people towards correct formatting and data types, the result being that users can successfully submit a form regardless of the context they’re working in (vision impairment, device dimensions, etc.). On a related note, individuals who use a mouse to navigate and fill out forms can see where the pointer has landed and enter data accordingly, so to provide a comparable experience to keyboard users, you can highlight form fields with a border as they receive focus. Once again, the WCAG website outlines this technique in greater detail.

There are hundreds of additional scenarios where context-independent components would enhance user experience, so rather than attempting to list them all here, I’ll recommend checking out Microsoft’s Accessibility Insights, an application and browser extension created to help developers make their applications as accessible as possible. The tool is open source, free, and available on Windows, MacOS, and Linux.

[1] According to the National Eye Institute, approximately 1 in 12 men are color blind.