Concevoir son site en responsive web design

Le responsive web design permet de concevoir un site s’adaptant à une multitude de formats et d’interfaces, Web ou mobile. Intégrer les utilisateurs à la conception permet d’optimiser l’interface pour son usage réel.

En responsive design, le code HTML des pages web du site concerné ne change pas quel que soit le support (TV, ordinateur, tablette ou smartphone), l’orientation (portrait, paysage) et le système d’exploitation. Le système détecte la taille du navigateur ou le type de terminal utilisé et adapte l’affichage du site en conséquence.

Une prouesse technique qui veut répondre à la multiplicité et à la variabilité des interfaces

Ce mode de conception représente un gain important en termes de mise à jour a posteriori, même si le développement est long et coûteux techniquement : mise en page flexible réduction du poids des pages et des images, adaptation des contenus, réactualisation automatique de l’organisation des contenus en fonction du passage du mode portrait au paysage… Il s’agit donc non plus de réaliser une mise à jour par version de site mais une mise à jour unique d’une seule version du site destinée à tous les terminaux.

Une solution multi-écrans qui peut influencer l’expérience utilisateur

En mode responsive, l’utilisateur accède à partir de n’importe quel terminal à une interface optimisée pour sa taille d’écran. Qu’il se connecte via un smartphone ou un PC, il doit trouver efficacement l’information recherchée. Or, si l’on considère une expérience d’achat, elle ne sera pas la même depuis un ordinateur ou un smartphone (modalité d’interaction, temps de chargement, visibilité du contenu…). L’étude de Strangeloop Networks (2012 State of Mobile E-commerce Performance) montre ainsi que le chargement d’une page d’un site e-commerce standard (non optimisé pour le mobile) met en moyenne 11 secondes alors que les mobinautes souhaiteraient une attente inférieure à 4 secondes. Les modalités d’interaction et les caractéristiques des dispositifs n’étant pas les mêmes pour tous les supports, une réorganisation visuelle du contenu ne signifie pas pour autant une optimisation qualitative de l’expérience utilisateur.

Un choix de conception qui doit répondre aux objectifs et au contexte d’usage de l’utilisateur

La réorganisation de contenu engendrée par le responsive design permet de conserver une interface cohérente sur le plan visuel et interactif, notamment pour ce qui est des interactions simples telles que la lecture ou la consultation de contenus en ligne. Il est donc important d’intégrer en amont du processus de conception les réflexions concernant l’analyse des besoins et objectifs des utilisateurs, en corrélation avec le contexte d’usage (service de recherche par géolocalisation par exemple).

Les statistiques de consultation (pourcentage d’utilisateur qui consultent le site web à partir d’un dispositif mobile) et l’étude des variabilités des dispositifs ciblés (taille d’écran, connectivité, temps de chargement, luminosité, caméra, gyroscope, accéléromètre…) sont également à prendre en compte. Ces étapes permettent de hiérarchiser et sélectionner les contenus, définir les fonctionnalités et modalités d’interaction (doigts versus souris/clavier) utiles et utilisables sur les différents supports, tout en intégrant les objectifs utilisateurs et l’environnement physique d‘usage dans lequel il se place (intérieur, extérieur, en mobilité…). Un site marchand pourrait sur mobile mettre en avant et simplifier l’accès aux produits, la gestion du panier, clarifier et optimiser les fiches produits tandis que la vente transversale n’apparaîtrait pas.

Les alternatives : mobile first et versions distinctes

D’autres choix de conception sont possibles. Des versions distinctes proposeront un site pour chaque type de support visé. Un site web mobile pourra proposer des zones d’interactions tactiles adaptées aux caractéristiques des tailles de doigts et protégeront les utilisateurs d’éventuelles erreurs d’utilisation grâce à des zones actives adaptées autour des boutons d’action, le contenu pourra se décomposer sur plusieurs pages… Le choix de versions distinctes peut tout à fait intégrer du responsive pour s’adapter à la variabilité des supports visés comme les différentes résolutions d’écrans d’ordinateurs. Le choix du mobile first permettra quant à lui de se focaliser sur les fonctionnalités et contenus principaux du site. L’objectif sera ici de prioriser et de simplifier au maximum l’interface afin de répondre aux objectifs principaux des utilisateurs.

Daphné Repain est responsable des missions de conseil et des formations en ergonomie chez CCM Benchmark.

Bien choisir ses plug-in sociaux Facebook

Chaque réseau social propose aux sites Internet des modalités de viralisation et de recommandation qui lui sont propres. Dans ce domaine, Facebook est particulièrement généreux. Comment s’y retrouver ?

Multiplier les boutons de partage sur un site donné peut être source de confusion pour le visiteur et ralentir le temps de chargement des pages. Dans la forêt de plug-in sociaux mis à disposition par les plates-formes sociales, au premier rang desquelles figure Facebook, difficile de choisir les plus pertinents et efficaces.

Recruter de nouveaux membres pour sa communauté Facebook 

Pour inciter les internautes à devenir fan d’une  marque ou d’un site, il existe plusieurs outils dont  la Likebox et le bouton « S’abonner ». La Likebox est  un bouton intégré au site qui permet à l’utilisateur de devenir fan de la marque. Il est préférable que cet encart soit bien mis en évidence sur la page d’accueil du site. Si, sur la page Facebook, un jeu concours est organisé, il ne faut pas hésiter à le relayer sur son site à l’aide d’un visuel associé à la Likebox qui incitera les visiteurs à devenir fans. Le plug-in « s’abonner » permet, lui, à l’utilisateur  de s’abonner aux actualités Facebook publiques d’une personne. Ce plug-in est intéressant pour les  médias car il offre la possibilité de suivre l’actualité d’un journaliste par exemple et, pour les marques, de proposer à leur consommateurs de suivre certains de leurs ambassadeurs.

Facebook Connect : le plug-in «sensible»

Le bouton « Facebook Connect » permet la  portabilité des données Facebook sur un site tiers.  Il permet donc de se connecter à un site en utilisant  non pas les identifiants (login + mot de passe) du  site tiers mais ceux du compte Facebook de la  personne. Ce module doit être très visible et placé où son utilisation fait sens, à savoir sur la page  d’accueil du site, près des formulaires d’inscription, des avis produit ou des modules communautaires. Pour pallier le caractère anxiogène de cette connexion (l’internaute devra accepter que certaines informations de son compte Facebook  soient transmises au site tiers), il est indispensable d’informer clairement l’utilisateur sur les avantages et modalités d’une telle connexion. La déconnexion doit être simple et visible et l’importation de données doit se limiter aux informations de base du compte. Le plug-in « Facepile » permet quant à lui non pas de compter mais d’afficher l’avatar des amis de l’internaute ayant eux aussi actionné le bouton. Selon Pierre Matuchet, directeur général et fondateur de l’agence Milky Interactive, le plugin « Facepile » permet de générer 25 % de clics supplémentaires.

Des outils pour une recommandation plus personnalisée 

Quant à la « recommendation bar » et le bloc «  activity feed », ils fonctionnent comme des mécanismes de recommandation personnalisés. Ils permettent en effet au visiteur du site de visualiser le contenu déjà consulté et recommandé par les internautes, la priorité étant donnée aux actions de recommandations des amis de l’utilisateur. Champs « tiroir » ou disposés en « side bar » (barre latérale), ces outils mettent en avant d’autres produits ou articles, incitant ainsi le visiteur à consommer du contenu supplémentaire et à prolonger sa présence sur le site.

Partage : les contenus à privilégier

Les images peuvent influencer les internautes de plusieurs façons. Elles permettent d’attirer le regard, elles peuvent aussi avoir une influence directe sur les émotions que vont ressentir les utilisateurs en les voyant. Enfin, elles permettent de passer efficacement une information. Les contenus utilisant des nombres, des graphiques apportant des informations concises et mémorisables apportent une vraie plus-value et sont appréciés des utilisateurs, qui aiment les partager. Les internautes attendent d’une marque ou d’une entreprise de l’aventure, de la créativité, de l’inspiration, de la productivité. Les citations de type « inspiration » ou « motivation » (maximes ou citations de personnes célèbres, proverbes chinois…) sont également des types de contenus souvent partagés. Ces « conseils » seront rediffusés car perçus comme des informations utiles qui aident les autres membres du réseau social.

En complément

D’après l’étude « The psychology of sharing : why do people share online ? » du CIG pour le New-York Times, le partage a toujours fait partie intégrante du processus de socialisation de l’homme. En offrant plus de contenus, plus vite, à une audience plus large, Internet a fortement accentué le phénomène. Aujourd’hui, l’utilisateur partage du contenu pour fournir à son entourage des informations pertinentes et ciblées, pour interagir avec son cercle de connaissances et entretenir voire élargir son réseau. En outre, il se définit aux autres par le contenu qu’il diffuse et montre ainsi les idées ou les causes auxquelles il adhère. Force est de constater que la primeur d’une information largement rediffusée est d’ailleurs socialement valorisante. D’autre part, au-delà de cette dimension relationnelle et dans un contexte où l’information est omniprésente, le partage permet de s’approprier et de mémoriser le contenu diffusé.

Daphné Repain et Marie-Laure Monet

Daphné Repain est responsable des missions de conseil en ergonomie chez CCM Benchmark. Marie-Laure Monet est analyste, spécialiste des réseaux sociaux.