Le responsive, un enjeu décisif
Devenu une nécessité depuis plusieurs années, le responsive est né avec la multiplication des plateformes : comment, en effet, ne pas perdre un utilisateur en cours de route, s’il ne peut plus retrouver son site ou son application lorsqu’il se reconnecte via son mobile après l’avoir fait sur son ordinateur ?
Une plateforme responsive est conçue et développée de façon à s’adapter à tous les formats d’écran. Il s’agit donc de faire en sorte que ce soit un seul et même site qui peut être consulté sur ordinateur, sur un Smartphone ou sur une tablette. Et ce n’est pas chose simple ! Les écarts peuvent être importants : en général un écran d’ordinateur est au format 16/9 ; une tablette peut proposer un affichage en 4/3 ; un mobile peut quant à lui proposer un format de 9/16 ou 9/18. Ainsi, la plateforme que nous développons doit s’adapter à l’écran sur lequel elle est utilisée, qui variera lui-même selon les modèles et les marques.
Un exemple vaut mille mots : l’ordinateur tend plutôt à proposer une navigation sous un format paysage, quand le téléphone est utilisé sous un format vertical alors que la tablette s’adapte au bon vouloir de l’utilisateur. Un copié collé de la plateforme serait catastrophique, tant en termes de design, mais aussi, et surtout, pour l’expérience utilisateur et la fluidité de la navigation.
En jetant un oeil du côté des nouveautés technologiques comme les montres connectées ou les écrans pliables, on se rend vite compte que les écrans continuent d’évoluer et que la problématique peut se révéler un véritable casse-tête si nous ne suivons pas quelques principes fondamentaux. Plus la technologie progresse, plus le responsive devient un enjeu décisif.
LVNI : les principes fondamentaux du responsive
Vous l’aurez compris, le mot d’ordre est l’adaptabilité ! Et si nous ne vous avons pas encore convaincu, allez donc jeter un œil sur la politique Mobile First de Google. La démarche est claire : sans responsive, pas – ou peu – de référencement.
Réponse à la fragmentation des usages, le responsive nécessite donc de respecter plusieurs règles mais requiert surtout une bonne collaboration entre les métiers que composent un projet de développement de plateforme : les experts de l’optimisation web et mobile, de l’ergonomie, du contenu, et évidemment, de la gestion de projet, doivent s’accorder pour s’assurer que l’application réponde à des fondamentaux :
Lisibilité : la page doit être lisible, par le texte et les images. Des mots coupés, des paragraphes illisibles, des images trop importantes, ou trop petites ne conviennent pas… Le contenu doit être adapté !
Visibilité : le contenu doit être visible par l’utilisateur, en prenant en compte que le passage à différentes plateformes risque de rendre invisibles certains éléments.
Navigation : la navigation doit être toute aussi fluide en fonction des plateformes. Le scroll à droite pour lire la fin d’un paragraphe n’est, par exemple, pas du tout intuitif sur Smartphone, alors que le scroll vertical l’est naturellement.
Interaction : les interactions doivent être semblables et / ou adaptées. Par exemple, si une information s’affiche au survol de la souris sur ordinateur, nous devons trouver une interaction équivalente sur mobile.
Le parcours utilisateur, la vraie solution ?
Pour être responsive, le design est évidemment à prendre en compte mais n’est pas le seul paramètre : le parcours utilisateur s’avère finalement aussi être la clé de réussite pour une adaptabilité complète. Car un facteur indispensable au succès d’une plateforme, c’est son ergonomie.
Le design au service d’un comportement utilisateur responsive
Pas de responsive sans design responsive. Le principe est donc de créer un seul site pour de multiples interfaces. Le design doit s’adapter dans ce contexte flexible tout en conservant une homogénéité pour ne pas « perdre » l’utilisateur.
En revanche, il doit s’adapter et sa disposition peut changer. Il est plus fluide, par exemple, d’avoir un menu sur un site web sous forme de barre de navigation en haut de la page, souvent accompagné du logo et des sous-rubriques. Sur un téléphone, cela ferait beaucoup trop d’informations horizontalement. Pour un tel écran, il vaudrait mieux y mettre un bouton qui permet d’afficher les mêmes informations (et c’est important qu’on y retrouve les mêmes sous rubriques !), mais en colonne. C’est le fameux « menu drawer » ou « menu burger » que nous retrouvons aujourd’hui sur énormément de sites responsives. Scroller à l’horizontal, zoomer, dé-zoomer, ça n’est ni pratique ni intuitif, alors autant éviter.
Le développement, lui aussi, est responsive
Dès le départ, la question du responsive doit se poser. C’est une problématique qui nécessite d’être l’un des sujets centraux dès la conception des maquettes et du développement pour ne pas perdre de temps par la suite.
Sur ce sujet, il y a plusieurs écoles. Deux pour être exact : on peut faire deux développements distincts en fonction des plateformes, ou bien on peut n’en faire qu’une seule. Mutualiser un maximum le développement apporte un bon lot d'avantages. Non seulement, la mutualisation permet un gain de temps considérable en développement, mais elle permet aussi de gagner du temps lors de l’ajout de corrections ou d’évolutions : si on modifie quelque chose, on le fait à un seul endroit dans le projet. Cet exercice permet aussi de ne pas perdre en efficacité de contenu quand on passe de l’une à l’autre, et de conserver une meilleure expérience utilisateur. En se connectant via un nouvel écran, l’utilisateur retrouvera en effet facilement la navigation qu’il avait connue précédemment. Et la fidélisation passe aussi par cette expérience similaire.
Dans la conception d’une application, la satisfaction de l’utilisateur doit primer et être au cœur de nos choix. Le responsive n’est pas seulement une question de design (ce serait trop simple !) mais c’est aussi une réflexion de parcours, de fluidité et de fidélisation de nos utilisateurs. Une réflexion qui doit intervenir dès le début d’un projet.
Yoan, ingénieur développeur front