Revisiter l’expérience utilisateur de l’Opéra National de Bordeaux avec Drupal

Photo de la salle de l'opéra de Bordeaux vide
L’Opéra National de Bordeaux porte depuis 2022 le projet d’Opéra Citoyen centré sur l'accessibilité du patrimoine culturel à tous les publics. Pour marquer ce cap, l'institution s'est récemment dotée d'une nouvelle identité graphique en lien avec cette vision. En ce sens, elle nous a sollicité pour refondre son site Drupal au profit d'une meilleure expérience utilisateur et d'une interface alignée sur sa nouvelle charte graphique.

Contexte du projet

Pôle majeur de la culture musicale et chorégraphique en France, l’Opéra National de Bordeaux propose chaque saison au public de nombreuses productions, lyriques et chorégraphiques ainsi que de nombreux concerts au Grand-Théâtre et à l’Auditorium de Bordeaux. L’accessibilité, le dialogue, la rencontre, le partage sont au cœur de l’engagement culturel et social de l’institution.

Après plusieurs années passées à assurer la maintenance du site de l'Opéra National de Bordeaux, ils nous en ont confié la refonte. Objectif : améliorer l’expérience utilisateur et mettre le site en conformité avec la nouvelle charte graphique de l’Opéra.

L’Opéra de Bordeaux s’adresse à différents publics : grand public, écoles (éducation nationale, école de danse, de musique…), partenaires (ville, institutions culturelles, entreprises…), médias. En ce sens, il propose plusieurs contenus et fonctionnalités pour toucher ces différents publics.

Principales fonctionnalités du site

  • Présenter les spectacles (calendrier, saison et description détaillée)
  • Proposer une billetterie
  • Présenter l’opéra : le lieu, l’institution, les artistes et les partenaires
  • Présenter ses actualités
  • Présenter ses actions : médiations, éducation, inclusion…
  • Diffuser les informations pratiques : réserver, venir, s’abonner, visiter le lieu…
  • Inciter et permettre le mécénat et les dons


C’est là qu’on entre dans le game

Pour les accompagner dans ce projet de refonte Drupal, nous sommes intervenus à plusieurs niveaux.

  • Spécifications fonctionnelles : rédaction du document de spécifications et du cahier des charges.
  • UX design : benchmark UX, audit du site précédent, réalisation d’une nouvelle arborescence, définition des parcours utilisateur, réalisation de wireframes et d’un guide des bonnes pratiques d’accessibilité et d’éco-conception.
  • UI design : benchmark UI, définition d’une direction artistique, design des maquettes responsives et prototypage.
  • Développement : développement et intégration Drupal, migration du contenu, contrôle qualité, tests et recette, mise en production, suivi et support.

Levée de rideau

Concrètement, nous avons tenté d’apporter de la valeur ajoutée à tous les niveaux. 

  • Une page d’accueil qui reflète une vision plurielle du monde
    Remplacement du carrousel photos par l’affichage simultané de plusieurs zones de thématiques (danse, orchestre, chœur, piano…) pour montrer la diversité de l’offre, alignée sur la vision du monde pluriel de l’opéra. 
     
  • Amélioration du parcours utilisateur
    Ajout d’un filtre thématique en page d’accueil, d’un bouton “réserver” directement dans le header, en sticky.
     
  • Simplification du header et du footer
    Pour une navigation plus facile, avec notamment l’ajout de menus de navigation secondaires au sein des pages pour alléger le menu principal. 
     
  • Refonte du moteur de recherche
    Pour le moteur de recherche global et dans le calendrier, simplification, autocomplétion et prise en compte du contenu éditorial dans le référencement.

Image illustrant trois captures d'écran mobiles du nouveau site de l'Opéra de Bordeaux

L'accessibilité, au coeur du projet

En tant que structure publique, l’accessibilité est inhérente au projet de l’opéra de Bordeaux. Un effort particulier a donc été porté au site.

L'accessibilité numérique consiste à concevoir un site web, de manière à être utilisable et compréhensible pour le plus grand nombre de personnes possible, y compris celles ayant des déficiences visuelles, auditives, motrices ou cognitives.

Plusieurs bonnes pratiques nous ont permis de rendre ce site Drupal accessible.

  • Alternatives textuelles pour les images : telles que des légendes ou des descriptions, pour les utilisateurs ayant des déficiences visuelles ou utilisant des lecteurs d'écran.
  • Couleurs contrastées : sur le texte et le fond pour aider les utilisateurs ayant des déficiences visuelles à mieux voir le contenu. Les contrastes ont même été rendus personnalisables via une icône présente dans le menu de navigation.
  • Polices facilement lisibles : pour aider les utilisateurs ayant des déficiences visuelles à mieux voir le contenu. Les tailles de polices ont même été rendues personnalisables via une icône présente dans le menu de navigation.
  • Feedback clair et informatif : pour les actions effectuées par les utilisateurs, tels que les clics sur les boutons et les soumissions de formulaires.
  • Optimisation de l’architecture d’informations : pour faciliter la navigation et la repérabilité.

Illustration qui explique les choix opéré en matière d'accessibilité sur le site de l'Opéra de Bordeaux

Un projet durable

L'éco-conception vise à concevoir des produits numériques ayant un impact environnemental le plus réduit possible. Là aussi, un effort particulier a été porté au moyen de plusieurs ateliers et via la mise en place de bonnes pratiques pour favoriser l’éco-conception.

  • Pas de scroll infini : mise en place d’une pagination claire dont le chargement du contenu est à la demande de l'utilisateur.
  • Un contenu texte ou image plutôt que vidéo : une vidéo pèse généralement beaucoup plus lourd qu'un texte contenant des images.
  • Utilisation d’un format d'image adapté : le format vectoriel comme le svg pour les illustrations, icônes, logos, etc, et le format webp pour les photos.
  • Limitation des fonctionnalités du site aux besoins réels des utilisateurs : car les incertitudes poussent à extrapoler les besoins souvent au-delà des attentes réelles.
  • Limitation des animations, vidéos et sons en lecture automatique : éviter de précharger des contenus et de les lancer sans consentement de l'utilisateur.

Une sortie par la grande porte

Fort de notre collaboration précédente pour la maintenance de l’ancien site, ce projet a été mené dans la confiance et le confort aussi bien pour notre client que notre lead développeur, déjà accoutumés à travailler ensemble.

Un grand merci à l’équipe de l’Opéra National de Bordeaux pour leur disponibilité, leurs retours, leur énergie et leur confiance.

En bonus, notre client nous a signifié sa satisfaction par un joli témoignage, ce qui nous réjouit et nous offre une sortie par la grande porte !

URL : https://www.opera-bordeaux.com/
Mise en production : 21/09/2023
Pour aller plus loin : Etude de cas

« Très tôt ce matin, disons que des elfes et des fées (du numérique) 🧚‍♀️ ont déposé au pied de votre écran une nouvelle expérience à vivre avec l'Opéra National de Bordeaux.  Rendez-vous sur opera-bordeaux.com ✨ N'hésitez pas à réagir !Merci à bluedrop 🧞 pour le résultat et aussi pour l'aventure humaine qu'a été ce développement en coulisses. Bravo encore à vous tous. »

Photo illustrant l'identité du témoignant :)
Caroline Notari Responsable du numérique, Direction des publics.

« Je tiens à vous témoigner notre satisfaction totale et entière concernant votre prestation et vos équipes. Cela nous conforte pleinement dans notre décision de vous avoir choisis. De plus, vous avez une équipe formidable de par son efficacité et son écoute. »

Photo illustrant l'identité du témoignant :)
Caroline Notari Responsable du numérique, Direction des publics.