Inclusive design means making your app intuitive, appropriate, and delightful for a global audience and people who have accessibility challenges. Learn easy-to-follow techniques for making your app culturally-relevant and accessible through use of type, layout, color and iconography.
[ 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
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
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
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
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.
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.
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.
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
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
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.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.