How to design a great iPad app with the newest iPadOS 14 features
We all know that iPad Pro already has a seriously powerful computing power and that it’s possible to create meaningful stuff with Apple Pen.
But do we really know how to design great apps for iPad taking advantage of this powerful device to offer better experiences for the users?
At this year’s WWDC, Apple announced many new features for the iPadOS 14 interface and experience. Grant Paul, from the Apple Design Team, reinforces that "just because the iPad is between the iPhone and the Mac, it doesn't mean that is halfway between them, and a great iPad app needs to be dedicated to what is unique and especial about the iPad."
It means that a great iPad app experience is not defined by an adaptive interface that scales to the different window size, but through understanding how to take advantage of the unique capabilities of iPad and its large Multi-Touch display to offer an experience even more distinctive.
So, let’s see how you can do that in your apps.
Layout
Flatten your navigation
Update part of the screen at a time instead of using full-screen transitions.
Some interactions that work very well on the iPhone, do not work as well on the iPad, such as large screen transitions. In addition to leaving a large empty space on the screen that could be better used, navigation ends up getting longer and slower.
.
.
.
.
Showing more content
If you have a bigger screen, you’ll need more content to fill it. Now the Photos app has been updated on iPadOS14 bringing the new Sidebar navigation, filling the old empty space with content, such as your photos and also the navigation control on the left.
.
And it makes it easier and faster to do things like drag and drop, since the target that you want to drop is already visible on the screen since you start dragging.
.
Stay in context
In iPhone apps it's common to be focused on a specific thing as there isn't much space on the smaller screen.
And on iPadOs 13 it was the same behavior, and you didn’t see anything but the file you were renaming, losing all the context on the screen below.
But on the iPad we have enough space to show more than one thing at the same time, right?
.
.
Now, iPadOs 14 brought file renaming in-line, allowing that the rest of the interface still useful when renaming a file. So see if your app is providing people with useful context or if they're blocking other parts of your app. See if it would work better if your controls were at the same level, rather than overlays.
.
Create immersive experiences
This is about going deep on a specific piece of content. And compared to a Mac, this ability to focus in on a single piece of content is something that’s really unique and special about the iPad.
.
For example, In Music, the Now Playing screen takes over the entire display, so you can focus on the music and the lyrics that are playing.
Like it’s become the piece of content. It leaves your app feeling like more than the sum of its parts.
.
Inputs
The best iPad apps will have support for all these different inputs, from Keyboard, and now, Pencil and Trackpad, exploring what each input does best.
.
Adopt system features
So after Multi-Touch, use the built-in features in iPadOS to support all of these other inputs. It's recommended that you add keyboard shortcuts for all common actions in your app for people using a Magic Keyboard or other keyboards.
The iPad now also supports the Trackpad. But most Trackpad support is going to come automatically because all of the built-in controls in iPadOS support the Trackpad already.
And finally, make sure to support Scribble with the Apple Pencil. Like pointer support, it gets automatically when you use the system text input controls.
.
Combine multiple inputs
A very unique and powerful thing on the iPad is the possibility to combine several entries at the same time, in a single interaction.
And in your applications, you can explore this and generate excellent interactions by providing support for the combination of modifier keys with all inputs, such as Touch and Trackpad or Pencil and Touch.
.
You can, for example, draw an animation much faster by combining the Touch input and Apple Pencil for a great interaction.
.
These are some ways to make your application’s interaction more powerful by combining different inputs.
.
Sidebars
To optimize iPad layouts, one of the key new features in iPadOS 14 is the sidebar.
Taking a look at Files, for example, the new iPadOS 14 sidebar makes navigation and customization simpler than ever and making navigation simple and fast.
And the sidebars in iPadOS are converted into sidebars on MacOS, so they’re perfect for creating the navigational structure of your Catalyst app, too.
.
These are the features you can explore from the new sidebar:
- It provides app layouts optimized for iPad.
- It supports both modal and non-modal editing so that your users can quickly navigate to what's most important to them.
- It supports drag-and-drop for powerful multi-window and multi-app interactions.
- Its content can be organized into collapsible sections.
- It can be used as an overlay so that it's always available but never in the way.
- You can interact with it using fluid swipe gestures, so bringing it into view or getting it out of the way are fast and easy.
- And, finally, it brings the benefit of three-column layouts to all iPads.
.
Toolbars
Using toolbars is also another great way to optimize your iPad app to make better use of screen space with its interface.
.
.
On iPadOS 13, some toolbars took up more space than needed on the screen. So, as we saw earlier, this toolbar doesn’t seem to make a great use of the space.
.
.
.
Now on iPadOS 14, a toolbar has been positioned at the top, making a much better use of this large screen.
However, when there's less room such as in compact-width, these toolbar items stay at the bottom.
.
.
.
Now, some quick tips when working on toolbars in your iPad app:
- Place toolbar buttons at the top iPadOS
Default to placing the toolbar buttons at the top in iPadOS. This is not always possible, but for one, two and three button toolbars, it often is. - In compact-width, move toolbar items to the bottom
Use an alternative layout in compact-width to move toolbars items to the bottom when there isn't the room to place them at the top.
.
Recaping
You need to design your app specifically for the iPad. The ways you can do that are:
- Flattening your navigation
- Letting your content fill the display
- Showing more content
- Giving users additional context
- Supporting all of the iPad's inputs: Trackpad, Keyboard, Pencil
- Supporting Multi-Touch, and making them work together for some great interactions
- Using sidebars for really fast navigation rather than tab bars
- And putting your actions and your controls into the top navigation bar rather than in toolbars at the bottom, to make best use of the iPad's display
Those new controls are gonna work great in your iPadOS and your Mac Catalyst apps in addition to on the iPhone.
.
“As designers an as developers 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.” Grant Paul, Apple Design Team.
.
What can we think of all this?
With all the changes in iPadOS 14, we saw that everything is approaching an omnichannel experience, and although Apple itself mentions a creation of a specific system for the iPad, it increasingly seems that we are being guided towards a gigantic behavior change.
What I mean by this is not just an integrated ecosystem, but it seems to be a decision made for years to come, where we will replace our computers for the iPads.
This may sound really weird at first, but how many times Apple changed our way to interact with the products, right?
And as the campaign itself says, your next computer is not a computer.
.
.
We are already used to the sidebars, we already know about file management, we also need the portability, with that we will gain even more versatility with a lighter device, we have the keyboard with a trackpad and a new version of the cursor called Pointer, and we also have the Project Catalyst, launched in 2019 to migrate our apps from iPadOS to MacOS. A single multiplatform experience.
What can we ask ourselves now is: What can we expect from Apple for the next 5 years? With this speed of evolution, will we still have iMacs or MacBooks as we know them today? How is gonna be our work flow?
.
.
.
Resources
Design for iPad Session — WWDC 2020
Two Weeks with iPadOS 14: Redefining the Modern iPad Experience — Mac Stories
iPadOS 14 introduces new features designed specifically for iPad — Apple
The 5 most important features in iPadOS 14 — iMore
Designed for iPad — Vidit Bhargava
How to design your app for the new iPad Pro and Apple Pencil 2.0 — Azhar
Little UX crimes, Figma for iPad, resilient design — and more UX this week — Fabricio Teixeira
