FouillaJeux relooke la fiche jeu : place au hero immersif
La refonte générale de l'interface de FouillaJeux, présentée dans une précédente actualité, se poursuit désormais fiche par fiche. La page consacrée à chaque jeu de société, celle que la plupart des visiteurs consultent en premier lors d'une recherche, vient de recevoir son propre relooking : un habillage en hero immersif qui remplace la présentation en deux colonnes utilisée jusque-là.
D'une présentation en deux colonnes à un hero immersif
Sur l'ancienne version, chaque fiche jeu de société affichait la jaquette et les informations principales côte à côte, dans un cadre sombre et sobre : joueurs, année, langue et éditeur listés en colonne, résumé du jeu et boutons de statut juste en dessous. Une mise en page fonctionnelle, mais assez proche d'un simple formulaire de fiche technique.
La nouvelle présentation, prise ici en exemple sur 5-Minute One Piece, s'appuie au contraire sur un bandeau plein écran : le visuel de la boîte est agrandi, flouté et assombri en arrière-plan, tandis que la jaquette flotte par-dessus dans une carte détachée, accompagnée du titre et de pastilles cliquables (nombre de joueurs, année, langue, éditeurs) reprenant chacune une icône dédiée. Le contenu de la page est désormais limité à 1180 pixels de large, pour éviter que le texte ne s'étire sur les grands écrans.
Crédits, éditeur et infos pratiques regroupés
Auteurs, illustrateurs, éditeurs et distributeurs, jusque-là répartis sur plusieurs blocs séparés, sont désormais réunis dans deux grilles compactes : « Crédits & éditeurs » d'un côté, informations pratiques de l'autre. Les boutons « Je l'ai » et « Je le veux », qui permettent d'ajouter un jeu à sa ludothèque en ligne, ont eux aussi été déplacés directement dans la carte de présentation, juste sous le résumé, plutôt que d'être isolés en bas de page.
Cette réorganisation vise avant tout la lisibilité : sur les jeux de société ayant plusieurs éditions, plusieurs auteurs ou plusieurs distributeurs selon les pays, l'ancienne présentation pouvait rapidement s'allonger. La grille compacte garde toutes ces informations accessibles sans faire défiler la page inutilement.
Une galerie repensée en grille bento
La galerie de photos, qui s'affichait auparavant en mosaïque irrégulière (un affichage dit « masonry »), passe à une grille bento : de une à cinq photos par fiche, organisées selon des proportions fixes qui évitent les blancs disgracieux quel que soit le nombre d'images disponibles pour un jeu donné. La visionneuse plein écran (lightbox) associée a également été revue au passage.
Accessibilité et référencement soignés
Navigation au clavier et lecteurs d'écran
Le changement de gabarit s'est accompagné d'un travail dédié à l'accessibilité : contours de focus visibles au clavier, soulignements systématiques des liens, annonce vocale (aria-live) lors de l'ouverture de la visionneuse d'images, et relecture complète des textes alternatifs (jaquettes, versions du jeu, images de galerie, portraits par défaut pour les personnes et logos pour les entreprises). L'objectif visé est une conformité WCAG AA sur l'ensemble de la page.
Un meilleur référencement pour chaque fiche
Côté référencement, chaque fiche jeu de société bénéficie désormais d'un balisage fil d'Ariane structuré et de méta-descriptions enrichies, générées à partir des informations réellement disponibles (auteur, éditeur, année, nombre de joueurs), pour mieux ressortir aussi bien dans les moteurs de recherche externes que dans le moteur de recherche interne du site.
Et la suite
Une section « jeux similaires » a déjà sa structure prête sur la fiche jeu ; son alimentation automatique, à partir des tags et des mécaniques communes, doit suivre dans une prochaine mise à jour. Plus largement, ce relooking de la fiche jeu vient compléter le travail engagé sur la base de données jeux de société de FouillaJeux : après la page d'accueil et le catalogue, présentés dans la précédente actualité, chaque recoin du site est progressivement remis à niveau, jeux de société comme événements et actualités. Les retours sur cette nouvelle présentation, à chaud ou après quelques visites, restent bienvenus via la page de contact.