Battle2Sites : Festivals d’été
EsperanzAh!

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 !

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 :

  1. Responsive Design
  2. Mobile First
  3. Page Speed
  4. Content First
  5. 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 !
La page d'accueil de l'EsperanzAh! sur mobile - cliquer pour agrandir

La page d’accueil de l’EsperanzAh! sur mobile

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.

L'app abandonne le turquoise au profit du bleu foncé pour les icônes, boutons, et titres. La typographie n'est également pas la même - cliquer pour agrandir

L’app abandonne le turquoise au profit du bleu foncé pour les icônes, boutons, et titres. La typographie n’est également pas la même.

 

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.

Des éléments graphiques qui ne se retrouvent pas sur le site, et une navigation qui n'indique pas la page sur laquelle nous nous trouvons - cliquer pour agrandir

Des éléments graphiques qui ne se retrouvent pas sur le site, et une navigation qui n’indique pas la page sur laquelle nous nous trouvons.

 

2.3 Une fiche artiste on ne peut plus complète

Nous retrouvons toutes les informations utiles, y compris l'heure. Dommage qu'elle ne se trouve pas également sur le site - cliquer pour agrandir

Nous retrouvons toutes les informations utiles, y compris l’heure. Dommage qu’elle ne se trouve pas également sur le site.

 

2.4 La fonction d’ajout aux favoris

L'ajout d'un artiste aux favoris : une fonctionnalité vraiment sympathique - cliquer pour agrandir

L’ajout d’un artiste aux favoris : une fonctionnalité vraiment sympathique.

 

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 :

  1. Afficher en priorité le contenu visible,
  2. Réduire le temps de réponse du serveur,
  3. É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.

 

Un aperçu des news au chargement de la page d'accueil - cliquer pour agrandir

Tout cet espace vide est déstabilisant, jusqu’à l’apparition des images.

 

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.

Capture d’écran d’une news

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

Une fois passé sous la barre des 1000 pixels (en terme de largeur de fenêtre), la navigation passe en noir, ce qui pose un problème de contraste avec le logo qui est lui... rouge et bleu - cliquer pour agrandir

Une fois passé sous la barre des 1000 pixels (en terme de largeur de fenêtre), la navigation passe en noir, ce qui pose un problème de contraste avec le logo qui est lui… rouge et bleu.

 

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.

La logique voudrait que l'élément le plus grand soit être interactif - cliquer pour agrandir

La logique voudrait que l’élément le plus grand soit être interactif.

 

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.

Un choix judicieux aurait été de créer 2 pages distinctes : "Affiche" et "Programmation"- cliquer pour agrandir

Un choix judicieux aurait été de créer 2 pages distinctes : « Affiche » et « Programmation ».

 

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

Les boutons linguistiques dans les fiches d'artistes ont plutôt l'apparence d'un menu déroulant - cliquer pour agrandir

Les boutons linguistiques dans les fiches d’artistes ont plutôt l’apparence d’un menu déroulant.

 

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 :

Résultats du test site Esperanzah! - cliquer pour agrandir

Responsive Design 100%
Mobile First  50%
Page Speed  50%
Content First  75%
Design et ergonomie  80%
SEO et accessibilité  40%

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 :

1 Rock Werchter 78% Lire le test
2 EsperanzAh! 70%
3 Francofolies de Spa 56% Lire le test
4 Couleur Café À venir
5 Dour À venir

2 commentaires sur “Battle2Sites : Festivals d’été
EsperanzAh!

Laisser un commentaire

Votre adresse email ne sera pas publiée.

Vous pouvez utiliser ces tags et attributs HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*