Aller au contenu principal
Boletolibre

Bannière principale d’un site événementiel : rendre le premier écran utile

La bannière principale est la première section d’une page événementielle, mais elle ne représente pas tout le parcours d’inscription. Une personne qui arrive pour la première fois doit comprendre de quel événement il s’agit, quand et où il a lieu, et ce que fera le bouton principal. Rédigez cette réponse à partir des faits validés avant de choisir la photo ou la mise en page.

La rédaction de Boletolibre

Publié

Un panneau large de page et un panneau étroit de téléphone montrent la même hiérarchie : lignes de titre, symboles de calendrier et de lieu, bloc d’action principale et zone d’image distincte.
Les faits et l’action doivent rester reconnaissables du grand écran au téléphone. Les formes illustrent une hiérarchie, pas une interface de plateforme.

1. Valider les faits avant d’écrire le titre

Nommez l’événement avec des mots compréhensibles pour une nouvelle personne. Ajoutez une phrase sur l’expérience ou le public, puis la date validée, l’heure de début avec fuseau horaire et le lieu ou le format en ligne. Pour une série, précisez l’édition ou la date représentée par cette page ; un slogan permanent ne remplace pas le programme actuel. Désignez une personne responsable de chaque fait susceptible de changer.

Télécharger la fiche modifiable de rédaction et de publication (Markdown, en anglais)

2. Hiérarchiser le premier écran

Faites du nom de l’événement le titre principal. Placez la date et le lieu concrets à proximité, puis expliquez brièvement pourquoi participer. Un slogan décoratif peut appuyer cette explication, mais pas la remplacer. Gardez les informations indispensables en texte de page, plutôt que seulement dans une affiche. Comparez leur ordre sur ordinateur et sur téléphone avec la fiche avant d’approuver la maquette.

3. Relier l’action principale à sa vraie destination

Choisissez une action principale selon l’état actuel de l’événement. « Choisir des billets » doit mener au bon événement ou au choix de la date ; « Rejoindre la liste d’intérêt » doit ouvrir un vrai formulaire, pas une caisse. Une deuxième action, par exemple consulter le programme ou l’accès, doit porter un libellé différent. Notez le texte du bouton, l’URL cible, le responsable et la date du test. Le W3C explique que le but d’un lien doit être compréhensible par son texte ou son contexte déterminable par programme.[1]

4. Tester la page publiée, pas seulement la maquette

Ouvrez la page publique sur téléphone et grand écran. Vérifiez la lisibilité de la date, du lieu et du bouton, le cadrage de l’image et le retour à la ligne sans défilement horizontal. Si des mots se superposent à une photo, contrôlez leur contraste dans le cadrage réel ; le W3C décrit le contraste insuffisant sur une image de fond comme un échec d’accessibilité. Suivez le bouton au clavier et en tant que nouvelle personne, puis vérifiez que la destination affiche le même événement et l’état actuel des ventes. Recommencez après tout changement de date, de lieu ou de lien billets.[2][3]

Sources et lectures complémentaires

  1. Understanding ReflowW3C Web Accessibility Initiative · Consulté
  2. Failure F83: Background images without sufficient text contrastW3C Web Accessibility Initiative · Consulté