Under the Radar

00:00:00 ◼   ► Welcome to Under the Radar, a show about independent iOS app development.

00:00:04 ◼   ► I'm Mark O'Arment.

00:00:05 ◼   ► And I'm David Smith.

00:00:06 ◼   ► Under the Radar is never longer than 30 minutes, so let's get started.

00:00:09 ◼   ► So today I wanted to go through a bit of a design dilemma I've been having

00:00:14 ◼   ► and kind of the history that led up to it.

00:00:16 ◼   ► Many of you listen in Overcast, and you can look at the now playing screen of Overcast,

00:00:21 ◼   ► and if you're not listening in Overcast, it works for you too.

00:00:24 ◼   ► Look at the now playing screen of the podcast app that you're listening to this in.

00:00:28 ◼   ► You will see what appears to be a fairly standard UI.

00:00:33 ◼   ► Now playing screens have been around since we had music playback,

00:00:37 ◼   ► since the first iPhone and even before that.

00:00:40 ◼   ► It seems like now playing screens shouldn't be a lot of work.

00:00:43 ◼   ► The design of them shouldn't be too challenging.

00:00:46 ◼   ► They all kind of look similar.

00:00:48 ◼   ► And so you might think this should be an easy thing to design.

00:00:52 ◼   ► But the reality is my now playing screen has been a constant design struggle for me.

00:00:59 ◼   ► It's simply a lot harder than it looks.

00:01:03 ◼   ► Because with music apps, you have--first of all, music has a smaller problem space than podcasts.

00:01:09 ◼   ► Podcast apps tend to have additional controls that music apps don't.

00:01:13 ◼   ► But even among music apps, if you look at what Apple has gone through with their music now playing interface,

00:01:19 ◼   ► they've gone through a progression there as well.

00:01:22 ◼   ► And even the current one still has massive discoverability problems.

00:01:26 ◼   ► Like the way they hide some of the controls that you have to scroll up to see the shuffle and repeat control and everything.

00:01:32 ◼   ► And they have to actually tell you in a little tutorial the first time you see it where that is,

00:01:37 ◼   ► because people don't find things that aren't on screen.

00:01:40 ◼   ► And so there's been this constant struggle that we've all had.

00:01:45 ◼   ► Everyone who designs now playing screens.

00:01:47 ◼   ► And this goes broadly for lots of different apps as well,

00:01:50 ◼   ► but we've had the struggle of we want to make the screen look really nice,

00:01:56 ◼   ► because that matters a lot too.

00:01:58 ◼   ► That matters in marketing, that matters in customer acquisition,

00:02:01 ◼   ► that matters in things like Apple featuring you.

00:02:03 ◼   ► So you want it to look really nice,

00:02:06 ◼   ► but it also has to fit a lot of functionality in there and be very useful and be very discoverable.

00:02:14 ◼   ► And that has proven to be extremely difficult over time.

00:02:19 ◼   ► Yeah, and I think too, it's the...

00:02:21 ◼   ► I think about how many different operations are trying to be controlled by one screen.

00:02:28 ◼   ► And if I was going to enumerate them, it's like you have the information about what is currently playing,

00:02:36 ◼   ► which is typically some kind of artwork, a show title, an episode title, maybe a date, a date sometimes, yeah.

00:02:46 ◼   ► Then you're going to have the current playback information, which is typically time elapsed, time remaining,

00:02:53 ◼   ► as well as some kind of scrubber to go between those two extremes.

00:02:59 ◼   ► Then you have playback control, which is going to be typically play, pause, go back, go forward.

00:03:05 ◼   ► Then you're going to have potentially volume control, though that's less of a thing, I think, now than it used to be,

00:03:13 ◼   ► but it used to be for a while you'd have a volume control.

00:03:15 ◼   ► You're definitely going to have a source control.

00:03:17 ◼   ► Yeah, like an output selector, AirPlay versus whatever.

00:03:20 ◼   ► Yeah, and I think that's a very common, sort of an essential thing now.

00:03:24 ◼   ► You're going to have usually some kind of speed control, especially for a podcast player, maybe not as much in music,

00:03:32 ◼   ► but you'll have some kind of playback speed control.

00:03:35 ◼   ► In your case, you have that plus your smart speed and voice boost options, so just generally controlling the audio stream.

00:03:44 ◼   ► You have a sleep timer to have the app turn itself off at a particular point in time.

00:03:51 ◼   ► You now have chapters and chapter navigation.

00:03:55 ◼   ► And possibly their own elapsed time.

00:03:57 ◼   ► Chapters basically duplicate a bunch of other things, like chapters bring in their own titles, which might be hyperlinks.

00:04:04 ◼   ► They also need chapter back and forward controls, and a lot of people really like seeing how much time is left in a chapter.

00:04:10 ◼   ► Yeah, and you have the support contribute button, which is available there.

00:04:23 ◼   ► You have the general screen shot, sorry, show notes for the particular episode that you're looking at.

00:04:29 ◼   ► Don't forget the star button.

00:04:31 ◼   ► And the star button, yeah, and the share button probably.

00:04:34 ◼   ► Yep, the share button.

00:04:36 ◼   ► Like, it is like mission control.

00:04:39 ◼   ► Like you just kind of imagine all of that functionality.

00:04:41 ◼   ► And the thing that's really complicated, I think, and I've built a couple of these myself,

00:04:45 ◼   ► but what is so infuriating about it now playing screens, you have all these different operations.

00:04:50 ◼   ► But typically the user only wants to do one of them per interaction.

00:04:59 ◼   ► The funny thing about audio is that you don't actually look at the app most of the time that you're using it.

00:05:06 ◼   ► Most of the time you do something and then you just listen.

00:05:10 ◼   ► And for two hours they're going to be listening to an episode, and then they'll open the app to do something.

00:05:17 ◼   ► And you never know, though, what it is that they're going to do.

00:05:20 ◼   ► So you can't optimize for that ahead of time.

00:05:23 ◼   ► Like if you knew, you know, the user is out, say the user is out on a run.

00:05:28 ◼   ► Like they have their phone in one of those sleeves that goes on their arm,

00:05:32 ◼   ► and all they're trying to do is hit play/pause or skip forward and back.

00:05:38 ◼   ► You want giant play/pause and giant forward and back buttons.

00:05:42 ◼   ► But if they aren't doing that, if they're actually sitting down and they're wanting to read links that are associated with the show notes,

00:05:49 ◼   ► and they're doing something like that, you need a totally different UI, and having giant play/pause buttons would just get in the way.

00:05:55 ◼   ► And maybe they're controlling play/pause by double-tapping their AirPod or the Bluetooth controller or the headset controller attached to them.

00:06:02 ◼   ► All of those modes get different.

00:06:05 ◼   ► And then you also have the thought of, well, should you make it dynamic?

00:06:08 ◼   ► Should you have one interface that is fixed, that is not trying to be contextual?

00:06:14 ◼   ► Or should you try and make it contextual?

00:06:16 ◼   ► That if they're playing the audio through a device that has external play/pause controls,

00:06:22 ◼   ► should you make the play/pause controls smaller or bigger?

00:06:25 ◼   ► Like it is a complete nightmare, but no matter what interaction you come up with, you're still having to deal with.

00:06:32 ◼   ► I don't even know how many we just went through, it sounded like maybe 20 different active interface elements that you all want to put onto one screen.

00:06:40 ◼   ► It's a nightmare.

00:06:42 ◼   ► And there's even more than that. There are things that Overcast doesn't display that people frequently request.

00:06:46 ◼   ► So one of the most common ones is, well first of all, one you didn't mention is if you have a sleep timer running,

00:06:52 ◼   ► I also display the timer remaining, which people who use the sleep timer really, really like.

00:06:56 ◼   ► But it's also different by each person.

00:06:59 ◼   ► I personally almost never use a sleep timer, and so that whole quadrant of the screen is not useful to me.

00:07:04 ◼   ► But a lot of people do use it, and so it's nice to have it there.

00:07:07 ◼   ► A lot of people want there to be the displaying a volume control, as you mentioned earlier,

00:07:13 ◼   ► which is kind of optional in the source/output selector, but a lot of people do request it.

00:07:17 ◼   ► A lot of people want to display the name of the device that it's outputting to.

00:07:21 ◼   ► So it'll say like "Marko's AirPods" or whatever.

00:07:24 ◼   ► There are ways to get that information, and I can show it, but it's hard to fit on that screen.

00:07:29 ◼   ► Overcast also has ads that most people using the app see the ad,

00:07:35 ◼   ► and it kind of needs to be on the Now Playing screen, because that's the screen most people are looking at most of the time when the app is visible.

00:07:40 ◼   ► And so for business reasons, I need to have the ad there.

00:07:43 ◼   ► I also need to have some way to dismiss the Now Playing screen.

00:07:48 ◼   ► And so that can take lots of different forms.

00:07:51 ◼   ► Some people use tab bars, some people use gesture-only navigation,

00:07:55 ◼   ► but I found that's undiscoverable, which I'll get to.

00:07:58 ◼   ► And so you also need a way to dismiss it, so it's nice to have that be a button of some kind,

00:08:03 ◼   ► or some kind of visible element on screen.

00:08:05 ◼   ► And then the other challenge is, so I mentioned a second ago,

00:08:09 ◼   ► not everybody wants the same things on the screen,

00:08:11 ◼   ► but also the visual prominence of certain things, the size, the spacing,

00:08:15 ◼   ► no one can even agree on what that should even be, because for everyone it's something different.

00:08:20 ◼   ► I personally think that the artwork should be as big as possible.

00:08:24 ◼   ► And this is also really hard, because podcast artwork is square.

00:08:28 ◼   ► Try laying out full-width square artwork on iPhones that came before the iPhone X.

00:08:36 ◼   ► So the screens were a different aspect ratio.

00:08:38 ◼   ► It's really hard. It takes up a lot of the screen.

00:08:41 ◼   ► It gets even harder if you want large square artwork on an iPhone and an iPad.

00:08:46 ◼   ► And in both orientations on an iPad and in all the different size classes that can be in iPad multitasking,

00:08:51 ◼   ► it's so hard to lay this out in a way that the artwork doesn't get super small,

00:08:56 ◼   ► or look really weird, or squish everything else in too skinny of a space, or whatever else.

00:09:01 ◼   ► So this has been a constant battle.

00:09:04 ◼   ► And I have gone through so many different ways to do it in Overcast, which we'll get to in a minute.

00:09:09 ◼   ► But just like, it is really hard to lay out these screens.

00:09:13 ◼   ► And every person who suggests a change to me or says, "Why don't you just do X?"

00:09:17 ◼   ► They mean well, and they just don't get it.

00:09:20 ◼   ► They haven't actually considered, "Well, okay, if that element has to get bigger,

00:09:24 ◼   ► "then how does it look on an iPhone 7?"

00:09:26 ◼   ► Or, "Oh, then now there's no more room for it on the iPhone SE."

00:09:29 ◼   ► Or, "This would have to then shrink in this condition, and it wouldn't fit this condition."

00:09:34 ◼   ► There's so much that goes into this that I think people really,

00:09:39 ◼   ► they totally underestimate the complexity and the restrictions on designing these screens.

00:09:47 ◼   ► - Yeah, and I think too, it's not, I wouldn't say it's a terrible aspect of app development these days,

00:09:54 ◼   ► but the differences in screen size, and probably more importantly, screen proportions that we have to navigate now,

00:10:00 ◼   ► I think make a lot of designs feel much more complicated to do.

00:10:05 ◼   ► Because the way, a layout that looks good, if you take it just sort of,

00:10:10 ◼   ► a layout that looks good on an iPhone SE, which I think is broadly sort of like the low end,

00:10:14 ◼   ► I think the 5S is technically our lowest device at this point, but the 5S SE screen size.

00:10:21 ◼   ► And you make it a design that looks good there, and then you say,

00:10:25 ◼   ► "Okay, I'm gonna take all of the same elements in the same general location,

00:10:29 ◼   ► and then put that onto a XR, and just sort of add white space to kind of stretch it out."

00:10:35 ◼   ► It'll look really weird. Either you're gonna have these, the buttons are gonna,

00:10:40 ◼   ► if you scale the button's size with the screen size, then things look kind of over,

00:10:47 ◼   ► like this is a children's interface, all the buttons are huge and gigantic.

00:10:52 ◼   ► Or if you add white space, then you have these huge sections of just blank white screen,

00:10:58 ◼   ► just with nothing in them. And in some ways, I guess you could dynamically add and remove controls

00:11:04 ◼   ► based on the screen size, but technically that gets a little bit tricky.

00:11:09 ◼   ► And as well as, that's a little weird from a design perspective to have this interface

00:11:14 ◼   ► that is adding and removing interface elements dynamically between them,

00:11:19 ◼   ► not to say, not even to start talking about things like, if you have an iPad version of your app,

00:11:24 ◼   ► that iPad version can exist in, I don't know, six different, six, oh gosh,

00:11:31 ◼   ► many, many different interface elements. And even just if you imagine,

00:11:36 ◼   ► the worst proportional screen I find is the iPad compact layout.

00:11:41 ◼   ► So if you do the little swipe in, so it's full height, but narrow width.

00:11:46 ◼   ► Oh yeah, the tall skinny one. That's really hard.

00:11:48 ◼   ► The tall skinny one, there is no design for anything that looks good in that,

00:11:52 ◼   ► because it's sort of like an iPhone, but it's like three iPhones stacked on top of each other,

00:11:57 ◼   ► glued together with duct tape. Nothing is ever going to look good in that,

00:12:02 ◼   ► even if you have a list, like a table view, it still looks kind of weird to have this gigantic long list.

00:12:08 ◼   ► It's just like there's too much data there. So all these things I think make this kind of a design

00:12:14 ◼   ► just so tricky because you're covering not, if you just had design for one screen size,

00:12:20 ◼   ► one aspect ratio, maybe it's possible. As soon as it stops being that,

00:12:25 ◼   ► it becomes inherently so much more complicated.

00:12:30 ◼   ► We are brought to you this week by Linode. With Linode, you can instantly deploy and manage an SSD server

00:12:35 ◼   ► in the Linode cloud. You can get a server running in just seconds with your choice of Linux distro,

00:12:40 ◼   ► resources, node location, and so much more. Linode serves their customers with the help of ten data centers

00:12:45 ◼   ► around the globe, and they're about to add more. They have Mumbai, India, and Toronto, Canada,

00:12:50 ◼   ► both having data centers onboard before 2020. Linode features native SSD storage,

00:12:55 ◼   ► a 40 gigabit network behind it all, and Intel Xeon E5 processors.

00:13:00 ◼   ► This means you'll be able to serve your customers as fast as possible. And you don't have to stress about overspending,

00:13:05 ◼   ► because Linode has also designed their pricing tiers to be very easy to understand and to feature hourly billing

00:13:10 ◼   ► with monthly caps on all plans and add-on services, including the backups, node balancers,

00:13:15 ◼   ► and of course, the core Linodes themselves. Linode has fantastic pricing options available to suit everyone,

00:13:20 ◼   ► including us. I run everything on Linode. All my servers are there, and I have servers from the basic low levels,

00:13:25 ◼   ► which start at just $5 a month, all the way up to big, beefy servers for things like my biggest databases

00:13:30 ◼   ► and everything. They also have high memory plans, starting at 16 gigs of RAM, and they can cover all sorts of needs.

00:13:35 ◼   ► And Linode has special offers. As listeners of this show, you can go to Linode.com/Radar

00:13:40 ◼   ► and use promo code radar2019 to get $20 towards any Linode plan.

00:13:45 ◼   ► So on that $5 a month plan, which gets you a gig of RAM, that could be four free months.

00:13:50 ◼   ► And with a seven-day money-back guarantee, you have nothing to lose.

00:13:55 ◼   ► So give Linode a try today. That's Linode.com/Radar and promo code radar201920.

00:14:00 ◼   ► To learn more, sign up and make the most of that $20 credit.

00:14:05 ◼   ► Our thanks to Linode for their support of this show and all of Real AFM.

00:14:10 ◼   ► So I've gone through with Overcast a number of designs.

00:14:15 ◼   ► And part of this also, you have to keep up with OS changes,

00:14:20 ◼   ► new phone sizes, and just kind of the general fashion of what's cool in user interface design.

00:14:25 ◼   ► And that's really, besides the design challenges of what we've discussed so far,

00:14:30 ◼   ► that's actually really hard. So in the 1.0 version,

00:14:35 ◼   ► this was when iOS 7 and 8 were current.

00:14:40 ◼   ► Like I designed it with iOS 7 and then iOS 8. I think it was shipped for iOS 8.

00:14:45 ◼   ► But it was a very, very basic design. The largest phone that existed at that time

00:14:50 ◼   ► was the iPhone 5S or 5. And so it was designed to fit on the iPhone 4 size screen,

00:14:55 ◼   ► but expand optionally to the iPhone 5 size screen.

00:15:00 ◼   ► And I didn't support chapters at the time. A lot of things were much simpler.

00:15:05 ◼   ► But it was a very, very basic design. There were buttons for everything.

00:15:10 ◼   ► There were two different control panels that you could bring up.

00:15:15 ◼   ► One called playback, one called effects, and those had buttons that just had text that said playback and effects.

00:15:20 ◼   ► So it was a very clean, pure design. I actually really like the 1.0 design.

00:15:25 ◼   ► I was very proud of that. It looks outdated now because it's very iOS 70,

00:15:30 ◼   ► but I really was very happy with that design. But unfortunately that had to evolve as things changed.

00:15:35 ◼   ► And it had, the key problem it had was that it hid the show notes.

00:15:40 ◼   ► So wherever you'd see the episode description and any kind of HTML show notes that people might add,

00:15:45 ◼   ► the way it hid them was the artwork was actually a scroll view.

00:15:50 ◼   ► And the art took up the full size of it. But then if you scrolled it up,

00:15:55 ◼   ► you would reveal the show notes below it all.

00:16:00 ◼   ► And we'll have images of all this either in the chapter artwork, if you're using Overcast,

00:16:05 ◼   ► which should be, or just as links in the show notes.

00:16:10 ◼   ► Although, humorously, a bunch of tall, skinny images won't look very good in the square artwork

00:16:13 ◼   ► displaying most podcast apps.

00:16:18 ◼   ► Either way, we're painting word pictures,

00:16:21 ◼   ► but if you want to look at what Marco is saying as he's describing these,

00:16:25 ◼   ► there'll be that "go look" in the show notes and you can take a look at this.

00:16:29 ◼   ► Yeah, exactly.

00:16:32 ◼   ► And so 1.0, everything was clear and visible on screen,

00:16:32 ◼   ► except for show notes.

00:16:37 ◼   ► And that was a big problem, because what I found over time was,

00:16:39 ◼   ► like, you know, I would do the thing where like,

00:16:44 ◼   ► the first time you saw the Now Playing screen,

00:16:46 ◼   ► I would blink the scroll indicator,

00:16:48 ◼   ► 'cause that's been like the iOS standard since 1.0,

00:16:49 ◼   ► of how do you show that something is scrollable?

00:16:52 ◼   ► Well, when it appears on screen, you flash the scroll indicator.

00:16:55 ◼   ► Yep, turns out no one notices that at all.

00:16:58 ◼   ► And something that you can just scroll

00:16:59 ◼   ► that doesn't have any visual way of indicating that,

00:17:04 ◼   ► basically nobody will ever do it.

00:17:07 ◼   ► This was also, this was a push navigation screen

00:17:09 ◼   ► that would just push in from the side,

00:17:11 ◼   ► so the way you push out was from the side,

00:17:13 ◼   ► so there was really no reason for anyone to ever scroll up or down on this screen,

00:17:14 ◼   ► unless they knew that the show notes were behind there.

00:17:19 ◼   ► And so over the months following,

00:17:21 ◼   ► I got a lot of emails from people saying,

00:17:23 ◼   ► "Wait, there's show notes?"

00:17:25 ◼   ► Or saying like,

00:17:26 ◼   ► "Oh, I wish you would add a feature that we can display show notes."

00:17:25 ◼   ► And I'm like, "Wait, I already have that feature.

00:17:30 ◼   ► Are they just not finding it?"

00:17:32 ◼   ► And sure enough, they weren't finding it,

00:17:34 ◼   ► and it's not their fault, it's my fault,

00:17:35 ◼   ► because I made an interface that didn't at all

00:17:37 ◼   ► make it discoverable,

00:17:39 ◼   ► besides that little subtle flash of the scroll indicator

00:17:40 ◼   ► that most people just wouldn't notice.

00:17:43 ◼   ► So it was basically, it was my fault

00:17:45 ◼   ► and it was my problem to fix.

00:17:47 ◼   ► And so over the coming years,

00:17:49 ◼   ► Overcast is now what, about four or five years old?

00:17:50 ◼   ► So over the following years,

00:17:55 ◼   ► I have evolved the playback screen,

00:17:57 ◼   ► and I also have evolved it to do things like

00:17:59 ◼   ► accommodate for the addition of things like chapter support,

00:18:01 ◼   ► to accommodate for new looks of the system.

00:18:05 ◼   ► Like when the music app went to kind of like

00:18:09 ◼   ► the floating cards in space paradigm,

00:18:11 ◼   ► where like the now playing screen would come up

00:18:14 ◼   ► and the corners on top would be rounded

00:18:15 ◼   ► and the screen behind it would like sink back

00:18:17 ◼   ► into space behind it and the top would be black

00:18:16 ◼   ► in the status bar, like I did a design like that,

00:18:21 ◼   ► after Apple did, because that's what people expected

00:18:24 ◼   ► music and sound playback apps to look like at that time.

00:18:26 ◼   ► And I did it and it was good and it solved some problems,

00:18:29 ◼   ► it looked pretty cool,

00:18:32 ◼   ► but I still had problems with discoverability.

00:18:33 ◼   ► And as part of an effort to look cool around that time,

00:18:37 ◼   ► I also hid the playback and effects panels

00:18:40 ◼   ► and made them swipe panels,

00:18:42 ◼   ► so you would swipe horizontally,

00:18:47 ◼   ► now that the playback screen was coming up vertically,

00:18:49 ◼   ► then you could swipe horizontally in the artwork

00:18:51 ◼   ► to go between these three panes,

00:18:53 ◼   ► like the middle one would be the artwork

00:18:54 ◼   ► and then you have settings and stuff on the left

00:18:55 ◼   ► and info on the right,

00:18:57 ◼   ► like the show notes and info on the right.

00:18:59 ◼   ► And I indicated this via the iOS system standard of page dots.

00:19:01 ◼   ► So I had below the artwork, I had page dots,

00:19:06 ◼   ► and you would swipe and they would change,

00:19:08 ◼   ► so it was very clear, this is a three-page interface

00:19:09 ◼   ► and it's horizontally based,

00:19:14 ◼   ► so if you notice the page dots

00:19:16 ◼   ► and you know what page dots mean in iOS,

00:19:17 ◼   ► you would know, oh, this is a swipe thing,

00:19:19 ◼   ► I can swipe this to go to different pages.

00:19:21 ◼   ► And guess how many people found that?

00:19:24 ◼   ► - Nobody.

00:19:25 ◼   ► - Nobody, yep, that's right.

00:19:26 ◼   ► So that was a huge, I got emails from people every day

00:19:29 ◼   ► saying, hey, where are your speed controls?

00:19:32 ◼   ► I can't find them.

00:19:34 ◼   ► Or, I wish you'd offer speed controls.

00:19:35 ◼   ► - Yeah, which is even worse,

00:19:34 ◼   ► it's a feature that I have, it's right there.

00:19:39 ◼   ► - Or, I sped it up, now I can't find how I did that

00:19:41 ◼   ► and I can't change the speed back, please help.

00:19:45 ◼   ► Which is compounded by the fact that Overcast

00:19:47 ◼   ► syncs your speed preference to its server

00:19:50 ◼   ► and so if you were to, say, delete the app

00:19:53 ◼   ► and re-enter the app, it would say,

00:19:56 ◼   ► do you want to use your account?

00:19:58 ◼   ► And you'd probably say yes.

00:19:59 ◼   ► And then it would re-sync over your playback speed preference.

00:19:59 ◼   ► So yeah, all sorts of failures going on there.

00:20:04 ◼   ► And so I had all these problems with discoverability

00:20:06 ◼   ► and so with the current generation of Overcast,

00:20:10 ◼   ► the Overcast 5 generation,

00:20:13 ◼   ► I thought I had solved it all.

00:20:15 ◼   ► I had this idea this summer and I ran it by some friends

00:20:18 ◼   ► and it seemed like I really had it all figured out.

00:20:21 ◼   ► I had these rounded cards in the middle

00:20:25 ◼   ► that would show the edges of two cards left and right.

00:20:26 ◼   ► And it was very clear, visibly,

00:20:31 ◼   ► that this is a three card interface

00:20:33 ◼   ► and I even put a little bar indicator,

00:20:35 ◼   ► little drag handle bars on the two cards side by side

00:20:38 ◼   ► so that it was very clear that you can pull these

00:20:43 ◼   ► with your hand and these are different panels of things

00:20:46 ◼   ► so you should swipe between these things

00:20:49 ◼   ► and this is how you will find my settings now.

00:20:51 ◼   ► And that even freed up some room on the bottom

00:20:53 ◼   ► for me to make the sleep timer more prominent

00:20:58 ◼   ► and to add a star button on the main Now Playing screen,

00:21:00 ◼   ► which I'd wanted to do since 1.0

00:21:02 ◼   ► and just couldn't fit it really anywhere that looked good.

00:21:04 ◼   ► And so I was like, great,

00:21:07 ◼   ► I finally cracked the Now Playing design problem.

00:21:08 ◼   ► Well, every single day since then,

00:21:12 ◼   ► I have gotten emails from people saying,

00:21:16 ◼   ► "Where are the speed controls?"

00:21:18 ◼   ► or "I hope you add speed controls."

00:21:20 ◼   ► or "I changed the speed and I can't figure out

00:21:18 ◼   ► "where to change it back, please help."

00:21:23 ◼   ► And I thought I'd solve this, but it turns out,

00:21:25 ◼   ► first of all, again, even though it is, to us,

00:21:28 ◼   ► an iOS design convention to have a multi-card interface

00:21:33 ◼   ► that swipes, it looks kind of like things

00:21:38 ◼   ► in the App Store and stuff like that,

00:21:40 ◼   ► this paradigm is used all over the system,

00:21:42 ◼   ► so you would think people would think this is swipable.

00:21:44 ◼   ► So A, not so, many people don't think it's swipable.

00:21:45 ◼   ► But B, sometimes I would ask the people,

00:21:50 ◼   ► I'm like, out of curiosity,

00:21:53 ◼   ► why didn't you try swiping on this

00:21:54 ◼   ► or did you see this or whatever else?

00:21:56 ◼   ► And I got a very interesting answer from a lot of people.

00:21:58 ◼   ► They said, "I saw that was swipable,

00:22:02 ◼   ► "but I didn't want to swipe it because I assumed

00:22:04 ◼   ► "that would be changing to the next or previous episode."

00:22:06 ◼   ► Which makes total sense because that's the artwork by default,

00:22:10 ◼   ► and so it kind of looks like if you swiped it back and forth,

00:22:12 ◼   ► you'd be going between different podcasts.

00:22:17 ◼   ► I never even considered that during development,

00:22:19 ◼   ► but once somebody said it, I was like,

00:22:22 ◼   ► "Oh, of course, I see it now."

00:22:24 ◼   ► And so now I'm faced with yet another,

00:22:27 ◼   ► I have a usability problem with discoverability

00:22:30 ◼   ► of this screen, I'm going to fix it.

00:22:33 ◼   ► And I'm going to fix it in the most boring way possible

00:22:36 ◼   ► because I'm tired of trying to make this screen look awesome,

00:22:38 ◼   ► I'm tired of trying to make everything look minimal

00:22:43 ◼   ► because even though that's really cool

00:22:46 ◼   ► and it looks great in screenshots and reviews,

00:22:47 ◼   ► what this screen needs is some more buttons.

00:22:50 ◼   ► - More buttons, yes.

00:22:54 ◼   ► - So I'm going to simply bring back

00:22:55 ◼   ► the UI innovation of buttons,

00:22:58 ◼   ► buttons that show the effects panel,

00:23:01 ◼   ► and if I'm lucky, the info screen.

00:23:03 ◼   ► And it's not going to look as good,

00:23:03 ◼   ► and it's not going to be as cool,

00:23:08 ◼   ► and it's definitely not going to be as minimal,

00:23:10 ◼   ► but I have to do it because all of these techniques

00:23:13 ◼   ► I've used to try to make things look really good

00:23:17 ◼   ► have been only costing me in usability.

00:23:20 ◼   ► And I mean this app to be a mainstream app,

00:23:24 ◼   ► I want everyone to be able to use this app,

00:23:27 ◼   ► I target it as a mainstream podcast app,

00:23:29 ◼   ► I want it to be a direct replacement for Apple Podcasts

00:23:29 ◼   ► for anybody who wants to try it.

00:23:34 ◼   ► And I simply can't do that if any part of it

00:23:36 ◼   ► is considered hard to use.

00:23:40 ◼   ► And most people seem to get most of the rest of the app,

00:23:41 ◼   ► like over time I've made changes to the rest of the app

00:23:44 ◼   ► to do things like move important functions

00:23:47 ◼   ► out of swipe gestures, out of table view swipes,

00:23:50 ◼   ► out of the edit mode of table views,

00:23:52 ◼   ► which nobody ever finds.

00:23:54 ◼   ► Yeah, spoiler, if you put an edit button

00:23:55 ◼   ► in the upper right of a table view

00:23:57 ◼   ► and hide any functionality behind that

00:23:55 ◼   ► that isn't available in other ways, nobody is finding it.

00:24:00 ◼   ► No one knows what edit buttons do, no one taps them, etc.

00:24:03 ◼   ► So, by the way, see also drag and drop.

00:24:06 ◼   ► So drag and drop is totally, oh god,

00:24:08 ◼   ► it's a whole other thing.

00:24:11 ◼   ► But anyway, so I'm going to redo this screen

00:24:12 ◼   ► and it's gonna be hard, it's gonna be a lot of work

00:24:15 ◼   ► and it's gonna anger people

00:24:18 ◼   ► because a lot of people like the current screen

00:24:19 ◼   ► and so I'm changing it again.

00:24:21 ◼   ► I seem like I changed it now playing screen

00:24:21 ◼   ► about once every year and a half or so,

00:24:26 ◼   ► but I have to do it because this design has failed.

00:24:28 ◼   ► The whole point of this design was to make it more discoverable

00:24:32 ◼   ► for people to find the other screens

00:24:36 ◼   ► and while it has worked for some people,

00:24:38 ◼   ► it hasn't worked for enough people

00:24:40 ◼   ► and enough people are still having problems

00:24:42 ◼   ► that I need to fix it.

00:24:43 ◼   ► So get ready for some more buttons.

00:24:45 ◼   ► - Yeah, and I think there's a fascinating tension,

00:24:47 ◼   ► I feel this sort of myself all the time,

00:24:52 ◼   ► where I want it to be, I don't even know,

00:24:54 ◼   ► it's like the Johnny Ive, beautiful, essential,

00:25:00 ◼   ► it is the platonic ideal of whatever the design is

00:25:03 ◼   ► and it's typically very minimalist.

00:25:06 ◼   ► Typically you're removing affordances,

00:25:08 ◼   ► you're boiling the app down to it's just bare essentials

00:25:10 ◼   ► and that is from a design perspective,

00:25:14 ◼   ► and often that just feels nice and it looks beautiful,

00:25:19 ◼   ► it looks really nice,

00:25:22 ◼   ► but at the same time,

00:25:24 ◼   ► if you take away all those affordances,

00:25:26 ◼   ► you take away all of the clear, obvious,

00:25:28 ◼   ► don't make me think kind of interface elements,

00:25:31 ◼   ► then people have to think

00:25:35 ◼   ► and then people have to explore the app

00:25:37 ◼   ► and discover what things do

00:25:41 ◼   ► without knowing what they're going to do ahead of time.

00:25:40 ◼   ► And this is something that I think I often kind of think about too,

00:25:45 ◼   ► that it's so easy I find for myself

00:25:48 ◼   ► to not think of myself as a user who is scared of the application.

00:25:51 ◼   ► But I know many people who interact with technology

00:25:58 ◼   ► in a way that is, if not scared, is timid.

00:26:01 ◼   ► Like in the example you gave of someone

00:26:04 ◼   ► who doesn't want to swipe,

00:26:06 ◼   ► because they're worried that if they do that,

00:26:07 ◼   ► it's going to mess something up.

00:26:06 ◼   ► And making something obvious,

00:26:11 ◼   ► making it clear that it's safe to push this button,

00:26:14 ◼   ► is an interesting kind of design goal

00:26:17 ◼   ► that you want to make people feel safe and competent,

00:26:21 ◼   ► that they look at the interface,

00:26:25 ◼   ► and even if it isn't beautiful,

00:26:26 ◼   ► if it's clear, then it's a different kind of win.

00:26:28 ◼   ► And in some ways,

00:26:32 ◼   ► this is I think just one of those fascinating tensions

00:26:33 ◼   ► between, like maybe in some ways you could say,

00:26:33 ◼   ► well, you can have great design and good usability.

00:26:38 ◼   ► And that statement is obviously true,

00:26:42 ◼   ► but it's a different kind of design

00:26:45 ◼   ► that you can end up with in this place.

00:26:47 ◼   ► You can still have a design that is well laid out,

00:26:50 ◼   ► has good spacing and contrast and alignment

00:26:54 ◼   ► and all the core elements of good design,

00:26:57 ◼   ► but it may not be sort of elegant in that way.

00:26:59 ◼   ► It may just be useful and utilitarian,

00:27:04 ◼   ► and I think it's great to have buttons.

00:27:07 ◼   ► It's making it something,

00:27:09 ◼   ► and Ian, this is where you even get into the funny questions

00:27:11 ◼   ► of should buttons have words on them

00:27:13 ◼   ► or should buttons have icons on them?

00:27:15 ◼   ► It's like if you have a word,

00:27:17 ◼   ► then there's less ambiguity about what that thing is

00:27:18 ◼   ► because you're saying,

00:27:21 ◼   ► your version one interface,

00:27:23 ◼   ► it said you have the effects button.

00:27:24 ◼   ► Well, if I push the effects button,

00:27:29 ◼   ► then I expect, well, it's gonna change the effects.

00:27:30 ◼   ► But rather than that,

00:27:32 ◼   ► it has a gear on it

00:27:33 ◼   ► or some kind of more esoteric symbol.

00:27:35 ◼   ► Maybe I don't know what that is.

00:27:38 ◼   ► To my point earlier,

00:27:40 ◼   ► if I'm worried about,

00:27:41 ◼   ► if I don't know what a button's gonna do when I push it,

00:27:42 ◼   ► maybe I don't wanna push that button

00:27:44 ◼   ► because that's scary too in a different way.

00:27:45 ◼   ► - Yeah, exactly.

00:27:49 ◼   ► I mean, you can look at other podcast apps

00:27:50 ◼   ► to see how they illustrate this in their iconography,

00:27:51 ◼   ► and it's kind of a little bit,

00:27:56 ◼   ► you have gears sometimes,

00:27:57 ◼   ► you have a little speaker sometimes,

00:27:58 ◼   ► you have a knob icon or multiple knobs,

00:28:01 ◼   ► or you have the up and down sliders,

00:28:04 ◼   ► vertical sliders icons,

00:28:07 ◼   ► just indicate these are settings.

00:28:09 ◼   ► And I honestly have no idea

00:28:11 ◼   ► which one of those I'm gonna use.

00:28:12 ◼   ► I'm gonna use one of them.

00:28:13 ◼   ► I'm leaning towards,

00:28:14 ◼   ► I like having icons that are round,

00:28:15 ◼   ► so I'm leaning towards probably a gear,

00:28:17 ◼   ► maybe a knob,

00:28:19 ◼   ► but I don't know.

00:28:16 ◼   ► I'm gonna play with it and see what looks right,

00:28:21 ◼   ► but either way, I have to do something.

00:28:22 ◼   ► And then I also have the question of,

00:28:23 ◼   ► when you hit that knob or gear or whatever it is,

00:28:25 ◼   ► what happens?

00:28:28 ◼   ► Do I keep the three-pane interface

00:28:29 ◼   ► and just have those buttons swipe it over for you

00:28:31 ◼   ► and tapping it again swipes it back,

00:28:33 ◼   ► or do I move them back into popovers,

00:28:35 ◼   ► which solves actually a number of other problems

00:28:37 ◼   ► I've been having with those screens,

00:28:39 ◼   ► although it's hard to say that info

00:28:42 ◼   ► should be in a popover.

00:28:43 ◼   ► It probably shouldn't.

00:28:41 ◼   ► So it's like, then do I have settings in a popover,

00:28:46 ◼   ► but info not in a popover?

00:28:49 ◼   ► It's a whole can of worms

00:28:50 ◼   ► that I'm opening up by doing this.

00:28:53 ◼   ► But yeah, I feel like ultimately you have to,

00:28:55 ◼   ► I feel like a confident design is one

00:28:58 ◼   ► that doesn't care so much about looks,

00:29:02 ◼   ► that achieves good looks,

00:29:05 ◼   ► but is not willing to sacrifice usability

00:29:07 ◼   ► in order to get the ideal look.

00:29:08 ◼   ► And that's something that we've seen a lot of people,

00:29:13 ◼   ► both developers and Apple,

00:29:16 ◼   ► fail at and pick the wrong balance with over the years.

00:29:18 ◼   ► But I think it's time to go back

00:29:20 ◼   ► and it's time to really prioritize usability

00:29:22 ◼   ► and that's what I have to do

00:29:24 ◼   ► and that's what I'm going to do.

00:29:25 ◼   ► - Yeah, well I look forward to version five, six

00:29:26 ◼   ► of the Now Playing screen

00:29:30 ◼   ► and seeing what you come up with

00:29:32 ◼   ► and hopefully it'll make your users more comfortable

00:29:33 ◼   ► and comfort-based usability is definitely a good thing.

00:29:38 ◼   ► - Oh yeah.

00:29:40 ◼   ► Thanks for listening everybody.

00:29:41 ◼   ► Hopefully you can find the stop button

00:29:42 ◼   ► and we will see you next week.