Designing for Big Screens

Screenshot 2014-09-30 10.32.43

Apple’s introduction of two new larger-screened mobile devices (well, let’s face it, one is practically a tablet), the 4.7-inch iPhone 6 and it’s larger sibling, the 5.5-inch iPhone 6 Plus, it has presented a new paradigm for mobile design best practices in the iOS community. Whatever practices we have been conforming to over the past few years, will certainly need to be altered, and as the next year or so will reveal, new debates and UX design trends will no-doubt emerge. Some we can spot from now, some will organically and evolutionary emerge. We therefore need to re-think the paradigm of Designing for Big Screens. The new iPhones

The biggest change from the iPhone 5s, which was slightly larger than it’s predecessor, the iPhone 4s, is that as of now, you definitely cannot use the phone with one hand, as your thumb would certainly not be able to reach the top of the screen. This means, developers and designers will now need to re-think how they would put elements on the screen, where they will position them, and of course, making better use of the greater real-estate now afforded.

Swipe to Navigate

The notion of having navigational items at the top of the screen is one thing that needs to be re-thought. As of iOS 7, Apple had allowed navigation-controllers to automatically take swipe gestures, to allow you to push or pop from one screen in the navigation stack to another, a subtle hint that gestures will take the place of navigational buttons.

That day has come, and with the inability of mortals to reach for the top of the screen, we need to re-think whether we need to have buttons at the top. We already have the ability to have tool-bars at the bottom of the screen, perhaps they will take on greater prominence now. Twitter has been doing it for a while already, we may see Facebook re-think it’s design as well. Perhaps we will see new types of navigational buttons, contextually popping up from the bottom emerging as well.

Landscape support

When the iPad came out, Apple suggested and in fact, advocated that all apps should support landscape and portrait in their Human User Interface Guide, a nod at how a larger screens means we need to optimise and make the most of screen real-estate. Whilst even on the iPhone 5s we still saw apps stay portrait only, I believe this will now certainly change.

Apple Mail on 6 Plus

Having an app in portrait mode, or not optimised correctly on an iPhone 6 Plus will look strange. You can’t just simply rotate the screen and have the app optimised for top-down design, you need to add similar components to what we find on the iPad, such as a split screen controller, like you see on Apple’s Mail app. And Apple have already given you that ability.

As of iOS 8, you can now specify whether your app will appear as a split-screen, something we had for the iPad, now available on the iPhone. You will now have the closer feeling of a computer desktop on a mobile device, not just on an iPad, but still maintain support for the 4.7 inch devices, which may not quite be large enough for a split screen.

This does bring up an interesting notion, that if you are going to support both the iPhone 5s, 6 and 6 Plus, you might as well support the iPad. Instead of distinguishing devices by whether they are iPhone or iPad, you now just distinguish between larger and smaller screens, more generically. Xcode already allows you to do this, as of Xcode 6, where you can design “Size Classes” to decide between different sorts of sizes.

This Xcode 6 feature gifts you the ability of working with different screen sizes and device orientations, in one storyboard file, and each view controller in your app gets a trait collection object, which contains two size classes (horizontal and vertical) with each of those having three values (compact, regular or any). You will therefore be able to layout your interface and view controllers based on each of the options in the grid.

size_class_chart

Of course this is a blog post on it’s own, and hopefully I can get to it, but for the purpose of this post, I encourage you all to think of different ways in which UX has changed as a result of larger mobile screens.

Doron KatziOS, iPhone, iPhone 6, iPhone 6 Plus, UX