Home ¬Ľ App ¬Ľ 5 Astuces pour assurer une excellente UX pour une application web progressive

5 Astuces pour assurer une excellente UX pour une application web progressive

5 Astuces pour assurer une excellente UX pour une application web progressive

Avez-vous déjà installé une application et pensé que vous alliez manquer de mémoire ou que vous avez suffisamment d’applications sur votre téléphone ?

Il se peut que vous faites partie de ces personnes qui doivent toujours essayer des applications les plus branch√©es, ou qui sont toujours √† la recherche d’applications qui aident √† contr√īler la routine de travail. Alors, le  probl√®me qui se pose est que le t√©l√©chargement et l’installation continus d’applications sont tr√®s lourds et fastidieux.

Honn√™tement, la plupart des utilisateurs installent une application et l’oublient en quelques jours. L’application reste alors sur le mobile, en attente d’√™tre supprim√©e. Heureusement, les soci√©t√©s de d√©veloppement d’applications mobiles ont invent√© les applications Web progressives. Si vous n’en avez pas encore entendu parler, nous vous l’expliquerons.

 

Vous recherchez des d√©veloppeurs d’applications Web progressives ? Nous pouvons vous mettre en contact avec les meilleurs experts !

 

Que sont les applications Web progressives?

Les applications Web progressives sont des sites Web qui ressemblent et fonctionnent de la m√™me mani√®re que les applications mobiles. La raison pour laquelle ils existent est d’√©viter aux utilisateurs la peine de t√©l√©charger et d’installer les applications sur leurs mobiles.

Ils √©vitent aux utilisateurs d’avoir √† acc√©der √† l’App Store, √† trouver l’application, √† la t√©l√©charger et √† l’installer, puis √† l’utiliser plusieurs fois avant de la supprimer d√©finitivement.

√Ä l’aide d’applications Web progressives, les utilisateurs peuvent simplement ouvrir le navigateur sur leur smartphone, entrer l’URL et seront dirig√©s vers la PWA de leur application mobile respective. Regardez l’image ci-dessous :

capture d'écran instagram
Application Web Instagram progressive. Source : Instagram

C’est une application Web progressive pour Instagram. Vous pouvez voir que son aspect et son fonctionnement sont tr√®s similaires √† ceux de l’application Instagram.

En outre, les applications Web progessives présentent certains avantages à savoir :

  • Un design Web r√©actif.
  • Un Chargement rapide m√™me sans connexion Internet.
  • Une bonne exp√©rience utilisateur.
  • R√©solution du probl√®me App Gap.

Aliexpress, Twitter et Forbes sont quelques exemples c√©l√®bres de sites Web qui ont d√©velopp√© des PWA exceptionnels. De plus, leurs applications Web les ont aid√©s √† am√©liorer leur convivialit√© et √† attirer plus d’utilisateurs.

Maintenant que nous avons parfaitement compris le concept des applications Web progressives, voyons comment une soci√©t√© de d√©veloppement d’applications mobiles peut garantir une excellente exp√©rience utilisateur sur des applications Web progressives.

 

ūüďö  Cela pourrait vous interesser | Les avantages de la cr√©ation d’une application Web progressive pour votre entreprise

 

1. Optimiser le temps de chargement et les performances

Premi√®rement lorsqu’un utilisateur acc√®de √† votre application Web, il ne devrait pas avoir l’impression d’utiliser le navigateur et il ne devrait pas avoir √† attendre le chargement de la page. Il devrait se charger correctement m√™me sans connexion Internet. D’ailleurs, Google a recommand√© que l’application suive le mod√®le PRPL pour r√©duire les probl√®mes caus√©s par des connexions lentes.

L’architecture PRPL

PRPL est le mod√®le utilis√© pour structurer les sites Web et les applications pour qu’ils fonctionnent correctement sur les smartphones et autres appareils, sans probl√®mes survenant sur des r√©seaux peu fiables. Architectures PRPL …

  • Pousser les ressources critiques vers le chemin URL initial;
  • Rendre le chemin initial;
  • Pr√©-v√©rifier les itin√©raires restants;
  • Charger paresseusement et cr√©er les itin√©raires restants √† la demande.

Le modèle PRPL sert à améliorer le temps de réponse de votre application Web, en particulier lors des premières interactions des appareils mobiles les plus courants.

PRPL continue d’am√©liorer l’efficacit√© des applications Web progressives √† mesure que de nouvelles mises √† jour sont publi√©es et que la mise en cache devient plus efficace.

mockups d'une application
Fonctionnement d’une application. Source : Unsplash

Cache avec les techniciens de service

Les services workers est une fonctionnalité étonnante de la plate-forme Web qui permet des fonctionnalités telles que la mise en cache des réponses URL. Cette fonctionnalité permet aux applications Web progressives de fonctionner hors ligne.

De plus, les services Workers vous permettent d’enregistrer des requ√™tes sous forme de scripts, de fichiers CSS, de pages, d’images, etc. comme donn√©es de cache. En revanche, lorsqu’un utilisateur effectue une demande en ligne, il passe par le service worker et vous d√©cidez s’il faut renvoyer les r√©ponses mises en cache ou r√©pondre √† la demande en ligne.

Rendu c√īt√© serveur

Google recommande d’utiliser le rendu c√īt√© serveur pour les applications Web progressives, car cela signifie que l’utilisateur obtiendra les donn√©es plus rapidement, m√™me si JavaScript est d√©sactiv√©.

 

Lorsqu’un utilisateur acc√®de √† votre application Web progressive, il ne doit pas avoir l’impression d’utiliser le navigateur.

2. Concentrez-vous sur la recréation du natif

Ensuite, n’oubliez pas que le design d’un PWA doit avoir l’aspect et la convivialit√© de votre application mobile native. Pourquoi ? Parce que se sentir familier est une caract√©ristique essentielle des applications web progressives.

Prenons l’exemple d’Instagram. Les utilisateurs sont habitu√©s √† la conception, aux fonctionnalit√©s et √† la navigation de l’application; Si Instagram a con√ßu une PWA qui fonctionne et ressemble plus au site Web, pourquoi les gens voudraient-ils y passer du temps? Cela irait √† l’encontre de leurs attentes et ils reviendraient probablement √† l’application.

N’oubliez pas d’√©viter les erreurs suivantes si vous souhaitez que vos utilisateurs aient une exp√©rience optimale.

E7 Prototype App

Problèmes de défilement ou Scroll

Les sites Web ont des problèmes de Scroll, comme les pages vierges qui apparaissent lorsque vous faites défiler un site Web infini, comme Twitter. En effet, Twitter a résolu le problème de défilement en utilisant des listes virtuelles.

Les listes virtuelles rendent visible la partie du contenu qui est du point de vue de l’utilisateur. Au-del√† de ce point de vue, il r√©v√®le de mani√®re incr√©mentielle des √©l√©ments dans plusieurs cadres √† l’aide de l’API requestAnimationFrame, tout en pr√©servant la position de d√©filement sur les √©crans.

 

N’oubliez pas lors de la conception d’une application Web progressive qu’elle doit avoir l’apparence et la convivialit√© d’une application mobile native.

 

Problèmes relatives à la transition vers le Web

Lors de la cr√©ation de PWA, assurez-vous de concevoir une r√©ponse agile. Votre application Web doit r√©pondre √† l’interaction de l’utilisateur.

Les probl√®mes de transition dans les PWA se produisent lorsque les utilisateurs tapent sur un bouton ou un lien, doivent attendre et regarder l’√©cran sur lequel ils se trouvent avant d’√™tre soudainement redirig√©s vers le nouvel √©cran de contenu.

Cela laisse le client sans r√©ponse et ennuy√©, alors que dans une PWA, il devrait avoir l’impression que toutes les informations sont d√©j√† stock√©es sur le t√©l√©phone et que les donn√©es peuvent √™tre instantan√©ment accessibles. Pour √©viter que cela ne se produise, vous pouvez incorporer des affichages squelettes dans votre PWA.

Les √©crans squelettes sont essentiellement des √©crans vides qui sont montr√©s √† l’utilisateur apr√®s une interaction, le contenu se charge progressivement sur les √©crans.

Gestes inconnus

Faites de la navigation un morceau de g√Ęteau. Rendez-le aussi proche que possible de l’application native. Comme mentionn√© ci-dessus, vous devez concevoir en fonction des attentes de l’utilisateur tout en restant familier.

un iphone, avec des croquis d'application et un post-in en vert pour prendre des notes d'amélioration d'app
Prise de notes d’am√©lioration d’application. Source : Pixabay

3. Eviter les normes de conception des sites Web

Si vous travaillez depuis bien trop longtemps dans le secteur de la conception de sites web, vous devrez prendre une grande respiration, repartir √† z√©ro et vous concentrer sur la conception d’un PWA qui ressemble √† l’application mobile native.

Il est recommand√© alors d’adopter une approche minimaliste, ne conservez que les informations n√©cessaires et filtrez le contenu suppl√©mentaire. Concevoir l’interface de mani√®re √† ce qu’elle soit √† la fois informative et accessible est l’un des d√©fis que doivent relever les d√©veloppeurs d’applications.

En dehors de cela, essayez d’utiliser des gestes familiers comme taper et glisser, vous devez √©viter d’ajouter trop de liens et de boutons.

4. Incorporer les polices système

La meilleure fa√ßon d’ajouter un sentiment de familiarit√© √† votre application Web √©volutive est de la concevoir en fonction du syst√®me d’exploitation (OS) de l’utilisateur. Vous pouvez commencer par impl√©menter les polices syst√®me pour les syst√®mes d’exploitation individuels, iOS, Windows, Android, etc.

En effet, l’utilisation de Google (Roboto), Apple (San Francisco), Microsoft (Segeo) et d’autres peuvent vous aider efficacement √† am√©liorer l’exp√©rience utilisateur de votre application mobile. Si vous voulez faire preuve de cr√©ativit√©, vous pouvez utiliser des polices personnalis√©es dans vos titres ou logos.

un livret des croquis de l'UX, avec un ordinateur et clavier, ainsi que des croquis d'une application
Expérience Utilisateur (UX). Source : Unsplash

5. Optimiser les interactions de contenu

En raison des limites d’espace sur les appareils mobiles, les concepteurs doivent faire tr√®s attention pour √©viter la saturation du contenu. Les espaces restreints peuvent entra√ģner des comportements ind√©sirables tels que l’ouverture accidentelle d’un article lors du d√©filement d’une liste.

Par exemple, dans Google Chrome, m√™me une simple touche sur un contenu peut √™tre interpr√©t√©e comme une interaction. Cela peut √™tre une exp√©rience assez ennuyeuse pour les utilisateurs si les tapotements sur le ¬ęcontenu simple¬Ľ se transforment en s√©lections et redirigent les utilisateurs vers des r√©sultats ind√©sirables.

De plus, la conception de boutons radio et de contenu interactif sous forme de texte brut peut également être une expérience utilisateur terriblement déroutante. Vous pouvez empêcher cela en utilisant CSS pour marquer les éléments sans contenu.

De plus, si votre PWA n√©cessite des interactions tactiles avanc√©es telles que glisser pour fermer un menu de navigation, vous pouvez le rendre possible, mais vous devrez vous assurer qu’il fonctionne sans bugs sur de vrais appareils.

En bref…

Avec l’aide de strat√©gies de d√©veloppement et de conception pr√©cises, vous offrirez une exp√©rience utilisateur inoubliable dans vos applications Web progressives.

Les applications Web progressives ont été accueillies à bras ouverts même par Google, elles sont donc certainement la prochaine grande nouveauté du point de vue des utilisateurs et des entreprises.

Nous esp√©rons que cet article a clarifi√© certains de vos doutes, sinon n’h√©sitez pas √† nous le demander, nous serons heureux de vous aider.

Proyecto App