151: Little Touches
00:00:00
◼
►
Welcome to Under the Radar, a show about independent iOS app
00:00:03
◼
►
development.
00:00:04
◼
►
I'm Marco Arment.
00:00:05
◼
►
And I'm David Smith.
00:00:06
◼
►
Under the Radar is never longer than 30 minutes,
00:00:08
◼
►
so let's get started.
00:00:10
◼
►
Today, we want to talk through little details
00:00:14
◼
►
that we add into our applications that
00:00:17
◼
►
are, in many ways, invisible, at least at first pass.
00:00:22
◼
►
But I think they're the kind of details
00:00:24
◼
►
that you can add to an app that, in aggregate,
00:00:27
◼
►
dramatically improve the feel of using it.
00:00:33
◼
►
And we have a whole bunch of examples for what
00:00:35
◼
►
these are like and the way to think about them.
00:00:37
◼
►
But I feel like so often, when you're solving a problem,
00:00:41
◼
►
there's the big problem that you're trying to solve.
00:00:43
◼
►
You're trying to count steps.
00:00:44
◼
►
You're trying to play podcasts.
00:00:46
◼
►
You're trying to track sleep, whatever it is.
00:00:48
◼
►
There's this big problem you're trying to solve.
00:00:50
◼
►
And there's the big chunk of work
00:00:52
◼
►
that is just trying to solve that problem.
00:00:56
◼
►
And then there's the more aesthetic, big D design aspects
00:01:00
◼
►
of that, because you can solve the problem in a variety of ways
00:01:03
◼
►
and the way you present that to the user.
00:01:04
◼
►
And there's a bunch of choices you
00:01:06
◼
►
have to make that are how you will communicate that function
00:01:09
◼
►
and utility to the user.
00:01:12
◼
►
And then there's these teeny little bits,
00:01:15
◼
►
these little bits of code, little touches, little things
00:01:19
◼
►
that we can do to our app that I feel like have--
00:01:23
◼
►
at least for myself-- I enjoy making
00:01:25
◼
►
these far more than most of these little things.
00:01:28
◼
►
It's not Easter eggs in the traditional sense,
00:01:30
◼
►
where it's something like some secret thing
00:01:32
◼
►
that if you tap four times in the corner
00:01:35
◼
►
and then tap on the other corner, something happens.
00:01:37
◼
►
It's not that kind of thing.
00:01:38
◼
►
But it's a little detail that is subtle but effective
00:01:44
◼
►
and makes sense for what you're doing,
00:01:48
◼
►
but is something that users might not necessarily notice.
00:01:51
◼
►
And the one that I wanted to start off talking about,
00:01:52
◼
►
and I think we can get into, but just
00:01:54
◼
►
a good grounding example for this,
00:01:56
◼
►
is in Overcast in the last update,
00:01:58
◼
►
I noticed that you changed the sleep timer icon from an alarm
00:02:03
◼
►
clock that was just static to an alarm clock that
00:02:06
◼
►
shows the actual time.
00:02:09
◼
►
And it's one of those very subtle things
00:02:10
◼
►
because it's not like there's a second hand that's
00:02:14
◼
►
sweeping around.
00:02:15
◼
►
But the hour and minute hand are always
00:02:16
◼
►
pointing to the correct time.
00:02:17
◼
►
And I believe when you start the sleep timer,
00:02:19
◼
►
it also shows-- it shades in the period of time
00:02:22
◼
►
that the sleep timer's going to be active, I think.
00:02:24
◼
►
Right, exactly.
00:02:25
◼
►
Yeah, but that kind of a detail where
00:02:27
◼
►
there's no reason necessarily for the sleep timer
00:02:30
◼
►
to be a dynamic icon.
00:02:32
◼
►
But the fact that it is just dramatically increases
00:02:35
◼
►
the-- it's like that little touch.
00:02:36
◼
►
And as soon as someone notices it,
00:02:38
◼
►
I think it endears them to your app in a way that
00:02:40
◼
►
is just kind of cool.
00:02:43
◼
►
I mean, it's sort of in the same way that in iOS,
00:02:45
◼
►
the calendar icon for years has always
00:02:49
◼
►
changed to show the current date rather than a default date.
00:02:54
◼
►
Because I think otherwise, what, it shows the 14th
00:02:58
◼
►
before it's launching?
00:02:59
◼
►
I think anyway.
00:03:01
◼
►
I think it was the 14th.
00:03:02
◼
►
There's all those kind of fun special dates and times.
00:03:04
◼
►
But anyway, it shows you the current date.
00:03:06
◼
►
It doesn't need to.
00:03:07
◼
►
And if you look at the clock icon in iOS right now,
00:03:09
◼
►
it actually is a live clock with a second hand spinning around,
00:03:12
◼
►
which is kind of silly.
00:03:13
◼
►
But in grounding it back to Overcast,
00:03:15
◼
►
there's a little thing that you added to the app
00:03:17
◼
►
just because it's kind of fun.
00:03:19
◼
►
Like it isn't strictly utility, but I
00:03:21
◼
►
think once soon as you notice it,
00:03:23
◼
►
it just like puts a smile on your face.
00:03:24
◼
►
And any time you can put a smile on your user's face,
00:03:27
◼
►
you're doing something right.
00:03:29
◼
►
I would describe these as almost like indulgences
00:03:33
◼
►
for the developer, but that they form delights for the user.
00:03:37
◼
►
Most users won't actually notice any kind of little delight
00:03:41
◼
►
you put in the app.
00:03:42
◼
►
They might notice the sum of them all,
00:03:44
◼
►
and they might feel like this is a high quality app as a result.
00:03:47
◼
►
But any individual one, they might not notice.
00:03:50
◼
►
Usually the individual ones, the main value of them
00:03:53
◼
►
is to you as the developer.
00:03:56
◼
►
You feel like you're doing something fun for yourself.
00:03:59
◼
►
Like it's partly like a craftspersonship kind of thing.
00:04:04
◼
►
It's partly just the satisfaction
00:04:06
◼
►
of doing something cool.
00:04:08
◼
►
And that's why-- and because they
00:04:10
◼
►
tend to take more time to do than they're worth necessarily,
00:04:13
◼
►
like in the market value of your app,
00:04:15
◼
►
or in a pure dollars for time kind of valuation,
00:04:19
◼
►
that's why I consider them kind of indulgences
00:04:21
◼
►
for the developer.
00:04:22
◼
►
You do them because they make you happy, and they're cool,
00:04:26
◼
►
but they're not necessary, and they're not strictly
00:04:29
◼
►
the best use of your time.
00:04:30
◼
►
But that doesn't mean you shouldn't do them.
00:04:33
◼
►
Because even though any one individual little delight
00:04:37
◼
►
or little touch or little nicety might not
00:04:40
◼
►
have great market value, when you have many of them
00:04:44
◼
►
in the app, or when the whole app feels delightful
00:04:47
◼
►
and feels very highly polished, that
00:04:49
◼
►
does raise the perceived value of your app.
00:04:52
◼
►
And it raises how people feel when they're using your app.
00:04:57
◼
►
It makes people happier to use it
00:04:58
◼
►
and happier to recommend this.
00:05:00
◼
►
Like an extreme example is Carrot Weather,
00:05:02
◼
►
where it's full of very rich, detailed, strong personality,
00:05:07
◼
►
and everything is alive in that app in all sorts of ways,
00:05:12
◼
►
from copy to graphics.
00:05:14
◼
►
There's all sorts of stuff going on there.
00:05:16
◼
►
And when people recommend Carrot Weather,
00:05:19
◼
►
they love Carrot Weather.
00:05:21
◼
►
And part of it is because it is actually highly functional
00:05:23
◼
►
and has a lot of great functionality.
00:05:25
◼
►
But also, a big part of it is all that polish,
00:05:28
◼
►
all the flourish, all the indulgences
00:05:30
◼
►
that its developer took to really make
00:05:33
◼
►
it a rich, developed experience instead of just bare bones
00:05:40
◼
►
And one of the things I miss most about Apple's past
00:05:47
◼
►
is that in the Jobs and Forstall era,
00:05:52
◼
►
Apple did a lot of this with their own apps.
00:05:54
◼
►
And we all remember it as like skeuomorphism.
00:05:57
◼
►
And we all look back and laugh and see how
00:06:00
◼
►
that's kind of out of style now.
00:06:02
◼
►
But the reality is it goes a lot deeper than that.
00:06:05
◼
►
It not only was like the skeuomorphic design of,
00:06:09
◼
►
oh, look, the podcast player looks like an eight-track reel
00:06:12
◼
►
to reel or a reel to reel tape player.
00:06:15
◼
►
It got extremes like that.
00:06:17
◼
►
But it was also, at the time, it was really nice.
00:06:20
◼
►
You would use these apps, and you
00:06:22
◼
►
would smile at the crazy look they had.
00:06:25
◼
►
Because back then, it wasn't so crazy.
00:06:27
◼
►
It just looked really cool.
00:06:29
◼
►
And they would make you happy.
00:06:32
◼
►
It appeared as though these things had a lot of work put
00:06:35
◼
►
And they did.
00:06:36
◼
►
They would have amazing animations.
00:06:38
◼
►
Remember the first time you saw the page turn
00:06:41
◼
►
animation on an iPad?
00:06:44
◼
►
These amazing animations.
00:06:47
◼
►
Or even just the genie shrinking into the Mac doc.
00:06:52
◼
►
There's all sorts of animations and graphical tweaks and just
00:06:57
◼
►
stylistic choices that Apple made
00:06:59
◼
►
in that era that made the entire system just delightful to use.
00:07:05
◼
►
And they don't do that so much anymore.
00:07:07
◼
►
Or they maybe try to do it in different ways.
00:07:09
◼
►
I think the current way that they do it
00:07:11
◼
►
is a lot less humane and a lot less fun.
00:07:15
◼
►
But they used to do it in these wonderful, fun ways.
00:07:18
◼
►
And it shaped how people view their products.
00:07:22
◼
►
It made people love them for ways
00:07:24
◼
►
that they couldn't always necessarily describe,
00:07:27
◼
►
but that they felt.
00:07:28
◼
►
And so we can take cues from that when we design our apps.
00:07:32
◼
►
We can do things that make people love our apps more
00:07:36
◼
►
and that give people those little feelings of delight
00:07:38
◼
►
and that overall just make our apps look more polished.
00:07:42
◼
►
And so going back to the sleep timer icon example in Overcast,
00:07:45
◼
►
first of all, thank you for bringing that up
00:07:47
◼
►
and for promoting it so heavily.
00:07:48
◼
►
And it is the kind of thing that I did
00:07:50
◼
►
that almost no one notices.
00:07:51
◼
►
And I actually did it a long time ago.
00:07:53
◼
►
I did it for the original landscape orientation
00:07:55
◼
►
of Overcast.
00:07:57
◼
►
And because the playback button, it
00:08:01
◼
►
was playback and effects panels.
00:08:03
◼
►
And it looked weird when I had those as text.
00:08:05
◼
►
So when you rotated the screen, it
00:08:06
◼
►
became this column of icons on one side.
00:08:08
◼
►
And the icon for the sleep timer was just like this.
00:08:11
◼
►
It was a live clock that would show you
00:08:12
◼
►
like a pie graph version of how long the timer was set for.
00:08:16
◼
►
And no one ever rotated it.
00:08:18
◼
►
And then the few people who did weren't using the sleep timer,
00:08:20
◼
►
so no one ever noticed.
00:08:21
◼
►
But anyway, the reason I did that icon
00:08:26
◼
►
is a combination of I wanted to do something fun.
00:08:30
◼
►
I wanted to indulge myself in making
00:08:32
◼
►
this over the top fun dynamic icon,
00:08:35
◼
►
even though most people would never notice it.
00:08:37
◼
►
But also, it did serve an important function.
00:08:41
◼
►
It did actually, by showing the current time,
00:08:45
◼
►
by showing this little pie graph wedge
00:08:47
◼
►
to show when the timer was set until,
00:08:50
◼
►
it actually helped people visualize and know
00:08:53
◼
►
how the timer was set, and how long it would last,
00:08:56
◼
►
and what time it would end.
00:08:57
◼
►
It communicated all those things in a simple little icon.
00:09:01
◼
►
And so it was delightful.
00:09:02
◼
►
And that's why I did it.
00:09:05
◼
►
But it also served a purpose.
00:09:07
◼
►
And I feel like if you can find ways in your app
00:09:10
◼
►
to do that, to have that blend of niceness,
00:09:13
◼
►
but that also serves a purpose, it
00:09:16
◼
►
becomes not only much more justifiable from the time
00:09:19
◼
►
perspective of investing time into it,
00:09:21
◼
►
but it also makes it nicer to use.
00:09:25
◼
►
You're communicating something with it.
00:09:26
◼
►
You're clarifying something with it.
00:09:28
◼
►
Whatever it is that makes it more useful,
00:09:30
◼
►
that makes your app, not only does it
00:09:33
◼
►
make your customers happier, but it makes the app better,
00:09:36
◼
►
and it makes it more clear, and it makes it more communicative
00:09:39
◼
►
at the same time.
00:09:40
◼
►
And another one that comes to mind with that is another,
00:09:43
◼
►
I think I first saw it in iOS.
00:09:45
◼
►
I think it was pulling down Control Center, Notification
00:09:47
◼
►
Center, where you would have a little chevron,
00:09:49
◼
►
like the little two line arrow without the tail.
00:09:54
◼
►
And as you moved your finger up and down,
00:09:58
◼
►
to dismiss it, the chevron's pointing up.
00:10:00
◼
►
And so, but then at a certain point,
00:10:02
◼
►
it would switch to-- it would turn into a line,
00:10:04
◼
►
and then it would turn into a down facing thing.
00:10:06
◼
►
If you have an Apple Watch, and you open Control Center,
00:10:08
◼
►
you can see the same effect in there now.
00:10:12
◼
►
And it's one of those things where it's really
00:10:14
◼
►
subtle animation.
00:10:16
◼
►
It's just two lines, and they're either pointing up, they're
00:10:20
◼
►
flat, or they're pointing down.
00:10:22
◼
►
But by making it interactive, and by making it,
00:10:24
◼
►
it isn't just-- it's in one state at the bottom,
00:10:27
◼
►
and it's in another state when it's at the top.
00:10:29
◼
►
It changes in between.
00:10:30
◼
►
It makes it kind of fun to play with.
00:10:32
◼
►
And I know it was just one of these things that, kind of
00:10:34
◼
►
like a fidget toy, I have sometimes just--
00:10:36
◼
►
like my Apple Watch, I'll sit there,
00:10:37
◼
►
and I'll make the little thing dance.
00:10:39
◼
►
I don't know.
00:10:40
◼
►
It's just kind of a fun little effect.
00:10:41
◼
►
But it does communicate something, to your point,
00:10:43
◼
►
that you were just making.
00:10:45
◼
►
It isn't just a glitzy animation added to the app for no purpose
00:10:49
◼
►
or no benefit.
00:10:50
◼
►
What it is communicating is it's like,
00:10:52
◼
►
if you swipe in this direction right now, it'll close.
00:10:55
◼
►
And if you swipe in this way, then it'll move the other way.
00:10:58
◼
►
You're communicating something.
00:11:00
◼
►
There's a similar thing, I know, in Overcaster,
00:11:03
◼
►
if you bring up and down the now playing controls,
00:11:07
◼
►
the little arrow with the chevron on it for yours,
00:11:09
◼
►
rather than going to a line in the middle,
00:11:11
◼
►
yours flips around.
00:11:12
◼
►
But it's interactive.
00:11:13
◼
►
It's not something that is-- you could just as easily have
00:11:16
◼
►
the static version of that, where at 50%,
00:11:19
◼
►
it flips from pointing up to pointing down.
00:11:22
◼
►
But by making it interactive, there's
00:11:24
◼
►
that little bit of fun, that little bit of interactivity
00:11:29
◼
►
that I think adds a lot to the experience,
00:11:31
◼
►
because it is entirely unnecessary,
00:11:35
◼
►
but it just makes it feel polished.
00:11:37
◼
►
And I think we keep-- I think in many ways,
00:11:39
◼
►
the more I think about these things, as we've
00:11:41
◼
►
been talking about it, it's like what
00:11:42
◼
►
I love about these kinds of touches
00:11:44
◼
►
and why I look for them in apps that I use, I think,
00:11:47
◼
►
is it demonstrates that the app-- it assures me
00:11:53
◼
►
that there's a level of quality and consideration that
00:11:56
◼
►
has gone into the thing that I'm using,
00:11:58
◼
►
that if they're able to get-- if they have time at the end
00:12:01
◼
►
to work on this stuff, there's a very good chance
00:12:03
◼
►
they've also taken care of weird edge case syncing bugs
00:12:07
◼
►
and lots of other kind of quality or thoughtfulness
00:12:10
◼
►
issues that may come up, that it isn't something
00:12:12
◼
►
that's very slapdash.
00:12:13
◼
►
It isn't something that they've just put together
00:12:15
◼
►
and they hope that this works.
00:12:17
◼
►
Like if you've gotten to the point
00:12:19
◼
►
where you're polishing and refining and adding
00:12:21
◼
►
silly touches and little nuances to the app,
00:12:25
◼
►
you've really got the basics pretty much pat.
00:12:27
◼
►
I mean, otherwise, I suppose it's just a design exercise,
00:12:30
◼
►
and it's overly designed but doesn't actually work.
00:12:32
◼
►
But I think as soon as you get the sense that it works
00:12:35
◼
►
and it has these, it's a great quality marker.
00:12:38
◼
►
And I think coming to your point about the earlier-- there
00:12:42
◼
►
was that more whimsical Apple period,
00:12:45
◼
►
I feel like there was a period of time
00:12:47
◼
►
where I think that was part of the thing where if Apple's
00:12:50
◼
►
taking care of all of this, then the fundamentals
00:12:52
◼
►
have to be well taken care of.
00:12:54
◼
►
Like if they've gotten-- they've worked their way down
00:12:57
◼
►
the to-do list to the point that this
00:12:59
◼
►
is what they're working on, like these tiny little details that
00:13:03
◼
►
aren't functional but are delightful and communicative
00:13:07
◼
►
or useful in some way, they're not essential.
00:13:10
◼
►
Like we are in a great place if that's where we are down
00:13:13
◼
►
in the to-do list.
00:13:14
◼
►
Yeah, it's funny.
00:13:15
◼
►
It's almost like when you go into a luxury retailer,
00:13:19
◼
►
whether it's like a high-end car dealership or like a jewelry
00:13:21
◼
►
store, one of the things that they do
00:13:24
◼
►
is they usually will offer you something to drink.
00:13:26
◼
►
Do you want a bottle of water?
00:13:28
◼
►
Do you want some coffee?
00:13:29
◼
►
And it's like-- and they don't need to charge you for that.
00:13:31
◼
►
Because they're doing so well because they charge so much
00:13:34
◼
►
money for their product, they have such high profits,
00:13:36
◼
►
that they can spare the water.
00:13:39
◼
►
They can spare the coffee.
00:13:40
◼
►
And it makes you happy, right?
00:13:41
◼
►
And it's kind of the opposite of like desperation or stinginess.
00:13:46
◼
►
And by showing that they are doing fine,
00:13:51
◼
►
that they can afford to give you free water even if you're not
00:13:53
◼
►
going to buy anything, that is an attractive quality that
00:13:56
◼
►
makes their-- it makes them seem established and stable
00:13:59
◼
►
and they know what they're doing and high quality and luxurious,
00:14:03
◼
►
So we can do that kind of stuff with our apps.
00:14:06
◼
►
If our apps-- as you said, if you've taken the time
00:14:10
◼
►
to really polish some stuff that, quote, "doesn't matter"
00:14:13
◼
►
or that doesn't matter very much, that does show--
00:14:16
◼
►
whether it's true or not, you could still
00:14:17
◼
►
have the most horrible sinking bugs in the world.
00:14:20
◼
►
Whether it's true or not, it projects the image
00:14:23
◼
►
that you're doing great, that you have so much free time
00:14:26
◼
►
because your app is just already so good that now you
00:14:28
◼
►
can focus on stuff like that.
00:14:29
◼
►
And that is-- whether it's true or not,
00:14:32
◼
►
that is a very strong marketing image to project.
00:14:36
◼
►
And it's pretty positive.
00:14:38
◼
►
Yeah, I think it's a powerful tool maybe even to say there
00:14:40
◼
►
it's like it is marketing in the sense that-- like you said,
00:14:44
◼
►
whether or not it's true, it is something that you can do
00:14:48
◼
►
and that's very much within our control as a developer.
00:14:51
◼
►
It's something that we have access to that can increase
00:14:54
◼
►
the perceived luxury or quality of our apps.
00:14:57
◼
►
That is fun to do, which is a nice perk that I enjoy doing
00:15:02
◼
►
these things.
00:15:02
◼
►
I very rarely-- these aren't the kind of things
00:15:05
◼
►
that are drudgery.
00:15:05
◼
►
These are fun little details that I enjoy.
00:15:09
◼
►
But the nice thing is it does.
00:15:11
◼
►
I think it increases that perceived luxury or perceived
00:15:14
◼
►
quality of your app.
00:15:15
◼
►
And that is-- it's very difficult to build that up
00:15:20
◼
►
in a lot of other ways.
00:15:21
◼
►
But it certainly is a lot easier to just put together
00:15:24
◼
►
a little bit of animation code or a little bit of some vector
00:15:29
◼
►
drawing that communicates something like that.
00:15:32
◼
►
And maybe not everyone notices it.
00:15:33
◼
►
Maybe it's not quite as in your face as would you
00:15:35
◼
►
like a glass of water or a glass of champagne
00:15:37
◼
►
or whatever it is like when you walk through the door.
00:15:40
◼
►
And I think there is an element of that that you're kind of--
00:15:43
◼
►
it is that level of polish.
00:15:45
◼
►
It's the-- if you look on the underside of something
00:15:49
◼
►
and you get the sense of how well it was put together,
00:15:52
◼
►
is it the-- when I'm putting together IKEA furniture
00:15:55
◼
►
or something, and you look at the back of it
00:15:57
◼
►
and you look at the front of it, the back of IKEA furniture
00:16:00
◼
►
doesn't look good.
00:16:01
◼
►
It looks plain, and it's fine.
00:16:03
◼
►
It's perfectly functional.
00:16:05
◼
►
But it doesn't look great.
00:16:06
◼
►
Whereas if you look at the back of a piece of really nicely put
00:16:09
◼
►
together furniture, the back looks just as good
00:16:14
◼
►
as the front.
00:16:14
◼
►
And those kind of little cues I think are such nice little--
00:16:19
◼
►
all these little subtle indications
00:16:21
◼
►
that something is going to be worthwhile, or at least
00:16:23
◼
►
is projecting that feeling.
00:16:26
◼
►
This episode of Under the Radar is brought to you by Instabug.
00:16:29
◼
►
More than 20,000 mobile apps, including Lyft, eBay,
00:16:32
◼
►
and T-Mobile are using Instabug to enhance
00:16:34
◼
►
the quality of their apps.
00:16:36
◼
►
Instabug is a lightweight SDK that
00:16:38
◼
►
provides mobile apps with comprehensive bug and crash
00:16:42
◼
►
With just one line of code to integrate,
00:16:44
◼
►
Instabug helps you receive detailed bug reports
00:16:47
◼
►
with minimal effort.
00:16:48
◼
►
So one cool feature is users can submit feedback
00:16:51
◼
►
by simply shaking their phones anywhere in the app.
00:16:54
◼
►
Every bug report has a screenshot
00:16:56
◼
►
that can be drawn on and annotated.
00:16:58
◼
►
The user can even attach a voice note or screen recording, too.
00:17:01
◼
►
This is all done from right within the app with zero
00:17:04
◼
►
interruption to their experience.
00:17:06
◼
►
And then the Instabug dashboard shows you
00:17:08
◼
►
a comprehensive report that includes all device details,
00:17:12
◼
►
steps to reproduce the bug, network logs,
00:17:15
◼
►
and all the other logs that you might need to debug faster.
00:17:18
◼
►
And all of this is automatic.
00:17:20
◼
►
And you can reply to your users right from the Instabug
00:17:25
◼
►
So you can let them know that their issue has been fixed,
00:17:27
◼
►
or maybe ask for more feedback if you
00:17:28
◼
►
need more clarification.
00:17:30
◼
►
Instabug can also forward all reports
00:17:32
◼
►
to Jira, Slack, Trello, GitHub, Zendesk, or whatever else
00:17:36
◼
►
you might use.
00:17:37
◼
►
The SDK takes just one minute to integrate into your app.
00:17:41
◼
►
So visit instabug.com/radar now and create a free account
00:17:45
◼
►
with no credit card required.
00:17:47
◼
►
And if you're a developer, you can sign up for a free Forever
00:17:50
◼
►
Plan, and everyone else can use promo code radar2018
00:17:53
◼
►
to get 20% off all plans for three months.
00:17:57
◼
►
That's instabug.com/radar and offer code radar2018.
00:18:02
◼
►
Our thanks to Instabug for their support of this show.
00:18:06
◼
►
So I wanted to go into maybe some more concrete examples
00:18:08
◼
►
and maybe some lessons we can teach
00:18:11
◼
►
to be more general about where you can
00:18:14
◼
►
add these kind of flourishes.
00:18:16
◼
►
For me, some of the ones I've done on Overcast
00:18:18
◼
►
while I make this show entirely about promoting Overcast,
00:18:22
◼
►
one of the ones I did was the Downloads icon.
00:18:25
◼
►
If a download has failed--
00:18:27
◼
►
It turns into a sad face.
00:18:28
◼
►
Yeah, yeah, like where it would normally
00:18:30
◼
►
show the little number badge, it shows a little frowny face.
00:18:32
◼
►
I love that.
00:18:33
◼
►
People love this.
00:18:34
◼
►
I've never thought of the amount of feedback I get on that.
00:18:36
◼
►
People absolutely love it.
00:18:38
◼
►
I never expected that.
00:18:39
◼
►
What I needed to do was I wanted to communicate a failure
00:18:42
◼
►
state in the icon, because the icon shows download status.
00:18:45
◼
►
So it normally would show a number
00:18:46
◼
►
about how many downloads are pending.
00:18:48
◼
►
And I wanted to somehow indicate if there's
00:18:50
◼
►
no more downloads pending, but some of them have failed,
00:18:53
◼
►
you should know about that.
00:18:54
◼
►
Because otherwise, if you see a blank,
00:18:56
◼
►
you think everything is OK.
00:18:58
◼
►
And so I just put a little frowny face on the icon instead.
00:19:00
◼
►
People absolutely love it.
00:19:02
◼
►
Instead of having like an exclamation point
00:19:04
◼
►
or like an error symbol or popping up a dialog box,
00:19:08
◼
►
making this little frowny face, it's cute and it's small,
00:19:10
◼
►
but it's also totally communicative.
00:19:12
◼
►
No one is confused about what that means.
00:19:14
◼
►
As soon as people see that, they usually smile
00:19:16
◼
►
and they tap the button.
00:19:18
◼
►
And it's great.
00:19:19
◼
►
So it's, again, combining usefulness with personality.
00:19:24
◼
►
Similarly, I show volume peak meters during playback
00:19:31
◼
►
inside the bars of the pause button.
00:19:32
◼
►
And this has evolved over time.
00:19:33
◼
►
It used to be more complicated.
00:19:35
◼
►
But the reason I show volume bars
00:19:38
◼
►
is to communicate that your audio is playing.
00:19:40
◼
►
It's a really useful bit of feedback.
00:19:42
◼
►
And if you hit play and you hear nothing,
00:19:46
◼
►
then you wonder what's wrong.
00:19:47
◼
►
And you can look at the bars and you
00:19:49
◼
►
can see if the bars are moving, but you're not
00:19:51
◼
►
hearing anything, chances are it's
00:19:53
◼
►
like the volume being set wrong on your output
00:19:55
◼
►
device or something.
00:19:56
◼
►
And so you can do something about that.
00:19:58
◼
►
Whereas if you hit play and you see blank bars,
00:20:01
◼
►
you know that you're listening to something silent.
00:20:03
◼
►
So it's communicating value there.
00:20:06
◼
►
But it is also designed in a way that
00:20:10
◼
►
makes people smile, that looks nice, and it works well.
00:20:14
◼
►
And that's, again, that's the best happy medium
00:20:16
◼
►
you can get with this kind of stuff.
00:20:18
◼
►
And I think-- I'm trying to give some examples that I've
00:20:21
◼
►
done too, where I feel like so often, it's
00:20:23
◼
►
like there's the hit the user over the head way
00:20:27
◼
►
to communicate something.
00:20:29
◼
►
You could easily just pop up an alert view
00:20:31
◼
►
and say, downloads have failed, bad news bears, things are sad.
00:20:37
◼
►
But instead, you just do this little subtle--
00:20:40
◼
►
you're communicating the same thing to the user,
00:20:43
◼
►
but you're doing it in a way that
00:20:44
◼
►
is much more friendly, much more engaging, much more pleasant.
00:20:48
◼
►
And it's like I'm thinking of-- in Perimeter++,
00:20:51
◼
►
it usually shows the last seven days worth of data
00:20:55
◼
►
is the main view.
00:20:57
◼
►
In terms of I scale the bars so that you
00:20:59
◼
►
see seven of them at a time.
00:21:00
◼
►
So you get a week.
00:21:02
◼
►
And I realized if you didn't know that the rest of the data
00:21:09
◼
►
is sitting off to the left, like in this incredibly long scroll
00:21:13
◼
►
view to the side, you might just think it only ever shows
00:21:17
◼
►
the current seven days.
00:21:18
◼
►
And that's a perfectly reasonable thing,
00:21:20
◼
►
I suppose, for the app.
00:21:21
◼
►
But it's a little unfortunate.
00:21:22
◼
►
And so in the app, the first time
00:21:25
◼
►
you have more than seven days worth of data,
00:21:27
◼
►
and if you've never scrolled the scroll view,
00:21:30
◼
►
I make it wiggle ever so slightly
00:21:33
◼
►
to show that there is one more-- to show the right third
00:21:37
◼
►
of that left-- of the next bar over.
00:21:39
◼
►
And then it pops back.
00:21:40
◼
►
And it does that every now and then.
00:21:42
◼
►
Not very often, but just lets you
00:21:43
◼
►
know that there's something there.
00:21:45
◼
►
And as soon as you scroll, or if you've ever scrolled,
00:21:48
◼
►
it never does it again.
00:21:49
◼
►
It's not this thing that's constantly trying to bother you
00:21:51
◼
►
or hold your attention.
00:21:53
◼
►
Because it is kind of disruptive to have the scroll view--
00:21:56
◼
►
have the view move slightly to the side.
00:21:58
◼
►
But I find it just communicates this idea.
00:22:01
◼
►
And probably most users never need to know it.
00:22:04
◼
►
But if someone did, and they were just
00:22:06
◼
►
confused as to where the rest of the data is,
00:22:08
◼
►
or even that that's a feature of the app,
00:22:10
◼
►
that your history is available to the side,
00:22:12
◼
►
it communicates that.
00:22:14
◼
►
Or similarly, I know for-- in a lot of UIs that I've done,
00:22:18
◼
►
there's often this sense of in the transition to a view--
00:22:22
◼
►
so like an example in Pedometer++,
00:22:24
◼
►
if you tap on the badges view to see the badges,
00:22:28
◼
►
in the actual transition-- so while the view is being
00:22:32
◼
►
presented, the animation for that is happening.
00:22:35
◼
►
I have the badges flip over from their reverse side
00:22:39
◼
►
to the front side.
00:22:40
◼
►
And I do this so that to give some sense that if you
00:22:43
◼
►
tap on the badge, and it'll rotate over,
00:22:46
◼
►
and there's information about the badge on the back.
00:22:48
◼
►
Either what the badge is, or how many times you've achieved it,
00:22:50
◼
►
when the last time you achieved it, that kind of thing.
00:22:53
◼
►
And I feel like I don't need to have some kind of walk-through
00:22:57
◼
►
thing the first time you launch the app that says, you know,
00:23:00
◼
►
you can tap this, and raise everything out,
00:23:02
◼
►
and has you tap it, and flip it over,
00:23:04
◼
►
and teaches the user to do that.
00:23:07
◼
►
Because by showing them that there is something on the back,
00:23:10
◼
►
ever so slightly, it's this very subtle effect,
00:23:12
◼
►
and it doesn't take extra time.
00:23:14
◼
►
It's built into the present modal animation.
00:23:18
◼
►
It just shows you that there is something there,
00:23:21
◼
►
and hopefully makes your user curious
00:23:23
◼
►
as to, you know, how do I get that?
00:23:25
◼
►
The most obvious thing is almost certainly going to be to tap it.
00:23:27
◼
►
And when they tap it, it works.
00:23:30
◼
►
So I feel like those kinds of details, where
00:23:32
◼
►
it's like you're trying to communicate something,
00:23:34
◼
►
and if you can find a more subtle or fun way
00:23:36
◼
►
to communicate it.
00:23:37
◼
►
Like it's just such a great little detail,
00:23:39
◼
►
where it's like a win-win.
00:23:40
◼
►
That it's more fun, it's a bit more whimsical,
00:23:43
◼
►
and it communicates something in a way that is, honestly,
00:23:46
◼
►
sometimes probably even clearer, because it's
00:23:48
◼
►
communicated in context, rather than being communicated out
00:23:53
◼
►
Yeah, I also love how you have a little sparkle on the badge
00:23:57
◼
►
section icon, when you have new badges.
00:24:00
◼
►
So instead of just showing like a number one in a circle,
00:24:03
◼
►
like the ribbon sparkles.
00:24:05
◼
►
And it just invites you, oh, that's showing me something.
00:24:08
◼
►
It's active.
00:24:09
◼
►
It invites you to tap on it.
00:24:10
◼
►
It totally communicates clearly, like, oh, here,
00:24:13
◼
►
I got to tap that.
00:24:14
◼
►
Something's going on there.
00:24:15
◼
►
Something's new there.
00:24:16
◼
►
You tap it, and you see your new badges.
00:24:18
◼
►
And again, it's like a nice little-- first of all,
00:24:20
◼
►
it's just a nice looking animation.
00:24:21
◼
►
But also, it's like a nice little touch that
00:24:23
◼
►
makes this app feel polished.
00:24:26
◼
►
One thing I also like doing is Micro Copy.
00:24:30
◼
►
I have this all over Overcast.
00:24:31
◼
►
But this is just like very small text that is usually not
00:24:36
◼
►
the primary label on something, but maybe
00:24:39
◼
►
is like a comment on it, or a clarification,
00:24:40
◼
►
or a description of it.
00:24:42
◼
►
And Micro Copy can vary from just like a description
00:24:45
◼
►
below a setting cell, which I use all the time,
00:24:47
◼
►
or something like a little line of text
00:24:50
◼
►
below a title in a dialogue box.
00:24:51
◼
►
Like when you add a podcast, there's
00:24:55
◼
►
a little sub label under the Add Podcast Title
00:24:57
◼
►
label in that screen that says, or just one episode,
00:25:00
◼
►
no pressure.
00:25:02
◼
►
And people love this, because it's a place
00:25:05
◼
►
that you can add personality, but it also clarifies things.
00:25:08
◼
►
Again, it's just like what we've been talking about.
00:25:10
◼
►
You can add personality and niceness and make people smile,
00:25:13
◼
►
but it also communicates some important value.
00:25:17
◼
►
Like when you first start a new Overcast account,
00:25:22
◼
►
and you have a blank collection you have no podcast
00:25:24
◼
►
subscribed to, there's a big button in the center
00:25:26
◼
►
of the screen that says Add a Podcast,
00:25:27
◼
►
and below it a little label that says,
00:25:29
◼
►
otherwise this won't be very useful.
00:25:31
◼
►
And that's, again, fun bit of personality.
00:25:33
◼
►
People love it.
00:25:33
◼
►
But also, it tells people like, you know what?
00:25:35
◼
►
You should probably do this first.
00:25:38
◼
►
Until you do this, this app won't work, basically.
00:25:41
◼
►
This won't do anything.
00:25:42
◼
►
And I love too, that switches from that message
00:25:46
◼
►
to you've played everything with an add button
00:25:49
◼
►
once you've played everything in Overcast.
00:25:51
◼
►
Right, exactly.
00:25:52
◼
►
Yeah, because that way it still tells you,
00:25:55
◼
►
there's nothing for you to do, but here's something
00:25:58
◼
►
you could, there's nothing for you to do
00:25:59
◼
►
with your current state.
00:26:00
◼
►
You've completed it.
00:26:01
◼
►
But here's a way you can keep using the app.
00:26:03
◼
►
Add more podcasts, right?
00:26:05
◼
►
And you can use this to both encourage people
00:26:09
◼
►
to do what you want them to do, and also, again,
00:26:11
◼
►
to help them to maybe clear up confusion,
00:26:13
◼
►
and to make them feel good about your app
00:26:15
◼
►
and its personality or its polish.
00:26:17
◼
►
You know, another similar thing is like,
00:26:18
◼
►
I use emoji here and there in some of the copy
00:26:21
◼
►
and some of the labels of the app.
00:26:23
◼
►
I use emoji kind of sparingly.
00:26:24
◼
►
And I use a little cloud emoji to communicate
00:26:27
◼
►
that an episode is not downloaded, that it will stream.
00:26:30
◼
►
And I use a little heart emoji in some of the labels
00:26:32
◼
►
that are about the premium subscription
00:26:34
◼
►
and thanking people for subscribing.
00:26:36
◼
►
And it just adds, it's like salt.
00:26:39
◼
►
Like, you don't want to use a lot of it,
00:26:41
◼
►
but you want a little bit.
00:26:42
◼
►
And a little bit of it goes a long way
00:26:44
◼
►
and can really make your app just show personality
00:26:47
◼
►
and delight people in small ways.
00:26:50
◼
►
- Yeah, and I think copy is probably the best,
00:26:53
◼
►
probably the easiest place for most developers
00:26:55
◼
►
to start off with this kind of thing.
00:26:57
◼
►
Like, if you're thinking about your own app
00:26:59
◼
►
and you're like, what could I do
00:27:00
◼
►
to kind of add these little details?
00:27:01
◼
►
It's like, copy is something
00:27:03
◼
►
that isn't technically difficult.
00:27:04
◼
►
It's not something that takes a lot of work
00:27:07
◼
►
to build a complicated animation,
00:27:08
◼
►
which are awesome and do that too.
00:27:11
◼
►
But it's something that, if you're just thoughtful
00:27:14
◼
►
and rather than it just saying,
00:27:17
◼
►
it's like, you can probably get too cutesy with it,
00:27:21
◼
►
and that can be problematic in its own way.
00:27:22
◼
►
But the reality is there's a very large distance
00:27:26
◼
►
between completely plain and boring,
00:27:28
◼
►
straightforward copy and too cutesy,
00:27:31
◼
►
where it gets a little too much or it gets confusing
00:27:33
◼
►
because you're being too whimsical in it.
00:27:35
◼
►
And it's like, it's sort of like the release notes
00:27:39
◼
►
where you can have release notes that are like,
00:27:41
◼
►
they're written in the form of,
00:27:42
◼
►
they're written in iambic pentameter
00:27:44
◼
►
as though it was an epic tale.
00:27:46
◼
►
And like, what has changed?
00:27:48
◼
►
I don't know what has changed in these release notes
00:27:51
◼
►
because it's too far versus you can also have the one
00:27:54
◼
►
that's just like, here is a bulleted list
00:27:56
◼
►
of the features that have changed.
00:27:57
◼
►
It's like, thank you.
00:27:59
◼
►
I try to do mine as like, I'm writing a letter
00:28:02
◼
►
to the developer or to my user being like,
00:28:04
◼
►
hey, this is what I've been working on.
00:28:06
◼
►
This is why I've been doing it.
00:28:07
◼
►
Here's the things I changed, thanks.
00:28:09
◼
►
And then I sign it, like, thanks.
00:28:10
◼
►
I hope you enjoy it, Dave.
00:28:12
◼
►
I put my name at the end of it.
00:28:12
◼
►
It's like, I'm writing you a letter.
00:28:13
◼
►
Like, I find that that's a good way
00:28:15
◼
►
to kind of structure that copy
00:28:17
◼
►
in hopefully a slightly more engaging way.
00:28:20
◼
►
You know, the copy is I think a great example
00:28:22
◼
►
of something that's so easy to do
00:28:24
◼
►
but can still have a really nice impact.
00:28:26
◼
►
- Well, and that kind of thing helps you too.
00:28:28
◼
►
Like, when people see that, they see,
00:28:29
◼
►
oh, this is an app made by one person.
00:28:31
◼
►
And that, and by you showing your humanity in your copy
00:28:36
◼
►
and in your description and update descriptions
00:28:39
◼
►
and everything, that might make them respond
00:28:41
◼
►
a little bit better in reviews maybe.
00:28:42
◼
►
It might make them less harsh.
00:28:44
◼
►
Like, if they don't think they're talking
00:28:44
◼
►
to a big company who doesn't care about them,
00:28:46
◼
►
if they know they're talking to just one person,
00:28:48
◼
►
that makes them a lot more polite a lot of the time, right?
00:28:52
◼
►
- Yeah, I mean, it's the same way.
00:28:52
◼
►
Like, I've changed, for a while back,
00:28:54
◼
►
I changed my, like, sort of contact or support button.
00:28:57
◼
►
Like, that just, you know, opens an email form.
00:29:00
◼
►
It's, they now say either email me or email us,
00:29:03
◼
►
depending on the app and sort of whether it makes sense.
00:29:06
◼
►
But like, I made it personal, that like,
00:29:09
◼
►
it's something, like, you're emailing a person.
00:29:11
◼
►
It's not just like, it's not get support,
00:29:14
◼
►
which is this sort of, this vague, general kind of thing.
00:29:16
◼
►
It's like, no, it's like email us or email me.
00:29:18
◼
►
Like, talk to me.
00:29:19
◼
►
Like, it's a very much more natural, engaging,
00:29:21
◼
►
personal thing, and I think it makes a big difference
00:29:24
◼
►
in terms of the way, you know, if you're gonna,
00:29:25
◼
►
you've pushed a button that says something,
00:29:27
◼
►
that, you know, says email me, like,
00:29:29
◼
►
you're, know you're talking to a person.
00:29:31
◼
►
It's a, you know, it's an individual rather than a,
00:29:34
◼
►
just this kind of collective, vague corporate communication.
00:29:38
◼
►
- Thanks for listening, everybody.
00:29:40
◼
►
Talk to you next week.