Header – Espace voyageur (version desktop)
1. Rôle du Header
Le header est la barre fixe située en haut du site Zorni.
Pour un utilisateur voyageur, il sert principalement à :
- revenir à la page d’accueil ;
- lancer et ajuster une recherche de voyage ;
- changer la langue de l’interface ;
- accéder à son compte (profil, voyages, déconnexion).
Le bouton « Devenir partenaire » est présent dans le header, mais la présente documentation se concentre sur le parcours d’un utilisateur particulier qui souhaite réserver un voyage, et non sur le parcours des agences.
2. Vues globales du Header
2.1. Utilisateur non connecté
Vue globale du header lorsque l’utilisateur n’est pas connecté :
Vue du header lorsque le panneau de recherche est ouvert :
2.2. Utilisateur connecté
Vue globale du header lorsque l’utilisateur est connecté :
Vue du header lorsque le panneau de recherche est ouvert :
3. Découpage fonctionnel du Header
Le header desktop est structuré en trois zones principales :
- zone gauche : logo Zorni ;
- zone centrale : barre de recherche ;
- zone droite : actions liées au compte et à la langue.
4. Zone gauche : logo Zorni
Le logo Zorni est affiché en permanence sur la partie gauche du header.
- Le logo renvoie toujours vers la page d’accueil.
- Il sert de point de repère visuel pour l’utilisateur.
- Quel que soit l’état (connecté ou non), le comportement du logo est identique.
5. Zone centrale : barre de recherche
La partie centrale du header est dédiée à la recherche de voyages.
Fonctionnement :
- La barre présente un résumé des principaux critères de recherche :
- destination ;
- dates de séjour ;
- nombre de voyageurs.
- Lorsque l’utilisateur clique sur cette barre, un panneau de recherche détaillé s’ouvre sous le header.
- Dans ce panneau, l’utilisateur peut :
- choisir ou modifier la destination ;
- sélectionner les dates de début et de fin ;
- ajuster le nombre de voyageurs ;
- lancer la recherche.
Les captures suivantes illustrent la différence entre la vue « simple » (barre compacte dans le header) et la vue « détaillée » (panneau ouvert).
- Barre compacte seule :
voir les images de header global (connecté / non connecté). - Panneau de recherche ouvert :
voir les imagesheaderSearchDeconnecte.pngetheaderSearchConnecte.png.
Le panneau se ferme lorsqu’un clic est effectué en dehors ou lorsqu’une action de validation ou de fermeture est déclenchée.
6. Zone droite : actions pour l’utilisateur non connecté
Lorsque l’utilisateur n’est pas authentifié, la zone droite comporte les éléments suivants (de gauche à droite) :
6.1. Bouton « Devenir partenaire »
- Ce bouton ouvre le processus d’inscription pour les partenaires (agences ou professionnels).
- Il n’est pas utilisé dans le parcours standard d’un voyageur particulier, mais reste visible dans le header.
- Il permet à un visiteur qui ne connaît pas encore la plateforme de découvrir l’offre côté partenaire.
6.2. Sélecteur de langue
Le sélecteur de langue est accessible via l’icône globe située dans la zone droite.
Vue du sélecteur de langue :
Fonctionnement :
- Un clic sur l’icône fait apparaître un menu déroulant.
- Le menu présente les langues disponibles (par exemple : Français, Anglais).
- La langue actuellement active est mise en avant.
- Le changement de langue actualise l’interface dans la langue choisie.
6.3. Menu invité (accès compte)
Lorsque l’utilisateur n’est pas connecté, un bouton de type « puce » permet d’ouvrir le menu invité.
Vue du bouton de menu invité :
Ce menu propose :
- une entrée « Se connecter / S’inscrire », qui déclenche le parcours d’authentification ;
- une entrée pour accéder au centre d’aide.
Ce menu est la porte d’entrée vers la création de compte et la connexion pour un voyageur.
7. Zone droite : actions pour l’utilisateur connecté
Une fois l’utilisateur authentifié, la zone droite évolue pour refléter son état connecté.
7.1. Sélecteur de langue
Le sélecteur de langue reste présent et fonctionne de la même manière que pour un utilisateur non connecté.
7.2. Avatar utilisateur
- Un avatar circulaire noir est affiché, contenant l’initiale du prénom de l’utilisateur.
- Un clic sur cet avatar redirige vers la page de profil.
- L’avatar permet à l’utilisateur d’identifier visuellement qu’il est connecté.
7.3. Menu compte (profil, voyages, déconnexion)
Un bouton de menu est affiché à droite de l’avatar.
Vue du bouton de menu compte :
Lorsque ce bouton est cliqué, un menu détaillé s’ouvre et permet de :
- accéder au profil utilisateur ;
- accéder à la liste de ses voyages ;
- se déconnecter.
Ce menu regroupe l’ensemble des actions liées au compte personnel du voyageur.
8. Résumé général du comportement
Le tableau suivant résume les éléments visibles selon que l’utilisateur est connecté ou non :
| Élément du header | Utilisateur non connecté | Utilisateur connecté |
|---|---|---|
| Logo Zorni | Oui | Oui |
| Barre de recherche | Oui | Oui |
| Panneau de recherche détaillé | Oui | Oui |
| Sélecteur de langue | Oui | Oui |
| Bouton « Devenir partenaire » | Oui | Oui |
| Menu invité (connexion / aide) | Oui | Non |
| Avatar utilisateur | Non | Oui |
| Menu compte (profil, voyages…) | Non | Oui |
Dans tous les cas, le header reste le point d’entrée principal pour :
- consulter l’offre de voyages ;
- ajuster rapidement une recherche ;
- gérer sa session (connexion ou déconnexion) ;
- accéder à son profil et à ses réservations.
Cette documentation couvre uniquement le comportement desktop pour l’espace voyageur ; la version mobile et les parcours spécifiques aux partenaires feront l’objet d’une documentation distincte.