Création de wireframes de contenu pour une conception réactive

Alors que je dirigeais mon cursus en responsive web design entre 2011 et 2012, je n'arrêtais pas de trébucher sur le processus de wireframing. Mes étudiants avaient tendance à se concentrer sur le wireframe comme étant le jeu final dans le processus de planification. Ils n'ont pas compris que la conception réactive se concentre sur la façon dont les utilisateurs accéderont au contenu.

Vous ne pouvez qu'imaginer mon soulagement lorsque je suis tombé sur une vidéo de Stephen Hay s'exprimant lors de la conférence Beyond the Desktop en 2012. Là, dans son exposé sur le design réactif, il a présenté le concept de wireframe de contenu. Ce fut un énorme soulagement pour moi.

Lectures complémentaires sur SmashingMag :

• Le guide du sceptique pour le prototypage basse fidélité
• Comment la création d'un langage de conception peut rationaliser votre conception UX
• Au-delà du wireframing : le processus de conception UX réel

Je savais juste qu'il y avait une étape avant que le processus ne devienne réel, mais je ne pouvais pas l'articuler. Dans cet article, je décrirai les méthodes que j'utilise pour passer du contenu à une structure filaire réactive - et comment vous pouvez également le faire.

Présentation du contenu filaire

Le concept d'un wireframe de contenu est assez simple à comprendre car il découle de la philosophie de conception la plus élémentaire : tomber amoureux de l'utilisateur, pas de la technologie.

Les wireframes de contenu font exactement cela. Ils bloquent les catégories de contenu générales et vous obligent, comme le dit si bien Stephen, à concevoir à partir du contenu vers l'extérieur.

Ce n'est vraiment pas compliqué. En fait, il comporte deux étapes :

1. créer un inventaire de contenu,
2. créer une hiérarchie visuelle des survivants de cette liste.

Faites cela et vous avez un livrable potentiel pour votre client. Ce qu'il a tendance à faire, c'est de détourner l'attention du client de la « chose » qui va où et vers ce qui est important : le flux d'informations.

Pas la science des fusées

Le problème clé avec les wireframes, pour mes étudiants et d'autres designers, c'est qu'ils ont tendance à prendre une importance injustifiée. C'est presque comme la fin d'une émission de rénovation à la télévision, quand tout le monde "Oohs" et "Ahhs" lorsque le client arrive à traverser la maison.

Pas pour moi. Je préfère la scène de la rénovation de la cuisine, lorsque l'entrepreneur sort une feuille de papier et un crayon de menuisier et s'assoit avec le client à la table de la cuisine. Ensuite, ils dessinent un simple contour de la pièce et disent : « Que diriez-vous de retirer ce mur, de mettre une île ici et de déplacer le comptoir là-bas ?

Le menuisier expose l'« intention » de son approche du projet, et le client se concentre sur les parties importantes du projet, plutôt que sur les carreaux, les luminaires, la peinture et l'éclairage.

Dans son livre Responsive Design Workflow, Hay utilise le terme « wireframe de référence de contenu » car « il décrit comment les wireframes traitent le contenu : ils y font simplement référence au lieu de le représenter ».

Un wireframe de contenu, comme le croquis de notre entrepreneur, représente le placement - un mur, un comptoir, un en-tête, un pied de page - et établit une hiérarchie et un flux d'informations . Parce que le processus est itératif, commencer la conversation avec un simple « Que diriez-vous de… » plutôt que « Voici comment… » l'éloigne du domaine de la science des fusées et la place là où elle a commencé à l'origine : des boîtes et des flèches à l'ancienne.

Une fois que cela est établi, nous pouvons passer au processus de développement de wireframe basse fidélité et haute fidélité. Voyons comment un wireframe de contenu peut focaliser la conversation en déconstruisant une simple page.

Déconstruire à la main

Je visite régulièrement Made by Hand. Comme son nom l'indique, le site Web célèbre les artisans qui fabriquent des choses à la main. La page d'accueil propose une série de vidéos, et lors de votre première visite, elle semble plutôt austère, avec peu de fioritures. Cela a du sens car les films eux-mêmes sont ce qui est important, pas n'importe quel autre contenu.

L'inventaire de contenu pour la page d'accueil est, naturellement, plutôt basique, composé de :

• un en-tête et une navigation,
• cinq vidéos (qu'on appellera ici la principale et les vidéos 1 à 4),
• un pied de page.

Pourtant, nous pouvons voir une hiérarchie d'informations définie en jeu. La liste du contenu principal est un peu vague, mais une fois que vous comprenez que l'intention est de présenter une série de vidéos qui mettent en valeur des artisans individuels, la priorité de chaque élément de contenu devient claire :

• vidéo principale,
• vidéos 1 à 4,
• le pied de page,
• l'en-tête et la navigation.

Voir l'en-tête et la navigation au bas de la pile peut vous sembler étrange. Cependant, le but de la page est de vous faire regarder les vidéos et, si vous les aimez, de vous abonner aux notifications régulières de nouveaux contenus. L'en-tête et la navigation sont simplement là pour faciliter la navigation sur le site.

À bien des égards, le vieil adage "Le contenu est roi" - généralement attribué à Bill Gates - anime ce site Web. L'accent est mis sur la collection de vidéos et rien d'autre. Cela soulève un point important : une structure filaire de référence de contenu établit la priorité du contenu, pas le flux de page.

Avec cette liste en main, vous pouvez passer à la création des wireframes de référence de contenu.

Création de structures filaires de référence de contenu

Bien que Stephen Hay soit un grand partisan de la création de ces wireframes de référence de contenu avec un éditeur de code tel que Coda ou Adobe's Brackets, pour ceux d'entre nous qui, dirons-nous, ont des problèmes de code, un éditeur visuel tel que UXPin ou Adobe's Illustrator ou un un éditeur réactif tel que Macaw ou Webflow serait un choix solide. Chacun a ses utilisations, bien qu'un éditeur réactif ait l'avantage de donner au concepteur plus d'une perspective sur son travail - en particulier, comment son travail répond aux différentes tailles d'écran. C'est crucial, compte tenu de la large gamme d'écrans d'aujourd'hui.

Il n'y a pas de meilleur outil ; choisissez celui qui vous convient le mieux. Dans ce didacticiel, nous allons parcourir Illustrator. Voici pourquoi:

• Bien qu'Illustrator ne soit pas un outil vraiment réactif, ses plans de travail vous permettent de commencer par une approche mobile et, à l'aide de points d'arrêt prédéfinis ou personnalisables, de passer rapidement à une version de bureau.
• Ses grilles personnalisables permettent une cohérence de conception.
• Il vous permet de créer des boîtes de taille précise pour les structures filaires en cliquant et en définissant les dimensions.
• Si vous préférez Photoshop pour des maquettes plus fidèles, vous pouvez copier et coller votre filaire de contenu à partir d'Illustrator pour définir la base.

Remarque : Si vous préférez travailler dans le code lors du wireframing ou du prototypage réactif, n'hésitez pas à passer à la section "Étapes suivantes" en bas pour d'autres ressources utiles.

Une approche mobile d'abord pour les wireframes de contenu

Pour ce court didacticiel, nous utiliserons Illustrator dans le cadre d'une approche mobile d'abord, pour nous concentrer sur le contenu le plus important. Nous allons créer cinq fenêtres pour jeter les bases d'une structure filaire de contenu réactif.

1. Créer les documents

Dans Illustrator, créez cinq nouveaux documents avec les largeurs et hauteurs suivantes (en pixels) :

• 320 × 800
• 768 × 1200
• 992 × 1400
• 1224 × 1600
• 1440 × 1800

(Selon la version d'Illustrator que vous utilisez, vous pouvez également créer différents plans de travail dans le même document.)

2. Créez les conteneurs

Dans le document de 320 pixels de large, créez sept cases non lignées remplies de gris neutre.

3. Créez les étiquettes

Placez le texte sur chaque case — dans l'ordre décroissant : en-tête, vidéo principale, vidéo 02, vidéo 03, vidéo 04, vidéo 05 et pied de page. J'ai utilisé du texte blanc pour contraster avec les cases relativement sombres.

4. Redimensionnez les cases

Faites en sorte que la boîte vidéo principale soit un peu plus grande que les autres pour indiquer sa priorité . Si nécessaire, réduisez l'en-tête et le pied de page, mais conservez-les en pleine largeur .

5. Copiez les boîtes

Maintenant que vous avez leurs tailles et étiquettes relatives, copiez les boîtes dans les autres documents ou plans de travail.

Redimensionnez-les selon vos besoins et rappelez-vous que ces cases sont approximatives. Ils représentent l'existence du contenu, et non la taille ou l'espacement précis du contenu.

Prochaines étapes

Il n'y a pas de grande révélation ou d'autre excitation avec la création de wireframes de référence de contenu.

Ils s'intègrent dans le flux de travail entre l'inventaire de contenu et les wireframes basse fidélité. En effet, leur objectif est simplement d' établir une hiérarchie de l'information et, si le client est impliqué, de l'amener à réfléchir davantage sur le concept de contenu et de flux d'informations, plutôt que sur le contenu lui-même.

L'ensemble du processus est plus une conversation « Que diriez-vous de… » qu'un « Voici comment… ». Une fois que tout le monde est d'accord, la prochaine itération du projet consistera à verser du contenu réel de faible fidélité dans les cases qui composent les structures filaires de référence de contenu.

Comme nous l'avons vu, vous pouvez pratiquer le wireframing de contenu en déconstruisant des sites Web populaires dans leurs blocs de construction de base . Commencez avec des conteneurs d'informations approximatifs, ajoutez le contenu réel, puis commencez à les ciseler sous des formes plus finalisées. Ce faisant, vous serez mieux en mesure de concevoir autour de ce qui compte vraiment pour les utilisateurs : le contenu.

• UXPin Cet outil de conception collaborative est utile pour mettre en place un wireframe brut, puis ajouter des interactions pour créer un prototype rapide.
• "Responsive Design Workflow" (diapositives), Stephen Hay, Mobilism 2012 Ces diapositives résument de manière concise comment concevoir efficacement des mises en page réactives. Hay offre d'excellents conseils sur l'audit du contenu, la hiérarchisation du contenu, le wireframing du contenu et l'utilisation des frameworks de développement.
• "Content Reference Wireframes (PDF), Neil Hao Ceci est un bel aperçu d'une approche basée sur le code pour le wireframing de contenu, décrite à travers un scénario de conception réaliste.
• "Mobile First", Université ZURB ZURB, une agence de conception, propose ce portail de ressources utile, qui fournit un contexte pour le wireframing de contenu.
• "Plongez dans le prototypage réactif avec Foundation", Jonathan Smiley, le didacticiel utile de A List Apart Smiley montre comment modéliser et prototyper des conceptions réactives dans le code. Bien qu'il ne soit pas totalement axé sur le mobile, Smiley explique très bien comment afficher le contenu de manière cohérente sur tous les appareils.
• "Design Last", Rik Schennink, Smashing Magazine Cet article intéressant explique comment concevoir de manière réactive avec du contenu et du HTML en premier. Ce faisant, vous associerez le contenu à la structure dès le début.