Index

M2.1-b Lectures : Les composants de mise en forme

image undraw_experience_design_eq3j.png (50.0kB)
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... Vous trouverez ici un aperçu des composants de mise en forme utilisables dans Yeswiki.
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.

image Capture_image_sous_menu.png (8.4kB)
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



Le nombre magique de Miller

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.



Icones et images

Les illustrations ont plusieurs vocations :
  • elles permettent de structurer le texte - un bloc de texte en pleine largeur sera fatiguant pour l'oeil et aura moins de chance d'être lu. Une image d'illustration permet de réduire la largeur de la colonne;
  • elles viennent capter l'attention - l'image illustre le paragraphe, elle attire l'oeil pour que l'utilisateur porte son attention au texte
  • elles représentent l'élément principal du style qui se dégage de votre site - et par extension l'image de marque de votre structure.
Télécharger le fichier photo_coeur_600px.jpgL'ajout d'une image dans Yeswiki permet de choisir l'alignement (gauche, droite, centre) ainsi que la dimension de l'image, le texte de remplacement (utile notamment pour les malvoyants : pour indiquer le contenu des images, l'attribut Alt leur est lu, au même titre que le reste de votre texte.). Dans un 2eme temps vous pouvez modifier le composant "attach" et bénéficier de nouvelles options : essayez notamment les effets izmir dans les paramètres avancés, il permet d'afficher le texte "Description" sur la totalité de la hauteur de l'image lorsque l'utilisateur survole l'image...


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.
image demo_bouton.gif (1.4MB)
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 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

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)


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 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

image etiquettes.png (15.8kB)

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....


image Capture_onglets.png (70.3kB)

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.

image Capture_encadres.png (21.1kB)

Les sections (ou bandeau)


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 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

image Capture_exemple_section.png (0.3MB)
Lien vers: https://www.forum-ess.fr/?Bilan2019

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)
{{grid }}
{{col size="4"}}
{{section bgcolor="#d0e0e3" class="text-left" height="300" }}
=====size 4===== {{end elem="section"}}
{{end elem="col"}}
{{col size="8"}}
{{section bgcolor="#d0e0e3" class="text-left" height="300" }}
=====size 8===== {{end elem="section"}}
{{end elem="col"}}
{{end elem="grid"}}


image Capture_colonnes.png (11.4kB)