Native mobile platform transitions: the basics

Comparing Android, iOS and Windows

This article outlines native platform transitions (that ship with the platform) for Android, iOS and Windows 8/8.1+ and a brief introduction on how platform experiences are created technically. The purpose of this article is to educate designers in using the technical language when talking to developers to encourage better communication.

Android

Android screens are called “Activities” they also act as controllers for “Fragments”, which are elements of functionality. Android “Activities” are designed so that the working code that works on the phone will also automatically work on a tablet.

This scalability is a great asset but detrimental to animations as “Activities” are not connected together (Pre Android L) as default, without custom code which reduces performance dramatically. “Fragments” can animate between each other but “Activities” cannot. To have non standard animations, typically a developer will bloat the view to bring something in from the top or bottom, etc

ViewPager

Method: ViewPager is the common transition from one screen to another

Use: Practically used on all standard step processes on transitions on android

Real example: Known as screen-slide

Crossfading Two Views

Method: Fading from screen to screen

Use: You want to switch content or views in your app

Real example: http://youtu.be/atH3o2uh_94

Fade in

Method: Upon tap the new screen appears from the point of contact/CTA

Use: You want to switch content or views in your app

Real example: see Google+. Tap new post.

Fade out

Method: Fading from UI item to another

Use: You want to switch content or views in your app

Real example: see Google+. Tap new post, then tap back.

iOS

The Model-View-Controller

iOS uses the Model-View-Controller paradigm created by Xerox Parc in the 1970s.

“Views” are controlled by “View Controllers”, they connect “Views” to the data or content they are going to display. (think of “Views” as the screen you’re ..viewing). Simply put, its layered aesthetically and technically.

The power of designing for iOS is that you can very easily leverage the power of context with micro processes being contained by model views. This allows to mask and simplify the perception of the user experience to get actions done efficiently.

Horizontal for hierarchy

By (largely unspoken) Western convention, right is the direction of horizontal progression–just think of the number line or written text. Left is subsequently seen as backward, even regressive. It’s no accident that the Latin for left–“sinistra”–found its home in the English language as “sinister.” This historical prejudice may upset people who are left handed, but it offers a helpful convention for digital product designers.

Modal

A modal is a child of a its parent view, it could be; an Action sheet, an Alert or its own flow. Apple describe modal views as being used as a micro-process.

Slide in/Slide Out

Method: Partially slide the screen in focus left or right to reveal a new screen underneath, this transition gives the impression of the layered effect. Horizontal for hierarchy, backwards being left and forwards being right

Use: To reveal app navigation, or information that is in context to the overall application.

Real example: Native iOS, go into settings, tap on any item.

Other examples of : IOS transitions More native IOS transitions

Windows 8/8.1+

(phone/tablet/desktop)

With Windows 8/8.1+ its important from the beginning to realise that you are not designing transitions of screens and that you are are designing transitions of content. (this article doesn’t outline the content transitions of windows, but mainly screens) The metaphor would be that the device is the looking glass and you are shifting from content to content.

Native functionality on Windows also comes with native animation libraries, these animations scale across windows platforms they are related to content shifting from one area to another

• Slide
• Turnstile
• Continuum

Edge transitions

Method: Screens slide in, transitions can be tailored so that pages move in from any side of the screen.

Use: This should be used for sub-functionality of screens that interrupts the flow of the user.

Real example: Logging in to an account > Office365 setup > add an account

Turnstile transitions

Method: Content animates around a single point cascading outwards.

Use: Mainly the entrance transition to the main app. It would be if you wish to convey the user has entered a new section

Real example: See the main native dashboard upon launch, and when actioning an app.

Continuum transitions

Method: Upon tapping the item cell the title animates behind the content and transitions upwards to reveal the next page’s content

Use: Tapping an item where you wish to see more information relating specifically to that item

Real example: See the contacts app on Windows phone — Tap on a contact from the list view and you should see the transition of the avatar.

Conclusion

Bill buxton said that “if you don’t consider transitions you should be fired, you aren’t doing your job right”.

In digital design we’ve always used the ‘Medium is the message’ paradigm to create engaging solutions based off metaphors(folders, mouse, desktop) to craft a story that reflects the business goals and the reality that we live in, translating common ground to people.

Now, today in a world that is constantly shifting, where content is tangible and data is only measured by the strength of your API we need to communicate a wide range of emotions in the form of motion.

Whatever platform you are creating an app for, the app needs to tell its story, a story of simplicity, efficiency and content.

We need to be digital guides and silent narrators from afar.