Des mises en page adaptives aux systèmes de navigation adaptatifs

En ce moment la communauté des concepteurs est en ébullition à propos des interfaces mobiles. Nous pensions avoir trouvé une solution à la multiplication des formats d’écran (ordinateur + smartphone + tablette) avec les mises en page en responsive design, mais c’était sans compter l’imagination des constructeurs. Pour éviter la concurrence directe avec l’iPhone et l’iPad, les constructeurs ont commencé à sortir des formats intermédiaires (phablets de 5 pouces, mini-tablettes de 7 pouces…). En conséquence de quoi les concepteurs doivent maintenant jongler avec un éventail très large d’écrans et de terminaux.

Panorama des tailles d’écran de terminaux alternatifs

Si la question de la mise en page est à peu près réglée avec les techniques de responsive design, cette multiplication des formats est problématique pour les systèmes de navigation (lire à ce sujet : Les tablettes méritent des interfaces dédiées). La façon dont l’utilisateur tient son terminal a un impact sur la facilité d’accéder aux menus de navigation qui ne doivent pas nécessairement se trouver en haut de page, comme c’est de rigueur avec une page web affichée sur un ordinateur. Les smartphones tout comme les tablettes sont ainsi généralement tenus par le bas, les pouces étant alors les seuls doigts disponibles pour manipuler l’interface.

Modalités de navigation en fonction du type de terminal

Partant de ce constat, Luke Wroblewsky et Jason Weaver se sont penchés sur le problème et proposent une solution tout à fait convaincante : Responsive Navigation: Optimizing for Touch Across Devices. Leur idée est de proposer un système de navigation adaptatif qui se positionne en bas de l’écran pour les smartphones et qui est même divisé en deux pour les tablettes.

Je vous invite à constater le résultat sur ces pages : Off Canvas with Navigation Fixed Bottom et Off Canvas with Split Navigation Fixed Bottom.

Exemple de système de navigation adaptatif sur une tablette

Le résultat est très convaincant et apporte un plus indéniable en confort d’usage, l’auteur donne un peu plus de détails ici : Exploring Touch Navigation.

Signalons que ce n’est pas la première fois que ces deux personnes collaborent, car elles avaient déjà proposé une solution de mise en page adaptative : Off Canvas Multi-Device Layouts et A Multi-Device Web Layout Pattern. Cette technique permet ainsi d’afficher une mise en page et un menu de navigation différents en fonction du terminal :

Exemple de mise en page adaptative

Vous pourriez me dire que tout ceci est un peu complexe à maintenir, mais je vos répondrait qu’avec des techniques avancées comme RESS vous pouvez vous simplifier la vie : Améliorez la performance de vos interfaces mobiles avec RESS.

Je pense ne pas me tromper en disant que plus nous avançons dans le temps et plus la situation se complique avec la multiplication des formats de terminaux. Heureusement les techniques de développement gagnent en sophistication tous les ans et permettent de contourner ces difficultés. Reste encore à gérer LE gros point faible des ces astuces : les systèmes de gestion de contenu dont les gabarits de page ne facilitent pas la travail d’intégration.

6 commentaires pour “Des mises en page adaptives aux systèmes de navigation adaptatifs”

  1. Posté par Jean-Charles GAUTARD a dit : le

    Merci Frédéric pour cet article :-).
    Tu semblais l’année dernière assez pessimiste quant à l’avenir du Responsive Design pour gérer les différentes résolutions d’écran de nos internautes, je serais curieux de connaître ta position aujourd’hui car cette technologie a bien évoluée en 2012.

  2. Posté par Frédéric Cavazza a dit : le

    Je constate que ça a évolué dans le bon sens avec RESS : avec plusieurs versions des éléments clés de la page stockées sur le serveur (header, footer, nav, carrousel, formulaires…), toutes les typologies de terminaux devraient pouvoir être couverts, avec un minimum d’efforts.

  3. Posté par François Dubois a dit : le

    Cette solution de proposer le système de navigation en bas de l’écran est absolument géniale. Reste à l’adapter à des arborescences plus complexes, à 3 ou 4 niveaux de sous-menus. Mais l’idée de disposer sous les pouces de boutons « A la Une », « Les plus vus », « Suggestions croisées » – sous forme de listes – et « Commenter », à la lecture sur tablette d’une production éditoriale type blog ou magazine, me parait bien alléchante.

  4. Posté par Marie-France Fortin a dit : le

    Le problème avec cette solution c’est qu’elle ne tient pas compte du fait que chaque personne à une façon différente de tenir son téléphone ou sa tablette. La position des mains sur un appareil dépend du confort, le confort dépend de plusieurs facteurs dont les préférences personnelles, la taille des mains, le poids et l’équilibre du poids de l’appareil.

    Je ne sais pas si l’image « Modalités de navigation en fonction du type de terminal » est basée sur une étude quelconque mais, si je regarde dans mon entourage, le modèle à 2 mains le plus fréquent consiste à : une main qui tient l’appareil et l’autre qui navigue. Il n’y a donc pas de zone plus difficile d’accès. Je vois aussi beaucoup de gens tenir leur téléphone plus au centre de l’appareil, celui-ci repose sur les doigts et le haut de la paume, ce qui inverse complètement les zones difficile et facile d’accès.

    On fait aussi un dangereux lien entre appareil et résolution. Avec les téléphone de plus en plus grand, les tablettes de plus en plus petites et tout les divers appareils connectés la relation entre résolution et utilisation devient particulièrement faible.

    Je crois que nous n’avons pas encore trouvé la solution parfaite.

  5. Posté par Mickaël Poiroux a dit : le

    Pour aller dans le sens de Marie-France, la dissymétrie entre les zones hard et OK pour le téléphone n’est-elle pas liée à une optimisation pour droitier qui pénaliserait les gauchers, qui auraient tendance à tenir l’appareil de la main droite et à activer l’écran de la main gauche ?

  6. Posté par Marie-France Fortin a dit : le

    J’avais pas pensé aux gauchers dans mon commentaire… très bon ajout Mickaël!