For a designer, the word “port” can be cringe-inducing. By definition, a port is an application adapted from one environment to another. However, what sounds like a short re-skinning project is actually a challenging process involving design, development and stakeholder communication.
In the case of some iOS-to-Android ports, a design using iOS interface elements may not bode well with an Android user. Instead of just “making it work,” a port needs to be carefully designed for it to truly resonate with the end user. At Big Nerd Ranch, we combine quality time, communication and preparative thought to make sure that any port we build for our clients delivers a quality experience.
It should be understood that Android and iOS have a completely different mental model. Navigation, transitions, animations and design language all differ dramatically between the two. In order for the user to fully understand the experience, it must mimic the OS precisely, which requires the designer to have a full understanding of even the smallest, most “enchanting” details.
The best way to prepare for an Android version of an app is to familiarize yourself with every part of the operating system (even if you already use it). If you’re mostly an iOS user like me, go out and find a Jelly Bean, KitKat or Lollipop device and play with it. Better yet, stick your SIM card in it and struggle your way through the user’s experience until it becomes second nature.
Android users have a developed muscle memory for navigating apps, which is imperative for a designer to understand. For designers already using Android, pay attention to how you navigate on your own device. Record your experiences, both positive and negative, for a number of applications, and refer to these when talking to a team member or client. Nothing is better for understanding your users than being them!
It’s important to note that Android Lollipop is a very different visual experience from previous versions, so make sure you understand and can design for it. Check out Jeff Heaton’s post on Android Material to get started.
Android developers are another great go-to for understanding the platform. These developers are some of the few people who know the operating system literally inside and out, and by sharing the same language as them, you’re ensuring that details won’t get lost in communication. At Big Nerd Ranch, designers and developers work together to ensure that this type of communication happens constantly.
When porting from iOS to Android, it’s important to begin separating the core experience from the existing iOS application. Ask, “What does the user need to accomplish with this product?” and map out the best way to do this without reference to any operating system. If there are existing issues with the core experience, this would be the best time to find a solution. Although the goal is to create the same experience, ported apps sometimes offer a unique opportunity to solve a problem that exists in the original.
Depending on the project, the user flow of an Android app can be vastly different from its iOS counterpart, thanks to the increased number of navigation options. Make sure that any new user flow first incorporates the app’s stripped-down core experience before adding Android-specific navigation details. A separate set of wireframes is also necessary to ensure that all elements are OS specific. At this point, as with any design, both a hawk’s eye view and a user’s perspective should be referenced to iron out any redundancies or experience problems.
Since this ported app is usually part of a larger product, it’s important to implement similar branding; however, that branding should be stripped of any relationship to iOS. Functional design elements (like navigational iconography) should keep with Android design guidelines to ensure that the user understands how to navigate. By keeping this happy medium in the visual design, you’re ensuring visual communication of both functionality and the product’s brand.
With consideration and expertise, a ported application can be an amazing standalone experience for any user. Let’s eliminate Frankenstein apps and make the term “port” mean a wonderful, cross-platform experience that everyone can enjoy!
Interested in learning more about our basic and advanced Design Courses?
Learn from the experts at a Big Nerd Ranch Bootcamp!
Interested in leveling up your coding skills from the same authors of the Big Nerd Ranch Guide? Subscribe to The Frontier today!
Juan Pablo Claude