Battle2Sites : Festivals d'été Francofolies de Spa 2015
Précédemment dans la Battle2Sites…
La bataille pour le titre du meilleur site de festival de l’été fait rage. Les 5 prétendants se disputent la vedette avec honneur à coups de couleurs et de lignes de code… Qui en sortira vainqueur ? Lisez nos tests et découvrez les détails croustillants de cette lutte acharnée !
- Épisode 1 : Le festival Rock Werchter
- Épisode 2 : Le festival des Francofolies de Spa
- Épisode 3 : Le festival de l’EsperanzAh!
Prologue
Spade disposant d’un laboratoire de test pour devices mobiles (ChiconValley), nous avons décidé de partager une série d’observations sur des sites web en les passant au crible d’appareils largement utilisés.
La battle de sites consiste à comparer l’expérience utilisateur sur plusieurs sites proposant des services comparables, le tout permettant d’évaluer l’adaptabilité aux contextes actuels de consultation.
Pour ce faire, nous utilisons une grille d’évaluation mise en place chez Spade qui se divise en 6 grands tests :
- Responsive Design
- Mobile First
- Page Speed
- Content First
- Design et ergonomie
- Accessibilité et SEO
Responsive Design
Le site applique en partie les règles d’un bon responsive design, dans le sens où nous y
retrouvons :
- Une grille fluide à partir d’un certain point seulement, en passant par des breakpoints (points de « rupture » du style de la mise en page suivant les tailles d’écrans des devices),
- Une reconnaissance du device utilisé,
- L’utilisation de « media queries« ,
- Une optimisation des images, mais nous notons l’absence de SVG, dont l’utilisation est généralement conseillée (certains éléments comme le logo se détériorent rapidement selon le type d’écran utilisé).
Optimisation
Malgré une compression effectuée sur une partie des fichiers JavaScripts et CSS, la vitesse du site pourrait encore être améliorée, tant en mobile qu’en desktop.
Sur la page « Affiche », 5,8 Mo peuvent être économisés, pour une réduction moyenne de 75%.
Un effort pourrait également être fourni au niveau des images : privilégier le JPEG et une meilleure optimisation pour le web.
Design et ergonomie
En mode desktop, nous avons repéré certains détails néfastes à une bonne ergonomie :
- Lorsque l’on clique sur « Tickets« , on est redirigé vers la page d’accueil du portail : problème de redirection de lien?
- Les images du slider en page d’accueil ne sont pas cliquables, ce qui pose un réel problème d’ergonomie.
Le reste des remarques en images :
L’identification du menu de type « navigation rapide »
Le site force l’utilisateur à passer par une page d’accueil avec 4 boutons alors que ces éléments se retrouvent plus loin dans la navigation. Le premier bouton s’intitule « Accueil » : ne sommes-nous pas déjà sur la page d’accueil ? Il y a donc une page avant l’accueil ? Cela génère une page « tunnel » dont l’utilité peut être remise en question.
Une grande partie du contenu renvoie vers des fichiers PDF
Cela n’aide pas au référencement des contenus : même si Google indexe les PDF, il ne les privilégie pas forcément en concurrence avec une page HTML classique. Cette approche rend la navigation plus ardue.
L’identification du menu de type « navigation rapide »
Les informations sont éparpillées sur 2 sites différents
Les Formules VIP renvoient vers un site dédié où l’identité visuelle diffère. On y joue avec d’autres styles, notamment au niveau typographique. Nous regrettons l’utilisation d’images contenant du texte au lieu de vrai contenu (un réel problème d’accessibilité).
L’affordance du bouton « Télécharger » sur la page des Francos-Junior
Côté typographie
La fonte Brandon Grotesque est parcimonieusement utilisée. Par contre le corps de texte en Arial déforce dramatiquement l’identité du site : une typographie plus originale aurait eu un meilleur impact. Il existe en effet de belles alternatives gratuites qui viendraient compléter la fonte principale.
Une hiérarchie sémantique des textes trop hétérogène
Au-delà de l’aspect technique de la chose, nous constatons l’absence totale de réflexion mobile lors du processus de design :
- La barre de recherche disparaît : les utilisateurs de smartphones n’ont donc pas le droit de lancer des recherches sur le site,
- La topbar contenant une navigation avec 6 éléments disparaît également en mode mobile.
Les remarques du mode mobile en images :
La navigation pénible en mobile
Un aperçu de la page « tunnel » dont nous parlions plus haut : les 4 éléments composant le menu ne sont pas directement visible au chargement de la page; ce n’est pourtant pas la place qui manque.
La navigation se résume à une liste de type « select » non-hiérarchisée affichant par défaut l’accueil, où que l’on soit sur le site.
On ne voit pas pas le contenu de la page « Affiche », le menu contextuel prend trop de place
Les images du TweetFeed se redimensionnent et créent beaucoup trop d’espace vertical
Un exemple d’élément non-aligné + un bouton qui ne fonctionne pas
Impossible de s’inscrire à la newsletter sur smartphone : le bouton ne réagit pas.
Résultat du test
En appliquant notre grille de pondération, le site obtient la cote de 56%.
Voici les résultats par points analysés :
| Responsive Design | 80% | |
| Mobile First | 30% | |
| Page Speed | 55% | |
| Content First | 45% | |
| Design et ergonomie | 85% | |
| SEO et accessibilité | 55% |
En conclusion
La recherche visuelle part d’un bon pied avec un portail vitrine du plus bel effet.
Nous avons par la suite été déçus par l’absence de cohésion dans une perspective « mobile ». Il est vraiment dommage que l’on ne retrouve pas ces caractéristiques ailleurs sur le site.
Outre un certain laxisme dans la personnalisation et la création de contenu, l’étape d’architecture du site pensée pour les mobiles semble avoir été passée à la trappe.
Nous expliquions l’intérêt en 2015 de penser une approche web « mobile first » pour garantir le meilleur usage possible des trois grandes familles de devices : smartphones, tablets et desktop.
En plus de l’imprécision de la navigation, des éléments comme l’outil de recherche disparaissent complètement en mode mobile et demandent un effort de concentration.
Ce genre d’approche décourage les visiteurs qui ne peuvent accéder rapidement à leur besoin.
Cependant, une bonne note est attribuée au côté technique, dont le code est presque entièrement valide et ce, sur une bonne partie du site.
La battle
La bataille des festivals fait rage, découvrez ci-dessous l’état de progression des sites ayant vaillamment combattu :
| 1 | Rock Werchter | 78% | Lire le test |
| 2 | EsperanzAh! | À venir | |
| 3 | Francofolies de Spa | 56% | |
| 4 | Couleur Café | À venir | |
| 5 | Dour | À venir |