Conception Web CMS : un guide pour les applications de contenu dynamique

Techniques UI/UX pour le monde dynamique des médias en ligne axé sur le contenu.

Une grande majorité des applications Web et des applications mobiles, en particulier dans l'espace multimédia en ligne, sont alimentées par des systèmes de gestion de contenu (CMS) tels que WordPress, Drupal et autres. Ces systèmes ont vu le jour pour répondre aux besoins d'une ère Internet où le contenu est roi et dynamique, changeant continuellement et fréquemment.

Dans le passé, la plupart des sites Web étaient statiques et non conçus pour évoluer et se développer de manière transparente. Désormais, ils sont considérés comme des systèmes vivants et il existe une manière optimale de les concevoir.

Ce qui suit est un guide pour les concepteurs numériques qui cherchent à élargir leur répertoire au-delà des sites Web statiques et des pages de destination, et à commencer à concevoir efficacement pour des applications dynamiques axées sur le contenu telles que les sites d'actualités, les blogs ou même les réseaux sociaux où les utilisateurs publient régulièrement du contenu. Afin d'effectuer cette transition, les concepteurs devront comprendre comment ces types d'applications sont généralement structurés et adopter un état d'esprit «contenu d'abord» dans le processus de conception.

CMS Web Design IA Patterns dans les applications pilotées par CMS

Les concepteurs doivent avoir un modèle mental des modèles d'architecture d'informations communs dans une application pilotée par CMS, en particulier s'ils travaillent sur l'UX (expérience utilisateur) et le conçoivent à partir de zéro. Il existe plusieurs types de pages qui sont communs et font partie intégrante de ces applications, et ils se connectent souvent ensemble de manière prévisible où la « publication » fonctionne comme le composant principal. Il n'y a généralement pas de limite théorique au nombre de posts que peut contenir une candidature.

Page de garde

Il s'agit du point d'entrée formel et est souvent synonyme de page d'accueil. C'est très courant, surtout lorsqu'il y a beaucoup de contenu auquel accéder, car cela aide à mettre en évidence ou à présenter ce qui est le plus important. Cette page affiche généralement des versions abrégées des messages sans révéler trop de détails.

Publier une page

Si la "publication" est l'unité centrale d'une application pilotée par CMS, la page de publication est l'endroit où tous les détails publics d'une publication sont affichés. Il s'agit probablement de la seule page vraiment critique de l'application, et il peut s'agir d'une page d'article ou d'une page d'information sur un événement particulier, une personne, un groupe, un produit, etc. Dans certaines applications plus importantes, il peut y avoir plusieurs types de messages et de messages. pages désignées.

Page Liste/Catégorie

Ce type de page est utile pour permettre aux utilisateurs de parcourir tous les messages disponibles et de les filtrer par catégorie, attributs ou autres critères. Une option de tri est également courante lorsque la quantité de contenu à faire défiler est importante.

Page de recherche

Une page dédiée à la recherche n'est pas essentielle pour les petites applications, mais est toujours utile. Parfois, il peut être fusionné ou intégré à la page de catégorie/liste.

Profil utilisateur/auteur

Cette page est dédiée à chaque auteur ou utilisateur qui crée un ou plusieurs articles. Il est parfois abandonné sur les petits sites d'actualités et les blogs à auteur unique, mais il est essentiel pour les grands sites d'actualités multi-auteurs, les réseaux sociaux axés sur le contenu et d'autres applications générées par les utilisateurs. Une pratique courante et utile consiste à inclure une liste de tous les messages de l'utilisateur sur cette page.

Accueil ou tableau de bord de l'utilisateur

Cette page affiche des informations (y compris des publications) pertinentes pour l'utilisateur connecté, souvent sous la forme d'un fil d'actualité personnel ou d'un contenu recommandé, d'une activité récente et de statuts. L'accueil de l'utilisateur est essentiel pour les applications fermées et les applications de réseaux sociaux, mais facultatif ou non pertinent pour les autres.

Conception d'interface utilisateur axée sur le contenu pour le contenu dynamique

Le contenu précède la conception. Le design sans contenu n'est pas du design, c'est de la décoration. –Jeffrey Zeldman

Lorsqu'il est temps de concevoir l'interface utilisateur d'une application pilotée par CMS, il est important de se rappeler que le contenu détermine toujours la conception, et non l'inverse. Une approche axée sur le contenu a été adoptée par de plus en plus d'entreprises de médias ces dernières années avec des résultats prouvés. Dans cet esprit, voici une liste de recommandations que les concepteurs d'interface utilisateur doivent garder à l'esprit lorsqu'ils se mouillent les pieds dans ce type de projets.

Considérez le contenu avant de définir un style

Dans une application axée sur le contenu, le style visuel doit prendre en charge le contenu dans son ensemble. Bien que la nature de ces types d'applications implique généralement que le contenu sera variable et pas entièrement prévisible, le plus souvent, il s'intégrera dans un thème général. Ainsi, lors du développement de l'esthétique de la marque, le contenu réel peut être une grande source d'inspiration. Dans le même temps, cela peut également être un handicap si le concepteur s'attache trop à des éléments de contenu spécifiques et développe un style trop ciblé.

apprenez à savoir qui créera le contenu sur une base régulière.

Dans une application pilotée par CMS, le contenu est largement déterminé par les créateurs de contenu, et non par les concepteurs. Par conséquent, on s'attend généralement à ce que le concepteur cède une partie du contrôle de l'apparence du produit aux personnes qui publient régulièrement du contenu, à savoir des éditeurs, des auteurs, des administrateurs ou même des utilisateurs aléatoires qui saisissent du contenu via des formulaires publics.

En fonction du processus convenu, le concepteur peut définir des normes et des directives pour choisir les images, les préparer et les recadrer, et même définir certains paramètres sur le style du texte. Cependant, dans l'ensemble, il est de la responsabilité du concepteur de façonner le front-end de l'application de manière à ce qu'un travail médiocre de la part du créateur de contenu, comme une mauvaise photo ou un titre très long, ne diminue pas la qualité. de la conception à un degré significatif.

Concevez avec du contenu réel dans la mesure du possible.

Étant donné que le type de contenu peut varier considérablement dans une application pilotée par CMS, il est logique de passer du temps à en examiner un large échantillon. Idéalement, dans le cas d'un site d'actualités ou d'un blog, le concepteur collaborerait avec les créateurs de contenu au tout début du processus de conception et demanderait des exemples d'histoires, des images de produits, des vidéos ou toute autre chose pouvant aider à rendre les maquettes de conception aussi réelles. que possible.

Concevoir avec du contenu réel est préférable à l'utilisation de photos d'archives et de texte factice et peut même être fait en parallèle avec le wireframing ou le prototypage, car cela permet de limiter les surprises qui pourraient survenir.

Il n'est pas rare qu'un design soit époustouflant lorsqu'un designer le remplit d'images soigneusement présélectionnées ou photoshoppées et de titres parfaitement adaptés, puis le voit sombrer dans le marasme une fois qu'il est en production.

Ne soyez pas trop précis avec le style.

Lorsque vous définissez un style visuel, ne classez pas le contenu en ne reflétant qu'une seule ambiance, genre, histoire ou sujet. Au lieu de cela, restez simple et universel en ce qui concerne toute la gamme de tons qui pourraient entrer en jeu dans le contenu.

Un aspect et une convivialité très spécifiques sont parfois acceptables pour une application qui s'adresse à un public de niche, mais peuvent souvent sembler obsolètes et manquant d'attrait pour le grand public sur le marché actuel. En outre, cela peut potentiellement limiter les perspectives de croissance et d'expansion vers de nouveaux marchés verticaux à l'avenir.

Pour s'assurer qu'une conception fonctionne pour un large éventail de contenus, il est généralement judicieux de la tester en simulant une ou deux versions supplémentaires de la même page avec un sujet nettement différent toujours dans la gamme thématique de ce qui est publiable.

Concevez chaque page comme un modèle pour varier le contenu

Considérez chaque type de page de l'application comme un modèle ou un plan pour divers éléments multimédias (images, widgets, vidéos, blocs de texte, etc.) à remplir, et sachez quels éléments seront sujets à changement et lesquels peuvent rester fixes .

Établissez un ensemble clair de règles et de cohérences.

Ce n'est pas parce que le contenu peut varier considérablement d'une page à l'autre qu'il ne devrait pas y avoir un ensemble cohérent de formats dans lesquels le contenu est présenté.

Garder les en-têtes et les tailles d'image prévisibles et observer une hiérarchie logique des informations de haut en bas dans une page présente de nombreux avantages, l'un étant que cela crée un sentiment d'harmonie dans toute l'application et maintient l'utilisateur correctement orienté.

Pour y parvenir plus facilement, développez un ensemble modulaire et réutilisable de composants de style pour autant de parties de l'interface que possible, y compris les en-têtes, les séparateurs, les boutons, les widgets et d'autres éléments dans un programme de conception. Utilisez ces composants à plusieurs reprises et dans un schéma logique, en minimisant les variations. Cet article de Toptal Designer Wojciech Dobry présente un joli guide pour créer une bibliothèque d'interface utilisateur dans Sketch.

NE PAS donner de traitements de conception individualisés aux messages.

Essayez d'éviter de donner aux articles d'une même section d'une page trop de différences de style et de format. Cela inclut la modification des dimensions de l'image, l'ajout de dispositions de texte ou de polices spéciales, ou le gonflement d'images individuelles avec des ornements ou des graphiques personnalisés. Cela a non seulement tendance à tuer l'harmonie visuelle, mais constitue généralement un gaspillage de ressources et un frein aux performances et à la maintenance du point de vue du développeur ou du gestionnaire de contenu.

NE présumez PAS que le contenu tiendra toujours dans une zone désignée.

L'un des résultats inévitables de la nature dynamique d'une application pilotée par un CMS est que la quantité de texte qui apparaît dans une zone d'affichage donnée peut varier en longueur. Souvent, des limites de caractères peuvent être placées sur le texte dans le CMS pour garder les choses raisonnables, mais le concepteur ne doit jamais supposer aveuglément qu'un bloc de texte tiendra toujours sur un certain nombre de lignes.

Non seulement la largeur des caractères individuels varie, mais il n'est pas non plus habituel de restreindre fortement la créativité des écrivains en imposant une limite de caractères très faible. C'est pourquoi il est toujours bon de tester une conception avec un contenu réel, comme indiqué ci-dessus, et de vérifier chaque zone avec différents échantillons de texte.

Pour être sûr du pire des cas, insérez temporairement une séquence de caractères alphabétiques larges (comme "w" si le contenu est en anglais) jusqu'à ce qu'une limite de caractères convenue soit atteinte.

Laissez le contenu se démarquer

Dans une application axée sur le contenu, le contenu doit être placé au premier plan à tout moment, et les éléments stylistiques de la marque doivent généralement s'effacer.

Entourez le contenu dynamique avec des couleurs d'arrière-plan nettes, claires et neutres.

Le blanc ou le blanc cassé est généralement préférable. Cela permet à de nombreux types d'images, claires et sombres, de sortir de la page sans être éclipsées.

Faites des images grandes et imposantes.

Les grandes images, en particulier les photos, attirent l'attention du visiteur plus efficacement que toute autre chose.

Gardez les titres et le corps du texte grands et très lisibles.

Pour les pages contenant beaucoup de texte, choisissez des polices Web très lisibles et déployez-les dans une grande taille confortable sur tous les appareils (ordinateurs de bureau, mobiles et tablettes).

NE PAS sur-concevoir.

Souvent, les concepteurs numériques et imprimés aiment déployer des embellissements créatifs ou donner libre cours aux éléments de marque dans leurs conceptions. En général, si certains effets visuels peuvent parfois améliorer une conception axée sur le contenu, ils peuvent aussi facilement détourner l'attention du contenu, ce qui intéresse vraiment les utilisateurs lorsqu'ils visitent un site d'actualités ou un blog.

De tels effets peuvent également rendre l'apparence de l'application moins prévisible lorsque les images changent. Il est généralement recommandé de vérifier les polices décoratives, les motifs en gras, les illustrations, les images qui se chevauchent, les images semi-transparentes et les cadres fantaisistes autour des images. Enfin, gardez le logo relativement petit par rapport au contenu présenté.

N'UTILISEZ PAS d'arrière-plans colorés à proximité d'images dynamiques.

Les couleurs vives et vives sont à la mode en ce moment, mais il est généralement préférable d'éviter d'appliquer de grandes quantités de couleurs saturées ou un arrière-plan coloré autour d'images susceptibles de changer, car cela peut donner des résultats imprévisibles, notamment des conflits de couleurs et une stimulation excessive. distraire du contenu.

N'UTILISEZ PAS d'arrière-plans sombres pour couvrir des pages entières de texte.

Des études montrent que le texte clair sur un fond sombre est plus stressant pour les yeux que le texte sombre sur un fond clair dans les applications à fort contenu. Un fond sombre peut bien fonctionner pour une section spéciale d'une page ou une zone de diaporama où il y a une quantité limitée de texte, mais n'est pas bien adapté pour couvrir de longs blocs de texte.

Comprendre comment les images et autres médias fonctionnent sur le back-end

Les systèmes de gestion de contenu peuvent varier dans la façon dont ils gèrent les médias, tels que les images, les vidéos et les fichiers d'animation, et parfois un développeur définira délibérément des contraintes sur les médias à des fins d'efficacité.

Par exemple, il peut y avoir des limitations sur la façon dont les images sont mises à l'échelle et recadrées et sur le nombre de tailles et de recadrages qui peuvent être générés et affichés. Ainsi, il est important de consulter le développeur de l'application ou les gestionnaires de contenu pour déterminer ce qui est pratique (et dans quoi ils sont prêts à investir des ressources de développement supplémentaires) avant d'aller de l'avant avec une conception.

Renseignez-vous sur les formats de médias pris en charge.

Bien qu'il soit généralement acquis qu'une application prend en charge les images, il est judicieux de consulter les gestionnaires de contenu pour savoir quels types de fichiers vidéo, audio et autres fichiers multimédias peuvent être stockés et affichés et dans quelle mesure ils peuvent être personnalisés visuellement.

Par exemple, il est utile de savoir si un lecteur vidéo personnalisé sera créé ou si l'intégration d'une vidéo YouTube ou Vimeo sur une page est la seule option. Dans le cas de YouTube, il existe des normes et des limites spécifiques quant à la manière dont les vidéos peuvent être intégrées, mises à l'échelle et skinnées.

NE désignez PAS de nombreuses cultures et tailles différentes pour les images.

Bien qu'il soit souvent techniquement possible de créer un grand nombre de recadrages séparés pour une image, cela a généralement un impact négatif. Par exemple, par défaut, le CMS WordPress génère automatiquement plusieurs tailles d'une image téléchargée dans un seul rapport, mais ne fournit qu'une option pour créer une vignette recadrée séparément.

Le recadrage de chaque image à des ratios supplémentaires nécessite non seulement l'installation d'un plug-in spécial ou le développement d'un outil dédié, mais impose également des exigences supplémentaires aux éditeurs, car cela les oblige à effectuer un travail supplémentaire pour chaque image téléchargée. Parfois, cela rend également plus difficile le choix d'une image viable, ce qui ralentit davantage le flux de travail.

Déterminez si le contenu hérité doit être pris en charge.

Lors de la refonte d'une application héritée, il y a parfois encore moins d'options disponibles que lors du démarrage d'une nouvelle application à partir de zéro. En effet, il existe déjà un référentiel de médias existant, et la migration de tout cela vers un nouveau format peut souvent être une opération coûteuse ou peu pratique du point de vue du développement.

Fournir aux éditeurs de contenu une variété de façons de styliser le texte

Le contenu textuel est un élément clé d'une application pilotée par CMS, et dans un site d'actualités ou un blog en particulier, on constatera que les éditeurs ou les rédacteurs, lorsqu'ils sont laissés à eux-mêmes, recherchent des moyens de styliser et de formater le texte pour mettre l'accent sur certains points, diviser le contenu, ajouter des citations, créer des listes, créer des liens vers d'autres contenus et accomplir un certain nombre d'autres tâches.

De nombreuses plates-formes CMS populaires telles que WordPress fournissent des options de formatage de texte par défaut, mais si le concepteur ne parvient pas à planifier la manière dont ces styles seront personnalisés en fonction de leur conception, le résultat sera quelque chose d'aléatoire, de clair ou d'indésirable.

Conception DO pour toutes les manières courantes de formater le texte.

Surtout pour les blogs et les sites d'actualités, il est utile de prendre le temps de fournir au développeur des règles de style pour toutes les manières courantes de formater le texte, notamment : texte en gras et en italique, titres et sous-titres, listes numérotées et à puces, citations, légendes , et des hyperliens.

NE donnez PAS trop de contrôle stylistique aux créateurs de contenu.

Ce n'est généralement pas une bonne idée d'ouvrir trop de contrôle de conception aux éditeurs. Leur permettre de faire des choses telles que créer leurs propres mises en page dans des pages ou du texte en couleur de plusieurs manières peut être intimidant ou prendre du temps pour certaines personnes et produire des résultats laids et incohérents entre les mains des autres.

Futurs modèles de conception axée sur le contenu

Avec l'avènement de nouvelles technologies telles que la réalité augmentée (AR), de nouveaux paradigmes pour la conception axée sur le contenu ont commencé à apparaître. Les applications pilotées par CMS dans l'espace de réalité augmentée/mixte, qui en sont actuellement à leurs balbutiements, utilisent des objets et/ou des scènes du monde réel comme élément clé du contenu.

L'environnement de visualisation d'un utilisateur mobile particulier, les conditions d'éclairage et la proximité physique par rapport au texte et aux objets 3D insérés peuvent tous affecter le résultat final. Cela modifie considérablement la notion de curation de contenu et ajoute une couche supplémentaire d'imprévisibilité qui doit être prise en compte dans le processus de conception.

La conception Web CMS est un peu différente

Concevoir pour des applications pilotées par CMS signifie mettre le contenu en premier, le style en second. Cela signifie également planifier et accepter la variabilité et l'imprévisibilité du contenu autour duquel on conçoit. La capacité à s'adapter à une myriade de résultats potentiels deviendra encore plus critique dans la conception Web des CMS à mesure que les technologies émergentes transformeront la nature du contenu lui-même.