What Should Designers Know About Universal App?

Published in

UX Planet

6 min readJul 24, 2018

The designer doesn’t have to know how to code, but understanding the technology is a necessary skill because the quality of a product depends on it. To remain competitive in the market, you need to speak with a developer on the same language and understand all the technical aspects of the product implementation. I’ve been designing for more than 5 years, most of which I devoted to working with mobile applications. In the process of work, I often noticed that designers have a hard time understanding the concept of a universal application. To help them get a solid grasp on it, I decided to start by defining a universal application and its advantages. I want to explain what a split screen is and how the application behaves in this mode, what size classes are needed for and how the navigation of your application is related to the implementation of it on iOS devices. If you are still interested and you see benefit in this — read on.

Latest WWDC 2018 brought us the news, that the new MacOS Mojave will feature applications that used to exist only for iOS. To mention some of them: News, Voice memos and Home. Such adaptation of applications is a worthwhile trend because it makes it possible for users to have an uninterrupted experience with a single app for iPhone, iPad and MacOS. I think there will be more and more such applications emerging. Therefore, I have decided to go over and assist in understanding the concept of the adaptive model for designers.

Apple sells millions of mobile devices — iPhone SE, iPhone 8 and 8+, iPhone X, earlier models, iPad and iPad Pro. These devices not only differ in the size, but also in the behavior of applications. We, as designers, should be able to create an app design that will look awesome on all these devices. It should be noted that the applications should be correctly displayed on the iPhone and iPad, and in Portrait View and Landscape. Moreover, do not forget about multitasking on iPad, where split-view mode can be used for working with multiple applications simultaneously. As Apple claims, the same iOS application has 300+ display combinations on mobile devices. This is one of the main reasons for creating the concept of an adaptive model.

While researching this topic, I realized that there is not much easily accessible and understandable information for designers on the Internet — one more reason why I decided to touch on this topic in the article.

What is a Universal App?

A universal application is a single application that adapts for iOS devices, such as the iPad and iPhone.

Advantages of a Universal App

Let’s consider the benefits of creating a universal application from the perspective of the user, designer, and developer.

For the developer — the most likely advantage is the ability to support the application for all iOS devices. Before it became possible to create universal applications, developers had to create several separate entities of the same application for the iPad and iPhone.
It is also convenient for the designer to maintain a single application and save a continuous user experience on iOS devices.
The user now does not need to download the same application twice — separately for the iPad and iPhone. A user sees an adapted view of the application for the iPad.

Split View and Size Classes

With the arrival of more devices on the market, Apple presented the adaptive model for iOS 8 and then the split-screen technology for iOS 9

Split-screen is a technology that allows you to work with multiple applications on the iPad or on the iPhone 8+ in landscape view at the same time. To ensure uninterrupted work within applications, an adaptive layout is usually created.

There are 16 sizes to which the application can adapt. Apple suggests using size classes to make the application adapt to any size and orientation.

Size classes help to classify the width and height and, in accordance with them, predict the behavior of the application. There are three classes: Compact, Regular and Any.

Compact is a limited space, Regular is an expanding space.

As you can see below iPad and iPad Pro have a Regular width and height in Portrait and Landscape view. And iPhones besides iPhone 6/7/8 Plus have Compact width and height. Only iPhone Plus has a Regular width in Landscape view.

Also I’ve added a sketch template with size classes: https://www.dropbox.com/sh/qleperkhlj1tpud/AADfO5svgOeK-pGoUFn5619oa?dl=0

Dependency Between App Navigation and Its View on iOS Devices

In a perfect world, the design of a universal application should start from the mobile first approach or the Compact view. The behavior of the application on the iPad depends on the navigation style.

Apple describes several navigation styles in its guidelines:

The Hierarchical Style (Settings, Mail, etc.)
Flat Navigation Style (Apple Music and Apple Store)
Content-Driven or Experience-Driven Navigation (most of the Games)

Hierarchical Navigation Apps

The hierarchical navigation type is utilized with the Mail app. The application screen is divided into a list of letters (Master) on the left and the contents of the letter on the right (Details). Apple also recommends, removing chevrons, which tell us about the possibility of a transition from the list. There is a good reason for this — being that the list can be navigated and the contents of the list item are already open on the Detail Screen.

Flat Navigation Apps

Applications with flat navigation tend to look the same as on the iPhone, only they adapt to the size of the iPad. Apple Music, App Store, etc.

Content-oriented applications, like games, usually also adapt to the size of the iPad and look about the same as on the iPhone.

Applications with Complex Navigation

There are numerous applications out there with more complex navigation. For example — a hybrid of two navigation types, such as flat navigation plus hierarchical.

Dropbox combines hierarchy and flat navigation while keeping the tab bar on the Master part of the screen. This structure is appropriate for file systems. It gives the ability to go deep inside the tree of files and reach their details.

Conclusion

To create a universal application with the native approach, consider the following: determine the type of navigation for your application, then start designing for the iPhone, then for the iPad. If you want to create something custom, firstly ask yourself the following questions: Why? Will my solution justify the resources expended?