Designing More Effective UI Navigation

designing-effective-android-navigation-840x472 Designing More Effective UI Navigation Android

Effective navigation is an very important a part of any nice Android app. Get your navigation proper, and customers will don’t have any issues discovering their approach round your app’s monitors, finishing duties, and usually having an all-spherical sure consumer revel in. In case your app’s navigation is clunky or complicated, then doing anything else on your app goes to really feel like an uphill battle, and in the end the one position your customers are going to navigate is out of your app.

On this article, I’ll display you how you can plan, construction and enforce navigation that feels so intuitive and easy, even new customers will don’t have any issues discovering their approach round your app.

Making plans your app’s navigation

So as to plan the very best navigation, you wish to have to believe the next:

  • The construction of your app’s display hierarchy. What’s the primary display customers see once they release your app? What’s the second one? What number of monitors will they have got to navigate, with a purpose to whole each and every process?

  • The navigational dating among each and every display. What monitors can the consumer succeed in right away from Display B? Can they leap immediately from Monitor A, to Display E?

Monitor hierarchy: Prioritizing your app’s so much essential locations

Each and every function will have to upload a few worth on your app (if it doesn’t, then what’s it even doing on your app?) however now not all options are created similarly.

When you take into accounts your favourite Android app, there’ll almost certainly be a few options you employ time and time once more, and others you hardly use. There will also be a few options you’ve by no means actually explored in so much element. Likelihood is that your customers may have a identical revel in together with your Android app.

Your app could have a few top precedence options which are the primary the reason is, anyone may make a selection to obtain your app, and decrease precedence options which might be great to have, however aren’t your app’s primary draw.

To give you the very best imaginable consumer revel in, the monitors that ship your app’s best precedence options will have to be the very best to get right of entry to. You wish to have to spot those monitors after which position them top for your app’s monitor hierarchy, as an example by way of creating a in particular necessary monitor the very first thing a consumer sees once they release your app, or developing a chief navigation menu that incorporates direct hyperlinks to your whole app’s so much necessary locations. As an example, if I used to be designing a digital camera app, crucial activity can be taking a photograph, so I’d position all of my app’s photograph-taking capability on the first actual monitor.

In case you’re not sure approximately how essential a role is, then believe your audience – what are they hoping to succeed in, once they obtain your app? If I used to be designing a digital camera app for pro photographers, then I would possibly prioritize complex modifying options over a laugh, social options akin to including filters or posting pictures to Fb. By contrast, if I used to be concentrated on extra informal photographers then I would possibly position all of the monitors when it comes to a laugh, social options upper in my app’s display hierarchy.

P1000169-150x150 Designing More Effective UI Navigation Android See additionally: 10 superior libraries in your app’s layout and UX ^(

Grouping similar monitors in combination

So much apps come with no less than one collection of duties that customers will in most cases whole one after the opposite in fast succession. In our digital camera app instance, this may well be snapping a photograph, modifying that photograph after which posting the completed product to their favourite social community.

While there’s a herbal glide among duties, you will have to make it simple for customers to growth from one activity to some other, via developing a few type of navigational dating among those monitors. As an example, you could make those monitors out there from the similar navigation drawer, embed all their content material in the similar determine display by means of a chain of tabs, or position those monitors one after the opposite for your app’s monitor hierarchy.

Designing your app’s top-degree glide

Whenever you’ve known your app’s very best precedence monitors and the monitors the consumer will have to be capable of transfer among without difficulty, your next step is bringing all this knowledge in combination within the type of a flowchart. A flowchart is highest for buying an summary of ways your app’s navigation is shaping up – plus it’ll additionally function an invaluable blueprint additional down the road, while you get started creating your app.

This flowchart will have to come with each and every monitor on your app, and the navigational relationships among those monitors. You will have to additionally determine the primary display customers will see, once they release your app.

designing-effective-android-navigation-flowchart-840x630 Designing More Effective UI Navigation Android

Whenever you’ve created your flowchart, take a vital take a look at whether or not there’s any spaces the place it is advisable to make stronger the consumer revel in. Particularly, take a look at what number of monitors the consumer has to navigate with a purpose to whole each and every activity.

Fewer monitors is all the time higher, so that you will have to search for any chance to scale back this quantity. A few helpful tactics it’s your decision to take a look at, come with:

  • Including navigational shortcuts to necessary locations inside of your app, as an example menus and navigation drawers.

  • Tweaking your monitor hierarchy, similar to shifting essential monitors up the monitor hierarchy, in order that they’re some of the first monitors the consumer sees.

  • Bodily decreasing the choice of monitors that make up your app, both through getting rid of monitors solely or the use of fragments to mix a couple of monitors into multi-pane layouts. Don’t put out of your mind that on smaller units those fragments might be displayed one by one, so even though you do come to a decision to make use of fragments you shouldn’t depend on fragments to ship a just right consumer revel in.

Stay refining your flowchart till you’re assured that the consumer can whole any activity on your app, in as few monitors as imaginable.

android-fragments-android-studio-screenshot-16x9-720p-150x150 Designing More Effective UI Navigation Android See additionally: Fragments one hundred and one: construction higher consumer interfaces1 ^(

Not unusual navigation styles

At this aspect you’ve deliberate your navigation – however best at an overly top degree. Your flowchart would possibly display that the consumer can transfer from Monitor A to Monitor B and F, however how precisely will they transfer among those monitors? A menu? Tabs?

Within the subsequent segment, we’re going to take a look at a few not unusual navigation styles that you’ll be able to use on your Android apps. Alongside the best way, I’ll be sharing the professionals and cons of each and every means, so you’ll be able to come to a decision which navigation trend is ideally fitted on your specific app.


Effective navigation doesn’t must be complicated – working example, button-primarily based navigation. In a few cases, it’s imaginable that a collection of ‘Subsequent’ buttons could also be all you wish to have to ship your app’s navigation.

The key problem of button-primarily based navigation is that customers will generally need to faucet a button each and every time they need to transfer to another monitor. This isn’t perfect in case your app has a deep navigational hierarchy, as it is going to outcome within the consumer having to faucet more than one buttons (and transfer thru more than one monitors) with a purpose to succeed in their preferred vacation spot.

You will have to additionally check out your flowchart and believe what’s the utmost choice of buttons you’ll want to position on any one display, so as to ship your deliberate navigation. Given that so much Android smartphones and pills have somewhat small monitors, putting more than one touchable goals on a unmarried display can temporarily make your app tricky to engage with.


Vertically-scrolling lists, such because the vintage textual content menu, supply an easy and versatile means of navigating your app. Lists are in particular helpful while you wish to have to give you the consumer with direct get entry to to numerous kid monitors.

Simply be wary of lists that result in extra lists, as it will temporarily lead to the choice of monitors the consumer has to navigate to spiral out of keep an eye on. Your customers gained’t take pleasure in having to engage with more than one menus so as to succeed in their preferred vacation spot!

One more or less record-primarily based navigation that merits unique point out, is the navigation drawer.

designing-android-navigation-drawer-300x533 Designing More Effective UI Navigation Android

A navigation drawer within the Google+ app.

You enforce a navigation drawer the use of the DrawerLayout API that’s to be had within the Give a boost to Library. To create a drawer, upload a DrawerLayout item as the basis view of your format useful resource document:


Notice, while developing drawers that include choices for navigating round your software, you will have to all the time position this drawer alongside the left of the display (the correct aspect of the monitor is reserved for drawers that include movements with regards to the present monitor).

Horizontal navigation

More often than not, customers will navigate your app in a hierarchical style (shifting from figure to kid display) then again every so often you can also want to come with a few type of horizontal navigation. You’ll generally use horizontal navigation while your app comprises numerous sibling monitors, or content material that’s of equivalent significance.

When you do want to come with horizontal navigation, there’s a couple of not unusual navigational styles you’ll be able to use:

  • Display slides. On occasion referred to as a carousel, that is the place the consumer navigates among monitors the use of a swipe gesture. You’ll usually create a monitor slide interplay the use of fragments and a PageViewer, which has a integrated swipe function that permits the consumer to turn left and all the way through pages of knowledge.

  • Tabs. Embedding content material in the similar determine monitor lets in the consumer to transport among equivalent, similar content material instantly, with no need to stay navigating again to the determine monitor. As a result of the smaller measurement of your conventional Android software, it’s normally a good suggestion to restrict your self to a most of 4 tabs according to figure display, this means that tabs will not be the most productive navigational selection if you wish to have to show numerous sibling monitors.

developing-effective-android-navigation-tabs-300x533 Designing More Effective UI Navigation Android

Tabs within the Samsung clock app.

  • Horizontal paging. Once in a while referred to as swipe view navigation, this can be a navigational trend the place the consumer swipes horizontally to transport among sibling monitors. Horizontal paging is probably the greatest while it’s used to show a small choice of sibling monitors that experience a few similarity in content material, and while there’s a transparent, ordered dating among this content material, as an example a diary app the place each and every monitor represents a consecutive day.

Offering ancestral and temporal navigation

Up till now we’ve serious about navigating down your app’s monitor hierarchy, shifting from determine to kid monitor, however the consumer additionally wishes with the intention to transfer up, from kid to determine display, and in the course of the historical past of monitors they’ve visited. On this segment, we’re going to take a look at two types of navigation that permit the consumer to do exactly that: ancestral and temporal navigation.

Android-code-programming-150x150 Designing More Effective UI Navigation Android See additionally: The use of shared component transitions in actions and fragments12 ^(

Temporal navigation

Temporal navigation is the place the consumer movements in the course of the historical past of monitors they’ve visited. So much of this capability is treated mechanically: all Android units supply a ‘Again’ button, and the device keeps an inventory of each and every monitor the consumer has in the past visited, referred to as a ‘again stack.’

While a brand new task is introduced, that process is positioned on the most sensible of the stack. While the consumer presses their software’s ‘Again’ button, the present process is got rid of from the highest of the stack, and the former process reclaims the quantity one spot.

Even if this capability is treated mechanically, there are a couple of cases the place you can also need to tweak this default behaviour, within the pursuits of offering a greater consumer revel in.

First of all, despite the fact that the device mechanically preserves the state of an process while it’s got rid of from the highest of the stack, if the gadget begins operating low on reminiscence then the gadget would possibly wreck an task with a purpose to reclaim reminiscence. You will have to actively maintain the state of your actions the use of the onSaveInstanceState() callback means, in order that your app can all the time repair an process’s earlier state, despite the fact that the device destroys that task.

From time to time you may additionally want to override the device’s default again stack, as an example should you’re creating a internet browser app then it’s your decision the ‘Again’ button to go back the consumer to the former website, somewhat than the former task. Some other example the place you can also want to tweak the gadget’s default again stack behaviour, is while the consumer enters your app by the use of a deep hyperlink. On this example, you can also need to create a “pretend” again stack in order that urgent the ‘Again’ button takes the consumer up your app’s monitor hierarchy in a logical style, relatively than instantly exiting your app by the use of the deep hyperlink. You’ll be able to synthesize a again stack the use of TaskStackBuilder.

Ancestral navigation

In Android 3.0 and upwards, the Motion Bar comprises an ‘Up’ icon that permits the consumer to navigate up your app’s display hierarchy, shifting from kid to determine display.

To give you the easiest imaginable consumer revel in, you will have to explain which display is the logical determine of each and every Process, by way of including the android:parentActivityName characteristic to each and every Task for your challenge’s Occur:

android:parentActivityName="com.jessicathornsby.myapplication.MainActivity" >

In case your app helps Android 4.0 and decrease, you’ll additionally want to upload a <meta-knowledge> component inside of each and every <process> tag after which specify the figure task the use of android.improve.PARENT_ACTIVITY:

android:identify="android.give a boost to.PARENT_ACTIVITY"
android:worth="com.jessicathornsby.myapplication.MainActivity" />

Observe, the Android gadget will even use this knowledge to synthesize a again stack, the place suitable.

When you’ve declared the figure task, you’ll be able to turn on ‘Up’ navigation on your app via including a left-dealing with caret along your software icon. You do that, via calling

Wrapping Up

On this article, we checked out tips on how to layout efficient navigation, by way of in moderation bearing in mind precisely the place each and every monitor will have to seem in our app’s display hierarchy, and settling on monitors the consumer may relish with the ability to transfer among simply. After making a flowchart appearing all this knowledge, we checked out how one can flip this top-degree plan into exact, bodily navigation, via weighing up the professionals and cons of Android’s other navigational styles.

Are there another navigational styles you employ for your Android apps? Tell us within the feedback beneath!