Tour d’horizon des modèles de navigation mobile

Le 14 jan 2013 dans Mobile | 3 Comments

mobile-nav-patterns

Tout comme pour un site web, l’un des éléments principaux d’une application mobile est sa navigation.

A cause de la taille limitée des terminaux, de nouveaux modèles ont dû être inventés et d’autres ont dû être adaptés.

Voici une liste des principaux modes de navigation mobile en nous concentrant sur les application iPhone. Les autres système d’exploitation utilisent essentiellement les même principes mais, j’ai choisi ici de traiter de iOS.

La liste

Un mode très basique et très simple permettant non seulement une grande modularité dans sa structure mais aussi un nombre de sous-menus infinis.

La navigation par liste permet, en toute simplicité et comme son nom l’indique, de lister tous les éléments les uns après les autres afin d’explorer le contenu (ou un sous-menu) en sélectionnant un élément.

Les plus

  • Très simple à mettre en place
  • Facile à comprendre pour l’utilisateur
  • Pas de limite de longueur ou de sous-menus

Les moins

  • Pas très chaleureux
  • N’appelle pas vraiment à la « découverte »

Applications utilisant le modèle de liste

  • Mail.app
  • Settings.app
  • Messages.app

La « tab-bar »

Grand classique sur iOS et sur mobile en général. La tab-bar se situe généralement en bas de l’écran et permet de passer d’un écran à l’autre en un seul tap.

C’est une mode de navigation très intuitif qui repose essentiellement sur une icône pouvant être accompagnée de texte

Certaines apps comme Instagram n’utilisent que l’icône sans son label, le pictogramme doit donc être particulièrement bien travaillé, de manière à le rendre immédiatement compréhensible (ce qui n’est pas le cas, à mon sens, de l’icône de rose des vents pour la page « explorer »).

La largeur des écrans d’iPhone limite néanmoins le nombre d’éléments à 4 ou 5 onglets maximum. Au delà, il faudra rajouter un « popover » sur certains éléments afin d’étendre la navigation à des sous-menus ou des éléments supplémentaires. On perd dans ces situations le côté rapide et efficace de ce mode de navigation.

Les plus

  • Considéré comme un standard sur iOS
  • Intuitif et immédiatement compréhensible par l’utilisateur
  • Permet d’accéder aux autres écrans d’un seul tap
  • Situé en bas de l’écran donc très accessible avec le pouce

Les moins

  • Limité a 5 éléments maximum
  • Nécessite d’utiliser des icônes parfaitement compréhensibles

Applications utilisant le modèle de tab-bar

Le tiroir de côté

Ce type de menu en phase de devenir le nouveau standard sur iOS a deux avantages. Il permet non seulement d’utiliser un grand nombre d’éléments mais aussi de ne pas utiliser la précieuse surface limitée de l’écran. Le menu étant masqué par défaut.

Appelé par un bouton placé dans un coin supérieur de l’écran, le menu se révèle « sous » l’écran de l’app qui glisse sur le côté. L’usage du tactile permet aussi de glisser l’écran de l’app soi-même sur le côté afin d’accéder au menu.

Ce genre de menus est particulièrement adapté lorsque beaucoup d’éléments doivent être disponibles au premer niveau de navigation.

Les plus

  • Grand nombre d’éléments affichables
  • N’occupe pas de place à l’écran
  • Utilise des gestes (« glisser pour révéler ») en plus de boutons
  • Permet d’utiliser le menu pour plus que la navigation (infos rapides, réglages, etc.)

Les moins

  • Nécessite deux tap afin d’arriver sur une nouvelle page
  • Peut inciter à placer beaucoup (trop) d’éléments de menu
  • Sa position en haut de l’écran le rend difficilement accessible avec le pouce

Applications utilisant le modèle de tiroir

Le popover

Ce type de menu inspiré des listes déroulantes familières sur ordinateur est mode de navigation connu et qui a fait ses preuves.

D’un tap, on accède à une liste déroulante et on sélectionne ensuite la page vers laquelle on souhaite se diriger.

Si ce type de menus à en effet fait ses preuves sur ordinateur, on peut justement lui reprocher d’être plus adapté à la souris qu’au tactile. Tout comme le tiroir, le bouton est souvent placé en haut de l’écran mais on ne peut pas ici glisser le contenu de côté pour révéler le menu.

Il en résulte néanmoins une navigation simple, claire et  qui ne déplace par le contenu comme le tiroir.

les plus

  • Simple à l’usage
  • Permet un nombre d’éléments important
  • Visuellement léger

les moins

  • Bouton positionné en haut de l’écran mais sans « glisser pour révéler »
  • Une relique de la navigation non tactile

Applications utilisant le modèle de popover

Le mur d’icônes

À l’image de l’écran d’accueil de l’iPhone, ce mode de navigation par icônes affiche les uns a côté des autres les différents éléments.

On retrouve donc une systématique connue dans toute les interfaces et spécifiquement sur mobile. A l’image de la tab-bar, on peut aussi utiliser des icônes seules si elles sont assez explicites.

Sa disposition en grille peut néanmoins apporter plus de confusion que de solutions dans une interface avec beaucoup d’éléments.

L’interface en tuiles de Windows 8 est une version (élégamment) revisitée du mur d’icônes.

image: microsoft.com

Les plus

  • Navigation aisée grâce aux icônes
  • Permet de présenter d’un seul coup d’œil un grand nombre d’éléments

Les moins

  • Peut vite donner un aspect fouillis et peu étudié
  • L’affichage en grille rend le survol de l’information plus difficile

Applications utilisant le modèle de mur d’icônes

  • iBooks.app
  • Pictures.app

Autres

Certaines applications apportent leur lot d’innovation en termes de navigation.

PT airports

C’est le cas de PT Airports (l’application des aéroports portugais) dans laquelle on navigue en deux dimensions afin d’accéder aux différents écrans.

A noter que l’App utilise souvent le modèle de listes pour le second niveau de navigation.

Meteo

L’application météo de base de Apple utilise un système de carrousel pour naviguer entre les divers éléments. En glissant une fiche de côté on arrive à la suivante.

Très intuitif et permettant d’arriver d’un simple glissé sur une nouvelle page, ce mode de navigation peut devenir très embarrassant passé la dizaine de pages…

Bien étudier son modèle

On l’a vu, il y a un grand nombre de possibilités pour naviguer dans une application, chacun ayant ses avantages et ses inconvénients.

C’est au tout début de la conception qu’il faut réfléchir au mode de navigation que l’on va choisir car il va influencer l’expérience utilisateur bien au delà du simple aspect esthétique.

Loris Grillet

Graphiste et Web Designer basé à Genève. Maniaque de typographie, geek et amoureux des pixels comme du papier. Quand je ne travaille pas sur de nouveaux projets, je Tweete, partage mes projets sur Dribbble et explore le monde…

  • jmlapam

    excellent tour d’horizon. Merci bien

  • Larme

    Étrangement, le menu à la pop-opver n’est pas indiqué comme possédant le même désavantage que le menu glissant : deux touch pour accéder à ce qu’on veut.

  • Termyl

    Sur Instagram, je crois bien que l’icône du menu « Explorer » représente une boussole…