Designing Apps for Multiple Devices

By Joie Chung | Jul 14, 2016

Everything we interact with daily is becoming more and more connected with each other. Our interaction jumps from our phones to our cars, from our cars to our homes, our homes to our tablets, etc. We now expect our experience to be consistently usable and delightful across all our devices.

The most important thing to keep in mind when designing both iOS and Android versions of an application is that the interface elements of both platforms are not the same and cannot be designed using a “one-size-fits-all” mindset.

“Adapting an application’s design to the unique platform design patterns and standards is critical to making an application match the expectations users have for how iOS and Android applications should look and behave, ultimately making the application more usable and successful.”

– Bob Archer

Understanding Context

It is important that we create experiences suited to the context in which the devices are being used. We must consider features that make sense to the situations of use. For instance, users do not typically use their phones to watch movies, nor is it common to use a television to look up map directions. We need to remember the primary user goals when we design for all the devices we use in our everyday lives.

Smartphones have small screens and are used on-the-go. They are mainly for completing quick tasks, locationally-aware actions such as finding directions, social interaction, and other forms of mobile entertainment. On the other hand, tablets are used more for reading or viewing content. The screen size is great for content consumption. Due to this format— larger than a phone but smaller than a computer—we find that tablets are used mostly as an easily accessible desktop-replacement, which means more freedom for longer interactions. We need to design for each of these situations accordingly.

Understanding Consistency and OS Differences

iOS vs. Android

The two major mobile operating systems, iOS (Apple) and Android, currently dominate the mobile market share. There is an increasing demand for apps to be developed for both platforms to reach the most users. Adapting an iOS app for Android (or vice versa) is not as simple as porting the same design. There are many differences between how users interact with apps on each OS that a designer needs to consider.

  • Navigation: A major difference in navigation between the two types of devices is that Android phones have a back button and Apple phones do not. This minor hardware difference means that iOS apps must consider navigation on every screen, however Android apps can rely on the phone’s back button to navigate back through the app. In addition, stock UI elements available during development create navigation patterns unique to each OS. An example of this being the standard navigation bar in iOS, which has created a similar look across apps.  Another example of this would be the tabs in Android.
      This consistency across apps within the same device is great for users. Navigation is more intuitive and easy to follow since users already have an idea of where to find it. When building apps for both platforms, we need to consider adapting to these differences in navigation when designing each app.
  • Iconography: The typical icons used vary between platforms as well. For example, an Apple user will know that tapping this button will show the sharing options. An Android user will look for this icon instead.

  • Visual Style: The lines are blurring in the visual style between the two platforms. Android has better options now in regards to customizing the UI and releasing actual design guidelines, and Apple devices have dropped skeuomorphism in favor of clean typography, layout, and content-focused design. Both operating systems are utilizing transparency and animations now to give users a sense of context within the apps.

  • Contextual Actions: A significant difference in Android is the “action bar”. Most Android applications show all relevant actionable buttons in the top right of the action bar. When there are more actions than will fit in the bar, an action overflow icon appears to show the complete menu. In iOS, users usually tap on the action button in the top right to reveal an “action sheet” with available options.

  • Standard Controls: Some examples of standard control differences:
    iOS             Android
                                           
                              
                      
                       

  • Gestures: Gestures such as tap, drag, flick, swipe, double tap, and pinch gestures are typically used for similar actions across both platforms. However, Android users are more comfortable with the long touch gesture, which is rarely used in iOS.

Phone vs. Tablet vs. Watch

With the rumors of the iWatch and the release of multiple Android wearables, we start to question where the line is between devices. Taking into account the context of use that I mentioned earlier, we need to decide:

  1. What is the main goal of the app?

  2. What features facilitate completion of the goal?

  3. In which context do these features make sense?

For example, Eat24 has a wonderful app for finding and ordering food nearby. The phone application’s primary focus is ordering food “now”. We use our phones when we are on-the-go and hungry. The iPad app’s focus is browsing new restaurants. This would be typically used when casually making dinner plans for another day. The watch app would be used when someone like David Singleton decides to show off ordering pizza on stage at Google I/O. The goal of the watch app is to order pizza quickly and know when the pizza will arrive just by glancing at your wrist.

  eat24_app

Branding Consistency Overall

No matter what, the same application across multiple devices should have the same general look and feel. We should design for the device, without sacrificing consistency in the brand. Typography, colors, iconography, and imagery should be similar enough to create the feeling of a set. Branding an application is much like branding your company—when users see and interact with your app, we want them to know (and feel) immediately who we are and what we do.

context_mobile

Let's Talk :)