What’s new in iPad app design

♪ instrumental hip hop music ♪ ♪ Hi, welcome to our session on iPad App design.

I'm Bryant Jow.

And I'm Grant Paul, and we're from the Apple Design Team.

Bryant: Today, we'll show you some of the new UIKit and SwiftUI updates in iPadOS 16, as well as some general tips for incorporating these into your app designs.

With iPadOS 16, people can take advantage of larger resolutions with extended display support and display zoom and work with their apps in a single view by using Stage Manager.

So what does this mean for iPad apps? Your app design should always embrace larger screens and different window sizes, as well as support all the different inputs of iPadOS.

And now, your iPad apps should consider how to lean into more advanced use cases that come with using iPad like a desktop.

So that's why we're introducing a number of improvements to help apps become more powerful and easier to use.

Here's a preview of the features we'll cover: toolbars and customization, document menu, editing menus, find and replace, navigation, search, tables, and selection.

Today, we're going to show examples of how you can incorporate these updates in designing two kinds of experiences: document editing and content browsing.

We'll start with document editing and look at how these improvements can help people be more productive when using your app.

Let's jump into toolbars.

Toolbars are a really important component in app design because they organize your app's functionality, and this impacts how easy it is for people to go about their workflows.

Here's the previous toolbar in the Pages app in iPadOS 15.

In iPadOS 16, we're introducing a new toolbar layout that aligns titles to the left side and allows apps to offer more toolbar items in the center.

Let's take a closer look.

Here's the leading section of the toolbar.

It should contain items that help people navigate within and outside of the document, like the back and sidebar buttons.

And it displays the new document title and menu, which I'll come back to later.

With more space in the toolbar, apps can elevate commonly used actions in the center.

In iPadOS 16, the Pages app shows actions for inserting content.

You should consider what are the most common workflows in your app where people could benefit from one-tap access.

But be careful not to pack your app's toolbar with too many items.

Let's look at a couple more tools to consider if your app has a lot of functionality.

In iPadOS 16, you can enable customizable toolbars so people can curate the items that are most important for their workflow.

If your app has a lot of toolbar items or advanced features that not all people need, you should consider enabling customization.

Note how items in the center section can be added, removed, or rearranged.

Items outside of this section are not customizable because these may include navigation buttons or important features that need to be always accessible.

Toolbar items can also be grouped or collapsed.

Use groups to keep related actions together in the toolbar or the overflow menu.

In the Pages app, similar actions like inserting tables, charts, shapes, and photos are grouped together.

When there's not enough room in the toolbar, these actions collapse into a plus button.

You can also make wide toolbar items collapse into a compact glyph at smaller window sizes.

Now, let's take a look at the trailing section of the toolbar.

This section may contain a variety of items: any button that invokes nearby inspectors, important items that should stay visible at any window size, and an optional overflow button for people to access hidden items as well as toolbar customization.

When people resize your app, the toolbar items in the center will automatically hide into an overflow menu when there's not enough room.

And when the window is resized even smaller, only the leading and trailing sections remain.

So make sure to arrange important items in the trailing section if you want them to be visible at most window sizes.

So here's a quick recap of toolbars.

Consider if there are common workflows that you can elevate in the toolbar.

Arrange important toolbar items in the trailing section to avoid overflow in smaller window sizes.

Enable customization if your app has many toolbar items and advanced use cases.

And wherever possible, try to organize similar items into groups.

Now let's take a look at the new document menu that we mentioned earlier.

To make it easier for people to find document-related actions in one place across apps, we're introducing a new title and menu in the toolbar.

This layout is intended for document viewers like Quick Look or document-editing apps like Keynote.

Note, these apps may also have a browser view, which can appear as a back button near the document title.

If your app is primarily used for editing or viewing documents, you should consider using this new menu.

Let's open Keynote's document menu by clicking the title.

Here, you can see there is a combined set of standard document actions as well as app-specific ones.

So, what should go inside here? The menu should contain actions that affect the document as a whole.

Here are some examples of standard actions that should go inside the document menu: Duplicate, Rename, Move, Export, and Print.

You can also add custom actions for your app.

But not everything should go inside in the document menu.

Actions that take content outside of your app should be placed under Share, and actions that directly affect content inside a document should support toolbar customization and appear in edit menus where appropriate.

Next, I want to talk about a couple of features that can help users work more efficiently in your iPad app.

Let's look at edit menus.

These menus may appear over selected text and contain edit options such as Copy and Paste.

In iPadOS 16, edit menus have a new look and are optimized for touch and pointer.

When using touch, the menu appears horizontally and people can now scroll back and forth between the list of options like this.

When using pointer, the edit menu shows a more comprehensive list of options in a vertical layout like this.

Your app should support both styles for touch and pointer interactions.

When you incorporate these edit menus into your app, here are a couple of things to remember.

Don't remove the standard actions like Cut, Copy, and Paste.

These editing tools are important to many workflows and should be always available.

And you should organize custom actions close to related system actions.

In iPadOS 16, the Notes app groups formatting options for checklists and text in the same section.

Edit menus are not just limited to text fields.

They can also apply to objects on a document canvas.

Here's an example of selecting layers in Keynote with touch.

And that same menu when using pointer.

Try to integrate these menus into any editable content so that people can be more productive when using your app.

So that's edit menus.

Now, let's dive into find and replace.

In iPadOS 16, we're introducing find and replace into the system keyboard so people can quickly search for specific words, phrases, and more within a document.

This also supports advanced use cases like matching specific parts of a phrase or replacing all matches with a different word.

And when iPad is attached to a hardware keyboard, the find and replace interface sits above the app in this compact appearance.

To make find and replace easy to access, consider adding an item inside the overflow menu as well as the system keyboard shortcuts.

So those are some of the new features we're introducing for document editing.

Now I'm going to hand it off to Grant Paul, who will talk about some more improvements.

Grant: Thanks, Bryant. Next up, I'm going to talk about improvements for content browsing, something that you do in a lot of different iPad apps.

Content browsing experiences are everywhere on iPad, whether you're managing in your photo library in Photos, browsing Apple Music, or choosing a document in Pages.

iPadOS 16 has some great new features and patterns for content browsing.

I'm going to focus on three areas that are important to this part of an app.

The first one is some updates to app navigation.

iPadOS 16 has a new style of navigation that we call "browser-style" navigation.

For example, the Files app uses back and forward buttons to let you easily browse between folders that might have come from different places in the sidebar.

With browser-style navigation, it's up to your app to choose the buttons that go to the left of the title.

You should make sure to keep to just those navigational buttons like back and forward, or maybe a sidebar button.

Browser-style navigation works well when your app has a complex hierarchy where people are often jumping between different levels; things like a file browser or a web browser.

If your app has a shallow or flat hierarchy, like Photos, you might not need browser-style navigation because all of the destinations in the app are already available with a single tap in the sidebar.

If you do use browser-style navigation, it goes great with another new feature in iPadOS 16: putting search in the top right of the navigation bar.

Search in the top right is great when your search bar is used to filter the content that you're looking at below on the same screen.

And even though it's in the navigation bar, it supports suggestions.

Suggestions show up right off the field as you're typing.

Your app can suggest recent searches.

It can also suggest recommendations for what to search for.

And it can suggest filters to narrow down your search.

Again, search in the top right is meant for searching the content that's showing below.

If you want to search your entire app at once, it's better to keep that in a search tab so that people can get to search from wherever they are in your app.

That's what's new for navigation.

Next up, I want to talk about selection and menus.

iPadOS 15 introduced band selection, using the pointer to quickly select multiple notes at once.

But you still have to use the toolbar to act on the selection and to leave edit mode when you're done.

iPadOS 16 makes that much easier.

If you use band selection, iPadOS no longer enters editing mode automatically.

You can now use keyboard modifiers like Command and Shift to select and deselect, also without going into editing mode.

And once you have the notes selected, it's just a secondary click to act on all of them together.

With touch, you can long press to get a context menu for those same actions.

And these interactions work just as well with a list.

You can hold Command to select multiple notes, use drag-and-drop to move them into a folder, and bring up a context menu to act on multiple notes together.

Along with these multi-item context menus, iPadOS 16 also supports context menus in empty areas, which you can use to create something new.

For example, you can make a new folder in Files.

Or, you can paste a copied event in Calendar.

OK. That's a lot of things to keep in mind for selection.

Let's go through the checklist.

Your app should support keyboard focus to navigate around using the arrow keys and with tab.

Support band selection to quickly select multiple items in a grid by using the pointer.

Allow multiple selection without entering editing mode when using the pointer or the keyboard.

Add context menus to act on multiple selected items together.

And in the empty area, use a context menu to create new items.

The next thing I want to talk about is submenus.

On iPhone, submenus open vertically.

Since space is limited and they're an extra tap away, it's best to use submenus on iPhone only when you really need one.

But on iPadOS 16, submenus open horizontally when they have space available.

This makes them much faster, especially with a pointer.

For example, Calendar uses a submenu to really quickly move an event into a different calendar.

And Reminders uses submenus to quickly change the due date and the priority.

So on iPad, you should consider including submenus in your app's context menus to make quick changes just like these.

Along with submenus, iPadOS 16 also adds a new control for pop-up buttons in lists.

Just like any other pop-up button, these show a menu to let you choose an option.

Let's look at these in practice.

In the past, editing a reminder's priority meant pushing into the detail view, then popping back out.

It's a bunch of taps, and it also took you out of context.

In iPadOS 16, you change the priority right in place.

It's much faster, and you stay right where you are.

So as you've seen here, the main use for these pop-up buttons in lists is to replace navigation pushes in popovers and in modals.

When you're using a pop-up button, choose places where you have a well-defined set of options to pick from.

Make sure to only use a pop-up button if your options really do fit nicely into a menu.

If your option is better as a switch, use a switch.

And if the options really need more controls, don't try and force it.

But if you only sometimes need more controls, a good choice can be to add a Custom option into the menu.

When someone chooses Custom, your app can reveal the extra controls without getting in the way of the other choices.

And if your options need an explanation, you can put that underneath the pop-up button in the list.

All right. That's what's new for selection and menus.

Lastly, I want to talk about tables.

Tables are a great new component in iPadOS 16 to make your lists of content more powerful.

Now, in the past, you may have used a control called a table.

But that wasn't quite right; it's not much of a table if it only has a single column.

iPadOS 16 has a real table.

Tables in SwiftUI show multiple columns of information.

And they let you sort just by tapping a header.

Now, since iPad screens are relatively small, you'll only be able to show the most important columns.

But you can swap those columns out, like replacing Size with Kind, just by choosing a different sort option.

And as makes sense for something that's all about having powerful access to your content, sortable tables also support all of the selection features I talked about earlier.

So tables are a really powerful control, but it's important to use them correctly.

These tables built into iOS 16 are built to show more information about a list of content, not to show a spreadsheet of data.

You can think of them as an extended version of the list views that you already have in your app.

In fact, when you resize an app to a compact width, tables will switch back into being single-column lists.

And when they do, we recommend taking those details from the secondary columns and moving that information into a secondary line of text within each row so all of that information is still available.

And for sorting, you can use a toolbar button to quickly reveal the sort options.

So those are the new components and features in iPadOS 16.

Let's go back to Bryant to recap everything we talked about today.

Bryant: Thanks, Grant.

A lot of the features we covered today are aimed around helping users be more productive with iPad.

As you think about how these relate to your iPad app, consider how you can make your app more powerful by offering more functionality, better organization, and make common editing and browsing tasks more efficient.

Evaluate your app design in resizable windows and larger screens.

And ensure your app works seamlessly with touch and pointer.

Grant: And if you want an overview of what goes into designing a great iPad app, you should make sure to check out our previous talk, "Designed for iPad." Bryant: Thanks for watching.

♪