Transcript
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[ Silence ]
>> Greg Christie: Good morning.
[ Applause ]
This session is What's New
in iOS User Interface Design.
And I want to thank so
many of you for caring
about software design, for
being here at nine o'clock
in the morning to talk
about this topic that's
very important to us.
If this were another company
and if this were another
developer conference,
I might imagine a full room
could be a session like this
but it's not, we are Apple,
we care about software design,
and this is what this
session is about.
[Applause] So why don't you
guys give yourself a hand.
I'm Greg Christie and I'm here
to introduce Mike Stern
eventually and talk
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
about what the new
user interface means
to you as developers.
I thought the keynote
went great.
I hope you guys all enjoyed it.
You guys have been playing with
iOS 7 for a day and a half now
and so I thought it would be
a really great way to start
if we take a fresh look at
Jony's words and the video now
that you've used iOS
7 for a day and a half
and can get some context into
what he was talking about.
So, I'd like to start with that.
[ Music ]
>> We have always thought of
design as being so much more
than just the way
something looks.
It's the whole thing.
The way something actually works
on so many different levels.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Ultimately, of course,
design defines
so much of our experience.
[ Music ]
I think there is a profound and
enduring beauty in simplicity,
in clarity, in efficiency.
True simplicity is
derived from so much more
than just the absence of
clutter and ornamentation.
It's about bringing
order to complexity.
[ Music ]
iOS 7 is a clear
representation of these goals.
It has a whole new
structure that is coherent
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and it is applied
across the entire system.
[ Music ]
We've considered
the tiniest details,
like refining the
typography, to much larger ones
like redesigning all the icons,
and developing a grid
system allowed us
to achieve a much more
harmonious relationship
between individual elements.
We've also incorporated a
whole new palette of colors.
[ Music ]
Distinct, functional layers help
establish hierarchy and order.
[ Music ]
And the use of translucency
gives you a sense
of your context.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
These planes, combined with
new approaches to animation
and motion, create a sense
of depth and vitality.
[ Music ]
The iPhone responding to your
movements drives the parallax
to create a whole new
experience of depth.
[ Music ]
In many ways, we've tried
to create an interface
that is unobtrusive
and deferential.
One where the design
recedes and in doing
so actually elevates
your content.
Even the simple act of changing
your wallpaper has a very
noticeable effect on the way
your iPhone looks and feels
across the entire system.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[ Music ]
While iOS 7 is completely
new, it was important to us
to make it instantly familiar.
[ Music ]
We wanted to take an experience
the people know very well
and actually add to it
to make it more useful,
to make enjoyable.
To create it, we brought
together a broad range
of expertise from
design to engineering.
With what we've been able to
achieve together, we see iOS 7
as defining an important
new direction,
and in many ways, a beginning.
[ Music ]
[ Applause ]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> Greg Christie: I won't
do nearly that well but.
What's new in iOS 7?
Well, everything is new.
It's a 100 percent
new pixels there.
No pixel here has
been used before
in any previous release of iOS.
A really great example to look
at when we talk about what's new
in iOS 7 and where we're
headed is the Weather app.
It's not the most important app
on the phone unless you really
need to know what the weather is
and it's not the most used app,
but it really gives
a great indication
of what we're doing with iOS 7.
You guys by now are familiar
with the animated
weather states,
how they occupy the
full display.
It's really interesting
comparing old and new side
by side and you can see a lot
of what we were doing is
maximizing the screen size,
blowing out the edges, removing
unnecessary edges and borders,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
refining the typography,
refining the line work,
really just creating a whole
new immersive experience.
The graphical ornamentation
is now an intrinsic part
of the application.
It's not just tacked on.
Okay? You can see
all those things here
in detail compared to that.
It's really interesting.
Johnny touches on four
key notions in the video
and that's what we're going
to talk about here today,
because when everything has
changed it's hard to know
where to start, so we'll
start with the simplest notion
and that's one of clarity.
Clarity simply put
is being clear.
In the Weather app we're
very clear in terms
of what the temperature is
and what the current
weather conditions are.
We make the current temperature
as large as possible,
yet fit in a sound design with
the rest of the information.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Being clear means clearly
indicating what's text
and what's a control,
what's content
and what's a control layer.
Another important concept
is this of deference, right.
So what we're doing in our apps
now is deferring to the content.
We're letting photos be
photos, web pages be web pages,
email messages be
email messages,
but there's another
side of deference.
This is very important
for you folks and that's
that iOS now has a design that
defers to your apps, okay?
We're not putting a really
strong visual imprint
on the overall system
so that your apps,
if you're doing custom UI, will
feel out of place on the system.
Our UI is now getting
out of the way,
we're letting your
apps be your apps
and letting the customer's
content be the
customer's content.
Another way that we're
reinforcing clarity
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and this difference between
controls and content,
is by our use of depth.
You see this really strongly
in the case of the Home screen.
We're using this layering
model and we're using layers
and notification center
and control center
and within the individual
apps themselves.
Having controls exist on one
layer, content exist on another.
Finally, detail.
Detail really shows itself
in terms of topography,
using a consistent and coherent
set of weights and sizes
and in colors and
in the iconography.
Again, we're using a highly
disciplined, controlled,
limited set of colors yet it
provides a very rich pallet
and one that can express you
know just the incredible variety
of apps that are on iOS.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This also applies to the
Glyphs, things that appear
in button bars, toolbars,
those types of things.
These have all been
normalized with regard
to line weight and
shape and size.
Paying attention to
the details matters.
It matters a lot.
Another thing that
we're doing with regard
to detail is we're finally
exploiting the retina screens
to their, you know,
fullest capability.
We've lots of single pixel
details, single pixel lines
that we're using and exploiting
throughout the system.
Okay? So here to walk you
through the nuts and bolts
of what we did and some of
what you will have to do
to bring your apps into the
iOS 7 world is Mike Stern.
He's going to walk you
through some of these things.
[Applause]
>> Mike Stern: Thank you Greg.
I'm really excited to be
with you this morning to go
into some detail about iOS
7 and some of the new apps
Request Timeout
The server timed out while waiting for the browser's request.
Reference #2.d5524817.1373789674.0
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
with really great restraint.
We had to make sure that
anything that was added
to this was absolutely
necessary.
So eventually started adding
things like date and sender
but again it was secondary
to what mattered most.
Eventually we added controls
but we did so in a way
that didn't interfere with
your ability to read text.
It doesn't take much to make
these controls available
and legible, easy to access.
Now you've got to do a
little bit more than that
so color got added
at a later stage just
to distinguish controls
from content.
Some background colors,
a couple of crisp lines
but at all times the message
stayed present, it stayed front
and center, it was
the star of the show.
Then this is the
final design for Mail.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
As you can see when photos
were added they were made to be
as large as possible so that
you can see as much detail
as possible without having to
pinch to zoom quite so much.
Now this focus in
starting with type first,
that really prioritized
type for us
and I don't think this will come
as a big shock to anybody here,
Apple has always
been deeply committed
to making the displayed and
the printed word as legible
as possible and gorgeous.
So that's how dynamic type came
about and there's a lot of stuff
in dynamic type and I'm sure you
guys have already heard quite a
bit about it in previous
sessions, but I want to focus
on two aspects of that,
scaling and styles.
Let's start with text scaling.
Now a big part of legibility
is the size of type.
I've worked as an interface
designer for 17 years
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and I've worked on countless
projects and probably
on every single one type
was a big component of it,
and you know I or my team
would develop designs
and we would show them
to stakeholders, clients
and you'd always get this
diversity of reactions.
"I'm getting too old, my eyes
ain't what they used to be
and this is really hard to read"
or you know, "make text smaller,
it's truncating too quickly,
there's not enough controls,
I want to see more stuff
because it's more powerful
and I can deal with all
of that complexity."
And it's impossible to satisfy
both ends of that spectrum.
How do you do it?
You normally had to
pick one size of type.
I mean maybe you could build
some kind of custom thing
that allowed text to scale
but it was prohibitively
expensive engineering-wise,
and the results probably
would not be very good.
Dynamic type is game changing
because it allows for that
and it's really easy to use.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You have a huge diversity
of sizes to choose from
and with the accessibility
mode you can have,
you know, massive text.
It's really great.
But simply scaling type,
this is Helvetica Neue Light,
which looks really
awesome when it's big
but when it's small it
doesn't work very well.
It's not very legible.
The letter forms are very thin.
They're very delicate.
So to resolve for that,
to solve for that,
you can make small type bold
but that results in large type
which looks heavy and cumbersome
so this isn't very good either.
So dynamic type dynamically
makes text heavier
when it's smaller and
thinner when it's lighter.
Has a range of about
two weights.
As a result text has
this great continuity.
It looks great at every size,
but of course we
didn't stop there.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Text that has more
space between characters
at small sizes is
also more legible
so dynamic type does
that as well.
It dynamically adjusts, very
fine tune, sub-pixel level,
the space between characters
so no matter what size you
choose your text is going
to look great.
Now let's talk about styles.
In printed publishing,
typesetting, you know,
word processing we have these
categories for type like Body,
Headline, Caption,
and that helps you
to establish a clear information
hierarchy in your UI.
Some text is more
important than others
so it should be bigger
and heavier.
Some stuff less so right?
You guys are familiar
with this stuff.
You've seen it a million
times and this is a really,
really great system so we've
made that a fundamental part
of dynamic text-- type.
So this is the Inbox and all
of this was designed
using type styles.
The Inbox, the title for the
screen is the most important
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
thing here so you
know where you are,
you know what you're looking at.
Secondarily who sent it?
At this stage in time that's
the most important thing
that you need to know so
those use the heaviest styles.
It's really clean and
these styles allow you
to create relationships
between different types of text,
so you can see the intent
of how you're trying
to establish that hierarchy.
And of course these two
features work together.
Fine tune adjustments were made
to every one of these pieces
of text, every one of these
combinations of style and size.
So the other thing
that I want to point
out is there's line
height, which is the space
between lines of
text or leading.
And that adjusts too
so it's proportional.
So the composition of your
interface has great integrity no
matter what the text scale is.
These kinds of details
are really important
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
with visual design.
Now typography is
really complicated.
I've been a designer for
a while and I've worked
with some amazing designers
who can make great icons,
have a great sense of
composition and color,
good interaction designers
but I've seen people
struggle with typography.
It's something that a lot of us
as designers aren't trained for.
People go to school for this
for a really long
time and read books.
There's a lot of details here.
But luckily we have some really
good type designers at Apple
who have spent a lot of time
perfecting type in iOS 7.
So they've taken something
that's extremely hard to do well
and they made it really easy.
All right, let's move on.
So let's talk about
some of the differences
between iOS 7 and iOS 6 Mail.
Let's talk about bars.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Not the ones you
guys are going to go
to tonight but navigation bars.
Now obviously this has
changed quite a bit.
It's no longer this blue plastic
material that's convex in shape
and meant to portray some
sense of dimensionality.
It's now this solid white
color and it extends to the top
of the screen to work
really closely well,
work well with the status bar so
they work as one unified element
and it's still really clean.
It's easy to see everything
what's inside of it.
There's a lot of nice negative
space there, white space.
And the toolbar was designed
to match both of those
and as you can see it's
blurring the background content.
We saw that in the video before
so it's not completely
occluding,
clobbering the content behind.
As a result Mail
was more expansive.
It goes from edge to edge,
side to side, top to bottom
and the message, the
text and the picture,
it comes to the foreground more.
It's not stuck behind
these two blue bars
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and that's what matters
most so we're deferring
to that through the UI.
Now we've removed the
borders around buttons
or bezels, as I might call them.
Why did we do that?
Well it's a really
simple reason.
When you get rid of that
ornamentation you have more room
to make text larger
and more legible.
Icons can be bigger and
they stand out more,
they're not competing
with the border themselves
for your attention.
The Back button, it remains
essentially unchanged.
It's still pointing to the
left side of the screen,
it's still the same height,
it still has the same label,
it's really easy to use.
You don't need the
border so it's gone.
Now words really matter
in interface design.
You have to answer the question
that your user is asking
in the way that they've
asked that question.
So, for example, this status
text, this isn't something
that we particularly innovated
but we improved upon it,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
we can make it better.
The user is asking how
current is this content?
Rather than tell them the time
of day we tell them how
long ago this was updated.
So I want you guys to think
about that in your apps.
How are you phrasing things?
Are things technical?
Do people need to parse
them and interpret them?
Can you make it easier
for them to understand?
Can you speak with more clarity?
We heard about this
is Jony's video
but it was really important
to establish familiarity
and that was true for the
whole iOS and it's true
for every single
one of our apps.
So let's look at some
examples of that.
There's some really new,
powerful new features
that were added to Mail.
You can add smart searches
to quickly find mail
with attachments or flagged
messages, unread messages,
you can add links to
mailboxes you go to frequently.
That's powerful stuff but it was
added in a way that was logical,
it was an extension of what
people already knew before
which is to go into this Edit
mode, so it's really seamless.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Think about that with your apps.
You make an app, you release
it, people get to know how
to use it, they get
accustomed to certain things,
location of controls
and nomenclature,
and then you do an update and
you add some new features.
You don't want to completely
move things around on them.
That makes people
confused, frustrated,
it's not a good thing.
Another great example
of that is Action Sheet.
So this is visually different.
You can see we removed the
borders around buttons here too
and as a result it's much more
compact and you can see more
of the message still even
when the Action Sheet is
up, which is important.
It's important to know
what you're acting upon.
But a lot has remained the same.
The order that these are
in, the labels that we used,
red still warns you about
potentially harmful actions,
the safest button is at the
bottom and it's separated
out from the rest and it's
the easiest to access.
It's a lot of important stuff
that's remained exactly the same
so it's instantly familiar.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Let's move onto Calendar.
So as you can see, Calendar
has changed as well.
It's adopted a lot of the
same design language as Mail
so it's now open
and less fragmented,
but that's not what
I want to talk about.
I want to talk about that, that
segmented control right there.
I'm going to spend a little
bit of time with this.
In particular, I'm going
to start with the Day
and Month buttons in
the segmented control.
Now as we know there's a
hierarchal relationship
between days and months.
We all have that
deeply engrained in us,
seconds are in minutes
are in hours are in days,
I hope I get this right, are
in weeks are in months are
in years are in decades,
centuries.
It's really important that
the information hierarchy
of the data inside of your app
is respected by the interface.
The interface is a
natural fit for that.
I'll explain more
about what I mean.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So this is the Month view and
as you can see if I want to get
to today I don't have the button
there in the bottom to press,
so how do I get there?
Well, I simply press the 12.
Now before I do that I want
to have you guys pay attention
to where that red dot goes.
See how it just splits open?
That animation reinforces
that feeling that you've dove
into that day and the week stays
around at the top so you can use
that as a control,
which is really elegant.
And we conceptualize hierarchy
visually from top to bottom,
right, that's the way we
typically think about it.
Look at the order of things.
The Back button shows you the
month, the week below that,
the current day below that
and then the hours below that.
It's perfectly complementing
our mental model of hierarchy.
So it's a really nice design.
Now I also want to
talk about animation
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and moving across days.
So this day picker, or this
week view, sticks around.
So if I want to see what
I did on Monday we get
that lateral animation.
It gives us a really
nice intuitive sense
of movement through time.
And if we go to Friday,
again, it just goes
in the opposite direction.
So we always have our context.
It really feels solid.
We're oriented inside
the application
and that's really important.
The opposite of feeling in
context is feeling lost.
It's really easy to get
lost in someone's interface.
So, oops, went too fast.
So in iOS 6 and before
there was this swipe.
You would swipe anywhere
on the Calendar, to move -
to move to the next
day or the previous day
and so we extended
that to the week.
It's really natural.
It's really powerful.
So now I can also
animate to the next week
to see what's going on there.
So the next thing I want to
talk about with animation is
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that making really
good animations is kind
of a tricky thing.
It's really delicate yet
there's a lot of subtlety to it.
You're trying to reproduce
the feeling of real life.
So the next thing we'll do is go
back, step back through the days
of this week and I want
you to pay attention
to how the animation works.
You don't just go from
point A to point B.
You go to point A to point B
and you overshoot and come back.
Let's look at that.
See that little bounce?
That bounce adds a sense
of physical realism.
We get this kind
of intuitive sense
of how the mechanics
of this work.
And that imparts a
sense of liveliness.
Not through the visual design
but through how things respond
to our touch interactions.
And this kind of stuff you
can do with UI dynamics.
That physics engine that
we've built in, you can apply
that to your apps to make them
feel more deeply lifelike.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It's great stuff.
So now we want to get
back to the Month field
and how do we do that?
Well we press the Back button
and as you just saw the
animation is the opposite
of what we saw before
when we went into the Day.
And that's really
important too with animation.
You want to make sure that your
animations are symmetrical.
I've seen tons of apps
where getting from point A
to point B there's
one type of animation
but coming back again it's a
different type of animation
or there's no animation at
all, and that's deeply bizarre.
You want to make sure you
have symmetry in animation.
Now the great thing
about this new design is
that it's scalable.
So now we can do something
we couldn't do before using
that segmented control.
We can go back up to the Year.
Let's watch as that
animation happens
because this is really keen.
The whole screen shrinks down
to where the Month is now.
Your eye follows it so there's
no doubt where, how you get back
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to where you were before.
You feel in context the
hierarchy is really clear
through that zoom out animation.
And what's really awesome about
this is that that same approach
to animation applies to
when we exit Calendar
and go back to the Home screen.
So let's do that now.
The Year shrinks
down to the app icon.
If you accidentally press
the Home button and you want
to quickly go back to
Calendar, it's really easy to do
that because your eye
tracked to the app icon.
That kind of rigor,
systematic application
of animation throughout the
platform, throughout iOS 7,
is really important and I think
there's something to take away
from that with your apps.
You want to be consistent.
You want to be rigorous.
It leads to a really
cohesive user experience
and it's really important
to have your app stand
out from the rest.
Let's watch as we dive back in
and just see it all
come together.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[Silence] It's really
fluid, really natural.
All right, now Greg
talked about clarity.
A big part of that is starting
with functionality and thinking
about how to design
your application
so it's a pure expression
of that functionality.
You pick up the phone,
you look at the app
and you immediately know what
this is capable of doing,
what this is for and how
you're supposed to use it.
This is a theme you're going
to see in a lot of these apps.
So this was the third button
in that segmented control.
This is the List view.
Now the List view
is kind of useful
but what was really powerful
about the List view is
that you could search it.
Searching is really useful
but you wouldn't know
that by the fact
that it was stuck
in the List view
unless you lived
in the List view all the time,
you would be missing the fact
that you could search Calendar.
So to rectify that Search was
put at the top right corner
so it's immediately
available at any point
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
when you're using Calendar.
And you can apply
that too to your app.
I mean what's the really
important functionality
in your app?
Is it placed in the
right location?
Is it understandable?
Can people find it?
Now getting rid of clutter
is a big part of that.
If there's less things competing
for someone's attention,
they're more likely
to see what matters.
Now we can search,
we can see the list,
it's really straight forward.
So while we're talking
about Search,
let's spend a second
with these two icons.
I'm going to give
you some free advice.
Okay, it's going
to cost you $1,600
but I think it's
totally worth it.
These icons work
really, really well.
You guys all know, I don't
know all of you but I know
that you know what these mean,
Search and Add something,
whatever that is,
depends on the context
of the application you're
in, but it totally works.
And it works because you've
seen these icons a million times
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and every time you've pressed
one of those icons it responded
in a really consistent way.
It allowed you to search.
It allowed you to add whatever.
Most icons don't fall
into that category.
Now I've made who knows
how many icons in my time.
More than I care to
even think about.
And I think I'm pretty
decent at making them
but I can't tell you how
many times I've made an icon
and I thought I did a
really good job with it
and then I showed it to someone
and they didn't know
what it meant.
It wasn't clear.
They guessed but
they guessed wrong.
And I suspect that it might be
the same with some of your apps.
If you have icons in your
apps, you'll look at them
and you'll know exactly
what they do,
exactly what they represent,
but it's important to show them
to someone else who's never used
your app before and ask them,
tell them to tell you,
"What does this mean?"
What does this do?
You might be really surprised
to find the answers you get.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It's often more clear
to use text.
So for example this is
the Inbox icon that we had
in the previous version
of Calendar.
Sorry, I see people
craning their neck.
It's a little tray with
an arrow pointing to it.
Now this actually
is a good icon.
There's nothing wrong with it.
It sort of extends
the Mail Inbox model,
we've always had
this tray for that.
But we have more space with
iOS 7 so it was much more clear
to present this command as text.
There's no ambiguity there.
Sorry, for those that can't
see it, it says Inbox in text.
And also just another thing,
in a bar like this it's better
to just have all
text or all icons.
If you mix the two it can
get kind of confusing.
All right, Notes.
I want to talk about
realism for a second.
This was Notes.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This was Notes from iOS 6
and actually all the way
back to the first phone.
And it had this really clear
notepad motif, this theme.
It looked like a
legal pad of paper.
And the team that made this
did a really good job of it.
It was a great attention
to detail, the textures,
the torn paper edges, the way
the lines there move slightly
over to the left to
convey the sense of depth,
the typeface that's legible,
the handwritten font,
the icons that were custom
designed to match the style
of the notepad and the way
the page curled as you went
from the next to the previous
note or went through notes,
really sold the idea that
this was a legal pad.
But why? Why do this?
Well to explain that we
have to go back to 2007.
We're going to take
a trip back in time.
It's 2007, there is no iPhone,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
you don't know what
multi-touch means,
you've never used
a device like this.
You haven't heard about swipe,
you haven't heard about pinch,
you haven't heard about rotate,
that's not in your lexicon,
it's not in your vocabulary,
you don't use those terms.
So when these apps were being
designed it was really important
that to make it easy,
to pick one of these up
and be successful with it,
accomplish tasks that you want
to accomplish, that it should
be immediately familiar.
So real world objects were used
as the basis for the app UI
in a lot of the apps
that we saw.
A legal pad is so ordinary.
Everyone knows what it's for.
Everyone knows how to use it.
But sometimes when you use a
real world metaphor as the basis
for your UI it doesn't
really scale.
So for example, you
can't search a notepad.
So when you add that it
starts to ruin the illusion.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Things start to breakdown.
So this is the new
design for Notes.
It's so much more clear
what's important here.
It's the content of your notes.
That's front and center.
It's not about the
style of the app.
It's not about showing you how
great you can represent a legal
pad of paper.
It's about what matters,
the Notes.
But you can still see that it's
been stylized, it has a theme
but that theme serves a
very different purpose now.
It's meant to impart warmth
and personality and character.
And great detail went into
making this just right.
We have this letterpress
text effect
and the paper texture
is really realistic.
You can see that
when you zoom in.
Now let's talk about clutter.
As you'll see there's
a difference here
between these two versions.
There's something missing in
iOS 7 and that's the title.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now we've always advised
have a title for your screen,
have a title for your
screen, it's really important
and 99 percent of the time
it is really important
so don't just go remove your
titles with reckless abandon.
The title tells you where you
are and what you are looking at,
but did it matter here?
Notes is such a simple
application.
The name of the application
is its title.
It tells you what you're
going to be looking at here.
There's no ambiguity.
You don't know.
Those aren't emails
or something else.
These are notes.
So there is no point in
showing the title so we didn't.
Same is true when you're
looking at an individual note.
Previously it was just generated
by the first line of text
so it was always
totally redundant.
What's the point of doing that?
There is none so the
title is removed.
And one last thing
about Notes is color.
Now you'll see that the color,
you'll see this yellow color
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in Notes and that's the tint
color of the application.
That color serves
two purposes here.
One, it indicates things that
are interactive and two it helps
to stylize the look and
appearance of your app.
Now you'll want to pick a
tint color for your iOS 7 app
and you'll probably pick
something that works well
with your brand or
your app icon.
So if your logo has green
color, make a green tint.
You know any color is
going to work well.
You can use purple, red,
yellow, orange, green, blue,
everything expect for
white, I don't know.
Let's move onto Safari.
So with Safari I want to
talk about iconography.
Now as you saw we've
redesigned all of our icons.
So these five icons they look
visually different and that's
because they're five
of a huge set of icons
that were fully redesigned for
iOS 7 and they were redesigned
so that they matched each other.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
They're straightforward,
front on,
they have thin delicate
line features, the curvature
of the shapes is
really consistent.
A lot of care and thought went
into making this
system hang together.
Now I know a lot of you guys
don't make a couple dozen apps
and whole operating system,
but even if in your app you
only have two icons you have
to make sure that they
work well together.
I can't tell you how many apps
I've seen in my experience
where icons just look
like they were pulled
from different sources or
made by different designers.
And the problem with that is it
makes your app look cluttered
and incoherent and we're
really sensitive to that.
We have a really high bar
for that kind of consistency.
We've seen a lot of great
software in our time, all of us,
and so when we look at every app
we measure them against that.
Now it wasn't sufficient to just
make icons match each other,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
they also match the
clean, crisp typeface
that we use as a system font.
That's also really important.
We wanted to establish an
overall aesthetic for iOS 7
that really hung together well.
That also can apply, you know
let's say you're making an app
about the U.S. Constitution, you
don't want to use marker felt
with the parchment texture,
that would look really corny.
You want to pick a font
that's appropriate.
But although the style of
these icons has changed
so much has remained the same.
The symbology of the icons
is identical, arrows for back
and forward, open
book for bookmarks,
the order that they're in and
the location on the screen,
they've all stayed the same
so your muscle memory still
will serve you really well,
it's really familiar.
Let's move onto Weather.
I want to talk about affordance.
Now this is a $5 word and I know
a lot of you know what it means
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
but I've heard different
definitions and for anyone
who doesn't know what it
means, let me define it just
so we all share a
common meaning for this.
So take a door for example.
If it has a handle on it,
it affords you the
ability to pull it.
If it doesn't have
a handle on it,
it affords you the
ability to push it.
All physical objects
have this quality.
They afford you a different
way of manipulating them,
of interacting with them.
We learn this stuff
from our earliest ages
of childhood development.
It's how we interface
with the world.
So interface, it's
really important
in your user interface design
to think about this stuff
and be conscious of these
visual cues that we use
to understand how to
interact with things.
So with that in mind, I want
to draw your attention to this.
There's this blue rounded
rectangle in the background
of all this data that we saw in
the previous version of Weather
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and it was there for a
very specific purpose.
It looks a little
bit like a card,
like a playing card
right, business card.
The affordance of a
card when it's sitting
on a table is something that
you can take with one finger
and swipe it around, so it's
perfect to indicate to people
that they can do this.
And when it flips around
that feels natural.
Cards flip around.
It's really straight forward.
But there was a third
element which none
of us were familiar with,
which is this page control.
We had to learn the
meaning of that
and it was a really
easy thing to learn.
I mean it only takes
a couple minutes
but that didn't exist before.
So with that, do we need the
card to tell you you can swipe?
In fact, now swiping
is so natural for us
when we use an iPhone or an iPad
that we just try to
swipe everything.
We try to pinch everything,
rotate everything,
we play with it.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It feels comfortable.
We expect these gestures
to be there.
We don't need it.
We got rid of it.
It was an unnecessary
ornamentation
and as a result there
was more space to use
for displaying what really
matters here, the information
about the current
weather conditions.
It's amazing what taking
over that little amount
of space accomplishes, 640
pixels to display data.
So you can make text larger
and it be more legible.
You have room for
additional information
like the current
weather conditions.
Now that background does a
really good job of telling you
that it's snowing or it's
raining or it's going
to be sunny or whatever,
but if there's any ambiguity
whatsoever, that text nails it,
Takes all the guesswork
out of it.
So again information is
expressed as clearly as possible
and often times that's
done with text.
As a result Weather is a simple,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
beautiful app that's
really easy to use.
Its form serves its function.
It's a pure expression of it.
This is clarity in design.
Let's move onto the Compass.
Now I love the Compass app but I
want to start with a little bit
of discussion about realism.
Now this is going to be
a little bit redundant
but I think this is
kind of important.
The previous version of
Compass looked like this kind
of nice looking thing
that you would find
on a yacht or something.
I don't know, I've
never been on one,
but it was really
carefully crafted
and it was really attractive,
pretty, but was it necessary
to make it look like this
so that we would understand
how to use a compass?
Was it necessary to
design it this way
so you understood
what this was for?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
No. And did it limit what
was possible with Compass?
Yes. Let's look at why.
So in the center of the dial
there's this four points
adornment and this
capstone and that took
up quite a bit of space.
By getting rid of that we could
put a level right in the center.
That makes Compass more useful.
It's a direct tradeoff
between the desire
to have this ornamentation
and the desire
to have more functionality.
So the decision is really clear.
Making it more useful
is important.
As a result Compass
is clean it's elegant.
It's the expression of
what a Compass should be
on this device, not what a
compass should be on a boat.
And also when you turn and
face a different direction,
the letters stay upright
so they're more legible.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Again, if we had done this
with the previous Compass,
it would have totally
ruined the illusion.
Those two things are at
odds with each other.
A little bit more about color.
So you notice there's
this red color in Compass
and there's something really
special about that red.
That red is the same red
that we saw in Calendar.
It's the same red that
you'll see in Stocks.
It's the same red that
you see in Stop Watch.
It's the same red you'll
find in a lot of places.
This color pallet was designed
to be carefully balanced
to be clean and vibrant,
beautiful,
and our products use these
colors with great restraint.
You don't want to
just arbitrarily pick
different application.
It makes things start to
fragment and fall apart,
and that too applies
to your app.
If you use color, use
it with restraint.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Carefully select colors
that look really good
and don't just arbitrarily pick
different colors at random.
It's going to make your UI
feel fragmented, incoherent.
All right, Settings.
Now Settings is a great
way to see how all
of the UIKit controls
have changed.
So I encourage you to open
up Settings and play around
and look at some of
the different controls
that are there, but I want to
focus on three of those today.
Switches. Now Switches
have changed a lot.
Instead of using text to show
you that the switch is off
or on, you see there's
just a nice solid color
which is expressing
that information.
And the reason why that can
work is because it's consistent
with so many other controls
that you'll see in iOS 7.
Selection is shown in
this consistent way
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
so each control reinforces
how selection is indicated.
Date Pickers.
Now these have changed
quite a bit.
No longer do you see all of
this glossy, different colors
of blue, glass, inter-shadows,
highlights and all this stuff,
all this ornamentation.
What you see instead
is some clean text
which has been distorted
in such a way to suggest
that these are printed
on wheels and because
of that you get a sense that
you can just swipe these up
and down to change the values.
Kind of relates to this
concept of continuation.
Our mind has to make sense of
why these are being distorted
and we make sense
of it by thinking
about then as being on a wheel.
Now we don't need these
strong vertical dividing lines
to separate the values.
A little bit of negative space
will do the trick just fine,
and which value is selected
is really easy to see
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
because it's darker text,
it's right in the center,
it totally obvious.
You don't need that blue glass
to show you what the
current value is.
And as a result of
these changes,
it works really well inline.
You don't have to go to a
separate view to adjust the date
or adjust the value
of time in this case,
and that's important too.
Going to a separate view
means you lose your context.
Perhaps there's some
information in the previous view
that you need to make
the decision in the view
that you've just gone to and now
you're going to have to go back
and forth and memorize.
Displaying something
inline allows you to stay
in the context you were
in before and swiping up
and down is really easy.
This is an example
of a simple design
that has tremendous depth.
And finally, Back buttons.
Now, to get back previously you
would press on the Back button.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
That makes sense and you still
do that but now with the iPhone,
I don't have one on
me, I can't show you,
you swipe in from the left edge
and that allows you
to get back as well.
So let's look at how that works
but pay close attention
to the Back button.
See how it just slides over
and morphs into the title?
It's kind of an obvious thing.
So intuitive.
It clearly shows that
parent child relationship
and clearly shows you that
you're moving from one level
in the hierarchy to another.
It's really elegant.
I like it.
All right, Control Center.
Now, you've heard a lot about
Control Center, I'm not going
to repeat all of that, but I
want to talk about layering.
We can see here we've brought up
Control Center and we're looking
at the very top of that
and we know that we're
at the Home screen because
we can still see the app
icons behind.
That transparency it
provides this sense of depth
and the colors coming through
just reinforces that sense
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of depth, and that's
important because you bring
up the Control Center in all of
these different applications.
I brought it up here in Mail and
I know that I'm still in Mail
so when I dismiss the Control
Center I'm going to be back
in Mail or Compass or Calendar.
My context is maintained.
And you guys can apply
that to your apps too.
You can use layering
to bring in things
that people need quick access
to and then they're going
to dismiss and go back to
where they were before,
but their context is maintained.
It's really fluid.
It makes things really easy.
And it just looks pretty.
All right, last but not
least, the Home screen.
Now as we saw, the Home screen
has remained structurally the
same as it was before
and why not?
It's a really great interface.
So all the interactions about
deleting app icons and swiping
between Home screens
and reordering and that,
it's all the same, but
the icons have changed
so we'll spend a little bit of
time talking about these icons.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Gone are the heaviest of
textures, the stripes,
the light rays, the glossy
overlays and the photo realism.
The Safari icon, for example,
has been greatly simplified.
Safari is represented by a
compass and it doesn't take much
to communicate the concept of a
compass, to depict that image.
All you need is a red and
white needle, circular dial
and maybe some tick marks.
That's it.
If you start to add other stuff
it becomes busy and heavy.
So you don't need the
cardinal directions
of North, East, South and West.
You don't need the
globe background.
You don't need the
glossy overlay.
You don't need the
specular highlights
and the drop shadows
and all that stuff.
The result is a cleaner shape
that's easier to identify.
It's simpler.
There's less stuff
coming at you.
And when you see this along
a bunch of other app icons
that all have a bunch
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of ornamentation it
becomes hard to find stuff.
Now we've been providing
this advice for some time now
and now we're kind
of listening to it.
It's really nice
to find a clean,
simple shape and just one color.
Makes app icons stand
out really well.
And of course the color that's
chosen matches the tint color
from the applications.
You want to have that
kind of consistency.
Now, many of you might ask,
well, if you're simplifying,
getting rid of all
this ornamentation,
what about the gradients?
Why don't you just
use a solid color?
That's going to be
a lot simpler.
Well, perhaps, but it turns
out it's also really boring.
Vibrancy, life, that's
important.
Those are really
important values
and these gradients they add
that but in a subtle way,
but it still makes it so much
more visually interesting.
Now these icons they're
simpler but the approach
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to designing them
wasn't simplistic.
So to demonstrate, I'm going to
replay that video that we saw
at the very beginning.
[ Silence ]
It's kind of a nice video.
All of our app icons were
designed using this grid,
this template, to give them
consistency and composition.
So they're connected at
this really deep level.
This template, it's
really balanced.
I spent some time
recreating this and I got
to appreciate the subtlety of it
and why all the lines are placed
where they are and how
the circles work with that
and it's sophisticated stuff.
It's kind of cool.
I was impressed.
But as a result of following
this template our icons share
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
things like this blue dot
in Stocks aligns perfectly
with the corner of
that intersection.
The circular shape of the
Safari icon matches perfectly
with the iTunes Store
icon and the Photos icon.
Alright I'm running low on time
so I want to go quickly forward.
One thing to point out, you guys
should all be aware of this,
the app icons are now
a little bit bigger,
so you don't want
your icons to scale,
be best to deliver all work
at this size, 120 by 120.
So all of these icons
they have colors,
they have different features,
but everything was done
with great restraint.
If it didn't help to communicate
the meaning of the app,
what its function
was, it was removed.
If it didn't help to
differentiate one icon
from the next and help them
stand out, it was removed.
And as a result it's a
simpler set of icons.
It's easier on the eye.
So some final thoughts.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The values that were at the
heart of iOS 7 were clarity,
deference, depth and detail.
Let's talk about
those because I think
if you guys take anything away
from today it should be this.
It's really powerful stuff.
Clarity. We saw what
clarity meant in Compass.
It meant doing nothing more
than showing you information
and express functionality.
Nothing more and nothing less.
Deference.
Deference in Mail meant making
sure that text is large,
resizable, legible and
gorgeous, and photos are large
so you can see the detail.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Depth. Now I didn't
show this before
but I think this is really
cool so let's look at this now.
When you swipe up to see
the Camera and you let go,
see it bounces a little bit?
And it bounces differently based
on the height you drop in from.
You can even slam it down
and it really bounces.
That provides such a
sense of physical realism.
Makes it so much more
lifelike and believable.
You guys could do that too.
UI Dynamics, with
its physics engine,
is going to really enable people
to do some amazing stuff here.
The Home screen and the
way we have these distinct,
functional planes that are
separated from each other
and respond to the
movement of the device.
And detail, detail
brings it all together.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So you've seen what
it meant for us.
You've seen what these
new tools allowed Apple
to do with apps in iOS 7.
How are your apps going
to have more depth?
How can you use behaviors and
motion effects and transitions
and layering to improve the
experience of your apps?
How are you going to be more
deferential in your apps?
What do users care about most?
What's the content that's
most important to them?
How can you get out
of their way?
And clarity.
What's the functionality
of your app?
What's the information
you're trying to express?
How can you do a
better job of that?
How can you prioritize things
and make things simpler
for people?
Now, this is a really
exciting time
to be doing interface design and
talking about it and thinking
about it, for you
developers making apps.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
There's some amazing new tools
in iOS 7 and we've applied those
to the apps that ship
with the devices.
But we're just scratching
the surface.
There's 800,000 apps in the App
Store, 6 million developers,
some of the brightest minds
in the world are spending all
of their time, you guys,
you're spending all
of your time using all
of that brain power
to do some amazing
things with your apps.
What are you going to
do with this stuff?
It's really exciting because
we're at the precipice of that.
We're at the beginning
of a whole new phase
of software development
for mobile devices.
I have no idea what you're going
to make but I know it's going
to be awesome and I'm
really looking forward
to when we come back
together next year
and seeing what was done
over the course of that year.
It's going to be mind-blowing.
So go out there,
make some cool stuff
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and let's regroup in a year.
Thank you very much.
[ Applause ]
[ Silence ]