-
What’s new in iPad app design
Discover the latest updates in iPad app design. We'll take you through improvements to search, navigation bars, edit menus, multi-selection, and more. Learn how you can make your app both more powerful and easier to use when you incorporate customizable toolbars, multi-column tables, and find and replace.
Resources
Related Videos
WWDC22
-
0:00
0:11
0:12
0:16
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.
0:24
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.
0:35
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.
0:45
And now, your iPad apps should consider how to lean into more advanced use cases that come with using iPad like a desktop.
0:52
So that's why we're introducing a number of improvements to help apps become more powerful and easier to use.
0:58
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.
1:17
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.
1:28
We'll start with document editing and look at how these improvements can help people be more productive when using your app.
1:34
1:36
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.
1:45
1:49
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.
1:58
2:00
2:02
It should contain items that help people navigate within and outside of the document, like the back and sidebar buttons.
2:08
2:13
2:18
2:22
You should consider what are the most common workflows in your app where people could benefit from one-tap access.
2:27
2:31
2:36
In iPadOS 16, you can enable customizable toolbars so people can curate the items that are most important for their workflow.
2:43
If your app has a lot of toolbar items or advanced features that not all people need, you should consider enabling customization.
2:50
2:55
Items outside of this section are not customizable because these may include navigation buttons or important features that need to be always accessible.
3:04
3:08
3:13
In the Pages app, similar actions like inserting tables, charts, shapes, and photos are grouped together.
3:20
3:25
3:30
3:35
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.
3:50
When people resize your app, the toolbar items in the center will automatically hide into an overflow menu when there's not enough room.
3:57
4:03
So make sure to arrange important items in the trailing section if you want them to be visible at most window sizes.
4:09
4:12
4:16
4:22
4:27
4:32
4:36
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.
4:44
4:50
Note, these apps may also have a browser view, which can appear as a back button near the document title.
4:55
If your app is primarily used for editing or viewing documents, you should consider using this new menu.
5:01
5:05
Here, you can see there is a combined set of standard document actions as well as app-specific ones.
5:11
So, what should go inside here? The menu should contain actions that affect the document as a whole.
5:19
Here are some examples of standard actions that should go inside the document menu: Duplicate, Rename, Move, Export, and Print.
5:28
5:31
5:34
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.
5:48
Next, I want to talk about a couple of features that can help users work more efficiently in your iPad app.
5:54
5:56
6:01
6:08
When using touch, the menu appears horizontally and people can now scroll back and forth between the list of options like this.
6:16
When using pointer, the edit menu shows a more comprehensive list of options in a vertical layout like this.
6:22
6:27
6:33
6:37
6:42
6:46
6:53
6:56
6:59
7:04
7:07
Try to integrate these menus into any editable content so that people can be more productive when using your app.
7:15
7:16
7:20
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.
7:30
This also supports advanced use cases like matching specific parts of a phrase or replacing all matches with a different word.
7:38
And when iPad is attached to a hardware keyboard, the find and replace interface sits above the app in this compact appearance.
7:46
To make find and replace easy to access, consider adding an item inside the overflow menu as well as the system keyboard shortcuts.
7:55
7:58
8:02
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.
8:11
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.
8:20
8:26
8:31
8:36
8:43
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.
8:53
With browser-style navigation, it's up to your app to choose the buttons that go to the left of the title.
9:01
You should make sure to keep to just those navigational buttons like back and forward, or maybe a sidebar button.
9:09
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.
9:23
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.
9:38
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.
9:50
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.
9:59
10:04
10:09
10:12
10:16
10:21
10:27
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.
10:38
10:41
10:45
10:54
But you still have to use the toolbar to act on the selection and to leave edit mode when you're done.
11:01
11:05
11:12
You can now use keyboard modifiers like Command and Shift to select and deselect, also without going into editing mode.
11:21
11:29
11:36
11:42
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.
11:53
Along with these multi-item context menus, iPadOS 16 also supports context menus in empty areas, which you can use to create something new.
12:04
12:08
12:15
12:18
12:21
12:28
12:36
12:43
12:49
12:54
12:58
13:02
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.
13:11
13:17
13:22
13:30
13:36
So on iPad, you should consider including submenus in your app's context menus to make quick changes just like these.
13:46
13:54
14:00
14:02
In the past, editing a reminder's priority meant pushing into the detail view, then popping back out.
14:10
14:15
14:19
14:23
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.
14:34
When you're using a pop-up button, choose places where you have a well-defined set of options to pick from.
14:40
14:47
14:51
14:56
But if you only sometimes need more controls, a good choice can be to add a Custom option into the menu.
15:03
When someone chooses Custom, your app can reveal the extra controls without getting in the way of the other choices.
15:12
15:19
15:22
15:25
15:32
15:36
15:42
15:45
15:49
15:53
Now, since iPad screens are relatively small, you'll only be able to show the most important columns.
16:01
But you can swap those columns out, like replacing Size with Kind, just by choosing a different sort option.
16:09
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.
16:21
16:27
These tables built into iOS 16 are built to show more information about a list of content, not to show a spreadsheet of data.
16:37
16:43
In fact, when you resize an app to a compact width, tables will switch back into being single-column lists.
16:52
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.
17:07
17:13
17:17
17:22
17:23
17:29
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.
17:41
17:45
17:49
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.
18:01
-