Spécification Fonctionnelle - Page de Recherche MyTelevision
Document destiné à l'équipe de développement Version : 1.0 Date : Janvier 2024 Auteur : Équipe Produit MyTelevision
Table des Matières
- Contexte et Objectif
- Parcours Utilisateur
- Comportements Attendus
- Affichage par Défaut
- Système de Filtres Adaptatifs
- Design des Cartes avec Effet au Survol
- Adaptation Mobile et Tablette
- Critères d'Acceptation
- Références Visuelles
1. Contexte et Objectif
1.1 Pourquoi cette page ?
La page de recherche est un élément central de l'expérience MyTelevision. Elle permet aux utilisateurs de découvrir et trouver rapidement tous les contenus disponibles sur la plateforme : chaînes TV, films, séries, podcasts, radios, replays, événements en direct et articles d'actualité.
1.2 Ce que nous voulons accomplir
Nous souhaitons offrir une expérience de recherche qui soit :
- Intuitive : L'utilisateur doit comprendre immédiatement comment utiliser la page
- Complète : Tous les types de contenus doivent être accessibles depuis cette page
- Personnalisable : Les filtres doivent permettre d'affiner les résultats selon les préférences
- Engageante : Le design doit donner envie d'explorer et de découvrir des contenus
- Cohérente : L'expérience doit être uniforme quel que soit le type de contenu affiché
1.3 Le résultat attendu
À la fin du développement, l'utilisateur doit pouvoir :
- Accéder à la page de recherche depuis n'importe quel écran de l'application
- Voir une sélection de contenus par défaut s'il n'a pas encore saisi de recherche
- Taper un terme de recherche et voir les résultats correspondants instantanément
- Filtrer les résultats selon le type de contenu et des critères spécifiques
- Survoler une carte de contenu pour voir plus d'informations et des actions rapides
- Lancer directement la lecture ou ajouter un contenu à ses favoris depuis la carte
2. Parcours Utilisateur
2.1 Comment l'utilisateur arrive sur la page
L'utilisateur peut accéder à la page de recherche de plusieurs manières :
Scénario A - Depuis l'icône de recherche :
- L'utilisateur est sur n'importe quel écran de l'application
- Il clique sur l'icône de recherche (loupe) présente dans la barre de navigation
- Une modale ou barre de recherche s'ouvre avec un champ de saisie
- L'utilisateur peut soit taper un terme, soit cliquer sur la loupe pour accéder à la page complète
- Il arrive sur la page de résultats de recherche
Scénario B - Accès direct :
- L'utilisateur clique directement sur la loupe sans saisir de texte
- Il arrive sur la page de recherche en mode "découverte" (affichage par défaut)
2.2 Ce que l'utilisateur voit en arrivant
Si l'utilisateur n'a pas saisi de terme de recherche :
- Il voit une page organisée en sections présentant les différents types de contenus
- Chaque section affiche une sélection de contenus populaires ou recommandés
- Les chaînes de l'entreprise (D5 TV, D5 Music, My Comedy) sont mises en avant en priorité
Si l'utilisateur a saisi un terme de recherche :
- Il voit uniquement les sections qui contiennent des résultats correspondants
- Les sections sans résultat ne sont pas affichées
- Le terme recherché est visible dans le champ de recherche
2.3 Interactions possibles
Une fois sur la page, l'utilisateur peut :
- Modifier sa recherche en tapant dans le champ de saisie
- Filtrer les résultats en utilisant la barre latérale de filtres
- Explorer les contenus en faisant défiler la page
- Voir plus de détails en survolant une carte de contenu (sur ordinateur)
- Lancer une action en cliquant sur "Regarder" ou "Ajouter aux favoris"
- Accéder à tous les contenus d'une section en cliquant sur "Voir tout"
3. Comportements Attendus
3.1 Comportement de la recherche
| Situation | Ce qui doit se passer |
|---|---|
| L'utilisateur tape un texte | Les résultats se mettent à jour automatiquement après un court délai (éviter les requêtes à chaque lettre) |
| L'utilisateur efface tout le texte | La page revient à l'affichage par défaut (mode découverte) |
| Aucun résultat ne correspond | Un message explicite s'affiche avec des suggestions de recherche |
| La recherche est en cours | Un indicateur de chargement s'affiche |
3.2 Comportement des filtres
Les filtres à gauche de l'écran doivent s'adapter intelligemment au contexte :
Quand l'utilisateur effectue une recherche globale (tous types de contenus) :
- Seul le filtre "Type de contenu" est affiché
- L'utilisateur peut cocher/décocher les types qu'il souhaite voir (Chaînes, Films, Séries, etc.)
Quand l'utilisateur sélectionne un seul type de contenu :
- Les filtres spécifiques à ce type apparaissent
- Par exemple, pour les films : genres, année, note, pays, durée, qualité
- Le filtre "Type de contenu" reste accessible pour changer de catégorie
3.3 Comportement des sections
Chaque section de contenu doit :
- S'afficher uniquement si elle contient des données : Une section vide ne doit jamais apparaître
- Proposer un lien "Voir tout" : Pour accéder à la liste complète de ce type de contenu
- Respecter un nombre d'éléments cohérent : Pas trop peu (impression de vide) ni trop (surcharge)
4. Affichage par Défaut
4.1 Organisation des sections
Lorsque l'utilisateur arrive sur la page sans avoir effectué de recherche, il doit voir les sections dans l'ordre suivant (de haut en bas) :
- Chaînes TV - Toujours affichée, avec les chaînes prioritaires en premier
- Radios - Affichée si des radios sont disponibles
- Films - Affichée si des films sont disponibles
- Séries - Affichée si des séries sont disponibles
- Podcasts - Affichée si des podcasts sont disponibles
- Replays - Affichée si des replays sont disponibles
- Événements Live - Affichée si des événements sont disponibles
- Articles - Affichée si des articles sont disponibles
4.2 Mise en avant des chaînes prioritaires
Pour la section "Chaînes TV", l'ordre d'affichage doit respecter la priorité suivante :
- D5 TV - Toujours en première position
- D5 Music - En deuxième position
- My Comedy - En troisième position
- Autres chaînes populaires - Ensuite, par ordre de popularité
4.3 Quantité de contenus par section
| Section | Nombre d'éléments à afficher | Disposition |
|---|---|---|
| Chaînes TV | 10 éléments | 2 à 3 lignes de logos |
| Radios | 6 à 10 éléments | 1 à 2 lignes de logos circulaires |
| Films | 6 à 12 éléments | 1 à 2 lignes d'affiches |
| Séries | 6 à 12 éléments | 1 à 2 lignes d'affiches |
| Podcasts | 5 à 10 éléments | 1 à 2 lignes de pochettes carrées |
| Replays | 4 à 8 éléments | 1 ligne de vignettes horizontales |
| Événements Live | 3 à 6 éléments | 1 ligne de cartes |
| Articles | 3 à 5 éléments | Liste avec images |
5. Système de Filtres Adaptatifs
5.1 Principe général
La zone de filtres, située à gauche de l'écran, doit proposer des options de filtrage pertinentes selon le contexte. L'idée est de ne pas surcharger l'utilisateur avec des filtres inutiles, mais de lui proposer exactement ce dont il a besoin.
5.2 Filtres par type de contenu
Pour les Chaînes TV
- Catégorie : Généraliste, Sport, Info, Divertissement, Cinéma, Musique, Documentaire, Jeunesse
- Pays : France, Belgique, Suisse, Canada, Afrique, etc.
- Langue : Français, Anglais, Arabe, etc.
- Qualité : HD, SD, 4K
Pour les Films
- Genre : Action, Comédie, Drame, Thriller, Science-Fiction, Horreur, Romance, Animation, Documentaire, Famille
- Année de sortie : Sélection d'une plage d'années (ex: 2020 à 2024)
- Note IMDB : Note minimale souhaitée (ex: films notés 7 et plus)
- Pays de production : France, États-Unis, Royaume-Uni, etc.
- Durée : Court (moins de 90 min), Moyen (90-120 min), Long (plus de 120 min)
- Qualité vidéo : 4K UHD, Full HD, HD
Pour les Séries
- Genre : Action, Comédie, Drame, Thriller, Policier, Science-Fiction, Fantastique
- Statut : En cours de diffusion, Terminée, Annulée
- Nombre de saisons : 1 saison, 2-3 saisons, 4-6 saisons, 7 saisons et plus
- Année de début : Sélection d'une plage d'années
- Note IMDB : Note minimale souhaitée
Pour les Radios
- Genre musical : Pop, Rock, Jazz, Classique, Hip-Hop, Électro, World Music
- Type : Musicale, Info/Talk, Thématique
- Pays : France, International
Pour les Podcasts
- Thématique : Culture, Société, Science, Technologie, Humour, Actualités, Sport, Business
- Durée des épisodes : Courts (moins de 15 min), Moyens (15-30 min), Longs (30-60 min), Très longs (plus de 60 min)
- Langue : Français, Anglais
Pour les Replays
- Catégorie : Sport, Culture, Musique, Info, Divertissement, Documentaire, Jeunesse
- Chaîne d'origine : D5 TV, TF1, France 2, etc.
- Date de diffusion : Aujourd'hui, Cette semaine, Ce mois
- Disponibilité : Expire dans 7 jours, Expire dans 30 jours
Pour les Événements Live
- Type d'événement : Sport, Concert, Conférence, Cérémonie, E-Sport
- Date : Aujourd'hui, Cette semaine, Ce mois
- Statut : En direct maintenant, À venir, Terminé (replay disponible)
Pour les Articles
- Catégorie : Cinéma, Séries, Musique, Streaming, People, Annonces
- Date de publication : Aujourd'hui, Cette semaine, Ce mois
6. Design des Cartes avec Effet au Survol
6.1 Principe de l'effet hover
Toutes les cartes de contenu doivent avoir un comportement interactif au survol de la souris (sur ordinateur). L'objectif est de :
- Donner plus d'informations sur le contenu sans avoir à cliquer
- Proposer des actions rapides (regarder, ajouter aux favoris)
- Créer une expérience engageante et moderne
6.2 Comportement attendu pour chaque type de carte
Carte Chaîne TV
État normal (sans survol) :
- Affiche le logo de la chaîne
- Affiche le nom de la chaîne en dessous
Au survol :
- La carte s'agrandit légèrement vers la droite
- Un panneau apparaît à côté du logo avec :
- Le nom complet de la chaîne
- Une courte description (une phrase)
- Deux boutons d'action : "Regarder" et "Ajouter aux favoris"
Carte Film ou Série
État normal (sans survol) :
- Affiche l'affiche (poster) du film ou de la série au format portrait
Au survol :
- La carte s'agrandit vers la droite
- Un panneau apparaît à côté de l'affiche avec :
- Le titre du film/série
- L'année de sortie et les genres (ex: "2021 -- Action, Drame")
- Un résumé court (2-3 lignes maximum)
- La note IMDB avec les étoiles et le nombre de votes
- Un bouton principal "Regarder maintenant"
- Deux boutons secondaires : "Ajouter aux favoris" et "Ajouter à ma liste"
Carte Podcast
État normal (sans survol) :
- Affiche la pochette du podcast (format carré)
- Affiche le titre et la durée en dessous
Au survol :
- La carte s'agrandit
- Un panneau apparaît avec :
- Le nom du podcast
- La thématique (ex: "Culture & Société")
- Une courte description
- Le dernier épisode disponible avec sa durée
- Deux boutons : "Écouter" et "S'abonner"
Carte Replay
État normal (sans survol) :
- Affiche une vignette horizontale (format vidéo 16:9)
- Affiche le titre et la durée
Au survol :
- La carte s'agrandit
- Un panneau apparaît avec :
- Le titre de l'émission
- La catégorie et la chaîne d'origine (ex: "Sport -- TF1")
- Un résumé court
- La date de diffusion et la durée
- Une indication d'expiration si applicable (ex: "Expire dans 5 jours")
- Deux boutons : "Regarder" et "Ajouter aux favoris"
Carte Radio
État normal (sans survol) :
- Affiche le logo de la radio dans un cercle
- Affiche le nom de la radio en dessous
Au survol :
- La carte s'agrandit
- Un panneau apparaît avec :
- Le nom de la radio
- Le slogan (ex: "Hit Music Only")
- Une indication "En direct maintenant" avec un point rouge
- Deux boutons : "Écouter" et "Ajouter aux favoris"
6.3 Cohérence du design
Important : Toutes les cartes doivent suivre le même modèle de design pour garantir une expérience homogène :
- Même style de fond sombre semi-transparent pour le panneau d'information
- Même animation d'agrandissement fluide (environ 0.3 seconde)
- Même style de boutons d'action
- Même typographie pour les titres et descriptions
7. Adaptation Mobile et Tablette
7.1 Comportement sur mobile (écrans de moins de 768 pixels)
Sur mobile, la mise en page doit s'adapter :
- Les filtres ne sont plus affichés en permanence dans une barre latérale
- Un bouton "Filtrer" permet d'ouvrir les filtres dans un panneau qui glisse depuis le bas de l'écran
- La grille de résultats affiche 2 colonnes au lieu de 5-6
- L'effet hover n'existe pas sur mobile (pas de souris), donc les informations supplémentaires apparaissent au tap long ou sur la page de détail
7.2 Comportement sur tablette (écrans entre 768 et 1024 pixels)
Sur tablette :
- Les filtres peuvent être affichés dans une barre latérale repliable
- La grille de résultats affiche 3 à 4 colonnes
- L'effet hover peut fonctionner si l'utilisateur utilise un stylet ou une souris
7.3 Comportement sur ordinateur (écrans de plus de 1024 pixels)
Sur ordinateur :
- Les filtres sont toujours visibles dans une barre latérale fixe à gauche
- La grille de résultats affiche 5 à 6 colonnes
- L'effet hover est pleinement fonctionnel
8. Critères d'Acceptation
8.1 Fonctionnalités obligatoires
Pour que cette fonctionnalité soit considérée comme terminée, les éléments suivants doivent être implémentés :
Structure de la page :
- La page de recherche est accessible depuis l'icône de recherche
- La barre de recherche permet de saisir un terme
- Les résultats se mettent à jour automatiquement après la saisie
- La zone de filtres est présente à gauche sur ordinateur
- Les sections de contenu s'affichent correctement
Affichage par défaut :
- Sans terme de recherche, toutes les sections avec données sont affichées
- Les chaînes D5 TV, D5 Music et My Comedy apparaissent en premier dans la section Chaînes
- Chaque section propose un lien "Voir tout"
- Les sections sans données ne sont pas affichées
Filtres adaptatifs :
- En mode global, seul le filtre "Type de contenu" est affiché
- En sélectionnant un type, les filtres spécifiques apparaissent
- Les filtres correspondent à ceux décrits dans la section 5
- La sélection d'un filtre met à jour les résultats immédiatement
Effet au survol :
- Chaque type de carte a son effet hover implémenté
- L'animation est fluide (pas de saccade)
- Les informations affichées correspondent à la description de la section 6
- Les boutons d'action fonctionnent (Regarder, Favoris)
Responsive :
- L'affichage est correct sur mobile (2 colonnes, filtres en panneau)
- L'affichage est correct sur tablette (3-4 colonnes)
- L'affichage est correct sur ordinateur (5-6 colonnes, filtres fixes)
8.2 Points de qualité
- Le temps de chargement initial est inférieur à 2 secondes
- Les images se chargent progressivement (lazy loading)
- Un message clair s'affiche si aucun résultat ne correspond
- L'état des filtres est conservé dans l'URL (pour le partage de liens)
- Le bouton "retour" du navigateur fonctionne correctement
9. Références Visuelles
9.1 Inspirations pour l'effet hover
Pour les chaînes TV (petit logo) :
- Fond sombre avec le logo à gauche
- Nom de la chaîne en titre
- Description courte en dessous
- Style épuré et lisible
Pour les films et séries (grande jaquette) :
- L'affiche reste visible à gauche
- Le panneau d'information s'étend à droite
- Titre en gros, année et genres en plus petit
- Synopsis tronqué sur 2-3 lignes
- Note IMDB avec étoiles visuelles
- Bouton "Watch Now" proéminent
- Design sombre avec accents de couleur
Pour les filtres (sidebar) :
- Sections repliables avec chevron
- Cases à cocher pour les options multiples
- Curseurs pour les plages de valeurs (année, note)
- Style épuré avec fond sombre
9.2 Palette de couleurs suggérée
- Fond principal : Noir ou gris très foncé (#0D0D0D à #1A1A2E)
- Fond des cartes au hover : Noir semi-transparent (rgba(0, 0, 0, 0.9))
- Texte principal : Blanc (#FFFFFF)
- Texte secondaire : Gris clair (#A0A0A0)
- Accent / Actions : Rose ou rouge vif (#E50914 ou #FF0055)
- Étoiles notation : Jaune doré (#FFD700)
Annexe : Questions Fréquentes
Q : Que se passe-t-il si l'utilisateur clique sur une carte plutôt que de la survoler ? R : Un clic sur la carte doit rediriger vers la page de détail du contenu correspondant.
Q : Les filtres sélectionnés sont-ils conservés quand on change de type de contenu ? R : Non, les filtres sont réinitialisés car ils sont spécifiques à chaque type de contenu.
Q : Combien de temps les résultats restent-ils en cache ? R : Les résultats peuvent être mis en cache pendant 5 minutes pour améliorer les performances.
Q : L'historique de recherche est-il sauvegardé ? R : Oui, les 10 dernières recherches de l'utilisateur sont sauvegardées localement et proposées en suggestions.
Ce document est la référence pour l'implémentation de la page de recherche. Pour toute question ou clarification, contactez l'équipe produit.