Refonte de la navigation et autres nouveautés

Bonjour à tous,

Je suis très heureux d'enfin vous écrire aujourd'hui pour vous présenter la plus grosse mise à jour du site depuis le lancement de la V3 fin 2017, et sur laquelle je travaille obsessionnellement depuis plusieurs mois. Cette actualité sera donc assez longue, car je souhaite y partager avec vous le cheminement qui a été le mien, les choix effectués et les évolutions qui ne se voient pas.

En résumé :

• Une barre du haut avec un nouveau menu, une icône malle qui affiche votre argent, vos objets et collections, et l'affichage du titre sur téléphone ;
• Une barre du bas avec les cinq fonctions les plus utilisées (pratique notamment sur téléphone) ;
• La poudre de cheminette, menu qui donne accès à l'intégralité du site avec système de raccourcis et de recherche rapide ;
• Un travail sur l'accessibilité, un système de météo, une page de préférences, l'affichage des lieux sur téléphone, des pages plus rapides...

▨ Je suis engagé, depuis le début de l'année, dans une réécriture complète du site. Celle-ci vous est entièrement invisible (sauf lorsque je casse des choses !), mais nous permettra progressivement d'avoir un site plus rapide, plus fiable, et surtout plus facile à faire évoluer. J'espère que vous en ressentez déjà les effets, puisque le site n'a jamais été aussi rapide et n'a plus connu de coupure depuis bientôt trois mois.

▨ La difficulté d'une refonte progressive : le plus simple aurait été de tout reprendre à zéro et de réécrire entièrement le site, et de faire la mise à jour en une fois. C'est ce que j'ai fait pour la V3, mais cela avait conduit à ce que je travaille seul pendant plus de deux ans (de décembre 2015 à décembre 2017) avant de pouvoir montrer quoi que ce soit, ce qui a été difficile. J'ai donc cherché à faire la réécriture de façon progressive. Je n'étais pas sûr d'y parvenir (cela revient à changer de voiture en remplaçant petit à petit le moteur, les pneus, le volant, la carrosserie... sans jamais s'arrêter !) mais c'est chose faite ! Ainsi, la page que vous affichez est un mélange de V3 (les pages au centre, qui n'ont pas changé) et de V4 (les barres du haut et du bas).



▨ Je cherche depuis longtemps à améliorer la navigation sur le site. Le site compte près de 400 lieux, sur de nombreux niveaux, ce qui le rend assez labyrinthique. C'est un retour qui m'a beaucoup été fait lors de l'enquête. En conséquence, la majorité d'entre vous passe plutôt par les pages "nouveaux messages", "mes messages" ou "mes RP", ce qui est dommage, car cela limite la découvrabilité de nouveaux lieux ou messages, et réduit parfois un peu l'immersion.

J'ai tenté plusieurs choses au fur et à mesure de l'histoire du site :

• Pour la V2 (2009), un panneau (en bas à gauche) permettait d'aller dans les lieux principaux (Poudlard, Londres...) puis un menu à gauche sous le blason permettait de naviguer au sein d'un même lieu.
• Pour la V3 (2017), la logique était proche, avec le feu de cheminette qui donne accès en bas à gauche aux lieux principaux, suivi d'un menu déroulant sous le blason pour naviguer au sein d'un lieu. Ce système ne me plaisait pas vraiment, car il impliquait pour aller d'un forum à un autre, d'aller d'abord dans un menu en bas à gauche, puis dans un menu en haut à gauche, ce qui me semblait assez déroutant.
• Le menu actuel (2024) en trois colonnes, visait à répondre à ce souci en permettant une navigation dans un lieu unique. Il soulevait d'autres défauts : 1/ il était peu accessible et peu pratique sur ordinateur, où il fallait bien viser avec la souris pour ne pas ouvrir un autre lieu par accident ; 2/ il était très rigide et limitait les possibilités d'organisation pour les administrateurs en nombre de niveaux et de lieux, 3/ il était très coûteux en performance (la moitié du temps de chargement des pages pour calculer ce seul menu), 4/ tous les lieux se ressemblent, ce qui rend difficile la mémoire visuelle.

▨ Une nouvelle barre en bas. J'ai longtemps voulu n'avoir qu'une seule barre en haut du site, si bien que la barre du bas était devenue facultative en 2024. J'en reviens : outre que je trouve le site plus immersif avec une barre en bas et en haut, celle-ci est très utile pour naviguer, surtout sur téléphone.

Sur téléphone, une barre d'action en bas tombe pile sous le pouce. J'ai cherché à suivre les meilleures pratiques en matière d'interface (notamment d'Apple et Google) qui recommandent d'y positionner 5 icônes maximum qui donnent accès aux fonctions les plus utilisées. En me basant sur l'usage que vous faites du site grâce aux statistiques, j'ai choisi les fonctions suivantes :

1. Poudre de cheminette, nouveau menu qui vous permet d'accéder à l'intégralité des lieux, j'y reviens dans quelques instants.
2. Nouveaux messages, page la plus affichée du site, que vous consultez assidûment.
3. Mes messages, deuxième page la plus affichée, que vous pouvez changer en "Mes RP", "Favoris", ou "Brouillons" dans vos préférences. Toutes ces pages restent ensuite accessibles dans un menu déroulant à cet endroit.
4. Hiboux, qui ont été déplacées du haut vers le bas : c'est l'une des fonctions les plus utilisées du site, et l'avoir sous le pouce change tout sur téléphone.
5. La recherche traditionnelle.

▨ S'agissant de la barre du haut, intégralement réécrite, vous retrouverez les rappeltout et le menu profil habituels. J'ai supprimé l'icône "plume", qui devenait intégralement redondante avec le retour de la barre du bas. J'ai également mis tous les objets et collections dans une "malle" distincte, qui permet d'alléger l'icône profil.


▨ Le titre des lieux est désormais affiché sur téléphone. C'est le déplacement des hiboux en bas qui m'a permis de libérer (d'extrême justesse !) la place pour l'afficher sur tous les supports, alors qu'il était uniquement visible sur grand écran. Je pense qu'il s'agissait d'un vrai manque ; j'ai pour objectif général que l'intégralité des informations affichées sur ordinateur le soient également sur téléphone.


▨ Le menu qui s'affiche sous le blason a été revu : il permet comme auparavant d'aller partout sur le site, mais affiche une colonne à la fois, avec des images.

Son système permet comme avant d'aller absolument partout depuis n'importe quelle page, mais me paraît avoir beaucoup d'avantages sur le menu précédent :

• il s'ouvre là où on se trouve actuellement, ce qui permet de se repérer facilement, et par exemple de regarder des forums les uns après les autres sans se perdre ;
• il est identique sur ordinateur et téléphone, et les images permettent une mémoire visuelle ;
• il est plus accessible et ne nécessite plus de "viser" avec sa souris ;
• il est considérablement plus performant que le précédent, puisqu'il n'y a plus besoin de tout charger d'un coup (j'en reparle plus tard).

▨ Plusieurs fonctionnalités passées, qui vous manquaient, font leur retour :

• La possibilité de visualiser ses gallions directement dans le menu de la malle. J'espère que vous apprécierez le petit design que j'ai fait pour les gallions, mornilles, noises, que j'étendrai partout sur le site.
• Les animations de l'enveloppe et du rappeltout, désactivables si souhaité. J'ai par ailleurs créé une animation en faisant tourbillonner la fumée dans le rappeltout, pour essayer de mettre un peu d'immersion et de magie, j'espère qu'elle vous plaira.
• Les raccourcis sur le blason de Poudlard permettant d'aller dans les maisons ou dans le hall. Cette fonctionnalité n'est pas disponible sur téléphone, puisque toucher le blason doit ouvrir le menu, et que les liens seraient de toute façon trop petits.

Une nouvelle page fait donc son apparition, la poudre de cheminette, située (comme autrefois) en bas à gauche de la barre du bas. Elle permet, comme le menu sous le blason, d'accéder à n'importe quel point du site, et elle est volontairement située sur toutes les pages au même endroit, accessible sous le pouce sur téléphone.

Elle remplit un rôle légèrement différent du menu en haut à gauche en revanche, puisqu'elle ne repart pas du lieu en cours mais systématiquement de la "racine" du site (Poudlard, Londres, etc.), ce qui la rend prévisible si vous savez exactement où vous allez.

Elle comporte par ailleurs deux fonctionnalités qui vous plairont :

• Un moteur de recherche instantané des lieux, qui vous permet de vous rendre facilement dans un lieu dont vous avez oublié l'endroit. Sur ordinateur, vous pouvez à tout moment ouvrir la recherche en un raccourci clavier (Ctrl+K sur Windows/Linux, ⌘+K sur Mac), les habitués pourront donc transplaner d'un lieu à un autre instantanément.
• Un système de raccourcis : en cliquant sur l'étoile dans un forum (ou dans la recherche de la poudre de cheminette), vous pouvez faire vos propres raccourcis de vos lieux favoris pour y accéder directement depuis la poudre de cheminette.

J'espère que vous apprécierez l'animation de la flamme en fond, qui m'a demandé pas mal de travail, pour renforcer le côté immersif et magique du site. Celle-ci a été travaillée pour être très économe en ressources (votre téléphone ou ordinateur ne devraient pas chauffer).



Voici une petite nouveauté, sans rapport avec la navigation, qui m'a amusé : le site dispose désormais d'un vrai système de météo (neige, pluie, orage, feuilles mortes) par-dessus les images de lieux, basé sur la saison, et sur l'emplacement.

Contrairement à la neige qui, autrefois, s'affichait non stop pendant deux mois, il s'agira d'une vraie météo avec des chutes de neige, de la pluie, etc., dont la probabilité dépend du jour et de l'heure. Cette météo est la même pour tout le monde.

Pour que vous puissiez la voir, un orage a lieu à Londres en ce moment même et pour quelques jours.



▨ Les images des lieux sont désormais visibles sur téléphone, dans la même logique que ce que j'indiquais tout à l'heure : tout ce qui est présent sur ordinateur doit pouvoir l'être aussi sur téléphone. Un petit espace leur est réservé en haut des pages dans les forums et les sujets.

▨ Les images de fond sont par ailleurs affichées dans les menus, qu'il s'agisse du menu en haut à gauche et de la poudre de cheminette. J'ai le sentiment qu'elles contribuent beaucoup à leur rendu graphique, et cela aide aussi énormément à avoir une mémoire visuelle qui permet de se repérer parmi les nombreux lieux du site.

▨ Enfin, les images sont nécessaires pour la météo.

▨ Ces images ont été générées par intelligence artificielle, comme nous en avons longuement discuté dans le sujet qui y était consacré il y a deux semaines. J'en rappelle brièvement les raisons.

Les illustrations utilisées depuis 2017 étaient tirées de Pottermore : nous n'avons pas le droit de les garder, et cela seul suffisait à devoir toutes les remplacer. Nous en avions une trentaine ; il en faut près de quatre cents pour couvrir l'ensemble des lieux, et la nouvelle navigation repose entièrement sur elles. Les faire réaliser représenterait, d'après des devis demandés, de 300 à 1 000 euros et plusieurs semaines pour une seule image. Quant aux banques d'images libres de droit, elles ne proposent ni couloirs, ni salles de classe, ni endroits qui n'existent que dans nos textes. Restent deux options : générer ces images, ou n'en afficher aucune. J'ai retenu la première, et j'en assume la responsabilité.

Plusieurs d'entre vous ont proposé d'en dessiner bénévolement, et cette générosité me touche beaucoup. Si je n'ai pas retenu cette voie, c'est d'abord que je serais très gêné de demander gratuitement un travail aussi conséquent, mais aussi car ces fonds obéissent à des contraintes ingrates (un style commun, des couleurs accordées à chaque thème, une luminosité tenue, aucun détail trop marquant sur les bords) et je finirais forcément par refuser des images qu'on m'aurait offertes : je ne veux placer personne dans cette situation, ni m'y placer moi-même. Enfin, cela n'aurait vraisemblablement concerné qu'une poignée d'images tout au plus.

▨ Je souhaite saluer le travail de vos administratrices : elles y ont consacré des semaines, reprenant chaque image jusqu'à ce qu'elle corresponde aux descriptions qui figurent dans les RP et s'accorde aux couleurs du lieu. C'est un travail long, minutieux et largement invisible, et le résultat leur doit tout.

▨ J'ai rendu ces images entièrement optionnelles pour celles et ceux qui ne souhaiteraient pas les afficher : une préférence permet de les remplacer par une texture sobre, accordée à la couleur du lieu.



▨ Le système de préférences a été intégralement réécrit, et me permettra plus facilement de vous donner des choix. Vous pouvez d'ores et déjà choisir d'afficher ou non chacune des animations individuellement (rappeltout, enveloppe, flammes de cheminette, météo), d'afficher les images des lieux, le nombre de hiboux ou de notifications non lues. Vous pouvez également régler le lien du milieu (entre Mes messages, Mes RP, Brouillons et Favoris).

▨ Les travaux menés ont permis d'améliorer la performance du site. Le temps de génération des pages a été diminué de moitié, de 0,06 à 0,03 seconde en moyenne. Cela peut vous paraître faible, mais cela fait une vraie différence dans le ressenti et la charge pour le serveur (et notre robustesse face aux attaques de robots).

La quantité de code CSS (qui sert à la mise en forme des pages) dans les parties réécrites a par ailleurs été divisée par trois.

Les animations de météo ont été réécrites pour être aussi légères que possible pour vos appareils : celles et ceux qui avaient désactivé la neige parce qu'elle faisait chauffer leur ordinateur peuvent lui redonner sa chance !


▨ J'ai cherché à répondre à toutes les recommandations en matière d'accessibilité, pour les personnes rencontrant des handicaps, notamment en matière de vision ou de motricité. Je remercie en particulier les quelques personnes qui m'ont aidé. Ce sujet me tient à cœur, n'hésitez pas à continuer de m'en faire part !




▨ Je vais désormais progressivement m'attaquer à la réécriture des pages du centre pour améliorer leur accessibilité, leur mise en page, et leur affichage sur téléphone. Je vais d'abord devoir travailler sur un thème qui me plaise, ce qui prendra sans doute un peu de temps.

▨ Le rythme des mises à jour pourra par ailleurs s'accentuer, maintenant que le plus dur est fait : je pourrai publier les nouveautés au fur et à mesure que je les réalise. Il y a plusieurs d'entre elles qui, je pense, vous plairont beaucoup. Je pense y consacrer l'essentiel de mon mois d'août et de septembre, et je vise un achèvement d'ici le 1^er novembre, date à laquelle ma vie IRL me rattrapera !



J'ai essayé de réaliser tous les tests, y compris sur de vieux appareils (un Android de 2013 et un iPhone de 2017), mais il y aura inévitablement tout un tas de petits bugs que je n'ai pas identifiés. Je compte sur vous pour m'aider à les chasser !

De façon plus générale, je serais très heureux de lire vos retours et idées, n'hésitez vraiment pas.



Je tiens en premier lieu à remercier toutes celles et ceux qui ont répondu à l'enquête, en mai dernier, qui m'a été très précieuse pour sentir vos souhaits et écrire ma feuille de route. J'ai eu trop de participations pour vous faire des réponses individuelles, mais je pense que je serai en mesure de répondre à beaucoup des propositions qui m'ont été remontées.

Je tiens aussi à remercier vos formidables administratrices, avec qui j'ai beaucoup échangé et qui ont joué les beta-testeuses et ont apporté énormément d'idées. Je salue aussi quelques personnes qui m'ont aidé à tester ces nouveautés et se reconnaîtront !

Je souhaite enfin remercier tous les soutiens financiers du site, qui aident au financement du serveur. Les coûts d'hébergement ont très fortement augmenté ces derniers mois, du fait de la crise des prix de la mémoire et des composants informatiques, ce qui rend la situation un peu plus difficile que par le passé, et votre soutien en est d'autant plus précieux et apprécié.