# HistoMétéo — UX Improvements Specification

Objectif : améliorer la lisibilité, l’utilité et le potentiel SEO de la page de résultats météo.

Ces améliorations ne modifient pas l’architecture générale du produit mais améliorent l'expérience utilisateur et la valeur des pages.

---

# 1. Comparaison améliorée entre deux villes

## Objectif

Rendre la comparaison entre deux communes plus lisible et plus informative.

La comparaison doit permettre à l’utilisateur de comprendre immédiatement les différences météo entre deux lieux.

## Fonctionnement

La comparaison affiche les indicateurs principaux pour les deux villes :

- température maximale
- température minimale
- précipitations totales
- vent moyen
- condition dominante

## Affichage recommandé

Tableau simple :

| Indicateur      | Ville A | Ville B |
| --------------- | ------- | ------- |
| Température max | 18.5 °C | 12.4 °C |
| Température min | 7.2 °C  | 3.1 °C  |
| Précipitations  | 0 mm    | 4.3 mm  |
| Vent moyen      | 8 km/h  | 12 km/h |

## Amélioration visuelle

Mettre en évidence la valeur dominante :

- couleur ou badge
- ou texte "plus chaud", "plus pluvieux"

Exemple :

Température max : **Marseille +6 °C**

## Contraintes

- même période pour les deux villes
- pas de surcharge visuelle
- réutiliser les données déjà calculées

---

# 2. Navigation interne de la page

## Objectif

Faciliter l’accès aux différentes sections de la page lorsque la période est longue.

La page peut contenir beaucoup d’informations et nécessite une navigation rapide.

## Fonctionnement

Ajouter une barre de navigation interne sous la section recherche.

Exemple :

Résumé | Graphique | Détail horaire

Chaque lien correspond à une ancre de section :

- #resume
- #graphique
- #horaire

## Contraintes

- navigation fixe ou sticky possible
- scroll fluide recommandé
- visible uniquement si des résultats sont affichés

---

# 3. Résumé automatique de la période

## Objectif

Générer automatiquement un résumé textuel décrivant les conditions météo sur la période sélectionnée.

Ce résumé améliore :

- la compréhension utilisateur
- le référencement SEO
- la valeur éditoriale de la page

## Contenu du résumé

Le texte doit inclure :

- température minimale
- température maximale
- précipitations totales
- conditions dominantes

## Exemple

Sur cette période à Strasbourg, la température a varié entre 3.2 °C et 18.5 °C.
Les conditions ont été majoritairement dégagées avec peu de précipitations.
Le cumul total de pluie est de 2.4 mm.

## Contraintes

- généré dynamiquement à partir des données
- pas de génération IA nécessaire
- texte simple et factuel

---

# 4. Maillage interne automatique (jours précédents / suivants)

## Objectif

Créer des liens vers les périodes adjacentes afin de faciliter l’exploration et améliorer le SEO.

## Fonctionnement

Ajouter deux liens sous le résumé ou sous le titre :

Voir le jour précédent
Voir le jour suivant

Ces liens modifient automatiquement la période.

Exemple :

Page actuelle :

2026-03-02 → 2026-03-05

Liens générés :

2026-03-01 → 2026-03-04
2026-03-03 → 2026-03-06

## Contraintes

- conserver la commune sélectionnée
- empêcher les dates futures
- générer des URL propres

---

# 5. Bloc de question sous le titre

## Objectif

Améliorer le SEO et la clarté de la page en formulant explicitement la requête météo.

Ce bloc transforme la page en réponse directe à une question utilisateur.

## Contenu

Afficher une phrase sous le titre principal.

## Exemple

Titre :

HistoMétéo

Bloc question :

Quel temps faisait-il à Strasbourg du 2 mars 2026 au 5 mars 2026 ?

## Contraintes

- généré dynamiquement
- visible uniquement lorsque les résultats sont affichés
- utiliser les dates et la commune sélectionnée

---

# Résultat attendu

Après ces améliorations, la page doit suivre cette structure :

1. Recherche
2. Question SEO
3. Résumé automatique
4. Comparaison entre villes
5. Navigation interne
6. Résumé par jour
7. Graphique météo
8. Détail horaire