Return to site

UX responsive mobile patterns

Part I - Android

Introduction

A UX pattern is commonly a sequence of interactions that can be reused for different solutions and tends to become a standard in the user community.

In this article we propose to analyze the pattern of the main navigation, that contains the important app’s options and represents one of the most crucial in terms of user experience, and the way it’s represented by different platforms in the mobile app’s universe.

In particular, we focus on the native Android and IOS patterns, defining the differences between them, presenting some variations and, when possible, some antipatterns, that are the bad application of this solution.

Android

The navigation drawer

WHAT IS IT

The main navigation in the Android environment is typically managed by a sliding out menu, called “navigation drawer”, located in the left of the screen, that partially overlays the contents of the screen.
 

WHY TO USE

The guidelines suggest to use this pattern

  • for the navigations that include more than 3 unique top level views ;

  • for the apps that include navigation between low level views.
     

HOW TO OPEN/CLOSE

The user can trigger the microinteraction by:

  • pressing on the icon/title at the corner of the screen;

  • swiping from the left edge of the it.

The user can come back to the previous state by:

  • touching the content outside the navigation drawer;

  • swiping to the left anywhere on the screen (including edge swipe from right);

  • touching the app icon/title in the action bar;

  • pressing the “back icon” in the Android devices.

HOW IT WORKS

Its presence is consistent for the top levels view, being a quick and immediate launch in every part of it by an icon.

Navigation drawer - icon at top level views

In the lower level views the navigation drawer icon is substituted by an up icon to indicate the return to the top levels. In this state the navigation drawer is still reachable by an edge swiping, but not from clicking on the icon/title of the app. This is possible in all the level apart from the detail/edit views, that support a swiping navigating between sibling screens.

Navigation drawer - icon at lower level views

CONTENTS

The contents of the navigation drawer include:

  1. title not interactive, useful to split the topics

  2. items

  3. icon related to the items

  4. counters related to the items

  5. collapsible items, useful to represent complex structures.

CONTENTS - MULTIPLE LEVELS

When the structure is particularly complex, it’s possible to use one of the parent level as split item.

Android’s Guidelines suggest to make visible all the top view entries at launch, and to expand a single area when the user is opening the drawer from a lowel-level view.

EXAMPLES

Etsy, Spotify

Fixed tabs

WHAT IS IT

Fixed tabs represent a navigation way at the top of the app that shows to the user all the top level items. They are always visible and the user could navigate between them also swiping left or right.

WHY TO USE

Guidelines suggest to use them:

  • with limited items at the top level navigation

  • if the app request a frequent switching between views

  • to make the user aware of the alternative views.

HOW IT WORKS

They are always visible, also during the scrolling, and the user could navigate between them also swiping left or right.

EXAMPLES

Twitter

Spinner

WHAT IS IT

The spinner is a way to navigate different views of the app by a simple drop down menu.

WHY TO USE

Guidelines suggest to use it:

  • if the user are switching between views of the same data (for instance a calendar)

  • it’s not necessary to have a dedicated tab bar

HOW IT WORKS

They are always visible, also during the scrolling, and the user could navigate between them also swiping left or right.

EXAMPLES

Google plus

Antipattern

Android recommends to not mix and match the patterns for the top view, on order that the navigation won’t be duplicated. It is still possible to use different pattern, but for different level of it.

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly