# Améliorations UX - Documentation

**Auteur** : Équipe 4NK
**Date** : 2025-01-27

## Vue d'ensemble

Ce document liste les améliorations UX proposées pour la plateforme zapwall.fr. Ces améliorations visent à optimiser l'expérience utilisateur en minimisant les clics, améliorant le feedback, et rendant l'interface plus intuitive.

## 1. Navigation et minimisation des clics

### Raccourcis clavier globaux
- **`/`** : Focus automatique sur la barre de recherche
- **`Esc`** : Fermer les modals et overlays
- **`Ctrl/Cmd + K`** : Ouvrir une recherche rapide (command palette)
- **Navigation par flèches** : Naviguer entre les articles dans les listes
- **`Tab`** : Navigation séquentielle améliorée avec focus visible

### Actions directes depuis les cartes d'articles
- Bouton "Débloquer" visible directement sur la carte (sans clic supplémentaire)
- Aperçu au survol avec tooltip ou preview expandable
- Lien direct vers l'auteur sans navigation intermédiaire
- Actions contextuelles au clic droit (si pertinent)

## 2. Feedback utilisateur et états de chargement

### Skeleton loaders
- Remplacer les messages "Loading..." par des skeleton loaders pour :
  - Liste d'articles
  - Cartes d'auteurs
  - Contenu d'article
  - Profil utilisateur
- Animation subtile pour indiquer le chargement

### Confirmations visuelles
- **Toast notifications** :
  - Après déblocage réussi d'un article
  - Après publication réussie
  - Après paiement confirmé
  - Après actions importantes (suppression, modification)
- **Indicateur visuel** pour contenu déjà débloqué :
  - Badge "Débloqué" sur les articles
  - Icône de cadenas ouvert
  - Couleur différente ou bordure distinctive
- **Animation de succès** après paiement :
  - Confetti subtil ou animation de validation
  - Message de confirmation clair

### États de progression
- Barre de progression pour paiements en cours
- Indicateur de synchronisation plus visible (actuellement dans le header)
- Feedback immédiat sur les actions :
  - Boutons avec état loading (spinner)
  - Désactivation pendant le traitement
  - Messages d'état contextuels

## 3. Recherche et filtres

### Recherche améliorée
- **Recherche en temps réel** avec suggestions :
  - Autocomplétion basée sur les titres d'articles
  - Suggestions d'auteurs
  - Historique de recherche récente
- **Filtres combinables visibles** :
  - Badges actifs montrant les filtres appliqués
  - Compteur de résultats ("X articles trouvés")
  - Indication claire quand aucun résultat
- **Historique de recherche** :
  - Sauvegarder les recherches récentes dans IndexedDB
  - Afficher les recherches populaires

### Filtres persistants
- Sauvegarder les préférences de filtres dans IndexedDB
- Restaurer les filtres au retour sur la page
- Options de filtres avancés (date, catégorie, auteur combinés)

## 4. Modal de paiement

### Simplification du flux
- **Bouton "Payer avec Alby" en priorité** :
  - Plus grand et plus visible
  - Couleur distinctive (neon-green)
  - Positionné en haut de la modal
- **Auto-détection d'Alby** :
  - Détecter si Alby est disponible
  - Ouvrir automatiquement Alby si disponible
  - Afficher un message si Alby n'est pas installé
- **Instructions étape par étape** :
  - Guide visuel pour nouveaux utilisateurs
  - Étapes numérotées claires
  - Lien vers installation d'Alby si nécessaire
- **Option "Se souvenir de ce choix"** :
  - Mémoriser la méthode de paiement préférée
  - Pré-sélectionner la méthode au prochain paiement

### Amélioration visuelle
- **QR code amélioré** :
  - Plus grand (minimum 300x300px)
  - Meilleur contraste
  - Bordure distinctive
- **Copie d'invoice** :
  - Bouton de copie plus visible
  - Confirmation visuelle immédiate (toast)
  - Copie en un clic
- **Compte à rebours** :
  - Plus visible (barre de progression circulaire)
  - Alerte visuelle quand < 60 secondes
  - Message d'expiration clair

## 5. Accessibilité clavier

### Navigation complète au clavier
- **Tab order logique** :
  - Ordre de tabulation cohérent sur toutes les pages
  - Skip links pour navigation rapide
  - Focus visible sur tous les éléments interactifs
- **Navigation par flèches** :
  - Flèches haut/bas dans les listes d'articles
  - Flèches gauche/droite pour navigation entre sections
  - Enter pour activer les éléments
- **Raccourcis documentés** :
  - Aide accessible via `?` ou `Ctrl/Cmd + /`
  - Modal d'aide avec tous les raccourcis
  - Indication des raccourcis dans les tooltips

### ARIA amélioré
- **Labels ARIA** :
  - Tous les boutons iconiques ont des labels
  - Images avec alt text descriptif
  - Formulaires avec labels associés
- **Régions ARIA** :
  - `role="navigation"` pour le header
  - `role="main"` pour le contenu principal
  - `role="search"` pour la barre de recherche
  - `role="complementary"` pour les filtres
- **Annonces screen reader** :
  - `aria-live` pour changements d'état (paiement réussi, erreurs)
  - Messages d'erreur annoncés
  - Confirmations d'actions annoncées

## 6. Gestion d'erreurs

### Messages d'erreur actionnables
- **Messages clairs** :
  - Langage simple et compréhensible
  - Explication de l'erreur
  - Impact sur l'utilisateur
- **Actions de récupération** :
  - Bouton "Réessayer" pour erreurs réseau
  - Bouton "Vérifier la connexion" si applicable
  - Lien vers documentation si erreur complexe
- **Suggestions de solutions** :
  - "Vérifiez votre connexion Alby"
  - "Assurez-vous d'avoir des fonds suffisants"
  - "Vérifiez votre connexion Internet"

### Récupération gracieuse
- **Retry automatique** :
  - Retry avec backoff exponentiel pour erreurs temporaires
  - Indicateur visuel des tentatives
  - Option d'annuler le retry
- **Sauvegarde locale** :
  - Sauvegarder les données en cas d'erreur réseau
  - Reprendre où on s'est arrêté après reconnexion
  - Indication des données en cache

## 7. Performance perçue

### Chargement progressif
- **Pagination ou infinite scroll** :
  - Charger les articles par lots
  - Indicateur de chargement pour les lots suivants
  - Option de pagination classique
- **Lazy loading** :
  - Images chargées à la demande
  - Contenu lourd chargé progressivement
- **Préchargement** :
  - Précharger les articles suivants en arrière-plan
  - Précharger les images des articles visibles

### Transitions fluides
- **Animations subtiles** :
  - Transitions de page (fade, slide)
  - Animations d'apparition des éléments
  - Micro-interactions sur les boutons
- **Feedback visuel immédiat** :
  - Changement d'état instantané sur les interactions
  - Loading states locaux (bouton, carte)
  - Optimistic UI updates quand possible

## 8. Clarté des actions

### Hiérarchie visuelle
- **CTA principaux** :
  - Plus visibles (couleur, taille, position)
  - Contraste élevé
  - Espacement approprié
- **Actions secondaires** :
  - Moins proéminentes
  - Style discret mais accessible
- **États désactivés** :
  - Visuellement distincts
  - Explication du pourquoi (tooltip)

### Contexte et aide
- **Tooltips explicatifs** :
  - Sur les actions complexes
  - Sur les icônes sans label
  - Sur les fonctionnalités avancées
- **Icônes avec labels** :
  - Labels textuels pour toutes les icônes
  - Option d'afficher/masquer les labels
- **Guide de première utilisation** :
  - Tour guidé pour nouveaux utilisateurs
  - Points d'intérêt clairs
  - Option de skip

## 9. Expérience de lecture

### Amélioration de l'affichage
- **Mode lecture** :
  - Largeur optimale pour la lecture
  - Typographie améliorée
  - Espacement des lignes ajustable
  - Taille de police ajustable
- **Navigation dans l'article** :
  - Bouton "Retour en haut" pour longs articles
  - Table des matières pour articles longs
  - Indicateur de progression de lecture
- **Navigation entre articles** :
  - Navigation précédent/suivant dans une série
  - Suggestions d'articles similaires
  - Articles de l'auteur en bas de page

### Partage et engagement
- **Boutons de partage** :
  - Partage vers Nostr
  - Copie du lien
  - Partage vers réseaux sociaux (optionnel)
- **Suggestions** :
  - Articles similaires
  - Articles du même auteur
  - Articles de la même catégorie
- **Indicateur de popularité** :
  - Nombre de déblocages (si public)
  - Badge "Populaire" pour articles avec beaucoup de déblocages

## 10. Profil et publications

### Gestion rapide
- **Actions rapides** :
  - Éditer en un clic depuis la liste
  - Supprimer avec confirmation
  - Dupliquer un article
- **Vue d'ensemble** :
  - Statistiques visuelles (nombre d'articles, déblocages)
  - Graphiques de performance (optionnel)
  - Vue d'ensemble des revenus (si applicable)

### Prévisualisation avant publication
- **Aperçu exact** :
  - Prévisualisation WYSIWYG
  - Vue exacte de l'article tel qu'il apparaîtra
  - Test sur différents formats (mobile, desktop)
- **Validation avant publication** :
  - Checklist de validation
  - Vérification des champs requis
  - Avertissements pour champs manquants

## Priorisation

### Priorité haute
1. Skeleton loaders
2. Toast notifications
3. Indicateur visuel pour contenu débloqué
4. Raccourcis clavier de base (`/`, `Esc`)
5. Amélioration de la modal de paiement

### Priorité moyenne
6. Recherche améliorée avec suggestions
7. Filtres persistants
8. Navigation clavier complète
9. ARIA amélioré
10. Messages d'erreur actionnables

### Priorité basse
11. Mode lecture
12. Partage et engagement
13. Guide de première utilisation
14. Prévisualisation avant publication
15. Chargement progressif avancé

## Notes d'implémentation

- Toutes les améliorations doivent respecter les règles de qualité du projet
- Aucun fallback ne doit être introduit
- Tous les changements doivent être accessibles (ARIA, clavier, contraste)
- Les améliorations doivent minimiser les clics selon les règles du projet
- La documentation doit être mise à jour avec chaque amélioration