Les gares centrales 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 quel utilisateur 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...
Portraits d'utilisateurs
Le menu principal
La navigation intuitive est la clé si vous voulez vous assurer que les gens peuvent trouver ce qu’ils cherchent. Passer d’un point A à un point B devrait être aussi simple que possible.
Vous pouvez éditer votre menu principal (appelé menu haut dans Yeswiki) via le menu gestion du site.
Ne pas exéder 7 items différents dans votre menu principal.
Si votre menu est trop chargé, il est possible de créer un menu-déroulant en décalant d'un espace le lien des sous menus
Georges A. Miller, un psychologue cognitif de l’Université de Princeton a développé une théorie dans les années 50 :
✓ Selon cette théorie, les gens sont seulement capables de conserver en mémoire environ 7 unités de nouvelles informations « plus ou moins 2 », donc de 5 à 9 informations en mémoire à court terme.
✓ Actuellement ces estimations sont revues à la baisse.
Option
Utilisation de la barre latérale
Il est parfois nécessaire de mettre en valeur des informations redondantes ou des liens dans une colonne latérale (gauche ou droite au choix).
Vous avez la possibilité de choisir une structure de page différente : le squelette
squelette 1col-left.tpl.html pour afficher la colonne à gauche
squelette 1col-right.tpl.html pour afficher la colonne à droite
Ce changement est possible :
- soit au niveau de la page en modifiant le thème (voir tuto ci contre):
- soit sur plusieurs pages d'un coup en passant par Gestion du site / Look wiki
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.
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)
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, les explications ci-dessous s'appliquant de la même manière).
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 apparait à gauche, il permet de réafficher les paramètres du bouton. (voir demo ci-dessous)
Pour aller plus loin dans la mise en forme, vous pouvez cocher la case paramètres avancés
00:00 / 00:00
Autres mises en formes possibles
Les étiquettes
Nouveauté
Les étiquettes sont disponibles dans les composants. 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 choisi dans votre configuration graphique sont disponible pour les étiquettes (primaire, secondaire 1 et secondaire 2).
4 couleurs supplémentaires porteuse 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
Onglets
Les onglets permettent de lier un groupe de pages. Il peut être considéré comme un sous-menu. Mais à l'inverse du menu déroulant sur lequel il faut revenir cliquer pour voir les options, le sous-menu en onglets reste visible pour l'utilisateur, il constitue un bon point de repère.
Paramètres
Les onglets peuvent être affichés en vertical - c'est à dire à gauche de votre contenu....
Encadré
Mon texte accordeon
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é
- accordeon 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 Doc Background
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.
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 (!) à tester
tonalité : permet de jouer sur les contraste 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 colonnes
Structurer le contenu
Le composant colonne vous permet d'insérer le code wiki correspondant à 4 colonnes. L'écran étant divisable en 12 colonnes, à vous de le moduler la taille et le nombre de colonne pour obtenir la structure souhaitée.
Paramètres
Aucun paramètre proposés à ce jour.
Le nombre de colonnes et leur taille sont à adapter directement dans le code qui est proposé de base pour 4 colonnes.
Ci-dessous un exemple pour 2 colonnes 1/3 (size 4) + 2/3 (size 8)
