Épisode 1 : Le festival Rock Werchter

Épisode 2 : Le festival des Francofolies de Spa

Épisode 3 : Cette semaine, place au festival 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.

1. Responsive Design

Le site de l’EsperanzAh! respecte à la lettre toutes les règles d’un bon responsive design : une grille fluide dont le contenu et les images s’adaptent parfaitement. Une reconnaissance du device utilisé, l’utilisation de “media queries“, une optimisation des images, une réflexion “Touch” : les images du slider réagissent au glissement de doigt sur un smartphone, rien de plus confortable !

2. Mobile First

Le site de l’EsperanzAh! peut se targuer d’être le seul des festivals passés à la loupe disposant de sa propre app mobile, tant sur iOS que Android. C’est un avantage considérable : il est plus simple, en plein festival, d’ouvrir une app ne nécessitant pas de connexion à internet ou 3G/4G plutôt que de se connecter à un réseau qui pourrait être saturé de visiteurs. C’est un moyen simple et rapide de trouver une information de programmation, par exemple.

Nous décortiquons l’application en images :

2.1 La cohérence des styles peut être améliorée

Le site web et l’app sont à première vue semblables, puisque nous y retrouvons certains éléments identitaires et un design qui “respire”. Cette corrélation n’est malheureusement pas totale, puisque beaucoup d’éléments diffèrent entre les 2 plate-formes.

2.2 La navigation

La navigation est plus soignée dans l’app, il aurait été agréable de retrouver cette clarté dans la version desktop.

2.3 Une fiche artiste on ne peut plus complète

2.4 La fonction d’ajout aux favoris

3. Page Speed

La performance globale de la page est moyenne, voire faible si on regarde l’ensemble des points techniques. Trois règles principales sont bien respectées : afficher en priorité le contenu visible, réduire le temps de réponse du serveur, éviter les redirections sur la page de destination. La vitesse du site est considérablement ralentie par divers éléments tels que : le placement des fichiers JavaScript en en-tête de document qui ralentissent l’affichage, l’optimisation des nombreuses images et leurs attributs de taille.

Au total, 797,4 Ko peuvent être économisés sur les images en page d’accueil, pour une réduction moyenne de 27%. Il y a plus de 57 images à télécharger sur la homepage qui ne sont pas compressées. Le gain de temps pour l’affichage serait conséquent. Au chargement de la page d’accueil les miniatures des news arrivent beaucoup trop tard, ce qui génère beaucoup d’espace vide et une attente désagréable.

C’est expliqué par la structure du code dans la page avec les fichiers JavaScript placés en en-tête : le navigateur attend qu’ils soient récupérés puis chargés avant de continuer à demander les autres ressources. Il ne faut pas hésiter à placer les ressources compressées et minifiées (pour le JavaScript toujours), voire même à réaliser un seul appel pour les charger toutes en une fois. Il faut aussi exploiter une meilleure mise en cache des ressources externes : les appels vers des fichiers Facebook prennent souvent beaucoup de temps à être obtenus (vu la domination de Facebook sur les réseaux sociaux, ils doivent répondre à une charge gigantesque). Gros Bémol Vitesse  : le site échoue au test d’analyse de vitesse sur Mobile de Google à cause d’une erreur inconnue… sans doute liée aux fichiers JavaScript.

4. Content First

Nous retrouvons quasiment toutes les infos dont nous avons besoin sur le site, agrémentés toutefois de quelques obstacles visuels tels que des hauts de pages bien trop remplis ou des multiplications d’images. Une image décorative, une image contextuelle, et le contenu poussé loin en dessous.

5. Design et ergonomie

Le style général du site se veut moderne et peu périssable dans le sens où il n’essaie pas de “trop en faire”. Nous regretterons toutefois un manque de personnalisation : le site ressemble par endroits à un thème prêt-à-l’emploi. La gestion des langues n’est pas globale : les fiches d’artistes sont rédigées dans les 2 langues sur la même page. Une traduction complète aurait sûrement plu à nos confrères flamands…

Nous nous permettons de pointer du doigt certains comportements ayant retenu notre attention en mode desktop :

5.1 La navigation change d’aspect selon les largeurs d’écrans

5.2 Les images et des titres des articles ne sont pas cliquables

Alors que les internautes sont habitués à cliquer sur des miniatures et des titres, les articles forcent ici l’utilisateur à cliquer sur “En savoir plus” pour accéder au contenu.

5.3 La page programmation n’est pas conviviale

La page programmation affiche d’abord la totalité des artistes, ce qui nous oblige à descendre assez loin dans la page pour arriver à l’affiche en fonction des jours. Les dates et scènes sont indiquées sous les artistes, mais cela ne suit aucune logique de tri.

5.4 Détail : problème d’affordance des boutons

Les résultats du test

En appliquant notre grille de pondération, le site obtient la cote de 70%.

Voici les résultats par points analysés :

En conclusion

Le site de l’EsperanzAh! a été confectionné avec un soin indéniable : d’un design épuré en passant par une application mobile, rien ou presque n’est laissé au hasard. Il est dommage toutefois que la logique de réflexion “Mobile First” n’ait pas été de mise lors de l’élaboration de la plate-forme, à savoir une retranscription de l’application vers une structure web en tenant compte des différences techniques sans pour autant détériorer l’expérience utilisateur. Même si certains détails rebutent, la bonne ergonomie du site en fait un outil efficace pour se préparer à partir faire la fête… même au milieu d’une prairie sans couverture réseau.

La battle

La bataille des festivals fait rage, découvrez ci-dessous l’état de progression des sites ayant vaillamment combattu :