Les wikis sont très souvent denses en informations : non seulement elles sont la mémoire du collectif dans le temps mais en plus elles doivent répondre aux questions d'une multitude d'acteurs du collectif. C'est pourquoi il est nécessaire de faciliter le parcours utilisateur. N'importe quelle personne doit pouvoir trouver l'information utile en 3 clics. Il est donc primordial d'anticiper les besoins des utilisateurs et d'organiser votre wiki de manière à suggérer où aller pour accomplir une action comme "s'inscrire" "en savoir plus" "afficher la carte". Votre boite à outils se compose de la barre de menu, mais aussi des liens, des boutons, des images cliquables...
Vous trouverez ici un aperçu des composants de mise en forme utilisables dans Yeswiki.
Les composants se trouvent dans la barre d'édition d'une page :
En cliquant sur Mise en forme, voici les options :
Bouton
Un bouton est un élément visuel coloré qui permet de mettre en valeur un lien. Il se détache du contenu par son fond coloré et l'interactivité est mise en valeur par un léger changement de couleur lorsque l'utilisateur le survole avec la souris.
La dernière version de Yeswiki ("Doryphore") présente une nouveauté dans l'interface d'édition qui facilite grandement l'utilisation des éléments de mise en forme : les composants.
Une interface permet maintenant d'insérer facilement des boutons (et autres éléments de mise en forme que nous verrons plus loin).
Si vous souhaitez modifier un paramètre de votre bouton pour utiliser une autre couleur par exemple, il est possible d'éditer le composant en cliquant sur la ligne dans l'éditeur. Un crayon apparaît à gauche : il permet de réafficher les paramètres du bouton (voir démo ci-dessous).
Pour aller plus loin dans la mise en forme, vous pouvez cocher la case paramètres avancés.
Paramètres avancés disponibles pour les boutons
Ouvrir dans une pop-up - permet à l'utilisateur de rester sur la même page
ouvrir dans un nouvel onglet - à n'utiliser que si le lien renvoie vers un autre site, sinon la convention est de garder le même onglet pour les liens internes
taille du bouton : petit moyen grand
position du bouton : à droite ou sur toute la largeur (j'utilise l'option "sur toute la largeur" en particulier dans les colonnes, cela permet d'avoir des boutons de la meme taille meme si le texte est de taille différente)
afficher sous forme de lien - et utiliser quand même les options telles que icone ou ouverture pop up
masquer le bouton si l'utilisateur n'a pas accès à la page cible (par exemple le bouton renvoie vers une page réservé aux admins, on peut masquer le bouton aux autres utilisateurs)
00:00 / 00:00
Nouveauté
Les étiquettes sont disponibles dans les composants de mise en forme. C'est une petite indication qui attire l'oeil. Elle s'adapte bien à un texte court pour donner un qualificatif à une rubrique.
Paramètre disponible
couleur
Les 3 couleurs que vous avez choisies dans votre configuration graphique sont disponibles pour les étiquettes (primaire, secondaire 1 et secondaire 2).
4 couleurs supplémentaires porteuses de sens, comme leur nom l'indique :
info, la couleur de l'étiquette info est une déclinaison plus claire de votre couleur primaire, elle offre un balisage visible mais se fond dans le contenu
success, un vert synonyme d'un événenement positif ou d' "objectif validé"
warning, pour un point de vigilance - une échéance proche
danger, pour un point de désaccord ou un point urgent
Les onglets peuvent être considérés comme une sorte de menu.
Il y a 2 manières de faire :
Onglets avec des parties de la page (recommandé si les contenus sont relativement simples ou courts)
Onglets avec des pages différentes (recommandé si le contenu est riche ou si les pages sont déja créées)
Attention dans ce cas : vous devrez recopier le code des onglets sur toutes les pages concernées ;-)
Paramètres
Les onglets peuvent être affichés de différentes manières :
en horizontal, c'est-à-dire au dessus de votre contenu (vous avez alors le choix entre souligné, sobre et justifié)
en vertical, c'est-à-dire à gauche de votre contenu
Ce type d'encadrés ou d'accordéon permet d'afficher / masquer un texte. Il est disponible sous le nom "Encadré" dans les composants. L'action qui en découle s'appelle panel et se décline sous différentes formes : dépliée ou pas et dans les différentes couleurs de base de votre thème : Primary Secondary-1 ...
Cette mise en forme s'adapte particulièrement bien pour les FAQ (Foire aux questions)
Paramètres
Type :
- simple encadré
- accordéon ouvert
- accordéon fermé Couleur : comme pour les étiquettes, un jeu de couleurs correspondant à votre configuration graphique est disponible. Essayer d'adopter une couleur pour un type d'information.
La section permet de définir un style pour un des blocs de votre page : un simple fond de couleur ou un bandeau avec une image de fond
Un fond de couleur avec votre couleur primaire mettra en avant votre texte.
Un fond en pleine largeur avec une image crée une séparation fluide entre 2 parties qui traitent de sujets différents (une image en pleine largeur doit avoir une dimension de 1920px de large - sa hauteur dépendra de la taille du texte contenu dans la section, si l'image est juste décorative vous devrez spécifier une hauteur à la section).
Paramètres
texture : permet de choisir si un utilise une couleur unie ou des motifs en fond de section
forme : la section peut aussi prendre une forme de blob un arrondi asymétrique
tonalité : permet de jouer sur les contrastes entre le texte et le fond pour assurer une bonne lisibilité
afficher sur toute la largeur : permet de couvrir toute la largeur de l'écran (supprime les marges)
les options animation pour mettre en mouvement une partie du contenu
Nouveauté : une option pour masquer/afficher une section aux utilisateurs non connectés
L'option "Ne pas mettre de conteneur" est parfois utile si vous combinez plusieurs types de composants (section et colonnes par exemple) et que votre texte déborde
Les erreurs fréquentes : Les textes se chevauchent en version mobile
Si votre page contient des sections, évitez d'utiliser le paramètre "height", il vaut mieux laisser le comportement par défaut qui permet à la section de s'adapter au contenu - ainsi, si la largeur de l'écran varie, la hauteur du contenu va s'allonger...
Cette erreur courante peut être très facilement corrigée en supprimant le paramètre "height" de votre code correspondant à la section.
Sur cet exemple, plusieurs sections permettent de structurer la page :
une section avec une image de fond
une section avec un motif diagonale (paramètre texture)
une section avec un fond uni de couleur bleu
Les colonnes
Structurer le contenu
Le composant colonne vous permet d'insérer le code wiki pour 2, 3, 4, 6 ou 12 colonnes. L'écran étant divisable en 12 colonnes, à vous de moduler la taille et le nombre de colonne pour obtenir la structure souhaitée.
Paramètres
Vous choisissez le nombre de colonnes : 2, 3, 4, 6 ou 12.
Le code sera créé pour des colonnes de taille égale : si vous créez 2 colonnes, le code indiquera size=6 pour chacune.
Mais vous pouvez adapter. Par exemple pour 2 colonnes : 1/3 (size 4) + 2/3 (size 8)
