Every year, digital content becomes vaster and more relevant, especially after a pandemic that forced users around the world to manage almost every aspect of life remotely. In this era, accessibility plays an important role, so all types of people can access that ever-increasing content. In this article, we explore three main things for translation project managers to take into consideration when working on accessibility compliance in translation projects.

Accessibility Standards

One of the first things to know before working with accessible documents is the expectations of the client regarding compliance. Most clients will refer to WCAG, which stands for Web Content Accessibility Guidelines. The WCAG is a document that aims to define how to make web content more accessible to people with disabilities. These guidelines are recognized internationally when working on accessible web content, which includes accessible documents. The most recent version of the document is 2.1 and the industry-standard aims for an AA level. Talk to your client and try to figure out if they are already acquainted with the standards or if more guidance will be needed.

Alternative Text

Most documents include images and graphics. How do we communicate the content of an image to someone that is blind or has a visual impairment? This is where the alternative text comes to the aid.

Alternative text, also known as alt text, aims to describe images to readers who are unable to see them. This includes screen readers that read the content on the screen to the user. When clients send a document for translations that must comply with accessibility guidelines, the file rarely includes the alternative text of the images and graphics included. This content should be translated as well since it will be read through a screen reader and must match the target language.

The ideal process is to create the alternative text in the document’s original language and then translate that text. There are several things to consider when creating alternative text, but that is not the subject of this article. To learn more about an alternative text, check the article How To: Write Good Alt Text written by the director of the Supercool Design blog.

Design for Accessibility Compliance

Another aspect to take into consideration when working on accessible documents is the design and format. The WCAG does describe that all accessible documents should comply with several guidelines, which could be resumed to a single word: readability.

Here is a list of must-do’s when reviewing the design of a document:

  • Fonts should be easy to read and have enough leading and kerning.
  • The size of the body text should be between 12 pts and 14 pts.
  • Elements that use color should have appropriate contrast. The ratio of the color contrast should be 4.5:1 according to the WCAG 2.1 Level AA guidelines.

Always make sure to check the document with the above elements in mind and inform the client if any modification to the design of the file may be necessary.

There is no denying that accessibility is more important as technology progresses and more information is stored digitally. At the same time, translation services are required just as often. Merging the two is part of the accessibility efforts around the world to create a more inclusive environment with well-informed people. To learn more about accessibility, explore the W3C’s page on accessibility standards. And if you want to learn how to manage any type of translation project, you can check the TCLoc curriculum where you can learn more about project management and localization.

To better understand the meaning of this article, we must first of all define what color is.

Color is the property attributed to light or visual perception that allows us to differentiate
objects. Color is one of the most powerful components in the graphic design language. It
influences us by conveying energy and giving diversity to what we perceive.
Color also serves to focus attention, group elements and reinforce meaning, identity and
harmony.


Color increases interest in any visual element and helps to understand and prioritize
information. It arouses emotions in people and can participate in the psychological reaction
to a message. For example, light colors tend to bring a feeling of joy, while darker colors lead
to appeasement.


Colors carry subjective messages. For this reason, they must be used intelligently and
carefully in graphic design. Here are some of their meanings:

  • Red: fire, blood, anger, love, danger, prohibition
  • Blue: ice, sea, sky, social, wisdom, melancholy
  • Green: nature, medical, concentration, stability
  • Yellow : joy, warmth, knowledge, lies

Colors have three basic visual properties:


Hue: color in its pure form is identified by the hue (red, yellow, blue…). It is a characteristic
guided by the way we see the light when it is reflected by an object.
Value: also called brightness, the value designates its intensity. For example, adding white to
a color produces a lighter value. Conversely with black. The value contributes to the
dynamics of the visual and the emotion conveyed by the message (lighter or darker).
Saturation: this is the brightness of a color. The degree of saturation measures the purity of a
color. For example, we can say that a saturated color is vivid and intense, while a
desaturated color seems blander. The colors called saturated tend to attract the attention of
the observer. Desaturated colors can be used when function and efficiency take precedence
over everything else. Caution should also be exercised when using an accumulation of
saturated colors, as they can make the message unreadable and tire the viewer. It’s all about
balance.


Some definitions :


Primary colors: yellow, red and blue. They are said to be pure and cannot be obtained by a
mixture.


Secondary colors: they are created by combining two primary colors. For example yellow +
red = orange / red + blue = purple / young + blue = green


Tertiary colors: they are created by combining a primary color with a secondary color.


Complementary colors: colors are said to be complementary if they are located on opposite
sides of a color wheel. When they are mixed, they neutralize each other. This is for example
the case of red and green, blue and red or yellow and purple. These colors, when
juxtaposed give an impression of intensity.


Monochromatic colors: they are created from different values of the same color. They are
obtained by adding black or white. Visuals based on these colors are perceived by the
observer as homogeneous.


Adjacent colors: they are identified as similar or neighboring colors on the color wheel. They
allow to create homogeneous and more varied visuals than with monochromatic colors.


Triadic colors: it is a set of colors formed with three equidistant colors on the color wheel.


Quadratic colors: it is a set of colors formed with four equidistant colors on the color wheel.

Why are colors so important in web …

Visual elements are processed by the brain faster than text, and 90% of the information transmitted is visual. It is a well-known fact: when someone arrives on a website, you only have a few seconds to make them want to stay, and colors can help you with that. But colors also have other purposes: they can help deliver a message quickly, set a whole atmosphere, or even just help to make your content more attractive. People assign importance to colors because an adapted color palette can make all the difference! But besides finding harmonious colors that stick to your content, another important point must be kept in mind: to make sure your colors are visible to everyone. With at least 1 billion people living with some form of disability in 2021 as estimated by the World Health Organization, web accessibility has become essential in an era where digital leads. To help create accessible content in terms of choosing colors, useful techniques and tools have been created.

The meaning behind color accessibility

Web accessibility is the process of creating and designing websites that can be used by everyone including people with disabilities. Disabilities have different levels of severity and can have multiple impacts on someone’s way of living. As its name suggests, color accessibility is the fact of using colors that can be seen by the widest range of people. This means choosing colors with a lot of contrast, for example between the content and the background so that anyone can clearly differentiate the two of them and easily read your text.

Color blindness, glaucoma, low vision, etc. are several disabilities affecting visual perception. Choosing color with the right criteria for everyone to see them can make a huge difference on the navigation and comfort level of people when seeing and/or reading your content. Color accessibility is not only good for users, but it also allows you to reach more people including those with visual disabilities.

Checking the Web Content Accessibility Guidelines

The  WCAG, Web Content Accessibility Guidelines, was published by the  Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). These guidelines were created to ensure that web content is accessible for everyone, despite their abilities, disabilities, and used devices. Even though the WCAG is not mandatory in every country, a lot of them are allowing people to sue websites that did not meet the WCAG standards for discrimination. Moreover, it is, in any case, recommended using the WCAG to ensure the best color accessibility.

In order to meet the WCAG’s standards, one key element is to have the text and interactive elements with a color contrast ratio of at least 4.5:1. Such a wide contrast ratio will ensure that almost everyone will be able to read any text even people who cannot see the full-color spectrum. To make it easier for you to check whether your color palette respects the contrast ratio or not, contrast checkers can easily be found online, for example, the WebAIM Contrast Checker or Adobe Color.

However some specific elements may not need to follow the 4.5:1 ratio rule:

  • Any text of 14 pt bold or larger, as well as 18 pt text and larger, should have a ratio of at least 3:1.
  • Brand logos
  • Subsidiary text and text images which are used as decoration and do not serve user purpose.

The key part: understanding color contrast

As you have just read, color contrast is one of the key criteria to ensure color accessibility. However, even with the existence of several online tools, is it recommended understanding how color contrast works.

In web design, color is used to make something stand out from the rest. To do that, you have to decide how much you want your element to stand out and in relation to which other elements. That is roughly the definition of contrast! Contrast is how you are using colors to differentiate elements from one another. Color contrast can be low when using an analogous color scheme or high when using opposite colors on the color wheel.
analogous colors : opposite colors :

Best practices for color accessibility

Even though color contrast is one of the biggest criteria in color accessibility, several elements should be taken into account to ensure that the widest range of people can clearly see your content.  

  • Ratio: you should have a color contrast ratio of at least 4.5:1 for text and interactive elements.
  • Color blindness: avoid using color blindness combinations like red-green or cyan-grey.
  • Indicators: interactive elements must not have color as their only indicator so make sure to add others like underlining links on hover.
  • Written style: colors must be written in formatting code like CSS so the accessibility can be accurately measured. Black and white are also included in this rule.

Color is not the only aspect to consider in order to make content accessible to everyone. Color accessibility is only a small part of web accessibility, that is why a lot of different aspects must be taken into account when creating a website that can be easily used by everyone. 

Ressources

Digital accessibility is about ensuring that all of the people that visit your website, including those with disabilities, can navigate your content without barriers and find the information they need. Read on to find out more about the basic principles of digital accessibility.

The Web is for everyone, regardless of where they live, how old they are, what language they speak, and regardless of their mental or physical abilities. However, many websites contain barriers that make them difficult to use for people with disabilities. Digital accessibility is about removing these barriers.

A number of governments around the world are increasingly recognizing the need for digital accessibility through laws and regulations, making accessibility not just an option, but a requirement for many websites. It has therefore become even more important for website creators to be aware of digital accessibility principles.

What Is Digital Accessibility?

The Cambridge Dictionary defines the term “accessibility” as “the fact of being able to be reached or obtained easily” and as “the quality of being easy to understand”. Therefore, if something is “accessible” it can be used or understood freely, without any constraints.

In an ideal world, all internet users should be able to freely and easily browse the internet. Unfortunately, for many people with disabilities as well as for older internet users, the degree of accessibility for websites and apps can be very low. Any disability can have a potential impact on the user experience, ranging from minor inconveniences to the inability to use a website at all. This includes visual, motor/physical, auditive, as well as cognitive and learning disabilities. For example, as the Web is a highly visual medium, blindness and vision impairment can prevent users from being able to navigate websites and access information.

How to Make a Website Accessible

Use the Web Content Accessibility Guidelines (WCAG)

Image showing tiles with access symbols.

The Web Accessibility Initiative (WAI) developed the Web Content Accessibility Guidelines (WCAG) to promote digital accessibility and set standards that websites must fulfil in order to be labelled “accessible”. The WAI furthermore helps organizations implement digital accessibility in their websites by providing technical specifications, educational resources, and examples of good practices.

As of spring 2022, the most up-to-date version of the digital accessibility criteria is WCAG 2.1. Based on these guidelines, this article provides an overview of some general good practices to keep in mind when creating websites.

Conversely, if you already have a site and would like to know how accessible it is, you might also consider testing your website to find out its accessibility score.

Think About the Design of Your Website

The design of a website is a key component of digital accessibility. This includes the use of colors, visual elements, and layouts. Using highly contrasting colors can make content more visible to users with low vision. It is also a good practice to avoid the combination of red and green, as red/green color blindness is a common form of color blindness.

People with disabilities can use assistive technology that help them navigate the Web. One example are screen readers. Screen readers read the text on a website out loud and are therefore especially helpful for people with visual impairments. Screen readers also read image alt texts. Images and other visual elements included on a website should therefore have appropriate alt texts describing them. 

One way of quickly creating a multiple column layout on a webpage is by using tables. While these tables are invisible on the front-end, they cause difficulties to people using screen readers. Screen readers encountering a table will inform the user of the various columns and rows encountered on the page instead of simply reading the content. Using tables simply for layout purposes should therefore be avoided.

Structure Your Content and Make It Easy to Read

Another principle of digital accessibility is properly structuring web content. Screen readers can scan a page for headings and hence create an overview of a page’s content for users to orientate themselves by. However, screen readers can only identify headings if they are properly ascribed the title tags <h1>, <h2>, etc. It might be tempting to choose headings based on stylistic purposes, such as using italics to indicate a heading or skipping heading levels by going from an <h2> to an <h4>. To avoid confusing screen readers, heading levels should be strictly in order and should serve the purpose of organizing content into a logical structure.

On an accessible website, content should ideally not only be easy to navigate, but also easy to understand. This can be achieved by avoiding long and complex sentence structures and jargon and slang. When acronyms are first introduced, they should be written in full and glossaries can be provided to explain specialized terminology. Applying simplified writing techniques not only benefits people with learning disabilities, but every user visiting your site.

Take Into Account Navigation and Interactivity

Some users who cannot navigate with a mouse rely on keyboard commands to browse the internet. When creating an accessible website, it is therefore important to ensure that it can be navigated easily with a keyboard. Menus are a main axis of navigation. It should therefore be ensured that each item of the menu can be accessed with a keyboard. Some menus have a “flyout” functionality, which reveals sub-menu items through mouseover. In general, elements that are only revealed and/or clickable through mouseover should be avoided altogether. 

It is also a good idea to provide additional points of navigation, such as a sitemap and breadcrumb menus. In order to make long or complex pages accessible, “jump to” anchor links can be added to allow users to more easily navigate between content sections.

Screen readers can also be set to identify all the links on a page. It is therefore important that links be given descriptive names, as someone using a screen reader may not alway be able to read a link within its context. A link that reads “Read our FAQs” is for example more descriptive than “Click here” and will allow the user to more easily identify what they are looking for.

Towards a More Accessible Digital Future

Digital accessibility is about making sure that everyone can use websites, regardless of their physical or mental abilities. This need is also increasingly underlined by governments and it is therefore important to build websites for all users. In addition, implementing digital accessibility principles, such as highly contrasting colours and easy to understand language benefits not only people with disabilities, but improves the user experience for every user.

Would you like to learn how to create websites? Be sure to check out the TCLoc Master’s program, a distance learning master’s degree that combines technical communication and web technologies.  

This article was edited by Janna Mack.

Choosing colors for a website is about more than aesthetics and preferences. Color can determine how users engage with your website and perceive your brand. Learn how to harness the principles of color psychology in UX design.

In web design, color plays a much larger role for the customer than simply forming first impressions. Color choice is an avenue of communication utilized by marketers to attract a specific type of consumer and build a brand. Not only is strategic color design a great way to engage an audience, but it should also embody the essence or values a company may want to convey to the public. There is even a field of study that looks at how people react to colors: color psychology. In UX design, color psychology primarily deals with how color affects people’s responses to a website. While there are no concrete rules on what a website should look like, some principles of color psychology can be applied to UX design to ensure a positive and professional experience for website users.

Understanding Color in UX Design

Having a dominant color that can be found on all marketing material and company documents is crucial for building a brand’s image. Once a company selects a primary color, one or two additional colors should be added to create a color palette. Although it is not advisable to use more than three colors within a palette, variants (several shades of the same color, for example) may be added to create a fuller look. Traditional company palettes are generally composed as follows:

Three color wheels demonsttrating analogous, triadic, and complementary color combinations.
Different possibilities of color combination, 99design

UX design follows some general color principles. Websites typically employ two primary colors that work in tandem to create a contrasting look. This usually entails one neutral, darker shade as the background, while the other shade is dynamic, light, and eye-catching. Vibrant colors should be used sparingly to draw attention to key parts of the site, while the more muted colors should be used liberally to create a cohesive look.

Before moving forward, it is very  important to note that the perception of color varies from culture to culture. While most western countries view white as a symbol of purity and health, Chinese audiences might view white as the color of mourning. These divergences in perception can vary significantly across every culture and the entire color spectrum. While this article focuses on the western color psychology, it is a good idea to make a website’s UX as accessible, versatile, and multiculturally applicable as possible. 

Conveying Meaning Through Color

Red shape

The color red possesses many, sometimes contradictory, meanings. Although red is typically associated with love and passion, it has ties to rage and danger as well. Because of this, red is a focal color for emergency and relief services. It is also frequently used as a key shade in fast-food chain color palettes because of its symbolic attachment with intense sensations such as hunger. 

Orange shape

Many consider orange to be a welcoming color that exudes energy and individuality. It promotes feelings of community and sharing, and it is often a popular color in marketing, online sales, food, or event industries. These industries select orange as a primary shade for their company because of its liveliness and vibrant nature.

Yellow shape

Yellow is an energetic color that is representative of light, joy, optimism, and childhood. Its use is suited for the marketing of toys or objects related to youth. It is also especially popular as an accent color, used to infuse energy or liveliness into a brand’s color scheme. Yellow is rarely seen as the primary color on a website because it washes over other colors and tires the eye quickly.

Pink shape

Pink is typically associated with femininity and romance. Generally, products marketed with this color are directed towards a female consumer. This color can be found in makeup, beauty, and wellness marketing. It is also has strong ties to breast cancer awareness, and is a marked color within the feminist movement.

Brown shape

Contrary to the more vibrant colors, brown is a rather reliable color. It often embodies friendliness and environmental consciousness. Due to the associaiosn brown has with practically and reliability, it is seens frequently in shipping companies. This color can often be found in furniture marketing because of its rustic, sturdy appearance.

Blue shape

The most common color among websites is blue. Its darker tones bring softness and calmness, while its lighter tones create an aura of sleekness and intelligence. However, too much use can give the impression of coldness, even depression. Banks, insurance companies, and social networks usually incorporate this popular color for blue’s ties to trust and loyalty.

Green shape

Much like brown, green is associated with nature. While it typically produces an feeling of harmony and success, it can also refer to evolution and growth and is most often used to accent the ecological or ethical side of a brand. Companies revolving around outdoor work, hunting, or organic products implement green to attract their target audience.

Purple shape

Due to its richness, companies like to utilize purple to inspire a sense of luxury. In addition to this, it tends to invoke a feeling of mysticim and imagination. This is a color recommended for marketers targeting a spiritual audience. It is often seen on astrology, crystal, or spiritual websites.

For a sleeker look, some companies opt to create a website solely in shades of black and white. In just the right dose, these colors allow a sober and elegant effect. 

Black shape

Commonly used in the background and accompanied by a brighter color, black brings a touch of sophistication to a site and can be combined with any color. Although it is mostly used for vehicle and technology companies, this shade is versatile in nearly every context. Therefore, black appears il the websites of almost every industry.

Gray shape

Websites integrate gray or shades of silver because it brings a polished appearance, along with an air of professionalism. Gray is rarely used as a primary color for a website but rather an accent or alternative to its more intense shades, black and white. Conversely, silver appears is almost always used as a primary color for websites that target a more expensive look, like vehicles and jewelry brand.

White shape

Another frequent background color is white. A website designer may be more inclined to select a white background if their website includes many colorful visuals. This layout allows for sites that features more photos (such as travel blog, hotels, or resorts) to maintain a sleeker look while integrating colorful images.

How to Choose the Right Colors for UX Design

The color pairings chosen by web designers are not thrown together at random. Rather, there is a method to what color schemes are complimentary, from both an aesthetic and marketing standpoint.

There are several softwares that assist UX designers in choosing the correct color palette for their website. Some convenient softwares that assist in the color selection process are Coolors.co, Paletton, or Adobe Color. These aids provide the user an easy-to-navigate interface that offers endless color combinations. After selecting a primary color for the website, the softwares listed above will provide an array of combinations that compliment the orginal selection. These software are great starter tools for beginners in website design. 

Color palette showing 5 shades of purple.
Color palette created by Coolors
Color wheel next to a color palette. The palette shows shades of purple, blue, and yellow.
Color Wheel by Paletton
Color wheel and color palette. The color palette shows shades of 3 shades of blue and 2 shades of yellow.
Color Wheel by Adobe Color

Pulling Inspiration From an Image

In another genre, it is also possible to be inspired by the colors of a picture. Indeed, this technique will bring you a very simple and natural color palette, but also a glimpse of the marriage of colors between them. First of all, you can select one of your pictures that you like and, with the help of a photo editing software (such as Photoshop for example), extract a few colors from it. If you wish, you can also get inspiration from the designs already created, such as in the Design Seeds website. A photo with a selection of 5 colors is proposed to you according to themes, seasons or colors.

A color palette of of 6 shades next to a photograph of palm tree silhouettes in front of a sunset.
Example of a Realization by Design Seeds

If you found this article on UX design and web development interesting, then you can learn more by checking out the TCLoc Master’s blog for more articles on this topic.

This article was edited by Ella Goodwin and Cameron Van.

Cognitive biases are a great tool for technical communicators as this knowledge can help improve both design usability and user experience. This blog will provide information on how designers can use cognitive biases to better appeal to their audience. 

If you are unfamiliar with the concept of cognitive biases, read this interview with Dr. Gustav Verhulsdonck — Cognitive Biases: An Extension of Usability and User Experience.

Using Cognitive Biases in Design 

In usability, cognitive biases offer designers a deeper understanding of digital users’ behaviors. Familiarity with cognitive biases can lead to better design practices by equipping creators with the knowledge needed to guide users in accomplishing digital tasks. Different biases can lead to different implementations in design. For instance, the American Psychological Association (APA)’s Dictionary of Psychology defines confirmation bias as “the tendency to seek information that confirms pre-existing thoughts, ideas, or expectations while avoiding contradicting information” (2020). Knowing that the average digital user has a confirmation bias, designers can adjust how information is presented. In relation to this bias, we consulted Dr. Quan Zhou, professor, department chair, and graduate program director at Metropolitan State University, and he suggested that designers could use the confirmation bias to present contradicting information side-by-side. Presenting alternative information in a side-by-side comparison encourages users to make informed decisions. 

Many cognitive biases exist, some more researched than others, but the challenge for designers is learning how to use this information. Read on to learn more on how to implement cognitive biases in design.

How to Incorporate Cognitive Biases in Design 

Knowing when and how to integrate cognitive biases is essential. Below are two phases with a series of steps that can help guide designers in understanding and using their audience’s biases in design. 

Preparation Phase:

Dr. Zhou shares that it is crucial to consider cognitive biases before a design is complete. Since biases offer a perspective or lens through which a designer can view their audience, waiting until after the digital media asset is released is not helpful in addressing user needs and expectations.

The preparation phase is an important stage for conducting research and brainstorming the types of design elements that should appear in your digital design. Conducting research helps you gain a better understanding of your audience and determine if cognitive biases can be addressed in your design. To consider the role of cognitive biases in your design, begin by:

  1. Researching your target audience 
  1. Researching cognitive biases 
  1. Determining which biases your audience is most likely to rely on
    • Note: Some designs may be restricted by formatting standards and unable to address cognitive biases. One example includes legal notices or clauses that must appear in the original documentation format. Designers must determine when to address and when not to address cognitive biases.
  1. Determine how the relevant biases can be incorporated into a design element
    • i.e. If the design is a website selling a product or service, consider allowing customers to share their experience on a feedback or comments section as the social proof bias explains that users are influenced by other people’s actions. 

       Implementation Phase:

After identifying the cognitive biases that are relevant to your design, you must incorporate them. To ensure that you have implemented effective designs, complete the following steps: 

  1. Create design elements based on the cognitive biases you have identified
    • Note: Designers should ensure that designs based on cognitive biases are created in the user’s best interest. Ethical concerns arise when a design practice does not consider the user’s needs and, instead, prioritizes company needs such as an increase in revenue. Since cognitive biases help designers to understand the psychology of users, it is important to integrate this knowledge in a manner that is ethical and benefits the user.
  1. Finalize your prototype 
  1. Conduct a usability test
  1. Determine which elements were effective and ineffective
  1. Revise your design accordingly 

Conducting a usability test is crucial to identifying which design elements are helpful and which are confusing for users. Additionally, users can express how well their expectations were met and they can provide suggestions for new design elements. Usability tests provide valuable feedback for revising your design. 

Design elements will vary based on the cognitive biases that are being addressed. Furthermore, some digital designs may not demonstrate a need to address cognitive biases, but the user research conducted in the preparation phase will help you learn about your audience and implement designs that guide them. 

Additional Resources 

Gathering user research can be time consuming and even difficult, but once complete, cognitive biases provide technical communicators with another tool for creating effective designs. In separate interviews with Dr. Verhulsdonck and Dr. Zhou, the professors recommended the following resources for technical communicators seeking information on cognitive biases. 

  • “Thinking, Fast and Slow” by Daniel Kahneman
  • “The Organized Mind: Thinking Straight in the Age of Information” by Daniel J. Levitin
  • “Consumer Psychology” by Catherine V. Jansson-Boyd
  • “Fogg Behavior Model” by Dr. BJ Fogg
  • “Creating Content That Influences People: Considering User Experience and Behavioral Design in Technical Communication” by Nadya Shalamova and Dr. Gustav Verhulsdonck
  • “100 Things Every Designer Needs to Know About People” by Susan Weinshenk

Cognitive biases offer technical communicators the opportunity to create more meaningful and intentional design practices. By incorporating human psychology into design, technical communicators can improve the usability of their digital design and improve user experience. 

To learn more about cognitive biases and their role in usability, don’t hesitate to read the interview with Dr. Gustav Verhulsdonck!

Acknowledgements

Much appreciation to Dr. Zhou and Dr. Verhulsdonck for their time and insight on cognitive biases. Thank you both for the encouragement and assistance.

About the Interviewer

Madison Brown is an intern in communication for the TCLoc Master at the  University of Strasbourg and an undergraduate at Louisiana Tech University. For any questions regarding this article, contact Madison on LinkedIn.

Below is an interview with Dr. Gustav Verhulsdonck which provides an overview of cognitive biases and their role in usability and user experience. Dr. Verhulsdonck provides introductory information on cognitive biases for technical communicators that are unfamiliar with the concept, and he discusses the importance of cognitive biases in design.

Read previous interview →

Meet Dr. Verhulsdonck

Madison Brown 

Good afternoon Dr. Verhulsdonck. Can you please begin by introducing yourself? 

Dr. Gustav Verhulsdonck 

Of course. My name is Gustav Verhulsdonck and I am an assistant professor in Business Information Systems at Central Michigan University. Currently, I am an international research partner at the Digital Life Institute (a consortium of international scholars studying digital technologies and AI). I have worked as a technical writer for International Business Machines (IBM) and as a visiting researcher for the University of Southern California’s Institute for Creative Technologies. My research has appeared in the Journal of Business and Technical Communication, Technical Communication Quarterly, ACM’s Communication Design Quarterly, and the STC’s Intercom Magazine.

Madison Brown 

Thank you, that is an impressive introduction. In your own words, how would you define cognitive biases?

Dr. Gustav Verhulsdonck 

Cognitive biases are shortcuts, habits, and heuristics that we use to get through our everyday life that I think factor into different situations. That’s my short description. I don’t know if you want me to continue on that.

Roles of Cognitive Biases in Design

Madison Brown 

That’s perfect. Thank you. How would you describe the role of cognitive biases in design, and would you say that they have more than one role?

Dr. Gustav Verhulsdonck 

Yes. So, the function of cognitive biases in design, right now, I’m seeing it as two-fold. I’m seeing it as benefits which allow you to better understand your user and to make use of cognitive biases. Knowing that your user is distracted and does hyperbolic discounting, an important question to ask is how can you simplify the design so that they can use it and they’re happy? The other side is that cognitive biases can also be misused. Your understanding of people’s cognitive biases, such as once again, hyperbolic discounting, in which users seek an immediate reward. I don’t really want to think about the long-term future effect, but this knowledge can also create deceptive dark design patterns and those are not really good for the user. If you’re interested, I know there’s a darkpatterns.org. Harry Brignull has cataloged a lot of these dark patterns, Colin Gray has also studied them, and there’s also hashtags like #darkUX, where people are decrying how companies and websites are using deceptive design patterns that mistreat or deceive the end user because the user in a hurry and they don’t want to spend too much time. I think there’s a definite role there and the reason why I say there’s a definite role is that I think we’re slowly moving away from just usability, and we are in the area of user experience design.

So, usability includes the functional aspects such as can you achieve the task? Then I think we’re moving into user experience design, where we’re looking at before, during, and after an interaction, and what are the emotions, feelings, behaviors of users and how can we make them so that the user finds the attraction pleasant, not just usable, but pleasant, and ensure they have trust in the design. I feel like there’s a big shift towards user experience design, and we need to look at cognitive biases as heuristics that our users will bring to our documentation, our content, and our designs. Hopefully that makes sense. That’s a long answer.

Madison Brown 

That’s fascinating. It does make sense. I appreciate the two-part aspect of both usability and user experience.

Dr. Gustav Verhulsdonck 

Well, maybe there’s more. Those are the two kind of areas I see absolutely.

Cognitive Biases and User Experience

Madison Brown 

Expanding on user experience, how would you say that these cognitive biases can influence the user’s experience or expectations?

Dr. Gustav Verhulsdonck 

There are three areas. Eric Schaeffer, I think, is his name. He talks about PET or persuasive design, emotions and trust. I think he bases himself on the work of BJ Fogg, who’s popularized, I believe, persuasive design. So, I think those are important components of user experience design. Is it persuasive? Is it engaging for us because we’re so distracted? We have so many different media asking, clamoring for our attention. There is a cognitive bias called the peak-end cognitive bias. Research psychologists found that we only remember peaks like really negative or really positive experiences, and anything that was kind of neutral or that went well, we tend to forget. So, our emotional state is important. The emotional state of the user and then trust, I think, also ties in with that, that you feel like you could trust the design because so much of our lives are online now and so many things that we do from pension plans or financial transactions are online. Those are, I think, crucial components in user experience design. There’s also a behavioral economics component that I’m happy to talk more about or I can keep it short.

Madison Brown 

I think that’s a wonderful explanation, and I definitely see all those aspects revolving around user experience. In your opinion, why should technical communicators study and be conscious of these cognitive biases in their design and of the biases that their audience may possess?

Dr. Gustav Verhulsdonck 

Okay, I see this as a better way to know your user so that we [designers] can have better user understanding. I see it as an extension of thinking about cognitive load. So, we know about cognitive load and that we must reduce cognitive load for our users by kind of chunking our information. I think having an awareness of cognitive biases lets you go a bit more deeply into the psychology of the user and so I’ll give you an example. Once again, hyperbolic discounting, where people tend to go for something immediate rather than something far off into the future. Well, if you know that about users then you also know that if you’re overwhelming them with information that they’re not going to like that. But let’s say you have an end user license agreement, and you have the important point conversationally, this design allows them to know “yes, this is what I want to do” or “no, this is not what I want to do”. Then you’re helping them with an informational need, and you enhance their trust. So likewise, if you know that you’re in a situation where users are not aware of what they should be doing and you can design using an understanding of social proof, that people sometimes will do things because other people are doing them, you can then add a message such as, “this many people have started their retirement discounts with company x”. The message assures that user and helps them do something which is quite important, to start a retirement savings account, no matter how small. 

So, I think given that our lives have become more online, we’re moving away from “here are the instructions” kind of model of technical communication and into user experience design. I think that’s super important. I think it’s a better way of psychologically understanding your user in relation to how they look at information and the habits they bring to that information. I see this as an extension of usability into user experience and a better understanding of your user beyond, oh, they have cognitive load or they like usability. You’re going into actual practical components of people’s behavior that could help them in a significant way. Hopefully that answers your question.

Cognitive Biases in the Design Process

Madison Brown 

I appreciate the wonderful perspective. Then addressing the application of cognitive biases, should cognitive biases always be considered or accounted for in the design process? In other words, would the usability of someone’s design, such as a website, app, or online document, decrease without considering their audience’s cognitive biases or without accounting for those needs?

Dr. Gustav Verhulsdonck 

I think having an awareness of cognitive biases in general is important, but I think it depends on the situation. Sometimes, even if your user is a cognitive miser and they don’t want to spend too much time deep thinking about things you may still be unable to reduce the information to bullet points. For instance, simplifying certain situations like signing financial documents, buying a home, or something that is super important, you have to go over things with them. You need to be aware when being aware of your users’ cognitive biases is important. I don’t think it’s a hard and fast rule of, oh, they [users] are cognitive misers. Therefore, for all users, we can’t just remove text and just give them a Cliff Notes/simplified version. So my answer is it depends. I think it is, as a general rule, cognitive biases can allow you to think about your user in a deeper way, knowing that we all share these habits. We don’t want to overspend on thinking, we rely on habits. We have these different types of ways of interacting with the world that are pretty common to people. So, in that sense, I think it’s an interesting design heuristic that you can apply. Does that answer your question?

Madison Brown 

Yes. So basically, it’s another tool for understanding and aiding your user.

Learn more about Cognitive Biases

Madison Brown 

Perfect. For our last and final question, what are some resources that you might recommend to technical communicators who want to expand or learn about cognitive biases?

Dr. Gustav Verhulsdonck 

Okay. So, at the risk of sounding and self-promoting, I do think my article with Nadya Shalamova, “Creating Content That Influences People: Considering User Experience and Behavioral Design in Technical Communication” in the Journal of Technical Writing and Communication is a good start. I think there’s also cognitive biases in Susan Weinschenk’s book, “100 Things Every Designer Needs to Know About People” which gives a good sense of what people do, how to implement design strategies, and how to think about people. So, this is a really good resource. There’s also a codex of 100 different cognitive biases that gets overly technical. Daniel Kahneman’s book, “Thinking Fast and Slow” is good to have at a conceptual level. It asks if the user employs a Systems 1 thought process, which is a quick and shallow kind of thinker, or a System 2 situation where the user does deep rational logic contemplation. System 2 just takes time, it’s slower. Beyond that, for cognitive biases or dark UX, I would recommend Harry Brignull’s website darkpatterns.org. It has a great catalog of dark UX patterns.

Colin Gray has a great work in human-computer interaction on dark UX patterns. BJ Fogg is a psychologist and his work on persuasive design, and particularly his formula of motivation, ability, and trigger is, I think, quite important to look at how you can use cognitive biases and the motivation of the user, their abilities and the triggers or prompts in the interface to get them to behave in a particular intended way. So, I think those are important touchstones. Also, I think BJ Fogg created a starfish model, which I think is fascinating for user experience design where he says, “don’t design for the outcome but design for the behavior”. He kind of compares that to regular user experience journey mapping, and then it creates a starfish, like changing these different components of behavior towards a particular outcome. So really thinking about the user and their behavior from a cognitive biases standpoint and factoring that into design, I think is also fascinating. So, there’s a ton of work out there in terms of applying it to user experience design.

Madison Brown 

These are all perfect. Thank you so much. I appreciate the recommendations, are there any additional comments or suggestions that you wanted to add?

Dr. Gustav Verhulsdonck 

I hope that people start studying cognitive biases and behavioral design and design patterns in general. I think we have gigantic libraries of design patterns that are being used in UX to structure everyday interactions, and these are created with an understanding of the user’s cognitive biases. So I think our field stands to gain a whole lot by understanding that. The better we get at identifying design patterns, I think the better and more effective content will become as new design patterns emerge that people are expecting. There’s tons of good research out there and hopefully that then encourages people to want to research it. I’m definitely excited that you’re doing that. Other people are doing that as well. Kirk [Dr. Kirk St. Amant, the Eunice C. Williamson Chair in Technical Communication at Louisiana Tech University and Guest Professor for the TCLoc Master’s at the University of Strasbourg] most definitely is as well with scripting theory, he’s looking at it in a different way, but also addressing design patterns and people’s heuristic expectations. I think that’s quite interesting as well.

The other component, which I find interesting, is that global communication, has shown us that we all have cognitive biases. They are pre linguistic, I think. The use of mobile devices has made it become this common language. So, I think we are talking about a different way of communicating that people now expect when they go to a different country or different culture. Users can still rely on the same design pattern or heuristic to figure out how to use a device. Sometimes the activity may be installing a new app, installing something on a gaming console, or knowing when to do a two-factor authentication. So, I think we were seeing that kind of broadening of design patterns that are not culture specific. I believe he [Dr. St. Amant] is working in that area as well.

Madison Brown 

Thank you Dr. Verhulsdonck for your time and insight on cognitive biases. I appreciate you meeting with me, and I hope you have a wonderful weekend.

Dr. Gustav Verhulsdonck 

Thank you, you too!

Interviewer: Madison Brown

As a technical communicator, it’s your job to provide end users with all the information they need to safely, efficiently, and effectively use a product. To achieve this, your technical documentation not only needs to be correct and complete but it also needs to offer good usability. Let us see how a good usability test can help you.

What is Usability?

The International Organization for Standardization (ISO 9241-11) defines usability as the “extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use”.

So how can you tell if your target audience will be able to confidently achieve a goal with the help of your instructions? Will they be able to easily and quickly find information without getting frustrated? Does your website offer good accessibility? And does the design of your technical documentation offer a good overall user experience (UX)?

The best way to answer these questions is to conduct usability testing.

What is Usability Testing?

According to Usability.gov, “usability testing refers to evaluating a product or service by testing it with representative users”.

Leading usability expert Carol M. Barnum defines usability testing as “…the activity that focuses on observing users working with a product, performing tasks that are real and meaningful to them”.

In short, it is important to always test your technical documentation with ‘real users’ and ‘real tasks’.

Before the Usability Test

Getting the most out of the limited time you will have with your test subjects requires good planning:

  • What are your test objectives, i.e. what do you want to learn from the usability test?
  • Select suitable test subjects based on your target audience analysis. How many users you need to recruit depends on the study, but according to UX expert Jakob Nielsen, 5 is a good number.
  • Think about the tasks you want your users to attempt. Then create realistic task-based scenarios.
  • What are your evaluation methods?
  • Do you need any test equipment? Any access to products?
  • Book a meeting room or other quiet location — you don’t need access to a high-tech usability lab.
  • Make sure you carefully prepare all documentation, including scripts and questionnaires.

Conducting the Usability Test

Once you have finalised your test plan, and you have taken care of all organisational matters, it’s time to get started:

  • Are there any step-by-step procedures or key tasks users struggled with?
  • Is there any information users could not locate? 
  • Did they get ‘lost’ in your technical documentation?
  • Did anyone have any major comprehensibility problems?

Based on your findings, you can now re-write, re-structure, and re-design your draft and eliminate any usability issues. Further usability testing can be very helpful to show how your changes have improved the overall user experience of your technical documentation.

If you enjoyed this blog and want to find out more about usability testing, here are some useful links:

Also, if you are interested in further study in the fields of technical communication and localisation, make sure you take a look at the TCLoc Master’s degree at the University of Strasbourg.

It’s no secret that TCLoc students are an international group of professionals that have diverse backgrounds and expertise. Thanks to TCLoc instructor Kirk St.Amant, a small group of alumni were able to share their skills and knowledge with his usability and user experience students at Louisiana Tech University in the United States. In this interview, Kirk explains why he invited TCLoc alumni specifically to give guest lectures in his course, what insight they were able to share with his students, and why he plans to do it again in the future.

Meeting Kirk St.Amant

Hi, Kirk! To start, could you please briefly introduce yourself?

My name is Kirk St.Amant, and I am a Professor and the Eunice C. Williamson Chair in Technical Communication at Louisiana Tech University and I serve as the Director of Louisiana Tech’s Center for Health and Medical Communication (CHMC). I am also a Research Fellow in User Experience Design with the University of Strasbourg and an Adjunct Professor of Health and Medical Communication with the University of Limerick. I have a background in technical communication, international studies, and anthropology, and I research how psychological factors affect usability and design — particularly in medical settings.

Wow! That’s quite an impressive list. How long have you been with TCLoc and what course do you teach for the program?

I have been with the TCLoc Program since the spring of 2018, and I teach the class “TU Visual Communication Part 2 — “Usability and User Experience Design”

The Usability and User Experience Design Course

Well, we’re certainly lucky to have you as part of the program. I see that you asked TCLoc alumni to be guest speakers in one of your courses in the United States. Could you tell us which course that was for why you chose them specifically?

I asked TCLoc alumni who completed my TCLoc Usability and User Experience Design class and who had done dissertations on usability to share their dissertation research projects — how they approached usability for the project, the research and related design methods they used, and the challenges they encountered (as well as steps to doing usability research for clients in the future) — with graduate and undergraduate students in my usability and user experience class at Louisiana Tech University (fall 2020).

And what were some of the major takeaways from what they said?

The major takeaways from these lectures were:

  • Approaches to applying ideas from class to do usability research in the field
  • The challenges of doing usability research in the field — what they can be, how to plan for them, and how to address them
  • The benefits gained from doing such research — both for the clients for which TCLoc students did projects AND what the students themselves learned in terms of how to apply, revise, build upon, and add to concepts and practices they learned in their usability class
  • The contributions usability research can make to different organizations (companies or government agencies) and how to share such contributions with others via written reports, presentations, and other formats
  •   Suggestions for how to plan and engage in effective usability-related research in the future

The overall objective was for students in the LA Tech class to learn from the experiences of TCLoc alumni and understand different ways to apply, revise, or build upon concepts covered in the class to do effective usability research and related design work in the field/outside of the classroom.

A Successful Collaboration

That must have been incredibly insightful for your LA Tech students! What was their overall reaction to the TCLoc alumni’s input?

They thought it was excellent!  Not only did they learned a great deal from the TCLoc alumni experiences in terms of how to approach usability work and/or apply ideas from class to real-world contexts, but they also learned how usability is international in scope, how it is/can be approached across nations and cultures, and how it can contribute to successful communication in international contexts.  Since the class, I’ve actually had several students ask to do international usability projects, and I’m currently working with these students and international partners on such projects.

That’s amazing to see how what the TCLoc alumni said inspired some of your students to pursue more internationally-focused projects. So, do you plan on doing this again in the future?

Definitely! I’d like to use this approach again both in the usability classes I teach at Louisiana Tech University and in future usability classes I teach with the TCLoc program — having alumni of the program share their stories, experiences, and suggestions with individuals currently in the program.   I’m also happy to chat more with interested persons about these projects as well as the chance to collaborate on classes in the future (e.g., serve as guest lecturers or clients for student projects).

It sounds like it was a great experience for everyone involved! Thank you for inviting the alumni to participate in your course and also for the expertise you bring to the TCLoc program. We look forward to future collaborations between TCLoc alumni and your students!

The diverse skills and expertise of not only our students but also our instructors is what makes the TCLoc master’s degree great. Alumni have the opportunity to participate in TCLoc-related activities even after they graduate, whether it be through guest lectures or other forms of involvement, such as our mentoring program. To keep up to date with the latest news, make sure to follow us on social media!

Your approach in optimizing your website or application has to be based on a set of objective tools that allow you to observe, measure, evaluate, and eventually make well-informed decisions for your next web project. This can be successfully achieved in two main directions. Firstly, you need to have a usability testing strategy in order to test your digital product before it is launched on a wide scale. Secondly, you need to be able to collect UX behavioral data, which is quantitative data to measure and analyze users’ interactions with your website or application.

Why do you need UX behavioral data?

UX behavioral data will help you to find answers to some of the most important questions: how users are interacting with your website and why they are interacting the way they do.

Here are some of the main tools to help you retrieve UX behavioral data:

  • The website’s built-in tools found in several content management systems such as WordPress, Moodle, Magento, Drupal, etc.
  • Website analytics tools such as Google Analytics, Adobe Analytics, LuckyOrange, etc.
  • Online ads analyses provided by social media analytics and ads manager, Google Ads, etc.

How to organize UX behavioral data?

After you collect all the data you may need, you will have to make sense of it. It is highly recommended that you organize them in the following four online behavioral data types:

  1. Acquisition Data: acquiring or winning over new visitors and analyzing where they come from, such as search engines, ad campaigns, partner websites, social media, etc.
  2. Engagement Data: the visitors’ actions on your website, such as behavior flow, click heatmaps, session duration, bounce rate, landing pages versus exit pages, page views, etc.
  3. Conversion Data: the percentage of website visitors who end up taking the desired action, such as purchasing a product, downloading a file, signing up, etc.
  4. Technical Data: data from the users’ devices, browsers, operating systems, screen resolution as well as analysis of your website’s speed and performance.

Integrate UX behavioral data with usability testing

Data without deeper analysis and action is just empty numbers. So, put these behavioral UX data to good use by integrating them in a strategy of usability testing.

Usability testing is a set of qualitative methods to observe and evaluate the users’ online behavior while they are interacting with your website or application. These methods are commonly used in UX research for different types of web projects depending on your needs.

A hand takes a sticky note with "Run a usability test" written on it

Usability Testing Methods

We will look more in-depth into the following six usability testing methods, which are especially important for website optimization:

Moderated Usability Testing

A testing method that can be conducted in person or remotely. It involves two main actors: a moderator who gives specific tasks and a participant who interacts with the website or application while giving his feedback out loud. The moderator can also observe as the participant completes the tasks and records the session. This method gives important qualitative information about the usability of the product, but it is costly and time-consuming with a limited number of participants.

Unmoderated Usability Testing

This testing method doesn’t require the presence of a moderator as the participant completes the tasks. However, the session is recorded and the participant is encouraged to give his feedback out loud as they go through each specific task. In contrast to the moderated usability testing, the unmoderated usability testing costs less time and resources and can include a bigger number of participants.

Five-Second Testing

This method tests the efficiency of a web page in conveying information. The participants are asked to view a single web page for five seconds. Afterwards, the moderator asks them questions about what they have seen. The web page is considered efficient if it successfully conveys the brand identity of the website, easy-to-digest information about the service or product presented on the page, and the reasons why these services or products are useful for the visitors. But if the participants in this test show difficulty in remembering any of this key information, it means the website needs to improve how it presents its brand identity and products.

Card Sorting Testing

This testing method helps us evaluate how well information architecture and navigation structure are and whether they make sense for users. It consists of asking the participants to arrange different, unorganized items under predefined labels or categories. This allows us to compare the existing website’s information architecture and navigation structure with the users’ answers on how they think it should have been structured. This is especially useful when redesigning a website and its hierarchical, tree-like structure.

First-Click Testing

It helps us measure how user-friendly a website or an application is when it comes to specific tasks. The participants are given a task to complete while the moderator observes their first click and evaluates how easy and clear it was for the participants to find their way. The position where the participants’ click is recorded and presented in the form of a heat map that shows where the highest and lowest number of clicks took place. This helps identify navigation problems and better position the most important links and buttons on a page, such as sign-up, add to cart, or purchase buttons.

Preference Testing

This method involves participants right from the beginning of a web project when several design proposals are still being examined. The moderator shows participants a number of different designs and asks them to choose their favorite one. The participants are then asked to give feedback on why they chose a specific design, what they liked and disliked.

These six methods present some of the most important tools for website optimization and they can be conducted online with participants from different parts of the world, which makes them rather feasible, cost-effective, and time-saving.

Sources:

  • W. Craig Tomlin – UX Optimization: Combining Behavioral UX and Usability Testing Data to Optimize Websites – Apress (2018)
  • Usabilityhub.com

Interested in reading more about technical communication? We have plenty more articles!