eCommerce
Systèmes d'abonnement
Chatbot
Cours en ligne
Réservation en ligne
Guide touristique
Evènements
Créateurs de contenu
Click & Collect
Journaux
Radio
Ecoles et Universités
Spiritualité
Associations
Restaurant
Epicerie
Créez votre app sur-mesure
Communication d'entreprise
APP BUILDER NO CODE
TECHNOLOGIE
POURQUOI GOODBARBER ?
Design
RESSOURCES LIEES AU PRODUIT
THEMATIQUES
REVENDEURS D'APPS
À DÉCOUVRIRComment animer le guide interactif de mon app ?
Dans GoodBarber, le guide interactif, ou walkthrough, présente votre app au premier lancement, en cinq écrans au plus que l'on ne voit qu'une fois. Votre app n'a que quelques secondes pour se présenter, et ce guide se règle en quelques minutes dans le back-office, aux couleurs et aux polices de votre app. Chaque étape affiche une image ou, si vous le voulez, une animation Lottie.
Voici ce qu'un walkthrough fait pour votre app, les deux layouts parmi lesquels choisir, et comment animer une étape.
Un guide interactif, c'est quoi, et quand il s'affiche
Le walkthrough, c'est votre app qui se présente. Dans le back-office GoodBarber, il s'appelle Guide Interactif. Il s'affiche sur le téléphone, une seule fois, à la première ouverture de l'app après son installation. Il passe avant les demandes d'autorisation, notifications ou localisation, pour que la première chose que l'on voit soit votre app.
Il compte jusqu'à cinq étapes, chacune avec un média, un titre et une description, tous facultatifs. Autour, les mêmes éléments d'une étape à l'autre, le titre de la page ou votre logo, le bouton Ignorer, le pager, et le bouton Suivant, qui devient Démarrer sur la dernière étape. On avance en touchant le bouton ou en balayant l'écran.
Le fond, les polices, la couleur du bouton et du pager sont ceux de votre app, c'est notre principe « Set once, consistent everywhere ». Vous n'avez rien à redessiner. Le walkthrough est le premier pas de l'onboarding, dont nous avons détaillé les bonnes pratiques.
Polaroid ou Immersive, deux layouts pour les étapes du guide
Le back-office GoodBarber propose deux layouts pour les étapes. En Polaroid, le média s'affiche au-dessus du titre, dans ses proportions d'origine, jamais agrandi, et une image de 1200 × 1200 pixels suffit. En Immersive, le média remplit tout l'écran, comme un fond, et le texte se pose dessus. Prévoyez 1536 × 2048 pixels, et choisissez un Effet sur les images, Aucun, Opacité ou Gradient, pour que le texte reste lisible sur la photo. Dans les deux layouts, l'alignement du contenu se règle parmi six positions, à gauche ou au centre, en haut, au milieu ou en bas.
Une règle simple pour choisir. Une photo qui porte une ambiance veut l'Immersive, c'est ce qu'a fait l'école de musique Eastside Music Workshop avec ses photos de cours. Un dessin ou une animation qui explique veut le Polaroid, avec un fond à lui, c'est le choix d'Unit 7, l'atelier de sérigraphie, dont les trois étapes sont dessinées.
Animer une étape, avec une animation Lottie à la place de l'image
Une image dit ce que fait votre app. Une animation le montre. Sur la première étape d'Unit 7, un créneau du planning se remplit en vert et le mot BOOKED s'imprime, et l'on comprend que l'on réserve depuis son téléphone avant même de lire la phrase. Sur la deuxième, une raclette traverse le cadre et le compteur passe de 23 à 24 tirages. Sur la troisième, un tambour de Riso signalé vide repasse disponible, AVAILABLE en sticker. Trois gestes de trois secondes, en boucle. C'est notre principe « Polish you can feel », le mouvement qui fait sentir une app bien faite.
Ces animations sont des fichiers Lottie, un format d'animation vectorielle, léger, lu directement par l'app. Vous les trouvez dans la bibliothèque LottieFiles, comme l'explique notre aide, ou vous les faites dessiner aux couleurs de votre app, comme celles d'Unit 7. Dans GoodBarber, une animation se règle aussi simplement qu'une image. Sur l'étape, choisissez LottieFiles plutôt qu'Image, donnez le fichier, puis réglez la Vitesse de lecture, de x0.5 à x3, et la Lecture en boucle. Dans tous les cas, l'animation repart du début chaque fois que l'étape s'affiche. En Polaroid, elle prend la largeur de l'écran et garde ses proportions. En Immersive, elle remplit l'écran comme une photo.
L'animation reste un choix. Une étape se contente très bien d'une image fixe, et les deux se mêlent dans un même walkthrough.
Réglez le guide interactif dans GoodBarber
Le guide interactif est une extension GoodBarber. Installez-la depuis Extensions Store › Toutes les extensions, fiche Guide interactif, bouton Installer. Elle coûte 5 € par mois dans les offres Standard et Premium, et elle est incluse dans l'offre Pro. Le menu Mon app › Guide Interactif apparaît alors, avec l'aperçu de votre app à côté.
- Choisissez le layout, Immersive ou Polaroid, en haut du panneau.
- Ajoutez vos étapes, cinq au plus. Cliquez sur Ajouter une étape, puis sur Image ou LottieFiles. Pour une animation, l'onglet Fichier prend votre fichier Lottie JSON, et l'onglet URL le lien d'asset d'une animation LottieFiles. Réglez ensuite la vitesse et la boucle, puis écrivez le Titre et la Description. L'aperçu, à côté, s'ouvre sur la première étape, et son bouton Suivant fait défiler les autres.
- Réglez les Paramètres généraux, communs à toutes les étapes. La Couleur de fond, l'Alignement du contenu, le Titre de la page ou un logo à sa place, la police et la couleur du titre et de la description de l'étape, les boutons Ignorer et Suivant, la couleur du Pager, et en Immersive l'Effet sur les images. Tout s'enregistre sans bouton à cliquer, et l'aperçu suit.
Dans la vidéo, l'Alignement du contenu passe en bas à gauche, et toutes les étapes suivent. Pour qu'une seule étape ait ses propres réglages, un fond à elle, un autre alignement, une autre couleur de titre ou de bouton, passez par le JSON de votre app. L'extension gratuite Édition avancée l'ouvre d'un clic sur { EDITION }, comme pour l'ombre, les bordures ou la forme. L'éditeur s'ouvre sur walkthrough. Dépliez steps, puis l'étape à modifier, et ajoutez-y les clés du panneau à changer. Par exemple, pour que seule la première étape pose son texte en bas à gauche, cliquez sur « + Ajouter », tapez contentAlign dans le champ newKey et la valeur bottom_left, puis « Ajouter ». Cliquez enfin sur « Sauvegarder ». Les autres étapes gardent l'Alignement du contenu du panneau.
Avant, après : la même étape, en image puis en animation
Pour voir ce qu'une animation change, voici deux fois la même étape, celle du tirage chez Unit 7. À gauche, l'image fixe. Le dessin est soigné mais figé. Il reste un peu abstrait, et on ne comprend pas tout de suite ce qu'il montre. À droite, la même illustration animée. La raclette traverse l'écran de sérigraphie, l'encre apparaît sous son passage, le compteur passe de 23 à 24, et on reconnaît aussitôt un tirage en cours. Rien d'autre n'a changé, ni le texte, ni les couleurs, ni le bouton.
Ici, le mouvement rend l'étape lisible. Mais même quand le dessin est déjà clair, l'animation donne de la vie au guide et montre que votre app est soignée.
Mon walkthrough préféré est animé
Ce que je préfère, c'est un walkthrough animé. Pour présenter une app en quelques écrans, je ne connais rien de plus parlant que le mouvement. Celui d'Unit 7, un atelier de sérigraphie partagé, en est un bel exemple. Il est en Polaroid, sur un fond Charcoal #282727, avec le logo de l'atelier à la place du titre. Les titres sont en Archivo Black 28, les descriptions en Archivo 17, d'un gris Concrete #A7A7A7. Le bouton, aux angles droits, et le pager prennent le vert de l'atelier, Unit Green #B9FF00. Les trois animations Lottie ont été dessinées pour l'app, dans ses couleurs, et chacune montre en trois secondes un geste des membres, réserver, tirer, signaler. En vingt secondes, on a compris à quoi sert l'app, et l'écran d'accueil prend la suite.
Le walkthrough en bref
- Dans une app GoodBarber, le walkthrough, ou guide interactif, s'affiche une seule fois, au premier lancement sur le téléphone, et compte jusqu'à cinq étapes.
- Chaque étape porte un média, un titre et une description, tous facultatifs. Autour, le titre de la page ou votre logo, le bouton Ignorer, le pager et le bouton Suivant, qui devient Démarrer sur la dernière étape.
- Deux layouts, Polaroid, le média au-dessus du titre, et Immersive, le média plein écran avec un effet pour la lisibilité du texte.
- Une animation Lottie se pose comme une image, avec une vitesse de x0.5 à x3 et une lecture en boucle. Elle repart du début chaque fois que son étape s'affiche.
- Tout se règle dans Mon app › Guide Interactif, et chaque étape peut avoir ses propres réglages dans le JSON, avec l'extension gratuite Édition avancée.
À vous
Installez le Guide interactif depuis Extensions Store, ouvrez Mon app › Guide Interactif, et posez une première étape avec une image, votre titre et une phrase. L'aperçu la montre aussitôt. Puis essayez une animation Lottie à la place de l'image, et regardez la page prendre vie.
Pas encore d'app ? Créez la vôtre avec GoodBarber, le Mobile App Builder.
