Comment concevoir une meilleure application Web progressive

Il est parfois difficile de dire quand la dernière tendance en matière de conception de sites Web vaudra la peine d'être adoptée ou quand il s'agit simplement d'une mode passagère dans laquelle nous ne devrions pas investir trop de temps ou d'énergie. Les applications Web progressives (PWA), par exemple, avaient ce problème au début, c’est pourquoi la plupart des contenus les concernant expliquaient ce qu’ils étaient réellement.

De nos jours, nous n’avons pas besoin de savoir ce qu’est un PWA ou pourquoi il s’agit d’un bien plus précieux que le mobile. site Web réactif.

Les PWA sont intrinsèquement rapides et sécurisés. De plus, ils constituent une excellente option pour ceux qui souhaitent exploiter les avantages des applications mobiles natives (telles que la mise en cache hors ligne et les intégrations téléphoniques) tout en améliorant leurs faiblesses (telles que la consommation de batterie et de stockage, ainsi que les capacités de partage).

Les PWA se sont révélés être non seulement une tendance de conception viable, mais également une tendance à la résistance.

Maintenant que nous pouvons déplacer la conversation du que . ] et pourquoi des PWA, il est temps de regarder le comment .

Comment concevoir une meilleure application Web progressive

Bien qu'un site Web mobile et une application Web progressive vivez dans le navigateur, vous devez aborder différemment la manière dont vous les concevez.

Que vous soyez chargé de créer un PWA à partir de zéro ou de transformer un site Web mobile en un PWA, vous devrez faire certaines choses faire différemment.

Voici quelques éléments à prendre en compte lorsque vous ou concevez des applications Web progressives:

1. Concevoir; Then Cut 10%

Les rédacteurs utilisent un truc pour éditer, qu’ils écrivent quelque chose pour le Web ou qu’ils écrivent une histoire. Ils s'assoient et écrivent. Ensuite, ils reviennent à la pièce plus tard et en coupent au moins 10%.

Le même principe de base devrait s’appliquer lors de la conception d’un PWA. Asseyez-vous et créez le design que vous souhaitez pour un site Web. Ensuite, lorsque vous reviendrez le réviser et l’affiner, coupez les composants, les sections et les détails agréables à utiliser, mais pas nécessaires.

Voici le site Web CVS :

Il s'agit d'un bloc de catégories bien conçu avec des exemples de produits permettant aux consommateurs de choisir le site où ils doivent se rendre.

Il s'agit de la même section de son PWA:

CVS a réduit la conception ici. À l'exception de Beauté, chaque catégorie est maintenant représentée par une seule image du produit.

Le concepteur aurait pu conserver le dessin d'origine de chaque bloc, mais il n'aurait pas fonctionné avec le PWA. Soit les blocs côte à côte auraient été trop petits pour que les utilisateurs puissent voir les trois images du produit, soit les blocs pleine largeur auraient obligé les utilisateurs à faire défiler l'écran de manière supplémentaire pour voir chacune des catégories.

PWA s'en débarrasse en réduisant l'image de chaque catégorie.

Je suggérerais d'aller encore plus loin en supprimant également la couleur d'arrière-plan. Vous pouvez voir comment cela se présente sur la page "Boutique en ligne" du site Web CVS:

Je dirais que les produits semblent plus attrayants lorsqu'ils sont encadrés sur un fond blanc uni ce petit peu d'espace. Donc, si vous cherchez un endroit pour couper le gras, n’ayez pas peur de commencer avec quelque chose d'aussi simple que la couleur.

2. N'ayez pas peur d'aller «en Lite»

Twitter possède l'un des PWA les plus couramment référencés et pour une bonne raison.

Voici à quoi ressemble le site Web Twitter avec sa dernière refonte: [19659028] Navigation de bureau sur Twitter  » src= »https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/twitter-desktop-nav.png?sfvrsn=d6e8ceb8_0″ data-displaymode= »Original »/>

Il se passe beaucoup de choses ici. Le menu propose plus d'une douzaine d'options (si vous affichez les options «Plus»). La liste des sujets et des personnes à suivre à droite éloigne également l’attention des utilisateurs de leur attrait principal: le fil de nouvelles.

Si votre site Web souffre d’une telle surcharge d’informations, réfléchissez à la manière dont cela pourrait être amélioré en créant une Expérience «allégée» pour les PWA. Twitter l'a fait:

Le menu de son PWA a été réduit à quatre onglets:

• Flux RSS
• Recherche
• Notifications
• DMs

également un bouton bleu dans le coin inférieur droit où les utilisateurs composent de nouveaux messages.

Je suppose que les utilisateurs de Twitter ne réclament pas des fonctionnalités telles que la recherche par hashtag, les suggestions, la création de listes et la gestion de profils sur mobile. Alors, examinez vos propres analyses et voyez si vous pouvez faire appel à un jugement similaire pour vous aider à créer une expérience plus simple pour votre PWA.

Si vous installiez des cartes thermiques sur votre site Web, je parie que vous seriez surpris de le savoir. voyez combien peu de personnes se rendent au pied de page. À moins qu'ils ne recherchent spécifiquement quelque chose qu'ils ne trouvent pas dans la navigation, il n'y a probablement pas beaucoup d'utilisateurs mobiles, en particulier, qui sont disposés à y accéder.

Ainsi, lorsque vous concevez votre PWA

Encore une fois, il s’agit de supprimer des éléments de votre dessin qui ne sont pas nécessaires à 100%.

Un excellent exemple de ceci est Wyndham Hotels :

Wyndham rend bon utilisation de la barre inférieure. Les boutons se trouvent au bas du shell de l'application, sont tous de bonne taille et dans une bonne plage de la zone du pouce.

De cette façon, les utilisateurs n'ont à cliquer ni à faire défiler l'écran pour accéder aux pages ou aux actions.

Un autre PWA qui le fait bien est le Weather Channel :

Il est logique que la barre du bas contiendrait des options de prévision ainsi que des flux radar et vidéo en direct. Pourquoi venir au Weather Channel PWA si vous n'obtenez pas de détails instantanés sur la météo?

Si vous vous demandez où vous allez placer tout ce qui pourrait autrement vivre dans le pied de page, Weather Channel

Lorsque vous ouvrez le menu Weather Channel, il contient une liste de toutes les pages du PWA (comme il se doit). Cependant, au bas de son menu se trouvent ses éléments de pied de page! De cette façon, les visiteurs peuvent se connecter sur les réseaux sociaux, se renseigner sur la publicité et s'inscrire à la newsletter sans avoir à faire défiler le fond du site à l'infini. Un seul coup dans le menu suffit pour y arriver.

4. Trouver un autre moyen de publicité

Ce n’est pas parce que vous créez une expérience plus légère et plus simple pour les utilisateurs que vous pouvez vous permettre de réduire vos dépenses de marketing et de publicité. C’est ainsi que vos clients paient leurs factures, après tout. Cependant…

Parce que votre PWA aura probablement un shell d'application toujours présent – en haut, en bas, ou les deux – vous n'avez vraiment pas beaucoup d'espace pour jouer. Exemple:

Il s’agit du PWA fissuré . Comme vous pouvez le constater, les annonces occupent environ les deux tiers des biens immobiliers disponibles dans cet article. Dans cette capture d'écran, vous ne voyez que l'un des en-têtes et quelques mots apparaissant derrière la fenêtre contextuelle inférieure.

Cela en fait une expérience de lecture pénible.

Je connais vos clients. vous devez monétiser, mais vous allez devoir trouver un meilleur moyen de le faire, que ce soit avec moins d'annonces, des annonces plus petites ou le passage à un modèle d'abonnement.

Une autre façon de gérer cela serait de minimiser votre ads ou lead-pop-ups et donnez à vos visiteurs le choix de cliquer comme le font Ulta :

C’est une meilleure façon de faire de la publicité ou de faire connaître votre entreprise. Le pop-up et les publicités aveugles sont bien réels, et concevoir votre PWA de manière à ce que invite les utilisateurs à s'engager entraîne davantage de clics et de ventes.

5. Concevez un logo d’écran d’accueil accrocheur

Même si les PWA ne résident pas dans l’App Store (ou n’en ont pas besoin), les utilisateurs peuvent toujours les enregistrer sur l’écran d’accueil pour les accompagner dans leurs applications téléchargées. .

La première chose à faire est de vous assurer de créer un message "Ajouter à l'écran d'accueil" pour vos utilisateurs PWA. Je n'en ai pas beaucoup vu, mais je pense que vos clients en bénéficieraient grandement à mesure que les consommateurs s'habitueraient de plus en plus à interagir avec les PWA et se rendraient compte qu'ils pouvaient les sauver.

Vous devez ensuite créer une icône unique. pour ça. Voici pourquoi:

Voici les icônes de trois nouvelles AEP:

Le Monde et The New Yorker utilisent tous les deux le logiciel accrocheur. icônes de l'écran, alors que le Washington Post ne comporte qu'une case noire

Si vous avez des difficultés à créer un PWA pouvant être sauvegardé sur l'écran d'accueil pour y accéder rapidement, prenez le temps de créer une icône unique et accrocheuse pour elle.

Les PVA sont l'avenir. Concevez-les ainsi.

Il ne fait aucun doute qu’une interface d’application offre une meilleure expérience mobile qu’un site Web. Cela dit, de nombreux obstacles et objections dissuaderont vos clients d'investir et les utilisateurs hésiteront à les télécharger.

Ce qui explique pourquoi les AHP constituent la meilleure solution pour tous.

À mesure que vous essayez conseils de conception ci-dessus, n’ayez pas peur de jouer avec eux. Il existe d'autres moyens de réduire votre conception sans compromettre la messagerie ou l'engagement. Il s’agit de trouver le bon équilibre.

Oh, et si vous êtes novice dans la conception ou la construction d’AACP, il sera extrêmement important d’avoir un moyen de traduire vos conceptions en code pendant que l’équipe s’ajuste. Avec Unite UX vous pourrez combler cet écart tout en simplifiant davantage le processus de développement de votre application.