La conception des gabarits éditoriaux relève des techniques de stratégie éditoriale.
Découvrez des exemples illustrés et des ressources pour concevoir un gabarit éditorial dédié aux contenus.
La conception des gabarits éditoriaux vise à créer des formats de pages types adaptés au volume des contenus sources. Le gabarit éditorial est flexible et adaptable pour enmagasiner les contenus de façons agile.
Comment concevoir les gabarits éditoriaux de votre dispositif digital ? Combien de format d'écran type faut-il concevoir pour dynamiser les contenus de votre site ? Comment dimensionner les modèles de page destinés à emmagasiner les contenus ?
Nous allons voir les méthodes et les techniques de conception pour étalonner un gabarit éditorial. Il s'agit d'un travail qui relève principalement de l'architecture de l'information et du design de l'information.
La conception des gabarits éditoriaux engage 3 entités dynamiques : le conteneur (le modèle de page), le contenu (issu de la base de donnée ou de la rédaction en dur) et les constituants rattachés aux contenus (composant d'interface, fonctionnalité, module). Le design fonctionnel du gabarit fait en sorte que le contenu source épouse l'interface utilisateur de façon élégante, en figurant les constituants et les composants de sorte à dynamiser le contenu.
Concevoir des gabarits éditoriaux s'inscrit dans la phase de conception du cycle projet et fait la jonction entre le design fonctionnel et la conception éditoriale. Il s'agit d'établir des calibres d'écrans suffisamment flexibles pour accueillir les différentes typologies de contenu de votre site. En matière de vocabulaire et de définition, on parle aussi de template éditorial ou encore de gabarit de contenu.
Les gabarits éditoriaux sont des modèles et ils doivent être souples et modulaires pour s'adapter à la diversité des contenus sources. Un travail d'analyse des contenus doit permettre d'identifier les différents registres éditoriaux en amont de la conception des conteneurs. Il faut détecter les attributs, les variables, et les spécificités propre à chaque classe de contenu source.
Ces travaux menés en amont pour optimiser la chaine éditoriale (inventaire des contenus, segmentation éditoriale, optimisation sémantique, organisation arborescente) se concrétisent en aval par la transposition et la ventilation des contenus à l'écran sous forme d’interface
Concevoir les conteneurs et les gabarits éditoriaux revient à valoriser les informations et les contenus dans une logique dynamique. Vous pouvez concevoir un gabarit éditorial ou modéliser plusieurs gabarits éditoriaux. Tout dépend de votre projet. Quel que soit la typologie de votre dispositif digital, la création des modèles éditoriaux doit concourir à la qualité du contenu final.
En règle générale, un gabarit éditorial est suffisamment flexible pour accueillir différents formats de contenu... Pour les projets éditoriaux plus importants, on peut toutefois comptabiliser plus d'une dizaine de conteneur différents : chaque gabarit de contenu a alors une fonction différente et assure un formatage efficace des contenus. Par exemple : un gabarit de contenu pour visualiser des photos, un gabarit éditorial pour figurer les news, un gabarit de contenu pour mettre en scène un dossier complet avec une grande richesse de médias...
La conception de conteneur éditorial consiste donc à modéliser et formater les données entrantes, en travaillant sur la valorisation du fond, dans une grille typée et normée afin d’assurer la qualité de la mise en forme en sortie. Il s’agit d’un travail assez ordinaire de design d'information et d'architecture de l'information visant à optimiser au mieux les gabarits éditoriaux en adaptant la forme au fond tout en tenant compte des caractéristiques variables des données à formater.
Sur le plan fonctionnel, au moment de la conception d'interface, le concepteur cherche à rationaliser le fonctionnement du support numérique. D'une part, pour optimiser les coûts de production. D'autre part, pour que l'expérience d'utilisation soit uniforme et homogène.
Le designer de l'information détermine les composantes fonctionnelles et éditoriales des principaux gabarits. Ici, on considère les gabarits destinés à diffuser les contenus (article, reportage, dossier...).
L'agencement des contenus et la présentation des fonctions à l'écran considèrent des variables dynamiques. Ainsi, l'intégralité des modules de contenus et autres fonctionnalités ne seront pas forcément chargées dans tous les cas de figure. Ce sont les spécifications éditoriales et fonctionnelles qui clarifient ces règles d'affichage.
Le concepteur créé donc un canevas dynamique et modulaire, le plus modulable qui soit, afin que les rédacteurs et les personnes en charge de la publication bénéficient d'un large choix au moment de publier des articles. Lorsque les contenus sont suffisamment originaux pour prétendre à une mise en forme spécifique, et que les typologies d'informations à afficher relèvent de registres trop singuliers pour être dénaturés, le designer de l'information créé un autre gabarit éditorial.
Le choix de créer un nouveau gabarit éditorial se fait en fonction du dimensionnement du projet, des coûts, de l'amplitude éditoriale mais aussi, bien sûr, de l'expérience d'utilisation...
La conception des gabarits éditoriaux doit se traduire en expérience positive pour les utilisateurs finaux. Une brève de 300 mots est différente d'un article de fond de 6000 mots. Si vous utilisez le même gabarit éditorial pour dynamiser ces 2 types de contenus, c'est qu'il y a un problème de conception...
En effet, sur le plan de l'utilisation, les articles riches suggèrent des modalités de navigation intégrées à la page : sommaire interne, balisage d'intertitres, chapitrage des contenus... De même, un article supposé présenter des illustrations et des photographies suppose une mise en forme spécifique.
Ces éléments de mise en page ont un rôle clé pour faciliter la scannabilité de l'écran côté récepteur. Or, la lecture d'une news n'implique absolument pas les mêmes efforts de classification qu'un article profond pour le lecteur.
Le designer de l'information gagne donc à considérer les cas d'utilisation au moment de concevoir les gabarits éditoriaux. Les temps de chargements des pages, le contexte d'utilisation, le terminal de consultation sont autant de caractéristiques à prendre en compte au moment de la conception des gabarits éditoriaux.
Si vous avez besoin d'aide dans la conception éditorial de votre projet, vous pouvez vous appuyer sur les modèles de conteneurs éditoriaux à télécharger disponibles au sein de notre shop
Nous proposons également un tutoriel balayant les problématiques de conception fonctionnelle et éditoriale pour vous aider à modéliser le fonctionnement de vos modèles de pages types.
La conception éditoriale des gabarits types dédiés au contenu ne poursuit qu'un seul et unique objectif : concevoir une structure de page efficace pour valoriser LE CONTENU.
Plus l'envergure des typologies de contenu est vaste, plus le concepteur devra envisager la multiplication de conteneurs éditoriaux.
Lorsque vous êtes amenés à modéliser et à concevoir une structure type de gabarit éditorial, votre objectif central est de faire en sorte que le gabarit soit flexible et adaptable aux différents formats de contenus. S'il y a beaucoup de format à agréger et que les contenus sont de nature diversifiée, vous devrez créer et concevoir plusieurs types de gabarits éditoriaux.
Dans tous les cas, au moment de concevoir un gabarit éditorial, veillez à :
Le travail de conception vise à valider le duo conteneur-contenu en créant pour chaque typologie de contenu, le conteneur le plus à même d’agréger efficacement toutes les informations.
étude de dispositif numérique
conception de dispositif numérique
iafactory
Concevoir les gabarits éditoriaux, c'est opérer un travail de maquettage fonctionnel. Il faut penser de façon dynamique : le gabarit éditorial doit pouvoir répondre à de nombreux cas dans lesquels le volume et la richesse des contenus peuvent différer. Et cela peut avoir un impact sur l'ergonomie (page avec 500 mots vs. page avec 10000 mots...). Vous devez maquetter de façon à ce que le gabarit de contenu soit puissant et flexible : les modules éditoriaux et fonctionnels doivent pouvoir être masqués en fonction de la densité du contenu source et de la spécificité de chaque article.
Regardez un peu plus haut, les exemples de gabarits éditoriaux et observez comme les modules de fiche produit et les modules de fiches éditoriales sont conçus de manière à pouvoir être repositionnés dans l'interface voire même supprimés.
La conception fonctionnelle et éditoriale prévoit en effet que les modules puissent être intergeangeables afin d'épouser les spécificités de chaque cas...
La création des conteneurs, réceptacles des contenus, est une étape postérieure à l’inventaire, l’identification et la classification des typologies de contenu : un travail d'analyse et d’approfondissement des types de contenus permet, en aval, d’élaborer sereinement les conteneurs les plus modulaires pour valoriser tous vos flux d’information. La création de conteneur s’applique aux supports papiers (plaquette, catalogue, modèle documentaire) comme aux supports interactifs (article, fiche produit…).
Ces tâches s’apparentent au maquettage fonctionnel et au wireframing. Leurs spécificités : elles portent exclusivement sur les aspects génériques des contenus à agréger (type, taille, volume, longueur, etc.).
Comme peuvent l'illustrer les exemples de gabarits éditoriaux, chaque conteneur est complété par des spécifications éditoriales, fonctionnelles et techniques : ce travail détaille toutes les particularités de fonctionnement ainsi que les cas spécifiques à prendre en compte. La précision des spécifications et la prise en compte des différents cas de figure garantissent la qualité de la mise en page et la valorisation des informations clés.
Au moment de concevoir les modèles types de page éditoriale, le designer de l'information va considérer les patrons d'écrans types les plus fréquents. Cela concerne principalement les dispositifs digitaux à dominante éditoriale tels que les portails éditoriaux, les sites de presse en ligne, les supports de médias. En effet, pour des sites ecommerce ou transactionnels à forte dominante fonctionnelle, on se contente souvent de travailler 1 ou 2 gabarits de contenu...
Voici les différents types de gabarit éditorial que l'on peut rencontrer sur le plan de l'interface :
La liste n'est pas exhaustive. Ces typologies de conteneurs peuvent être plus ou moins évoluées. Un seul et même conteneur peut avoir la vocation de fusionner deux typologies d'articles. Comme vous le voyez, un conteneur de brève sera peu adapté pour mettre en scène un article profond ou un article enrichi...
Le choix des conteneurs et leur finesse va dépendre des objectifs établis dans la phase d'expression des besoins éventuellement complétée par le recueil des attentes côté usager. Chaque dispositif digital étant différent, ce sont les designers de l'information et les architectes de l'information qui réalisent les choix en matière de conteneur.
Une seule règle : que la forme soit adaptée au fond. Que le conteneur soit au service du contenu.
Voici les composantes éditoriales (constituants fondamentaux du contenu) qui balisent et structurent tout type de conteneur éditorial. La plupart sont des traceurs évidents et universels de l'écriture. Cela ne veut pas dire qu'il ne faut pas les citer, car ils composent tout ou partie du travail de design de l'information.
Voici les modules éditoriaux et fonctionnels enrichis qui s'ajoutent aux fondamentaux :
Le choix d'un type de gabarit éditorial se fait d'abord sur la base des différentes typologies de conteneurs. Ensuite, on considère la combinaison des modules éditoriaux et des modules fonctionnels. Plus les combinaisons sont nombreuses, plus le gabarit éditorial sera sophistiqué : on parle de gabarits éditoriaux construits sur des tableaux.
Le tableau, pour un gabarit éditorial, s'apparente à la logique du niveau dans un jeu vidéo. La notion suggère un avancement dans la séquence à l'écran. Les pages longues exigent une structure formelle adaptée à la lecture à l'écran...
La construction d'un gabarit éditorial autour de tableaux est une bonne pratique de structuration de l'information. Les tableaux reposent sur des formats bien établis qui vont faciliter le travail de classification de l'utilisateur. Les usages démontrent que les pages font l'objet d'un scan visuel très rapide, par saccade. Plus les formats sont distinctifs et identifiables, plus les propriétés de scannabilité de la page augmentent.
Les formats et les contrastes sont la clé des tableaux : la structuration verticale de l'information gagne à s'agencer autour de modules distinctifs homogènes mais contrastés sur le plan du design. Pour un site ecommerce, la fiche produit pourra s'organiser autour d'une séquence par tableaux :
De même, la structure d'un article profond peut s'appuyer sur une logique de tableau :
La construction d'un gabarit éditorial implique de fixer des règles sur le plan des modules : nombre de caractères pour le titre, le chapeau... Ces éléments sont précisés dans les commentaires des wireframes et seront détaillés dans les spécifications éditoriales qui ont une vocation à la fois technique et ergonomique.
Sur le plan de l'ergonomie, le gabarit éditorial doit respecter un certain nombre de conventions et de standards :
On ne peut pas évoquer la conception éditoriale sans dire quelques mots sur le design adaptatif. Le design de l'information doit proposer une séquence visuelle de lecture adaptée aux écrans des principaux terminaux de consultation (ordinateur desktop, ordinateur portable, tablette, smartphone).
Cela paraît simple et évident dans la théorie, mais l'est beaucoup moins sur le plan opérationnel dans la pratique. En effet, certains contenus sont particulièrement peu adaptés au redimensionnement : c'est le cas des tableaux, des infographies, des formulaires longs et enrichis... Le design de l'information du conteneur éditorial doit prendre en compte l'usage sur terminal mobile, dans le cadre de la conception adaptative.
Dans la construction du gabarit éditorial sur la base de tableaux, le concepteur veillera à spécifier les modules lourds sur le plan du poids pouvant faire l'objet d'une suppression. La construction modulaire d'un article éditorial s'appuie également sur la technologie des chargements de contenus en fonction de la typologie du terminal. L'expérience doit être homogène et équivalente, mais les problématiques de poids peuvent imposer un découpage de l'information encore plus précis sur support mobile : par exemple, pour les articles très longs supérieurs à 10 000 mots, un site comme Wikipedia va factoriser la version mobile de la page autour des intertitres que l'utilisateur devra déployer à la volée pour visualiser le détail des contenus, là où la version bureau déploie tous les contenus in-page sans système d'ouverture fermeture...
Le maquettage des écrans dédiés à ventilés des contenus s'établit en deux temps : conception macro puis conception micro.
La conception macro consiste à affecter des zones fonctionnelles et éditoriales à l'écran : zoning de l'interface. Le zoning de l'interface est tout à fait pertinent pour déterminer l'encombrement de l'interface dans le cadre des réajustements du design de l'information en environnement responsive. De même, un zoning fonctionnel et éditorial macro est utile pour déterminer les tableaux du gabarit éditorial.
Une fois que les tableaux ont été positionnés de façon macro sous forme de boîte générique, on procèdera au détail et à l'affinage de chaque élément fonctionnel et éditorial.
C'est la conception fonctionnelle détaillée - wireframing. Le fonctionnement et la nature de chaque module sont précisés. C'est comme augmenter la résolution d'une photo. L'utilisation de contenu fictif est à proscrire. Mieux vaut scénariser les wireframes du gabarit éditorial sur la base d'un cas d'utilisation réel. L'usage du latin est à éviter : dans le monde francophone, bien que nous soyons tous des latins, la langue d'usage est le français :). Les encombrements et les dynamiques des mots sont différents. Les maquettes latines ne sont pas recommandées. Il faut concevoir au plus proche de la réalité, y compris pour le design éditorial.
La conception de tableaux éditoriaux et fonctionnels va de pair avec la mise en place d'un balisage dans les règles des pratiques d'optimisation SEO - search engine optimization. Il s'agira de créer des modules permettant de figurer les expressions-clés en haut de la page et envisager des moyens pour scénariser l'expression-clé à travers les différents modules (répétition de l'expression-clé dans chaque tableau).
En effet, la maquette fonctionnelle gagne à établir la structure de l'écran autour des principaux éléments de structuration SEO de la page : titre H1, répétition de la description dans le chapeau, balisage par niveau de titre (H2, H3, H4, H5, H6), mise en relief (strong, em), illustration (alt et légende des images), méta datas pour les contenus très spécifiques (actualités, vidéos).
Note : en conception, il est conseillé de prévoir des champs complémentaires dans les zones de commentaires au sein des wireframes notamment pour le SEO (balise Title, balisedescription, URL de la page). En effet, les wireframes peuvent être utilisés, dans certains cas, pour l'écriture et la production éditoriale.
Pour la dimension éditoriale, la sémantisation est un autre enjeu de la conception. La diversification du champ sémantique et du champ lexical de la page est un attribut important sur le plan SEO. Bien que cette pratique s'appuie principalement sur l'écriture, elle peut être anticipée dans la maquette fonctionnelle en établissant des zones et des modules où il s'agira d'appuyer sur les expressions clés et leur diversification.
Le design de l'information et l'architecture de l'information gagnent à considérer les enjeux SEO au moment de la conception fonctionnelle et éditoriale. Cela passe par une construction de la séquence à l'écran sur la base des principales balises, en veillant à respecter les fondamentaux du référencement : éviter de diluer le jus de lien dans le maillage interne prévu par la maquette fonctionnelle, insérer des accès aux autres niveaux de l'arborescence (remonter d'un niveau, descendre d'un niveau, naviguer latéralement).
Nous concluons ces considérations autour de la conception fonctionnelle et éditoriale des gabarits de contenus en évoquant la problématique des billets de blog. C'est la plateforme Wordpress qui a remporté le plus large succès sur la publication typée Blog. Il n'est pas ici question de parler des problèmes d'architecture de l'information que posent la structure arborescente anté-chronologique, ce classement de l'information propre aux blogs tels que Wordpress (un problème d'architecture de l'information disons macro).
Or, sur le plan de la structure éditoriale, de la typologie des informations, de la construction tabulaire, voire des enjeux SEO, les modèles de page de Wordpress sont limités. Ce constat vaut également pour l'utilisation de thèmes. Les modalités d'enrichissement du texte sont restreintes, et les limites de mise en page sont énormes pour les billets de blog. Ces plateformes s'appuient certes sur les mêmes fondamentaux de structure HTML & CSS que les conceptions personnalisées et sur-mesure, néanmoins, la séquence éditoriale des billets de blog est très loin des standards sur les plans de l'ergonomie, de l'architecture de l'information, de la lisibilité, du design de l'interaction...
Si vous utilisez un thème Wordpress, vous n'avez probablement pas beaucoup de choix pour diversifier les conteneurs éditoriaux. Cela n'est pas forcément un problème critique sur le plan de la publication. Mais le nivellement de l'information sur la base de standard basique ne contribue pas améliorer notablement l'expérience de lecture et de consultation...
Avis certes discutable.
Récapitulatif de la démarche de conception de gabarits éditoriaux :
Ces travaux qui permettent de modéliser les conteneurs en fonction des contenus vont de pair avec le calibrage des contenus à la source : on calibre les contenus, et ensuite on conçoit les gabarits éditoriaux qui vont accueillir ces contenus...
On parle bien de conception et cette scénarisation éditoriale relève du wireframing ux design.
Une fois les gabarits conçus, on s'appuiera sur les spécifications générales pour décrire le comportement dynamique des écrans :
Par extension, le travail de design éditorial et fonctionnel peut déboucher sur la rédaction d'une charte éditoriale fixant les règles en matière d'écriture des contenus pour le web.
APPROFONDIR
les gabarits
Wireframes à télécharger :
Etudes de cas à lire :
Travaux à visualiser :
Supports de cours (débutant) à étudier :
Compétences métier pour la conception des gabarits éditoriaux :
Fiche métier :
Livres à bouquiner :