Transcript
[ Music ]
[ Applause ]
>> 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
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
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.
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
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
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
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.
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
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
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
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
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?
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.
[ Applause ]
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
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
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
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 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
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
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,
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.
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,
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.
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
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.
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.