Designing for context, emotion, and inclusion - takeaways from An Event Apart.
I attended my first design conference An Event Apart in March this year. I was thrilled to find so many great resources, learn about new UX trends and tricks and meet other creatives working towards the same goals. Out of everything discussed during the 3-day event, the topic that piqued my interest the most was:
Inclusivity in design.
My understanding of inclusive design goes something like this:
Inclusive design is about designing a product with compassion for users with diverse characteristics in different contexts such that the product is usable and accessible by all.
In this post, I outline my key takeaways from some of the speakers at the conference around the importance of inclusivity, emotion, and context in designing good user experiences. I also highlight how I am implementing some of these into my daily design work.
Designing for Personalities
Sarah Parmenter
Sarah highlighted a great point about personas in the spirit of designing for inclusivity. We spend a lot of time as designers and creators coming up with personas in our minds for the average user so we can shape our products around them. However, what we don’t realize is that designing for the average user can often mean that we’re not designing for any real user at all?!
(Average Users) are inherently an amalgamation, an average of attributes that we imagine our average customer has. And there’s no such thing as the average customer.
So who should we design for?
We need to design for real people in real situations. Let’s take a page out of the books of the Microsoft Design Team. They ask hard questions about the intent and limitations of their personas and then use these spectrums to iterate and ideate the design process alongside a series of physical, social, economic, temporal, cultural contexts. By doing so, Microsoft ensures that they are designing for their real users and not imaginary personas.
“Context is what gives personas values.”
Be compassionate in your designs
Sarah talked about how technology today is fostering introversion. Since the internet makes it easier for us to stay connected while keeping our distance, the rise of introversion is no accident. It is happening at the same time as we have this massive shift in technology that promotes exhibitionism.
With the rise of introverts in the world, why aren’t we creating experiences for these users?
The most important thing to remember when designing for introversion is that such users need specific UX patterns. Introverts will patiently seek out buried UX patterns if it aligns with their level of comfort. For example- in the event of needing customer support, an introvert will wait and go through the many levels of the complex IA of your products just to chat with someone if it means not having to talk to them on the phone.
My friend often asks me to make appointments or reservations for her or even speak to customer support on her behalf when businesses require users to get on a phone call. If we as designers make a conscious effort to take these experiences online for each product we impact, users like her will no longer have to wait for others’ schedules to open up just so they can get a haircut appointment!
Remember to push for compassion in your designs so that all personality types and user preferences are respected by your products.
My Takeaway
I am striving to do this with my work at GoGuardian by designing an online in-app purchasing feature that will allow users to transact without having to directly contact a representative. This project is a small step by our product team towards making space for a previously overlooked user preference in our products.
Apple’s support page is another good example of giving introverted users an easy way to get in touch with customer support.
“Users value the products that least bother them, respect their privacy, and allow them a personalized experience.”
Bloom&Wild is an online flower delivery service based in the UK and stands as a great example of a product that respects user privacy and allows for a personalized experience.
Like many other flower delivery services, Bloom&Wild mass emails its subscribers with a reminder to send flowers to their loved ones just in time for a holiday or an event. A recent UX addition brought the company in the spotlight this March — they started offering an opt-out option for every holiday mass mailer. By doing so, Bloom&Wild showed compassion in their design for the user group that may associate the day with an emotional or sensitive time.
For instance, a user that had lost their mother appreciated the option to not receive an email every Mother’s Day — a reminder of their loss. Adding an opt-out button didn’t take much effort from Bloom&Wild but had a huge impact on the experience of its users.
Making such adjustments for the emotional contexts of your users can help humanize your products and show them that you care.
As Sarah best summarizes in her slides:
"The entire user experience of our websites and apps is going to rely on how empathetic we are."
Build personalized UX adjustments into every experience.
Predicate design on emotional context to create super fans of your product.
Build the most empathetic experience you can.
Slow Design for an Anxious World
Jeffrey Zeldman
"Fast is best for customer service designs. Slow is best for comprehension."
Compare how the layouts and design of these screenshots from 2 different news websites make you feel.
Source: The New York Times and India Today.
Have you ever noticed your posture when you’re trying to read a spreadsheet of data or an article on a busy website with a lot of distracting content? You’re probably putting in some effort to bend forward towards your screen, maybe in some cases squinting your eyes and trying to concentrate on the text. Now think of websites and newsletters like Medium and The New York Times. Why are these reading experiences more delightful?
They design for absorption, not conversion. They use things like BIG typography, lots of whitespace, and clear hierarchy on their pages to foster a more relaxed and comfortable reading experience for a user.
It’s important to remember that the same design principles shouldn’t blindly be applied to all websites. Think about the goal of your product. Are you designing for comprehension and readability, quick scanning, or customer service?
Also, think about the context in which it is being received by your users. Could they be exhausted after a long day of work? Could they be multitasking at the time to check a quick few emails while watching TV with their friends or families? Or are they using the product at leisure?
For text-heavy websites focusing on readability, Jeffrey proposes that we design a “slow” experience so as to allow users to sit back and absorb the content more effectively.
Jeffrey’s principles for designing for comprehension:
Big Type: Use large text for clarity. Push the user back into their chair and help them have a relaxing reading experience.
Hierarchy: Have a clear hierarchy of content on your page. Draw the user’s eyes to the most important piece of content first and so on and so forth.
Minimalism: Strip the page of any unnecessary content including ads, gifs, promotions, etc. Remove as many signifiers as possible. You should be aiming to design for simplicity.
Art Direction: Make your style recognizable and consistent with your brand. Don’t be afraid to art direct to have a design language that users immediately associate with you/your company.
Whitespace: Jeffery talked about 2 kinds of whitespaces.
Source: Apple’s website showing Macro Whitespace.
Macro whitespace: Big spaces left empty deliberately. Macro whitespace conveys feelings of ease, calmness, and luxury. The above examples of Apple and Chanel use this to provide an air of extreme indulgence, luxury and overall relaxed experience to their brands. As a result, luxury has come to be associated with whitespace and whitespace, with luxury. Macro whitespace can make you feel like you’re being given time, being left alone and treated with respect.
Micro whitespace: Space between lines of type, between images or inside letterforms. By adding more micro whitespace, we can make small iterations to our designs but have large impacts on the overall feeling of a page. For example, by changing a typeface to bring more whitespace inside letterforms, we can make the page feel lighter like there is more air and luxury on the same page now.
My Takeaway
Jeffery’s principles are not only good for content-heavy websites but can also help improve other user experiences. For instance, our design team at GoGuardian leveraged some of his principles in choosing new typography for our product suite. Specifically, the knowledge about micro whitespace, clear hierarchy, and minimalism informed our decision to use a font that made the interface feel lighter and cleaner for our users.
Making Motion Inclusive
Val Head
Now let’s talk about motion and inclusivity. We all understand how motion and microinteractions can add to the experience of our products by providing cues and instant feedback to a user (here’s a really good book to learn more about that!) Moreover, motion is used in a multitude of ways to create delightful online experiences. To Val’s point, we often forget that something that’s delightful for one user may not be as delightful for another.
Consider a user with a vestibular disorder. A simple example is a user with motion sickness.
Source: Val Head’s slides from AEA
Now take a look at these examples of commonly found online experiences with motion. (If you have a vestibular mismatch, it may be a good idea to skip over these!)
Example 1: New York Times
Example 2: The Huff Post
How did they make you feel?
Now think back and imagine spending time on these websites as someone with a vestibular disorder, if you didn’t already.
Sensory mismatches can be potentially triggering for such users. For example, some users may feel sick trying to read a still page from a book while sitting in a moving vehicle. Others may feel triggered while looking at a moving screen sitting in a still environment.
Many websites today use motion interactions where background images move at a different pace than the text, flashes of light cover your entire screen multiple times, scaling and zooming of objects or the camera happen at large, spinning and vortex effects are employed and there are usually some multi-speed or multi-directional movements.
According to the WCAG guidelines, motion animation triggered by interaction can be (and should be) disabled unless the animation is essential for functionality or the information being conveyed.
So how can we include motion to create delightful experiences while still respecting users with any kind of vestibular disorder?
Val Head gives us 3 principles to do so:
Avoid using unnecessary animation.
Provide control to users to turn off non-essential animations.
Take advantage of the reduced motion feature in the user-agent or operating system.
Source: Val Head’s slides from AEA
Ideally, we want to create experiences that are delightful for all users. Now I understand that this is not an easy task. However, as designers who impact the lives of users regularly, it is our responsibility to create, at the very least, alternative experiences to account for different types of users.
We can start by working with our developers and making a push for the Reduced Motion CSS query and provide custom toggles to users to turn potentially triggering motion off in our products. The Huff Post example mentioned above offers a Text-only toggle thus taking a step in the direction of inclusivity on the web.
My Takeaway
I am incorporating these lessons at my job by helping create a design library for GoGuardian that focuses on motion. Through this library, our developers can implement well designed (and WCAG compliant) components that have clearly defined motion properties and help create a consistent and smooth experience across products.
Inclusive, by design
Derek Featherstone
Derek’s presentation really stuck with me after An Event Apart. His main argument was -
Be intentional about being inclusive.
He argued that while we talk about gender, race, caste, color, etc, in the context of designing for inclusivity, people with disabilities are often left out.
There are 2 levels of inclusion we need to consider:
Inclusion in the product
Inclusion in the process
While inclusion in the product is often what we aim to achieve, we forget about the second and truly significant level of inclusion: in the process. If we start with inclusion in the process we can seamlessly bring inclusion into our products.
I learned from Derek the need to empower people with disabilities to be part of the design process early on. By including them in the research and ideation phase itself, we can eliminate our reliance on them at the end of the design process to validate the decisions we made on their behalf. We can make these decisions with them, for them.
Nothing about us, without us.
- Michael Masutha
My favorite case study on inclusivity for the disabled from the presentation was about the Vancouver International Airport’s Accessibility Travel Planning project.
They created a personalized experience for travelers with autism to help them travel without fear, frustration or confusion at the airport. One of the many tools they used to respect the needs of their autistic users was the creation of this simple travel checklist:
Source: Accessibility Travel Planning Checklist by YVR
Notice the breakdown of tasks to provide a simplified experience to users. My favorite feature, not unlike that of many others in the room, was the “All Done” row with a smiley face graphic to provide the users a sense of satisfaction and accomplishment on completing their tasks at every level.
This is the kind of user-specific experience we need to create for online interactions as well. Derek’s appeal is to include at least 1 group of underrepresented users into our product’s user group today and start designing for them. While it’s difficult to cater to everyone at once, we can start making our way to inclusivity one user group at a time.
Start earlier.
We know less than we think.
Other people know more than we think.
My Takeaway
A low-hanging fruit for accessibility in the product is incorporating keyboard shortcuts into your designs. This is where I am starting my appeal for more accessible products at GoGuardian. I have found that is often easier to advocate for high-impact changes by starting with more low-effort tasks such as this one. Another suggestion is to find space for your task in an ongoing project instead of waiting for a new one to start. It is more likely that your keyboard shortcuts will be implemented if you attach them to something already on its way to production.
Final few words
Source: Adapted from Microsoft’s Inclusive toolkit
Start by recognizing exclusionary design.
Don’t think of yourself and those around you as the average user group. Underrepresented users are not actually the edge case we so passionately talk about designing for. They are co-users; they’re just as much a part of the user group as you are. In fact, it is most likely the case that designers like my co-workers and myself are in the minority — the far end of the user-ability spectrum.
We need to stop solving for ourselves and start solving for everyone.
I learned a lot about designing with compassion for different types of users in various contexts by attending my first ever design conference An Event Apart 2019. It was a phenomenal learning experience and I took back so many insights that turned into design efforts I am now working towards in my career. I hope that this article about my takeaways from AEA inspires you to make changes in your practice as well and grow into a more compassionate designer.
Find this article on Medium.