Prototypage axé sur le contenu

Le contenu est le produit de base de l'économie numérique. C'est l'or que nous transformons en expérience de luxe, le diamant que nous enfermons dans les programmes de fidélité et les ventes incitatives. Pourtant, en tant que concepteurs, nous le branchons souvent après coup. Nous prototypons notre interaction et notre conception visuelle jusqu'à épuisement, mais acceptons que les «vrais mots» puissent simplement être ajoutés plus tard. Il y a un meilleur moyen.

De plus en plus, les biens numériques que nous créons fonctionnent dans un système dynamique de contenu, de fonctionnalité, de code et d'intention. Nos produits et services dérivent et se répandent sur les sites Web partenaires, les flux de médias sociaux et une myriade d'agrégateurs électroniques, tous cherchant à façonner le comportement et la compréhension des visiteurs. Les systèmes s'appuient sur des systèmes et, en peu de temps, nous avons bricoler un colosse dont l'ampleur épate les esprits.

Lectures complémentaires sur SmashingMag :

• Optimisation de votre conception pour des tests rapides de prototypes
• Choisir le bon outil de prototypage
• Prototypage de contenu dans la conception Web réactive
• Ressusciter les prototypes d'interface utilisateur

Bien que nous ayons été assez bons pour comprendre des systèmes simples dans le passé (pensez aux sites Web statiques et aux intranets), il s'avère que les grands systèmes dynamiques sont un peu plus compliqués - et un peu moins prévisibles. Au fur et à mesure que les systèmes grandissent, ils deviennent exponentiellement plus complexes, et à mesure qu'ils augmentent en complexité, leur comportement devient de plus en plus non linéaire et difficile à anticiper pour nous, pauvres singes. Dans les grands systèmes, les erreurs d'arrondi à la millième décimale peuvent modifier radicalement les résultats (Mitchell 33). Alors qu'Internet approche d'un billion de nœuds, c'est le monde pour lequel nous concevons tous maintenant.

Cependant, ces systèmes simples auxquels nous sommes habitués peuvent fournir une clé pour concevoir des espaces plus complexes. Comme le dit le théoricien des systèmes John Gall, « un système complexe qui fonctionne se révèle invariablement avoir évolué à partir d'un système simple qui fonctionne ». Dans l'espace de la conception numérique, si nous veillons à ce que nos systèmes dynamiques les plus simples de contenu, de structure et de création de sens fonctionnent comme prévu à un niveau fondamental, nous pouvons alors jeter les bases de systèmes plus vastes et plus complexes qui fonctionnent également comme prévu.

Une façon pour nous, en tant que concepteurs, de garder nos canards complexes dans une rangée est d'intégrer notre contenu dans le processus de prototypage au début. Une approche axée sur le contenu nous encourage à affronter plus tôt les contraintes et les opportunités de notre contenu et à tester fonctionnellement nos solutions proposées avec des utilisateurs avides de contenu réel avant que des décisions de conception majeures n'aient été prises.

Dans cet article, je vais vous montrer comment utiliser un ensemble simple d'outils open source pour introduire un contenu réel et dynamique dans votre processus de prototypage dès le premier jour. Cette approche vous permet de vous concentrer sur la façon dont les utilisateurs comprennent votre contenu dès le début d'un projet et de construire ensuite des éléments structurels, visuels et techniques sur cette base de compréhension.

Un modèle de boîte blanche pour le contenu

L'un des outils que les chercheurs en systèmes utilisent pour comprendre le comportement des systèmes dynamiques s'appelle un modèle de « boîte blanche ». Le spécialiste des systèmes Gerald Weinberg écrit que, alors que le comportement d'un modèle de boîte noire est "parfaitement caché", le comportement d'un modèle de boîte blanche est "parfaitement révélé". Pour les systèmes complexes, cette transparence est importante : Weinberg note encore que « même les systèmes les plus simples réservent parfois des surprises à leurs constructeurs » (172).

L'objectif du prototypage axé sur le contenu est de créer un modèle de boîte blanche pour notre contenu, sa structure interne et son architecture d'information de support. Cela nous permettra de découvrir dès le début du processus de conception comment nos utilisateurs finaux construisent du sens à partir du contenu structuré qu'offrent nos systèmes numériques. En prenant le temps d'obtenir la structure de nos systèmes de contenu correcte à la base, nous préparons le terrain pour que ces systèmes simples qui fonctionnent soient intégrés dans des systèmes plus grands et plus complexes qui fonctionnent.

Afin de créer une boîte blanche pour le contenu numérique, nous devons tenir compte de trois choses :

• le contenu lui-même , composé de packages de contenu de différents niveaux de granularité, en fonction du type et de l'objectif du contenu ;
• structure , à la fois au niveau de la page locale ou de l'écran et au niveau du site Web global ou de l'application ;
• l'implication des utilisateurs dans le contexte et la posture (desktop, tablette ou téléphone) dans lesquels nos contenus seront finalement consommés.

Afin de rester "parfaitement visible", ce modèle doit également être transparent dans sa fonctionnalité afin que les membres de l'équipe de conception puissent comprendre pourquoi le modèle se comporte comme il le fait. Ce dernier élément — la transparence, associée à l'implication de l'utilisateur — est crucial pour le modèle de la boîte blanche : nous ne construisons pas un prototype simplement pour démontrer la fonctionnalité, mais plutôt pour apprendre, réviser et affiner notre structure de contenu sous-jacente en fonction de la façon dont les mots et structure que nous utilisons sont interprétés par leurs publics cibles.

Une approche de prototypage axée sur le contenu est utile lorsque vous concevez pour du contenu existant, mais c'est également un bon moyen d'engager une équipe éditoriale dans le processus de création de contenu. Obtenir des mots, des images et des actifs réels devant les utilisateurs au début du projet donne à chacun le temps de peaufiner, d'ajuster ou de pivoter afin d'atteindre les objectifs du projet. Si votre plan de projet consiste à suivre une stratégie de remplissage des mots plus tard, le prototypage axé sur le contenu vous donne la possibilité d'obtenir quelques variations de contenu devant les utilisateurs, puis d'obtenir les réactions des utilisateurs devant les parties prenantes.

Un cadre de prototypage axé sur le contenu

En prenant les principes et les objectifs décrits ci-dessus, j'ai mis en place un cadre de démarrage pour créer ce type de prototype. Tout à fait dans l'esprit de la pensée systémique elle-même, cet outil repose sur un couplage lâche de systèmes plus simples qui exécutent chacun correctement une tâche principale simple.

Pour ce framework, j'ai assemblé Excel, Jekyll, ZURB Foundation et Browsersync, et les ai tous liés avec un script Gulp. J'ai choisi ces applications et frameworks particuliers car ils sont largement disponibles, sont open source (principalement), ont des communautés de support actives et ont une excellente documentation.

Vous pouvez télécharger une copie de l'exemple de projet décrit ci-dessous et un kit de démarrage de framework de prototypage axé sur le contenu à partir de la page du projet sur GitHub. Voyons comment les pièces s'emboîtent et ce que chacune d'elles fait.

Exceller

Excel - ou tout tableur qui enregistre au format XLSX - est utilisé pour créer et modifier des contenus structurés et des systèmes de catégorisation. Chaque fois que vous enregistrez le document, chaque package de votre ensemble de contenu (représenté par une ligne dans la feuille de calcul) est exporté à la fois sous forme de page Jekyll et de document JSON. Cela vous permet d'exécuter à la fois des opérations de page et des opérations globales sur votre contenu et de propager les modifications de contenu à l'ensemble du site Web avec une seule commande "enregistrer".

Jekyll

Jekyll est un générateur de site Web statique open source et est utilisé pour articuler la structure dynamique entre les packages de contenu, les pages et les catégories. Jekyll représente le contenu que vous enregistrez dans la feuille de calcul sous forme de variables et vous permet d'effectuer des opérations sur ces variables pour créer une structure. Jekyll fournit également des balises "if/then" pour appliquer une logique conditionnelle et for boucles for pour parcourir et filtrer des ensembles de contenu.

Fondation

ZURB Foundation, un framework frontal open-source mobile-first, est utilisé pour articuler la hiérarchie des informations et pour structurer les comportements réactifs. Les grilles, les définitions de style et les comportements réactifs de Foundation vous permettent de créer à peu près n'importe quel modèle de mise en page Web standard simplement en appliquant des classes à vos éléments HTML.

Synchronisation du navigateur

Enfin, Browsersync sert votre prototype au navigateur et met à jour le CSS et les pages au fur et à mesure que vous apportez des modifications. Browsersync vous permet également d'accéder au prototype depuis n'importe quel appareil connecté au même réseau. Cela signifie que vous pouvez voir les mises à jour automatiques sur un téléphone et une tablette lorsque vous effectuez des modifications sur un ordinateur portable.

Reliés entre eux, ces outils vous permettent de construire des prototypes dans un environnement similaire aux systèmes dynamiques qui composeront votre éventuel environnement de production, mais sans avoir à subir les bases de données, les services cloud et la latence du réseau qui vous ralentiraient lorsque vous devez vous déplacer. rapidement pour tester des idées.

Si vous paniquez parce que cela implique du code…

Ne paniquez pas. Ces outils sont conviviaux pour les concepteurs et disposent d'excellentes communautés de support. Vous n'avez pas besoin d'être un développeur front-end pour donner vie à vos idées. Vous devez connaître les bases du HTML et du CSS. Ces langages ne sont pas difficiles - et les apprendre ne détruira pas votre capacité à faire du bon travail de conception. Comme le disait Erik Spiekermann, légende du design typographique, « Vous devez apprendre sinon à coder, du moins à apprécier le code, à comprendre le code. Parce que le code est ce qu'étaient les écrous et les boulons il y a cent ans. La meilleure façon de commencer est de plonger.

Un exemple de prototypage axé sur le contenu : le centre communautaire de Green Lake

Pour avoir une meilleure idée de ce à quoi ressemble le prototypage axé sur le contenu en action, prenons une collection de contenu numérique du monde réel.

Voici le scénario. Le centre communautaire de Green Lake propose des cours, des programmes et des événements aux membres de la communauté du quartier de Green Lake. Malheureusement, toutes ses informations actuelles sur les cours, les programmes et les événements sont disponibles en ligne uniquement via PDF, qui à son tour n'est disponible que sur le site Web optimisé pour le bureau à largeur fixe du centre. Voir:

Dans un effort pour atteindre les membres de la communauté qui essaient de plus en plus d'accéder aux informations sur les cours, les programmes et les événements via leurs téléphones portables, le centre a décidé de lancer un site Web de programmes axés sur les mobiles. Cette initiative servira éventuellement de catalyseur pour un site Web réactif à l'échelle de la ville pour les parcs et les loisirs.

Comme tout autre projet de conception, je commencerai par une analyse heuristique et concurrentielle et en examinant les données disponibles sur le trafic et les utilisateurs. Si les parties prenantes et les utilisateurs finaux sont disponibles, je m'assurerai de leur parler également. Une fois que j'ai l'impression d'avoir une bonne idée de l'objectif du site Web, j'explorerai quelques idées d'architecture d'information de haut niveau et d'interface utilisateur sur papier.

Au fur et à mesure qu'une approche de conception initiale commence à prendre forme, je peux utiliser un flux de travail de prototypage axé sur le contenu pour obtenir mes idées initiales - et, plus important encore, le contenu que ces idées sont censées servir - dans le contexte dans lequel elles seront finalement consommées - dans ce cas, le navigateur. Voyons en détail à quoi ressemble ce processus.

Capturer du contenu

Dans cet exemple, vous pouvez voir comment le contenu structuré que je capture dans une feuille de calcul de framework de prototypage de contenu est automatiquement écrit dans un modèle de page chaque fois que j'enregistre mon fichier _data . Ici, j'ai utilisé la feuille « catalogue » pour structurer le contenu. Les variables "Titre", "description", "catégorie" et "tags" sont déjà incluses dans le modèle de page, de sorte que ces valeurs sont mises à jour immédiatement. Vous pouvez ajouter autant d'autres colonnes à une ligne de contenu que vous le souhaitez - assurez-vous simplement d'inclure la variable correspondante dans le modèle (plus d'informations ci-dessous).

Les fiches "Répertoire" et "flux" sont également incluses dans le kit de démarrage et comprennent différentes catégories (colonnes) pour leurs types de contenu respectifs. Chaque feuille exporte le contenu vers son propre dossier (dans ces cas, "catalogue", "répertoire" et "flux") et vers son propre fichier JSON. Vous pouvez ajouter autant d'autres feuilles que vous le souhaitez - assurez-vous simplement de mettre à jour votre fichier de configuration Jekyll afin qu'il sache les extraire (voir la documentation du plug-in "Jekyll Data Pages Generator" pour plus de détails).

Ajouter plus de packages de contenu

Au fur et à mesure que j'ajoute des packages de contenu (lignes dans la feuille de calcul), de nouvelles pages sont automatiquement ajoutées au prototype. Chaque ligne représente une seule page, et chaque colonne de cette ligne représente une variable que Jekyll remplit dans le modèle lorsqu'il construit une page. Dans cet exemple, le contenu du catalogue "Community Center" est assez uniforme, mais si les descriptions des éléments variaient énormément en longueur, vous pourriez facilement voir (et expérimenter) comment cette variation affecterait la mise en page de la page. Peut-être pourriez-vous alors décider de segmenter le contenu différemment ou d'ajouter de nouveaux éléments, tels que des résumés ou des slugs.

Ce système vous permet également d'expérimenter facilement les étiquettes, les catégories et les balises. En modifiant les valeurs de la colonne "catégorie", vous pouvez tester l'impact de différentes approches architecturales sur la capacité de l'utilisateur à trouver facilement un élément de contenu donné. Dans cet exemple, par exemple, j'ai créé des systèmes d'organisation basés sur le type de classe et sur le groupe d'âge d'un participant. Cela me permet de tester facilement différentes approches de navigation dans le menu et sur la page d'accueil au fur et à mesure que le prototype prend forme.

Ajouter une structure et une hiérarchie avec HTML

Une fois que je suis satisfait du contenu en place, je commencerai à envelopper ce contenu dans le balisage afin que sa structure ait un sens pour les utilisateurs. Traitez les variables ici comme du texte et marquez-les comme vous marqueriez du texte dans un fichier HTML "plat". Les résultats ici devraient sembler assez prévisibles (c'est une bonne chose).

Le système de modèles de Jekyll prendra les modèles de page que vous avez créés et les enveloppera avec un modèle global contenant l'en-tête et l'icône de navigation. C'est ce que signifie « mise en page : défaut » : nous appelons le modèle « par défaut » en tant que wrapper de ce modèle. Vous pouvez imbriquer des modèles aussi profondément que vous le souhaitez, bien que plus d'un ou deux niveaux de modèles soient généralement inutiles. Pour accueillir des éléments répétés, tels que des listes de pages et des liens globaux, vous pouvez également utiliser des "includes", qui insèrent un morceau de code particulier dans le modèle lors du rendu du site Web. Consultez la documentation officielle de Jekyll pour en savoir plus sur les modèles et les inclusions.

Ajouter une logique avec les balises de balisage de Jekyll

Jekyll vous permet d'ajouter une logique de base en incluant des balises de base spécifiques à son système de modèles. Ici, j'utilise une balise for pour parcourir la liste des classes du centre communautaire de Green Lake (qui a été créée lorsque j'ai ajouté les multiples packages de contenu ci-dessus), et j'affiche chaque classe du centre communautaire dans la liste sous forme de lien :

Vous pouvez également utiliser des instructions if pour créer des conditions. Ici, j'utilise une instruction if pour masquer le lien vers la page de classe sur laquelle je suis actuellement :

Si votre tête vient d'exploser, ne paniquez pas. L'ajout de logique est une sorte de fonctionnalité avancée. Votre prototype fonctionnera très bien si vous vous en tenez aux variables de contenu et au HTML. Le système de modèles de Jekyll est cependant très lisible par l'homme et facile à prendre en main. Découvrez l'introduction rapide de ses créateurs sur le fonctionnement des pièces de base.

Ajoutez du style et un comportement réactif avec le CSS de Foundation

Une fois qu'une première ébauche de la structure HTML est en place, je peux ajouter du style au prototype simplement en incluant des classes CSS et en enregistrant le document. Le framework frontal de la ZURB Foundation, qui est déjà lié dans le kit de démarrage, fournit des classes de style pour un large éventail de modèles d'applications Web et natives. Dans l'exemple montré ici, simplement en passant dans deux classes différentes, j'ai donné à mon prototype mobile une sensation plus "tappable" et introduit un sens beaucoup plus clair de la hiérarchie visuelle. Ces modifications se propagent automatiquement à tout le contenu qui utilise ce modèle.

Foundation facilite également l'inclusion d'un comportement réactif axé sur le mobile et l'utilisation de dizaines de composants de mise en page, de conteneurs et de médias prédéfinis. Parce que tout est CSS, vous pouvez tout modifier et affiner à votre goût. Pour ces exemples, j'ai modifié la palette de couleurs de base de Foundation en un style "filaire monochrome", mais vous pouvez adapter Foundation à n'importe quel style que vous aimez. Apprenez-en plus sur l'utilisation de Foundation en parcourant sa documentation ou ses didacticiels ou en suivant un cours (les cours sont excellents, soit dit en passant).

Obtenez des commentaires tôt et révisez au fur et à mesure

Une fois le contenu en place, il est facile de créer et de tester plusieurs variantes de la structure. Les étiquettes, catégories, mots-clés et autres métadonnées peuvent être modifiés directement dans la feuille de calcul de contenu. De même, les variations de la structure, du flux et de l'affichage des pages ne sont qu'une question de création de versions alternatives de vos modèles Jekyll. Tous ces changements se répercuteront instantanément sur le prototype dès que vous cliquerez sur "Enregistrer".

Pour terminer une première version du prototype du Green Lake Community Center, j'ai créé trois variantes de la page d'accueil mobile. Dans ce cas, tout ce que j'avais à faire était de réorganiser les éléments dans le modèle de page d'accueil et d'échanger les sources de données pour les deux éléments de navigation (c'est-à-dire les boutons pleine largeur et les vignettes d'image).

Bien que j'aie présenté toutes ces étapes dans l'ordre, gardez à l'esprit que Gulp (l'exécuteur de tâches JavaScript qui relie tous nos systèmes simples) change chaque fois que vous enregistrez un document. Cela signifie que vous pouvez revenir à n'importe quelle étape à tout moment et effectuer des ajustements en fonction de la réponse des utilisateurs, des commentaires des parties prenantes ou de nouvelles découvertes sur le contenu ou le contexte.

Cette flexibilité vous permet de tester facilement différentes hiérarchies d'écran et traitements de contenu avec les utilisateurs - et elle vous permet d'utiliser du contenu réel dans ces tests, un contenu que votre public peut découvrir (et auquel réagir) de première main. Étant donné que la forme finale du prototype est HTML, CSS et JavaScript, vous pouvez recueillir les commentaires des utilisateurs avec l'outil de test avec lequel vous êtes le plus à l'aise (j'aime UserTesting et Lookback).

Le format HTML, CSS et JavaScript du prototype signifie également que votre travail informera plus facilement les efforts parallèles et ultérieurs. Si votre produit éventuel sera construit sur une plate-forme CMS existante, par exemple, les exigences de contenu, de structure et d'affichage que vous êtes en mesure d'articuler vous aideront à évaluer les options CMS. De même, votre prototype peut servir de document de spécification pour les décisions de conception concernant la grille, la hiérarchie, les en-têtes, le comportement des liens et les polices pour vos développeurs frontaux.

N'oubliez cependant pas que l'objectif du prototypage de contenu d'abord n'est pas simplement de concevoir dans le navigateur : l'objectif est d'utiliser le navigateur et les commentaires de vos utilisateurs pour affiner l'organisation de votre contenu afin de créer des structures qui fonctionnent bien.

La force de cette méthode est de vous permettre de modifier rapidement les systèmes que créent vos catégories, libellés et chemins de navigation. Cela offre un avantage distinct par rapport à la modélisation de contenu statique. Si vous constatez que vous utilisez beaucoup de CSS supplémentaires pour que votre contenu dynamique fonctionne comme vous le souhaitez, revenez à la source. Pouvez-vous fragmenter le contenu différemment pour qu'il fonctionne mieux ? Ajouter (ou supprimer) un ensemble de classes ou de balises ? Essayez différentes variantes jusqu'à ce que vous trouviez la solution simple et élégante qui donne l'impression que tout le reste se met en place.

Pensée systémique au-delà du Web

L'exemple de base présenté ici illustre comment une approche de prototypage axée sur le contenu peut nous aider à créer des systèmes de contenu simples qui fonctionnent - des systèmes qui, à leur tour, préparent le terrain pour des systèmes plus grands et plus complexes qui fonctionnent. Le prototypage axé sur le contenu nous aide à découvrir les endroits où des ajustements mineurs dans le modèle de contenu, la hiérarchie, les catégories et les étiquettes peuvent conduire à des solutions plus propres et plus élégantes pour les besoins d'information de nos utilisateurs.

Bien que cet outil soit construit sur des technologies Web, la façon dont nous structurons le contenu pour la compréhension transcende les outils, technologies et plates-formes individuels. Si votre contenu dans sa forme la plus basique, dépouillé des exigences et des contraintes des implémentations particulières, a du sens pour son public et atteint vos objectifs de communication de manière simple et élégante, alors vous avez déjà construit une base qui va au-delà des implémentations technologiques individuelles. Vous avez créé du contenu qui n'a pas besoin d'une plate-forme ou d'un script particulier pour avoir un sens ; c'est un ensemble de contenus qui veut être compris d'une certaine manière.

Lorsque nous plaçons le contenu au cœur du processus de conception, nous commençons à résoudre non pas une implémentation particulière, mais une compréhension. Tout le reste est une étape intermédiaire. En reconnaissant que la plate-forme finale pour laquelle nous concevons est l'esprit humain, nous pouvons identifier les structures simples qui donnent lieu à la compréhension et pouvons travailler pour renforcer ces structures tout au long du processus de conception.

Ouvrages cités

• Complexité, une visite guidée , Melanie Mitchell (New York : Oxford, 2009)
• Une introduction à la pensée systémique générale , Gerald Weinberg (New York: Dorset House, 1975)