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.

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.

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

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.

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.

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.

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 :

• un nouveau formulaire de dons valorisé par une illustration de David Revoy,
• 6 textes synthétiques répondant à la question Pourquoi soutenir Framasoft ?
• une présentation de Framasoft en quelques chiffres
• une liste de réponses aux Questions les plus fréquentes

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.

On l’a vu avec notre redoutable poisson d’avril : Framasoft évolue. Bien entendu, il n’est nullement question d’un quelconque partenariat avec Microsoft. Framasoft est et restera dédié à la diffusion du Libre auprès du public le plus large ; quitte à prendre le temps et la patience nécessaires pour que la famille Toulemonde apprenne à se libérer. Quitte, aussi, à prendre les gens là où ils/elles sont, et à répondre à leurs besoins de manière libre et ouverte en créant et adaptant de nouveaux outils. C’est ainsi que ce « réseau d’éducation populaire » s’est étoffé, passant d’un annuaire à une galaxie de sites web et services variés.

Grace à vos dons, à vos apports, à notre ouvrage commun… de grands (et beaux) changements s’annoncent. Si nous étions dans Game Of Nobody-wants-a-fucking-Throne on entendrait : « Penguins are commiiiiiing ».

C’est aux petits détails qu’on repère les grandes évolutions. Alors, histoire de vous mettre l’eau à la bouche, voici une petite interview de Pierre-Yves Gosset (alias PYG) qui nous présente la Framanav.

Pouhiou pour le Framablog : PYG, je n’ai pu m’empêcher de remarquer qu’en haut de la plupart des sites web estampillés Frama, une jolie barre est venue se poser… Tu nous présentes ?

Bien sûr. Il s’agit tout simplement d’une barre de navigation commune permettant de présenter et d’accéder rapidement aux sites de ce joyeux bor^W bazar qu’est devenu le réseau Framasoft au fil des années. Elle permet donc de retrouver (mais aussi de découvrir !) les sites du réseau Framasoft, maintenant classés en trois catégories : Logiciels libres, Culture libre, et Services libres.

Une telle barre existe depuis début 2007, à compter du moment où Framasoft a dépassé les limites d’un simple annuaire logiciel pour proposer d’autres services. Elle a connu différentes évolutions au fil du temps, mais il fallait aujourd’hui une nouvelle version afin de présenter plus clairement les activités plutôt foisonnantes de l’association.

Par ailleurs, cette Framanav intègrera un système d’annonces et d’alertes qui nous permettra d’interagir plus facilement avec nos visiteurs. Par exemple, lorsque nous envisagerons une mise à jour de Framapad.org, nous pourrons informer les utilisateurs directement sur le site par un système d’alerte, afin qu’ils ne se lancent pas dans une traduction collaborative, par exemple, 10 minutes avant que l’on n’interrompe le service. Cela nous permettra aussi d’annoncer plus facilement (et très ponctuellement), sur tous les sites une information que nous estimons importante, comme par exemple la publication d’un nouveau Framabook…. (attention, je crois que tu baves un peu, là…).

L’ensemble du réseau faisant plus d’un million de visites par mois, mais proposant pour l’essentiel des services libres et gratuits sans inscription, cela nous a paru à la fois complémentaire et probablement plus efficace que notre bonne vieille Lettre d’informations.

Framablog : Il y avait donc, à ton avis, un besoin de faire connaitre l’ensemble des services Framasoft ?

Oui. Ces deux dernières années, Framasoft a multiplié les projets. Framapad ou Framadate fêtent leur 2 ans, Framazic, Framamindmap ou Framacalc ont moins d’un an. Les utilisateurs peuvent s’y perdre, bien entendu. Mais surtout, ils risquent tout simplement d’ignorer l’existence d’un service.

Framasoft, c’est aujourd’hui 11 serveurs dédiés, et plus de 35 sites publics (oui, ils ne sont pas encore tous présentés dans la Framanav, on en garde encore un peu sous le pied 😉 ). Ce n’est clairement pas facile de s’y retrouver. Par exemple, nous avons d’excellents retours d’utilisateurs du site framapack.org (qui permet aux utilisateurs Windows de se constituer un « panier de logiciels libres installables en 3 clics » extrêmement utile suite à l’achat d’une machine par exemple), mais le site reste trop méconnu.

De plus nous avons choisi d’y intégrer les sites que nous hébergeons gracieusement, comme par exemple le Geektionnerd, ou VeniVidiLibri. Mais aussi des sites « partenaires » comme le Planete-libre. J’espère sincèrement que cette nouvelle barre de navigation commune permettra à chacun de s’y retrouver plus facilement et plus rapidement.

Framablog : Mettons les mains dans le cambouis… Qu’est-ce qui a été le plus dur pour toi ? Adapter la barre à chacun de nos sites ou concevoir un menu clair et intuitif ?

La Framanav a été réalisée à l’aide de Bootstrap, un framework HTML/JS/CSS issu du travail de développeurs travaillant chez Twitter : http://twitter.github.io/bootstrap/. Il s’agit d’un framework plutôt simple et agréable, proposant suffisamment de fonctionnalités, mais pas trop (il faut conserver un poids raisonnable).

La création de la barre elle-même a été extrêmement rapide (de l’ordre de la journée, environ). La principale difficulté réside dans l’adaptation à chaque site. En effet, comme je le disais, Framasoft, c’est plus de 30 sites publics (WordPress, Dotclear, Drupal, Mediawiki, Etherpad, Ethercalc, SPIP, PhpBB et j’en passe). L’adaptation purement CSS à chaque site n’est elle-même pas complexe (j’y passe rarement plus d’une heure).

Cependant, la principale difficulté réside dans le fait que la Framanav utilise jQuery (c’est aussi un choix volontaire de notre part d’utiliser cette bibliothèque javaScript sur chacun de nos sites), et là, ça se complique souvent, car suivant les CMS, les versions de jQuery sont incompatibles ou nécessitent un travail de réécriture ou d’optimisation du code (et non, pour les habitués de jQuery, un simple jQuery.noConflict() ne résout pas toujours le problème, ça serait trop simple !). Cela explique que la Framanav soit toujours en cours de déploiement sur certains sites (par exemple framapad.org, développé en node.js, dispose d’un système de template/cache un peu particulier qui m’a fait retirer la nav après 24h de mise en place).

Par ailleurs, il reste encore du travail sur la compatibilité avec les smartphones. Elle est encore largement perfectible, mais elle sera améliorée au cours des prochains mois. Bref, la migration se fait dans le temps, comme souvent avec les projets libres. D’ailleurs, pour ceux qui voudraient donner un coup de main, le code est disponible sur le GitHub Framasoft : https://github.com/framasoft/framanav

Framablog : La question troll : tu as testé la FramaNav sur Internet Explorer ? Tu es allé jusqu’au 6 ?

Internet Exploquoi ? Connais pas… Plus sérieusement, je l’ai testée avec une machine virtuelle Windows 7 / IE 9 et un vieux Windows XP / IE 8 et ça fonctionnait plutôt bien 😉 Je l’ai aussi testée avec différents smartphones/tablettes.

Framablog : Maintenant qu’on y est, qu’est-ce que ça te fait de voir tout Framasoft, comme ça, à portée de clic ?

J’en suis tellement ému que j’ai envie d’aller corriger quelques bugs de dernière minutes, tiens ! J’aimerais juste conclure en remerciant JosephK, bénévole de Framasoft, qui avait réalisé la précédente version de la nav (que vous pouvez encore admirer sur quelques sites).