Navigation sur le site

Bonjour à tous,

Comme promis, j'envoie aujourd'hui la mise à jour la plus importante et la plus difficile à penser et concevoir, puisqu'elle touche la navigation au sein du site. Elle est issue de plus d'un mois de travail intense, avec de nombreux essais infructueux, et beaucoup de tests avec des joueurs volontaires (merci à eux !)

Le système précédent avait été conçu pour ne pas perdre les joueurs de l'ancienne version, où il existait un bouton en bas à droite (pour passer d'un lieu principal à un autre) puis un menu sur la gauche du site pour naviguer au sein du lieu.

Il avait le défaut d'être très peu intuitif et laborieux. Pour passer par exemple d'une salle de Poudlard à la boutique du marché de Noël au Chemin de traverse, il fallait 1/ quitter sur l'icône donnant accès au "monde" en bas à droite, 2/ cliquer sur Chemin de traverse, 3/ ouvrir le menu déroulant en haut à gauche, 3/ sélectionner le forum recherché dans un menu déroulant très long (jusqu'à presque 1 mètre pour Poudlard avec tous les lieux débloqués), 4/ cliquer sur l'icône boutique au centre.

C'est fastidieux, incohérent (trois zones différentes pour naviguer, trois pages différentes à ouvrir avant de trouver la bonne)), et rend très difficile la découvrabilité (je suis certain que vous allez tous découvrir aujourd'hui une boutique quelque part que vous ignoriez).

Résultat sans appel : 95% de la navigation sur le site se faisait en spammant la page "Messages non lus". Pour vous donner un ordre de grandeur, presque 1 page sur 5 (20 %)affichée par le site concernait les pages de recherche (non lus, mes messages, messages RP) contre 1 page sur 200 pour la page "Monde" (0,5 %). Moi-même préférait retrouver un sujet dans mes messages pour accéder au lieux correspondant plutôt que de me battre avec la navigation.


Les objectifs poursuivis : avec près de 300 forums et sous-forums différents, une grande hétérogénéité dans leur répartition (Poudlard en concentre à lui-seul les deux tiers), la navigation entre les différents lieux sur le site est un casse-tête. Il faut réussir à :

• permettre aux joueurs de se rendre là où ils veulent aller facilement (avec le moins de clics et de recherche possible)
• faire comprendre au joueur où il se trouve ;
• rendre facilement découvrable / explorable les différents lieux ;
• être flexible pour permettre les futures évolutions (permettre la création de nouveaux lieux) ;
• essayer de rester aussi immersif que possible.

L'ensemble doit rester clair avec d'autres pages du site : tout n'est pas qu'un lieux, il y a donc également les pages de "recherche" (messages non lus, mes messages, mes RP, favoris...) et les différentes pages annexes (hiboux, malle, carnet d'adresses, rappeltout...).

Le nouveau menu en haut à gauche obéit aux principes suivants :

• l'ensemble des lieux et pages se trouvent toutes à un seul clic (sur ordinateur), où que vous soyez sur le site ;
• la navigation est désormais identique sur l'ensemble des pages du site, ce qui renforce grandement la prévisibilité et la mémoire visuelle et musculaire (vous aurez vite l'habitude d'où se trouve les différents lieux) ;
• il n'y a que deux zones logiques pour naviguer : les lieux sont tous en haut à gauche, les pages spéciales sont toutes en haut à droite ; (j'ai conservé pour l'instant la barre en bas auxquels vous êtes pour beaucoup très habitués, mais qui constitue une redondance).

J'ai testé de nombreux systèmes :

• sur ordinateur, passer par des pages intermédiaires avec des catégories (long), un grand bandeau affichant tous les lieux d'un même endroit d'un coup (mais l'hétérogénéité et l'immensité de Poudlard rendait cela illisible), des menus déroulants... ce système à trois colonnes est celui qui permettait de résoudre tous les soucis ;
• sur téléphone, des menus défilants, des menus ouvrant des pages et des sous-pages... in fine, c'est un système en "accordéon" qui déplie les sous-rubriques qui a été jugé le plus pratique à l'utilisation courante ; ce n'est pas parfait, mais un écran de téléphone, cela reste petit...

Je pense néanmoins que pour améliorer la navigation, il va nous falloir réorganiser un peu les forums, c'est un travail à engager avec les administrateurs :

• revoir le titre des lieux dans Poudlard pour trouver les pages plus facilement, car il n'est pas facile de mémoriser les étages ;
• rendre plus visible et compréhensible l'encyclopédie, pour en faire une vraie source d'accueil, d'aide et d'informations pour les nouveaux notamment.

Du côté de l'accessibilité, il y a beaucoup de choses à dire :

• contrairement au système précédent (qui n'était absolument pas accessible), ces menus sont compatibles avec la navigation à la souris au survol, mais aussi la navigation au souris au clic (ce qui "fige" le menu), au toucher, au clavier (avec la touche tab) et avec un lecteur d'écran ;
• l'ensemble des contrastes ont été revus pour être compatibles avec la norme WCAG AAA ; c'est bien pour les personnes malvoyantes, mais cela rend le site bien plus facile à utiliser avec une faible luminosité, au soleil, ou sur un mauvais écran ;
• la taille de police a été légèrement revue à la hausse (de 15 à 16px), pour répondre aux recommandations et à la taille ; ayant moi-même la vue qui baisse avec l'âge, les plus jeunes d'entre vous comprendront un jour ; pour ceux que cela déplaît, il reste possible de diminuer la taille de police pour le site dans les préférences de votre navigateur ;
• les boutons ont été espacés et rendus plus grand pour être facilement sélectionnables sur ordinateur comme téléphone (sélectionner la plume bleue en haut à droite sur téléphone par exemple, nécessitait auparavant une précision millimétrique.

L'ensemble des pages du site seront progressivement refaites pour améliorer l'accessibilité, les contrastes, simplifier les codes. C'est un travail qui s'étalera sur de nombreux mois et dont je doute réussir à mener à terme avant la fin d'année prochaine.

Quelques dernières choses à vous dire :

• les menus en haut à droite ont également été réécrits, avec une meilleure lisibilité et une plus grande facilité de sélection des liens, sur ordinateur comme téléphone ;
• il n'est désormais plus possible de cliquer directement sur sa maison ou sur le rappeltout ou le cadre : le fait d'avoir des icônes qui déclenchent à la fois un lien et un menu posait des difficultés sur certains téléphones ou sur des appareils ayant à la fois une sélection avec souris et tactile (comme de nombreux ordinateurs désormais) qu'il ne m'était pas possible de résoudre (il était impossible d'ouvrir le menu sans déclencher le lien) ;
• des problèmes de couleur ont été résolu au Consilium ;
• l'argent possédé est désormais afficher dans un lien "bourse", le temps que je trouve un meilleur système ;
• les hiboux non lus et notifications s'affichent désormais sous forme de badge avec un petit chiffre, comme sur de nombreux sites et applications ; j'ai fait ce choix compte-tenu du grand nombre de complaintes que posaient les animations précédentes (très peu visibles lorsque désactivées) ; certains adorent, d'autres pas du tout, difficile de trouver quelque chose qui plaît à tout le monde ;
• je reste très insatisfait de la barre en bas (avec des raccourcis) pour de très nombreuses raisons que je ne détaillerai pas ici ; mais au regard de la forte utilisation qui en est faite, pour l'instant, je la conserve.

L'ensemble de ces nouveautés se sont accompagnées d'une réécriture complète des parties du site concernés. J'utilise des évolutions CSS récentes (qui me permettent beaucoup plus de choses et des codes plus simples), aussi l'utilisation d'un navigateur à jour (Firefox, Chrome, Edge, Safari) est indispensable. Si votre navigateur n'a pas été mis à jour depuis plus d'un an et demi / deux ans, le site ne s'affichera pas correctement.


Rendez-vous ici pour discuter de ces nouveautés et me faire part de vos remarques, avis, ou retours