Les différents types de navigation sur mobile

1 juillet 2014

Comment intégrer un menu de navigation dense dans un espace réduit (tablette / mobile) ? La réponse n’est pas immédiate, il s’agit de réfléchir aux avantages et inconvénients de chacune des méthodes pour en tirer le meilleur profit selon sa problématique. C’est après une petite étude réalisée pour un site de ecommerce chez Napoléon Agency que j’ai pu me pencher sur le sujet. Ici seul les grand standards de navigation mobile sont détaillés


ACCES RAPIDE

v Top Nav   l    v Menu en footer   l    v Selected Menu   l   v Toggle    l    v  Toggle multi    l     v Off-Canvas


 

1 . TOP NAV

 

Top navigation mobilePrincipe :
Garder la navigation en l’état est une solution de facilité souvent utilisée pour de petits sites

Avantages/inconvénients :
✔  Facile à mettre en place
✔ Un menu directement visible
 Difficilement utilisable avec une arboresence dense et profonde
 L’ajout de catégorie devient difficile > principe peu flexible
 Prend de la place en hauteur car les éléments doivent être assez séparés pour être “cliquables”

Recommandé pour :
Les portfolios et sites à 4 entrées max

Quelques exemples :
http://sugru.com/
http://skinnyties.com/
http://www.fivesimplesteps.com/

 

2 . MENU EN FOOTER

 

Principe :
Au tap sur « Menu » l’utilisateur descend en bas de page pour retrouver sa navigation

Avantages/inconvénients :
 Facile à mettre en place
 Prend peu de place en header (header aéré)
 Pas de javascript (donc compatible sur tous les devices)
 Difficilement utilisable avec une arborescence profonde
 Un système de saut de page (de haut en bas) perturbant pour l’utilisateur

Quelques exemples :

 

3 . SELECT NAV

 

Principe :
Garder la navigation en l’état est une solution de facilité souvent utilisée pour de petits sites

Avantages/inconvénients :
 Facile à mettre en place
✔ Flexible (l’ajout de nouvelles entrées ne pose pas de problème)
 Prend de la place en hauteur
 Pas toujours très esthétique

Recommandé pour :
Les portfolios et sites à 4 entrées max

Quelques exemples :
http://viljamis.com/

 

4 . TOGGLE / DROP DOWN

 

Principe :
Au tap sur menu, un expend se développe et pousse le contenu vers le bas pour laisser apparaître le menu (cette solution est également déclinable en overlay : par dessus le contenu)

Avantages/inconvénients :
 Un principe simple dans l’usage
 L’utilisateur n’est pas désorienté
✘ Difficilement utilisable avec une arboresence dense et profonde
 Une bonne pratique iPhone mais difficilement applicable en version expend sur l’iPad (perte d’homogénéité si les deux devices proposes une navigation différente).

Recommandé pour :
Le sites de marques et e-commerce (mais peu dense)

Quelques exemples :
http://mag.fly.fr/
https://www.anglepoise.com/
www.salomon.com/fr/
http://eu.suitsupply.com/
http://www.starbucks.com/
http://www.liberation.fr/

 

5. Toggle Multiple

 

Principe :
Au tap sur le menu, un expend/ overlay se développe et pousse le contenu vers le bas pour laisser apparaître le menu (cette solution est également déclinable en overlay : par dessus le contenu)

Avantages/inconvénients :
 Un principe simple dans l’usage
 L’utilisateur n’est pas désorienté
✘ Peu recommandé pour une arborescence dense

Recommandé pour :
Le sites de marques et e-commerce (mais peu dense)

Quelques exemples :
http://www.performancemarketingawards.co.uk/2014/
> http://www.the-dressingroom.com/
http://www.bellhelmets.com/

 

6. Off Canvas

 

Principe :
Quand l’utilisateur clique sur l’icône menu ou slide sur la droite, la navigation sort d’un panneau à gauche poussant le contenu de l’autre côté.  C’est le système le plus utilisé aujourd’hui.

Avantages/inconvénients :
✔ Prend peu de place en header (header aéré)
✔ Fonctionne avec un menu dense et profond
✔ Un principe simple dans l’usage et reconnu par les utilisateurs (de nombreuses applications le font > j’ai l’habitude)
 Système plus lourd à mettre en place

Quelques exemples :
http://www.petit-bateau.fr/
http://www.baxterofcalifornia.com/
http://www.currys.co.uk/gbuk/index.html
harrods (site adaptive)
mrporter (site adaptive)
sephora (site adaptive)
> Asos (site adaptive)
h&m (site adaptive)

Recommandé pour :
Les sites de e-commerce

 


D’autres systèmes de navigation existent (notamment sur des applications mobiles) mais sont beaucoup moins utilisés, j’essaierai de mettre à jour au fur et à mesure cet article.
La position des éléments est également un autre sujet et fera l’objet d’un nouvel article (comment positionner le bouton menu ? le bouton panier ? le bouton recherche ? …)