Responsive design / Adaptative design / Mobile first
Responsive design, Adaptative design et Mobile first sont des méthodes d’optimisation de l’affichage d’une interface web pour s’ajuster aux différentes tailles des écrans.
La mobilité est un phénomène incontournable auquel toutes les disciplines doivent s’aligner pour offrir une meilleure expérience aux mobinautes. En effet, le nombre de ces utilisateurs est en constante croissance (93 % de la population adulte en France utilise le téléphone mobile pour se connecter à Internet, selon le rapport global digital 2018 de Hootsuite we are social).
Donc, il faut comprendre les différences entre ces approches et les exploiter pour assurer une expérience utilisateur optimale. Alors, comment procéder ?
Qu’est-ce que le Responsive design ?
Le Responsive Design (Responsive Web Design: RWD) définit la capacité d’une interface web à s’adapter à la résolution de l’écran de l’appareil cible. Quelle que soit la taille du terminal utilisé (Smartphone, iPhone ou tablette), l’interface digitale s’aligne automatiquement à la résolution de l’écran. De ce fait, l’utilisateur peut visualiser le même site web sur son appareil mobile, avec le même niveau ergonomique que sur un desktop (avec quelques modifications bien sûr).
Le contenu d’une interface responsive doit se concentrer sur l’essentiel et fournir au mobinaute l’information utile dont il cherche. Cela évite de surcharger la page par des informations accessoires et de dégrader l’expérience utilisateur. D’où l’intérêt de privilégier l’UX Writing.
Comment évaluer la responsivité d’une interface ?
Pour vérifier si une interface web est responsive, on peut le faire :
- Manuellement : il suffit d’agrandir et de réduire la taille de la fenêtre du navigateur selon la résolution désirée.
- D’une manière automatisée, à travers des émulateurs responsive, tels que : le test d’optimisation de Google, Viewport resizer, Iphone tester, Responsinator, etc. Ces outils permettent de simuler l’affichage sur un terminal mobile virtuel pour tester rapidement la responsivité du site et identifier les failles dans la conception.
Lire à ce sujet : Les outils pour tester le Responsive Design de votre site
Les avantages du Responsive design
- Développer une interface utilisateur attractive qui assure un affichage flexible et adaptable à toutes les plateformes. Cela évoque les nouveaux standards du web (HTML, CSS3 Media Queries) qui assurent une meilleure compatibilité entre les anciennes et les nouvelles versions de navigateur. Ce qui garantit d’afficher le site d’une manière ergonomique, par la majorité des navigateurs, tout en préservant la qualité du contenu.
- Alléger le code, ce qui contribue à accélérer le chargement des pages et facilite le travail de maintenance.
- Éviter d’avoir 2 URLs pour le même site web. C’est-à-dire que dans le cas d’un site qui n’est pas responsive, il doit être développé en deux versions : une version pour Desktop (www.lesite.com) et une autre pour mobile (m.votresite.fr). Ce qui est onéreux en termes de coût et de temps de développement et qui peut engendrer des pénalités en référencement naturel.
- Le responsive design consolide le référencement naturel du site, puisqu’il favorise l’acquisition de backlinks (liens entrants) pour le même site. Cela permet par la suite d’augmenter sa visibilité et son classement sur les résultats de recherche et s’inscrit en fait dans l’approche du SXO.
Le Responsive design se présente comme la bonne alternative pour développer une seule version qui s’accorde aux différentes résolutions.
Responsive Web Design | 10 Basics
Qu’est-ce que l’adaptative design ?
Dans le cas d’adaptative design, le site web doit s’adapter à des largeurs fixes. A l’instar du Responsive design, l’adaptative design consiste à utiliser la même URL pour la version mobile. Il s’agit d’affiner le contenu et le code afin de répondre aux contraintes des résolutions restreintes.
Le développement d’un site Responsive requiert plus de temps par rapport à un site adaptatif, puisqu’il doit s’accorder à toutes les tailles des écrans mobiles. Par contre, la conception d’un site adaptatif s’intéresse uniquement à la taille du terminal cible.
Les avantages de l’adaptative design
- Conserver l’ergonomie et la consistance du contenu, quel que soit l’appareil utilisé.
- Améliorer le positionnement sur Google. En effet, Google adopte l’optimisation mobile comme un critère de ranking. De ce fait, les sites adaptatifs peuvent obtenir un meilleur classement sur les résultats de recherche. Ce qui entraîne d’autres avantages importants comme l’accroissement de l’engagement des utilisateurs et du taux de conversion.
- Économiser les ressources matérielles et immatérielles dédiées pour la maintenance du site et le suivi de son SEO.
- Mieux contrôler le budget du développement du site, parce qu’il sera destiné à un appareil bien déterminé. Ainsi, la marque doit concevoir un contenu propre au terminal envisagé et qui soit centré sur les besoins des utilisateurs de ce dispositif.
Adaptive Design VS Responsive Design
Qu’est-ce que le Mobile first ?
Le Mobile First est une approche de conception introduite par Luke Wroblewski en 2009. C’est une déclinaison du Responsive design, qui est orientée principalement vers les terminaux mobiles. Par la suite, la conception est déclinée pour prendre en considération les tailles des écrans des desktops.
C’est la technique inverse du Desktop First. Dans cette approche, les concepteurs et les développeurs web disposent de plusieurs fonctions, données et composants UI à placer dans les pages web. Par la suite, ces éléments sont épurés pour migrer vers la version mobile, ce qui peut leur prendre beaucoup de temps.
Le Mobile First change la donne et place en priorité la dimension mobile. Par ailleurs, elle offre aux UX designers la possibilité de bénéficier des avantages des nouvelles technologies, sans exclure les utilisateurs des ordinateurs de bureau. Pour ce faire, après la conception du site pour le mobile, les designers réalisent une dégradation disgracieuse (ou amélioration progressive/Progressive Enhancement) vers des écrans plus larges.
Le contenu doit être optimisé pour s’aligner à la contrainte de la taille restreinte du dispositif mobile. En effet, il doit être purgé des informations superflues, de façon à mettre en avant uniquement l’essentiel absolu. Les fonctions supplémentaires seront appelées en fonction des caractéristiques de la plateforme cible.
Mobile First Web Design Tutorial
Les avantages du Mobile First
- Soulever certaines difficultés relatives à l’incapacité de converger correctement de la version desktop vers la version mobile dans certains cas comme les problématiques liées aux configurations des serveurs, aux redirections des URLs et à l’architecture de l’information.
- Assurer une cohérence ergonomique sur toutes les plateformes. Puisque l’interface web est conçue pour le plus petit écran, elle peut s’adapter facilement à une résolution plus grande.
- Alléger la taille du site et réduire son temps de chargement, grâce à l’élimination des animations Flash, la minification CSS, la compression des images, etc.
- Faciliter le travail des développeurs web et réduire le temps de programmation.
- Offrir une expérience utilisateur percutante aux mobinautes, tout en profitant des performances de l’appareil mobile : retouche d’image, géolocalisation, caméra, etc.
Lire également l’article : What is Mobile First Design? Why It’s Important & How To Make It?
L’UX et le mobile : comment proposer une meilleure expérience utilisateur ?
Selon Mediametrie, 37,4 millions des internautes Français sont des mobinautes quotidiens. Les habitudes de navigation ont radicalement changé et convergent de plus en plus vers le web mobile.
Face à ce constat, il est devenu indispensable de répondre aux impératifs du mobile et de concevoir un site mobile friendly qui s’adapte automatiquement à la résolution de l’appareil en question.
Notamment, Google a adopté le critère de « convivialité mobile » depuis 2015, comme un élément important pour classer les sites dans son index. En effet, puisque le géant du web adopte une approche centrée sur l’utilisateur et dans le but d’offrir une UX agréable aux mobinautes, il a révisé ses algorithmes pour prendre en considération l’essor du web mobile.
Un site mobile friendly se caractérise essentiellement par :
- Un contenu clair et facile à comprendre.
- Une typographie lisible.
- Une hiérarchisation optimale des informations et des éléments UI sur l’interface utilisateur.
- Un temps de chargement rapide.
- Une navigation simple et intuitive.
Définir une stratégie mobile
La valeur apportée par l’application ou le site implique une expérience utilisateur optimale. Cela donne lieu à un produit plus utile, utilisable, désirable, navigable, accessible et crédible.
Pour atteindre cet objectif, il est pertinent de mettre en place une stratégie mobile centrée sur l’utilisateur. Cette politique doit tenir compte de ces aspects :
- contexte d’utilisation du produit : il s’agit de définir le périmètre d’usage de l’application mobile : le type de l’information qu’elle délivre, la population ciblée. Pour ce faire, il est recommandé de créer des personas afin d’élaborer des profils types pour les mobinautes ciblés.
- objectifs de la marque : augmenter le trafic, diminuer le taux de rebond, améliorer le taux de conversion, accroître le nombre de téléchargements de l’application mobile, augmenter les ventes en ligne, etc.
- besoins de l’utilisateur final : la marque doit placer ces besoins au centre de ses préoccupations. C’est dans le but d’obtenir un équilibre entre ses objectifs et ceux de sa cible.
Techniquement, la marque peut choisir entre :
- Stratégie mobile native : elle concerne le développement d’une application native dédiée pour un système d’exploitation spécifique, comme Android ou IOS.
- PWA (Progressive Web Application) : cette technologie (propulsée par Google) consiste à développer un site qui remplit les fonctions d’une application mobile. Donc, il serait possible de bénéficier des avantages de l’application et du site en même temps. Notamment, il est possible d’accéder directement au site à travers un navigateur web ou d’un raccourci d’écran, sans passer par un téléchargement à partir d’un store. Il est également possible de travailler en mode hors connexion et de bénéficier de la performance du système de cache pour optimiser la navigation.
- AMP (Accelerated Mobile Pages) : est une autre technologie mise en place par Google qui vise à optimiser significativement la navigation sur une page web. Elle vise à accélérer sa vitesse de chargement, ce qui réduit le taux de rebond, favorise la visibilité du site web et améliore le SEO du site.
10 ASTUCES UX UI POUR CONCEVOIR DES APPLICATIONS MOBILES
La conception des maquettes
Suite à la définition de la stratégie mobile, on dispose de toutes les données qui permettent au designer de concevoir les premières maquettes.
Au cours de l’avancement dans la conception, les interfaces préétablies sont améliorées, à travers les tests utilisateurs, dans le but de répondre aux attentes de l’utilisateur et d’offrir une UX intuitive.
Notamment, le concepteur a tout intérêt à décomposer le contenu en parties, afin d’organiser les fonctionnalités et les répartir sur les différentes pages. Cela aide le mobinaute à trouver rapidement l’information, à la comprendre facilement et à réagir convenablement.
Le design graphique
Cette étape consiste à donner vie aux maquettes réalisées. Le designer doit toujours tenir compte des exigences de la charte graphique et des besoins des utilisateurs, à travers les tests utilisateurs.
Il existe de bonnes pratiques à appliquer pour développer des interfaces qui offrent une meilleure expérience utilisateur. Par exemple, il faut :
- Miser sur la simplicité : il est recommandé d’adopter le design minimaliste, tel que le design plat ou flat design. Cette technique permet de développer des interfaces utilisateur flexibles, élégantes et intuitives, avec une navigation plus facile. De plus, elle assure un rendu simple, harmonieux et épuré de tout élément pouvant détourner l’attention de l’utilisateur.
- Utiliser des couleurs vives, pour mettre en évidence certaines zones de l’interface web et rendre l’application plus attrayante. Toutefois, il faut le faire avec modération afin de ne pas gêner la vision du mobinaute.
- Ajouter des animations pour rehausser l’aspect intuitif du site ou de l’application et valoriser l’interaction de l’utilisateur avec l’interface web ou mobile.
Tester l’aspect fonctionnel de l’interface digitale
Le test des fonctionnalités de l’application ou du site, permet de détecter les éventuels bugs avant sa publication dans le store ou son hébergement sur le web.
L’UX designer peut employer différentes méthodes pour tester son travail, telles que l’A/B testing, les questionnaires et les tests à distance.
L’interprétation des résultats de ces tests permet d’obtenir des statistiques et des données nécessaires pour définir les axes d’optimisation de l’efficacité de l’interface digitale.
Pour rappel, lire : Les différents outils d’évaluation UX
Conclusion
L’évolution du web mobile impose la prise en considération de l’aspect mobile dans la conception d’une interface web. Pour ce faire, l’UX designer doit optimiser sa stratégie de conception en se référant aux techniques dédiées : le Responsive design, l’Adaptative design et le Mobile first.
C’est la solution pour maintenir un bon classement sur les résultats de recherche, offrir une navigation facile et intuitive, d’où une meilleure UX. Pour s’assurer de l’efficacité d’une interface, il convient d’utiliser certains outils de test favorables comme : Eye Tracking, Test de 5 secondes, Guerilla Testing, etc.
by 
