S’y retrouver dans le framabazar, nous parler, nous soutenir : édition 2020

Vous ne l’avez peut-être pas remarqué car on ne s’en est pas vanté, mais certains de nos sites web ont connu de notables améliorations ces derniers mois.

Ainsi, notre page de contact et notre page de dons ont vu leur design (structuration des contenus, ergonomie, valorisation graphique, etc. ) évoluer et l’ensemble de nos sites sont désormais dotés d’un nouveau menu.

Avec cet article, nous voulons non seulement vous informer de ces mises à jour, mais aussi vous accompagner dans leur prise en main. Par ailleurs, l’ensemble de ces améliorations s’inscrit dans une démarche que nous avons envie de décrire, afin qu’elle puisse être ouverte à la critique ou, pourquoi pas, recevoir les hommages de la copie.

Un million de personnes à accompagner autonomiser

En général, quand on décide de mettre à jour un site web, c’est parce qu’on a constaté que des améliorations pouvaient y être apportées. Notre motivation première derrière ces améliorations est de permettre aux internautes utilisant nos services d’être davantage autonomes dans leurs usages. Après avoir présenté, notamment lors de la campagne Degooglisons Internet, les possibilités offertes par les logiciels libres, Framasoft souhaite offrir un accès plus simple et plus rapide à la galaxie des services, projets et ressources qu’elle met à disposition de toutes et tous.

Cette infographie présente Framasoft en janvier 2020… Donc dans le monde d’avant.

Accueillant chaque mois plus d’un million de visiteur⋅ses sur nos sites web, nous faisons le constat que nous ne pouvons accompagner humainement chacun⋅e dans la découverte de notre univers. Et parce que cet univers est foisonnant, nous sommes conscient⋅es que c’est souvent frustrant pour vous de ne pas bénéficier de cet accompagnement. Mais, contrairement aux géants du web qui appliquent un design de l’autorité sur leurs plateformes, vous mettant dans une position infantilisante d’hyper-consommateur⋅ices, chez Framasoft, nous vous considérons comme des contributeur⋅ices. Et c’est à ce titre qu’il est pour nous essentiel de repenser nos interfaces afin que vous puissiez, en toute autonomie, davantage vous y retrouver.

En parallèle, nous avons aussi constaté que nous recevons énormément de questions via notre formulaire de contact dont les réponses sont déjà publiées dans notre foire aux questions, dans les guides d’utilisation des outils que nous proposons ou bien sur notre forum d’entraide Framacolibri. Répondre à ces demandes (en renvoyant vers ces ressources) est une tâche répétitive assez peu valorisante pour les personnes en charge du support. En nous lançant dans cette refonte, nous avions donc aussi en tête la nécessité de cesser l’augmentation de ces demandes.

illustration : David Revoy (CC-By)

Cependant, simplifier l’accès à un ensemble de contenus nous a beaucoup questionné. Comment mettre cela en œuvre ? Comment ne pas tomber dans le piège du dédale de clics ? Comment autonomiser nos utilisateur⋅ices sans que cela créé avec elleux une relation froide et distante ? En gardant en tête que sur un site web, l’internaute doit identifier rapidement où il est (est-ce la page que je souhaitais voir ?), où il peut aller (vais-je pouvoir trouver facilement ce que je cherche sur ce site ?) et d’où il vient (quel chemin m’a amené à cette page ?), nous avons décidé de repenser totalement le menu de nos sites web et l’expérience d’utilisation de notre page de contact tout en améliorant la structuration des contenus et l’ergonomie de notre page de dons.

Une page de contact actualisée

Cette nouvelle page de contact vous informe dès votre arrivée de qui nous sommes et des moyens que nous mettons à votre disposition pour vous aider lorsque vous rencontrez des difficultés. L’accès au formulaire de contact n’est plus aussi immédiat qu’auparavant car nous espérons que vous n’aurez au final plus besoin de vous en servir, ayant trouvé l’information que vous recherchiez. C’est d’ailleurs en cherchant comment résoudre au mieux vos problèmes que nous avons trouvé comment résoudre le nôtre (l’augmentation de l’activité du support).

Notre page de contact, avant refonte

Vous l’aurez sûrement remarqué, nous avons revu totalement le design de cette page. Pour vous accueillir, la magnifique illustration de David Revoy se veut douce et rassurante. Car même si nous ne sommes pas en mesure d’accompagner humainement chacun⋅e d’entre vous, cette page de contact ne vous laisse pas seul⋅e face à votre question. C’est d’ailleurs en étant à l’écoute de vos besoins que nous avons reformulé les intitulés des six catégories de contact. En attribuant une couleur spécifique à chacune de ces catégories, vous pouvez vérifier à chaque moment de votre navigation que vous êtes sur le bon chemin.

Structuré en 4 étapes (pré-requis, service concerné, FAQ, formulaire), ce nouveau parcours est pensé pour que vous puissiez prendre connaissance des questions auxquelles nous avons préalablement répondu dans notre foire aux questions (FAQ) avant de nous contacter. Nous vous incitons aussi très fortement à consulter nos guides et astuces d’utilisation lorsque vous avez des questions sur un service en particulier. Nous avons d’ailleurs revu et enrichi les contenus de ces deux ressources pour qu’elles soient plus faciles à comprendre.

Notre page de contact, après refonte.

Si vous ne trouvez réponse à votre question ni dans la FAQ, ni dans nos guides d’utilisation, peut-être votre question vaut-elle la peine d’être publiée sur notre forum. Framacolibri est un espace d’entraide où de nombreuses personnes pourront vous aider à comprendre pourquoi vous n’arrivez pas à utiliser telle fonctionnalité de tel service. D’ailleurs, dans l’article Ce que Framasoft a fait durant le (premier) confinement que nous avons publié il y a quelques jours, nous rappelions que pendant cette période si particulière, une communauté d’aidant⋅es numériques avaient spontanément proposé leur aide sur le forum (merci à elleux !). Cette dynamique d’entraide collective ne s’est pas essoufflée et nous vous invitons à en faire l’expérience.

La catégorie « entraide » de notre forum des contributions.

Ce nouveau dispositif d’aiguillage (catégorie, faq, guides, forum) nous permet d’identifier au plus vite votre besoin afin d’y répondre au mieux en mettant en avant des ressources adaptées pour que vous puissiez vous les approprier. Mais il peut arriver que nos ressources ne répondent pas à votre besoin. Dans ce cas, ou si votre question doit rester confidentielle, qu’elle implique de devoir divulguer des informations personnelles et privées, alors nous vous invitons à utiliser notre formulaire de contact.

Un menu enrichi pour mieux vous orienter

Avant, tous nos sites web étaient dotés d’un menu situé, de manière très classique, en haut de toutes les pages. Ce menu vous permettait d’accéder à notre galaxie de sites web. Mais comme on est plutôt prolixe en la matière, ce menu avait grossi avec le temps et la multiplication de nos projets, ce qui ne le rendait plus vraiment utilisable facilement. C’était particulièrement le cas si vous vous rendiez sur nos sites web à partir d’un appareil mobile, doté d’un écran plus petit : certaines rubriques du menu étaient si longues qu’elles ne pouvaient s’afficher en entier. De plus, sur certains de nos services, cette barre de menu pouvait être perturbante car elle se superposait au menu de l’outil lui-même, pouvant troubler certain·es internautes.

La « framanav », le menu avant, lorsqu’il était une barre en haut de nos sites.

On a donc repensé totalement la façon dont vous pouvez accéder à nos contenus dans ce nouveau menu désormais accessible via un bouton situé en haut à droite de chacun de nos sites web. Placé ainsi, il ne perturbe plus l’affichage des menus des outils que nous proposons et il s’adapte de façon automatique à la taille de votre écran. Reproduit sur l’ensemble de nos sites web, ce nouveau menu vous permet de savoir d’un seul coup d’œil que vous êtes sur l’un des sites de la galaxie Framasoft. Une fois que vous avez cliqué sur ce bouton, une barre latérale s’affiche à droite, en surimpression du site sur lequel vous êtes.

Par défaut, ce menu vous est proposé selon une vue par catégories (4 en l’occurrence) pour favoriser la découvrabilité des actions de Framasoft. Vous avez la possibilité de modifier cet affichage en sélectionnant la vue sous forme de grille pour trouver plus aisément un service ou un outil spécifique (puisqu’ils sont classés par ordre alphabétique). Nous avons aussi ajouté un bloc de recherche où vous pouvez directement indiquer ce que vous cherchez. Lorsque vous utilisez la recherche directe, il vous est proposé d’étendre votre recherche sur le web ou à l’ensemble des sites de Framasoft, au Framablog, au forum Framacolibri, à l’annuaire Framalibre ou à notre instance PeerTube de diffusion de vidéos, Framatube.

Conceptualisée en 2012, la structuration du menu n’était plus pertinente au regard de l’évolution de nos projets. Nous nous sommes donc questionné⋅es sur la meilleure façon de vous mener vers nos différents outils. Pour cela, nous avons pris en compte des remarques qui nous ont été faites. Nous avons, par exemple, décidé d’archiver certains de nos projets, certes pertinents au moment de leur création, mais n’ayant pas été mis à jour depuis plusieurs années. De plus, nous avons souhaité que ce menu vous donne accès directement à davantage d’informations. Ainsi, vous n’avez plus besoin de vous rendre sur la page d’un outil ou d’un projet pour savoir exactement de quoi il s’agit.

En plus d’un accès totalement remanié à nos contenus, ce nouveau menu s’enrichit d’un bloc intitulé Entraide qui vous donne immédiatement accès à plusieurs ressources. Notez que les contenus qui apparaissent lorsque vous cliquez sur la rubrique « Obtenir des réponses » sont adaptés au service (ou projet) que vous êtes en train de consulter. Nous vous affichons l’information la plus adaptée à votre usage pour que vous puissiez y accéder en seulement 2 clics. Notez aussi que nous utilisons le même habillage graphique pour ces ressources.

Une nouvelle peau pour notre page de dons

Alors que ça faisait un moment qu’on y pensait (quasiment 2 ans), alors qu’il s’agit du fameux « nerf de la guerre » (Framasoft ne vit que grâce à vos dons), notre page de dons a finalement fait peau neuve, elle aussi. Nous avons repensé l’organisation des contenus afin de vous apporter plus facilement des réponses, mais sans vous surcharger d’informations.

Cette page se compose désormais de 4 blocs horizontaux :

On a cherché des jeux de couleurs chaleureux, sereins, et loin des bleu glacés de la french tech disruptive du digital ;)

Vous aurez peut-être remarqué que le design du formulaire de dons change désormais de couleur en fonction du type de dons (entourage jaune pour les dons mensuels et entourage bleu pour les dons ponctuels). Nous recevions de temps en temps un message de certain⋅es donateur⋅ices qui croyaient avoir complété leurs informations pour un don ponctuel alors qu’iels avaient réalisé un don mensuel. Nous nous sommes donc dit que cette différence n’était pas assez explicite sur le formulaire et que nous devions penser un nouveau design pour que cette situation ne se reproduise pas. C’est aussi suite à plusieurs de vos retours que nous avons ajouté à ce formulaire une case (cochée par défaut) « Je souhaite recevoir un reçu fiscal » qui automatise l’envoi de votre reçu fiscal chaque année.

En mettant à jour les textes explicitant à quoi servent vos dons, nous avons souhaité mieux expliquer comment nous fonctionnons, quelles sont nos principales actions et quelles valeurs nous portons. Ces textes sont moins longs, plus synthétiques, car nous voulons aller à l’essentiel. Nous avons repensé le bloc Framasoft en quelques chiffres pour ne faire apparaître que quelques chiffres-clés. Nous n’étions plus très à l’aise avec cet effet un peu racoleur de « performance » qui arrive lorsqu’on met en valeur certains chiffres. Nous avons choisi un affichage qui, nous l’espérons, rend sobrement compte de nos actions, sans se pavaner, et sans fausse modestie.

voir la page « Soutenir Framasoft »

Vos retours font leur chemin !

Ce n’est pas facile de réfléchir aux interfaces qui nous permettent de vous mettre en relation avec nos actions : voilà donc une bonne chose de faite ! On espère que vous partagez notre enthousiasme pour cette refonte.

Prenez le temps de vous approprier la nouvelle version de ces outils et n’hésitez pas, ensuite, à nous dire ce que vous en pensez sur le forum : ça nous permettra de réfléchir à de futures améliorations. Mais, ne vous emballez pas trop tout de même, on ne vous promet pas une nouvelle refonte tous les ans !

Un grand merci à l’équipe salarié⋅es pour le travail réalisé, et un grand merci à vous de continuer à nous soutenir.




Retour sur le premier Confin’atelier

Le samedi 25 avril dernier s’est tenu le premier Confin’atelier, premier Contribatelier en ligne, et ça a été un succès. Afin de valoriser cette belle initiative, nous republions ici le compte-rendu publié sur https://contribateliers.org/ et nous sommes ravi⋅es de vous annoncer qu’un second opus est en préparation ! La date est même fixée : ce sera le samedi 6 juin 2020 de 14h à 17h.

Alors qu’est-ce qu’on a fait pendant ce Confin’atelier, premier Contribatelier en ligne, et qu’est-ce qu’on en retient ? Plein de choses ! Allez on y va, on commence par le global et on détaillera pôle par pôle ;-). Ready ? Go !

Globalement

Déjà les chiffres qui nous réchauffent le cœur : plus 80 participant·es, 11 salons en simultané (10 salons pour les pôles et 1 pour l’accueil), 13 animateur·rices, plus de 3 heures de Confin’atelier : Wouhou ! On ne s’était pas fixé d’objectifs à atteindre mais même si ç’avait été le cas, on est plus que largement satisfait·es !

Autre chose notable : aucun souci rencontré concernant la technique. C’était un peu la crainte, qu’il y ait beaucoup de participant·es et que l’instance Big Blue Button de FAImaison soit surchargée. On avait même prévu un plan B si besoin, dans lequel on était prêt à migrer les salons de certains pôles sur une autre instance Big Blue Button pour absorber la charge. Au final RAS comme on dit, aucun pôle n’a subi de bugs, ralentissements ou autre : bref, on était bien à l’aise ! (bon on a aussi demandé à tou·tes les participant·es de ne pas utiliser leur webcam et de se contenter de l’audio : ça aide !)

Pôle par pôle

Le retour de chaque pôle a été rédigé par le ou les animateur·rices du pôle concerné, sauf pour le pôle accueil où c’est un participant qui a voulu nous faire part de son retour. Merci fabulousfabs !

Pôle Accueil

Pôle animé par MeTaL_PoU, Numahell & QuentinD

Du monde tout l’après-midi, le pôle accueil avait la lourde responsabilité d’accueillir sur le Confin’atelier, d’expliquer le fonctionnement de l’outil BBB, de guider les participant·e·s vers les différents pôles, de répondre aux questions. Ce pôle « tampon » était nécessaire et a été remarquablement bien orchestré par nos 3 ami·e·s ! Ambiance franchement sympathique, accueil chaleureux et patience dans leurs explications, MeTal_PoU & Numahell se sont données sans retenue sur le pôle accueil ! QuentinD gérait la comm’ sur les réseaux sociaux (de ce que j’ai compris, pour la première fois), et venait faire un coucou aux rares moments où il avait 5 minutes. Pendant ce temps, MeTal_PoU & Numahell prenaient leur temps pour dire bonjour, expliquer inlassablement le système de salons multiples, comment basculer vers un autre pôle, comment aider à régler / couper son micro sur BBB, tout cela sans jamais perdre le sourire (qui s’entendait) ou patience. Elles ont eu à cœur de laisser présenter les pôles aux responsables de salons qui en avaient le temps, permettant à nos 80 bonnes âmes de choisir où aller donner un coup de pattes. Bravo à vous 3 !

Pôle Framalibre

Pôle animé par Gavy

Environ une dizaine de personnes pour ce pôle autour de l’annuaire historique de Framasoft. On a commencé par une petite présentation de Framalibre – ce qu’est l’annuaire, ce qu’on peut y trouver et ce qu’on peut y faire – avant de voir comment y contribuer.

Au final, plusieurs comptes Framalibre ont été créés, des notices existantes ont été modifiées et de nouvelles sont apparues :

Notices crées :

Notices modifiées :

Si contribuer à Framalibre vous donne envie, le meilleur moyen pour commencer, c’est de venir en parler sur Framacolibri (le forum de Framasoft), dans la section dédiée à l’annuaire !

Pôle Design & Libre

Pôle animé par Maiwann

Une dizaine de personnes qui étaient présentes pour cet atelier visant à regrouper les designers ayant envie de faire bouger les choses coté logiciel libre ! Petite surprise : Il y avait aussi des personnes qui étaient plutôt développeurs et qui étaient en demande pour savoir comment trouver quelqu’un avec qui collaborer. Après plusieurs petites discussions sur « Pourquoi y a-t-il aussi peu de designers dans le monde du libre ? » nous avons décidé de faire un petit site afin de pouvoir renvoyer les différentes personnes intéressées par le sujet dessus \o/ Ni une, ni deux, entre celleux qui s’occupaient du contenu et celleux qui étaient lancés sur la technique, nous avons déjà une page à vous présenter regroupant des façons de nous contacter et des ressources autour du design : Foire aux questions, articles, témoignages de collaboration… C’est par là !! 🎉 => https://design-et-libre.frama.io/ Merci à celles et ceux qui ont participé à cet atelier 🥳

Pôle Communiquer pour des projets libres

Pôle animé par Pouhiou

La proposition était de faire un tour de table des expériences et besoins dans la communication pour des projets libres, puis de prendre chaque besoin un par un et de partager nos retours d’expérience dessus. S’en est suivie une conversation de 3h avec plus de 10 personnes présentes absolument passionnante. Une des problématiques récurrentes fut de trouver comment communiquer sans reproduire les codes du capitalisme de surveillance.

Ces échanges ont été sketch-notés par Chloé :

Reproduction dans ce billet de blog avec l’autorisation de Chloé. Merci !

Pendant les échanges, David Revoy nous a écouté (et est parfois intervenu) tout en dessinant en direct une nouvelle illustration de Sépia, lae poulpe-mascotte de PeerTube, dont nous avons appris à cette occasion qu’iel n’avait pas de genre (découvrez-la plus bas !). Le seul regret de l’animateur (Pouhiou) c’est d’avoir du mal à jongler entre son animation et ses envies de partager une grosse expérience accumulée au sein de Framasoft (et donc de monopoliser la parole). Merci à toutes les personnes qui ont contribué !

Pôle PeerTube

Pôle animé par Angie

Une douzaine de personnes ont participé à cet atelier portant sur la sélection de contenus de qualité hébergés sur PeerTube. Angie a commencé par expliquer qu’il était important de valoriser ces contenus pour en montrer la diversité. Ce travail de curation permet d’alimenter le bloc « Découvrez notre sélection de contenus » de https://joinpeertube.org/ Plusieurs participant⋅es ayant des questions sur le fonctionnement du logiciel PeerTube, nous avons passé un peu de temps à y répondre. Angie a ensuite rappelé quelques critères pour la sélection (contenus sous licence libre ou dont on a l’assurance qu’ils sont publiés par leur créateur) et proposé des outils permettant la recherche au sein des différentes instances de PeerTube et les participant⋅es se sont lancés dans la recherche de contenus. Au final, 14 nouveaux contenus (vidéos, chaînes et instances) ont été sélectionnés. Pour chacune de ces sélections, un texte de présentation a été rédigé. Ces éléments seront prochainement visibles sur la page d’accueil de joinpeertube. Cet atelier était vraiment chouette car il a permis à l’ensemble des participant⋅es de découvrir ces contenus mais aussi d’échanger sur le fonctionnement du logiciel et sur les modalités d’inscription sur une instance. A reproduire pour découvrir de nouveaux contenus !

La nouvelle illustration de Sépia, mascotte de PeerTube, realisée par David Revoy pendant le Confin’atelier (licence CC-BY)

Pôle OpenStreetMap

Pôle animé par gibro

Le pôle OSM a débuté par une présentation rapide de la carte OpenStreetMap : son modèle, ses principes de fonctionnement et les principaux outils de contributions. Il y a ensuite eu une démonstration du fonctionnement de la carte ça reste ouvert :

  • Utilisation de la carte => affichage des informations, codes couleur utilisés, choix des langues, mode daltonien
  • Explication de la fonctionnalité « Signaler un changement » => formulaire permettant d’ajouter directement les informations sur un lieu sans avoir besoin d’un compte OpenStreetMap
  • Résolution des notes générées par le site => à partir du site NoteReview avec le tag #caresteouvert permettant aux contributeurs de suivre les signalements « ça reste ouvert » et de renseigner les informations dans la base OpenStreetMap
  • Documentation avec les ressources mises à la disposition sur le blog caresteouvert et le wiki OpenSteetMap.

Pendant et après la démonstration, nous avons échangé en fonction des besoins et interrogations des personnes présentes. Il y avait une douzaine de personnes en continu dans le salon et plusieurs contributeurs pour l’animer (merci Sebbaz et Eric B). Nous avons aussi discuté de la possibilité de mettre en place un site web facilitant la saisie des informations sur les commerces sans passer par un compte OpenSteetMap, sur le modèle https://caresteouvert.fr ou https://wheelmap.org/ Pour conclure, j’ai trouvé très agréable et efficace l’outil BigBlueButton pour les démonstrations et les interactions avec les participants. Il était également intéressant d’être à plusieurs pour animer pour gérer les échanges sur le chat et l’ajout d’informations dans les notes en parallèle des démonstrations en partage d’écran.

Retour d’un participant :

Très bon accueil de Gibro :) Belle découverte de caresteouvert, ce qui m'a permis d'actualiser les informations autour de chez moi. Concret et pratique. J'avais aussi des questions plus générales de mises à jour de OSM, que j'ai pu mettre en pratique immédiatement grâce aux conseils avisés de Gibro et Fred, merci à eux. Pratique, concret, convivial, j'ai passé un très bon moment et j'ai pu pratiquer immédiatement pour faire des mises à jour, merci <3

Pôle Wiktionnaire

Pôle animé par Noé

Première session de contribution en ligne et une bonne expérience. L’exploration d’un dictionnaire n’était probablement pas l’expérience la plus séduisante, d’où l’affluence limitée, mais l’animateur a pu néanmoins contribuer et montrer l’intérêt du Wiktionnaire avec de l’ajout d’illustrations et d’exemples, et même créer de nouvelles pages. Un participant, motivé par la présentation a pu téléverser une de ses photographies pour illustrer la page du Wiktionnaire de la ville de Gafsa. L’envie d’en refaire et la hâte de reprendre les permanences mensuelles lyonnaises !

Pôle Wikipédia

Pôle animé par Lyokoi

Une session de 3h bien remplie et qui aurait pu durer si le présentateur ne tombait pas de fatigue et ne perdait pas sa voix à la fin. La session oscillait entre 4 et 6 personnes avec un pic de présence à 8. La première moitié (1h30) fut une présentation globale de Wikipédia, son fonctionnement, sa communauté, ses règles et surtout une visite de l’interface de contribution. Ponctuée par les questions des visiteurs et visiteuses, nous avons apporté des sources à des articles, nous avons découvert plusieurs aspects de la contribution (images, structuration, wikification, etc.) et avons noté dans le pad interne des liens importants. La deuxième partie était surtout consacrée à l’échange avec les participants et les participantes, via message ou via micro. Un contributeur de Lorient a pu se faire aider à monter un groupe local et plusieurs nouveaux et nouvelles ont pu faire leurs premières modifications (ainsi qu’un ancien qui s’y est remis). L’expérience a été très enrichissante et a donné l’envie de recommencer.

Pôle Piaf

Pôle animé par Guillaume

Une super ambiance, avec une dizaine de curieux qui voulaient en savoir plus sur le projet. Nous avons discuté des intérêts de construire des ressources pour créer des intelligences artificielles francophones, et également des façons de procéder. Puis nous avons tous ensemble contribué, en écrivant des questions réponses sur des articles Wikipédia. Avec quelques dizaines de questions réponses produites, Piaf en est maintenant à 7000 depuis le début du projet il y a quelques mois ! Bravo et merci à tous ! Et continuons de contribuer quand nous en avons le temps 🙂

Pôle Culture libre / Khaganat

Pôle animé par Zatalyz et GPSqueeek

Après une demi-heure à – nous ronger le clavier de peur de n’avoir personne – papoter, nous décidons de revenir faire un tour à l’accueil pour signaler qu’on était là et que c’était chouette de venir dans notre salon. Et ça a marché ! On a en effet eu la joie d’avoir le retour d’une contributrice qui nous a aidé·es à voir comment serait fait le système solaire dans l’univers du Khanat, et c’est pas rien ! Le Khanat serait probablement une lune d’une géante gazeuse, et ensuite il y a des histoires d’angle des plans orbitaux, de masse et de taille des différents astres. On espère un jour avoir de quoi montrer ce ciel dans Godot pour l’intégrer au futur jeu ! Ensuite on a eu plusieurs visites de curieuses dont certaines sont restées pour nous aider à commencer un article au sujet d’une bestiole qui avait été dessinée sur papier en Contrib’atelier en présentiel en fin d’année dernière. Ce n’est pas encore terminé mais il y a une bonne base pour avoir quelque chose de publiable bientôt sur notre wiki on espère ! Merci aux visiteuses et autres contributrices qui ont été toutes plus oniriques les unes que les autres (et chez Khaganat, c’est signe d’un tas de guimauves, accompagnées d’un tas de câlins si ça fait plaisir !).

Pôle Contribuer au libre pour les développeur·ses

Pôle animé par ervin

https://asso.framasoft.org/pic/xPP0qymR/jBZ96zfE.png

Nous avons eu 11 personnes présentes. Globalement les nouveaux venus étaient satisfaits et ont trouvé des projets auxquels contribuer. La durée n’a pas forcément permis de mettre des choses en production, mais le contact a été établi et certains des participants comptent continuer à contribuer. Beaucoup d’appétence pour une autre session. Les notes complètes dont le tour de table final : https://mypads.framapad.org/p/confinatelier-framadate-3m1pcq7p7

En conclusion

Pour nous ce n’est que du positif donc un immense merci à tou·tes celleux qui ont pris part à ce Confin’atelier :

  • Animateur·rices : merci pour la diversité des pôles et leur nombre !)
  • Participant·es : merci d’avoir être été autant de monde à répondre présent·es pour donner de votre temps pour le libre
  • Bénévoles de FAImaison : bah oui, pas de bénévoles FAImaison, pas de Big Blue Button, donc pas de Confin’atelier. CQFD ;-).

À bientôt pour le prochain ?  😉

 




Collaborer pour un design plus accessible : l’exemple d’Exodus Privacy

Quand on prend conscience qu’un site web destiné au grand public devrait être plus facile à aborder et utiliser, il n’est pas trop tard pour entamer un processus qui prenne en compte les personnes qui l’utilisent… L’association Exodus Privacy prend la plume sur ce blog pour raconter comment elle a, avec Maiwann, une UX designeuse, amélioré l’interface de sa plate-forme d’analyse.

Exodus Privacy est une association loi 1901, créée en octobre 2017 et dont le but est d’apporter plus de transparence sur le pistage par les applications de smartphones. Dès le premier jour, le public visé était un public non-technique, afin de lui permettre de comprendre et de faire des choix éclairés.

Parmi les outils que nous avons développés, la plateforme εxodus permet d’analyser les applications gratuites du Google Play store et d’en indiquer les pisteurs et les permissions. Cette plateforme a été très utilisée dès son lancement, mais elle n’était pas facile d’utilisation pour les néophytes.

Comme nous n’avions ni le temps ni les compétences en interne, nous avons décidé de rémunérer une personne experte pour adapter notre plateforme à ce public de non-spécialistes. Il nous paraissait important d’avoir une personne qui comprenne qui nous sommes et quelles sont nos valeurs, nous nous sommes tourné·e·s vers Maiwann, UX designeuse.

Exodus Privacy : Maiwann, peux-tu expliquer qui tu es et ce que tu fais ?

« Bonjour, bonjour ! Je suis Maiwann, UX·UI Designer dans la vie, amoureuse du libre et du travail éthique. Je suis aussi membre de Framasoft depuis quelques mois. Je fais beaucoup de choses variées au niveau numérique, mais qui peuvent se résumer en : du design (au sens « conception » du terme).

Du coup je vais rencontrer des utilisateurs et utilisatrices, leur poser des questions pour comprendre quels sont leurs besoins et leurs frustrations, les observer utiliser des logiciels et voir où ça coince, puis je réfléchis à la manière de répondre à leurs problèmes en concevant des parcours fluides. Et enfin je peux faire des maquettes graphiques pour donner un peu « corps » à tout ça ^_^ C’est d’ailleurs exactement ce qu’il s’est passé ici ! »

D’abord, définir les personnes concernées…

Ce projet devait se dérouler en plusieurs phases et il partait bien des besoins du public. Pour mieux comprendre cette étape, voici un petit extrait d’une conversation de septembre 2018 entre Exodus Privacy et Maiwann :

Maiwann : Quel est votre public-cible ?
Exodus Privacy : Le grand public, bien entendu !
Maiwann : il va falloir préciser un peu plus, car à s’adresser à tout le monde on ne s’intéresse véritablement à personne 🙂

Cela nous a obligé·e·s à réfléchir justement à ce que nous mettions derrière ce terme qui nous paraissait pourtant si évident. Nous avons donc défini deux groupes plus précis de personnes.

Nous voulions tout d’abord faciliter la vie aux médiateurs et médiatrices numériques car nous sommes convaincu·e·s que ces personnes sont les mieux placées pour pouvoir accompagner le plus grand monde à mieux appréhender les outils numériques. Nous les avons donc incluses dans les personnes visées.

Nous avons co-délimité une deuxième cible : des personnes non-techniques et curieuses, prêtes à passer un peu de temps à réfléchir à leur vie privée sur téléphone.

Puis formuler les besoins

Le mois de janvier 2019 a permis à Maiwann de mener 14 entretiens avec des personnes correspondant aux profils sus-cités, trouvées par le réseau d’Exodus Privacy ou par les réseaux sociaux :

 

Laissons Maiwann raconter cette étape :

« Grâce aux réponses sur les réseaux sociaux et sur Cryptobib et Parcours numérique, des listes de diffusion pour médiateur·ices du numérique, j’ai pu discuter avec les 2 catégories de public que nous avions définies ! Ensuite, pour chacun·e, il s’agissait de s’appeler soit par téléphone soit en visio-conférence, de vérifier qu’iels étaient bien dans le public visé, et de discuter pendant à peu près une heure. L’idée était de voir où étaient les manques, pour savoir de quoi εxodus avait besoin prioritairement : une refonte du site ? De l’application ? Une campagne de communication pour faire connaître leurs actions ? Ce sont les entretiens qui allaient nous permettre de le savoir !

Je demandais aux médiateur·ices comment est-ce qu’iels menaient leurs ateliers, et comment la question du téléphone était abordée. Et j’ai découvert que, si le discours pour protéger sa navigation sur un ordinateur était très rodé, le téléphone était un sujet compliqué car… les médiateur·ices n’avaient pas de réponse lorsqu’on leur demandait comment agir !

C’était d’ailleurs un cas identique pour les personnes qui répondaient individuellement : elles avaient bien conscience de l’enjeu de vie privée vis à vis de leur téléphone, même si ce que faisaient ces pisteurs n’était pas toujours très clair, mais ne voyaient de toute façon pas du tout ce qu’il était possible de faire pour améliorer les choses !

Après tous ces appels, j’avais de grands axes récurrents qui se dégageaient. J’ai donc dessiné un petit résumé schématique, et nous nous sommes appelé·e·s le 28 février pour discuter de tout ça et de ce sur quoi on partait. »

 

Une fois le diagnostic posé (il y a X pisteurs dans telle application), la personne se retrouve bloquée avec des questions sans réponses :
– Ok, il y a des pisteurs, mais on fait comment pour faire autrement ?
– Qu’est-ce que ça fait réellement, un pisteur ?

Ces questions, que nous avions par ailleurs régulièrement en conférence, par mail ou sur les réseaux sociaux, nous ont permis de nous interroger sur le positionnement de l’association. En effet, nous avons toujours défendu une démarche scientifique, qui montre « les ingrédients du gâteau », mais ne porte pas de jugement de valeur sur tel pisteur ou telle application… et donc ne valorise pas de solution alternative.

Après discussions, nous avons convenu de l’importance de pouvoir apporter des outils de compréhension à ces personnes, afin que celles-ci puissent, encore une fois, décider en connaissance de cause. L’idée était donc de créer une page qui explique les pisteurs, une page qui explique les permissions et enfin une qui répond à la question « et maintenant, que puis-je faire ? », en proposant un panel d’outils, de réflexes et de ressources.

La conception des maquettes

C’était donc à nouveau à Maiwann de travailler. Tu nous racontes comment tu as débuté les maquettes ?

« J’ai repris les schémas-bilans des entretiens pour définir les parcours principaux des utilisateur⋅ices :

Arriver sur le site => Chercher le rapport d’une application => Comprendre ce qu’est un pisteur ou une permission => Trouver comment améliorer la situation.

L’enchaînement entre ces actions devait être facilité dans le nouveau parcours, et le contenu non-existant (ou non intégré) mis en avant. Par exemple, pour « qu’est-ce qu’un pisteur », εxodus avait déjà réalisé des vidéos que les entretiens avaient tous remontés comme « très bien faites » mais comme elles n’étaient pas intégrées au parcours, beaucoup d’utilisateurs·ices pouvaient passer à côté. Pour la page Alternatives en revanche, qui était la demande la plus forte, tout a été créé depuis zéro, en privilégiant les alternatives accessibles aux non-informaticien·ne·s et tout de même respectueuses de la vie privée.

Il m’avait aussi été remonté que parfois les formulations n’étaient pas très claires, parfois en anglais ce qui contribuait à un sentiment de contenu non-accessible à des néophytes. Cela a fait aussi partie des améliorations, en plus des pages explicatives, qui sont là pour dire « vous ne savez pas ce qu’est un pisteur ? Pas de souci, on vous l’explique ici ».

Et pour le reste, un travail d’harmonisation et de hiérarchisation du contenu pour que les différentes catégories de contenus soient bien distinctes les unes des autres et compréhensibles a permis de réaliser une refonte graphique aux petits oignons ! »

 

Le développement des maquettes

L’ensemble des membres d’Exodus Privacy étant bénévole, et donc le travail conséquent pour notre énergie et temps malheureusement limités, nous nous sommes mis d’accord sur un travail de développement itératif afin de mettre à disposition des utilisateurs et utilisatrices les nouvelles pages et fonctionnalités au plus tôt.

Après la présentation des maquettes en mai 2019, nous avons découpé les différentes tâches sur notre git, celles-ci ont été priorisées pour s’assurer que les besoins les plus importants soient traités en premier lieu, comme la page « mieux comprendre ». La majorité de ces tâches ont été implémentées, ce travail étant agrémenté d’allers-retours avec Maiwann afin de s’assurer que nous allions dans la bonne direction sans rater l’essentiel.

Notre code étant libre et open-source, une partie des fonctionnalités a même été faite par notre communauté !
Une partie du travail reste à faire, n’hésitez pas à aller jeter un œil si vous avez des compétences en développement !

 

Fiche météo-france "avant"
Fiche d’Exodus pour l’application Météo-France avant

 

La fiche de l’application Météo-France après travail d’UX

Et maintenant ?

Le travail n’est pas totalement terminé et, grâce au Mécénat de Code lutin, nous avons pu poursuivre ce projet de refonte, mais pour l’application cette fois.

Laissons donc les mots de la fin à Maiwann…

« Il reste une étape de test utilisateur·ice à réaliser, pour bien vérifier que cette refonte va dans le bon sens, est adaptée aux besoins et que nous n’avons pas oublié un élément important, ou laissé un trou dans la raquette dans lequels les utilisateur·ice·s vont s’engouffrer !
De même, nous avons amorcé un travail d’harmonisation de cette refonte pour que l’application corresponde aussi aux maquettes, car c’est le point d’entrée principal du public (puisqu’il est question d’applications et de téléphone portable, c’est logique qu’elle soit privilégiée !).

J’ai hâte de réaliser ces dernières étapes (avec l’aide de Schoumi côté application !) pour finaliser ce super projet, car il contribue à démontrer qu’il est possible de réaliser des choses techniquement pointues, tout en parvenant à les rendre accessibles à des personnes non techniques, soit directement en s’adressant à elles, soit en fournissant un outil pertinent pour les médiateur·ices du numérique.

Cela contribue à mon monde idéal qui connecte le monde du libre et de la protection de la vie privée aux non-connaisseur·euse·s, et je ne peux qu’encourager d’autres projets qui ont cette démarche de travailler avec des designers pour y parvenir ! »




Des Framapads plus beaux, grâce à une belle contribution

Framapad, c’est un de nos plus anciens services. C’est une page d’écriture, en ligne, ou vos ami·e·s peuvent venir collaborer en direct à la rédaction d’un texte. Un « Google docs », mais sans Google, sans pistage et même sans inscription !

C’était déjà pratique…

Le principe est simple : vous allez sur Framapad.org, vous décidez de la durée de vie de votre pad et de son nom, vous cliquez sur « Créer un pad » et… ayé, vous êtes dessus. Il ne vous reste plus qu’à choisir votre pseudo (si vous voulez que vos potes vous reconnaissent) et votre couleur d’écriture !

Oh, et si vous avez des ami·e·s (ou juste des gens avec qui vous collaborez, hein), il vous suffit de leur copier/coller l’adresse web du pad dans un message pour qu’iels viennent travailler avec vous sur votre texte, chacun avec son pseudo, chacune avec sa couleur d’écriture. Quand on arrive, ça ressemble à ça :

 

Framapad n’est pas développé par nos soins : c’est une instance (une installation sur un serveur) du logiciel libre Etherpad (ou Etherpad-lite pour être précis), et vous pouvez retrouver d’autres instances hébergées par La Quadrature du Net, le chaton Infini, les activistes de RiseUp et bien, bien d’autres !

… et maintenant c’est Beau !

Nous venons de procéder à une mise à jour d’Etherpad (vers la version 1.7.5) sur nos serveurs… Et désormais, Framapad, ça ressemble à ça :

 

Alors oui, c’est un peu injuste, car derrière cette mise à jour il y a de nombreuses contributions qui rendent le code plus solide, plus résilient, plus pratique aussi… Mais forcément, les changements esthétiques sautent aux yeux. Et en même temps, dans un milieu du logiciel libre qui (souvent) peine à améliorer l’expérience des utilisatrices et utilisateurs, il nous semble important de le faire remarquer !

Grâce à quelques modifications de CSS (les feuilles de styles des sites web), Etherpad est devenu plus lisible, plus aéré, plus pratique à utiliser. Cela signifie concrètement que vous aurez beaucoup moins de « non mais je veux pas utiliser ton truc, c’est moche et je comprends pas » lorsque vous proposerez une telle alternative à GoogleDocs !

Pour la petite histoire contributopique

Cette contribution qui améliore le look et la lisibilité d’Etherpad, nous la devons à Sébastian Castro, développeur principal de GoGoCarto, et mrflos, connu du monde du libre pour être le co-auteur de YesWiki. C’est en leur qualité de Geeks du Mouvement Colibris qu’ils se sont intéressés à Etherpad. En effet, nous accompagnons depuis deux ans déjà ce mouvement dans sa démarche de dégoogliser les pratiques de ses plus de 300 000 membres. C’est dans ce but que mrflos leur a concocté le site colibris-outilslibres.org qui rassemble plusieurs services libres :

Seulement voilà : fidèles à la devise du mouvement auquel ils participent, Sébastian et mrflos n’ont pas voulu simplement « utiliser » Etherpad, mais ils ont souhaité faire leur part. Et c’est ainsi qu’après avoir fait des tests et des bidouilles pour améliorer le look de l’Etherpad des Colibris, mrflos a fait remonter leur contribution à la communauté.

 

Après plus de 3 mois d’affinages du code, de discussions (plus de 60 commentaires variés sur la proposition), la contribution a trouvé sa place dans le code officiel d’Etherpad, et pourra être plus facilement utilisée par des milliers d’utilisateur·ices.

Depuis la sortie de la nouvelle version (la 1.7.5), toutes les instances Etherpad (dont Framapad) peuvent désormais profiter d’un thème plus clair, lisible, et qui facilite l’adoption d’outils libres par un plus grand nombre de gens !

Une fois encore, ceci n’est qu’une des milliers d’histoires de contributions libres que l’on pourrait raconter. Elle montre simplement que, lorsque l’on part à la rencontre de communautés différentes de la sienne, cela donne lieu à des contributions que nous n’aurions pas forcément imaginées ;).




Et si on tenait compte des utilisateur·ices dans les projets libres ?

Eh oui, chez Framasoft, on n’a pas peur d’utiliser des titres (légèrement) provocateurs — certain·e⋅s diraient même pièges à clic — quand on a envie de vous parler de sujets que l’on juge vraiment importants.

Et aujourd’hui c’est… l’UX Design dans les projets libres !

« UX-kwa ? Un logiciel libre, c’est créer du code qui fonctionne sans bugs, lui mettre une licence libre et c’est bon, non ? »
Alors, oui, mais pas que. Du coup on va faire le point avec vous sur ce qu’est l’UX Design et pourquoi c’est important (surtout pour le libre).

Et pour ça, on va vous raconter une première expérimentation réalisée lors du Framacamp !

Framacamp : la colonie de vacances de Framasoft ?

Il y a deux évènements annuels très très importants pour Framasoft :

  • l’Assemblée Générale de l’association (AG), où on va faire les bilans moraux et financiers, ainsi que définir les actions et les campagnes à venir,
  • et le Framacamp !

Le Framacamp, c’est l’occasion pour les salarié·es et les membres de l’asso de se réunir de manière conviviale pour se rencontrer, tisser des liens, boire des coups, délirer et surtout débattre, faire avancer les projets et expérimenter.

Au cours du Framacamp, Maïtané a proposé un atelier « Méthodes UX » pour présenter 4 méthodes utilisées par les UX designers et les faire tester aux développeur·ses sur place.

Alors déjà, c’est quoi l’UX Design ? UX Design, ça veut dire User Experience Design en anglais, ce qui revient à Design de l’Expérience Utilisateur·ice en français. C’est une discipline qui a pour objectif de prendre en compte les besoins, les attentes et les usages des utilisateur·ices visé·es pour proposer un service ou outil qui leur convient le plus possible et leur proposer une expérience positive. C’est donc très loin de « juste » réaliser des maquettes graphiques !

Pourquoi parler d’UX avec des devs ? Parce que tout le monde est convaincu chez Framasoft que le logiciel libre c’est bien, mais s’il est utilisé par un maximum de personnes c’est quand même mieux. Et il n’y a pas moyen de demander aux utilisateur·ices d’utiliser des logiciels qui ne sont pas correctement conçus, ou qui ne prennent pas en compte leurs besoins.

C’est un peu ça. L’UX, c’est créer des logiciels :

  • utiles (car ils apportent de la valeur aux utilisateur·ices) ;
  • utilisables (car ils peuvent être utilisés sans provoquer (trop) de frustration) ;
  • et utilisés (car du coup les utilisateur·ices ont envie de… les utiliser !).

 

Du coup, pour comprendre ce qui se passe dans la tête des utilisateur·ices, les UX designers ont tout un panel de méthodes et de techniques. Au cours de cet atelier « Méthodes UX », nous en avons testé quatre :

  • Le test des 5 secondes
  • L’AttrakDiff
  • Les courbes d’évaluation UX
  • Les tests utilisateur·ices.

Il existe évidemment un très grand nombre de méthodes, selon les étapes du projet, les objectifs visés, le nombre de participant·es (présent·es ou à distance), etc. Si vous souhaitez en découvrir d’autres, nous vous conseillons l’excellent ouvrage Méthodes de Design UX : 30 méthodes fondamentales pour concevoir et évaluer les systèmes interactifs, de Carine Lallemand et Guillaume Gronier.

 

Les méthodes de cet atelier ont notamment été choisies en s’inspirant de l’atelier qu’ils ont donné ensemble à ParisWeb 2015.
Il s’agit de méthodes plutôt simples à comprendre et complémentaires pour prendre le pouls de son projet du point de vue de l’expérience utilisateur.

Note anti-troll : les participant·es étaient quasi exclusivement des membres de Framasoft, donc pas vraiment représentatif·ves du public réel des outils testés, nous en sommes bien conscient·es. En temps normal, on aurait dû composer un panel réaliste de participant·es mais on n’avait pas d’autres cobayes sous la main !

Le test des 5 secondes

Pour tester quoi ?

La première impression qu’ont les utilisateur·ices en voyant une interface.

Comment on fait ?

On montre un écran d’une interface (logiciel, application mobile, site web, …) pendant 5 secondes, puis on pose quatre questions, qui permettent de connaître les a prioris des utilisateur·ices lorsqu’ils découvrent l’interface, et ce qu’ils en retiennent. Pratique si vous voulez savoir si votre interface est compréhensible au premier abord.

Cas pratique

Maïtané nous a fait essayer cette méthode sur une maquette d’interface de création de pads collaboratifs.

Maquette de l’interface de création de pads collaboratifs du Mouvement Colibris — Chez Framasoft, on propose le même service via https://framapad.org

 

Nous avons donc eu 5 secondes de visualisation de la page avant de pouvoir répondre aux questions.

Et là… révélation ! Sur la troisième question (définir les objectifs du système), on s’est aperçu qu’une des fonctionnalités n’était pas claire pour tout le monde.

Et donc, en à peu près 3 minutes de test, sur un groupe d’à peine 10 personnes, nous avions déjà relevé un problème d’ergonomie suscitant de l’incompréhension chez plusieurs d’entre nous, malgré l’interface très simplifiée. Pas mal pour un début !

Et si vous avez plusieurs prototypes, cette méthode peut permettre de soumettre chacun à un groupe différent pour comparer les résultats :

Les trois visuels ont été réalisés par Kristof Dreano, graphiste des Colibris, et sont disponibles sous licence Creative Commons BY SA.

L’AttrakDiff

Pour tester quoi ?

Pour analyser quantitativement l’expérience utilisateur, suivant ses qualités pragmatiques (j’ai l’impression que le produit me permet de réaliser ma tâche facilement) et hédoniques (j’ai envie de l’utiliser, ça me fait plaisir de l’utiliser)

Comment on fait ?

L’AttrakDiff est un questionnaire standardisé, il y a donc « juste » à récupérer la grille de questions, la grille d’analyse  et hop ça fait des Chocapics !

 

 

 

Un exemple de rendu final :

Source : UXmind.eu

Cas pratique

Pour l’atelier lors du Framacamp, on a pris le cas de Framadate avec une grille de questions plus réduite que celle normalement utilisée. Après un rapide dépouillement des résultats, on découvre sans trop de surprise que Framadate est un outil très « orienté tâche », c’est à dire fonctionnel et pragmatique mais qu’il lui manque un aspect attractif et procurant une expérience plus positive. Une tendance courante du libre ?

Les courbes d’évaluation de l’expérience utilisateur·ice

Pour tester quoi ?

Les courbes vont représenter, au cours du temps, les ressentis des utilisateur·ices sur différents points (que se soit l’expérience utilisateur·ice générale, son attractivité, sa facilité d’usage, …), ce qui permet d’avoir une vision sur la durée des différentes améliorations et détériorations !

Comment on fait ?

On demande à l’utilisateur·ice de tracer une courbe, en mettant en abscisse sa relation envers le produit (de « très positive » à « très négative ») et en ordonnée le temps. Dans l’idéal, elle place à certains endroits les événements marquants de son expérience, pour que l’on sache à quoi est dû un changement de direction de la courbe.

Cas pratique

Vous pouvez le faire chez vous, là, tout de suite ! Un papier, un crayon, et vous pouvez noter l’évolution dans le temps de votre rapport à Twitter par exemple ! Ce qui est assez marrant à voir, c’est la dégringolade de l’adhésion à Twitter lorsque Mastodon est apparu, mais vu le public testé ce n’était pas très étonnant. 😉

Le meilleur pour la fin : les tests utilisateur·ices !

Pour tester quoi ?

Ben, ce que tu veux, en fait !

Comment on fait ?

On demande à l’utilisateur·ice de réaliser une « mission » qui est cohérente avec sa potentielle utilisation du logiciel. L’idéal c’est de le-la laisser assez libre, pour observer de quelle façon iel va remplir sa mission (on peut être surpris !). Ensuite, on lui demande de bien vocaliser ce qu’iel fait, pour qu’on puisse suivre son schéma de pensée.
Du côté des développeurs·euses, il est très important de ne pas intervenir au cours du test. Même si ça vous démange « mais le bouton est juste là ! »  et qu’on a très très envie de le montrer à l’utilisateur·ice. Le mieux à faire c’est de prendre des notes sur papier et de débriefer à la fin du test, une fois la mission remplie (ou son échec constaté).

Cas pratique

C’est le moment de laisser les développeurs en parler 😉

Et les développeurs, ils en ont pensé quoi ?

Interviewés : Luc, Thomas, Florian, Benjamin, Marien.

Salut à tous ! Pour commencer, vous pourriez vous présenter rapidement ainsi que vos projets ?

Florian : Salut ! Ici Florian aka mrflos, développeur web du mouvement Colibris, une association d’éducation populaire qui inspire, relie et soutient des personnes qui se mobilisent pour la construction d’une société plus écologique et plus humaine. Afin d’outiller nos membres avec des logiciels et services libres en adéquation avec nos valeurs, nous avons rejoint le collectif des CHATONS et nous proposons la plateforme https://colibris-outilslibres.org à toutes et tous.

Je suis par ailleurs co-auteur et principal mainteneur de https://yeswiki.net , un wiki ouvert et simple, avec des possibilités de base de données avec des restitutions variées (trombinoscope, cartes, agenda…)

Thomas : Salut ! Je suis Thomas alias tcit, développeur web au sein de Framasoft, une association promouvant les logiciels libres et plus largement l’univers libre. Nous avons dernièrement lancé une campagne Contributopia qui vise notamment à concevoir autrement des outils numériques. En dehors d’être responsable d’une bonne partie des outils Framasoft, dont certains ont été créés ou largement améliorés, j’ai aussi été mainteneur des logiciels wallabag (un service de lecture différée) et Nextcloud (une alternative à Dropbox et Google Drive).

Benjamin : Hello ! Ici Benjamin (ou encore bnjbvr), ingénieur logiciel chez Mozilla sur la machine virtuelle JavaScript / WebAssembly qui tourne dans le célèbre Firefox. Sur mon temps libre, je suis un peu membre de Framasoft où j’essaie d’organiser des ateliers de contribution au logiciel libre ouverts à tou.te.s, au sens large, en essayant d’attirer des personnes qui n’y connaissent pas grand chose. Je développe également Kresus, une application web de gestion de finances personnelles libre et auto-hébergeable, pour pouvoir comprendre comment notre argent est dépensé, comme une alternative aux apps Bankin ou Linxo.

Marien : Salut, pour ma part je suis Marien (alias, hum… Marien), ingénieur dans une boite qui s’appelle Sogilis et où je fais beaucoup de choses, mais notamment du développement d’applications web sur mesure. Je suis aussi membre de Framasoft : j’y maintiens Framaboard et je passe un peu de temps à consigner tout ce qu’il se passe au sein de l’asso dans notre wiki. Je réfléchis aussi à comment décloisonner les développeurs du Libre des sujets techniques (cet atelier tombait donc à pic !). Enfin, je développe Lessy, un logiciel de gestion de temps et j’ai été le développeur principal de FreshRSS, un agrégateur d’actualités, qui est depuis passé dans les mains d’une communauté active.

Luc : もしもし! (oui, Luc se met au Japonais, il a sûrement écrit un truc très chouette mais on n’a rien pané — NDLR)

Moi c’est Luc, alias (frama)sky, adminSys de Framasoft, et développeur aussi. J’ai notamment écrit Lstu, Lutim, Lufi et Dolomon, qui sont utilisés chez Framasoft sous les noms Framalink, Framapic, Framadrop et Framaclic.

 

L’UX, ça te parlait avant l’atelier ? C’était quoi pour toi ?

Florian : Comme je ne suis pas un très bon développeur, je compense en essayant de piocher dans les gros sites, des idées d’interfaces efficaces. Je me suis vite rendu compte que cela allait au delà de l’interface, et que c’était la convivialité de l’outil et l’expérience dans sa globalité qui faisait qu’on l’adoptait.

Pour moi, l’expérience utilisateur est primordiale, car si le but est d’amener nos utilisateurs à contribuer, il faut leur faciliter la tâche, et la moindre expérience négative peut facilement démotiver. D’ailleurs assez souvent les utilisateurs ne reprochent pas le manque de fonctionnalités d’un logiciel libre par rapport à son concurrent non libre, mais le fait qu’il soit plus difficile à utiliser (ou moins ergonomique).

Thomas : De même, la prise en compte de l’aspect convivial lors de mes développements se résumait à piocher des bonnes idées ici et là, suivre quelques pistes d’amélioration pour que certains aspects soient plus accessibles et des actions plus faciles à réaliser. J’avais largement conscience des manques que j’avais sur ces points.

Benjamin : J’ai eu l’occasion de discuter avec des designers, notamment parce que l’équipe de Kresus désirait avoir un nouveau logo. Alors que je pensais qu’il allait s’agir simplement de choix esthétiques, nous nous sommes retrouvés à parler d’aspects de bien plus haut niveau, comme les émotions que l’on voulait transmettre, ou les principes que devait respecter l’application. Même si ça relève du design, ces aspects se transposent également très bien à l’UX, et cette discussion a été le point de départ d’une réflexion plus globale pour re-prioriser certaines fonctionnalités et certains manques de Kresus. Par ailleurs, certains retours de personnes expérimentées en UX design nous avaient bien résumés l’intérêt de l’UX : un élément d’interface ou une action peu claire ou compliquée, c’est une incompréhension ; et une incompréhension, c’est une question au mieux (donc du support à effectuer), un blocage au pire (donc un.e utilisateur.ice perdu.e). Ce discours m’a marqué et incité à me plonger encore plus dans le sujet.

Marien : J’ai la chance de travailler dans une boîte qui employait déjà une UX/UI designer lorsque je suis arrivé. Aujourd’hui j’ai deux autres supers collègues ergonomes et/ou UX designers avec qui je peux travailler et échanger (je recommande d’ailleurs leurs « ergogames » lors desquels j’ai appris et pu mettre des mots sur plein de concepts), j’étais donc déjà plutôt bien rodé avant cet atelier et persuadé des bienfaits de l’UX. Pour moi, toute l’importance de cette discipline est de remettre l’utilisateur·ice au centre des préoccupations du logiciel : on cherche avant tout à comprendre ses problèmes et ses besoins. Ça peut paraître idiot dit comme ça, mais bien souvent j’ai affaire à des utilisateurs qui expriment leurs problèmes à travers des solutions qu’ils ont eux-mêmes imaginés. Le problème c’est qu’ils ont toujours une connaissance limitée de ce qui peut se faire (et moi aussi !) La complexité consiste à faire abstraction de ces solutions pour essayer d’en imaginer une qui sera potentiellement mieux adaptée aux besoins exprimés bien souvent indirectement. C’est là tout le talent de l’UX designer. 🙂

Une autre chose que j’apprécie – et c’est assez contradictoire avec mon statut de développeur – c’est que ça nous fait redescendre de notre piédestal. Dans les projets de logiciels libres, le développeur est toujours celui qui imagine, décide et code ; ça ne fait pas de mal de se remettre en question parfois ! Et puis nous avons déjà suffisamment de responsabilités comme ça (« Code is Law » comme dirait l’autre), pas la peine de nous en rajouter.

Luc : Oui… et non. Oui, parce que je savais que ça existe, non parce que je n’avais pas le temps de me pencher dessus.

 

Est-ce que tu avais déjà appliqué ou envisagé d’appliquer des méthodes UX sur tes projets ? Est-ce que par exemple tu avais déjà fait des tests utilisateur·ices auparavant ?

Florian : Au sein des contributeurs YesWiki, certains avaient déjà fait des tests utilisateurs, mais moi-même, je n’avais pas eu l’occasion de tester. J’avais entendu parler d’une méthode rigolote, qui consiste à tester un site en étant complètement saoul pour voir si la navigation était facile ! Une version plus « sobriété heureuse » consisterait à juste plisser les yeux et voir si vous arrivez à naviguer sur votre site, ou sinon http://www.drunkuserexperience.com/?url=https%3A%2F%2Fframasoft.org .

Thomas : Il y a quelques mois je ne désirais rien de plus que des mockups tout faits que j’aurais juste à intégrer. Aujourd’hui j’ai compris qu’il est préférable d’avoir un processus d’accompagnement, de travail itératif en collaboration et en discutant avec quelqu’un ayant les compétences.

Les seuls tests utilisateurs que j’aie effectués dans le cadre de mon travail se résumaient à envoyer un aperçu quasiment achevé à des membres de l’association n’ayant pas ou peu de compétences techniques, mais je n’étais pas derrière eux pour obtenir d’autres retours que ceux qu’ils peuvent me faire eux-mêmes. En dehors de cela, zéro, nada.

Benjamin : Non, jamais, je partais donc d’une expérience totalement vierge.

Marien : Oui, mais c’est assez récent au final ! J’avais fait appel il y a un an à Marie-Cécile Paccard pour m’aider sur Lessy. L’expérience a été tout aussi déstabilisante qu’enrichissante : alors que je pensais qu’on parlerait de l’UX de l’application, on a parlé de beaucoup de choses en amont, notamment à quels problèmes je cherchais répondre et à qui je m’adressais. Au final, elle a appliqué les méthodes UX à l’idée du projet elle-même ! Pour ce qui est des tests utilisateurs, j’ai participé à une session mais en tant qu’utilisateur, je connaissais donc déjà le format mais pas l’angoisse de se faire « juger » son travail ! J’avais toutefois eu le sentiment que c’était un format lourd à mettre en place et j’ai été agréablement surpris de la manière dont ça s’est passé au Framacamp.

Luc : À chaque phase de tests des nouveaux services Framasoft, on avait des retours de la part des membres de l’asso, mais ça s’arrêtait là.

 

Qu’est-ce que tu as pensé des méthodes vues ? Une méthode favorite ?

Florian : Le panel des méthodes vues était très large et c’est difficile de donner une favorite, car elles sont complémentaires ! Comme elles sont toutes assez courtes, je recommanderais plutôt de les faire toutes pour avoir une idée globale. S’il fallait choisir, la méthode du test en 5 secondes est vraiment rapide à faire, l’expliquer et la faire ne prend pas plus de 5 minutes, douche comprise ! Après, les tests utilisateurs sont ceux qui amènent sans doute le plus de pistes concrètes d’évolution pour son projet car on voit de façon flagrante là où l’utilisateur a des difficultés.

Benjamin : Si l’on se concentre uniquement sur l’aspect UX, la méthode des 5 secondes me semble plus amusante qu’utile, parce qu’elle ne reflète pas le fait que les gens cherchent toujours un peu avant d’abandonner. Elle permet cependant de dégager un avis esthétique et une émotion de manière très pertinente, ce qui provoquera l’envie d’utiliser par la suite. Clairement, le test d’utilisation, effectué sur Kresus, a été le plus utile et le plus fructueux pour moi : malgré la frustration qui parfois s’installait, puisque j’avais envie de dire « mais non, c’est pas comme ça qu’il faut faire », ou encore de dire « tu as remarqué qu’il manquait telle fonctionnalité, tu es au moins la 100ème personne à me le dire », j’ai trouvé très intéressant le fait de tout garder pour moi, et de juste écouter les utilisateur.ice.s pour comprendre quels étaient leurs points bloquants et leurs interrogations.

Marien : Très clairement j’ai préféré les tests utilisateurs. Je rejoins pas mal Benjamin là-dessus, j’ai le sentiment que c’est ce qui a été le plus utile. Mais c’est aussi l’aspect humain que je trouve intéressant : cette posture tout d’abord d’écoute et d’observation silencieuse (ça empêche de tenter de se justifier !), puis l’échange qui suit après. Ça permet aussi aux différents protagonistes de se rencontrer et de mieux se comprendre. Toutefois, pour un logiciel Libre ça peut être compliqué à mettre en place par sa nature décentralisée. L’AttrakDiff est peut-être alors plus adapté tout en se rapprochant de ce que peut apporter les tests utilisateurs d’un point de vue retours UX. J’imagine assez bien utiliser la méthode des 5 secondes « à l’arrache » lors de différents évènements. Concernant les courbes d’évaluation, je ne connaissais pas du tout et j’ai trouvé le concept super intéressant même si j’imagine un peu moins quoi faire des résultats.

Thomas : Je rejoins les deux commentaires précédents pour dire que j’ai probablement considéré le test utilisateur comme le plus productif du point de vue d’un développeur. Cela permet de découvrir des utilisations complètement à l’opposé de ce que l’on peut imaginer, et ainsi sortir de sa bulle de filtre concernant la vision que l’on a de son projet. J’aime aussi également bien le test des 5 secondes, mais je l’ai trouvé particulièrement efficace surtout lorsqu’on imagine un utilisateur arriver sur un site web sans à priori dessus, pas forcément quelqu’un de très motivé voir obligé d’utiliser une application.

Luc : Tout comme les autres, le test utilisateur est sans doute le plus intéressant pour les développeurs. On a ainsi un retour rapide mais surtout concret sur les points de friction.

 

C’est quoi le ressenti pendant et après les tests utilisateur·ices, quand on observe un·e utilisateur·ice manipuler et faire des retours sur son projet adoré ?

Florian : Mon cas est particulier, car on testait des visuels fait par Kristof, le graphiste des Colibris, pour le test des 5 secondes, donc j’ai moins pris pour moi les retours. Par contre j’ai été testeur pour Luc et son projet dolomon.org, et c’était bien drôle, je l’ai vu rougir quand je n’ai pas cliqué sur le lien « comment ça marche » et directement m’empêtrer dans les fonctionnalités compliquées, mais je crois que je me suis comporté comme un utilisateur lambda ! 😉

Benjamin (en continu depuis la question précédente) : C’est extrêmement utile comme exercice, parce que chaque élément remarqué devient utilement concret et peut se transformer en un « ticket » ou un élément partiel de ticket, tout du moins. C’était aussi marrant de voir, lors du débriefing, chacun exposer les *problèmes* auxquels iels étaient confrontés, et d’y aller de sa *solution* pour les résoudre, sans connaître l’ensemble des contraintes du projet. 🙂

En tant que mainteneur d’un projet, cela m’a permis de rester humble auprès du travail restant à accomplir, et ne m’a pas atteint émotionnellement ou attristé, parce que je considère que tout est toujours améliorable, et la finalité commune (de cellui qui teste ou cellui qui observe) est d’améliorer le logiciel dans son ensemble, pour le rendre plus utilisable, donc plus utilisé. 🙂

En dehors de la sphère propre au logiciel Kresus, je me sens plus légitime et j’ai aussi beaucoup plus confiance en ma capacité à mener et assister à des tests utilisateurs, ce qui me sera utile lors de nos célèbres Contrib’Ateliers .

Marien : Le plus compliqué était sans doute de rester silencieux ! D’ailleurs j’ai posé une ou deux questions au début pour essayer de comprendre le ressenti de l’utilisatrice (mais j’ai vite arrêté parce que je sentais que ça pouvait influer sur son utilisation). Il y a une forme de frustration qui se développe au fur et à mesure que la personne observée cherche mais ne trouve pas (pour les deux tests effectués j’ai eu envie de dire « Tu n’as pas besoin de rechercher l’icône de flux RSS sur le site, l’outil le détecte pour toi ! ») Une chose amusante en revanche, c’était de se sentir par moment tout aussi perdu que la personne qui testait (« Bah tiens, pourquoi ça réagit comme ça ? », « Oh un bug… ah non c’est vrai, c’est le comportement « attendu » »). Au final on n’est pas seulement observateur de l’utilisateur·ice, mais aussi de sa propre application ! En sortie de cette expérience, j’ai été rassuré sur la facilité de mise en place, ça m’a vraiment réconcilié avec cette méthode UX. Hâte de réitérer l’expérience !

Luc : C’est dur pour moi de me taire… et de voir que les utilisateurs ne prennent pas le temps de lire les explications qu’on s’est fait c… suer à écrire !

 

Suite à l’atelier, est-ce que tu penses que tu vas essayer de mettre en place de l’UX ? Si on te trouve un·e UX Designer, tu l’accueilles les bras ouverts ?

Florian : Oui, bien sûr, c’est un retour précieux, et une science à part entière ! Vu le peu de moyens humains derrière un projet libre, on se retrouve souvent à être en même temps le graphiste, l’UX designer, le développeur et le chargé de comm. de ce projet libre, et souvent quand on touche à trop de choses simultanément, on ne fait pas tout bien. J’ai très envie d’approfondir le sujet, si possible accompagné, mais j’attends aussi de voir comment en tant que développeur, implémenter les améliorations d’UX, car les choses les plus simples ne sont pas toujours les plus faciles à coder ! Donc vive la complémentarité mais en ayant la curiosité de s’intéresser à ce que l’UX Designer apporte et réciproquement, histoire de s’enrichir entre designer et développeur et d’être réaliste sur ce que l’on peut faire ensemble !

Benjamin : Absolument ! Au titre de mon projet Kresus, je vais sûrement réitérer l’expérience, et nous serions ravis d’accueillir un.e UX designer pour nous aider à assurer un suivi de l’amélioration de l’UX dans le projet. Nous allons d’ailleurs revoir nos méthodes de contribution pour simplifier la découverte et la participation à ce projet. Par ailleurs, je vais très probablement réutiliser les méthodes vues ici lors des Contrib’Ateliers, pour pouvoir tester et faire tester d’autres projets qui ont bien besoin d’aide, en espérant que cela mène à des actions concrètes et un suivi de la part des auteur.ice.s.

Marien : Je ne vois pas trop comment répondre négativement à cette question après les réponses que j’ai données jusqu’ici. ^^

Oui, évidemment que j’en accueillerais un ou une ! Mais j’aimerais aussi réfléchir à comment faciliter une telle collaboration. Aujourd’hui les outils que nous avons à notre disposition ne sont pas adaptés (je ne vise absolument pas GitHub ou plus généralement les forges logicielles, ce serait mal me connaître). Et si, justement, on appliquait les méthodes UX pour réfléchir à un tel outil ? 😀

Thomas : De même, c’est évident qu’il faut que nous impliquions davantage des gens comme des UX designers prêts à participer dans nos projets libres. Et pour accueillir des gens qui ne sont pas développeurs, ce n’est pas uniquement une question de réfléchir à un processus pour l’entrée de nouveaux contributeurs, c’est peut-être penser dès le début à faire en sorte que les décideurs et responsables de projets ne soient pas uniquement des développeurs, que ces derniers ne soient pas toujours au centre du projet. C’est loin d’être facile dans le milieu du logiciel libre, mais je veux y croire. 🙂

Luc : Non, je souhaite continuer à faire des logiciels inaccessibles. Tout le monde sait bien que les logiciels tournent bien mieux sans utilisateurs pour déclencher des bugs ou poser des questions. 😛

 

Et la tradition Framasoft : un dernier mot pour la fin ?

Florian : Merci Framasoft de décloisonner le libre et d’ouvrir vers de nouveaux horizons avec des outils qui ont du sens et des valeurs et qui pourraient grâce à des apports dans des domaines comme l’UX, de plus en plus répondre aux besoins des usagers ! J’en profite aussi pour inviter des animateurs de réseaux, les techniciens, les citoyens engagés, et toutes les personnes de bonne volonté de venir participer au projet Contributopia, qui pourrait être un beau levier de changement sociétal et de convergence !

Benjamin : Merci Framasoft pour ce Framacamp, et merci beaucoup Maïtané pour nous avoir présenté et ouvert les yeux sur l’UX, dans la joie et la bonne humeur, sans m’avoir fait ressentir ce tristement classique blocage entre les développeur.euse.s et les designers. J’invite tout le monde à s’intéresser également à ces méthodes, ne serait-ce que pour en comprendre les enjeux, qui dépassent largement la simple facilité d’utilisation et l’aspect esthétique des choses. :3

Marien : Au final, comme dans tout projet, l’important c’est de se parler et de s’écouter. Ce Framacamp a été une formidable occasion de faire cela dans une ambiance détendue. Je suis vraiment ravi de pouvoir apporter ma patte au projet Contributopia qui se propose justement d’encourager et défendre tout ça. Je suis persuadé que nous sommes sur la bonne route (mais qu’est-ce qu’elle est longue !). Et merci aussi à Maïtané de nous avoir proposé cet atelier qui m’a permis (enfin) de mettre en pratique des choses qui traînaient dans ma tête depuis des mois.

Thomas : Merci aux membres de Framasoft et à tous les contributeurs pour leur bonne volonté toujours impressionnante. Merci à ceux qui animent des ateliers qui permettent de faire des énormes pas en avant à chaque fois. J’ai hâte de voir ce qu’on va tous faire ensemble !

Luc : Merci à tous ceux qui vont mettre en place des ateliers UX lors des prochains contrib’ateliers. 😁

À leur tour, les auteur·ices de cet article remercient chaleureusement Florian, Thomas, Benjamin, Marien et Luc pour le temps qu’ils ont bien voulu nous accorder pour répondre à nos questions. Merci également à Carine Lallemand pour nous avoir autorisé·es à utiliser les images d’illustration de l’AttrakDiff et des courbes d’évaluation UX.

Que vous soyez UX Designer (professionnel ou amateur) ou simple utilisateur·rice qui veut contribuer au logiciel libre et au libre, n’hésitez pas à venir à notre rencontre, soit sur Framacolibri ou lors d’un des Contrib’ateliers.  ;-).

 

 

Pour aller plus loin

  • Lallemand, Carine. Paris Web 2015. Atelier Évaluer l’UX : des méthodes simples mais efficaces !

Paris Web 2015 Atelier « Evaluer l’UX : des méthodes simples mais efficaces ! » from Carine Lallemand