Responsive ou Adaptive Design ?

La différence entre le “Responsive Design” et ce qu’on appelle “Adaptive Design” n’est pas forcément évidente à première vue. Dennis Herzberger donne une explication assez claire dans son article dont je vous propose la traduction aujourd’hui avec son accord.

Décision stratégique : Responsive vs. Adaptive Design

Dans cet article, nous allons mettre en lumière un sujet récurrent et nous vous aiderons à prendre cette décision stratégique : Responsive ou Adaptive Design ?

Commençons par un point qui nous met tous d’accord : un site internet est aujourd’hui indispensable et se doit d’être déployé sur tous les écrans. Aujourd’hui, les utilisateurs ont d’autres appareils pour surfer sur internet et le PC fixe de la maison ou du bureau n’est plus notre seul accès. Nous voyons tous les jours dans le train et dans la rue des « Smombies » (Smartphone + Zombies) fixés sur l’écran de leur mobile. Et pourtant, nous entendons encore bien trop souvent parler des problèmes de navigation via les appareils mobiles.

Et la raison se trouve à portée de main : de nombreuses entreprises tentent de compresser l’intégralité de leur site sur un écran plus petit – dit ainsi cela paraît impensable, et pourtant… Un site web sur mobile doit offrir aux utilisateurs uniquement ce dont ils ont besoin sur le pouce : une interface propre et claire en somme !

Les besoins des utilisateurs, ainsi que le contexte dans lequel ils consultent votre site, forment la base de votre réflexion pour décider si vous devez opter pour un Responsive ou Adaptative Design. Nous avons constaté que beaucoup évoquent seulement le « Responsive Design ». Mais est-ce toujours la solution la plus optimale ?

Dans cet article, nous vous expliquerons la définition qui se cache derrière le terme de Responsive Design, quels sont les avantages et les inconvénients en comparaison à l’Adaptive Design. Et comment savoir quelle stratégie utiliser grâce à une analyse de l’utilisateur Canvas.

Responsive vs. Adaptive Design  – quelles différences ?

Ethan Marcotte a créé la notion de Responsive Design en 2010 dans un article pour le magazine A List Apart. Depuis, ce terme circule dans les esprits sans jamais connaître les subtiles différences avec l’Adaptive Design.

Non, chaque page web qui s’adapte automatiquement à la taille du navigateur, n’est pas forcément une page web Responsive. Mais pas de panique : les professionnels ont également des difficultés pour distinguer les deux notions. Voilà pourquoi je souhaite vous démontrer, à travers cet article, les différences et vous donner une aide à la décision.

Source

Qu’est-ce que le Responsive Design ?

Les pages qui sont à 100% Responsive s’adaptent au viewport (donc à la taille de la fenêtre de navigateur), peu importe que la largeur soit de 400px ou 4000px. L’appareil utilisé pour visualiser la page n’est pas une priorité, mais la taille de la fenêtre est décisive. Des contenus – comme par exemple des images ou des textes – s’intègrent simplement et de manière flexible selon la grandeur de l’écran respectif.

⇒ Pour en savoir plus sur le fonctionnement de ces accommodations, je vous suggère de prendre connaissance de cet article.

Dans la pratique, cela se présente de la façon suivante : si 3 images juxtaposées ou blocs de texte ne conviennent pas à l’affichage horizontal de l’écran (par exemple, prenons le cas d’une tablette en mode portrait view), ces zones de contenus vont se déplacer tout simplement : elles « flotteront » et se disposeront verticalement.

Une page web unique pour tous les appareils, c’est le rêve de tout Développeur et Content Manager : cela économise évidemment beaucoup de temps et de travail. Maintenant arrive le grand MAIS, car l’erreur se trouve dans le détail. Tout simplement parce que la page s’adapte automatiquement pour chaque appareil, ne veut pas dire qu’elle est aussi performante et se charge relativement vite. On utilise pour la page le javascript ou Frameworks comme moteur, le smartphone les chargent également. Bien que les domaines correspondent avec CSS (le display : none), le visiteur avec son smartphone doit attendre jusqu’à ce que ces Script et Frameworks soient chargés. Suivant le nombre de personne qui entrent en action, le temps de chargement peut devenir très désagréable pour le visiteur. La situation est similaire avec les grandes images qui sont mises à l’échelle simplement sur la grandeur de l’écran sans adapter pour autant leur taille. Et cela peut causer également un temps de chargement très long.

La conception d’un design Responsive requiert un effort initial important, cela génère donc des coûts plus élevés. L’entretien est plus simple après-coup et ne nécessite pas un budget particulier une fois conçu.

Une courte parenthèse – RESS, Responsive Design + Server Side Components

La technologie Responsive s’est perfectionnée naturellement depuis son apparition. Contrairement au Responsive Design classique (pour lequel un design unique est conçu), le RESS consiste à détecter le type de terminal et à charger uniquement les éléments qui lui correspondent (images, fichiers HTML, javascript, etc). Ainsi, tous les contenus ne sont pas nécessairement chargés mais uniquement ceux qui sont utiles pour l’appareil et le navigateur. La page devient ainsi distinctement plus performante. Pour construire cette architecture, un budget supplémentaire est indispensable dans la phase de démarrage.

⇒ A savoir : Seulement 22% des sites eCommerce Allemands se basent sur un pur Responsive Design. (Infographie : le top 100 des boutiques en ligne)

Si votre page livre une bonne performance, vous pouvez la contrôler avec les outils Google PageSpeed.

Qu’est-ce que l’Adaptive Design ?

L’Adaptive Design quant à lui va bien au delà d’une simple fluidité dans la mise en page. En fonction de l’appareil utilisé (smartphone, tablette ou ordinateur ), l’utilisateur peut consulter le même site web avec le même confort visuel et sans avoir à zoomer, défiler horizontalement ou toutes autres manipulations qui peuvent parfois dégrader l’expérience utilisateur (en lecture comme en navigation). C’est précisément pour cela que cette technique offre une très bonne performance.

De ce fait, nous sommes contraints de développer une stratégie de contenu propre à chaque support au moment de la conception. Ce contenu doit être pensé et élaboré pour le visiteur et se doit d’être centré sur l’expérience utilisateur. Pour cela, nous devons comprendre en amont quel est le besoin du client et ses habitudes de navigation sur le site web.

Grâce à des concepts définis dans la phase de démarrage, le budget pour l’Adaptive Design peut être très bien contrôlé. Tout simplement parce que cette stratégie s’accorde avec les besoins de l’utilisateur : il est donc plus probable d’avoir un rapide retour sur investissement (ROI) en améliorant le taux de conversion pré-établi. Mais le coût en termes de « maintenance de contenu » et d’entretien sont plus élevés pour l’Adaptive Design, en particulier avec les nouveaux modèles d’appareil.

Par exemple :

L’Allemand Bahn AG a compris que les utilisateurs de smartphones sont des voyageurs fréquents et, dans leur contexte d’utilisation, ils veulent principalement des informations sur les trains et les horaires. La portée du site mobile a été fortement réduite, donc ici le Responsive Design n’a pas de sens.

⇒ A savoir : Déjà 78% du Top 100 Onlineshop se mettent activement à l’Adaptive Design. (Infographie : Commerce sur mobile en Allemagne)

Le « Gradient Chart » de Cennyd Bowles comme aide à la décision

Une méthode simple, mais très effective, pour se décider entre Responsive ou. Adaptive Design, ce « Gradient Chart » a été imaginé par Cennydd Bowles :

Source

La décision fonctionne ainsi d’après le « Gradient Chart » :

1. Contrôler les tâches que l’utilisateur voudrait exécuter sur ordinateur et les lister ensuite selon leur priorité

2. Maintenant, les tâches sont listées dans une autre liste selon leur importance sur smartphone

3. Comparer les deux listes et dessiner des lignes entre les tâches identiques

→ Si les lignes sont plutôt dans une structure plate (comme à gauche dans le graphique), on reconnaît que les contenus peuvent être représentés dans une trame unique et sont donc adaptés pour le Responsive Design.

→ Cependant, si les lignes se croisent fréquemment, il est probablement plus rationnel d’adapter les contenus aux besoins des utilisateurs et donc de construire un page sur le modèle de l’Adaptive Design.

Débuter par l’analyse de l’utilisateur

Les deux techniques se soucient d’adapter au mieux la page web à l’écran du visiteur… Stop ! En principe, seulement les contenus devraient être adaptés à l’appareil ou au viewport. C’est un point de vue très technique puisque, si l’utilisateur en est satisfait, à ce stade on ne le sait pas encore.

La question, la plus fréquente, au début d’un projet mobile est : « Dois-je partir sur un design Responsive ou Adaptive » ? De mon point de vue, c’est une mauvaise idée de réfléchir ainsi car celui qui va se servir de la page et qui va potentiellement passer à l’achat est complètement négligé : le client !

Celui qui ne connaît pas son utilisateur et ses besoins, ne peut pas le satisfaire. Ainsi, ce type de projet a toutes les chances d’être couronné de succès, seulement cela demande pas mal de temps et un budget doit être établi en amont pour pouvoir mener un sondage utilisateur. Bien que cela prenne du temps d’exécuter des sondages d’utilisateur, à la fin, c’est toujours payant. L’argent investi « protège » (dans une certaine mesure) de partir sur la mauvaise technique ou de devoir entreprendre par la suite des  accommodations bien plus chères.

« L’angle de vision doit être changé pour qu’un projet mobile soit couronné de succès et il se doit d’être centré sur l’utilisateur. »

Connaissez-vous les besoins des visiteurs sur votre page web ? Sarenza utilise une entrée sur une grande partie de l’écran via une barre de recherche largement mise en avant. Alors pour le site mobile de Zalando, il y a des points d’entrée rapides (représentés par des icônes) pour accéder aux catégories (menu, accueil, mes préférés, mon panier, etc) ou encore par des images (Femme / Homme). Et vous, qu’attend votre client de votre site internet ?

Les Best Practices mobiles sont des mensonges – Testez par vous même !

Beaucoup font cette erreur : ne pas prendre en compte le coût pour optimiser sa propre page et ainsi pouvoir l’adapter spécialement aux besoins de ses utilisateurs et au parcours client. Au lieu de cela, certain se contente de jeter un œil chez le concurrent, regarde à quoi ressemble sa page mobile et copie tout simplement la manière d’agir. Il faut noter que l’univers du mobile est encore tout récent : il n’y a jusqu’ici aucune Best Practices réellement établies. Il y aura donc encore des erreurs à venir, il faut apprendre encore et sans relâche adapter ses pages web.

⇒ Quelques provocations :

Le Menu-Burger est-il bien identifié ?

Sur l’écran d’un smartphone, il y a peu de place disponible. Ainsi, dans beaucoup de cas, le Menu-Burger s’est rapidement imposé aux exploitants. Mais il est légitime de se poser la question suivante : est-ce qu’une cible plus âgée peut identifier cette icône ? Lors d’un Test AB, nous pouvions découvrir qu’un icône Menu-Burger est identifié dans près de 50% des cas, mais que l’icône fonctionne mieux s’il est clairement associé à l’inscription « Menu ».

Est-ce que le plus important est accessible avec mon pouce ?

Si nous restons sur l’exemple du bouton de menu : Connaissez-vous la position parfaite pour cette icône ? Je me demande, pourquoi les éléments importants sont intégrés dans un endroit qui est difficile à atteindre avec le pouce ? Surtout au temps où les écrans des smartphones deviennent plus grands de nouveau !

Des applications comme « Wunderlist » et « Todoist » le montrent déjà : on peut ajouter de nouvelles tâches très simplement via une icône qui est positionnée en adéquation avec notre doigt dans la partie inférieur de l’affichage. Avez-vous déjà testé une nouvelle position pour vos icônes de menu ?

Luke Wroblewski a abordé la question de Responsive Navigation et mené un opération en 2012 favorable à l’utilisation du doigt : finger-friendly. Comme le montre l’image ci-dessous, le coin supérieur gauche est particulièrement difficile à atteindre pour un droitier. Malgré de tels problèmes connus et démontrés par des experts, nous voyons encore trop de design faussé.

Autrefois, les sites mobiles misaient sur une stratégie de navigation via la partie supérieure de l’écran. Depuis, la navigation a changé et se situe au niveau du bord inférieur de l’écran.

Pour parvenir à une expérience utilisateur optimale,  il n’y a donc rien d’autre à observer que l’utilisateur lui-même et ainsi vérifier les hypothèses lors d’un Test AB. Seule cette approche tactique parvient à créer la satisfaction du client et aller au-delà des meilleures pratiques supposées !

Répondez à ces questions avant de commencer un projet mobile :

• Dans quel contexte, les visiteurs consultent le site ?

• Y a t-il des différences dépendantes du périphérique dans l’utilisation du site ?

• Comment le site est utilisé sur le desktop et quelles sont les tâches accomplies ?

• Quelles sont les exigences avec la page Web si la page est consulté avec un smartphone ?

• Quelles sont les ressources disponibles pour le développement et l’entretien du site ?

• Comment sont gérées et modulées les activités marketing pour ce type de périphérique ?

Le Growth Canvas, la stratégie mobile adaptée

Le Growth Canvas est un modèle stratégique qui vous indique le chemin qui vous mènera vers la plus forte croissance. Il contient plusieurs étapes qui se fondent chaque fois l’un avec l’autre. Dans le meilleur des cas, l’entreprise maîtrise toutes les disciplines et dispose d’assez de ressources pour pouvoir projeter proprement tous les domaines. Le Growth Canvas vous aide aussi dans la décision pour la stratégie mobile la plus adaptée. Comme ici en lisant cet article, vous apprenez !

Stratégie : la base d’un bon site mobile

Le premier niveau du Growth Canvas est particulièrement adapté pour les pages mobiles afin de créer une bonne base. Une stratégie mobile ne se déroule pas selon notre souhait,  » nous devons aussi être sur que le smartphone puisse le réaliser ! « . Pour cela , il faut une équipe distincte qui s’occupe spécifiquement de la maîtrise des processus et la détermination de l’image cible. Malheureusement, la stratégie ne pas être achetée dans un magasin mobile !

Du coup, la question doit aller dans ce sens :

– Qui doit-on atteindre avec le site mobile ?

– Quels KPIs , nous pouvons définir le taux de conversion ?

– Comment mesurer le succès ?

Analyse et insights – prioriser le contenu et le rendre tangible

Ce niveau est probablement le plus vaste et aussi le plus riche en connaissance. Ce qui est interprété ici par les données analytics permettent d’évaluer et de savoir avec quels appareils la page est chargée, quelles sont les tailles d’écran fréquemment utilisées et quel est le contenu chargé sur le smartphone. Cela permet ensuite de tirer des conclusions sur le parcours du client.

Les produits ne sont pas tous achetés directement depuis un smartphone. Il est toute à fait possible que les articles achetés sur mobile soient ceux qui sont peu cher et de qualité moyenne . Une analyse est peut être la meilleure solution pour le savoir ?

Si vous pensez que votre page est, à la fois, amusante à utiliser et mais aussi ciblée pour le client, vous pouvez le découvrir en observant les utilisateurs en temps réel lors de l’utilisation du site. Dans le processus de création d’un site mobile, ceci est une étape très importante. Des design ou des prototypes peuvent être testés avec de vrais utilisateurs, cependant il est nécessaire de savoir qui sont vos vrais clients en amont, par exemple, en créant des personas.

Des questions importantes qui répondent aux principes de ce niveau :

– Quels appareils sont utilisés par nos visiteurs?

– Qu’est-ce que le parcours client pour les clients ?

– Quels leviers d’optimisation peuvent être identifiés ?

– Pourquoi ne pas acheter les clients ?

Hiérarchisation – identifier et potentiel de documents

L’optimisation des sites web est comme un cycle : analyser , convertir, essayer, mesurer, … et le cycle recommence. Le bon levier ainsi que les idées pertinentes sont identifiées par la page à intervalles réguliers et certains concepts sont remis en question. Dans un carnet de commandes, de nouvelles hypothèses sont retenues et priorisés en équipe. Ainsi, la page est en constante amélioration.

Afin de prendre une décision objective, nous allons utiliser un système de notation qui sera focus sur l’effort et l’impact de la page. Cette estimation a l’avantage d’être concentrée les hypothèses à tester et uniquement sur celles qui justifient vraiment d’être testées. Une bonne idée de test, mais qui nécessite 6 mois pour la mise en œuvre des tests AB, empêche une approche agile pour une croissance plus rapide.

Optimisation – une page mobile peut faire l’objet d’un Test AB

Que ce soit en optant pour un design Adaptive ou Responsive, afin d’éviter le piège des « Best Practices« , les hypothèses et les idées doivent être testées sur l’arrière du site réel par un panel de visiteurs. C’est la seule façon de prouver, avec des données chiffrées, que l’idée fonctionne pour le groupe cible.

Le succès du test peut être facilement validé et calculé par les 3 questions suivantes :

– Combien de tests sont effectués chaque année ?

– Quelle est la proportion de tests positifs ?

– Quelle est la hausse moyenne ?

Il a été affirmé à plusieurs reprise que des Tests AB n’ont pas d’intérêt sur des sites mobiles, parce que le taux de conversion est (encore) trop faible. Voilà pourquoi il est intéressant de tester ! Pour permettre une augmentation du taux de conversion.

→ Proposition de KPI : Faciliter une entrée dans le magasin et guider l’utilisateur ciblé,cela réduit très probablement le taux de rebond !

→ Proposition de KPI : Grâce à un guidage d’itinéraire rapide et efficace, le nombre moyen de clics requis du parcours client peut être réduit.

Il est donc judicieux d’élaborer une stratégie mobile et d’effectuer des Tests AB. Comme le montre le Rapport trimestriel actuel sur E-Commerce de Monetate, les leviers et le potentiel d’optimisation sont très élevées, en particulier sur les sites web mobiles.

Source

Conclusion

Se décider entre l’Adaptive ou Responsive Design est loin d’être facile et ne peut se faire en un jour. Malheureusement, il n’y a pas qu’une seule approche possible : d’où l’intérêt de mener des analyses et enquêtes auprès des utilisateurs. En outre, les ressources jouent un rôle important qui devraient également contribuer au maintien et l’évolution de la page mobile.

Les deux solutions ont leurs avantages et leurs inconvénients. Cependant, quelques soit la solution, il est important que l’utilisateur puisse utiliser la page et qu’elle lui fournisse des solutions à son problème. Si une solution mobile a été déployée, continuez d’investir du temps dans d’autres innovations à travers des recherche et des Tests AB. Ainsi, vous poursuivez la croissance de votre modèle d’entreprise et votre site mobile évoluent avec les besoins de vos utilisateurs. Cela a un effet positif sur les objectifs de croissance et d’affaires !