Quelle place doit prendre le mobile lors de la réflexion d’une conception de site web ?
lundi 6 mai
Sites e-commerce, Sites vitrine
Aujourd’hui, il paraît inconcevable que lorsque l’on créé un site web on n’imagine pas également sa version responsive, à savoir un site qui s’adaptera à tout type d’écran, de l’ordinateur en passant par la tablette jusqu’au téléphone. L’expansion de l’intérêt pour le responsive s’est surtout fait ressentir suite à l’utilisation toujours plus importante de notre téléphone mobile. Aujourd’hui 77% des français possèdent un téléphone mobile détrônant les 74% détenant un ordinateur, 48% d’entre eux préfèrent utiliser leur smartphone pour se connecter à Internet tandis ce que 43% utiliseront leur ordinateur. Ces chiffres rapportés par CERDOC en 2017 montrent l’intérêt toujours plus grand que l’on porte à son smartphone. Cette constante augmentation amène à penser qu’il peut être préférable d’avoir finalement une version mobile plus « léchée » et privilégier ainsi l’expérience utilisateur sur mobile que sur ordinateur. C’est ce qu’on appelle plus généralement le mobile first.
Le mobile first : l’alternative.
Le responsive est vendu tel une adaptation du contenu html par le css en fonction de la taille d’écran utilisé. De façon plus explicite on va finalement adapter ce que l’on fait pour le desktop vers le mobile en ne changeant pour dire que le CSS. Ça c’est la vraie définition du responsive. Ce qui réduit de fait l’adaptabilité de votre site d’une taille d’écran à l’autre. On retrouve un contenu fixe, pour le coup, avec une disposition des blocs et une interface assez semblable à celle de la version desktop. Malheureusement, tous les éléments visuels et fonctionnels d’un site Web optimisé pour l’ordinateur ne se traduisent pas toujours bien sur un appareil mobile. C’est ici que le mobile-first intervient. On placera dans ce cas le design de la version mobile en avant quant le responsive lui plaçait le design desktop au premier plan. On promeut alors le design mobile au coeur même de la conception de son site Web. Il est donc important lorsque l’on entame cette démarche de faciliter au mieux la navigation de vos utilisateurs sur leur téléphone mobile, ainsi toutes les étapes potentielles d’UX Design (Tri de cartes, AB testing…) seront prioritairement axées sur mobile. On réfléchira par exemple à la position du menu, à l’optimisation technique de certains éléments pour avoir un délai de chargement de vos pages sur mobile réduite, à la visibilité de certain contenu ou encore à leur dégraissage.
Adapter la conception au projet.
Même si nous pouvons penser que le mobile-first est de plus en plus démocratisé, certains projets ne conviennent pas à cette démarche et la conception traditionnelle d’un site à savoir la méthode de responsive design reste encore bien souvent privilégiée. Les sites e-commerce en sont le parfait reflet.
Nous savons par exemple que le taux de transformation sur mobile est bien plus faible que celui sur desktop ou même tablette. nous pouvons alors tout à fait comprendre qu’un e-commerçant ait comme souhait d’avoir une expérience utilisateur bien plus aboutie sur desktop que sur mobile.
Le choix se ferra donc suivant l’utilisation qu’est faite de votre site par votre clientèle. Une étude de marché peut être intéressante à mettre en place, détecter ainsi sur quelle plateforme vos utilisateurs utilisent votre site, cela vous donnera une indication sur l’expérience utilisateur à adopter et donc la méthode à choisir.
Il n’y en a pas de bonne ou de mauvaise, elles sont toutes les deux adaptées à des utilisations différentes de votre site. Si d’après votre étude il en ressort que 80% de vos utilisateurs de votre site utilisent leur smartphone pour consulter votre site web, il sera pertinent d’avoir une démarche mobile-first. À l’inverse si 80% d’entre eux préfèrent le parcourir sur Desktop alors la méthode original de responsive design semble la plus adaptée.
Pour en savoir plus sur notre méthode de conception ou sur la question du mobile pour votre site web, n’hésitez pas à nous contacter.