포용적 디자인 실천하기

♪ ♪ Hi. My name is Linda Dong. I'm a Design Evangelist, and I'm going to be joined shortly by Sam Iglesias, a Prototyper on the Apple Design Team. We're gonna talk about best practices when it comes to designing inclusively. But before we get into that, I wanted to touch on why we make apps and games. As a developer, the things you create bring people joy, enrichment, and convenience. They help us accomplish tasks and reach personal goals. They connect us with other people from around the world. They entertain us through fun gameplay or make us thoughtful through touching narratives. At the end of the day, they add emotional and practical value to our lives. And I'm sure one of the goals you have for your app or game is enabling as many people as possible to enjoy these benefits. Over the years, the App Store has grown into a huge marketplace that serves 500 million visitors per week. People from over 175 regions around the world and 40 different languages can potentially see what you've built. If you want to reach even a fraction of that audience, you owe it to yourself to design with inclusivity in mind, so that your app or game is great for everyone. This means that people can interact with your design through different languages and accessibility features. That it's easy to learn, feels natural, and is a pleasure to use. But great usability isn't the only important goal. What also matters is that your app or game is welcoming and respectful of folks from diverse backgrounds and perspectives. Our perspectives are shaped by a number of factors, such as our individual experiences. This could be where we grew up in the world and where we live now, the cultures we're familiar with, and the languages we speak or hear around us. They're also shaped by our human characteristics, like our gender, our age, and the physical and mental abilities and disabilities we might have. You can think of each of these factors as its own diversity axis, and the intersection of where someone lands on all these axes makes up their unique identity. It's a good reminder to think critically about how people with completely different identities and perspectives will all be able to enjoy what you've built. When someone approaches your app or game, they should feel like you designed with them in mind. Not only will people feel taken care of, you'll build trust that extends to other areas of your app, game, and brand. One of the great things about being in your position is that you're in charge of how accommodating your designs will be for people. It does take work and consideration, and you're not always gonna get it right, but any intentional steps you take will be appreciated by so many people.

To help, we're gonna talk about how to approach designing inclusively, especially in the area of content. At Apple, we define "content" as the words, images, audio, and video that live inside your designs, as well as your marketing. Content is the language you use to speak to your audience. And it's also how you let folks identify themselves. This can be through the names, profile details, avatars, or characters that people can customize within your app or game. The way you address people through your content and how you let folks represent themselves are great moments where you can make more people feel welcome. So with that, I'll hand it over to Sam to get us started. Thanks, Linda. In this video, we'll go through six specific practices you can use to make your app or game more inclusive.

Tell diverse stories. Avoid stereotypes. Adopt accessibility. Localize for culture. Use color mindfully. And finally, encourage self-expression. The first practice is tell diverse stories. As Linda mentioned, people who might use your app or game will come from a rich and diverse set of individual backgrounds and experiences. You have an opportunity to make them feel included, even before they've downloaded it. This could be through something like a web page or your app's page on the App Store.

The way you describe your app or game, its name, video trailer, and even the screenshots you select tell a story about whom it was built for and how they might use it. If you don't approach this step with creativity and empathy, you might unintentionally make some potential customers of yours feel unwelcome. Let's focus on app screenshots. You might start with names that are familiar from your immediate circle of family and friends. Or depict hobbies and discussions that personally interest or excite you. Or draw on familiar stories for your app's example scenarios. For example, your app might be social in nature, and you're gonna be making choices about what kinds of content shows up in the example feed, who's posting that content, and even the tenor of interaction among people who use your app. Or it might be something like a to-do list, and you're gonna be making choices about a day in the life of somebody using your app: the activity or celebration they might be planning, their reading list, their aspirations. Or it might be a food-tracking app, and you're showing examples of the kinds of foods someone could be interested in logging, or the kinds of food choices they'll be making throughout their day. These are excellent opportunities to tell interesting and diverse stories. In my social app, I might wanna depict a group of people having fun on a kayaking trip. While this definitely looks like a lot of fun, this group might not necessarily reflect the diversity of people who might be interested in my app, or a lifestyle that everyone can relate to. There are a number of ways this might be improved.

Here's an example of a set of changes we could make. Now, we have a photo that depicts a slightly more diverse group of people performing an act of community service.

In our example to-do app, we might depict a fairly pedestrian day for some Americans, where we're returning a call to our best friend, then shopping for a birthday party, reading a book, and then practicing an instrument. But the problem is these are, at least to some audiences, kind of overly familiar cliches, right? Here's how this example might be improved. Instead of returning John's call, now I'm returning Abhi's call. Instead of shopping for dinner, I'm planning Diwali, a holiday that's observed by over a billion people. For a book, maybe a lesser-known voice, like Chinua Achebe's? As for an activity to practice, how about sign language, which can promote inclusion of the deaf community? While still telling the story of someone who needs an app to keep track of various tasks, we've made some of the content more relatable and inclusive to more people along different diversity axes.

How about something like a food-logging app? It's probably really tempting, when putting screenshots together, to reach for what's familiar. So if you're American, examples like these--pancakes, pizza, hamburgers--might make you feel right at home. But let's remember that not everyone around the world, or even in the United States, imagines a screen like this when they're thinking about food. Adding some foods that might speak to other cultures could be an excellent way to tell a slightly different story, not just about how someone might use your app, but whom your app is for. So when you're setting up your App Store page, tell diverse stories. Fill your screenshots not with the names and scenarios that come to mind the quickest, but try to dig a little deeper, to find a story that's told less often. Not only will this make new groups of people feel welcomed by your app or game, it'll help it stand out even more.

The second practice for designing inclusively is to avoid stereotypes. Stereotypes are oversimplified beliefs about communities of people. They make you overlook differences between individuals and perpetuate incorrect ideas of how people behave. The truth is all of us hold these types of beliefs, and, usually, we're not even aware we have them. But if you aren't careful of how stereotypes influence the design of your app or game, you may be unconsciously excluding people, by not recognizing them in your content and functionality. For example, in your language and visuals, it's sometimes easy to fall into the stereotype that people are divided into just two genders, men and women. This binary is deeply embedded in some languages and cultures, and if you're part of those communities, you can unknowingly overlook millions of people who don't identify with either.

Throughout history, people have recognized a spectrum of human gender, and you can honor this diversity by avoiding unnecessary references to a gender binary in your content. For example, when you don't know someone's gender, instead of using the binary pronouns "he" or "she" in your copy, you can replace this language with the gender-neutral pronoun "they" instead.

You can also avoid overlooking parts of your audience by referring to people as a single gender. Like saying "Hey, guys!" in video content, when you can include more people by saying "Hey, everyone!" Removing unnecessary gender references also applies to visuals. Take, for example, a placeholder icon for someone's new profile that uses a stereotypical masculine avatar. This icon tells a story about who you think your app is for and maintains a message that a generic person means a masculine person.

Let's make this better, by using a non-gendered human icon that doesn't make any assumptions about who a person is.

SFSymbols provides a number of these gender-neutral glyphs you can use throughout your apps and games. Just as you don't want your app or game to disregard people through gender, you also don't want to exclude people by unintentionally using ableist language.

If you're not familiar with the term "ableism," it's a stereotype that having a certain set of physical or mental abilities makes you "normal" and having disabilities makes you "abnormal." But we all know that there's no such thing as normal. Everyone has a unique set of abilities, some people have disabilities, and everyone's capabilities are equally valuable.

Like gender, ableist language can be deeply embedded in the way that we talk and can slip into your copy. Like using words that reference disabilities, such as "insane" or "crazy," to describe something that's undesirable. Even if you're trying to use that word to describe something positively, like "Achieve insanely fast speeds," it's still labeling a condition as an outlier, which can stigmatize mental health. In cases like this, you can rethink how you can convey the same meaning without casting disabilities in a negative or alienating light.

Here, instead of saying "Achieve insanely fast speeds," you could say "Achieve ridiculously fast speeds." Now, all of this isn't to say that you should completely avoid acknowledging disability in your content, but rather to avoid referring to disability in language when suggesting something is less than. In fact, it's a great idea to recognize and reinforce representation of disabilities. Showing people with disabilities in your emoji, photography, and game characters can help debunk stereotypes of who uses and plays apps and games. Outside of content, avoid letting stereotypes limit your interface's functionality. Let's say I'm designing an app that lets families manage who has access to a shared movie library. If I have a stereotypical view of what a family looks like, perhaps a married man and woman and young children, I might end up designing an interface like this. Which buckets family members into a father, a mother, and child roles. In this case, my app's understanding of what a family is doesn't consider that families can look like single parents, same-sex parents, multi-generational households, adult children, and legal guardians. Whether I planned it or not, my app's design and functionality excludes all those families who are different from the stereotype from being able to this interface. So how could I improve this feature? Well, instead of assuming there are fixed family roles, I can label each profile something neutral, like "family member." And instead of assuming how many people make up a family, I can start with just the person setting up the account, and let them add as many people to their family as they need. For you, not making assumptions about who is using your app can enable you to build functionality that supports everyone. The best way to develop your awareness of your own stereotypes is to talk to people from beyond your immediate community. Look for people with a diversity of lived experiences that can help you recognize where your knowledge falls short. And remember that language is constantly evolving, and that this guidance will change over time, so be open to updating your knowledge as definitions shift.

In our third practice, we'll discuss why it's important to try to adopt accessibility in your app or game. Imagine someone who is blind has just downloaded your app, is extremely excited to try it, and is greeted with this from VoiceOver. Button, gear shape two. Or someone who is deaf has made it through an exciting level in your game to a cutscene, and captions aren't offered. Linda told you earlier about ableism, which stems from the idea that somebody who is disabled is "abnormal" and should not receive the same attention of those who are "normal." If your app or game's content isn't as accessible as possible, it is not inclusive. Do not start with the assumption that someone who is disabled wouldn't want to use your app or game. Let's look at some ways you can make it benefit more people.

The world is a rich tapestry of experiences and abilities. From those who are blind or have low vision, are deaf or hard-of-hearing, have sensitivity to motion, or physical or motor disabilities, hundreds of millions of people use at least one accessibility setting. And even if you or anybody you know doesn't use one, it's possible that at some point in your life, you might find Accessibility helpful, even if temporarily. This can be something temporary like having your pupils dilated at the optometrist and needing larger text, or needing to reduce exposure to loud sounds after a concussion, or it might be some other health circumstance. So what are some things you can do to ensure that your app is accessible? Let's have a look at a few things you can do, starting with text and type. Visual perception varies a lot. That's why it's important to make sure that your app functions properly across the range of Dynamic Type settings. iOS supports a wide range of text size preferences, but by using the right layout APIs in SwiftUI or UIKit, your app's layout should be able to adapt flexibly and automatically. Here's an example of how a To-Do app using SwiftUI's font system adapts automatically. Try to take care that your app is intelligible across the type size gamut. Look for truncated and clipped text, and maybe rethink some of your layouts if they have trouble with the larger sizes. Additionally, you wanna make sure that your app consistently honors some of the settings that UIKit's or SwiftUI's text system doesn't handle for you automatically. For example, if the person using your app has Bold Text turned on, make sure that elements that are not text, but which still might pose legibility challenges, are thickened. These circles, for example. Here's what the app looks like with bold text turned on, but we aren't done yet. We need to go further and have some of our other interface elements respond to this new, bolder preference. That's better. Now, let's talk about VoiceOver. VoiceOver is a screen reader that lets people use an interface without looking at the screen. For someone who is blind, VoiceOver is absolutely critical, but VoiceOver also benefits people who have other reasons not to look at a screen, such as someone who's riding a bus, who might be motion sick if they look at their device. By default, VoiceOver attempts to step over interface elements in a logical order and will glean information embedded in system-standard controls.

However, there will be cases in which VoiceOver needs more help.

The first case is where a button is simply represented by a glyph. If you use a glyph from SFSymbols, VoiceOver will use the symbol's name, but even a description of the glyph might not be enough to convey the button's functionality. Gear shape two, button. Whether you're using SwiftUI or UIKit, take care to add a descriptor that makes more sense in your app's context. You want VoiceOver to read this button out to say something like this. Account settings, button. Or this, where the button is also reflecting some state. Remove favorite, button. The second important note is to pay attention to VoiceOver's ordering. This app features a prominent "post" button at the bottom of the screen, placed there so it can be easily accessed. But VoiceOver will probably start reading out interface elements on the top left. Fortunately, SwiftUI and UIKit make it easy to specify that the "post" button should be read out first. Make new post, button. And the top left will be read second. Profile picture. Hi there, Enrique! Venice, CA, 68 degrees.

You've probably gathered by now that testing is critical.

While it's never possible to have complete access to someone's lived experience, try your app or game with some of these Accessibility settings turned on.

You can add a number of accessibility settings, like VoiceOver, Increase Contrast, Reduce Transparency, Reduce Motion, and the Grayscale Color Filter into your Accessibility Shortcut menu and access it from Control Center. Another really handy feature is the Text Size toggle, which can also be added to Control Center. Try experiencing your app or game in grayscale to get a sense for how reliant you are on color and how strong your app's color contrast is. Try experiencing your app or game with no sound, to get a sense for how reliant your app is on audio alone. Taking a different perspective on how your app or game might be used can actually lead to some insights and innovations that can make the experience better for everyone. One of my favorite examples is the QuickPath Swipe Keyboard, which was originally invented to help those who lack the manual dexterity to thumbtype type as quickly as everyone else. As it happens, many people love typing in this way. A solution to a challenge for one group of people ended up helping many, many more. We didn't touch on all the ways you can make your interface more accessible, but be very conscious about who can use your app or game, and try really hard to widen the circle so that even more people can enjoy your work. Our fourth practice for designing inclusively is localizing for culture. A big step in growing your app or game's reach is translating it into different languages so more people can enjoy it. Even if you're not looking to expand into other countries just yet, remember that the people who live in your country speak different and, sometimes, multiple languages. In fact, it's estimated that roughly half the people in the world speak more than one language. Translation is all about prepping your interface so that it can handle different word lengths and writing systems. It also involves carefully dubbing any audio and translating closed captioning in video. As well as paying attention to how you format units, such as time, phone numbers, and currency.

But localization isn't just about translating words and numbers from one language to another. It's also about making your content more relevant to different cultures. And again, this matters even if you're only focused on the country you're based in because those folks around you still come from different cultural backgrounds. One of the first things you can do to make people from other cultures feel welcome is to double-check whether you're using phrases that only make sense to certain people.

Take this phrase: "Nine cows and one hair." If you're not familiar with Chinese expressions, you're probably wondering, "What the heck does this mean?" This expression is an idiom, which is a phrase that has a different meaning than its literal words. If I were to convert this into an English idiom, you might recognize it as "a drop in the bucket," which, in turn, means "a tiny amount." Language like idioms, and slang, and humor, can be tricky to make inclusive. Not only do they take a lot of steps in your head to understand, people need to share the same cultural background in order to get them. And sometimes, they don't have a direct translation.

Imagine if your app's copy said something like "Plan your vacation from A to Z." How would you translate "A to Z," to make sense in, say, Korean? Always try to speak with plain, direct language, avoiding metaphors and complex terms. It will make your copy easier to understand, easier to translate, and more culturally inclusive.

In this case, I would rephrase "Plan your vacation from A to Z" plainly as "Plan your vacation from beginning to end." To dive deeper into clear language that's understandable to everyone, check out the new section on "Writing Inclusively" in the Apple Style Guide website. Beyond words, it's good to consider whether your content is respectful of different cultural norms and customs.

Say I've just launched a cooking app in the United States, which compiles recipes for popular meals like homemade pizza, roast chicken, and hot dogs. My app is doing really well, and I'd like to expand into international markets, starting with India.

I might work closely with a translator to get my screens written into the language Hindi, which would look like this. If I stopped there and just launched my app in India as-is, it would probably flop in that market. Why? Because even though people in India would be able to read all of the text in my app, my recipe content is still very catered towards a U.S. audience.

In India, a large portion of the population are vegetarian and follow Hinduism, where cows are revered, and it's very uncommon, sometimes banned, to eat them. Surfacing suggestions like beef and sausages can come off as insensitive to local cultures. Instead, I could tailor my app's content to fit with local dietary customs, researching dishes that would be more relevant and ingredients that are more widely available in India. I could also use this opportunity to recognize cultural moments, like surfacing recipes typically eaten during local festivals.

Together with translation, acknowledging cultural differences gives my app a better chance of being well-received in a new country. In games, respecting others cultures can come into play if you have characters and environments that are inspired by real-life people and places.

An inclusive game is able to avoid creating caricatures of different cultures. Ask yourself, "Am I associating an enemy as someone from an already marginalized race?" or "Am I basing 'exotic' alien or fantastical characters "off of the physical traits and languages of real ethnicities?" Even though you're crafting fictional scenarios, they can still have real impact and hurt players' perceptions of real people and cultures. So take care with how you depict others, and engage in conversations with people from other cultures to learn how you can adapt your content to better serve and respect them. The fifth practice is to use color mindfully. Linda mentioned earlier that different cultures and languages have idioms that we should be mindful of when we're localizing. The same can apply to color. Colors elicit emotion, and some of those emotions can change from culture to culture. For example, in many Western countries, green can symbolize environmentalism and going green, or can, in Western countries, come to symbolize luck, money, or fortune. But in a lot of Asian cultures, red is used to connote fortune, happiness, and well-being. This is why it's considered good luck to wear red during the Lunar New Year. In many parts of the world, red can be associated with love and red roses. Or red can be associated with danger, negativity, and even violence.

These associations are why, for instance, in most localizations, Stocks shows green for gains and red for losses, but why, if you set your region to Mainland China, gains are shown in red.

As mentioned earlier, in a lot of Asian cultures, red connotes fortune more strongly than green does. There are probably opportunities to customize your colors by region to be more understandable to a specific culture. As with localizing for culture, the best way to fully understand whether your color choices are eliciting the intended emotions is to ask people who come from those backgrounds.

Let's also briefly touch back on accessibility as it relates to color blindness. You might not know that color blindness affects almost 5% of the world's population, so make sure your interface elements don't solely rely on color to get their points across. Here, we have two kinds of dots to indicate "unread" and "flagged." But someone who is colorblind might not be able to easily distinguish these two kinds of dots from color alone.

In such a case, we might need to instead opt to change one of the dots to a glyph. As a result, you might even end up with something that is easier to understand at a glance. Also pay attention to contrast ratios between text and backgrounds, particularly when "Increase Contrast" is activated. Not only are some people sensitive to low-contrast interfaces, there are also environmental factors, like bright sunlight and use of sunglasses, that can also benefit from higher contrast.

The default iOS palette actually contains an additional set of colors to support high-contrast mode, so if your app uses system colors, you can automatically benefit from system support. If your app has its own color palette, you're gonna need to calculate the luminosity ratio between backgrounds and text, using tools that are available on the web or in the App Store.

When "Increase Contrast" mode is turned on, aspire to a minimum of 4.5:1 in your interfaces.

Plugging these colors in, we find that our contrast doesn't meet the bar of 4.5. What if we try black instead? Now, we can see that we're comfortably over 4.5. In fact, we should probably keep this text color, regardless of whether high-contrast mode is turned on. This is just a rough guide. There will be cases in which this ratio is misleading, and you'll need to use your own judgment.

For instance, this color combination also exceeds the bar of 4.5, but it's still hard to read in context.

Correctly assessing your app or game's contrast is as much of an art as it is a science. Culture is about more than words and symbols; it's about things like color, too. And not everybody perceives the same color palette, so be sure to use color with care so that your app or game can delight everyone.

The last practice we wanted to share with you is encourage self-expression. Your app or game can acknowledge and celebrate people's individuality, and the best way to make that happen is by not limiting or enforcing how people can identify themselves.

Take names, for example. When you meet someone new, "What's your name?" is one of the first things you ask them.

It can also be the first thing your app asks for when someone launches your experience. And your interface should accept the diversity of names people can have. Very often, names don't pass form validations because they have hyphens or accents, or are shorter or longer than an allowed character count. You might have even experienced this yourself, or can at least understand how annoying it would be to have this happen to you all the time.

So to provide a good experience, be flexible in supporting special characters and not enforcing specific name lengths.

Also recognize that concepts like having a first name and a last name are very region-specific.

If you're from Latin America, chances are you have two family names, one from each parent.

If you're from China, your family name is written first and your personal name last.

And in some countries, like Malaysia and Afghanistan, you might not have a family name, and go by just your personal name. If you were any of those people, how would you approach these first and last name input fields? Depending on what you're using their name for, a more culturally-inclusive solution can be to provide a single text field for someone to enter their full name. Better yet, you can always ask people what their preferred name is, which can differ from what they go by legally. Providing this type of flexibility makes sure that all people's names are welcome and creates a more personal connection if you ever address someone by name in your app or game later. Similar to names, gender is also an opportunity to acknowledge someone's identity. As I mentioned earlier, human gender is a spectrum and presenting someone with limited options to represent their gender, such as Male, Female, and Other, doesn't fully represent how broad that spectrum is.

The dating app Bumble is a great example of presenting gender choices. At registration, you have the choice to identify from a wide range of gender options and can submit your own. You can also choose to make your gender public or private and can change it at any time. An interface like this, that acknowledges diversity, makes more people feel welcome.

In games with human character creation screens, how you let people customize themselves is a great way to acknowledge identity. A lot of times, people craft characters to look like themselves, so they can feel more immersed in a role or a story.

You can think back to the diversity axes to consider all the ways people might want to physically represent themselves with different appearances. And if your narrative has a romantic element, you can give people agency to choose relationships based on different sexual orientations.

A great example of giving people customization options is a game called "Say No! More." Its gameplay is about setting boundaries at work by saying the word "No!" as a super power.

When you create your character, there's a wide variety of ages, skin colors, body types, hairstyles, and clothing to choose from.

You also can choose how you say "No!" based on a number of languages and vocal tones. Better yet, none of your choices are bucketed by what gender your character is. In fact, the game never asks for your gender because it doesn't need to. Clothing and hair styles don't belong to a certain gender, and neither does how someone's voice sounds. In this case, not asking for you to identify makes this game's interface more inclusive.

Always prioritize asking people how they'd like to represent themselves through your app or game, and design flexible interfaces that respect those identities.

So we've covered a lot in this video. The importance of thinking carefully about how you craft the stories around your app. Tell diverse stories. Avoiding stereotypes in your language and content.

Making sure that you are taking advantage of the accessibility features offered on our platforms and testing accordingly. That your app is thoughtfully localized and sensitive to how culture can affect how content is carried over. That your app mindfully uses color, both to respect culture and those who perceive color differently. And lastly, that your app doesn't unduly restrict someone's ability to identify how they want to. These practices stem from our duty to each other to design inclusively and to help each person live their best life.

Inclusive design is welcoming and respectful, and inclusive design is great for everyone.

These practices take, well, practice to get right. And while this might seem like a lot to do, it's worth it. Because when we craft something with respect, consideration, and love, that care can be felt.

For more resources on how you can design inclusively, check out our new section on "Inclusion" in the Human Interface Guidelines. And on how you can instill inclusive principles deep into your process, watch the talk, "The process of inclusive design." Thanks.