Navigating History in Mobiles

TL:DR

Navigating back and forth scenes or resources in devices with limited screens is tough. To arrive at a previously visited scene/activity user travels in chronologically reverse order of his journey. Imagine a solution where you can visit any scene/activity from the navigation history.


Navigating backwards

It all starts at the home screen. User touches an app icon to launch the application and it begins with a launch screen. The application now takes you through its intended journey. For example, in Amazon for iOS, search for a product, open the navigation drawer to select a different view, check your cart or touch a featured product banner to land up at that view.

Different paths one could take from start screen for Amazon for iOS

Any step you take from the first view will create a navigation history, and you can use the back button to navigate back to the previous views. iOS and Android handle back navigation in their own way but, it predominantly involves navigating to previous views.

Note: The following representations will be used for normal press and long press indications.

Legend for the illustrations used

Back or Up one level at a time

The current way to navigate backwards or upwards only allows us to move one step at a time. Let us take a user flow case:

  1. Start Screen
  2. Search Screen → Search suggestions
  3. Search Results
  4. Product Screen
  5. Product Screen (via Suggestions on the 4th screen)
A random usage pattern of Amazon for Android

To come back to the Search Results screen you need to go chronologically reverse. You will have to press the back button twice. Assuming they’ve gone deep enough into suggestions and searches, the number of steps to come back to a desired state is just going to increase.

Navigation backwards in Amazon for Android

For example: Say you’re watching videos on Youtube for iOS, have used search and have watched 4 videos. To replay the first video you have to tap back three times.

Please note that the video is played in a screen which isn’t currently saved in the navigation history of iOS.

A normal back navigation in YouTube for iOS

Hop Levels Backwards

Let us now look at a browser’s back button. Back button in browsers have two kinds of interactions; a click will take you one step back; A click and hold action provides you with a list of previously browsed links and you can choose where you wish to go. Go ahead, try it out in your browser.

Browser back button with two different interactions

The back button is flexible enough with providing options to not just move one step backwards, but also to hop an arbitrary number of steps. That is one neat feature that is missing in all our applications. Although the downside to this is that websites do not have access to the browser buttons to show a contextual navigation history. The implications of this is huge and we will talk about them in a while.

Firstly, let us look at a case where the back button on mobiles have two kinds of interactions; a touch and a long press. A touch will do what it does already, but with a long press you can show the Navigation history.

The Normal back Navigation

Normal Back navigation in Amazon

The Long press back navigation

Long press back to get navigation history in Amazon

Long press actions would qualify as an invisible interface. The problem with invisible interfaces is that we need to remember it. Nevertheless, there is a lot of goodness with this interaction. Firstly, it is hidden in plain sight and its discovery is a good incentive and you will start loving it even more. Secondly, the long press can be used to do more of the same task as a single press is intended for. For example, long press power button to shut down iPhone vs normal press to switch off the screen.

Action packed navigation history

In comparison with any web browser where the navigation history is a browser feature, the apps have an advantage of controlling how the navigation history can be structured. You can find the two concepts for navigational history in applications, below.

Concept back navigation for Myntra and Youtube

Summary

Currently this kind of interaction pattern hasn’t been provided in either iOS human interface guidelines or the Android design principles (perhaps they’ll introduce it soon? Hint hint.😉). As users spend more and more time on applications they leave a really long trail, and this method provides a good way to help them navigate that path easily.

Sponsorship Section

This article was sponsored by “Devthon”, an innovation platform that helps bring together minds from multiple disciplines to solve challenges and prototype new experiences. The next Devthon is crafted around solving problems using game mechanics & game design. Head over to the following link for more information.

Devthon - Innovation through co-creation
Jun 6th — Jun 21st | PurpleTalk Inc, Whitefields, Hyderabad bit.ly

Thanks for reading. If you’ve liked the article please share it or recommend. If you’d like to sponsor my next article, please tweet @imran_parvez