Inclusive App Design

[ Music ] Hi, I'm Caroline Cranfill and I'm a designer and production manager here at Apple. Today, I'm excited to talk to you about some principles about inclusive design.

When you put so much hard work and creativity into an app, you really want it to reach people. But ultimately, everyone will experience your app in their own way and if you think about the millions of people who could use your app, you have to consider how diverse their perspectives are.

Some people are just learning how to interact with technology. Others are digital natives who are completely comfortable with the latest and greatest.

And there's some who are just trying to get comfortable with the new way to communicate. And some will have cultural backgrounds that are very different from yours. And some will interact with your app with assistive technology like a Bluetooth Braille Display.

So when you're trying to ship an app, it always feels like there isn't enough time and there aren't enough resources and it only gets worse the closer you get to the end.

So that's why it's important to plan to make your app inclusive as early as possible in the development cycle. The problem is that early in the cycle, everyone just wants to talk about the cool feature ideas they have. So you need to convince your team to do the right thing. And here are some statistics that will persuade them to make inclusiveness a high level feature. Tim Cook recently announced that 67 percent of Apple sales in the second quarter were international.

Your app needs to be inclusive and flexible to reach this huge market of people with diverse backgrounds. Worldwide, 285 million people are blind or have low vision.

That's like half the population of North America. Over one billion people live with some kind of disability. That's one out of every seven people on the planet.

Now disability and diversity may not be the first things you think about when you think about user experience. But these numbers make it clear, these are the people that use your app and creating designs that work for them is at the heart of the user experience. So, how can you make your apps more inclusive? Fortunately, there are a small number of key principles that I have found to be helpful. If you incorporate these principles into your process, you will have more informed designs from the beginning. And in the end, your app will not only work better for more people, but you may also save time on localization and QA. So today, I'm going to share some concepts that I found eye opening and now keep in mind when I'm designing.

I'll discuss how to use typography to maintain hierarchy in different localizations. I'll show you why layouts need to be dynamically built to accommodate translation lengths, screen sizes and dynamic type. And we'll discuss emotions and legibility considerations when making design choices with color. And we'll go over certain cultural sensitivities around iconography.

So first, we'll talk about the need impactful typography for everyone regardless of language. Because the most fundamental objective of app design is to communicate information clearly and we largely do that with typography. So let's look at a quick design exercise together.

One of the ways you know what is most important is by using basic typographic treatments and compositional elements to give visual cues of hierarchy.

You can use extra space between different pieces of information or try different font sizes. Or you can explore typographic styles like font weights or character styles like capitalization or italics. Or start adding color and before you know it, you have so many good options.

And at this stage, it's an excellent opportunity to preview your favorite options in other languages you are going to localize in because you want all localizations to have this same impact as your original intention. In this example, the hierarchy isn't as strong in the title and subtitle of the Chinese localization because the Chinese writing system doesn't have the concept of upper and lowercase. In the second design, the title additionally has a larger font size and color from the subtitle which helps maintain a clear hierarchy in Chinese. So out of my two favorites, this second design is the most robust choice because it creates hierarchy through using two typographic treatments, both localizations can support, which is font size and color. I've found that once a design is going to be translated into multiple languages, having two to three levels of change will be more inclusive just in case a treatment isn't applicable in certain languages. And sometimes, designing with constraints like these can help come up with a better end solution for everyone. Here's another example at Airbnb.

They use font size, color, and extra space between information to maintain hierarchy across localizations. And so now for you to have more background knowledge and feel informed to design for other languages, I want to dive a little deeper about a few topics. First, it's important to remember that around the world, we speak different languages and use different alphabets. So, I want to introduce you to some writing systems that you may not be familiar with and how hierarchy can be lost if you aren't aware of their typographic support. So everyone here knows this writing system called Latin.

But you may not be familiar with characters in the extended Latin character set such as these. And you really might not be familiar with all ten writing systems that are used in over forty languages or localizations that we ship. A few typographic things that you might not be aware of is that some writing systems do not have the concept of upper and lowercase as I mentioned earlier. Also, the same subset does not have an italic appearance and it's not in good practice to force a slant on these writing systems. So now you need to know that different fonts for these writing systems have different numbers of font weights. Currently these are the font weights in the system font, San Francisco. But you can see that the system fonts for all writing systems at the moment do not have the same number of font weights.

So this means your designs using extreme weights may fall back to the reduced set. And this can be unexpected and sometimes lose hierarchy or emphasis. In the next consideration, I would like to talk about is using larger text sizes because they are more universal between languages and user capabilities. So let's start with a good question which is, "What is too small?" Maybe everyone here can see this bottom letter on this enormous screen. But on a smaller device, it'll be too hard to read.

Legibility is really going to depend on what device you are targeting because the standard viewing distances are different.

But, even if the letters are legible, it doesn't mean it's going to be good for reading content. Let's look at a non-Latin writing system like Chinese.

It gets harder to read at a higher number because rendering dense writing systems too small can reduce the clarity of letter forms.

The meaning can be misconstrued or lost because the strokes blend together. You want people to read their content easily and effortlessly.

So leaning toward larger font sizes will make the content more readable for everyone. Now one more thing about typography.

Some writing systems are considered to be tall because they have tall letter forms. As you might have noticed in the writing system overview, some of the examples have extra marks that we don't use in English. These are call diacritics, vowel marks, or tone marks and sometimes they're extremely high or low. For example, in this Thai font it can have ascenders much higher than Latin characters.

And in these Arabic and Hindi fonts, they have descenders much lower than Latin characters. And you should also be aware that in some code implementations, characters that draw outside those ascender and descender boundaries of a font and text views can be cut off if clip to bounds is true for the label. This should be off, because this is bad.

Missing marks can change the meaning of the word entirely. So, also in design comps, you should avoid assuming fixed heights for texts because the letter form is going to vary in different writing systems. So you might be thinking how does this affect my layouts? So let me show you a quick example of how labels will adjust automatically for these tall writing systems and code.

If you look at this composition consisting of three separate Latin text-size labels, and you can see in a tall writing system it requires a larger line height to avoid clipping. And here they are, side by side. And you can see that Thai text is longer and it's been allowed to expand appropriately. And it's important that you don't restrict the height of the view so this expansion can happen because letter forms could overlap or be illegible. And later, we'll explain how to make further make these spaces between labels increase dynamically to accommodate dynamic type. So some things to remember about typography that you need to make sure designs will retain the same meaningful purpose in other languages by preserving hierarchy, by choosing universal character styles, or by having two to three levels of change in case one isn't applicable in one of the localizations. Use font sizes that will be easy to read across all of your localizations and capabilities of the people who will use your app. And don't restrict drawing of views to their bounding boxes. So now we've looked at a little bit of typography.

For more information about typography, be sure to check out my friend Antonio's session tomorrow morning called Typography and Fonts for even more details on typographic treatments and layout considerations. But now, let's talk about dynamic layouts. We've talked about the appearance of words from all over the world, but now let's talk about how they come together in layouts. An Auto Layout can really help you implement these considerations, but I'm not going to go into detail about Auto Layout in this session. I want to focus on why having flexibly built layouts helps on so many different levels. It helps with localization, adapting to different screen sizes and for visual impairments when type is able to scale. So first, let's see how dynamic layouts help with varying translation lengths.

As crazy it sounds, the shorter the English words are, the longer the translations are going to be. The word edit in English is four characters but in Russian, it's twice the size. Just kidding, it's thirteen characters long. If an English word is less than ten characters long, the translation can be three times longer or more. A seemingly concise English phrase may be two times longer in another language.

And an English sentence can be 1.3 times or longer and might need to wrap to more lines. So this variation means that the amount of maximum text lines should not be strictly defined and text should be allowed to reflow by having a flexible layout.

You need to allow enough space for translations to expand, especially if there's no other place to see the words in full. You would hate for the end of a very important message to be lost. Titles and other key texts of apps must not be truncated because it can lose meaning or functionality of the app.

So those expansion stats were eye-opening and I hope it is for you too. I can't stress enough that layouts need to be overspecified for what you aren't seeing in the language that you are designing in. Let me show you an example of a dynamic layout using Auto Layout -- looks like in a few different languages. Here's this What's New in Photos screen that was created at Speed Dynamic. In Chinese, it's actually shorter than English and in German it's much longer and would start a Scroll View on an iPhone SE. And here is Thai with the tall letter forms and extra line height.

And here's Arabic which is also tall and a right-to-left layout. It's best to look at each screen after implementation in each language that you're going to localize in so you aren't missing something that will create a bad experience. Accommodating translation should be the next step into making your app inclusive and it will have immediate thank you from the people who use your app.

But I have one more reason why you need dynamic layouts, and that's Dynamic Type. This feature might be one of the most important features that you could add to your app if you haven't already. In settings, you have the ability to scale text. This enables a broad audience to personalize their devices and be in control of their own legibility. But it also allows them to choose how they consume information.

Small text sizes may produce dense content. And larger text sizes could be more focused. This is a highly used feature.

In fact, who here uses a text size feature on their devices? Nice. So let's get a great consistent across all of our apps.

And you also might not be aware, but in accessibility settings, low vision people can get even larger sizes for body copy. And here is Ulysses.

They do a great job scaling their UIs dynamically. So, how do I specify a design to be dynamic? First you start by specifying different text styles for semantically distinct blocks of text such as title, headline, body, etc. for the platform you're developing for. This gives ample variety to achieve a nice layout hierarchy and today I've got a present for all of you when making designs with text styles. The font size, leading, and tracking values for each style is now published on the iOS Human Interface Guidelines in the typography section.

And you will be able to download a working Photoshop file. Okay, so, let's go into detail, I'm focused for a minute on an iOS example. These are the font styles at the sizes they appear at for the default text size setting.

When the user slides the slider smaller and larger, these other columns are the sizes that the fonts will appear at.

You can see how the font sizes get smaller and larger, both up and down in text styles, and left to right in the text size slider.

And here's an iOS 10 mail message. And I'm going to show you some behind-the-scenes information about how to use text styles to make this design dynamic.

First, you will need to assign a text style to each text area. The sender and the subject are the most important labels and will be headlined so they're prominent and bold.

The To field and the time stamp are less important details and will be subhead. And then the message body will be body.

Then the next step, you will need to add a baseline measurement to express the relationship of each label to other elements around it.

And in the dynamic type APIs, you'll use these values to create a ratio to scale the spaces proportionately to the font size as it changes.

These are not fixed baseline-to-baseline measurements. The bottom space under the type also needs to be specified dynamically so that the text cluster will remain vertically centered in the header and the other measurements will follow similarly. The next step, you'll specify or enforce the standard layout margins.

It's important to at least use the standard width from UIKit because the actual value is different on different devices. You want to be consistent with other apps.

And lastly, we'll add some padding between horizontal elements. So now together, with the text styles, baseline ratios, margins, and padding, the layout is ready to be coded dynamically. And so now, let's watch this design scale.

So, ta-da, this is the mail message screen, growing from large to extra, extra large. There's also another legibility feature that you will get for free if you use text styles and that's called bold text. This helps people who would otherwise have a difficult time reading lightweight fonts.

And additionally, it also adjusts for tall writing systems. So sometimes, with the 12.9-inch iPad Pro, paragraphs of texts, or large blocks of texts, can often appear too wide for the reading experience if the layout margins were coded as fixed values.

So when you're reading a long line length, it's hard for your eye to jump back to the beginning of the next line.

So in iOS 9, we introduced the readable content guide property of UIView to respect a suitable line length for reading based on the size of the font which makes the margins dynamic instead of fixed. And now, so the margins adjust when the text size setting changes.

This way, the line length remains favorable for each font size. Also, layouts need to be further dynamic for right-to-left writing systems such as Arabic and Hebrew because they read from the right side of the screen to the left.

These languages require the UI to be mirrored. Here's Tweetbot. They've done a great job at their right-to-left layout.

If using Auto Layout's leading and trailing attributes, the flow and elements will easily mirror. However, it's important to make sure that some things do not mirror. Like numerals. They are presented left-to-right even in the middle of right-to-left phrases. You should not mirror phone numbers, clocks, music notes, graphs, and video playback controls.

Video progress sliders still increase from the left to the right and rewind always points the triangles facing left and fast-forward to the right.

And images do not need to be mirrored unless there is a sense of direction or design composition elements tying to other parts of the user interface.

So now let's internationalize an example together so you can see how this all comes together. Here's a step one, two, three, and an onboarding flow in a hypothetical app. If we were going to localize this for right-to-left languages, first we would mirror steps one through three with step one starting on the right. And then of course, translate the text and numbers by making them localizable labels instead of being baked into the art. But here, the story of the images seems to be pointing in the opposite direction as the numbered steps.

So we would want to mirror each image separately so the story of the images follows the steps. However, we should not mirror the checkmark because checkmarks are written the same. And now, the onboarding flow would feel natural for right-to-left languages.

So some things to remember about dynamic type is that translation lengths are going to vary, both shorter and longer, than the language you are designing in.

Dynamic Type is an awesome, highly used feature that allows scalable type. And reability margins help keep columns and areas of type at nice readable line lengths. And Arabic and Hebrew will require the UI to mirror. So now we've looked at dynamic layouts and I hope your apps will look great to these size changes and new languages. There are new additions to the APIs that will make it easier to implement, so check out these other great talks for more information. The Auditing Your App for Accessibility highlights a new tool for previewing your app using the Dynamic Type settings and Making Apps Adaptive, Part 2, will give you a summary of the new Dynamic Type APIs and What's New in International User Interfaces highlights new support for handling right-to-left images with asset catalogs.

But now, let's talk about color. Color is another fundamental design element. There's a -- and there's a lot to consider when choosing colors for your app because they will bring emotions to the experience. So first, it's important to recognize what emotions colors will mean to your particular audience in your context. So let's talk about a few meanings of the three most popular colors. Surveys have told us that blue might be considered the most favored color around the world.

And the second most popular color varies in countries but is usually green or red. So first let's talk about blue.

Why does everybody like blue so much? I mean, blue has a short wavelength on the spectrum and actually makes it less work on us to see.

And our eyes are trained to see the skies as generally blue because the short wavelengths are scattered more efficiently by the molecules.

FYI, that's why the sky's blue. But also seeing some colors releases calming chemicals in your body and lowers the blood pressure.

However, universally, some shades of blue also portray sadness and loneliness likely stemming from an association with the vast and ominous oceans. So now, let's talk about green. It has a wide range of symbolic associations.

In the western cultures, it's heavily marketed as go green, live healthy, and reduce, reuse, recycle, as a natural eco-friendly way of life.

In Ireland, green commemorates the Patron Saint of Ireland on Saint Patrick's Day and is also known throughout the world as a lucky color.

Green is also a universal color for safety. It's used in traffic light systems and road signs all over the world to indicate that it is safe to proceed.

So now, let's talk about red. It's pretty consistent around the world that it stirs up both similar positive and negative meanings.

Red has a long wavelength on the spectrum which grabs our attention easily. Therefore, in many parts of the world, red is a symbol of revolution and conflict. It exudes passion and love. And to most Asian cultures, red means happiness, prosperity, and good luck because of the association with the Lunar New Year. And it's also worn at weddings.

In fact, red is so positive here, that the Chinese stock market uses red to mean gains and green to mean losses.

And the next color consideration is color blindness. And you need to be aware that color blindness affects more people than you think.

It's actually one in 12 men and one in 200 women. That's almost 5 percent of the total population of the whole world.

And all of these popular preferred colors have implications to color blind people. It's not that these are -- these colors are confused with each other, but it's how much of blue, red, and green they have difficulty seeing in all colors.

For one kind of color blindness, this color palette may look similar to this. This is why our platforms have settings to differentiate key information without color if needed. Like here in mail settings, you have the choice between an orange dot or an orange flag for mail flagging because if you are color blind, you may not be able to tell the difference from the orange flagging dot with the blue and red dot.

So the additional shape option is good for people who need it. And the next topic is about having high-color contrasts for legibility between backgrounds and text.

Contrast is important to test in your apps because you want people who may have contrast sensitivities as well as situational impairments like bright sunlight or wearing sunglasses to be able to use your app. And to find what is high contrast, you need to calculate the luminosity ratio between two colors or one way of roughly testing contrast without calculation is to turn your file into grayscale. You can quickly see if the colors will have enough contrast with each other in your app. And soon, on the iOS Human Interface Guidelines in the resources section, you'll be able to download a helpful tool to calculate color contrast by using RGB values and it will also tell you if you're in compliance with common accessibility guidelines for different text sizes and weights. But you can also use numerous online contrast ratio calculators.

If we calculate the contrast ratio for this purple and orange, it was found to be 1.5 to 1. That is not in compliance with -- because it is a very low ratio. In fact, 1 to 1 is the lowest ratio you can have. Let's look at another example to see the highest contrast possible, and that's between black and white. A contrast ratio calculator finds that the white and black has a ratio of 21 to 1 and of course it passes at all text sizes. Now let's check out some gray text since it's such a fad.

The ratio comes in at 4.4 to 1 for this gray. It's okay for large font sizes, but it's too low for small text sizes.

When font sizes are small and have low contrast, your eyes can't distinguish the shape of the letter forms to easily read the text.

Let's look at one more gray. Maybe not on this screen, but on small devices, this is really hard to see, even at large sizes.

That's because the contrast ratio is 1.9 to 1. And this fails at all text sizes. You wouldn't want your app to have text or glyphs at this low contrast if you want people to see and be able to use it. Ideally gray text should be reserved to indicate disabled or inactive states rather than ornamental or decorative style. Now, have you ever debated whether you should use white text or black text on a color background? Happens to me all the time. If we use this calculator, we can see that white text on an orange button is a 2.2 to 1 contrast ratio.

And black text on an orange button is 9.6 to 1. So in this particular example, choose black on orange. It's a higher ratio.

Your texts and glyph colors should be in good contrast to the background color for optimal reading experience. So some things to remember about color, some of the most popular colors can mean different things around the world. Additionally, you should not rely solely on color to show the difference between similar shaped objects that have different meanings. And you need a high color contrast between text and backgrounds for legibility. And so now we've looked at color. Let's talk about iconography.

It's important for you to know that iconography can have different meanings around the world too.

Semiotics shows us that the language of visible symbols is audience and context dependent and how cultural references and values shape the message.

For example, to be -- in order to be multicultural, the International Red Cross has three official symbols for protection during conflict.

They have the red cross for predominantly Christian regions, the red crescent for Muslim regions, and the red crystal as a neutral symbol.

These religious connotations of these simple symbols, risk the safety of people in conflict, so they adopted three. So, when you design glyphs and icons, it's important to remember that different areas of the world might associate meaning with even the simplest of shapes.

Something as simple as a hand can have different meanings around the world. In most places, it means stop or requesting a cheerful high five.

But in Hinduism and Buddhism, it's the hand position of Abhaya and it means no fear. However, maybe you wanted to make a simple design decision to spread out the fingers of a palm for better clarity in a glyph, but an open, facing palm is actually offensive in some countries.

And I'm not going to show you that one today. Additionally, non-directional and non-textual icons are going to be more universal because it does not rely on one region's alphabet or particular cultural objects' orientation. For example, iBooks using an open book instead of a book showing the binding which is going to be different for right-to-left locals. You don't want to alienate a group of potential users because they can't recognize a letter form or if something will feel backward. Also, sometimes you create glyphs that mimic other parts of the UI. For example, in right-to-left settings, the notification icon is mirrored to match the way it appears on the right-to-left Home screen. The badge should be on the left of the glyph representing a badged icon.

So some things to remember about icons and glyphs, iconography can conflict with cultural norms or symbols can have different meanings entirely.

Iconography are ideally non-directional and non-textual. And iconography should match UI if the UI was mirrored for right-to-left languages.

You want the meaning of your feature or app to be clear and used, not offensive, confusing and unused. Okay, so we've looked at ways in which your app's UI could change to be more intuitive and appropriate for a culturally diverse audience, and in ways in which your designs can be all around more assessable to everyone. But it's a lot to consider and sometimes it's hard to know if you're doing something that is insensitive.

So what I encourage you to do is to reach out to people in the countries you plan to make your app available in and ask them for feedback.

Ask them how they were using your app. If it feels logical in their language? Is everything easy to read? And then I want you to ask yourself, "How can you be more inclusive?" So to watch this talk again, please check out this address and to also find related resources for what I discussed today. And it also has a link to the completely redesigned iOS Human Interface Guidelines. It has been migrated to a new visual layout style with fresh imagery and streamlined graphics for designing great apps. It's also been updated to include guidance on the new features in iOS 10.

Be sure to check out these great related sessions happening all week. As I mentioned before, the Typography and Fonts tomorrow morning has additional great design information about typography and fonts. The Auditing Your Apps for Accessibility highlights the new tool for previewing your dynamic type. And Making Apps Adaptive, Part 2 will go over layout guides, readable content guides, assets and appearance customization. All information that you will need to use to put my considerations into practice.

And the What's New in International User Interfaces highlights the new support for handling the right-to-left images with asset catalog.

Thank you and have a great conference.