300 lines
9.8 KiB
Markdown
300 lines
9.8 KiB
Markdown
# 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
|