Tutoriel – Personnaliser la Page d’Accueil d’une Application Mobile

Aujourd’hui, nous allons voir comment se passe la constitution de la page d’accueil de votre application. La page d’accueil correspond au premier écran que l’utilisateur va voir en ouvrant son application. Cette page d’accueil est donc d’une grande importance pour montrer la valeur de votre application.

Fidelisa a choisi de proposer deux pages d’accueil différentes en fonction de l’état d’identification de l’utilisateur :

  • Une page d’accueil peut-être proposée aux utilisateurs non connectés
  • Une autre page d’accueil sera proposée aux utilisateurs identifiés

En avant !

La page d’accueil est présente dans toutes les applications

Lorsque vous créez une nouvelle application, en arrivant sur le générateur, vous verrez qu’un certains nombres de modules sont activés par défaut. C’est le cas de la page d’accueil qui apparaît dans les modules du générateur, ainsi que dans la liste des pages de configuration dans la colonne de gauche :

Accueil du générateur

Les lames de la page d’accueil

En cliquant dans la colonne de gauche sur « Page d’accueil », vous arriverez sur la page de configuration de votre page d’accueil ; lors du premier accès à cette page, elle sera vide car vous n’avez pas encore ajouté de lame pour constituer votre page d’accueil.

Votre page d’accueil sera constituées d’un empilement de lames qui auront chacun des configurations et des comportements différents.

Ajout d’une lame

Pour ajouter votre première lame, cliquez sur le bouton « Ajouter une lame » dans le menu supérieur :

page_accueil_vide_ajouter_lame

Une lame a pour élément de base une image. La fenêtre qui s’ouvre vous invite donc à sélectionner une image qui sera la base de votre lame.

ajouter_image

Une fois l’image sélectionnée par un clic sur le symbole ✔, vous pourrez voir la première lame de votre  page d’accueil.

page_accueil

À ce moment, nous pouvons noter deux choses :

  • la page d’accueil que nous sommes ici en train de configurer est l’accueil pour les utilisateurs non identifiés, ce que l’on peut voir par les mots « Tout public » sélectionnés dans le menu du haut. Pour constituer la page d’accueil pour les clients identifiés, nous cliquerons sur « Clients identifiés » et suivrons le même processus que précédemment.
  • au survol de cette lame, des icônes apparaissent au milieu de notre image. Chaque icône permet les actions décrites ci-dessous :

Configuration de l’action associée à la lame

btn_ajout_lien

Dans la fenêtre qui s’ouvre, on peut sélectionner si on veut faire un lien externe (typiquement, lien vers un site internet), ou un lien vers une des pages de l’application ; dans notre exemple, nous choisissons de faire un lien interne, vers la page d’inscription :

config_lien

Modification de l’image de la lame

Le bouton suivant permet de modifier l’image de la lame actuelle. 

btn_modif_image

L’ajout de la nouvelle image se passe comme précédemment.

Création d’un carrousel / slider

Le bouton suivant permet d’ajouter une image à cette lame. Cette action créera un carrousel d’images qui défileront au niveau de cette lame. Attention, toutes les images d’un carrousel doivent avoir la même dimension, sinon certaines images paraitrons déformées. Vous pourrez naviguer entre les images de la lame à l’aide des flèches qui apparaîtrons à gauche et droite de la barre de boutons de votre lame.

btn_carrousel

Suppression de la lame

Le dernier bouton permet de supprimer cette lame.

btn_suppression_lame

Publication des changements de votre page d’accueil

Pour chaque page d’accueil, vous pouvez « empiler » plusieurs lames en cliquant sur le bouton « Ajouter une lame ». Votre page d’accueil sera constituée de l’empilement des lames que vous avez configurées.

La constitution de la page d’accueil pour les clients identifiés se passe exactement de la même manière, en cliquant au préalable sur « Clients identifiés » dans le menu supérieur.

Enfin, n’oubliez pas de cliquer sur « Enregistrer & publier » en haut à droite pour publier vos changements. Ces changements auront alors lieu sur les applications déjà déployées en direct. Vous pouvez donc faire varier cette page d’accueil au fur et à mesure de vos événements (soldes, promotions, événements etc.)

En cliquant dans « Application » dans le menu de droite, et en actualisant la prévisualisation de l’application en cliquant sur le bouton en bas du téléphone, votre nouvelle page d’accueil devrait apparaître ! Dans notre exemple, en cliquant sur le bouton « Se connecter ou créer un compte », nous serons renvoyés vers la page « Inscription ».

generateur_non_vide


En espérant que ce pas à pas a éclairci la gestion des deux types de pages d’accueil que vous pouvez proposer à vos clients.

S’il demeure des questions, contactez-nous que l’on complète cette documentation.

1 commentaire

Laisser un commentaire