# Améliorations UX - Documentation **Auteur** : Équipe 4NK **Date** : 2025-01-27 **Dernière mise à jour** : 2025-01-27 (Amélioration modal paiement + Recherche avec suggestions + Filtres persistants + Navigation clavier complète + ARIA amélioré + Messages d'erreur actionnables) ## 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 ✅ Implémenté - ✅ **Recherche en temps réel** avec suggestions : - Autocomplétion basée sur les titres d'articles (5 suggestions max) - Suggestions d'auteurs (3 suggestions max) - Historique de recherche récente (5 dernières recherches, affiché quand la recherche est vide) - ⏳ **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 (service `lib/searchHistory.ts`) - Affichage automatique de l'historique quand la recherche est vide - ⏳ Afficher les recherches populaires (à implémenter) ### Filtres persistants ✅ Implémenté - ✅ Sauvegarder les préférences de filtres dans IndexedDB (service `lib/filterPreferences.ts`) - ✅ Restaurer les filtres au retour sur la page (chargement automatique dans `useHomeState()`) - ✅ Sauvegarde automatique à chaque modification des filtres - ⏳ Options de filtres avancés (date, catégorie, auteur combinés) - À implémenter ## 4. Modal de paiement ✅ Implémenté ### Simplification du flux - ✅ **Bouton "Payer avec Alby" en priorité** : - Plus grand et plus visible (variant "success", taille "large") - Couleur distinctive (neon-green) - Positionné en premier si Alby détecté - ✅ **Auto-détection d'Alby** : - Détecter si Alby est disponible (hook `useAlbyDetection()` avec vérification périodique) - Affichage conditionnel du bouton selon la détection - Message d'installation affiché si Alby n'est pas installé - ✅ **Instructions étape par étape** : - Guide visuel pour nouveaux utilisateurs (affiché conditionnellement) - Étapes numérotées claires (différentes selon présence d'Alby) - Instructions traduites (fr/en) - ⏳ **Option "Se souvenir de ce choix"** : - À implémenter (mémorisation de la méthode de paiement préférée) ### Amélioration visuelle - ✅ **QR code amélioré** : - Plus grand (300x300px) - Meilleur contraste (fond blanc, bordure cyan avec glow) - Bordure distinctive (`border-4 border-neon-cyan/50 shadow-[0_0_20px_rgba(0,255,255,0.3)]`) - ✅ **Copie d'invoice** : - Bouton de copie visible (variant "secondary") - Confirmation visuelle immédiate (toast) - Copie en un clic - ✅ **Compte à rebours** : - Plus visible (Badge avec format MM:SS) - Alerte visuelle quand < 60 secondes (animation pulse, variant "error") - 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é ✅ Implémenté - ✅ **Labels ARIA** : - Tous les boutons iconiques ont des labels (liens dans PageHeader, KeyIndicator, NotificationBadgeButton, AuthorFilterButton, ClearButton, Toast close button) - Images avec alt text descriptif (déjà présent dans la plupart des composants) - Formulaires avec labels associés (déjà présent) - ✅ **Régions ARIA** : - `role="navigation"` pour le header - `role="main"` pour le contenu principal - `role="search"` pour la barre de recherche (déjà présent) - `role="complementary"` pour les filtres (section changée en `