Mettre en place d’un système de navigation performant pour ton application peut être compliqué. En effet, l’expérience utilisateur lors de la navigation doit être pensée pour ne pas déstabiliser ou perdre le visiteur. Mettre en place un bouton de retour en arrière est une excellente idée. Celle-ci permet à l’utilisateur de facilement retourner sur la page précédente et ainsi continuer à parcourir le software.
Mais les choses peuvent vite se compliquer lorsqu’il faut proposer un bouton de retour à l’utilisateur quand celui-ci arrive sur une page sans avoir d’historique de navigation. Dans ce cas précis, quelle stratégie adopter pour proposer une navigation pertinente sans pour autant bloqué l’utilisateur sur une page avec aucun moyen de consulter le reste de l’application.
Le bouton de navigation back
Comme son nom l’indique, le bouton de navigation back permet à l’utilisateur de pouvoir naviguer sur la dernière page qu’il a consulté.
Avec le framework Ionic, on a un petit composent que l’on peut utiliser pour designer cette fonctionnalité, c’est le ion-back-button.
Ce composent web fournis par Ionic permet de facilement implémenter l’interface utilisateur proposant un bouton de navigation en arrière.
Celui-ci s’utilise en plaçant un bout de code HTML dans l’en-tête de ton fichier de template.
Donc, sur chaque page où tu désires proposer une option de navigation back, il suffit d’ajouter le petit bout de code HTML proposé par Ionic.
Voici le rendu:
Gestion de l’historique de navigation
Facile et rapide à implémenté, le bouton de navigation back de Ionic est vraiment un super composent qui va nous faire gagner un temps fou en developpement!
Comment? Bah le composent intègre un système d’analyse de l’historique de navigation de l’utilisateur. Ainsi, il est capable de proposé automatiquement le retour sur la dernière page consultée. Et sans avoir à configurer quoi que ce soit! Tout est automatique.
Configuration du bouton navigation back
Le composent que Ionic nous met à disposition et fabuleux! Il peut également être customs pour s’intégrer au mieux à tout type de design en fonction des applications.
Il existe plusieurs propriétés que l’on peut utiliser pour modifier l’affichage ou le comportement du bouton.
Par exemple, on peut modifier l’icon utilisée par default par un SVG de son choix en renseignant la propriété « icon« comme ceci:
On peut aussi changer cette icon de manière général pour toute l’application en modifiant l’objet de configuration qui se trouve dans le IonModule.forRoot() situé d’habitude dans le fichier app.module.ts.
Définir une page par default
Tout ceci pourrait suffire, mais il existe un cas précis ou le bouton de navigation back ne s’affiche plus. Ce cas est systématiquement omis par les développeurs qui ne pense pas à implémenté de logique pour cette situation.
Alors pourquoi et quand ce cas ce présent-il?
Ce cas se produit dans une situation très précise: Quand un utilisateur consulte une page et n’as pas d’historique de navigation.
Cela arrive quand on partage un lien, ou que l’on réouvre l’application après l’avoir quitté sans réinitialiser le cache et les states.
On se rend compte que cela peut arriver très souvent en fait.
Alors voici ce que la majorité des développeurs oublie de configurer:
La propriété defaultHref.
Cette propriété du composent ion-back-button permet de définir une page par default s’il n’y a pas de page disponible dans l’historique de navigation de l’utilisateur.
Très facile à implémenté voici comment elle s’utilise:
Ainsi, le bouton s’affichera dans tous les cas. Même si l’utilisateur n’a pas d’historique, il aura quand même l’accès à un bouton de retour qui lui permettra de retourner sur une page par default configurée par le développeur.
Conclusion
Voilà. L’utilisation du ionic-back-button et très facile et son implémentation aussi. Cela permet également d’augmenter le niveau de l’expérience utilisateur lors de l’utilisation de l’application.
L’astuce à retenir, c’est qu’il ne faut pas oublier de renseigner la propriété defaultHref pour proposer une navigation correcte aux utilisateurs.
Tu as aimé cet article et tu veux en apprendre plus sur framework Angular? Tu peux consulter les autres articles qui traitent du même sujet sur mon blog, dans la catégorie Angular, mais je te propose aussi de jeter un oeil sur la formation Angular Entreprise que je propose.
On y abord le framework en profondeur. Cette formation est extrêmement complète et technique, ce qui te donnera un avantage concurrentiel indéniable par rapport à l’autre développeur Angular.
➡️ Formation Angular Entreprise
Tu peux aussi t’inscrire sur mon channel Slack pour y poser tes questions et discuter avec d’autres développeurs: Invitation à rejoindre mon Channel Slack (cette invitation expire le 2 mars 2021).
Et n’hésite pas à me laisser tes commentaires et remarque juste en dessous. C’est pour cela que j’ai activé la fonctionnalité dans mon wordpress 😉
Demande ta version numérique gratuite de mon livre Javascript Array Methods
