M2.1-c Webinaire

Ce webinaire aura lieu jeudi 24 février 2022 de 10h à 12h sur ce lien big blue button

Il sera co-animé par Mélanie Michel et Louise Didier.



Diaporama de présentation

Compte-rendu

Ordre du jour :

• • Intro
  • • règles du jeu de la visio
  • • tour de table : comment ça va toi et ton wiki ?
• • En 5 secondes chrono !
• • Visites commentées
• • Un texte à mettre en forme
• • Démo à la demande: izmir
• • Conclusion

En 5 secondes chrono !

Règle n°1 : Mettre l'utilisateur au centre du projet

La moyenne ou un utilisateur reste sur un site est de : 2'30 (appelé ausssi taux de rebond)

5" = c'est le temps pour que le cerveau décide, qu'il se fasse un avis sur un site.

Inviter l'utilisateur à être dans le confort au moins dans le wiki.

https://www.airbnb.fr/  : La home page est efficace, on comprend le message. 
décline une cible principale (voyageurs) et une cible secondaire (personnes qui peuvent louer leur logement).
Être au bénéfice de la clarté plutôt que l'information.
Pensez que vos wikis aussi vont être visités par différents types de personnes.

http://pratic-coop.wiki/moveagri/?PagePrincipale
La vidéo affiché sur la home page donne envie pour clarifier mais faut qu'elle remplisse la promesse.
beaucoup d'infos.
Difficile de savoir à qui ils s'adressent.
Surement qu'on arrive sur ce site en sachant ce qu'on cherche, quelqu'un de confiance nous a transmis le lien. 
Nos projets autour de la transition sont souvent complexes, et peuvent se resentir dans l'aspect fourtout.


Règle n°2 :Hiérarchiser le contenu
Quand on a un long texte, seulement les 1ères lignes vont être lues.
Le reguard saute pour aller au paragraphe suivant puis on saute encore et on lit de moins en moins en parcourant jusqu'à la fin.
Donc, essayons d'avoir des paragraphes qui correspondent à des idées, un paragraphe = une idée (avec des mots en gras). La 1ères lignes est essentielle, il faut bien bien la travailler.
questions de base : 

• • qui sommes nous
• • quel est le sujet
• • pourquoi
• • comment
• • où

lecture d'un simple texte en F
si la page est découpée l'oeil va plutot en Z
le plus important est en haut à gauche
point de fuite en bas à droite
point stratégique au milieu


ordi en paysage / smartphone en portrait
2 colonnes sur un ordi vont passer l'une en dessous de l'autre sur le téléphone
icone sur l'ordi ou F12 pour avoir un 1er apperçu de ce que ça donne sur smartphone mais aussi tester directement sur un téléphone

Quelques éléments de mise en forme et de navigation

La phrase d'accroche
https://aliment-actions.fr : "Remettons la nature et les solidarités au coeur de nos systèmes alimentaires" (slogan du projet - 12 mots) / "Bienvenue sur l'espace collaboratif du projet Aliment'actions" (accroche du site)

https://www.ajiter.fr : "le projet qui booste l'accueil des jeunes adultes et leurs initiatives dans les territoires ruraux" (identifiable tout de suite, un peu longue 15 mots)

3 mots de plus donnent une impression de phrase vraiment plus longue.
ça vaut le coup de passer du temps à rédiger cette phrase d'accroche

Le menu
http://cevennes-transition.fr/ : 11 éléments de menu ! se limiter à une ligne et à 7 éléments (5 c'est top)

https://www.forum-ess.fr/ : 5 éléments et menu déroulant pour amener vers plus de pages sans perdre en lisibilité.
Le menu a évolué parce que le même site a servi à différentes éditions du forum.

Le menu dans
https://www.forum-ess.fr/?WebTV qui reprend les titres et sous-titres de la page (on le trouve dans les composants de yeswiki : composants > actions avancées > créer un sommaire de la page)
menu principal souvent horizontal dans yeswiki : l'avoir en vertical est assez récent

Seulement menu principal en vertical : https://colibris-wiki.org/EkoActeurs/

Menu horizontal et vertical : https://www.ambition-littoral.fr/?PagePrincipale

Possibiliité de passer son menu de l'horizontal à la verticale, à voir plus tard.

Les liens
On doit lier les pages et le menu ne suffissent pas toujours : liens dans le texte, image cliquable ...

http://pro.etd-medoc.fr/ : mise en avant de 3 sujets avec 3 colonnes et 3 images.
Problème du bandeau cliquable qui n'amène nul part : bien configuré votre wiki parce que par défaut c'est cliquable et ça ouvre l'image en plus grand (annuler l'effet cliquable ou renvoyer vers une page intéressante).
Bord blanc et ombre portée : ça fait un peu à l'ancienne.
Les nouvelles options sont plus sympas (izmir ...).
Images pas très parlantes, il faut lire le texte sinon on ne comprend pas.

https://explor-valguiers.fr : Le site est propre : une image bandeau non-cliquable et trois images vectorielles, cela fait sobre.
2 chemins parallèles 
carte qui regroupe plusieurs types d'infos mais on peut trier
section rose avec un bouton "contribuer" : ça se détache bien

Structurer la page
https://nourriciers.tierslieux.net
https://rudi.datarennes.fr/yeswiki/ : intranet pro, liens vers d'autres outils dans le bandeau, sujet du moment bien mis en avant "En ce moment nous avons besoin de vous pour :", montrer que le projet bouge
https://www.habitatparticipatif-france.fr/?CommLocale : intranet du groupe de travail communication d'une grosse asso nationale organisé en onglets

Un texte à mettre en forme

https://ferme.yeswiki.net/demodoc/

Démo izmir

izmir permet de mettre en forme une image : au survol ...
plus de paramètres quand tu viens modifier ton image que quand tu viens de l'insérer
mode édition > crayon sur la ligne de code attach > paramètres avancées > izmir (tout en bas)
penser à "mettre à jour le code"