PBS Kids: Design Explosions #2

Hullo! Design Explosions is a series by Jon Bell. Issue #1 compared Apple Maps and Google Maps, and today we’ll be learning from PBS Kids, an iOS app.

If you’re new to Design Explosions, here’s the gist: Design Explosions tries to do design critique in a polite and gracious way. Here are our guidelines while analyzing designs:

1. The team that built this product is full of smart people.
2. There are many things we can’t know without joining the team.
3. We’re here to teach and learn, not judge.

Ready, set, YELLOW PBS KIDS SPLASH SCREEN

Scenarios & Mantras

Product folks talk a lot about scenarios, but there’s some confusion about what the word really means. Personally, I use the word to describe a common flow while using the product. So Amazon’s core scenarios are searching for a product, reading about it, and completing your order.

But sometimes people get a bit too fancy with scenarios. It’s not uncommon to spot scenario descriptions like “Anna wakes up in the morning! What a lovely day! She decides she wants to sync her Exchange work calendar with her family’s team calendar so she taps the calendar app, taps the overflow menu, then goes into settings. Whee! While drinking coffee and smiling, she simply taps these four steps and then she’s done. Great! Now she has plenty of time to take Barky to the dog park. Thanks, Windows and Azure! The PM who wrote this really deserves a promotion, don’t you think? I do!”

That’s not a scenario. That’s a pitch.

Guy Kawasaki uses mantras when trying to figure out what a company stands for. The trick is to remove the features and fluff to see what’s left. He proposes that Wendy’s could be “Healthy Fast Food.” March of Dimes could be “Save Babies.” And PBS Kids? It’s practically all in the title. “PBS for Kids.” But blink and you’ll miss it. Those three words can provide a ton of directional guidance while designing the app and making tradeoffs.

Clear visions like this are extremely useful when you’re in the middle of a long and complex project. Great design is about saying no, and principles help you understand what your team stands for when tough issues come up.

It sounds obvious, but in practice it’s incredibly difficult to keep an app this focused. Especially as years go by and features are added, something PBS Kids so far has avoided. It reminds me of a sticky note I post often:

Q: How does an app become bloated?
A: One reasonable feature request at a time.

If you’re a professional product designer, you can probably relate. Perhaps bitterly. It can happen to every product, on every team, at every company. So how did the PBS Kids team do it? How did they structure this thing? Explaining why their solutions are so clever requires some background knowledge. Travel with me to the turn of the century.

Search Versus Browse

About 15 years ago, my team at RealNetworks was tasked with designing an online video store. This was before iTunes, Hulu, YouTube, and Netflix so we didn’t have a lot of examples to learn from.

I held an early opinion that we should design the entire store around a search box. No marketplace, no genres to browse, just a big Google-like search. It was an awful idea because that’s not actually how most people consume media. We quickly learned that they don’t search, they browse. But it turns out that assertion is only half right.

They expect search too, something we learned the hard way when we removed ours entirely. Let me repeat for emphasis: we launched a video store with no search. By 2015 standards that sounds crazy, but we only had the rights to 100 movies. Which meant almost any search resulted in an embarrassing “zero results found” page. It seemed like removing the search box was the best answer. (It was a simpler but far more frustrating time for media on the web, as a designer and a consumer.)

I’ve since learned a lot about search versus browse, and so has the software industry at large. We’ve learned that you need both. If you remove the search box, it’s too limiting. You only see what’s in front of you (typically in the form of ads), so much of the content is hidden. But a spartan search field, with no browse experience, feels too broad. Many people get writer’s block when they come across a text field asks them to type in a tv show, album, or movie name.

This is why you see the same pattern most places you consume media — a big grid of suggestions accompanied by an obvious search box in the corner. But what happens when you click or tap on some media? You’re introduced to one one of the most common design patterns: hub and spoke. Like a bike.

Hub & Spoke

Imagine a bike wheel. Wait, don’t imagine it, I’ll just throw a picture up instead with this handy embed feature. (I knew my Multimedia degree would come in handy!) Notice how there’s There’s one “hub” and a bunch of “spokes” coming off it. Many apps use a similar pattern.

The “hub” is a menu of options, and each “spoke” shows each one in greater detail. For example, a list of emails, SMSes, or restaurants on Yelp.

Here’s a small sample. Note the list (hub) on the left, then the details (spoke) on the right. It makes a lot of sense for a lot of apps.

You can see how simple the approach is by looking at a visual representation of it. For now we’ll refer to it as “unmodified hub & spoke.”

As common as this approach is, it doesn’t really work for complex media apps like Hulu and Netflix. Why not? It’s pretty easy to spot why if you look at a basic wireframe of how a media app might work. Look at this:

We’ve got a list on the left, and the video player on the right. But this means every episode would load automatically on tap, with no way to read reviews or read a description. That’s not a good experience.

And auto-loading isn’t even the biggest problem. This model forces every episode into one giant list. But that’s not how people browse TV. They first find a show they like, then pick an episode. Something like this:

Ok, now we’re getting somewhere. But even this is starting to get pretty complicated for our poor PBS Kids viewer. Let’s take a look at a handy visual representation of how our slightly modified hub & spoke is looking:

So now we’ve got a central hub for showing all TV shows. Then you tap into a TV show and you’re shown every episode available. But this doesn’t tell the whole story either. We also need to break things into seasons . So let’s try that. How much more complicated can it get? A lot. Behold:

Hm, that’s getting crazy complicated. (But kind of pretty too. I want to make a t-shirt out of this.) So now imagine you’re a toddler who has navigated to your favorite episode of Sid the Science Kid and now you want to go watch Clifford the Big Red Dog. If the designers don’t modify the experience from a standard multi-level hub & spoke pattern, here’s the path our poor four-year-old kid is going to have to take:

So if you’ve ever been frustrated with software in your car, your stereo, your television, or anywhere that feels a bit deep hierarchically, you’re probably traversing an experience like this. But is there anything we can do? Isn’t this just something humans have to deal with? Kids are going to have to learn this eventually, right? Well, about that…

Kids: Illiterate, Impatient

Kids can’t always read. Plus their fine motor skills aren’t that great, so tiny tap targets aren’t particularly useful either. So where does that leave us? It means that a seemingly simple interaction like this:

… isn’t as easy for them to figure out. This design isn’t bad per se, and I understand why everything is here. But there is some complexity. And this is not unique to kids! No one reads. Everyone just wants to complete their task as quickly as possible. These are universal truths of software design.

Sure, kids might throw more tantrums than adults, but everyone can benefit from great design. And kids are more likely to struggle with something too complex (without blaming themselves!), which makes them fascinating and incredibly enlightening to design for.

So how did Netflix do? What problems are they trying to solve with this design? Let’s break it down to see how the page is structured.

Ah, so Netflix is combining items that go down one level (the arrows) with things that jump down two or more levels to auto-play media (the play buttons). It’s a clever way to have your cake and eat it too, and they’re doing it carefully and conservatively to make sure it works.

The play buttons on the first page are limited to things you were halfway done watching, whereas everything else goes to a details page. This is smart, because they’re differentiated clearly both in visual details and in terms of common sense expectations. You’re not surprised when a halfway watched episode of Cheers starts playing when you tap it, whereas tapping a giant House of Cards banner feels like it should go to a details page.

And then there’s the main video player page, which looks like this:

Again, this is not bad work. But imagine if you don’t know what an X does, or what an arrow does, and you can’t read. Before a person gets acclimated to what everything does in an app, the screen might as well look like this:

There are some exceptions that everyone understands, notably back arrows and “X” close buttons. But other than a small handful of very common icons, most are hard to understand and remember if they’re not accompanied by clear text. So that’s important to keep in mind while designing for everyone, but doubly so for kids.

Guess what. We’re done with background, and I’m pleased to report:

Now It’s Finally Time To Explode Some (PBS) Kids!

There are plenty of other issues to design for when designing video apps for kids, but we’ll stop there. Just being aware of the hub and spoke model gets us pretty far. Let’s take a look at the finished product so we know what we’re going to be exploding:

Now let’s break things out into regions. There are only four this time:

1. Video playback
2. Video controls
3. Parent Settings
4. Browse

Like most things, it seems obvious when it’s written out in a plain list. But in fact, simple is extremely hard. It takes a lot of work to tuck everything away into these four easy-to-understand sections. Let’s go section by section to see what we can learn.

Video Playback

The first thing they’ve done is break free from the inherent drawbacks of the standard hub & spoke model. How? By putting the video and the browse section on the screen at the same time, every time you load the app. And every time you come out of full screen mode. The implications of this are huge. Which is why we spent so much time analyzing the model first, so you can have a full appreciation of the complexity they dodged with this move.

Let’s compare two visualizations of the models. On the left I’ve put the hierarchical hub & spoke model. Notice that there’s a single place to start, x number of shows, y number of seasons per show, and n numbers of episodes per season. On the right you can see what PBS kids did. Whaaaaaaaaaa—

There’s a lot of goodness here. First, PBS Kids immediately starts playing video. And when the first clip is over, another loads. And another. You can watch for hours with zero taps, which is pretty clever. Ima let you finish, but this might be the simplest media app of all time. OF ALL TIME.

Second, tapping any of the options on the side takes you straight to an episode. They don’t bother with seasons and episode selection at all, which means getting to your favorite show takes one tap. And once the first episode is over, the next one loads up right away.

The third great thing is letting you browse for your next thing while your current thing is playing. And this isn’t just a big deal for kids, this is a core scenario for anyone consuming content. More and more examples are springing up, from Rdio to iTunes to Netflix to Hulu to YouTube and (hot off the press) YouTube Kids.

(Shout-out to the YouTube Kids team — great app, my kids love it, and you made me scramble to fit you into this issue of Design Explosions. Kudos!)

Here’s YouTube Kids with their implementation:

And here’s what YouTube does. Notice here I’m watching a video, but I can tuck it away while I look for other stuff, and then bring it back up when I’m ready.

Watching video while looking for your next video is a pretty big deal for apps like this. Children of the 80's and 90's might remember “picture in picture” functionality in some fancy TVs. But these days it’s just a requirement for media playback apps. You have to be able to search and browse while watching, or it feels needlessly clunky to use.

A Note on Assumptions and Demographics

The model I’m celebrating is making an important tradeoff. They think the simplified design is worth it even if it means videos auto-play and you can’t pick a precise episode.

But I’d wager that the majority of adults would be annoyed if a video started playing without their permission. And they definitely don’t want to see something random, or even something popular. Say they’ve been binge-watching How To Get Away With Murder and they’re looking for season 1, episode 7. If you automatically play a Bob’s Burgers episode, you’re just getting in their way and frustrating them.

But kids are different. In my experience, they have just as much of an opinion about content as anyone … except they’re not as married to watching things linearly. They’ll watch an episode over again. They’ll watch episode 38 before episode 1. Whatever. In most cases landing on their favorite show is good enough. The exact episode is a secondary concern.

And this is why it’s important to keep an eye on your assumptions and the audience you’re designing for. Designers often fall into the trap of designing for themselves, then wondering why their app wasn’t a fit, and cursing at customers for having no taste. Nope. You just didn’t do design research. No one does it enough, so this is your friendly nudge. Do more. It’s important, and it’s the easiest way to become a better designer who can deliver relevant experiences that people love.

And Here Comes Fullscreen

The app makes a reasonable assumption that if you don’t tap anything for about 7 seconds that you’re probably satisfied and it can probably go straight to full screen mode. Meaning the experience has no friction. You show up, video plays, and goes full screen.

Think about the alternative! A lot of video playback software over the last few decades made you find the “full screen” button. Which means you need to find the “get out of full screen” button (or gesture). PBS kids has abandoned that model entirely. When you’re watching content, it’s going to go full screen. Done with full screen? Touch anything in the main view to make it shrink down.

As with all great design, it doesn’t sound like much, but there’s a lot going on here, and the right way forward is never perfectly obvious. It’s time to talk again about my favorite word: tradeoffs . Mmm, tradeoffs.

Tri-States and Madness

Toggles are easy to understand cognitively. “When I tap this, the thing happens. When I tap it again, the thing un-happens.” Simple. Think of a light switch or an on/off switch on your phone.

But video players have so much more to offer! Forward/backward buttons. A media “scrubber” to manually select a part of the video. Volume. A full screen toggle. These are all believed to be vital parts of the media playback experience, but allowing access to them complicates the UI. In most cases, one tap goes to full screen, but a second tap displays a bunch of options, and one of those icons gets you out of fullscreen. That’s three states! Which isn’t necessarily bad, but it’s another set of tradeoffs to take into consideration.

And so, PBS Kids’ one-tap fullscreen toggle is not an accident. They’re optimizing for simplicity on one axis (tapping is a true two-state toggle) while increasing complexity on another (where’s volume? why can’t I scrub the playback head forward? Where’s AirPlay?).

So where did they put everything? Well, let’s take a look in—

Video Controls

Wow, for real? Three options! So in PBS Kids you can move backward, pause/play, and move forward. Nothing else. I’d wager they debated this one a lot, but I think they chose well.

Adding a media playback scrubber would add a lot of complication, and the biggest issue is it has no way to “undo” an action. Say you drag a scrubber back 3 minutes and realize you made a mistake. How can you reverse your action? By dragging the scrubber forward 3 minutes. Kids ain’t got time for that (not to mention the fine motor skills). Most adults don’t either!

But where’s volume? Where’s AirPlay? PBS Kids has decided to leave them at the OS level. Click the volume buttons on the side of your iPhone and PBS Kids will get louder or softer. (in my household, it’s always louder) Or you can go into the Control Center by swiping up from the bottom. Oh, and hey, that’s where AirPlay is for every app too. PBS is leaning on a strong OS level design here, which lets them keep their app cleaner and feel like a good iOS citizen. Good call.

Speaking of which, they’re doing something sort of non-standard in the bottom left corner. Let’s talk about Parent Settings.

Parent Settings

This area has a different color, a label, and it’s clearly something that can be tapped. Yet tapping it does nothing. Wait, what? Say hello to one of my favorite features of the whole app. Tapping does nothing, but swiping works, which is why they have that little “drag me!” visual treatment. Excellent.

Swipe gestures are harder than taps. They may not require an advanced degree in Swiponomics, but unless they’re clearly called out they can be trickier to perform and are more hidden than a tap.

Which is why there’s a little “grab me” icon there. The thinking is that parents can read, and they’ll know to drag to get to the parent features. I tried this on my two year old girls and they never figured out the swipe. They tapped a few times, nothing happened, and they went to tapping elsewhere. All by design. Pretty cool.

The actual contents aren’t particularly relevant for this issue of Design Explosions. You can see info about the app, learn when a show will be on TV next, buy an episode, turn on closed captioning. Just boring adult things.

Next we’ll look at browse. I already mentioned how smart it is to put browse and video playback next to each other, and the tradeoff that led to most of the screen being a giant toggle between full screen and browse. So there’s probably nothing left to get effusive about, right? Wrong!

Browse

There are two big things to call out in the Browse section. Thing the first: the section animates into place when the app launches and is very explicit about what it does.

I sometimes refer to this as a “load-bearing animation”. Some components of a design live or die on how well the animation explains itself, and this is a fantastic example. By auto-scrolling the area with realistic physics, it says a few things remarkably clearly:

1. This section moves!
2. There are other things to discover!
3. You should totally move it to discover things!
4. Wheeeeee!

My whole career, people have talked about “the fold.” The theory is if your content falls off the screen, sometimes people won’t know to scroll down to see it. So you try to let content “peek” into the frame to imply there’s more to be discovered. So this auto-animation they’re doing here? I’m not saying they deserve a Nobel Peace Prize or anything, but it’s a very nice touch for a standard UX problem. One made much worse when your target audience is still wearing diapers. So kudos to them.

The interactions here are pretty obvious. Tap a thing to load it. While it’s loading, it immediately shows a loading animation. The one you’ve tapped on turns yellow. If you hold your finger on them, they depress like real buttons. These are all so obvious, yet a lot of apps miss the basics.

Kobe Bryant recently said that he’s frustrated by young basketball recruits because they spend all their time doing fancy stuff but don’t even know the fundamentals of basketball. The same happens in UX design. Selected states matter. Every millisecond counts. When things take a while, explain the state and provide a way to cancel. Make buttons look actionable. Provide “down states.” These are the fundamentals. PBS Kids nailed them here.

But then! Want to get more fancy? Need to do boring adult things? Then you can drag the section out to get to more options, just like the parent section.

This reminds me of Shakespeare and Bill Watterson. Both artists (who are equally talented) made a point to appeal to two audiences simultaneously, the sophisticated and the unsophisticated. Great apps can achieve a similar result by this sort of technique. Most young kids will never find this side drawer, and most adults will be able to find it without much effort. Win-win.

Catering to one audience is hard enough, but true artists can find a way to cater to two. It’s extremely hard to pull off.

Summary, Of Course

The app doesn’t look like much. You load it, you see video and some other options, and then you pick something. Easy, right?

But next time you’re at a whiteboard and you assume it should be simple, or think “we’ll basically make it like Hulu”, make sure you think a bit deeper. Make sure to do some real design research. Learn to distrust your gut when it comes to representing audiences different than you. That’s what PBS Kids did, and the results are fantastic. But not in an obvious way. PBS Kids isn’t shooting for “wow,” they went instead for “ of course .” They pulled it off and made something we can all learn from. It’s a delight to use.

Or in the stereophonic words of my twin girls, “Yayyyyyyyy Peebeeyessssssss Kids yay yay yay!” Yay indeed.