M2.1-a Lectures : Les enjeux du graphisme et de l'ergonomie
Vous avez structuré votre gare centrale, les premières fonctionnalités sont là mais il manque encore un petit quelque chose ? Naturellement on a envie que le yeswiki soit joli et fonctionnel. L'objectif de ce module est de vous donner quelques clés pour faire en sorte que votre collectif reconnaisse l'identité du groupe et trouve ses marques rapidement. Il s'agit d'imaginer les utilisateurs qui visitent notre site et de leur porter une attention particulière.
Retenons trois composantes:
- L’apparence : poser un décor le plus proche possible des valeurs et des besoins du collectif; les couleurs, les images mais aussi choisir des mots qui seront familiers aux utilisateurs
- La facilité de navigation : trouver la bonne information en 3 clics, en plus du menu on peut avoir des boutons, des images cliquables, des liens qui permettent d'avoir un parcours fluide et personnalisé;
- La simplicité : éviter les informations inutiles, ne surchargez pas les pages.
Une bonne ergonomie permet de guider les visiteurs
Préalable : répondre aux besoins du collectif
Portraits d'utilisateurs
Animation du collectif
Lorsqu'on parle d'ergonomie, il ne s'agit pas seulement d'être joli et bien assorti, l'enjeu est de guider des utilisateurs au sein de votre projet. A quels besoins répond le site ?
Besoin d'appartenance à un groupe
Besoin d'infos pointues
Plaisir de la découverte
Faire ensemble
Prenez le temps de dresser le portrait de vos utilisateurs
A quelle situation est confronté l'utilisateur ? De quoi a t il besoin pour avancer ?
Notez pour chacun ce qui peut le rassurer, le motiver mais aussi ce qui peut le perturber, le rebuter...
Futur membre
Nouvel arrivant
> cherche à mieux connaitre le projet et la communauté
> cherche des infos utiles pour lui / sur sa problématique du moment
> souhaite savoir comment participer éventuellement - conditions d'utilisation du site
Observateur
Observateur inactif
> recoit les infos
> observe les contributions des autres
> fait le pont avec d'autres projets dans lesquels il est plus actif
> repère les tâches ou les étapes dans lesquelles s'impliquer plus tard
Membre de la communauté
Les réactifs
> connait bien le projet global
> répond aux invitations des proactifs
> en recherche d'informations précises (fonction gare centrale)
> contribue quand on le lui rappelle, sur les sujets qui le touchent directement
Moteur de la communauté
Les proactifs
> met en place les outils et pense les interactions entre membres
> contribue régulièrement
> anime la communauté, rythme le projet
> veille sur les usages des membres et fait évoluer les outils
Règles d'écriture
La chose la plus importante sur votre site est son contenu. Les textes doivent être rédigés avec soin et être correctement calibrés afin de rester digestes.
Comment une page web est-elle parcourue ?
A l’ecran on lit 25% moins vite que sur papier, seuls 20% des internautes lisent mot à mot
Le sens de lecture n’est pas figé à l’inverse de celui d’une phrase
Si la page contient beaucoup de texte, le parcours visuel pour l'internaute est le plus souvent en forme de F. Le lecteur ne lit que les 1ers mots, le 1er tiers de la phrase doit contenir les informations principales. Les titres sont 5 fois plus lus que le reste.
Si la page est composée d'éléments plus variées, images, textes, pictos : le schéma de lecture sera en forme de Z : avec des points d'attention forts en haut à droite puis en bas à droite (à la fin du Z)
La ligne de flottaison est une barrière pour le contenu, cela signifie que les principales informations devront trouver une place dans la partie haute du site, ce qui s'affiche avant d'avoir commencé à scroller.
Quelques points de repères pour vous aider à préparer vos contenus
Titre
Entre 5 et 15 mots : l'idéal est 12 mots qui permet 70% de mémorisation.
Au delà de 15 mots on ne mémorisera pas plus de 50% du message : plus vous serez concis, plus le message sera clair !
Introduction
Entre 50 et 100 mots
Elle doit contenir :
une phrase d'accroche
définir le sujet et son contexte
répondre aux principales interrogations : Qui, Quoi, Quand, Comment, Pourquoi ?
Les paragraphes
un titre explicite
puis 100 à 150 mots pour donner des informations précises sur un aspect du projet
Des textes écrits sur une trop grande largeur sont plus fatiguants à lire. La meilleure lisibilité est obtenue pour une largeur de ligne entre 50 et 75 caractères.
La structure de votre page contribuera à améliorer le confort de lecture en intégrant des colonnes, des illustrations, des espaces vides.
Look - Personnaliser le thème: couleurs, police, squelette
Pour accéder aux options graphiques : rendez-vous sur la page LookWiki via "Gestion du site", puis bouton "Personnaliser le thème de ce wiki".
Au préalable :
- ces opérations sont réservées à l'administrateur du site, pensez à vous connecter
- si vous souhaitez modifier la police : installer l'extension Fontautoinstall
L'architecture du site ou squelette
Sur la page LookWiki vous avez la possibilité de choisir le squelette parmi la liste suivante :
- 1col.tpl.html (le standard : barre de menu en haut puis contenu de page en pleine largeur puis footer)
- 1 col.vertical-menu.tpl.html : déplace le menu principal vers une colonne gauche
- 2cols-left.tpl.html permet d'ajouter une colonne à gauche avec des informations qui pourront être communes à plusieurs pages (par exemple : un sous menu ou des coordonnées , ...)
- 2cols-right.tpl.html permet d'ajouter une colonne à droite avec des informations qui pourront être communes à plusieurs pages (par exemple : la liste des prochains évènements, les dernières actus, ...)
- full-page exploite l'écran en pleine largeur (utile quand on intègre un autre service comme un pad en iframe)
La configuration graphique
Le bouton Créer une nouvelle configuration graphique permet d'accéder au choix de couleurs et polices. Cette configuration graphique, aussi appelée preset, pourra être appliquée à l'ensemble du site ou à une page individuellement.
Personnaliser les couleurs
En créant "une nouvelle configuration graphique", vous avez la possibilité de définir :
une couleur primaire : c'est votre couleur dominante, elle sera utilisée par défaut pour la barre de menu ainsi que pour les titres et les liens. N'utilisez la couleur dominante de votre palette que sur les éléments essentiel de votre site ( appel à l'action, bouton, liens ...)
2 couleurs secondaires peu visibles par defaut mais vous pourrez facilement les utiliser dans vos éléments de mise en forme. La couleur secondaire 2 est utilisée pour l'encadré "texte mis en valeur".
la couleur de votre texte et celle du fond - si vous les modifiez, veillez à bien respecter le contraste pour assurer la lisibilité des contenus.
Comment choisir mes couleurs ?
Si vous voulez une proposition rapide en mode je jette les dés
Si vous n'avez pas de charte graphique, randoma11y peut vous aider à déterminer 2 couleurs bien contrastées qui auront le meilleur effet en utilisant des sections avec un fond de couleur !
Si vous avez déjà un logo ou une couleur précise en tête Exemple de palette généré sur coolors.co
Vous n'avez pas de charte graphique et vous avez l'impression que les couleurs que vous choisissez sont mal assorties ? Voici un outil en ligne pour vous permettre de trouver facilement des couleurs assorties :
Plusieurs manières de générer une palette :
générer la palette à partir d'une image (votre logo ou une photo dont les tons vous plaisent) palette
générer la palette à partir de votre couleur principale (pour indiquer votre couleur, il faut cliquer sur le code hexa cela vous permet de passer en édition et coller votre code couleur)
explorer les couleurs à la mode avec l'option "Explore"
générer votre palette au hasard en appuyant sur la barre d'espace jusqu'à tomber sur une couleur qui vous parle, vous pourrez alors la bloquer grâce au cadenas puis continuer à explorer
Une police donne du caractère à votre contenu - il fait partie des éléments de style. La police des titres devra accrocher l'oeil (par sa taille, sa couleur, et par la forme des lettres), la police du corps de texte doit avant tout permettre de faciliter la lecture.
Recommandations
- Pour les textes optez pour une police sans empattement (sans serif) : plus épurées, elles offrent un meilleur confort de lecture à l'écran.
Parmi les web font les plus populaires : Arial, Open Sans, Montserrat, Lato, Roboto.
- Pour les titres il est tout à fait possible de rester sur le même police que les textes.
Si vous souhaitez combiner avec une autre police, vous pouvez également explorer :
les polices à empattement (avec serif) : effet imprimerie, crédibilité à utiliser plutot pour les supports papiers (Times New Roman et Garamond sont des caractères issus du monde de l'imprimerie, s'ils ont traversé les époques et sont appréciés pour leur lisibilité) - leur utilisation pour les titres peut être envisagée pour donner un caractère historique (Voir le site du journal Le Monde par exemple)
les polices manuscrite (handwriting) : coté humain et artisanal, mais à garder pour quelques phrases à mettre en valeur ou des titres, difficulté de lisibilité
Appliquer le style à tout le site ou à certaines pages
Une fois votre configuration graphique sauvegardée vous pouvez :
l'appliquer à tout le site - ce sera votre thème par défaut, toutes les pages auront le même look
l'appliquer à un groupe de page via Gestion du site /Look : vous avez la possibilité de sélectionner quelques pages puis d'appliquer un style différent pour ces pages
l'appliquer à une page en particulier
Cas d'usage
Il arrive parfois d'avoir envie de différencier 2 parties du site, par exemple si une partie est publique et l'autre partie est réservée à des groupes de travail (en mode intranet). Il est possible de définir 2 jeux de couleurs (2 configurations graphiques) et de les appliquer à chaque page : lorsque vous éditez une page de votre wiki, vous trouverez un bouton "theme" en bas de page qui vous permettra d'appliquer spécifiquement à cette page le jeu de couleur souhaité.
Pour allez plus loin : initiation css
Le CSS est le langage qui permet de définir avec précision le style de chaque élément de votre wiki. Vous avez la possibilité d'écrire vos propres règles sur une page spéciale : PageCSS, accessible depuis Gestion du site /look.
Cette page contient le code permettant de modifier les couleurs de certains éléments de base.
Les bases du code css
Attention lorsque vous modifiez PageCSS, vous touchez directement à du code, chaque caractère a son importance ! Un caractère manquant peut empêcher la bonne interprétation du reste du code et causer des problèmes d'affichage.
- Les caractères /* et */ signalent que l'information est en commentaire, ce qui est au milieu ne sera pas traité. A l'inverse pour activer une personnalisation, supprimez les / en début et / en fin de ligne
- les variables de couleurs sont déclarées dans une partie qui commence par :root{ et se termine par }, si vous personnalisez alors enlevez également /* */ sur la ligne :root{ et la ligne } de fin
- chaque intruction CSS doit terminer par un point virgule ;
- les noms de variables commencent toujours par --
Modifier les couleurs des titres
Les couleurs de vos titres dépendent directement de votre palette de couleur :
titre 1 : couleur primaire
titre 1
titre 2 : couleur primaire
titre 2
titre 3: couleur secondaire 1
titre 3
titre 4 : couleur secondaire 2
titre 4
Voici le code à placer dans PageCss, à noter que les variables var(--primary-color) peuvent être modifiées par des couleurs au format hexadecimal "#3cab3b"
De la même manière,ce code doit être placé entre :root{ et }
/* couleur de la barre de menu */
--navbar-bg-color: var(--neutral-light-color);
--navbar-text-color: var(--primary-color);
--navbar-link-color: var(--primary-color);
--navbar-link-bg-color: transparent;
--navbar-link-hover-color: var(--secondary-color-1);
--navbar-link-bg-hover-color: transparent;
--navbar-shadow: 0px 0px 20px #0000000f;
Bonus - 9 sites pour trouver de belles illustrations gratuites
Quelques ressources pour trouvez des illustrations :
la bibliothèque FontAwesome est intégrée à Yeswiki - vous pouvez ajouter les icones dans vos textes ou vos titres en copiant le code html
""<i class="fa fa-puzzle-piece"></i>""
nounproject beaucoup d'icones disponibles avec la possibilité de choisir la couleur, et la couleur de fond. Téléchargez l'icone en format png et insérez dans le wiki comme une image - L'utilisation de ce site nécessite de créer un compte;
undraw : des illustrations entièrement libres de droit avec la possibilité de les décliner selon votre couleur principale
https://www.manypixels.co/gallery - illustrations utilisables gratuitement (y compris usage commercial)sans créditer - téléchargeables en png ou en svg - possibilité de changer les couleurs
https://blush.design/ : une banque d'illustrations avec des styles dessinés, on peut créer des avatar en choisissant la position, le style vestimentaire des personnages, après pour personnaliser les couleurs il faut prendre un abonnement
Freepik grosse banque d'images avec des images gratuites (mais nécessite de citer la source) et des images payantes. Freepik permet de trouver aussi bien des photos que des illustrations type dessin ou aquarelle qui peuvent être intéressantes pour apporter douceur et convivialité à votre site.
Unsplash - superbes photos gratuites (nécessite de citer la source). Les mots clés dans la barre de recherche doivent être de préférence en anglais pour de meilleurs résultats. Essayez par exemple de faire une recherche par couleur avec le mot clé "Abstract"
Important
Pensez à redimensionner vos images avant de les intégrer pour ne pas alourdir inutilement la page et ralentir le site. En effet, il n'est pas rare d'avoir des photos de 5000px de large alors qu'en pleine largeur 1920px seront suffisant et sur une colonne avec un texte à coté prévoir 600px de large. (Dans l'explorateur de fichiers, la dimension est affichée lorsqu'on survole le nom d'un fichier image) Comment redimensionner une image ?
