Exploration de 2 philosophies pour la gestion du offline PWA
Case study : PWA chez France Télévisions
Une PWA c’est quoi ?
Une PWA ou Progressive Web App est un site Internet ayant intégré des fonctionnalités jusqu’alors réservées aux applications. L’utilisateur fait ainsi l’expérience d’une navigation rapide, immersive, faible en ressources de stockage et s’ajustant en fonction de la compatibilité des devices.
Si le sujet vous intéresse je vous invite à lire mon article :
Les PWA ou la responsabilité de penser une expérience du hors ligne
La gestion du offline : nouvel enjeu représentatif de la qualité d’un site ?
Nos vies hyper connectées se voient souvent prises de court, rappelées à la cruelle réalité d’un monde sans réseau : que ce soit aux portiques du métro, en passant sous un tunnel, en prenant l’avion ou simplement parce que la couverture n’est pas bonne. Ces situations quotidiennes peuvent être frustrantes car elles ne nous offrent aucune autre alternative que de les subir.
Cette affirmation n’est plus vraiment exacte à présent. Depuis quelques temps maintenant, des applications misent sur ces temps morts en proposant aux utilisateurs de télécharger des données, les rendant alors accessibles lorsque ce dernier est hors ligne. C’est notamment le cas de Spotify qui a fait de l’écoute offline une de ses promesses “ Prenium ” ou de l’application “ Docs ” de Google qui permet à l’utilisateur de consulter et d’éditer les fichiers quelle que soit sa connexion. Cependant, cette gestion du offline demande à l’utilisateur une action au préalable (nécessitant pour la plupart une connexion WiFi) et charge des données directement sur la mémoire de son téléphone. C’est une fonctionnalité pour les “avertis” ou abonnées mais qui donne un avantage certain aux applications ayant misé sur ces expériences.
Aujourd’hui, grâce aux PWA, l’exploration d’une expérience offline n’est plus seulement réservée aux Apps.
Imaginez-vous en train de lire les informations du matin, lorsque vous perdez votre connexion. Votre navigateur vous fait alors face
“Désolé, pas de réseau, reviens plus tard”!
Classique ? Plus maintenant grâce aux PWA. En effet, lorsque vous serez reliés à la 4G, votre navigateur va venir “stocker” dans son cache des informations, des contenus qu’il sera en mesure de vous restituer bien que vous soyez hors ligne. L’expérience utilisateur sera alors sensiblement similaire à une navigation online ! Vous pourrez naviguer dans les articles ayant été préchargés. De plus, contrairement aux applications qui chargent les contenus directement sur la mémoire de votre téléphone, une PWA les précharge dans votre navigateur. Il vous suffira de fermer votre onglet pour vider les données stockées.
L’expérience que l’utilisateur fera alors du service sera plus rapide, immersive et qualitative. Sans temps mort et interruption brutale, les sites capables de bien gérer le hors ligne et de proposer des expériences spécifiques deviennent naturellement des références.
La gestion du Offline : bien choisir la philosophie de produit
La gestion du offline demande aussi d’être capable de se positionner. Il serait dangereux d’y plonger sans s’être questionné sur la philosophie que nous souhaitons insuffler à notre produit grâce à cet outil. Il nous revient de décider si nous souhaitons proposer à l’utilisateur un tunnel experientiel du offline ou de proposer une expérience partielle du online.
Il est important de choisir quel chemin nous souhaitons emprunter car toute l’architecture, toutes les interactions avec l’utilisateur et tous nos futurs choix découleront de cette décision.
Case Study : Comment nous avons accompagné Franceinfo et sa gestion du offline
Alignement avec les différents acteurs et proposition de deux parcours
Notre première action avec Bérengère Capdequi, PO dédiée au projet, a été d’animer un atelier d’idéation avec les différents acteurs de l’info : de l’équipe produit, de l’équipe tech et des journalistes. Nous avions déjà des retours utilisateurs recueillis durant les tests utilisateurs et discussions en amont.
Lors de cet atelier d’alignement, nous avons demandé à chacun de dessiner le parcours idéal offline selon différents scénarios. Puis nous avons fait deux équipes mixtes qui ont retranscrit un parcours global utilisateur. Grâce à cet atelier nous avons pu lister des points bloquants et conditions nécessaires aussi bien éditoriales, expériences, techniques pour la réussite de ce projet.
2 positionnements philosophiques du produit
Suite à cet atelier, nous sommes revenus avec 2 propositions adoptant deux visions distinctes.
Pour chacune des propositions, nous avons fait des maquettes, des userflows ainsi que des vidéos d’intentions pour expliquer le comportement.
Posture offensive
Si l’interface pouvait parler, elle dirait “ Hello, problème, tu n’as plus Internet donc logiquement tu ne devrais même plus être en mesure de naviguer. Mais comme on est un site du futur, on t’a sélectionné des contenus que tu peux consulter hors ligne. Bienvenue dans l’expérience du offline ! ”
Le positionnement “offensif ” prend le parti pris radical d’emmener l’utilisateur dans une navigation parallèle, un tunnel offline.
- Les avantages sont nombreux.
Ici, ne sont affichés que des contenus accessibles hors ligne visant à éviter toute frustration de l’utilisateur vis à vis des contenus qui seraient visibles mais non accessibles. L’utilisateur est plongé dans une expérience différente / totale avec une navigation et des contenus spécifiques ( nous pouvons imaginer des articles reprennant l’essentiel de l’info de la demie journée, des articles avec un seul média facilement préchargeable). L’utilisateur a pleine conscience de la situation dans laquelle il se trouve. - Les inconvénients également.
Cette posture est assez ambitieuse et demande des ressources importantes de toute part. Si l’expérience n’est pas à la hauteur, l’utilisateur se sentira trompé. Les enjeux sont donc de penser la navigation offline comme un produit à part. Cela demandera un parcours irréprochable, de définir avec les équipes de journalistes quels contenus seront poussé et comment. Il est également très important de penser aux questions de performances techniques.
Posture défensive
Si l’interface pouvait parler elle dirait “ Désolée,tu n’as plus Internet, notre offre n’est plus accessible dans son intégralité. Si tu cliques sur des contenus grisés, tu auras une page 404 comme feedback mais si tu cliques sur un contenu “ normal ” je te promets une expérience semblable à du online :) ”
Le comportement “défensif ” propose une navigation semblable online mais un peu dégradée “ visuellement ” et “ comportementalement ” dù au hors ligne.
- Les avantages de ce positionnement sont qu’il nécessite moins de resources aussi bien du coté utilisateur que produit / technique et qu’il ne nécessite que peu d’apprentissage à l’utilisateur (comprendre que les contenus désopacifiés ne sont pas accessibles). Cela est moins compliqué à mettre en place techniquement et ne nécessite pas d’architecture spécifique.
- Les inconvénients sont liés au fait que la navigation est semblable à celle du hors ligne mais malheuresement pas de son integralité. Toutes les fonctionnalités et tous les articles sont “ visibles ” mais pas forcément accessibles. Le recours à des contenus grisés est nécessaire pour ne pas inciter l’utilisateur à adopter un comportement qui pourrait être déceptif.
Le positionnement défensif fait le choix de ne pas offrir une véritable expérience du offline mais propose tout de même à l’utilisateur une alternative qualitative à une navigation impossible en hors ligne.
Choix du positionnement et accompagnement
Avec tous les acteurs du projet nous avons choisit de partir dans un premier temps vers un parcours défensif.
Il n’y avait pas de bons ou de mauvais choix. D’un point de vue experientiel, le parcours offensif avait de fortes qualités, cependant son déploiement était risqué et demandait une grande quantité de travail pour chaque équipe avant d’être satisfaisant. Le parcours défensif est plus modeste dans l’expérience utilisateur, cependant il est plus facile à mettre en place et propose tout de même une alternative qualitative à une navigation impossible en hors ligne.
Le choix de pousser une première version défensive est judicieux et nous laissera plus de temps pour consolider un parcours offensif par la suite. Pour l’instant nous avançons progressivement, côte à côte avec les équipes techniques et produit pour bien comprendre la palette des possibilités et nous familiariser aux technologies liées aux PWA.
Notre première version fait donc le choix d’être plus modeste, afin que dans un futur proche nous puissions développer une version offensive offline solide.
Nous avons alors commencé à détailler nos propositions, définis les grands principes et avancer par assets pour consolider notre offre en lien avec la technique.
Privilégier la performance plutôt que la qualité perçue/ les contenus plutôt qu’un contenu. On s’axe sur la diversité éditoriale, le chargement d’un maximum d’articles plutôt qu’un article avec l’intégralité de ses médias (trop lourds à charger). Dans ce contexte, nous rendons aussi inaccessibles les lives et onglets se rapportant à des contenus ultra-chauds, privilégiant les interactions et ceux full-média.
Choisir éditorialement les articles consultables offline. Ainsi la co-création est primordiale avec la rédaction pour choisir et définir le bon nombre d’articles pré-chargés. Nous sommes arrivés pour l’instant au pré-chargement de 4 articles et de 3 long-read. Choisir les articles accessibles en offline sur d’autres critères que la fraicheur des contenus, nous permet de nous assurer que l’utilisateur ait accès à des articles divers ne tournant pas autours de la même thématique.
Désopacifier les contenus non accessibles car ainsi on n’incite pas l’utilisateur à cliquer mais on ne le contraint pas (si l’utilisateur clique quand même, il tombera sur une page 404 spéciale offline)
Tester le temps du passage en offline. Le bandeau informatif offline ne peut apparaitre intempestivement à chaque micro-coupure. Cela est frustrant, pénible et déroutant pour l’utilisateur. Nous avons donc défini un temps de quelques secondes sans connexion avant le passage en navigation Hors Ligne. Le délai devra être AB testé auprès des utilisateurs pour définir le temps le plus qualitatif.
Définir les assets offline appelées comme l’alternative à la navigation :
- Bandeau informatif offline, sticky qui permet de recharger la page d’un clic au retour online.
- Un encart “ articles consultables hors-ligne ” qui vient se greffer sur la page 404 offline et à la place de la suggestion d’articles dans la page articles. Cet encart propose 3 articles piochés aléatoirement dans les articles préchargés. Il se renouvelle, proposant à chaque fois d’autres articles donnant à l’utilisateur l’impression d’un plus grand choix.
- Une page 404 accompagnant l’utilisateur dans sa compréhension du offline et le rassurant sur la promesse d’une PWA.
- Des placeholders communiquant sur le offline. Comme nous faisons le choix de ne pas charger les médias des articles, il nous faut penser des placeholders pour les remplacer. Cela est l’occasion, au lieu de mettre un placeholder random, de placer un petit icône faisant comprendre à l’utilisateur que le média n’a pas été chargé faute de connexion.
Ensuite le travail de l’UI a été d’homogénéiser le parcours en accord avec le Design System qui se met progressivement en place à l’info et d’affiner les micro-interactions.
La V1 est aujourd en production et la V2 devrait sortir prochainement.
Next step ?
La gestion du offline est une des plus belles promesses des PWA pour l’utilisateur. Sa conception ne peut-être pensée à la légère. Elle requiert une véritable réflexion, un positionnement fort et un socle technique solide pour s’assurer d’une expérience qualitative. Aujourd’hui, nous sommes aux prémices de notre offre mais notre équipe multidisciplinaire est motivée et compte bien challenger les possiblilités qu’offrent les PWA. Notre next step sera donc d’être toujours plus ambitieux et de co-construire avec les feedbacks qui nous parviendront. Franceinfo est plébiscité pour la qualité de ses contenus, soyons à la hauteur d’un point de vue expérientiel !
Si vous vous intéressés aux autres artciles que nous avons écrit autour de le PWA :
- Pensez à clapper 50 fois 👏 cet article pour nous encourager à continuer.
- Pensez à vous abonner à :
