Of all the new devices Apple has released this year, I’m most excited about the iPad Pro. Its as close to a self-contained cinematic experience as Apple can create. And I've been preparing tappr.tv for it for almost 3 years now.
The writing has been on the wall for quite some time that Apple was going to expand into all kinds of screen sizes, and tappr.tv has tried to keep up. When iOS 7 first arrived, Apple emphasized deference, clarity, and depth in UI design. Deference, in particular, meant giving as much focus as possible on the content, and getting controls and other style designs out of the way.
There were several considerations here:
- For the user, the physical context around tappr.tv was likely holding larger devices with two hands in landscape orientation and smaller devices in one hand
- The main content of tappr.tv is a dance, a dynamic and kinetic animation that fills the screen.
- There are lots of ways to view collections of dances, as well as ways to see members of the tappr.tv community. This leads to a deep "site map" for the app:
Knowing all this, I designed a custom stage view with a layered custom master/detail model on top, that would work on all iOS devices in any orientation. Dances are presented in the stage view, which is always present, while navigation is handled by the master/detail views layered on top, each with a blur background to show the stage below. When switching between stage and master/detail, the master/detail views slide in and out like curtains. And in order to handle the deep "site map" for the app, the master view acts like a tab bar view controller, but is also stackable like a navigation view controller.
I’m very happy with the design choices I made, as they have scaled well for both the depth of the data model as well as across all the available screen sizes.
Here are a set of screenshots showing representatives views across the various screen sizes:
Screen | 1. Sign Up | 2. Popular | 3. Stage | 4. Dance | 5. Profile | 6. News |
3.5" | ||||||
4.0" | ||||||
4.7" | ||||||
5.5" | ||||||
9.7" | ||||||
iPad Pro, 12.9" |
The point here is to show the transformation from itty bitty to really large, and all the steps in between. Moving down each column:
- The Sign Up view scales well, giving amble breathing room to the simple instructions, and framed by the animation thru the frosted blur.
- The Popular view show grids of dances available, and scales extremely well! I do use two difference cell sizes, though.
- The Stage view are meant to show just how much real estate is available to the content about to be shown.
- Screenshots were captured via the simulator, which struggles to render at larger screen sizes. Thus the increasingly sparse Dance views. The good news is, not only is the UI designed to scale, but the dance (motion) content is captured and stored in a normalized data stream, such that it can be rendered in realtime to any screen size. On larger screens, I double the overall scale, and I might consider tripling it on the iPad Pro.
- There are a set of views available to look at informational profiles and the overall community, and these don't make great use of larger screens. I can imagine showing more graphs rather than raw numbers.
- Like the Profile view, the News view look great at smaller screen sizes, but don't look great on the larger screens. I have a new design in mind for news that will incorporate an iconic approach: user + action + dance + dancer(s) + textual description.
OK, two last screenshots to give you a sense of just how large the iPad Pro really is:
iPad Air 2
iPad Pro