The Psychological Component of Design Systems
7 thoughts on designing systems to make the brain work as little as needed.
Good design goes unnoticed.
Take a very comfortable chair for example, or reliable public transportation, a quick and efficient drive-thru at a fast food restaurant. These situations enable the person experiencing them to focus on the task at hand; whether reading a book, taking a nap, or picking up dinner and not the process of doing so or why it is not working.
Much of the ease and enjoyment of well designed physical experiences is about familiarity and expectation. This also translates to digital product experiences. I’m going to share seven psychological components of systems design that are important considerations for design system thinking.
The first three fall into the Brand category.
1. Typeface
Choosing a typeface is one of the first decisions that is made during the branding process. Outside of the logo itself, there are typically two separate but directly related environments where a typeface makes its prominent home; marketing and product.
Within these spaces, we often find the use of multiple typefaces-one for headings and another for body copy. We might find that a particular typeface is the primary one used for the brand, and the other is used for accented purposes.
Since serif typefaces are usually more commonly used in marketing collateral, what’s their place in the product experience? Let’s imagine a product where the marketing website uses a serif for headings alongside a sans-serif for body copy, while in the product, the sans-serif is used exclusively for all typesetting. In this example, one might find themselves asking if or when it might be appropriate to introduce the serif typeface, predominantly used in the marketing side of the organization, into the product. When considering this evolution of how type is utilized in the design system, think about what the serif typeface represents. If it reflects the desire to persuade or sell, use it in the product when attempting to upsell a new feature or plan.
If the viewer is familiar with marketing materials standard to this product, the mind will recognize this as an opportunity. If not, then it simply communicates something new and fresh. Either way, this particularly mindful introduction of a different typeface will stand out from the rest of the interface, telling the viewer that there is something special to see here.
2. Color
Pre-existing brand colors typically determine the tone for the color palette within the product. Commonly, this brand color will be used in primary actions and interactive components, such as buttons and inputs. Accompanying a main brand color is usually an accent color, or theme of colors. Most digital products have a handful of grey tones used for backgrounds, borders and dividers, text, and icons. One way to elevate the set of tones used for these elements is to use subtle tints of the brand color instead of a sterile grey without any notes of color.
In digital products, these elements usually exist; navigation (page level, tabs, breadcrumbs, etc.), interaction (form, action, etc.), indication (progress tracking, loading, carousel, etc.), promotion (upsell, feature announcement, etc.). Each of these items have different meaning and in result withhold an opportunity to imply that meaning or functionality through color.
When thinking about how color is utilized in design systems, there is opportunity to systematically build it into these components and patterns.
For example, the brand color might be used to convey primary action, while an accent color might convey secondary interactions. Another accent color could be used to show when an item is a navigational element that will take you somewhere, and another to communicate progress like in a loading spinner or step tracker component.
In this example of Spotify, their green brand color is being used in primary interactive elements and to convey a status of “currently active” while blue is conveying a message of update and connection.
One accessibility note about colors is that unless the contrast ratio is 3:1 or more between different colors, the difference between them won’t be noticed by people with certain types of color blindness. This is also true for the slight variations of grey many products use. With this note in mind, color should not be used as the only determinant factor of validation or interaction.
3. Language
Every brand has a personality. This personality comes with a voice. This voice speaks its way through a product into places such as a homepage greeting or an action button. Voice and tone often go forgotten about, but deserve a foundational spot within a design system.
Some brands stick with a more robotic tone, as a reminder that you are interacting with a digital product (like browsing photos on Unsplash), while others opt for a more humanistic voice to make for a more personalized experience (like how Bon Appetit offers to help up your taco night game). Neither way is right or wrong, but should be considered for what type of product is being used and how we want to build trust and confidence with the people using it. At times, a more robotic tone can come across as insensitive and unaware. In addition, a more humanistic voice could come across as disingenuous and childish.
These tones in language can also be utilized in alt text for things like images. On this note, it’s important to keep in mind when writing alt text the notion that visually impaired people might not know what a dog looks like, but rather what they feel like. Instead of writing alt text for an image of a puppy as “an image of a puppy” it could be written to consider alternative senses to vision, as “a young, soft and fluffy puppy facing forward”.
With whatever voice and tone is used in your product, it’s important to consider using explicit language in areas where the goal is to build trust and confidence in a person’s ability to interact with an element.
For example, in an experience that is prompting a response from a person confirming if they wish to delete an item, instead of the action being “OK” it should be explicit in what the action will do in response, such as “Delete this item”. Remember, just using the color red to symbolize a destructive action does not provide enough visual accessibility to a person who has colorblindness for them to know this button is destructive, so the language used here is crucial.
In the same way we want to be explicit in our language to be clear about what an action might do, it also helps to imply when an interaction will require more from someone using it. For this, an ellipsis is a great tool to imply that after an initial interaction, we will require an additional response or interaction from the user. For example, an ellipses is better served in a select component where a selection is required after first activating the component — “Select an option…”. An input with placeholder text reading “Email address…” is a less appropriate use of an ellipsis since the email address is all that is requested in this input.
Lastly, when using a lighter, more conversational tone, we must recognize where the meaning of phrases can differ depending on culture or situation. What holds particular meaning in one culture, might mean something different in another.
The fourth, fifth, and sixth topics belong in the functional category of Product. These aspects of design systems can be built into patterns or layouts, implied through variant property values, and most importantly written in documentation.
4. Location
There’s a reason why when we walk into a dark room we enter hand first, slightly above the height of the door handle, on the wall to the left or right just inside the room. We are conditioned through experiential familiarity to know that is where the light switch is located. Now imagine those rooms you’ve entered where the switch wasn’t where you thought it would be. Jarring and frustrating, right?
One important way we build trust with people using our products is through placing information and interactions where they expect them to be. Take for example a user account dropdown menu. In many products, the user account dropdown menu is located and accessible from the top right of a desktop interface. As a result of this commonality, people tend to naturally look to the top right of most web products to access their account information.
The familiarity of location can be built through commonalities with similar digital products, or within internal interfaces-commonly both. The example of the user account dropdown menu is an example of a universal pattern. An example of an internal pattern is that of a common action button. Based on your specific product and commonly used layouts, it is likely that an action button exists across different workflows. Remaining consistent with this button placement trains your users to know where to look when they want to submit an action, such as the Compose, Create, and New buttons in these Google products.
5. Expectation
Like mentioned briefly in the previous topic, expectation weaves its way through the manicured jungle of systems design. Similarly to layout Location, there are ways we can begin to build in nuances of expectation into components and patterns of our design system. One of these ways is through navigational flow elements — main navigation, breadcrumbs, tabs, steps, etc. There are not necessarily right answers to the questions of which paradigms to use when it comes to navigational hierarchy, but it is best practice to define these early and build in the trust of expectation with your users.
To provide an example, typically navigational hierarchy looks something like this:
Main Navigation → Sub-navigation → Breadcrumbs → Tabs → Steps
This is a quite dramatic example and likely wouldn't utilize each of these elements in one flow. Every part of the navigational hierarchy usually has their own component styles, and together make up a pattern, likely explained through written documentation. There is typically always some sort of main navigation, sometimes, but doesn't have to be, a sub-navigation, depending on the structure of a page's content there might be breadcrumbs and/or tabs, and possibly a step tracker.
Within the paradigms of navigation, animation can be a useful tool to help guide expectations, enabling a user to understand where they are going, how they got there, or how to get back.
Again, there is no right answer to how these are structured inside of or with one another, but is best to remember to define how this works best for your product within your system, so that consistent flows are created and a user can expect what might happen if they access a tab, or go into a stepped flow, or hit the browser back button.
Whatever experience patterns you use, the important part is that you create a consistent experience for people that gives them a clear and accurate sense of expectation that will help them feel more comfortable and confident in the experience with your product.
6. Interaction
Similar to expectation, interaction is another element of shaping an intuitive experience.
Iconography can be utilized to build trust through expectation in interaction — such as defining clear differences between an ex icon and trash icon, and which means cancel/close or delete/remove. Another subtle but useful example is through the usage of different directional icons, ie. arrow, caret, and chevron.
Just like in navigational hierarchy, there is not one right solution to defining which directional icon conveys what interaction. What is right, is to question these assumptions and be consistent in implementation.
One option for doing this is to utilize all three different directional icons, and be mindful of how they are used. Arrow could be used to show progression like in an action button labeled “Get started →”. Caret could be used to display the ability to expand and collapse, or show and hide information, like in an accordion or select component (“Select an option… 🔽”, or in a dropdown menu. And chevron could be used to convey forward or backward motion, such as “Next ˃” or “˂ Back” in a pagination component.
Using different icons to convey different interaction can positively affect the subconscious mind and improve user experience through implicit behavior.
Remember, there are many different ways that people interact with your product, and the final psychological component, which touches on this, is the most important of all, because it is about inclusivity and reach.
7. Accessibility
Utilizing all of these psychological components of design systems are only beneficial when considering your reach, on the basis of inclusion. There are many technical practices when approaching accessibility which there is a plethora of documentation and writing on. A great starting point is becoming familiar with the Web Content Accessibility Guidelines, and reading books such as Inclusive Design for a Digital World by Regine Gilbert and Mismatch by Kat Holmes.
In general, there are a few practical values we can navigate life with which help us to be considerate of others, such as diversifying our communities by listening to folx who experience the world differently than ourselves. These differences in experience “consider factors like age, gender identity, privacy index, introversion, race, ethnicity, and speech, vision, or mobility challenges” as written by Mira Lane in their article on Responsible Innovation: The Next Wave of Design Thinking. This heavily influences our design decision making and in return designs for a more inclusive audience.
It’s important to remember that the people using our products are likely not using them to enjoy a unique experience or design, but to accomplish a task that helps them do their job so they can be doing whatever is most meaningful to them in life. The reality is, they have things in their lives that are more important to them than learning how to use a new application because said application wanted to be unique and stand out from the rest.
Let’s think back to the example of a well designed chair. A chair that a person who navigates life in a wheelchair, uses mobility aids to walk, someone who just finished a long day of work on their feet, someone who has a uniquely shaped body, who appreciates visually aesthetic furniture, who can easily get into the chair and get comfortable. This person shouldn’t have to think about the design of the chair, it should just work for them without second thought.
When we can find the balance between strong visual design, reliable user experience, and inclusive accessibility, then we know we’ve achieved good design.
