Les Francofolies de Spa 2015

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 !

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
  6. 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.

L'écran d'accueil "tunnel", avec les 4 choix de navigation

Une jolie page, certes, mais extrêmement pauvre en information, qui n’amène aucune plus-value à la navigation et dégrade ainsi l’expérience-utilisateur.

 

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.

Beaucoup de liens redirigent vers des PDF dans le navigateur

Le recyclage des éléments produits en pré-presse traduit un certain laxisme de création de contenu.

 

L’identification du menu de type « navigation rapide »

La navigation rapide n'est pas très claire dans les pages d'informations pratiques

Il suffirait d’ajouter un titre « Navigation rapide » et d’améliorer le contraste de l’élément actif pour gagner en clarté.

 

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é).

Pourquoi ne pas rassembler le site et les formules VIP sur le même domaine ?

Pourquoi ne pas tout homogénéiser sur le même domaine ?

 

L’affordance du bouton « Télécharger » sur la page des Francos-Junior

Affordance : la capacité d’un objet à suggérer sa propre utilisation. Dans ce cas-ci, le bouton "Télécharger" devrait être cliquable.

Affordance : la capacité d’un objet à suggérer sa propre utilisation. Dans ce cas-ci, le mot « Télécharger » devrait être cliquable.

 

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.

Arial : une police "vue et revue" qui manque clairement de charme

Voyez-vous la différence entre le titre en capitales et les mots en capitales dans le paragraphe ? Il s’agit pourtant de deux typographies différentes : Brandon Grotesque et Arial. La seconde est peu identitaire et n’apporte aucune plus-value au site.

 

Une hiérarchie sémantique des textes trop hétérogène

Entre ces 3 titres, les styles diffèrent beaucoup trop : on a du mal à identifier leur rôle

Entre ces 3 titres, les styles diffèrent mais sans qu’on puisse clairement identifier leur rôle hiérarchique.

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.

Nous observons également la dégradation du logo : du SVG aurait été un meilleur choix

Nous observons également la dégradation du logo pixelisé : le SVG étant un format vectoriel, il garantit un bon rendu des logos quel que soit le contexte de consultation.

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.

La navigation sur mobile n'est vraiment pas pratique

La navigation sous forme de liste « select » ne permet pas l’identification des listes et sous-listes.

 

On ne voit pas pas le contenu de la page « Affiche », le menu contextuel prend trop de place

Sur la page Affiche, on ne voit pas le contenu actualisé par les filtres, il faut à chaque fois scroller.

Même remarque que pour Rock Werchter : on ne voit pas le contenu actualisé par les filtres, il faut scroller à chaque nouveau filtre.

 

Les images du TweetFeed se redimensionnent et créent beaucoup trop d’espace vertical

 

Le TweetFeed qui prend parfois trop de place à cause du redimensionnement des images

Le tweet qui a servi d’exemple se prolonge sur presque 3 écrans…

 

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.

Le souci du détail : les éléments du footer ne sont pas alignés.

Le souci du détail : les éléments du footer ne sont pas alignés.

 

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 :

Les résultats du test sous forme de graphique

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

4 commentaires sur “Battle2Sites : Festivals d’été
Francofolies de Spa 2015

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>

*