L'expérience de création comparée

Les éditeurs de blocs améliorent l'expérience de l'utilisateur pour ceux qui créent et publient du contenu. A quoi pourraient ressembler les futurs éditeurs? Comparons la nouvelle expérience de création de WordPress à celle d’AEM.

Merci, WordPress et Gutenberg, d'avoir fait de l'édition par blocs la norme pour la création de pages Web. Dans cet article, je vais comparer la nouvelle expérience de création de WordPress à celle d’Adobe Experience Manager (AEM), un système de gestion de contenu d’entreprise qui inclut également l’édition par blocs. J'ai mis en œuvre WordPress et AEM pour plusieurs sociétés (telles que Informatica et Twitter) et je devais 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.

Note : Par «expérience de création», je veux parler de 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 utiliser le contenu publié. Si vous n'avez pas pensé à l'expérience de création auparavant, voici un guide écrit par Eileen Webb également présenté dans dans Smashing Book 5 .

Adobe Experience Manager est, Comparé à WordPress, un système complexe avec une courbe d'apprentissage abrupte, en particulier pour les développeurs. En même temps, AEM est plus facile à utiliser que des solutions de gestion de contenu mieux établies et plus onéreuses, ce qui la situe entre des solutions gratuites et très coûteuses.

D'un point de vue technique, AEM est un conglomérat de technologies à code source ouvert comportant plusieurs touches. d’Adobe, plaçant AEM entre le logiciel propriétaire et le logiciel libre. Ce sont ces petites touches d'Adobe qui rendent le système brillant et utilisable. Par exemple, un constructeur visuel de pages par glisser-déposer a été le moyen standard de créer des pages dans AEM, bien avant la création de WordPress Gutenberg.

Jetons un coup d'œil à certaines des caractéristiques qui améliorent l'expérience de création au-dessus de la moyenne. [19659010] Notre nouveau livre, dans lequel Alla Kholmatova explore
              comment créer des systèmes de conception efficaces et maintenables pour concevoir d'excellents produits numériques. Meet Design Systems avec les pièges communs, les pièges et les leçons que Alla a apprises au fil des ans.
          

Table des matières →
          

Composants (blocs)

L'une des idées les plus significatives pour les sites Web est le concept de composant (ou bloc dans WordPress). Un composant représente un élément de contenu qui suit des règles spécifiques au lieu d'être une goutte de n'importe quoi. Par exemple, vous pouvez avoir un composant vidéo dans lequel l'auteur peut uniquement coller un lien Youtube et contrôler les paramètres spécifiques à Youtube. Ou vous pouvez avoir un composant devis où l'auteur ajoute un devis à un champ de texte et le nom de la personne citée dans un autre champ de texte. Vous pouvez même avoir un composant de présentation qui contient d'autres composants et les affiche l'un en dessous de l'autre 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é. Les avantages à long terme et les nouvelles possibilités qui ne seraient pas réalisables pour l’approche «un seul champ de texte qui convient à tous les contenus» à l’école, qui prévalaient au cours des dernières décennies sont tout aussi importants:

• 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, ce qui permet à l'auteur de choisir plus facilement une date au bon format
• Si un concepteur souhaite que le nom d'une personne citée soit affiché au-dessus du guillemet au lieu d’être 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 une citation doit être traduite 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, 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 manque d'une transcription et empêche donc les utilisateurs sourds de la consommer, le composant peut être complété par un résumé qui rend la vidéo plus accessible aux utilisateurs sourds.

Les utilisateurs d'AEM ont depuis longtemps adopté le montage par composant et, en raison de l'arrivée de Gutenberg dans WordPress 5.0, les éditeurs de composants sont maintenant la norme de facto pour la création de pages Web.

Remarque : Leonardo Losoviz approfondit les implications des blocs dans le contexte de WordPress.

Fragments

Les fragments de contenu et de fragments d'expérience sont de nouveaux termes qui dominent la scène des MAE depuis un an. Je vais résumer ces deux concepts simplement en tant que fragments . Les fragments permettent essentiellement aux auteurs de créer un contenu neutre pouvant être utilisé sur le Web, les mobiles, 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 explicites quant à la manière dont leurs données va être utilisé. Imaginons un fragment intitulé «Citation du jour» que les auteurs mettent à jour une fois par jour avec une nouvelle citation. Le texte cité de ce fragment peut maintenant être utilisé à divers endroits:

• Un widget de pied de page affiche la citation du jour au 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 que va être affiché alors que le widget pied de page détermine comment la citation va être affichée.
• Un composant de citation permet aux auteurs d'importer une citation du passé " Citations du jour ”et ajoutez-le à l'article du blog.
• Un plugin ajoute un bouton“ Partager le devis du jour ”à la page d'accueil. Chaque fois que quelqu'un clique sur ce bouton, le plug-in prend la citation du jour et le formate afin de respecter les meilleures pratiques de partage via Facebook, Twitter et par courrier électronique.

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 convient à celui-ci. 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 paraître très différent du précédent.

Je m'attends à ce que les fragments soient plus largement utilisés. , même si le concept a des noms différents selon les systèmes. En effet, Matt Mullenweg a déjà annoncé que son équipe se concentrait actuellement sur “l'extension de l'interface des blocs à d'autres aspects de la gestion de contenu [including the creation of]un menu de navigation [and] portant tous les widgets sur des blocs.” [19659035] Modèles de page

Les modèles de page 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, à une position fixe, tout en définissant des zones flexibles dans lesquelles les composants peuvent être ajoutés page par page.

Un aspect important de cette situation est qu'une zone aussi flexible peut limiter les composants pouvant y entrer. Ainsi, vous pouvez créer des modèles de page à différentes fins:

• Modèle 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 titre mais ne peut pas le supprimer. L’auteur peut déposer des éléments de texte, d’image et vidéo dans la zone de contenu.
• Modèle 2: Modèle de page de renvoi
  Seuls le logo et un élément de titre en haut de la page sont corrigés. L’auteur peut choisir parmi un ensemble de composants spécifiques à la page de destination optimisés pour la conversion de visiteurs en clients.

Autorisations et flux de travail

Il est peu probable que tous les auteurs d’une grande équipe puissent modifier des modèles critiques tels que le modèle. modèle de page d'article. Pour éviter que des personnes ne soient en mesure de 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 flux de travail. Ce concept n’est ni nouveau ni particulier, 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 le contenu sur un site intermédiaire privé avant de le publier sur le site de production public. Le processus de publication de contenu en transfert, suivi de publication de contenu en production, peut être appelé flux de travail. Un autre type de flux de travaux courant est que le contenu doit passer par un processus d'approbation avant de pouvoir être publié sur le site de production et que seules certaines personnes peuvent appuyer sur le bouton «Publier en production».

Source de l'image ) ( Grand aperçu )

Les autorisations et les flux de travaux sont des fonctionnalités négligeables pour les petites équipes. Cependant, à mesure que l'équipe grandit, ces fonctionnalités deviennent essentielles à la productivité et au succès de l'équipe. Bien qu'AEM vienne avec les bases de la création de flux de travail et que les développeurs puissent le faire fonctionner pour tout besoin spécifique, il nécessite quelques modifications de code et n'est pas implémenté en un clin d'oeil. C'est encore plus vrai pour WordPress. Il serait intéressant de disposer d'un outil convivial pour la création de flux de travaux personnalisés.

Modes d'édition

Dans AEM, les auteurs peuvent rapidement modifier et afficher chaque page selon différents modes. L'auteur bascule entre les modes en fonction du travail à effectuer:

• Pour organiser les composants et modifier leur contenu, choisissez le mode Éditer .
• Pour modifier le mode d'organisation des composants sur un iPad, choisissez Mode Layout .
• Pour afficher le contenu comme si vous étiez un visiteur, choisissez le mode Preview .

Quelques modes supplémentaires apparaissent en fonction de la configuration du site. Un scénario idéal consiste à configurer les tests A / B et la personnalisation 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 du visiteur, de son âge, de la page de renvoi, de l'heure du jour, etc.

Les intégrations dans AEM sont comparables à des plugins dans WordPress. à 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 ont à dire. ?

Mis à part la complexité du développement et l'argent, les conséquences d'un tel effort peuvent donner lieu à une superbe expérience de création. Le concept des modes d'édition montre comment un simple menu déroulant offre aux auteurs la possibilité d'effectuer une série de tâches tout en restant sur une seule page.

Visual Single-Page Editor

Si vous regardez les captures d'écran de cet article, vous devez ont réalisé 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 immédiatement visible et l'auteur n'a pas à ouvrir d'aperçu dans une nouvelle fenêtre. Tout à fait 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 meilleure pratique pour l'édition visuelle. Permettez-moi d'aller un peu plus loin et de demander: qu'arrivera-t-il si vous associez des éditeurs visuels à des applications à page unique (SPA)?

Les SPA sont des sites Web pour lesquels la navigation d'une page à l'autre est homogène, car le navigateur n'a pas à recharger. la page entière. Certains sites Web populaires tels que Gmail et Facebook sont des SPA, mais la plupart des sites Internet ne le sont pas. Une des raisons pour lesquelles le taux d'adoption est plutôt faible est qu'il est difficile de créer des SPA et qu'il est encore plus difficile de gérer des SPA de milliers de pages. Il existe actuellement deux moyens principaux de gérer le contenu dans les SPA:

• Le contenu d'un site est mis à jour en mettant à jour le code.
• Le contenu est géré dans un CMS dissocié 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 est déjà un défi technique difficile. Avoir un éditeur visuel qui fonctionne avec un SPA est presque inouï. L’équipe d’Adobe s’efforce de prendre en charge les SPA dans AEM tout en essayant de ne compromettre aucun des avantages de leur système existant. Même si de premières versions prometteuses ont été publiées dans la communauté AEM en 2018, il reste encore beaucoup de travail à faire.

Résumé

Adobe Experience Manager est fourni avec plusieurs fonctionnalités utiles déjà intégrées dans les projets open source populaires. AEM n’a pas nécessairement inventé les concepts mis en exergue dans cet article, mais c’est certainement l’un des systèmes les plus conviviaux du marché pour les rédacteurs.

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 travaux est au moins partiellement implémenté dans WordPress et est important pour les équipes composées de nombreux auteurs proposant du contenu sur plusieurs canaux.

L'expérience de création peut être encore améliorée à l'aide d'un éditeur visuel avec édition modes et 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, cette expérience améliorée en valait peut-être la chandelle et l'ajoutera éventuellement à WordPress.

Pour en savoir plus

il)