WWDC2013 Session 225

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[ Silence ]
>> Mike Stern: Good
morning everyone.
[ Applause ]
My name is Mike Stern.
I'm Apple's User Experience
Evangelist and I'm really happy
to be talking again today
about design for iOS.
Now, if you saw my
talk on Wednesday,
you heard me speak a
lot about the difference
between iOS 6 and iOS 7.
Well today, we're going talk
about Evergreen Design advice.
So this is advice that is
relevant if you're making an app
for iOS 7 but it was
relevant for 6 and 5
and every version
of iOS before that.
So, as many of you know,
we spend a lot of time
and energy creating
apps at Apple.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We focus on it, we
want to make sure
that user experience
is really fantastic.
And I've been a designer at
Apple for seven years and I know
at first hand how much care and
thought goes into the design
of each one of our
apps, and it shows.
Our users have come to expect
experiences that are intuitive,
engaging, beautiful, and
sometimes a bit magical.
And you guys heard all week long
about the great new technologies
that you could take advantage
of for designing your apps.
And I hope you guys learned
a lot and have come away
from this week really inspired
to try some of these new things.
But the thing I want
to remind you of is
that your users aren't going
to judge your apps based
on how many technologies you use
or how many APIs you integrated
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
or how elegant your code is.
The way they're going to
judge your app is based
on what enables them to
do, how it makes them feel.
So with that in mind, it's
really important that the design
of your app has the same
qualities of being intuitive
and engaging and beautiful.
And we saw on Monday,
some of the winners
of the Apple Design Awards, apps
like ProCreate, WWF Together,
Ridiculous Fishing,
Badland, Yahoo!
Weather, and Letterpress.
These apps, they set the bar for
high quality user experience.
I worked on this a little
bit and I got to see dozens,
hundreds of apps
that we considered
for the final selection and
it was a really tough choice.
There's so many great apps
being designed for iOS,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
many of them only for iOS.
But this is tough competition.
So how do you get here?
How do you start going
in this direction?
Now, I look at a lot of apps
all the time and I see some
of the same mistakes being
made over and over again.
And as we know, a lot
of apps get rejected
from the App Store
during the review process.
In fact, it's one of the top
three reasons why apps get
rejected-- why apps
will get rejected.
So, I'd like to head
that off at the pass,
try to provide some advice
to streamline the process
and prevent your apps
from getting rejected.
And in order to do that, got
a little ahead on myself,
we're going to look at 10
common pitfalls that I see over
and over and over again.
And the first one
is bad app icons.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So this is the first place
that most people are going
to encounter your app.
They're going to search for
something and your app is going
to come up in the results
alongside dozens and dozens
of other apps, and you have
to standout from the crowd.
This is a search for camera,
I just did this couple
of weeks ago.
And I bet there're some
icons here that are standing
out better than others, that
you noticed first immediately,
right when we got to the slide.
And that's not unlike
what happens
when you did the search yourself
at home on your computer.
Things are going to
draw your eye in,
and you immediately begin
to make a lot of assumptions
about the user experience of
these apps, so you'll look
at them and start to
make these inferences
about how enjoyable
they're going to be to use,
how intuitive the
interface is going to be,
how well it's going
to serve your needs.
And I think those are kind
of reasonable assumptions
actually to make from an icon.
I mean, if an icon looks great
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and it obviously was carefully
crafted, it's reasonable
to assume that the rest of the
design of the app is also great
and also well crafted.
But it goes beyond that.
People start to make all sorts
of other assumptions
about your app.
How good the technology is.
How secure your data is.
How performant it is.
Is it stable?
Is it going to have
functionality which is ahead--
you know, advanced better
than the competition?
So with that in mind,
an app icon is really an
important thing to focus on.
And what are the qualities
that distinguish a
really great app icon?
Well, there's two main things.
One, it's beautiful and I think
probably more importantly,
it's instantly recognizable.
So how do you accomplish that?
Well, there're six things
that I want to point
out that are important
to keep in mind.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
I think they distinguish
every great app icon.
The first, focus
on unique shape.
These four icons, they
do different things,
some are very simple
or with solid colors,
or just a clean gradient.
Others are a little bit more
complex but they all start
with this very basic
shape, and that allows them
to be recognizable
at a great distance.
So you guys in the back
of the room right now are
having a really easy time making
out what the shape of these
icons is, and that's important.
Icons are seen at
all different sizes.
You know, it's not just the
size you see in the store,
it gets smaller on the
home screen and smaller
on the notification center
and it's really small
inside the groups.
So you have to make sure
that the imaging you choose
for your app icon is kind
of reduce really well
and be clear at any size.
The next step is to just
choose a limited pallet,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
one color, maybe two.
Now, there're app icons that
have much more than one color
or two but it's really
complicated to pull off right.
We'll see an example of it in
a few moments and I'll point it
out when we get there,
but notice these icons,
just really one color and
it has variations and tone
but they stand out,
they're not fragmented.
Now, the next one is to
avoid using photography
in your app icon.
I've seen it a number of times
and it never works
out well in the end.
So let's take for example,
you're making an app
for wine lovers, to take notes
about the wines they like
and share with others.
So you might be tempted to
start with something like this,
nice glass of red wine
and you just crop it,
put some rounded corners on
it, throw a gradient over it.
Does anyone think
that looks good?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Looks terrible.
So you-- but, you know,
if you want your icon
to have these features, that's
fine, just illustrate it,
take it to the next level,
hire a good app icon designer,
who can pull this off well.
And that's exactly what
the people at Sipp did,
hired a really talented
designer named Eddie Lobanovskiy
and he made this fantastic
illustration for their app icon.
It has the same elements as that
photo, it's got the red wine,
it's got the glass, it's
got the wood texture
that evokes the barrel, but
the composition is really solid
and it's also really creative.
And these are two values that we
cherished at Apple, creativity
and attention to
detail, and of course,
the way that red wine swishes
around and forms the letter S,
the mnemonic device to
connect with the app name.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
All right, so the next one
is avoid a lot of text.
In fact, if you can get
away with having no text,
that's probably the
right thing to do.
So, let's take a made-up
example to illustrate a point.
This is for a fictitious
hair salon and make
up studio called Fuzz.
Now, you can have
an icon that's--
a logo that's this complicated
and it might work really well
in website or in marketing
collateral, on a billboard,
but when you reduce it
down to use as app icon,
it starts to break down
very quickly especially
when you start to think
about all the smaller sizes
that people are going see then.
So that was a fake example.
Let's take a more real example.
A lot of you guys use this app.
It's a great app,
ness, you can use it
to find restaurant
recommendations
and they have very customized
personal profile based
on your own preferences.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And they have a really fantastic
logo that's actually really
simple, not nearly
as complicated
as what we just looked
at before.
And they could've maybe just
taken that and reduced it
and used it as an app icon.
But that wouldn't
have been good enough.
What they chose to do
instead was to pull
out just the heart and use that.
It's a really simply shape.
Now I was going to call this
out when I was talking
multiple colors,
and you can see there
are multiple colors here
but the composition of the heart
really holds that altogether.
So even at small
sizes, it works well.
I've had this app on my
phone for a number of months
and it always catches my
attention, it really stands out.
In fact, you see a lot
of companies doing
this sort of thing.
So for example, Pocket, they
have that little pocket icon
with the down arrow and they
use that as their app icon,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
it works really well,
or Pinterest
with their P that's kind of
like an abstract pin or the S
for Snapguide and
the V for Vine,
there's some patterns here.
But the reason why
there's this pattern is
because this works really well.
Now, of course, they bring in
the color from their brands
to give it some unique
personality
and they work well
on the home screen.
Alright, next up,
accurately portray materials.
Now this might be a little
bit surprising given some
of the changes that
have taken place,
but sometimes materials
are really important
for your app icon.
App icon is the ability
to be expressive
to demonstrate your unique value
and personality of your app.
So let's look at Paper.
I mean, the name of
the product is Paper.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So it would be sort of odd
if your icon didn't look
like it was made from paper.
Paper is this brilliant
drawing and painting tool
which won an ADA last year and
it's got these amazing brushes
and you can-- anything you draw
is going to look beautiful.
And so, they demonstrate
that by these careful washes,
the watercolor layered
on top of layer of color.
They have the crease of
the paper which connects
to the journals that you
see inside of application.
It's a really nice icon.
And this icon, from
Square Wallet,
it's kind of that hologram
thing that you used
to see in credit cards.
I don't know if they still have
them but this is beautiful.
And I know it has
a lot of colors
but it has an overall color
of the sort of cool blue tone
and it's got a really
distinct shape,
it's got these concentric
squares
so just it pops really well,
it's easy to make this out.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
If you're going to go
for a texture like this,
this holographic paper,
you really want to sell it,
you really want to nail it,
and this icon does that.
Now, this icon from 1Password
and 1Password stores
all your passwords,
obviously that's pretty
sensitive information
so you want to get a sense
that that data is secure,
and this icon conveys that
by looking like a lock or--
sorry, a safe, you
know, it feels strong,
it feels impenetrable.
So, it's communicating
these emotional reactions
or it's eliciting these
emotional reactions in us
and we see it and that's why
they use these materials.
But, again, it's
really realistic.
And finally, I came across
this icon when I was looking
for some examples
to show you guys,
and this is for an
app called LifeKraze,
it's kind of a cool app.
You set some personal goals and
then you have a team of people
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
who are in your social
network and they cheer you on
and in turn, you cheer them on.
And I didn't a get a chance
to confirm this with them
but my interpretation of this
is that it's meant to be kind
of like a team Jersey
or sponsorship kind
of thing, embroidery.
But look how amazing
this icon is.
I mean, the texture of the
string, the embroidery,
I'm not even sure
how they made this.
[laughter] I've been at
this for a really long time.
I want to go out there and
figure out their trick.
So this is brilliant.
Again, this is highest
level of artistry.
And finally, be creative.
I can't emphasize this enough.
You try to stand out from
the crowd, you're trying
to stand out from the rest.
So take for example this icon
for an app called Routesy,
it gives you information
about local Muni Transit
timetables and such.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This looks like the
old Muni Passes.
It's really nice,
it looks pretty.
This icon from Hipstamatic.
You guys are familiar with this?
Or Evernote Food?
Or this icon for Brewski Me.
I mean, look at the
perspiration on the glass,
in a way that frothy
head foam is
about to just fall
over the edge.
It's really dynamic.
It has a lot of good
characteristics
that we look for
in illustration.
And yet, while this is a
really complicated rendering,
it's actually kind of simple
and when you pull back from it,
you see it's just a big area
of yellow color in the center
with a nice white outline,
stands out really well
from multiple backgrounds.
Anyone thirsty?
I became a little thirsty.
So these are really
creative icons.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, we'd looked at a range
of icons and I'm going
to show you all the way
for a new phone icon.
It couldn't be more simple.
Just a simple shape and a
gradient up to something
which is a little bit more
complicated all the way
to something which is this
really detailed illustration
for Sip.
And these are all valid
approaches to designing icons.
They work well for their
respective products.
Alright, next bit of
advice, please make sure
to check your icon against
multiple backgrounds.
It's really tempting, a lot
easier, in fact, to just test it
against a black background.
But a lot of times, you can't--
you have to account for the fact
that these icons are going to
show up against who knows what.
And also, put your icons into
a group and then collapse
that group and evaluate
how well it's working.
So, I'm going to show you
really a cool case study.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This is for an app
called Turnplay
and the design work was done
by a company called Ramotion
and what Turnplay is, is this
fun little app that allows you
to play your MP3 files,
whatever your music files
as though they were vinyl,
and that's the whole
sum of this app.
That's what it does and
that what makes it unique
and special.
So even when you
select your songs,
they have the sleeves
for the vinyl.
And then this is the turntable
interface that you see
when you're playing a record.
This is not a photo.
Every pixel here was hand-drawn
in Illustrator then
in Photoshop.
I mean, this is an exquisite
rendering of a turntable.
So when it came time for
them to make an app icon,
they knew they needed to connect
to those characteristics.
They knew they needed to
demonstrate the beauty
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of that turntable
interface but they also had
to get the symbolism
of the icon right,
and so Ramotion started
with sketches.
Now, there's a lot of different
approaches to making icons.
You could start in a 3D
rendering tool, you can start
in Photoshop, you can
do whiteboard drawings.
In fact, that's-- my team
used to do a lot of it
when we started app
icons for Apple products.
But they started with paper
sketches and the team set
out to work out all
these different ideas.
And as you could see,
they explored a lot
of different things.
All these of icons have a
vinyl record at the heart of it
but then they tried
different compositions,
adding different elements,
you can see the hands here,
the styluses, different
orientations,
a lot of them are top-down but
this one second from the right,
is at a 45-degree angle,
and sometimes the record is
floating above the platter.
Sometimes, there's a-- the hint
of an audience in the background
or the dot pattern
from the platter
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to tell you what tempo you're
playing your record at.
It's really antiquated
technology.
How many people have
heard of a turntable?
So, they tried all
these different things.
They even tried to do what
we were looking at before,
which is to take the first
letter of their app name, the T,
and integrate that into
the design, and they came
up with some pretty interesting
ideas on how to accomplish that.
By starting with sketches,
you're not thinking about color,
you're not thinking about
materials, you're thinking
about the core element
of the illustration
which is the composition.
It's really important that
your composition is solid.
So they kept going, tried out--
I don't know what the
fingerprints thing is.
I know you get fingerprints
on vinyl.
I'm glad they didn't
go down that route.
And finally, they started to
kind of lock in what they wanted
to do and eventually,
they got to this.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Really simple, right?
Turntable, play, and you can
see they started to think, "Oh,
we're going to have this play
icon in here" but it's going
to be like this little sticky
label that goes on the record.
But these are concentric shapes.
They're really powerful.
This is a strong form
in and of itself.
Only from-- only when they
had that did they to start add
in some of the detail.
They started to add
in gradients.
They added in the dot
pattern around the platter
but they didn't make
it totally accurate
because that would
have been a mess.
I mean, it just would have
been too much detail to work
at any size, even 1024 square.
They kept adding in a
detail, adding in detail.
They gave that play icon that
papery texture so really knew
that it was supposed
to be paper.
Shading, highlight.
With each successive
version, it really started
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to come together more and more.
But never losing sight
of that basic shape
that they had started with,
and it works well at all sizes
because they stuck to that,
they stuck to that basic shape.
Alright, so that was a
lot of stuff on icons
but it's probably the most
important thing to get right
when it comes to visual design.
Let's move on.
This is Forced Registration,
and for the example,
this actually was
shown last year.
But a lot of apps do
this kind of thing
where they give you two options.
You open the app and they
ask you to sign up or sign in
and a lot of people hit the Home
button and delete the app icon.
People hate this which is
why it's mind-boggling to me
that it still happens,
but it still does.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So let's look at a case study.
This was an app called Fondu.
They used to be in App
Store, they're not anymore,
they've been acquired by Airbnb.
So all the stuff
I'm going to show
that they did obviously was
very successful for them,
but they used to
make you sign up.
It's a social networking
food app.
And they realized that
weren't getting the uptake
in people signing
up and registering
because they would
just do what I said,
they would leave right away.
They didn't know the
value of the app.
So instead, they completely went
away and redesigned their app
to show a few screens
right off the bat,
where you can see
something about the features
and understand what
purpose this product serves,
and only when you got to the end
of it where you given the choice
to sign up or to sign in.
But even with that, they
allowed a third choice which was
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to continue forward
and get a taste--
this is a nice little
bit of copy--
and you can use public
features of the app,
and so you really
would get a sense
for why this app had value,
what was interesting about it.
And I recommend that if
you're in a similar situation,
you should do the same thing.
You want to allow people
to try before they buy.
As a result, they had
a 42 percent increase
in registration shortly after
they made these design changes.
As we talked about, they
eventually got acquired,
so do what they did
and allow people
to use your product
rather than forcing them
to registrater right
off the bat.
All right, so that was
forced registration.
The next pitfall
is Tiny Controls.
Now, this is how we could
have designed the WWDC app.
We could have made text smaller,
we could have made the rows
smaller, little date switcher
at the top, all the buttons
and the nav bar, but instead,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
this is what we actually
shipped.
Things are-- have
normal metrics,
they're a lot easier to tap.
If you have greater density
and really small tap targets,
it's hard to aim
so that slows you
down as you're pointing your
finger towards the screen,
it makes you more conscious
of what you're doing.
So while you might see more
stuff on screen at one time,
your app becomes harder to use.
It's much easier when you have
really easy to tap targets.
You have to design your
products for a fingertip.
I'm surprised when
I see some apps
that have these really
small tap targets and things
that are crammed together.
It looks like it was designed
for someone who has a cursor.
So as you'll see, if you might
read on the HIG, we recommend
that controls are 44 points
tall, and you'll see that over
and over again in the
controls that we have.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, this number, 44 points,
this goes back, this isn't new
to iOS 7 even though I'm showing
an iOS 7 screen right here.
The metrics for a lot of our
controls have stayed the same
because the size of our
fingers have stayed the same.
So you'll see it
over and over again.
Nav bar 44 points,
toolbar 44 points.
Even the little callout
for the map is 44 points.
Now, if you have additional
space like we did for calendar
in iOS 6, make your
controls bigger,
it just makes them
easier to tap.
And we've updated calculator
and now these controls
are bigger still,
so they're even easier to tap.
And some apps you use
when you're moving around.
This is a Cycling app by Strava,
it allows you track your ride
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
through GPS, and you
want to be able to start
and stop this while
you're on your bike
and while you're moving.
So this button that
they have for doing
that is 120 points in diameter.
It's really easy to tap.
I wouldn't be surprised actually
if the tap area is bigger
than the size of the button.
And lastly, when you're
evaluating whether
or not a control is large
enough, test it on your device.
There's no substitute for that,
you can't make this decision
just sitting at your desk
and tapping the interface
of the phone.
Go outside, walk around,
use it as an opportunity
to do something healthy, stretch
your legs, get some fresh air,
give your eyes a break, maybe
hold a cup of coffee in one hand
and try to use your phone, and
see how that works for you.
Think it'll be educational.
All right, the next common
pitfall is Hard-to-Read Text.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, this is how our WWDC
app could have looked
if we were cruel and insane.
[laughter] But why is
text hard to read here?
Well, it's hard to read because
the colors are too saturated,
they're too bright.
The font that I chose, it's not
bad per se, but it doesn't work
at a small size,
that script font,
it's way too small,
can't make that out.
This would have really
stoked the rumor mills
about the new design of iOS 7.
[laughter] We probably
should have done it.
So this is something a little
bit more plausible, right?
I see some stuff more like
this on a common basis
and the problem is
just low contrast.
A good metric to use is that
the contrast between text
and background should
be at least 50 percent,
maybe 60 percent in brightness
which is kind of a hard thing
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
when you're talking about
different colors like red
against yellow or something
like that but if you were
to desaturate your image and
then measure the colors of gray,
that's the kind of delta you
want between the color values.
So this is the actual
design for the WWDC app
and you can see here the
text is basically black
and the background is
almost totally white.
So it's really easy to
read and, of course,
the fonts are a nice,
legible size.
On Wednesday, I talked about
this screen in the context
of type and I want to bring it
up again because for one thing,
while there's a lot of different
sizes of type and weights
of type, which is really
important for establishing,
communicating information
hierarchy,
calling out which things are
more important than others,
it's all the same typeface.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And that adds to a sense of
coherency, it all fits together.
We didn't just throw
a script font in here.
Now, I really recommend
that you do the same thing.
You can mix and match typefaces,
that's actually an extremely
difficult thing to do.
I don't do it 'cause
I don't think--
I usually don't think
it's very successful.
I don't know how to
pull it off very well.
So we have all these different
styles of type and again,
another plug for dynamic
type 'cause that's how all
of this was made.
This is really good way to go.
If you use this, you're
going to have great results.
Now, the other thing
is we have large blocks
of text they have mailed
from both the 6 and 7 here.
And previously, we would
recommend as a baseline
that your fonts are 15 points or
higher if you have large blocks
of text that people are going
to need to read for a while.
Now, that's changed a bit.
We can't just say
make it 15 points.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, with dynamic type,
it's all scalable.
So these really mean,
what size of body text?
But this is the default
size which is large
and as you can see,
the font size is larger
than what we have before,
and that's something
that we talked a lot
about on Wednesday
which is the importance
of legibility
and I think even what we were
doing before, our minimum size
for fonts, for body
fonts, was too small
and the decision was made
to up it just because it's
so much easier to read.
Now, another important
thing about text is
that you want to have alignment.
Alignment provides structure.
It's the key to making an app
UI feel aesthetically balanced
and organized, easy to look at.
But beyond that, it makes
it easy to scan text
and find what you're
looking for.
This UI is static now but a lot
of times, when you're looking
at this, you're swiping it
quickly and you're scanning
for text, you're trying
to make out, you know,
I'm looking for text from Paul
Brennen or Michelle Humphrey
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and you have to be able to
see that even as it's moving.
Alignment is the key to that.
And another important
about text, again,
you'll see a left
alignment, it's very clear,
just like before, is
breaking up your content.
Don't just slam stuff
together because you want
to cram more stuff on the
screen, onto the screen.
You need to break up the
text the people are seeing.
It helps you to see connections
between disparate lines of text.
So these phone numbers
are grouped together,
so I understand that whole
areas about phone numbers
which is separate from FaceTime,
separate from sending a message
or looking up someone's
address on the map.
Negative space is
the key to that.
Use it well, use it liberally
and if it's not enough,
use separator lines to even-to
draw even clearer separations
between different
lines of texts.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And again, test on a device.
The reason why I'm
bringing it up now is
because when I'm talking
about contrast, when you look
at something indoors, it's
really easy to see all
of the nuances of the
different shades of color.
When you walk outside,
things are very different,
colors just compress into each
other, becomes hard to tell
that there's differences.
So you really want to make
sure that you're evaluating
if you have sufficient contrast
by walking outside and not
at night but at 2:00
in the afternoon,
when it's really
bright and sunny.
And also, there's a lot of great
tools available for helping
to look at UI and
analyze things.
LiveView is one of the
oldest, it allows you
to just take a design
and send it to a device.
Skala View is a great tool.
xScope Mirror has a lot
of pixel levels instrument
measuring stuff.
Screenshots Journal
also awesome.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
All right, next Ambiguous
Alerts.
So we've all seen things
like this, maybe we had it
in an earlier version of our
app just for kind of debugging
and testing and sometimes
this app makes it
through to the final app and
this isn't helpful at all.
You have no idea
what's going on.
This isn't a real one.
I've changed the names
to protect the innocent.
This is a classic, again,
this is real alert
that's-- has existed.
What are you suppose to do here?
[laughter] Catch-22.
So be conscious of that.
This also, obviously it's
funny because, you know, well,
you guys all got the joke,
but this also demonstrates
something really important
which is that OK,
it's on the left
and you never want to do that.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You always want the affirmative,
the forward moving
action to be on the right.
Now, the best alert is no alert.
Alerts are really meant to call
your attention to something,
you know, something that
needs your attention
and it makes you aware
of that by popping
up this whole thing
in front of you.
But oftentimes, that's
unnecessary.
So if we showed an alert
every time mail was able
to successfully update
its contents,
that will get pretty
annoying pretty quick.
So we just have some
status text that tells you
when it was last updated.
Try to do that.
Try to integrate information
that's updating and changing
into your app UI if you can.
This is from iOS 6.
This is a really valid point.
When you bring up an
alert, label your buttons
with the action that
they're going to perform.
People are using your
device-- people are--
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
we're all using these
devices and we're distracted
and we get a phone call, we
might not be paying a whole lot
of attention, we might
of skim the question
or the message that's
in the alert but we have
to press the button and that
usually focuses our attention a
little bit more.
So if we read some text
about the resulting actions,
then it's going to be
a little bit safer,
it's more of a guarantee
that people are going
to make the right choice.
And while we're talking
about that, we should avoid
if at all possible, simple
button labels like Yes
and No or OK and Cancel.
If you can get more
specific, please do that.
It's really helpful
for your users.
Now, if you've been paying
really close attention on iOS 7,
you've actually noticed
that that this particular
alert has changed.
We added the option to
snooze when you get an alert.
And rather than cramming
too many choices,
rather than presenting the user
with too many choices
right off the bat,
you're given two many
options, just say OK,
or to look at what options
are available to you and then
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and only then do we show
Snooze and to View Event.
But again, you can see these
labels are very specific
about what actions
they'll perform.
All right, and I already
talked this a little bit
but put the affirmative
action on the right.
Now, there's a bit of a
disagreement between Apple
and Microsoft about what the
right approach is to do here,
and in fact, sometimes I chuckle
when I go to an ATM or I look
at a website that has this
kind of buttons and I see OK is
on the left or Yes
is on the left.
I know that the designer
who made it is using
a Windows machine.
That's what they're used to.
Now you will too.
And I don't know if we're ever
going to see eye to eye on this.
I hope that Microsoft will
come around and see the error
of their ways but it's
been a couple of decades
so I'm not going
to hold my breath.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So in the meantime, just
recognize that the people
who are using your
apps on iOS are used
to a particular button order.
They're used to the affirmative
actions being on the right,
the forward moving
action being on the right.
And then finally, sometimes an
alert is not the right thing
if someone's about to perform
a potentially destructive
or harmful action.
If you delete this
photo, it's gone for good.
So it's really important
that users are aware
of the consequence
of their actions.
So use an action sheet
in cases like this.
And be sensitive to the order
that you're putting
these buttons in.
The most harmful, the riskiest
action should be at the top,
it should be the furthest away
from where your thumb is if it's
at the bottom of the device,
and it should also colored red
to give you that
reminder, that warning
that there might be
something harmful.
OK, next up, Out-Of-Place
terminology.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, a big part of making
apps, really easy to use,
really intuitive for a
broad range of users is
to not use jargon, not
use technical terms.
And it's hard for us to remember
that because we're still
comfortable with that language.
We use it all the time and
sometimes these terms are--
allow us to speak
with precision,
clarity amongst ourselves.
Not amongst the general
population.
So we could have called
Airplane Mode Cellular Baseband
but no one would
know what that meant.
Equally, we could have said
Add New GPS Indicator to Map,
but instead, we just
said Drop a Pin,
so much simpler, makes sense.
There we are.
Everyone wave.
And if at all possible,
avoid referring to the files.
iOS tries to obfuscate
the underlying file system
as much as possible.
So in Numbers, they don't
talk about untitled.numbers
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
or Create a New File, it's
Make a New Spreadsheet.
Next up, avoid Excessive
Branding.
I see this all the time.
I really do.
And if you show me your app
and it has a logo in it,
you're hear an earful about
why I think that's a bad I idea
because it's usually, the
logo is usually placed
in the nav bar, right
at the top,
right where the title should be.
So, again, WWDC app.
We could have put
the logo up there
but we don't want to do that.
It's a terrible idea
because that space is needed
for showing a title to tell
you what you're looking at,
tell you where you are.
My advice when people say, "Hey,
you know what we
put the logo there
because we think it's important
for building brand recognition."
I said, "That's the
wrong approach in iOS."
Sometimes you see a logo
showing up and you get the sense
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that people are thinking
about their app is
though it was a website.
And with a website, showing
your logo actually serves a
functional purpose,
utilitarian purpose.
People can come to your
website from any other place,
though a link or wherever and it
helps them stay oriented to know
that they've gone from one place
to another, know where they are.
But that's not the case in iOS.
In iOS, someone presses your
app icon on the home screen,
they saw your logo
probably at that juncture
and the whole experiences
of your brand.
And if you're now showing
them a logo in place
of showing them some
information which is going to--
the title, which is going
to help them stay oriented
and know what they're
looking at,
then you're degrading their
user experience so they're going
to have a less positive
experience of your brand.
All right, enough about logos.
Uninformative back buttons.
If at all possible, please
label your back buttons
with something informative.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We don't do this.
We're in Settings and this
back button just says Back.
The error tells me
it's a back button.
I don't need text to tell
me I'm going to go back.
Now, I see a lot
of this and a lot
of times the explanation
is that, well,
we don't have enough
space to display the title
of the parent view, but
look at changing the title
of the parent view or the
child view to make that space
because it's a really
important way to allow people
to have context, to
know where they are.
All right, there's a connection
between the back button
and the title of
the previous view.
And what's more to iOS 7, we
have this really nifty animation
that makes that connection
very clear.
So if your back button
said Back,
this wouldn't work very well.
So, for example, if we just
said Back here, we wouldn't know
where we're going to back to.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We're looking at the info for an
event but where would I go back
to if I press that button?
Now, in actuality, what
we have is sets of events.
I'm just going to point
this out a little bit
because there's actually no
title in that parent view.
It's a segmented control
for filtering favorites
or just showing every event
for the schedule this week.
But it does connect to
the tab, the Events tab,
so it still makes sense.
All right, that was
the Back button.
Onto the second to
last common pitfall
which is Confusing Animations.
Now I see this all the time.
This is Stocks, and when you
bring up the settings UI,
it animates up, slides up.
And when you dismiss
it, slides down.
It's really basic,
really straightforward.
It's symmetrical.
It makes sense.
So now, when it comes again,
we're going to figure it's going
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to come up from the
bottom because that
where it seems to have gone to.
It's persistence.
We imagine it'll still be
there down at the bottom.
Sometimes, things will slide
up and then they keep on going.
Where did they go?
Apparently, they're going to
fly all the way around the world
and come back to the bottom
so that they're there
the next time.
Sometimes, you slide up the
Settings and you dismiss it
and it just disappears.
That doesn't feel right.
It feels like they just forgot
to do the animation to go away.
Sometimes, bring up Settings
and you get something
totally different.
This is-- I picked this one
because Keynote let me do it.
And an iris wipe, that
might have made sense
but it should have come
on in the same way.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
OK, it would have been a
really bad idea no matter
but you guys get point.
And then sometimes, you just
get gratuitous animation.
It's distracting.
It's unnecessary.
All right, enough
about animation.
So I'm going to end on
Inappropriate Styling.
Now, there's a lot of apps
that have a very distinct
visual style for them.
They might have some real world
materials like wood or fabric
and maybe you're making an app
that's for high school students
who are learning
about woodworking,
learning about carpentry.
So maybe the appropriate
background is a wood,
kind of cartoonish texture,
it makes total sense.
It'd be appropriate.
But the key to understanding how
to stylize your app
appropriately starts
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
with understanding
your intention.
So in everything I just said
right now, I had a picture
of who the app was for.
I limited it down to
particular age group
who had a particular set of
interests, and I picked a style
that was relevant to them.
That made sense.
It was a logical fit.
So let's look at some examples,
I think, of appropriate styling.
This is the UI for ProCreate,
one of the ADA winners.
I feel like I'm shilling
for ADA winners.
This is an appropriately
styled app.
It's a wonderful app.
Now every aspect, every decision
that they made around the design
of their UI was done so for
a very specific purpose.
This is a real tool
for real artists
and real illustrators
to do real work.
And that user base, they have
some very specific needs.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You want to make sure that
your UI doesn't distract
from your ability to see all of
the great details in the drawing
that you're making, so it's
dark, doesn't interfere
with that, doesn't jump
out in front of it.
And I talked about that
on Wednesday, deference.
This, I think, displays that
characteristic, it's deferential
to the user's content.
And it's got a texture to
it but the texture is matte.
If they went with
something glossy,
then they would have these
horizon lines in the reflections
and it would add to the
noisiness of the UI.
So it's appropriately styled.
Let's look at another example.
WWF Together.
Beautiful app and the theme of
the app is based on origami.
You'd make these origami animals
and then you can share those
with your friends on
Facebook or email or Twitter.
And they took that feature,
they took that concept
and they applied it and
used it as the style
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of everything in the UI.
So this menu system, it
unfolds like pieces of paper,
and the background, it's a
little bit hard to see here
but it's got this
triangle shapes different--
subtly different variations of
light gray to really reinforce
that idea that this
is unfolded origami.
And it totally works.
This is an appropriate style
and it's totally unique.
It made sense, it's original.
Really original.
So imagine, if WWF Together
looked like ProCreate,
it was dark serious app.
Would that work for the purpose
of WWF Together or visa versa?
You would want ProCreate
to have this bright white
origami interface.
It'd be really distracting.
So let's look at a specific
example of something
which would be an
inappropriate style.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So this is photos from iOS 6.
If it had a wood background.
Now, at first blush, this
might look really pretty.
I think it's a nice texture,
I mean there's nothing
wrong with that texture.
It looks awesome.
But it competes with
the photos themselves.
It interferes with your ability
to see clearly the content
that you care about.
It's not deferential.
So the real UI for iPhoto on iOS
6 or for Photos on iOS 6, sorry,
just has a plain
black background.
That's not really a theme
per se but it makes it easy
to see the photos and that's
what's really important.
So, again, you have to
think about your intent.
Now, that's generally good
advice for anything you do
and especially with
design of your product,
but that's just the first step.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So, the designers of ProCreate,
they probably started saying,
"OK, who's our app for?"
It's for artists.
"But what do they need?"
They needed a UI which
is functional, efficient,
gives them quick access
to tools, doesn't distract
from the content that
they're creating.
Well, what works for that?
Dark palette.
Let's look at some similar
apps, what did they do?
What are the characteristics
of those apps?
So there's a progression of
considerations that you have
to go through but nowhere
in there is an allowance
for saying, "I just
like wood textures.
I think it looks pretty."
You have to avoid doing that
and think about something
which is appropriate
for your users.
It makes sense for
them and your product.
So those are the 10 common
pitfalls that I see all
of the time in iOS apps.
If you can avoid doing
these things, you're going
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to be in really good shape.
So, I'm just going to
give a plug for the HIG.
I'm just really scratching the
surface with these 10 pitfalls.
There is wealth of
fantastic information here
which you can use to reference
and learn all about how
to use controls and what rules
to follow, what things to avoid.
I really urge you to read it, it
can be kind of dense at times.
I know it's not the most
approachable document
in the world and we're working
on that, but it's fantastic.
I've been designing
for many years.
I worked with people who
are equally experienced
and we're always
referencing this document,
we're always pointing each
other in the direction
of some particular passage which
gives us guidance about how
to do our job correctly.
I have some final thoughts.
Actually, I just have one
final thought, which is focus.
Now, when we were designing
the WWDC app, we could have put
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in all sorts of great
features, or all sorts
of additional features like
the ability for you developers
to network with each other
or to check the current
weather conditions
or provide a guide for,
you know, restaurants,
clubs or whatever
in San Francisco,
but we didn't do those things
because it would've detracted
from our core focus
which was to add videos
and to integrate Passbook.
And we have a team of some
pretty capable engineers
and designers who
are working on this,
but despite that,
this is hard work.
And in order to make those
features really work great
on the app, we had
to concentrate on it
and not get distracted by
doing all these things.
And that's my advice to you.
It's to not bite off
more than you can chew.
Figure out what your app can be
really great at and it's going
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to just be one thing or two
things, and then devote all
of your energy to making
sure that that's rock solid,
that that's a better feature
than anyone else
in your category.
It's hard work.
Some of the things
we looked at up here,
they're not easy to achieve.
In fact, a lot of
times, it's important
to recognize the limit
of your capabilities.
Hire a designer to
do your app icon.
Hire a designer to do
your app interface.
This is complex stuff to really
get right, but if you want
to stand out on App
Store, if you want your app
to be really successful,
that's what it takes.
So, again, focus on
what you can do well
and knock it out
of the ballpark.
That's all I've got.
Thank you very much.
[ Applause ]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000