TABLE DES MATIÈRES
- Structurer son contenu
- Développez votre propre storytelling en faisant appel aux blocs Minos
- Astuces pour rendre du contenu texte plus lisible et accessible
- Le copier-coller
- Conseils d'édition
Structurer son contenu
Le principe de Minotaure est de profiter au mieux de la grande souplesse qui est donnée aux rédacteur·trice·s pour créer des contenus attrayants, clairs (et concis) ; en un mot, agréables à parcourir. L'enjeu majeur est de permettre aux utilisateur·trice·s de "scanner" rapidement les pages pour y trouver l'information recherchée en un minimum de temps.
Pour y arriver, vous avez deux façons d'envisager les choses.
Développez votre propre storytelling en faisant appel aux blocs Minos
Si vous avez eu l'occasion de participer aux ateliers de Spade, vous connaissez déjà nos plaquettes de contenus-types Minotaure UXKit. Ces ateliers participatifs peuvent se réorganiser en interne selon les besoins de contenus à créer.
Plaquettes Minotaure en bois, utilisées lors des workshops
Développer son storytelling nécessite de tenir compte de quelques règles, qui permettent de garder la cohérence.
- Créez des habitudes de consultation au sein des pages que vous élaborez, c'est-à-dire des éléments qui reviennent régulièrement et forment un "univers familier" où les utilisateurs et utilisatrices se retrouvent facilement. Commencez toujours par un Hero par exemple et terminez avec un formulaire de contact, ou envisagez des contenus contenant des liens vers d'autres pages. La répétition d'éléments (aussi bien de contenus que de style ou de mise en forme) permet de rappeler ce que vous jugez essentiel, de mettre en avant les actions attendues, et de répondre plus rapidement aux attentes de vos publics cibles.
- Pensez au ton employé sur votre site (en anglais, tone of voice). Êtes-vous plutôt dans le 'vous' ? Le 'tu' ? Dans une approche amicale, pédagogique ou officielle ? Vous identifiez-vous avec un 'nous' ou avec le nom de l'entreprise ? Une fois que vous avez votre ton, collez-y tout au long de la production de vos contenus. Si vous doutez du ton à employer, basez-vous sur votre audience : qui sont-ils/elles ? Comment aiment-ils/elles qu'on leur parle ? Pensez à vos personas (que Spade peut vous aider à définir). Dans tous les cas, gardez en tête que toutes les personnes sur votre site ne sont pas des expertes dans votre domaine - en d'autres termes, explicitez le jargon, faites des phrases simples, vulgarisez !
- Agissez de même pour vos illustrations, elles sont aussi importantes pour la cohérence. Si vous utilisez des dessins, faites appels à la même personne pour toutes les images de votre site. S'il s'agit de photos, exploitez les cadrages, les sujets, les filtres (noir et blanc, sepia, etc.) de manière unifiée.
- Trouvez le bon bloc pour le bon contenu ! Ceci peut sembler facile dit comme ça 😃 On sait que dans la pratique, les contenus sont plus longs et plus complexes que dans les maquettes validées en aval... c'est tout l'exercice ! Synthétisez, vos lecteurs vous remercieront. Pensez avant tout à adapter le contenu au bloc et si ça ne va vraiment pas, changez le bloc. Avec la panoplie dont vous disposez, il y aura forcément celui qu'il vous faut.
- Pensez Mobile First : N'oubliez pas qu'un grand nombre de vos utilisateurs vous liront sur smartphone...
Astuces pour rendre du contenu texte plus lisible et accessible
- Faites court ! C’est ce qui déterminera pour beaucoup la lisibilité et l’accessibilité d’une page car les phrases et paragraphes courts permettent de cadencer la lecture et facilitent la compréhension de la page par tous les publics. Les gros blocs de textes sont intimidants et fastidieux à lire. Les lecteurs et lectrices veulent accéder à ce qui les intéresse immédiatement et sans effort. Dès lors, facilitez-leur la tâche… et si vous manquez d'inspiration, mettez-vous à leur place : que chercheriez-vous sur votre site ? Que voudriez-vous y voir / lire en premier lieu ?
- Ajoutez des visuels à vos contenus. Ils peuvent illustrer ou compléter le contenu textuel en simplifiant la compréhension des idées
- Donner un titre unique à chaque page Chaque page doit avoir un titre unique et utile qui indique le but de la page.
- Structurez votre contenu avec des titres. Les niveaux de titres indiqués par H1, H2... H6 servent à structurer le contenu éditorial d’une page web. H1 est le plus important (également le plus grand), H6 le moins important. Exploitez-les dans toutes vos pages, une bonne utilisation des titres permet aux utilisateur·trice·s de scanner plus facilement et rapidement vos contenus et de s’assurer d’être au bon endroit. Exemple: maniez les sous-titres. Ils servent à inciter l’internaute à continuer à lire, mais aussi de structure pour faciliter la compréhension des enchaînements des différentes idées pour le lecteur.
- Utilisez des labels courts et explicites pour vos boutons (plus d’informations sur l’utilisation des call to action) Un bouton ne doit pas faire plus de 3 mots. Il ne doit contenir qu'une action à la fois, cette action doit être clairement compréhensible. Exemple: “Nous contacter”. Attention également à la cohérence! Tous les boutons qui pointent vers le même contenu doivent avoir le même label. Exemple: Tous les boutons menant vers le formulaire de contact doivent avoir comme label ‘Nous contacter’ Pensez que sur un téléphone mobile, un bouton trop long risque de sortir du viewport (= la zone visible de la page sur l'écran).
- Utilisez des enrichissements pour faciliter la lecture. Un mot en gras, en italique, des numéros, etc., sont autant d'enrichissements qui aident une personne à trouver ses marques de page en page. Utilisez également certains éléments qui sortent de l’ordinaire - une citation par exemple. Exemple: Utilisez des listes à puces car elles permettent d’énumérer des éléments et aident à retenir plus facilement des idées. Rappelez-vous toutefois que pour les titres, les citations, l'alignement des paragraphes, etc., un certain nombre de paramètres sont déjà définis dans la feuille de styles de votre site - inutile donc de rajouter du gras, du souligné ou autre : ce sera fait automatiquement. La feuille de styles de votre site garantit cohérence et esthétique.
- Restez cohérent Les termes utilisés sur le site doivent être cohérents. Cela les rend familiers et prévisibles. Exemple: Après avoir appris une fonctionnalité, l’utilisateur la retrouvera plus facilement ensuite.
Le copier-coller
Il est fréquent que le contenu des futures pages d’un site web soit d’abord rédigé sur un document dans un logiciel de traitement de texte (Microsoft Word ou similaire). On fait alors un copier-coller du texte dans le bloc de contenu. Bien souvent s’ensuit une série de soucis, qu'ils soient fonctionnels ou de mise en page.
La raison principale réside dans le fait que généralement on ne copie pas que du texte brut, mais tout un environnement de mise en page.
Le "copier" du texte va également copier des informations sur la typographie utilisée, la taille des caractères, l'interlignage, la couleur, etc. En grande majorité, ces éléments ne sont pourtant pas nécessaires dans l'environnement dans lequel on souhaite coller le contenu. En effet, la typographie, l'interlignage, le style des éléments structurels (titres, sous-titres), la couleur, etc., sont déjà gérés par la feuille de style (CSS) de votre site web. C'est elle qui est garante de votre identité visuelle et d'un environnement graphique cohérent.
Il faut dès lors toujours éviter d'importer autre chose que du contenu en texte brut.
Conseils d'édition
Ne pas faire de "copier-coller"
La première solution est d'écrire directement dans les blocs appropriés : on crée ou adapte ainsi son contenu selon son environnement propre.
Comment éviter les soucis si le "copier-coller" n’est pas évitable ?
Si l'on doit malgré tout faire un copier-coller, il est alors préférable de passer par un outil intermédiaire qui n'est pas en mesure de garder en mémoire la mise en page. Cela peut par exemple être un éditeur de texte brut (NotePad sous Windows, TextEdit sous Mac), ou un éditeur de code HTML (Atome, SublimeText, ...).
Certains logiciels permettent de faire un collé "spécial" qui va supprimer les balises automatiquement: c'est le cas de TextEdit sous Mac, avec l'option "Coller et adapter le style".
