Navigation à sous-niveaux, 0 CTA visible above the fold, incohérence graphique entre les pages, temps de chargement excessifs. Score UX initial : 2,5/5.
Navigation aplatie 4 entrées, CTA S'inscrire visible dès le premier écran, cohérence systématique, accessibilité tous âges. Cible : 4+/5.
| Critère | KinoCaen | Fête du Court M. | Kino-Session |
|---|---|---|---|
| Architecture | 1/5 | 4,5/5 | 4/5 |
| Organisation visuelle | 3/5 | 5/5 | 3/5 |
| Cohérence | 2/5 | 5/5 | 5/5 |
| Conventions | 4/5 | 5/5 | 4/5 |
| Informations | 3/5 | 5/5 | 2/5 |
| Compréhension | 3/5 | 5/5 | 4/5 |
| Guidage | 4/5 | 5/5 | 4/5 |
| Gestion des erreurs | 2/5 | 4/5 | 4/5 |
| Fluidité | 2/5 | 5/5 | 5/5 |
| Liberté | 5/5 | 5/5 | 5/5 |
| Accessibilité | 2/5 | 4,5/5 | 3/5 |
| SCORE GLOBAL | 2,5/5 | 4,7/5 | 3,8/5 |
Lister chaque événement dans la navigation pour un accès direct.
Garder une seule entrée « Nos événements » ; les événements individuels deviennent une bibliothèque parcourue de page en page, avec des raccourcis vers les récents sur l'accueil.
Pourquoi : les événements changent chaque année — les mettre dans la nav la ferait déborder et vieillir vite. Un parcours de clics logiques (pas forcément ≤ 3) oriente mieux la recherche et conserve l'historique dans le temps. La navigation ne se fait plus dans le menu, mais à travers les pages.
La navigation à sous-niveaux génère 4 clics minimum pour accéder à l'inscription noté 1/5. La FDC résout cela avec 4 entrées plates, score 4,5/5.
4 entrées fixes : Accueil · L'association · Actualités · Nos événements. CTA S'inscrire séparé et mis en avant. Suppression totale des sous-menus.
Rendre le site navigable en ≤ 2 clics depuis n'importe quelle page. Éliminer la désorientation mobile. Rendre S'inscrire visible en permanence.
Le site est surtout visité pour ses événements Kino. 0 CTA S'inscrire visible sans scroller. L'utilisateur cherche ce qui est la raison principale de sa visite.
Positionner "Prochain Kino" dans la homepage avant le fold titre, date, description courte, bouton S'inscrire bien visible. Fond contrasté pour la différencier.
Amener l'utilisateur à sa cible de recherche sans qu'il cherche. Passage de 4 clics à 1 clic pour s'inscrire.
Incohérence graphique majeure 2/5. Problèmes de contraste. KinoCaen vise tous les âges une direction "dark cinéma" créerait une barrière symbolique.
Direction pop accessible : fond crème #FFFDF5, Bebas Neue + Nunito min 17px, ombres décalées comic-style, couleurs par action (orange = S'inscrire, bleu = Programme).
Rendre le site accueillant pour tous les publics, d'assurer des contrastes WCAG AA, et de donner une identité forte qui reflète l'énergie du festival.
KinoCaen, c'est une association qui accueille tout le monde débutants qui n'ont jamais tenu une caméra, cinéphiles avertis, gens qui passent juste pour voir. Donc la DA devait dire ça avant tout : pas de barrière à l'entrée. Pas un site « cinéphile pointu » qui parle entre initiés, pas non plus un site « jeunesse » qui infantilise. Quelque chose entre les deux pop, mais sérieux dans la manière de structurer.
Pour ça, j'ai choisi quatre couleurs saturées qui fonctionnent comme un drapeau visuel : orange chaud pour les CTA fédérateurs (S'inscrire, Rejoignez), jaune électrique pour les highlights (le prochain Kino, l'événement à venir), bleu vif pour la programmation, vert pour la confirmation. Quatre couleurs c'est beaucoup mais c'est volontaire, ça évoque l'esthétique des affiches sérigraphiées des festivals indépendants, des fanzines qu'on trouve dans les ciné-clubs.
Côté typo, j'ai pris Bebas Neue en titre pour cette énergie typo qu'on retrouve sur les affiches de cinéma de quartier, les flyers de festivals et Nunito en corps accessible, ronde, lisible par toutes les générations (KinoCaen accueille des publics de 16 à 75 ans, donc le corps de texte ne pouvait pas être un truc fin et chic qui se lit mal sur mobile au soleil).
Le détail dont je suis le plus content : les bandes diagonales noir/blanc que j'utilise comme frises décoratives autour de certains titres de section c'est une référence directe au clap de cinéma. C'est le seul objet que tout le monde reconnaît, débutant ou pro, et c'est aussi le moment où tout commence : la prise du clap, c'est ce qui dit « OK on est tous au même moment dans le même film ». Pour une asso qui parle d'inclusivité et d'ouverture culturelle, c'était le bon signal discret, mais reconnaissable par tous.
Refonte basée sur analyse heuristique, pas sur observations comportementales. 5 tests usabilité avec profils représentatifs auraient validé ou remis en cause mes hypothèses avant de maquetter.
3 profils identifiés mais non formalisés en personae (nom, contexte, motivations, frustrations). Des personae documentés rendraient la démarche plus transmissible en présentation.
L'accessibilité est au cœur de mes choix mais je n'ai pas utilisé de vérificateur automatisé (Axe, Contrast Checker) pour valider chaque combinaison couleur/fond.
Les composants existent dans les wireframes mais ne sont pas rassemblés avec tokens et règles d'utilisation. À produire pour rendre le projet transmissible à un développeur.