Guide video utilisateur Obscura Flow

Objectif

Produire une video produit claire et pedagogique qui montre le parcours complet d’Obscura Flow: creer ou ouvrir un workspace, organiser les projets, verifier les metadonnees, archiver, controler l’integrite, sauvegarder, restaurer et diagnostiquer.

La video doit etre comprehensible par un nouvel utilisateur sans masquer la richesse produit. Elle doit aussi servir de checklist pour les captures automatisees et les tests de walkthrough.

Public

Photographes et studios qui doivent comprendre le workflow global.
Assistants digitaux et responsables d’archives qui operent les workspaces.
Support, QA et equipe produit qui verifient les ecrans critiques.

Style editorial

Ton: direct, calme, oriente utilisateur.
Annotations: courtes, une idee par bulle.
Rythme: une pause visible avant chaque clic important.
Vocabulaire: utiliser les termes UI visibles dans l’application.
Priorite: montrer les protections produit, puis les resultats.

Chapitrage propose

Chapitre	Duree cible	Objectif utilisateur	Ecrans couverts
1. Introduction	20 s	Comprendre workspace, projet, archive, restore	Home, sidebar, badges
2. Profil et etats	35 s	Identifier compte, licence, API, sync	Profile, sync panel, API health
3. Workspace	60 s	Creer, ouvrir, rechercher et charger	New workspace, My workspaces, details
4. Projets	90 s	Creer/importer, ouvrir, editer, inspecter	Project list, import wizard, project detail
5. Metadonnees	60 s	Scanner et lire l’EXIF	EXIF panel, JSON, filters
6. Archive	90 s	Comprendre eligibility, archive, history, checksum	Archive actions, archive cards
7. Operations centers	120 s	Diagnostiquer, verifier, restaurer	Integrity, Health, Restore, Data lineage
8. Remote et sync	50 s	Comprendre online/offline et backup distant	Sync panel, remote backup, cloud states
9. Settings	100 s	Configurer chemins, archives, restore, logs	Settings tabs
10. Logs et aide	45 s	Auditer et trouver l’aide	Logs, command palette, documentation, About
11. Conclusion	20 s	Retenir le workflow complet	Workspace summary

Scenario detaille

1. Introduction

Objectif ecran: situer l’application et ses objets principaux.

Action utilisateur:

Arriver sur l’ecran d’accueil ou le workspace demo.
Survoler la sidebar.
Survoler les badges API, sync et workspace.

Elements UI a montrer:

Logo et version.
Workspace courant.
Acces My workspaces, command palette, logs, archives, settings.
Badges API online/offline, pending sync, profile.

Annotation:

Titre: Un workflow photo complet
Description: Workspace, projets, archives et restauration dans une meme interface.
Duree: 4 s
Position: bas gauche
Priorite: haute

Mouvement souris:

Hover lent sur la sidebar.
Hover sur le badge sync.
Clic simple sur le panneau sync.

Resultat attendu:

L’utilisateur comprend que l’app centralise la gestion locale et la verification des archives.

2. Profil, licence et synchronisation

Objectif ecran: expliquer l’identite, les droits et l’etat backend.

Action utilisateur:

Cliquer sur profile-menu-button.
Montrer le compte demo, la licence et l’etat de connexion.
Fermer le profil.
Cliquer sur sync-status-toggle.
Cliquer ou survoler api-health-button.

Elements UI a montrer:

Nom utilisateur, email ou compte demo.
Plan/licence si disponible.
API online/offline/degraded.
Pending operation.
Last sync.

Annotation:

Titre: Compte et sync
Description: Le profil et le panneau Sync expliquent ce qui est local, en attente ou synchronise.
Duree: 5 s
Position: haut droit
Priorite: haute

Mouvement souris:

Clic simple sur profil.
Hover sur API health.
Clic simple sur sync status.

Resultat attendu:

Le panneau Sync expose l’etat API, la queue pending et la derniere synchronisation.

3. Workspace

Objectif ecran: montrer comment demarrer ou retrouver un espace de travail.

Action utilisateur:

Cliquer New workspace.
Remplir nom, description et dossier.
Montrer une validation de champ obligatoire si possible.
Annuler ou creer selon le scenario demo.
Cliquer My workspaces.
Rechercher Editorial.
Ouvrir les details.
Charger le workspace.

Elements UI a montrer:

Modale de creation.
Champ workspace name.
Working directory.
Liste locale et remote.
Details: id, path, backend id, copy buttons.
Confirmation de suppression sans confirmer.

Annotation:

Titre: Le workspace est la base
Description: Il conserve les chemins, projets, reglages, archives et operations de sync.
Duree: 5 s
Position: centre gauche
Priorite: haute

Mouvement souris:

Clic simple sur New workspace.
Saisie controlee dans les champs.
Hover sur le bouton disabled si validation.
Clic simple sur search.
Clic simple sur details puis open.

Resultat attendu:

Le workspace actif revient a l’ecran avec les projets et les statuts.

4. Projects, collections et import

Objectif ecran: montrer comment un dossier photo devient un projet suivi.

Action utilisateur:

Cliquer create-project-button.
Montrer le bouton submit disabled quand le nom est vide.
Annuler.
Cliquer import-project-button.
Parcourir l’import wizard.
Montrer les options avancees.
Revenir a la liste projets.
Ouvrir Paris Editorial.

Elements UI a montrer:

Project list.
Create project modal.
Import wizard.
Advanced mode.
Project cards.
Badges project status.
Collections ou grouping si visibles dans le workspace demo.

Annotation:

Titre: Importer sans perdre le contexte
Description: L'import prepare un projet exploitable, indexable et archivable.
Duree: 5 s
Position: bas centre
Priorite: haute

Mouvement souris:

Clic simple sur new project.
Clic simple cancel.
Clic simple import.
Clics Next reguliers.
Hover sur Advanced mode.

Resultat attendu:

Le projet est visible dans la liste et peut etre ouvert.

5. Detail projet et metadonnees

Objectif ecran: montrer que le detail projet rassemble les informations utiles avant archivage.

Action utilisateur:

Ouvrir le projet.
Survoler les badges Archive, Integrity, Backup, Remote.
Cliquer la section Technical si les champs systeme sont dans ce panneau.
Cliquer project-edit-button, puis annuler.
Cliquer scan-exif-button.
Ouvrir exif-json-toggle.
Filtrer IMG_1042.

Elements UI a montrer:

Project overview.
Workflow/Fast Track.
Technical Details: project id, workspace id, user id.
EXIF stats: images, indexed files, with EXIF, coverage.
EXIF raw data.

Annotation:

Titre: Pret pour l'archive
Description: Le detail projet regroupe progression, EXIF, identifiants et actions critiques.
Duree: 5 s
Position: haut gauche
Priorite: haute

Mouvement souris:

Hover sur badges.
Clic simple sur Technical.
Clic simple Edit puis Cancel.
Clic simple Scan EXIF.
Clic simple Show data.
Saisie dans le filtre.

Resultat attendu:

L’utilisateur voit l’etat du projet, les metadonnees indexees et les identifiants support.

6. Archive et verification locale

Objectif ecran: montrer comment l’application transforme un projet en archive verifiee.

Action utilisateur:

Hover sur archive-project-button.
Cliquer si le bouton est enabled, sinon montrer la raison disabled.
Cliquer refresh-archives-button.
Ouvrir une archive card.
Montrer engine, taille, date, chemin, checksum.
Montrer delete local archive, puis annuler.

Elements UI a montrer:

Bouton Archive project.
Archive history.
Archive card.
Details checksum.
Badge completed/missing/failed si fixture disponible.
Merge duplicates si visible.

Annotation:

Titre: Archive verifiee
Description: Chaque archive garde son historique, son checksum et son etat local.
Duree: 5 s
Position: bas droit
Priorite: haute

Mouvement souris:

Hover sur le bouton archive.
Clic simple archive/refresh.
Clic simple card details.
Hover sur checksum/copy.
Clic simple delete puis cancel.

Resultat attendu:

L’archive apparait comme un artefact verifiable et restaurable.

7. Integrity Center

Objectif ecran: expliquer la detection de corruption ou divergence.

Action utilisateur:

Ouvrir Integrity Center depuis command palette ou menu.
Cliquer integrity-run-scan-button.
Survoler les compteurs et issues.
Ouvrir une issue checksum-mismatch.

Elements UI a montrer:

Titre Checksums and corruption detection.
Algorithme de checksum.
Issues count.
Statut warning/error.
Action recommandee.

Annotation:

Titre: Detecter les changements silencieux
Description: Les checksums comparent source, archive et restauration.
Duree: 5 s
Position: centre droit
Priorite: haute

Mouvement souris:

Clic command palette.
Saisie Integrity Center.
Clic option.
Clic run scan.
Hover sur issue.

Resultat attendu:

L’utilisateur comprend quand relancer une verification ou refaire une archive.

8. Health Center

Objectif ecran: donner une vue operationnelle des risques.

Action utilisateur:

Ouvrir Health Center.
Cliquer health-refresh-scan-button.
Montrer cloud unreachable, chemin offline, preview missing, archive missing si presents.
Survoler les severites.

Elements UI a montrer:

Workspace health.
Critical/warning/unknown.
Issues groupees.
Chemins et actions.

Annotation:

Titre: Prioriser les problemes
Description: Health Center regroupe les risques avant qu'ils bloquent une archive ou une restauration.
Duree: 5 s
Position: haut centre
Priorite: haute

Mouvement souris:

Clic menu/command palette.
Clic refresh scan.
Scroll court dans les groupes.
Hover sur une issue.

Resultat attendu:

Les risques utilisateur sont lisibles et actionnables.

9. Restore Center

Objectif ecran: montrer la restauration controlee par simulation.

Action utilisateur:

Ouvrir Restore Center.
Montrer le bouton restore disabled avant simulation.
Cliquer restore-simulate-button.
Lire le rapport.
Montrer restore-project-button enabled.
Ne pas confirmer une restauration destructive si elle demande une confirmation.

Elements UI a montrer:

Archive selection.
Target restore path.
Conflict strategy.
Simulation report.
Restore button enabled after simulation.

Annotation:

Titre: Simuler avant d'ecrire
Description: La simulation expose fichiers, conflits et validite avant restauration.
Duree: 5 s
Position: bas gauche
Priorite: haute

Mouvement souris:

Hover sur restore disabled.
Clic simple simulate.
Scroll dans le report.
Hover sur restore enabled.

Resultat attendu:

La restauration est percue comme une action controlee, pas immediate.

10. Data lineage

Objectif ecran: montrer l’historique projet.

Action utilisateur:

Revenir au projet ou au centre contenant Data lineage.
Ouvrir Activity & Lineage si necessaire.
Filtrer type archive.
Filtrer status pending.
Revenir a All.

Elements UI a montrer:

Timeline events.
Type select.
Status select.
Source, date, path, status.

Annotation:

Titre: Comprendre l'historique
Description: Lineage relie import, EXIF, archive, sync et restore.
Duree: 4 s
Position: centre gauche
Priorite: moyenne

Mouvement souris:

Clic select type.
Clic option archive.
Clic select status.
Clic option pending.

Resultat attendu:

L’utilisateur comprend comment auditer un projet dans le temps.

11. Remote backup et sync

Objectif ecran: expliquer ce qui part vers le backend ou le stockage distant.

Action utilisateur:

Montrer le badge Remote/Backup dans le projet.
Survoler le bouton remote backup si visible.
Ouvrir settings remote storage.
Montrer provider, bucket/container, endpoint, prefix.
Simuler offline si la fixture le permet.
Revenir online et cliquer API health.

Elements UI a montrer:

Backup pending/backed up.
Remote status.
Sync pending queue.
Remote storage tab.
API health.

Annotation:

Titre: Local d'abord, sync ensuite
Description: Le travail continue offline; les operations repartent quand l'API revient.
Duree: 5 s
Position: haut droit
Priorite: haute

Mouvement souris:

Hover sur backup badge.
Clic settings.
Clic remote storage tab.
Clic API health.

Resultat attendu:

L’utilisateur distingue archive locale, backup distant et synchronisation API.

12. Settings

Objectif ecran: montrer les reglages qui gouvernent le workflow.

Action utilisateur:

Ouvrir Settings.
Parcourir General, Local Workspace, Projects, Archives, Sync, Remote Storage, Health/Integrity/Restore, Logs, Advanced.
Modifier un champ non destructif.
Montrer Save enabled puis Reset.
Montrer la danger zone sans valider.

Elements UI a montrer:

Save/Reset disabled puis enabled.
Archive engine, strategy, naming format.
Restore strategy.
Log retention.
Advanced/danger states.

Annotation:

Titre: Des politiques explicites
Description: Les reglages rendent imports, archives, restore et logs previsibles.
Duree: 5 s
Position: bas centre
Priorite: moyenne

Mouvement souris:

Clic chaque tab.
Scroll dans les tabs longues.
Hover sur Save disabled/enabled.
Clic Reset.

Resultat attendu:

Les reglages importants sont reperes sans rentrer dans une configuration exhaustive.

13. Logs, menus et aide

Objectif ecran: couvrir les menus visibles et l’observabilite.

Action utilisateur:

Ouvrir Logs.
Rechercher sync.
Montrer no matches avec une recherche volontairement absente.
Cliquer Clear logs puis annuler.
Ouvrir command palette.
Montrer Documentation.
Ouvrir About.
Si accessible en Electron, ouvrir les menus macOS: app, File, Edit, View, Help.

Elements UI a montrer:

Logs list.
Searchbox.
Error/status badges.
Clear confirmation.
Command palette.
Documentation guide.
About view.
Menu items macOS si capturables.

Annotation:

Titre: Audit et aide integres
Description: Logs, documentation et About donnent le contexte utile au support.
Duree: 5 s
Position: haut gauche
Priorite: moyenne

Mouvement souris:

Clic Logs.
Saisie recherche.
Clic Clear puis Cancel.
Clic command palette.
Saisie Documentation.
Ouverture menu macOS avec hover.

Resultat attendu:

L’utilisateur sait ou trouver les traces, l’aide et les informations produit.

14. Conclusion

Objectif ecran: resumer le workflow complet.

Action utilisateur:

Revenir au workspace ou project detail.
Montrer Workflow/Fast Track.
Survoler Archive, Integrity, Backup, Restore.

Annotation:

Titre: Workflow complet
Description: Importer, indexer, archiver, verifier, sauvegarder, restaurer.
Duree: 6 s
Position: centre
Priorite: haute

Resultat attendu:

Le spectateur retient la logique globale et les etapes critiques.

Checklist de couverture

Ecrans principaux

Workflows

UI details

Zones restantes ou partiellement accessibles

Les menus macOS ne sont pas visibles dans les captures navigateur Playwright actuelles. Il faut une capture Electron native pour les documenter vraiment.
Les file pickers systeme sont mockes ou remplaces par des champs dans le mode demo.
La compression, le backup distant et la restauration reelle doivent rester simules pour eviter des effets de bord pendant la video.
Les etats offline/online sont couverts par fixture, mais une bascule demo explicite rendrait le parcours plus clair.
Les conflits de sync ne semblent pas avoir un ecran dedie stable a documenter.

Ameliorations UX/docs recommandees

Ajouter un mode demo visible pour basculer API online/offline et cloud reachable/unreachable.
Ajouter une entree command palette explicite pour License, Documentation, About et chaque operations center.
Afficher une raison courte directement sur les boutons disabled importants, notamment Archive et Restore.
Ajouter un preflight d’archive plus visible avant compression: dossier, nombre de fichiers, taille estimee, moteur.
Ajouter une mini aide dans Restore Center: Simulate first, restore after review.
Ajouter une vue ou un filtre dedie Data lineage depuis la navigation principale si l’audit est central.

Workflow pour rejouer la capture

Depuis le repo app:

npm run docs:user-video:force

Depuis le repo documentation Starlight:

make video-update

Pour ajuster la duree:

OBSCURA_DOC_VIDEO_SECONDS=180 npm run docs:user-video:force