App de contenu

Quel contenu pour votre app

« App de contenu » est un terme large. Entre les sections et les fonctionnalités disponibles dans votre back office, vous pouvez couvrir la quasi-totalité des projets, quel que soit votre secteur.

Ce guide passe en revue les neuf sections de contenu, avec pour chacune ce qu'elle permet, comment s'en servir, et le layout à choisir quand il y en a un. Il se termine sur le CMS et les connecteurs, qui décident d'une question de fond : créer votre contenu dans GoodBarber, ou rapatrier celui que vous produisez déjà ailleurs.

Chapitre 1Les sept apps de démonstration

Les exemples qui suivent s'appuient sur sept applications, réparties en trois familles. Identifiez celle qui ressemble à votre projet, puis adaptez.

Les apps pour créateurs de contenus

River Daily pour un journal local, Piu Piu pour un festival, Portland pour un guide touristique.

  • Blog : créez des articles en toute liberté, illustrés d'images et de vidéos.
  • Galerie : diffusez vos images selon plusieurs présentations.
  • Vidéos : partagez vos contenus filmés.
  • Son : publiez vos podcasts.
  • Map : créez du contenu rattaché à des localisations précises.
  • Formulaire : interrogez vos utilisateurs, récoltez et analysez les réponses.
  • Agenda : communiquez sur des évènements, présentés par date.
  • Publicité interne et externe : générez des revenus à partir de votre contenu.
Trois écrans de lancement d'apps de contenu : un quotidien local, un festival de musique avec ses dates, et un guide de ville. Sous chaque téléphone, une icône rappelle le sujet.

Les entreprises de services

Freyja Spa pour un institut de beauté, Ivar Madsen pour une agence d'architecture d'intérieur.

  • Blog : présentez vos services et vos prestations, ou construisez un portfolio.
  • Contact : regroupez vos informations de contact sur une seule page.
  • À propos : présentez-vous sur une page dédiée.
  • Formulaire : transformez-le en demande de rendez-vous.
  • Carte de fidélité et carte de membre : montez un programme de fidélité et augmentez l'engagement.
Deux écrans de lancement d'apps de services : un spa et un décorateur d'intérieur. Sous chaque téléphone, une icône rappelle le métier.

Éducation et organisation

Paraigua pour une école, Dali Corp pour une app interne d'entreprise.

  • Blog : diffusez vos contenus auprès de votre audience.
  • Authentification : permettez à vos utilisateurs de créer un profil.
  • Utilisateurs : publiez la liste de vos utilisateurs et leurs profils.
  • Groupes d'utilisateurs : segmentez votre audience et diffusez du contenu spécifique à chaque groupe.
  • Chat : ouvrez un espace de discussion dans l'app.
  • Agenda : communiquez sur vos évènements.
  • Formulaire : interrogez vos utilisateurs et analysez les réponses.
Deux écrans de lancement : une école et une entreprise, l'une sur la photo de son bâtiment, l'autre sur son produit. Sous chaque téléphone, une icône rappelle le domaine.

Chapitre 2Ajouter une section

Le geste est le même pour toutes les sections décrites dans ce guide. Rendez-vous dans Mon app Structure, cliquez sur Ajouter, puis choisissez le type voulu.

Vous pouvez ajouter jusqu'à 120 sections dans une app, et un même contenu peut apparaître dans plusieurs sections à la fois. C'est ce qui rend l'organisation très souple : une section n'est pas un tiroir étanche, c'est une vue sur votre contenu.

Le panneau d'ajout d'une section, ouvert sur le catalogue des types disponibles : blog, galerie, vidéos, réseaux sociaux, page d'information, contact, carte, agenda, podcasts, flux et formulaire, avec un lien pour en afficher davantage. En bas, le compteur des sections déjà utilisées. À gauche, l'aperçu de l'app montre le menu qui s'allonge.

Chapitre 3Le blog

À quoi elle sert

La section Blog vous permet de créer du contenu directement depuis le back office, sous forme d'articles enrichis de photos et de vidéos.

Pour un créateur de contenus, c'est la section centrale. Mais quel que soit votre projet, vous l'utiliserez au moins une fois : c'est la section la plus polyvalente de toutes, et vous verrez plus bas qu'elle se détourne facilement.

La création d'articles. Un article s'articule en paragraphes de texte, auxquels vous ajoutez photos, vidéos, citations ou code embed.

L'éditeur s'ouvre depuis Contenu Ajouter Un article. Vos articles déjà publiés se retrouvent dans Contenu Liste de contenu Tous les articles.

Une fois le contenu créé, vous paramétrez :

  • la ou les sections auxquelles l'article appartient
  • l'auteur
  • la vignette
  • un résumé, qui s'affichera dans la liste des articles
  • l'activation ou non des commentaires

L'onglet SEO vous permet en plus de renseigner les métadonnées et de personnaliser l'URL.

L'édition d'un article dans le back office. À gauche, son titre et son image. À droite, le panneau d'édition ouvert sur son premier onglet : la liste des catégories où l'article apparaît, avec leurs sous-catégories, cochables ; l'auteur ; la date et l'heure de publication ; une case pour l'épingler en haut de la liste ; et la vignette utilisée dans les listes.

Trois façons de s'en servir

Du contenu dynamique. C'est sa vocation première. Dans l'app de news River Daily, plusieurs sections Blog couvrent les différentes rubriques du journal, certaines avec des catégories pour affiner encore la navigation.

Dans le détail de l'article, la date de publication est affichée, les commentaires sont activés, ainsi que le partage et la mise en favoris.

Une présentation de catalogue. Chez Freyja Spa, les sections Blog présentent les prestations de l'institut. Les trois sections utilisées sont regroupées dans une section menu.

Le détournement intéressant est ici : le champ résumé, prévu pour un chapô, sert à afficher la durée de chaque prestation dans la liste. L'information la plus décisive est ainsi lisible d'un coup d'œil, sans ouvrir la fiche.

Le détail reprend la durée, le prix, la description du soin et un lien vers le formulaire de réservation. Les commentaires sont activés et font office de recueil d'avis clients.

Du contenu statique. L'app Portland est un guide touristique, et ses sections Blog diffusent des conseils aux visiteurs.

Ici, ni auteur ni date de publication : ces informations n'apporteraient rien à un contenu qui ne se périme pas.

Deux sections d'une app de presse : à gauche, une liste où le premier article s'affiche en grand et les suivants en lignes ; à droite, une section coiffée d'une barre de sous-catégories qui filtre la même liste.
Le détail d'un article : l'image en haut, le titre, la date de publication, puis le texte en paragraphes justifiés. En bas de l'écran, les commentaires, le partage et la mise en favori.
L'accueil d'une app de spa : trois catégories de soins, chacune en image pleine largeur avec son nom incrusté.
La liste des massages : chaque soin y occupe une ligne avec sa photo, son nom et sa durée.
Le détail d'un soin : photo, nom, durée, prix, puis une description en italique et un lien de réservation.
Deux écrans d'un guide de ville : à gauche, la liste des articles, chacun avec sa vignette carrée et son titre, sous l'en-tête de la section et au-dessus de la barre d'onglets ; à droite, l'article ouvert, son image, son titre et son texte.

Quel layout choisir

Neuf layouts sont disponibles pour la liste. Ils se départagent sur trois critères : le volume d'articles que vous publiez, la force de vos visuels, et le fait de vouloir ou non mettre un article en avant.

Le layout se change dans Mon app Structure : ouvrez le menu de la section concernée, puis Modifier le design.

Sans mise en avant, tous les articles au même rang :

  • Enriched Classic, le défaut universel. Rythme modéré, métadonnées clés visibles. À prendre quand rien ne pousse vers un layout plus spécialisé.
  • Condensed, pour le gros volume éditorial à parcourir vite. Le visuel passe après.
  • Visual Card, cartes pleine largeur sur une colonne : grande image en haut, titre et chapô dessous. Quand l'image est ce qui donne envie de cliquer.
  • Checkerboard, pour du contenu statique, avec une lecture des titres en « Z ».
  • Grid Visual, une grille d'articles égaux. Exige un visuel sur tous les items.

Avec un article en avant :

  • Une Condensed, un article phare suivi de beaucoup d'items compacts. Le fil absorbe le volume.
  • Une Grid Visual, un article en avant puis une grille. Exige là aussi un visuel sur tous les items.
  • Une Story, plusieurs « unes » en carrousel balayable, façon réseaux sociaux, avec un fil compact dessous. Pour une publication très régulière à visuels forts. Disponible uniquement sur les articles.

Le cas particulier :

  • Immersive, un article par écran, image dominante et navigation par balayage vertical. Superbe avec des visuels forts, mais ne tient pas le gros volume.

La règle qui prime sur toutes les autres : si vos articles n'ont pas de visuels, ou des visuels de mauvaise qualité, écartez Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story et Immersive. Il vous reste Condensed si le volume est élevé, Enriched Classic sinon.

Pour le détail de l'article, la vue par défaut place la couverture en héro, puis le titre, la date et l'auteur, la barre d'actions (partage, favori, commentaire) et le corps du texte. Quand un article n'a pas de couverture, le titre passe en premier plutôt que de laisser un héro vide.

Une remarque valable pour toutes les sections : si nous associons parfois un layout à un type d'usage, aucun n'est réservé à un secteur. Tout dépend de vos besoins et du design général de votre app.

Neuf maquettes de layouts de blog, avec leur nom. En haut : Enriched Classic, Condensed, Visual Card, Checkerboard, Grid Visual. En bas : Une Condensed, Une Grid Visual, Une Story, Immersive. Chacune montre comment l'image, le titre et le résumé se répartissent dans la liste, et si le premier article se détache des autres.

Chapitre 4La galerie

À quoi elle sert

La section Galerie affiche une galerie d'images. Son fonctionnement est minimal : vous ajoutez vos photos, vous choisissez le layout, c'est terminé.

Ajoutez vos photos avec le bouton Ajouter une photo, ou par glisser-déposer depuis votre ordinateur. L'ajout multiple est possible, ce qui accélère nettement le travail.

Cet écran est dans Contenu Liste de contenu Toutes les photos, et l'ajout direct dans Contenu Ajouter Une photo.

Une fois vos images dans le back office, vous pouvez leur donner un titre et une description, qui apparaîtront dans la vue de détail.

Le panneau d'ajout d'une section, une flèche pointant la vignette de la galerie parmi les types disponibles. À gauche, l'aperçu de l'app du festival avec son programme et sa barre d'onglets.
La liste des contenus filtrée sur une galerie, en vue grille. Chaque photo forme une carte où deux invites attendent un titre et une légende, une flèche désignant leur emplacement. Sous chaque carte, l'état de publication, une corbeille et une case à cocher ; en haut, la recherche, les filtres et le bouton d'ajout.

Deux façons de s'en servir

La vie d'une école. L'app Paraigua diffuse ses informations aux élèves et aux parents, et cherche à créer une communauté autour de l'établissement. Sa section Galerie publie régulièrement les photos de la vie du collège. Le layout retenu laisse apparaître le titre et la description de chaque cliché, pour les contextualiser.

Un festival de musique. L'app Piu Piu est actualisée chaque année pour la nouvelle édition. La galerie sert d'archive : elle rassemble les photos des années précédentes, ce qui entretient le souvenir des habitués et transmet l'esprit du festival aux nouveaux venus.

Une galerie dans une app d'école : les photos se suivent en pleine largeur, chacune avec sa date et son titre en dessous.
Une galerie de festival en mosaïque : les photos sont accolées deux par deux, sans titre, et se répondent par leurs couleurs.

Quel layout choisir

Trois layouts, qui répondent à trois intentions différentes.

Le layout se change dans Mon app Structure : ouvrez le menu de la section concernée, puis Modifier le design.

  • Visual Card, le défaut. Une colonne, cartes pleine largeur, et surtout un titre et une légende par photo. C'est le seul des trois qui permet de contextualiser vos images.
  • Square, une grille de deux colonnes de carrés, sans titre. Pour une archive visuelle très condensée, quand la cohérence d'ensemble compte plus que chaque photo prise isolément.
  • Ratio, une mosaïque de deux colonnes qui respecte les proportions natives de chaque image. Pour un portfolio aux formats hétérogènes.

Autrement dit : si vos photos ont besoin d'être expliquées, prenez Visual Card. Si elles parlent d'elles-mêmes et sont nombreuses, Square ou Ratio selon qu'elles sont uniformes ou non.

Trois maquettes de layouts de galerie, avec leur nom : Visual Card, où chaque photo occupe une carte avec son titre et sa légende ; Square, une grille de vignettes carrées ; Ratio, une grille qui respecte les proportions d'origine de chaque photo.

Chapitre 5Les vidéos

À quoi elle sert

La section Vidéos les diffuse dans votre app, qu'elles soient déjà hébergées sur un site externe ou non.

Ajoutez vos vidéos en les téléversant depuis votre ordinateur, ou en renseignant leur code embed si elles vivent déjà ailleurs. Comme pour le blog, vous choisissez ensuite les sections d'affichage, l'auteur, la date de publication, le résumé et l'activation des commentaires.

L'éditeur s'ouvre depuis Contenu Ajouter Une video.

Vous pouvez enfin structurer la page en y ajoutant, si besoin, des paragraphes de texte, des photos et des citations.

Le même panneau d'ajout, la flèche désignant cette fois la vignette des vidéos. À gauche, l'aperçu de l'app d'entreprise affiche un article.
La création d'une vidéo dans le back office : au centre, une zone de dépôt qui annonce la taille maximale et propose soit d'envoyer un fichier, soit de coller un code d'intégration, avec la liste des formats acceptés. À droite, la catégorie, l'auteur, la date, l'épinglage en haut de liste, un résumé et l'interrupteur des commentaires.

Deux façons de s'en servir

Un journal local. River Daily n'a pas de chaîne de télévision, mais diffuse des émissions régulières sur YouTube, dont une quotidienne. Elles sont regroupées dans la section Video News de l'app.

Une app interne d'entreprise. Chez Dali Corp, la section Vidéos diffuse des cours en ligne créés par les employés pour les employés. Le dispositif remplit deux fonctions à la fois : il mobilise les salariés autour d'un projet commun, et il leur offre de la formation gratuite.

Une liste de vidéos dans une app de presse : chaque ligne porte sa miniature, marquée d'un bouton de lecture, et à côté son titre ou sa date.
Une liste de vidéos dans une app d'entreprise : les miniatures occupent toute la largeur, leur durée incrustée dans un coin, avec la date de publication et le titre en dessous.

Quel layout choisir

Trois layouts pour la liste.

Le layout se change dans Mon app Structure : ouvrez le menu de la section concernée, puis Modifier le design.

  • Enriched, le défaut. Liste compacte, petite miniature 16:9, métadonnées au premier plan (titre, date, auteur, description). C'est le bon choix pour un gros volume à parcourir.
  • Une Condensed, une vidéo vedette en grand avec son chapô, puis un fil compact dessous. C'est le « journal vidéo », avec la une du jour. Tient du volume modéré à élevé.
  • Visual Card, de grandes cartes pleine largeur avec le frame 16:9 et le bouton play centré. À prendre quand c'est la miniature qui donne envie de cliquer.

Pour le détail, le player vidéo occupe le héro, suivi du titre, de la date, des actions, de la description et, si vous en renseignez une, de l'adresse.

Trois maquettes de layouts de vidéos, avec leur nom : Enriched, une liste où la miniature est posée à gauche du titre ; Une Condensed, qui détache la première vidéo en grand au-dessus des suivantes ; Visual Card, où chaque vidéo occupe sa carte.

Chapitre 6Les podcasts

À quoi elle sert

La section Podcasts diffuse des sons dans votre app.

Ajoutez vos sons en les téléversant depuis votre ordinateur. Comme pour le blog, vous choisissez les sections ou catégories d'affichage, l'auteur, la date, le résumé et les commentaires. Vous pouvez en plus ajouter des liens externes vers l'achat du son.

L'éditeur s'ouvre depuis Contenu Ajouter Un son.

La page se structure ensuite avec des paragraphes de texte, des photos, des vidéos, du code embed et des citations.

Le panneau d'ajout d'une section, la flèche désignant la vignette des podcasts. À gauche, l'aperçu de l'app d'école, dont le menu s'affiche en grille d'icônes.
La création d'un épisode dans le back office : au centre, un champ de titre et une zone de dépôt du fichier audio. À droite, la catégorie choisie dans l'arborescence des cours, l'auteur, la date, l'épinglage, deux champs de lien commercial pour les stores, et l'interrupteur des commentaires.

Deux façons de s'en servir

Une app de news. River Daily diffuse aussi une radio en direct. La section Podcasts met certaines émissions à disposition en permanence. Les dates sont affichées dans la liste, pour aider les auditeurs à retrouver l'émission cherchée. La page de détail reste nue, sans information supplémentaire.

Une école. Le collège Paraigua avait besoin de diffuser ses cours à distance. Ils sont présentés en liste, catégorisés par matière.

L'idée à retenir se trouve dans la page de détail : une retranscription du cours y est publiée sous forme de paragraphes et d'images. L'élève suit le texte et les illustrations tout en écoutant la version audio, ce qui rend le cours utilisable dans des situations très différentes.

Deux écrans d'une app de presse : à gauche, la liste des épisodes, chacun avec son titre, sa date et sa vignette ; à droite, le lecteur ouvert, avec la pochette, la date, le titre, la barre de progression posée sur une forme d'onde et les trois boutons de lecture.
Une liste d'épisodes dans une app d'école, sous une barre de sous-catégories qui sépare les matières. Chaque ligne porte sa vignette et son titre.
Le détail d'un épisode : pochette, date, titre, lecteur, puis le cours écrit qui suit l'audio, en paragraphes titrés entrecoupés d'une photo.

Quel layout choisir

Deux layouts, et le critère qui les sépare est la taille de la vignette. Les deux embarquent le lecteur dans la cellule, avec le bouton play et la durée : ce n'est donc pas la lecture qui les distingue.

Le layout se change dans Mon app Structure : ouvrez le menu de la section concernée, puis Modifier le design.

  • Classic Play, le défaut. Vignette plus petite, texte et métadonnées dominants. C'est le layout des listes longues d'épisodes, et celui du pattern radio.
  • Enriched, vignette plus grande, qui met l'artwork en avant. À choisir quand la pochette fait partie de l'identité de vos contenus, sur un volume modéré.

Pour le détail, l'artwork sert de couverture immersive, avec le lecteur audio, le titre, les actions et le corps du texte.

Deux maquettes de layouts de podcasts, avec leur nom : Classic Play, où chaque épisode aligne sa vignette, son texte et sa commande de lecture ; Enriched, qui donne plus de place à la vignette et au résumé.

Chapitre 7Le direct

À quoi elle sert

Les sections précédentes publient du contenu enregistré, disponible quand votre auditeur le décide. Le direct fait l'inverse : il diffuse en temps réel, et c'est le rendez-vous qui fait l'évènement.

Trois briques, à combiner selon ce que vous diffusez.

  • Le direct audio est la brique de base : la section existe sans rien ajouter. Vous renseignez l'adresse de votre flux, et l'app le diffuse. Les encodeurs IceCast sont pris en charge nativement, ce qui couvre la grande majorité des installations de radio.
  • Le direct vidéo fait la même chose pour une diffusion d'images. C'est une extension, et sa fiche au store affiche le prix qui s'applique à votre app.
  • Live+ est une surcouche du direct audio, elle aussi apportée par une extension. Elle affiche les métadonnées de votre flux à côté du lecteur : le titre en cours, l'animateur, l'émission. Sans elle, votre auditeur voit un bouton de lecture et rien d'autre ; avec elle, il voit ce qu'il écoute.

Deux propriétés méritent d'être connues avant de vous décider.

Le son ne s'arrête pas quand votre auditeur navigue. Le lecteur suit l'utilisateur d'un écran à l'autre et continue écran éteint. Concrètement, on peut écouter votre antenne tout en lisant vos articles, ce qui change complètement l'usage d'une app de radio.

Vous pouvez ouvrir plusieurs sections de direct. Une radio avec deux antennes, un festival avec deux scènes, une paroisse avec deux célébrations : chaque flux a sa section.

Dernière différence avec les sections précédentes : le direct n'a qu'une seule présentation. Il n'y a pas de layout à choisir.

Deux façons de s'en servir

Une radio locale. La radio de River Daily, évoquée au chapitre précédent, vit dans une section Direct. Les podcasts gardent les émissions à la demande, le direct porte l'antenne. Live+ affiche le morceau diffusé et son interprète, ce qui donne à l'auditeur qui arrive en cours d'émission de quoi savoir où il tombe.

Un festival. Piu Piu diffuse sa scène en direct pendant les quatre jours. Le public qui n'a pas pu venir suit la soirée, et les habitués retrouvent l'ambiance depuis chez eux. Le direct s'articule avec l'Agenda, qui reste la section principale de l'app : le programme annonce, le direct diffuse.

Deux détails de cet écran valent d'être signalés. Le Sleep mode coupe la lecture après un délai choisi, ce qui compte sur une antenne qu'on écoute le soir. Et le lecteur reprend les couleurs et la typographie de l'app : c'est le même écran que chez River Daily, il ne ressemble pourtant pas au même produit.

Le lecteur de direct de River Daily : pochette circulaire, bouton de lecture, durée écoulée, puis le nom de l'interprète et le titre du morceau affichés par Live+. En bas, un mini-lecteur persistant rappelle ce qui est en cours d'écoute.
Sans Live+, l'auditeur ne verrait que le bouton de lecture.
Le même écran de direct chez Piu Piu, dans les couleurs sombres et orangées du festival, avec un bouton Sleep mode en haut à droite et le mini-lecteur persistant en bas.
Même écran que ci-dessus, deux identités : le lecteur suit le design de l'app.

Chapitre 8Map

À quoi elle sert

La section Map crée des points géolocalisés affichés sur une carte. Vos utilisateurs repèrent les lieux et obtiennent un itinéraire pour s'y rendre.

Pour créer un point, entrez son adresse ou ses coordonnées dans la page d'édition.

La page d'édition s'ouvre depuis Contenu Ajouter Un lieu.

Vous complétez ensuite la description avec du texte, des photos, des vidéos, des citations ou du code embed. Le panneau de droite vous permet de choisir les sections d'affichage et d'ajouter des boutons d'action :

  • bouton d'appel
  • bouton d'envoi de mail

Vous pouvez enfin ajouter un lien externe, et personnaliser la forme et la couleur de l'icône qui représente le point.

Le panneau d'ajout d'une section, la flèche désignant la vignette de la carte. À gauche, l'aperçu du guide de ville, avec sa recherche et ses tuiles.
La création d'un lieu dans le back office : son nom, son adresse, ses coordonnées, et à droite la carte qui les situe. En dessous, un éditeur de texte pour le décrire. Dans le panneau de droite, les catégories où il apparaît, un numéro de téléphone et un email qui deviennent des boutons d'action, une adresse web, puis le choix de la forme et de la couleur de son repère.

Trois façons de s'en servir

Un campus scolaire. Le collège Paraigua est réparti sur plusieurs bâtiments. Les nouveaux arrivants, élèves comme parents, avaient besoin de les identifier d'un coup d'œil et d'obtenir un itinéraire.

Quatre lieux ont été créés, présentés d'abord en liste. La vue Carte montre tous les points et les distances. Un clic sur un point donne un résumé et l'accès au détail, où le bouton d'itinéraire est la fonctionnalité principale, complété d'une description et d'une image.

Une entreprise multi-sites. Dali Corp possède des bureaux dans plusieurs villes américaines, et tient à sa culture d'entreprise. Une section Map présente les trois bureaux.

Le détail est plus fourni que chez Paraigua : des photos décrivent le bureau et son ambiance, et le bouton d'itinéraire figure sous les photos. La carte ne sert pas seulement à s'orienter, elle sert à faire exister les autres sites auprès de ceux qui n'y vont jamais.

Un guide touristique. Dans l'app Portland, la carte est le cœur du produit. Plusieurs sections Map présentent les lieux de la ville, classés par type.

Le détail comprend une description fournie, des photos si nécessaire, le bouton d'itinéraire mis en avant, et un lien externe vers le site de chaque établissement quand il en a un.

Trois écrans d'une app d'école : la liste des lieux, chacun avec sa photo, son nom et son adresse ; la carte, où les repères se répartissent et où l'un d'eux ouvre son étiquette ; le détail d'un lieu, avec sa photo, son adresse, un bouton d'itinéraire, la liste de ses services et une carte en pied.
Le détail d'un bureau dans une app d'entreprise : la photo d'ouverture, le nom, l'adresse, une phrase de présentation, puis quatre photos des locaux, le bouton d'itinéraire et la carte.
Deux écrans d'un guide de ville : à gauche la liste des lieux, sous une barre de sous-catégories, avec un bouton rond qui bascule sur la carte ; à droite la carte plein écran, ses repères, et le bouton qui ramène à la liste.
Le détail d'un lieu touristique : photo, nom, adresse, bouton d'itinéraire, puis une description qui alterne paragraphes, liste à puces et photos, un bouton vers le site, et la carte en pied.

Quel layout choisir

Trois layouts, et le vrai critère est la place que vous donnez à la carte elle-même.

Le layout se change dans Mon app Structure : ouvrez le menu de la section concernée, puis Modifier le design.

  • Enriched, le défaut. Liste compacte, petite vignette, titre et adresse, plusieurs lieux par écran. La carte est cachée derrière un bouton. C'est le layout de l'annuaire, quand l'utilisateur sait déjà ce qu'il cherche.
  • Visual, grande vignette dominante, peu de lieux par écran. La carte reste cachée derrière un bouton. Pour une galerie de lieux où c'est l'image qui donne envie.
  • Split Enriched, la carte interactive occupe le haut de l'écran et la liste s'affiche dessous. À choisir quand le rapport spatial entre les lieux porte du sens, c'est-à-dire quand la carte est le sujet.

Vous décidez par ailleurs d'afficher ou non une liste résumée par-dessus la carte. Rendez-vous dans Mon app Structure, ouvrez la section Map, puis la vue Liste de points : le réglage se trouve dans la zone de contenu, sous « Vue Map ».

Pour le détail d'un lieu, vous obtenez la photo, le nom, l'adresse, le bouton d'itinéraire, une galerie et la carte localisée.

Trois maquettes de layouts de carte, avec leur nom : Enriched, une liste où chaque lieu porte son repère et son adresse ; Visual, qui donne à chaque lieu une grande vignette ; Split Enriched, qui pose la carte en haut et la liste en dessous.
Les réglages de design d'une section carte. Entourés, deux interrupteurs commandent l'affichage de la liste et le fait qu'elle s'ouvre avant la carte. En dessous, la couleur de fond, la bordure, l'opacité, ce que chaque ligne montre, et la typographie du titre. À gauche, l'aperçu applique les réglages en direct.

Chapitre 9Le formulaire

À quoi elle sert

La section Formulaire recueille des informations auprès de vos utilisateurs, à partir de champs de types variés.

Vos formulaires sont listés dans Contenu Liste de contenu Tous les formulaires. En ouvrir un affiche à droite le panneau Modifier le formulaire, dont l'onglet Champs porte la palette ci-dessous.

Seize types de champs sont disponibles :

  • ligne de texte
  • paragraphe de texte
  • choix multiple
  • nom
  • date
  • email
  • lien externe
  • ajout de fichier
  • nombres
  • cases à cocher
  • menu déroulant
  • adresse
  • heure
  • téléphone
  • prix
  • saut de section

Cliquez sur le type voulu, il apparaît dans la zone d'édition où vous personnalisez son contenu.

Pensez aussi à enrichir le formulaire de photos, vidéos, textes, citations ou code embed : un formulaire nu obtient moins de réponses qu'un formulaire qui explique ce qu'il attend.

Le panneau d'ajout d'une section, la flèche désignant la vignette du formulaire, dans un catalogue qui s'est allongé. À gauche, l'aperçu de l'app du décorateur, menu ouvert.
L'édition d'un formulaire : à gauche son titre et une image d'illustration ; à droite, la palette des champs disponibles, une ligne de texte, un nombre, un paragraphe, des cases à cocher, un choix unique, une liste déroulante, un nom, une adresse, une date, une heure, un email, un téléphone, un site, un prix, un fichier et une séparation de section.

Deux façons de s'en servir

Une app de service. Chez Ivar Madsen, architecte d'intérieur, le formulaire sert aux demandes de rendez-vous et de devis.

L'objectif de la page est triple : présenter l'offre, connaître le futur client, permettre le premier contact. Une image et un texte explicatif posent le contexte, puis le formulaire va droit au but :

  • un champ nom et un champ email pour identifier le client
  • deux champs paragraphe pour exprimer ses besoins et son projet
  • un champ date pour indiquer ses disponibilités

Une app d'entreprise. Chez Dali Corp, les ressources humaines diffusent régulièrement des enquêtes pour mesurer le bien-être des salariés et recueillir leurs opinions.

Le formulaire est volontairement très court, pour maximiser le taux de réponse. Un texte introductif, puis cinq champs :

  • un champ nom et un champ équipe pour identifier le salarié
  • deux champs à choix multiples pour répondre aux questions de la direction
  • un champ paragraphe pour s'exprimer librement
Un formulaire de prise de contact déroulé en entier : le titre, une photo, quatre blocs qui expliquent ce qui sera demandé, puis les champs à remplir, nom, email, adresse du bien avec ses sous-champs, description du projet, style souhaité et disponibilités avec un sélecteur de date. Un bouton d'envoi ferme la page.
Un questionnaire interne dans une app d'entreprise : après le texte d'introduction, un champ de nom, une liste déroulante d'équipe, deux questions à choix unique et un champ libre, puis le bouton d'envoi.

Exploiter les réponses

Rendez-vous dans Contenu Liste de contenu. Survolez la section Formulaire concernée et cliquez sur Afficher le contenu. Vous y trouvez la liste des réponses reçues.

Un clic sur une ligne affiche les réponses d'un utilisateur, que vous pouvez exporter au format .csv via Exporter les données. Le même bouton, depuis la vue de liste, exporte l'ensemble des réponses.

C'est cet export qui rend la section réellement utile : sans lui, vous consultez des réponses une par une ; avec lui, vous les analysez globalement.

Les réponses d'un formulaire dans le back office, en tableau : la date, les champs du formulaire en colonnes, et le fichier joint. Une corbeille termine chaque ligne. Entourés par la flèche, en haut à droite, l'export des données et le retour à l'édition du formulaire.

Chapitre 10La soumission

À quoi elle sert

La section Soumission permet à vos utilisateurs de vous envoyer du contenu depuis l'app, sous forme de texte, de photos ou de vidéos. Tout arrive dans votre back office.

Ce que vous recevez arrive dans Contenu Liste de contenu Tous les contenus envoyés.

Il n'y a rien à paramétrer, sauf si vous souhaitez restreindre les types de contenu acceptés. Dans ce cas, ajoutez l'extension Accès API et éditez le JSON de la section. L'opération est simple et une aide pas à pas est disponible dans votre back office.

Le panneau d'ajout d'une section, la flèche désignant la vignette de la soumission de contenu. À gauche, l'aperçu de l'app du décorateur, menu ouvert.

Trois façons de s'en servir

Une boîte à idées interne. Chez Dali Corp, la direction a ouvert un espace de parole où les salariés déposent à tout moment leurs remarques et recommandations. Le contenu reçu n'est pas publié : il est analysé pour améliorer les conditions de travail.

Les souvenirs d'un festival. Piu Piu mise sur sa communauté et veut montrer l'ambiance réelle du festival. La section Vos Souvenirs recueille les photos et vidéos des participants. L'envoi de texte y a été désactivé.

Les infos des lecteurs. River Daily veut être le premier sur l'actualité locale. Une section ouverte permet aux lecteurs de faire remonter leurs informations, que les journalistes retraitent avant publication.

Ces trois cas montrent trois régimes différents : du contenu qui ne sera jamais publié, du contenu publié presque tel quel, et du contenu qui sert de matière première à un travail éditorial. Décidez lequel est le vôtre avant d'ouvrir la section, car cela change ce que vous annoncez à vos utilisateurs.

Deux écrans d'une app d'entreprise : à gauche le menu, où une entrée invite les salariés à contribuer ; à droite l'écran de dépôt, qui propose trois gestes, une photo, une vidéo ou un texte, chacun avec sa consigne.
La même mécanique dans une app de festival : le menu propose de déposer ses souvenirs, et l'écran de dépôt se limite à deux gestes, la photo et la vidéo, chacun sur son fond de couleur.
Dans une app de presse : le menu porte deux entrées de contribution, et l'écran de dépôt invite les lecteurs à signaler l'actualité de leur ville en envoyant une photo, une vidéo ou un texte.

Gérer les contenus reçus

Rendez-vous dans Contenu Liste de contenu, survolez votre section Soumission et cliquez sur Afficher le contenu.

Vous gérez la publication en masse, via les cases à cocher à droite de chaque ligne, ou au cas par cas en ouvrant un contenu. Vous pouvez ainsi modifier puis publier en un clic ce que vos utilisateurs vous ont envoyé.

Les contenus reçus dans le back office : chaque ligne porte la vignette envoyée, la mention de l'app d'origine, l'adresse email de l'auteur, la date et une pastille d'état qui la signale comme soumise, en attente de validation. Une corbeille termine chaque ligne.

Chapitre 11L'agenda

À quoi elle sert

La section Agenda présente votre contenu sous forme d'évènements datés.

Pour créer un évènement, choisissez d'abord sa date et sa durée. L'option « journée entière » vous dispense de renseigner une plage horaire. Vous pouvez ensuite lui rattacher une adresse.

L'éditeur s'ouvre depuis Contenu Ajouter Un évènement.

La page s'articule en paragraphes, avec texte, photos, vidéos, citations et code embed.

Le panneau de droite vous permet de choisir les sections ou catégories d'affichage, d'ajouter des boutons d'action (appel, envoi de mail), un lien externe et un bouton d'achat de ticket.

Le panneau d'ajout d'une section, la flèche désignant la vignette de l'agenda. À gauche, l'aperçu de l'app du festival, avec le programme et sa barre d'onglets.
L'édition d'un événement dans le back office : son titre, sa date de début et sa date de fin, une case pour la journée entière, puis le lieu avec ses coordonnées et la carte qui le situe. À droite, la catégorie, un téléphone et un email en boutons d'action, une adresse web, un lien de billetterie et la vignette de la liste.

Deux façons de s'en servir

Une app interne d'entreprise. Dali Corp utilise deux sections Agenda. La première communique sur les évènements internes : workshops, afterworks, journées portes ouvertes. La seconde partage la roadmap de l'entreprise, pour que chacun connaisse les échéances et les projets en cours.

Ce second usage est le plus transposable : l'agenda n'est pas réservé aux évènements auxquels on assiste, il sert aussi à rendre visible un calendrier.

Dans le détail, l'adresse et le bouton d'itinéraire apparaissent quand ils sont pertinents.

Un festival. Chez Piu Piu, l'Agenda est la section principale de l'app : c'est le programme du festival.

Le détail est complet : adresse, date, bouton d'achat de billet, description, lien vers le site des artistes, bouton d'appel, bouton d'email, bouton d'itinéraire, ainsi que la mise en favoris et le partage.

Deux écrans d'une app d'entreprise : à gauche la liste des événements, chacun avec sa pastille de date, son image et son horaire ou son lieu ; à droite le détail d'un événement, avec sa photo, son lieu, sa date, un bouton d'itinéraire et la carte.
Le détail d'un concert dans l'app du festival : la photo, le nom du groupe, le lieu, la date, un bouton de billetterie, la présentation, puis quatre boutons, le site, le téléphone, l'itinéraire et l'email, et la carte en pied.

Quel layout choisir

Deux layouts, qui correspondent à deux postures opposées.

Le layout se change dans Mon app Structure : ouvrez le menu de la section concernée, puis Modifier le design.

  • Classic, le défaut. Les évènements sont groupés sous des bandeaux de jour, avec une petite vignette, l'horaire, le titre et le lieu, plusieurs par écran. C'est le calendrier qu'on parcourt par date, quand le « quand » et le « où » priment sur l'image.
  • Classic Bullet, chaque évènement en grande vignette dominante avec une pastille de date, un à deux par écran. C'est la vitrine, quand c'est l'affiche de l'évènement qui donne envie de venir.

Le choix se résume donc à une question : vos utilisateurs viennent-ils consulter un programme, ou se laisser tenter ?

Pour le détail d'un évènement, vous obtenez la couverture, le titre, l'adresse, les dates, la description, l'itinéraire et la carte du lieu.

Deux maquettes de layouts d'agenda, avec leur nom : Classic, une liste d'événements groupés par jour, chacun avec sa vignette et son lieu ; Classic Bullet, qui aligne les dates en pastilles sur le côté et donne à chaque événement une grande image.

Chapitre 12Le CMS et les connecteurs

Ce qu'apporte le CMS

Un CMS (content management system) vous permet, depuis un back office, de créer et mettre en forme votre contenu pour le publier. Chez GoodBarber, c'est le cœur de la plateforme.

Au-delà de la création, il vous donne :

  • La gestion des états du contenu. Publié, En stock ou Brouillon, pour piloter vos publications.
  • La publication différée. Vous fixez à l'avance le jour et l'heure de mise en ligne, ce qui compte particulièrement pour les apps de news ou de blog.
  • La catégorisation. Un nombre illimité de catégories pour classer le contenu d'une section, donc un niveau de navigation supplémentaire sans surcharger votre menu.
  • Le tri. Par date de rédaction, par ordre alphabétique ou par nombre de commentaires.
  • La gestion centralisée. Un dashboard réunit tous les contenus créés dans le CMS, avec des filtres pour retrouver et traiter en masse.
  • La personnalisation avancée des méta-informations. Elles servent à la fois l'incitation à la consultation et votre SEO, et vous gardez la main sur leur affichage.
  • La mise en avant des contenus. Un affichage privilégié pour les contenus de votre choix, depuis leur page d'édition.
  • La personnalisation avancée du design. Le design de chaque contenu se règle indépendamment des paramètres généraux de l'application.

Ce qu'apportent les connecteurs

Si vous produisez déjà du contenu ailleurs, vous n'avez pas à le republier. Plus de 30 connecteurs développés par GoodBarber le rapatrient dans votre app, en le formatant pour respecter les normes d'affichage et le design de l'app.

Un système de mise en cache garantit les temps de chargement et la stabilité, sans surcharger vos serveurs. Vos images sont redimensionnées, compressées et mises en cache par GoodBarber.

L'avantage décisif est la synchronisation : le contenu produit sur votre source externe reste à jour dans l'app, avec un affichage adapté au mobile, à la tablette, au laptop et au desktop. Vous n'avez plus jamais à publier deux fois.

La liste des connecteurs

Chaque connecteur alimente un type de contenu précis, et le contenu rapatrié se comporte ensuite comme s'il avait été créé dans le CMS.

Articles : WordPress, Squarespace, Wix, Medium, Substack, X, RSS

Photos : Flickr

Vidéos : YouTube, Vimeo, RSS

Sons et podcasts : Ausha, Spreaker, Simplecast, Spotify for Podcasters, flux podcast, RSS

Évènements : iCal et vCalendar, RSS

Cartes : KML, RSS

Les connecteurs custom. Si votre source n'est pas couverte, vous produisez un flux au format attendu par le type de contenu visé, et vous déclarez son adresse. Le travail sur mesure se limite à la production du flux : l'affichage, les layouts, la recherche et les métadonnées restent ceux de la plateforme. Une documentation détaillée décrit le format attendu.

Rien ne vous oblige à choisir entre les deux : vous pouvez mêler contenu interne, créé dans le CMS, et contenu externe rapatrié par les connecteurs, dans une seule et même application.

Conseils pour créer une app