Adobe Experience Manager vs WordPress : l'expérience de création comparée

Merci, WordPress et Gutenberg, d'avoir fait de l'édition basée sur les blocs la norme pour la création de pages Web. Dans cet article, je vais comparer la nouvelle expérience de création dans WordPress avec l'expérience d'Adobe Experience Manager (AEM), un système de gestion de contenu d'entreprise qui englobe également l'édition par blocs. J'ai implémenté WordPress et AEM pour plusieurs entreprises (telles qu'Informatica et Twitter) et j'ai dû réaliser que même si l'expérience de création est essentielle pour les auteurs non techniques, elle est souvent négligée par les développeurs.

Remarque : Avec le terme « expérience de création », je fais référence à l'expérience utilisateur pour les personnes dont le but est de créer et de publier du contenu sur un site Web. Je ne parle pas des personnes qui vont consommer le contenu publié. Si vous n'avez jamais pensé à l'expérience d'auteur auparavant, voici une introduction d'Eileen Webb qui a également été présentée dans Smashing Book 5.

Adobe Experience Manager est, par rapport à WordPress, un système complexe avec une courbe d'apprentissage abrupte, en particulier pour les développeurs. Dans le même temps, AEM est plus facile à utiliser que les solutions de gestion de contenu plus établies et plus chères, plaçant AEM quelque part entre des solutions gratuites et très coûteuses.

D'un point de vue technique, AEM est un conglomérat de technologies open source avec plusieurs touches d'Adobe, plaçant AEM quelque part entre les logiciels open source et propriétaires. Ce sont ces touches d'Adobe qui rendent le système brillant et utilisable. Par exemple, un constructeur visuel de pages par glisser-déposer était le moyen standard de créer des pages dans AEM, bien avant la naissance de WordPress Gutenberg.

Jetons un coup d'œil à certaines des fonctionnalités qui élèvent l'expérience de création au-dessus de la moyenne.

Composants (Blocs)

L'une des idées les plus importantes pour les sites Web est le concept de composant (ou de bloc dans le jargon WordPress). Un composant représente un élément de contenu qui suit des règles spécifiques au lieu d'être un blob de quoi que ce soit. Par exemple, vous pouvez avoir un composant vidéo où l'auteur peut uniquement coller un lien Youtube et contrôler les paramètres spécifiques à Youtube. Ou vous pouvez avoir un composant de citation où l'auteur ajoute une citation à un champ de texte et le nom de la personne citée à un autre champ de texte. Vous pouvez même avoir un composant de mise en page qui contient d'autres composants et les affiche les uns sous les autres sur un appareil mobile, alors que sur un grand écran, ces composants sont répartis sur trois colonnes.

Un auteur sait exactement à quoi s'attendre d'un composant spécifique et peut facilement le remplir avec le contenu approprié. Tout aussi importants sont les avantages à long terme et les nouvelles opportunités qui ne seraient pas réalisables avec l'ancienne approche « un champ de texte pour tout le contenu » qui a prévalu au cours des dernières décennies :

• Si un composant nécessite une entrée de date, la boîte de dialogue de création de composant peut afficher un sélecteur de date au lieu d'un champ de texte brut, ce qui permet à l'auteur de choisir plus facilement une date avec le bon format.
• Si un concepteur souhaite que le nom d'une personne citée s'affiche au-dessus de la citation plutôt qu'en dessous de la citation, le développeur peut facilement réorganiser le code car la citation et le nom sont stockés séparément. Si la citation et le nom étaient stockés à l'ancienne, le développeur devrait extraire manuellement le nom du blob de texte et le déplacer devant la citation.
• Si un devis doit être traduit de l'anglais vers l'allemand, le devis peut être soumis à un service de traduction. Si le service de traduction a déjà traduit cette citation auparavant, il peut renvoyer la traduction enregistrée. Si la citation faisait partie d'un paragraphe plus long au lieu d'être autonome, la traduction serait beaucoup plus difficile et nécessiterait probablement un traducteur humain.
• Si une vidéo n'a pas de transcription et empêche donc les utilisateurs sourds de la consommer, le composant peut être complété par un texte de synthèse qui rend la vidéo plus accessible aux utilisateurs sourds.

L'édition basée sur les composants est déjà adoptée par les utilisateurs d'AEM depuis un certain temps, et en raison de l'arrivée de Gutenberg dans WordPress 5.0, les éditeurs basés sur les composants sont désormais la norme de facto pour la création de pages Web.

Note : Leonardo Losoviz plonge plus profondément dans les implications des blocs dans le contexte de WordPress.

fragments

Les fragments de contenu et les fragments d'expérience sont de nouveaux termes qui dominent la scène AEM depuis un an. Je vais résumer ces deux concepts simplement comme des fragments . Essentiellement, les fragments permettent aux auteurs de créer un contenu neutre qui peut être utilisé sur le Web, le mobile, les médias sociaux et d'autres canaux.

Les fragments sont créés en dehors d'un éditeur de page et sont, par rapport à un composant, moins opiniâtres quant à la manière dont leurs données vont être utilisées. Imaginons un fragment appelé "Citation du jour" que les auteurs mettent à jour une fois par jour avec une nouvelle citation. Maintenant, le texte cité de ce fragment peut être utilisé dans une variété d'endroits :

• Un widget de pied de page affiche la citation du jour en bas de chaque page. Dès qu'un auteur met à jour le fragment, le pied de page est également mis à jour. Le fragment détermine ce qui va être affiché tandis que le widget de pied de page détermine comment la citation va être affichée.
• Un composant de citation permet aux auteurs d'importer une citation d'anciennes "Citations du jour" et de l'ajouter à l'article de blog.
• Un plugin ajoute un bouton "Partager la citation du jour" sur la page d'accueil. Chaque fois que quelqu'un clique sur ce bouton, le plugin prend la citation du jour et la formate pour répondre aux meilleures pratiques de partage via Facebook, Twitter et e-mail.

Dans WordPress, les widgets et les menus ressemblent à des fragments : les auteurs créent des éléments de menu dans une interface neutre, puis les développeurs affichent ces éléments dans le cadre du thème d'une manière qui a du sens pour le thème. Si le thème est remplacé par un nouveau thème, ces éléments de menu persistent et peuvent également être affichés dans le nouveau thème, même si le nouveau thème peut sembler très différent du précédent.

Je m'attends à ce que les fragments deviennent plus largement utilisés, même si le concept a des noms différents dans différents systèmes. En effet, Matt Mullenweg a déjà annoncé que son équipe se concentre actuellement sur "l'extension de l'interface de bloc à d'autres aspects de la gestion de contenu [y compris la création de] un bloc de menu de navigation [et] le portage de tous les widgets sur des blocs".

Modèles de pages

Les modèles de pages peuvent être décrits comme des composants de niveau supérieur car ils incluent plusieurs autres composants. Dans AEM, les auteurs peuvent créer des modèles qui verrouillent des composants tels qu'un composant d'en-tête dans une position fixe tout en définissant des zones flexibles où les composants peuvent être ajoutés page par page.

Un aspect important de ceci est qu'une telle zone flexible peut limiter les composants qui peuvent y entrer. De cette façon, vous pouvez créer des modèles de page à différentes fins :

• Modèle n° 1 : modèle de page d'article
  L'en-tête, le titre, la zone de contenu et le pied de page sont fixes. L'auteur peut mettre à jour le composant de titre mais ne peut pas le supprimer. L'auteur peut déposer des composants texte, image et vidéo dans la zone de contenu.
• Modèle n° 2 : modèle de page de destination
  Seuls un logo et un élément de titre en haut de la page sont fixes. L'auteur peut choisir parmi un ensemble de composants spécifiques à la page de destination qui sont optimisés pour convertir les visiteurs en clients.

Autorisations et flux de travail

Il est peu probable que chaque auteur d'une grande équipe puisse modifier des modèles critiques tels que le modèle de page d'article. Afin d'éviter que des personnes ne puissent casser accidentellement et irrévocablement le site, il est important de définir qui peut modifier quelle partie du site. Bienvenue dans le concept des autorisations et des workflows. Ce concept n'est ni nouveau ni spécial, mais il est important pour les grandes équipes.

Un site AEM typique comprend le site Web de production proprement dit et au moins un site de type production, appelé staging . Les auteurs peuvent publier du contenu sur un site de développement privé avant de le publier sur le site de production public. Le processus de publication de contenu vers la mise en scène suivi de la publication de contenu vers la production peut être appelé un flux de travail. Un autre type de flux de travail courant est que le contenu doit passer par un processus d'approbation avant de pouvoir être publié sur le site de production, et seules certaines personnes peuvent appuyer sur le bouton "publier en production".

Les autorisations et les workflows sont des fonctionnalités négligeables dans les petites équipes. Cependant, à mesure qu'une équipe grandit, ces fonctionnalités deviennent essentielles pour la productivité et le succès de l'équipe. Bien qu'AEM fournisse les bases pour créer des flux de travail et que les développeurs puissent faire fonctionner AEM pour n'importe quel besoin spécifique, il nécessite de nombreuses modifications de code et n'est pas implémenté en un claquement de doigt. C'est encore plus vrai pour WordPress. Ce serait bien d'avoir un outil convivial pour créer des flux de travail personnalisés.

Modes d'édition

Dans AEM, les auteurs peuvent rapidement modifier et afficher chaque page dans différents modes. L'auteur passe d'un mode à l'autre en fonction de la tâche à accomplir :

• Pour organiser les composants et modifier leur contenu, choisissez le mode Édition .
• Pour modifier la disposition des composants sur un iPad, choisissez le mode Disposition .
• Pour voir le contenu comme si vous étiez un visiteur, choisissez le mode Aperçu .

Il existe quelques autres modes qui s'affichent en fonction de la configuration du site. Un scénario idéal est que les tests A/B et la personnalisation soient configurés en intégrant AEM à Adobe Target. En utilisant le mode Ciblage , les auteurs peuvent définir quand afficher certains composants en fonction de l'emplacement, de l'âge, de la page de référence, de l'heure de la journée, etc.

Les intégrations dans AEM sont comparables aux plugins dans WordPress, mais à la différence que les intégrations AEM sont plus complexes et généralement personnalisées. En particulier, l'intégration d'AEM Target peut être plus pénible que ce que les vendeurs le disent.

En mettant de côté la complexité du développement et l'argent, la conséquence d'un tel effort peut se traduire par une superbe expérience de création. Le concept des modes d'édition montre comment une simple liste déroulante crée une opportunité pour les auteurs d'effectuer une gamme de travaux tout en restant sur une seule page.

Éditeur visuel d'une seule page

En regardant les captures d'écran de cet article, vous avez dû vous rendre compte que l'éditeur de page d'AEM n'est pas seulement basé sur des composants, mais également visuel : si un composant est mis à jour, la modification devient visible immédiatement et l'auteur n'a pas besoin d'ouvrir un aperçu dans un nouvelle fenetre. Toute une fonctionnalité. Même si les constructeurs de pages sont omniprésents dans l'écosystème WordPress, l'équipe derrière WordPress n'a pas encore défini de bonne pratique pour l'édition visuelle. Permettez-moi d'aller un peu plus loin et de vous demander : que se passe-t-il si vous associez des éditeurs visuels à des applications monopage (SPA) ?

Les SPA sont des sites Web où la navigation d'une page à l'autre semble transparente car le navigateur n'a pas à recharger toute la page. Certains sites Web populaires tels que Gmail et Facebook sont des SPA, mais la plupart des sites Internet ne le sont pas. L'une des raisons de l'adoption plutôt faible est que la création de SPA est difficile, et la maintenance de SPA avec des milliers de pages est encore plus difficile. Il existe actuellement deux manières principales de gérer le contenu dans les SPA :

• Le contenu d'un site est mis à jour en mettant à jour le code. Ce n'est évidemment pas convivial pour la création.
• Le contenu est géré dans un CMS qui est découplé de la partie du site Web destinée aux visiteurs. Le contenu du CMS est consommé via une API, par exemple par une application React. L'interface de création est différente du site assemblé que le visiteur verra.

La mise en place d'un éditeur visuel et d'un SPA chacun en soi est déjà un défi technique difficile. Avoir un éditeur visuel qui fonctionne avec un SPA est presque inconnu. L'équipe d'Adobe travaille sur la prise en charge des SPA dans AEM tout en essayant de ne compromettre aucun des avantages de leur système existant. Même si des premières versions prometteuses ont été publiées dans la communauté AEM en 2018, il reste encore beaucoup de travail à faire.

Sommaire

Adobe Experience Manager est livré avec plusieurs fonctionnalités utiles qui ont déjà fait ou feront leur chemin dans des projets open source populaires. AEM n'a pas nécessairement inventé les concepts mis en évidence dans cet article, mais il commercialise certainement l'un des systèmes les plus conviviaux pour la création sur le marché.

Le concept de composants est devenu courant avec l'introduction de blocs dans WordPress. Le concept de fragments, de modèles de page, d'autorisations et de flux de travail est au moins partiellement implémenté dans WordPress et est important pour les équipes composées de nombreux auteurs qui diffusent du contenu sur plusieurs canaux.

L'expérience de création peut être encore améliorée à l'aide d'un éditeur visuel avec des modes d'édition et la prise en charge des applications d'une seule page. Un tel éditeur est difficile à mettre en œuvre, mais comme l'indiquent les efforts d'Adobe, l'expérience améliorée pourrait en valoir la peine et finir par être également intégrée à WordPress.

Lectures complémentaires

• "Construire une meilleure expérience de création", Eileen Webb
• « Création : l'environnement et les outils », Centre d'aide d'Adobe
• "Concevoir un système de gestion de contenu Web convivial", Christopher Hallahan
• "Expérience de création", Rick Yagodich