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.
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.
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:
- Start Screen
- Search Screen → Search suggestions
- Search Results
- Product Screen
- Product Screen (via Suggestions on the 4th screen)
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.
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.
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.
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
The Long press back navigation
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.
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.
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
