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, Qualité du design, Accessibilité et SEO. La semaine dernière, nous lancions une battle qui voit s’affronter les sites de festivals d’été en Belgique. Nous avons d’abord passé en revue le site du festival Rock Werchter, cette semaine c’est au tour du festival des Francofolies de Spa: www.francofolies.be. 

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 :

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.