Designed for iPad

Hello and welcome to WWDC.

Hi, and welcome to our session on iPad app design. I'm Grant Paul from the Apple Design Team. Today, we want to show you some of the new features and changes in iPadOS 14, what those mean for your apps, as well as some general tips on how you can make a great iPad app. With technologies like Auto Layout, Mac Catalyst and Universal Purchases, many apps are continuing to expand to more devices and more platforms. People are getting more opportunity to use their favorite apps on all of their favorite devices wherever it's most convenient for them. And for us as designers and as developers, this means we need to focus in on what's best for each platform to make sure that every device and every platform is creating a great experience.

So, on the one end, you have the Mac. The Mac has the biggest screens, it has the most precise input methods, and Mac OS apps are there to support all of the most advanced use cases while still staying accessible to everyone.

On the other side, you have the iPhone. iPhone apps are all about getting quick and easy access to the most important functionality while you're on the go, and all through Multi-Touch.

So for both of these, the design direction for your apps is pretty clear.

But what about the iPad? Just because the iPad is in the middle, that doesn't mean it's just halfway between the Mac and the iPhone. A great iPad app, it needs to be just as dedicated to what's unique, to what's great and special about the iPad as apps are about what's unique and great about the iPhone and the Mac. And that's what we're going to talk about today. We're going to show you some design principles that we applied in our apps for iPadOS 14, and we're going to talk about how you can use those same principles in your own apps. So first, we're going to talk about updating your app's layout to take full advantage of the iPad's large display.

After that, we're going to cover how to best support all of the different inputs on the iPad.

Then, I'll hand it over to Vince Lane to talk in detail about some of the new UI components in iPadOS this year. Things like our new Split Views and the great new Sidebar navigation.

And finally, we'll cover some changes in how to use toolbars to position your buttons and your actions. So the most important, the most prominent feature of the iPad is of course its big display. So, if you're making an iPad app, your first step should be to take advantage of the display to show your content and your user interface in the best possible light.

So, let's look at a few examples from our own apps of how you can do that.

The first technique that I'm going to talk about is to flatten your app's navigation. Avoid big full-screen transitions in favor of updating part of the screen at a time.

Let's look at an example of that.

So, here's part of the Photos app from iOS 13. You can choose an album or a media type like your Portrait mode photos, and it'll slide over the entire screen to show that content. It's simple, it's familiar, and it works great on the iPhone.

And on the iPad, we had brought over the same familiar navigation structure with full-screen transitions. But on the iPad, that ends up leaving a lot of empty space on the right side of the screen. So, on iPadOS 14, we've updated the Photos app to use our new Sidebar navigation. So instead of empty space, it fills the display with the content that you want to see, your photos, as well as your navigation controls on the left. It's using that space to show you something useful.

But showing content along with your navigation also helps in other ways too.

For example, if you want to switch between different parts of your photo library, to your albums or to all of your photos, it's now just a single tap away.

And it speeds up features like Drag and Drop since the drop targets, the albums that you want to drop your photos into, are already visible on the screen as soon as you start dragging.

Now, the next principle that I want to talk about is showing more content. Now, this one is a pretty simple idea. You've got a bigger screen on the iPad, so you need more content in order to fill that up. But getting that right, it takes some intentional design choices.

So, back in iOS 12, here's what the Home Screen looked like on the iPad. You can see all the icons are relatively far away from each other. They're pretty spaced out.

In iPadOS 13, we added an extra row and column of icons, and now, in iPad iOS 14, we've added in our new widgets. So, the icons are still pretty big and you can see more of them at once. It's using the space in a better way. Here's another example: This is the Files app from iPadOS 13. Now, this one is interesting because the files are filling up the entire right side of the screen. There's no gaps between them, and there's no big empty space.

But if you look, it's only showing 12 icons at a time, and we thought we could do better.

So, in iPadOS 14, Files now uses significantly smaller icons. Now, these icons are still plenty big enough to see, to read, and to tap on, so the app is just as usable, but it's a great example of how small tweaks to density can make your app feel so much more efficient, and more powerful, just by making better use of the available screen space.

Now this new layout here means that Files is showing almost 300% as many icons. Can you believe that? As long as your text is readable, you should see if you can show more on screen in your apps too. So, that was showing more content.

Now, our next technique is adding more context.