Que fait Astrale Frontend Design ?
Construisez le Domaine comme une interface produit ciblée, pas comme une page d'accueil. Les Domaines vivent à l'intérieur de l'interface graphique Astrale et héritent de son enveloppe environnante. N'ajoutez pas de héros, de grande zone de présentation, d'en-tête de page redondant ou d'espace vide avant le contenu utile.
Appliquez cette skill conjointement avec les directives de vue astrale-domain. Réutilisez le langage visuel de l'application hôte et les primitives existantes du projet, sauf si la tâche établit une direction différente.
Planifier l'Architecture de l'Information
Avant d'écrire du code UI, esquissez un wireframe de haut niveau mentalement ou dans une note temporaire. Identifiez :
- la tâche principale de l'utilisateur ;
- les sections et sous-sections principales ;
- les liens logiques entre elles ;
- leur importance relative ;
- les informations qui vont ensemble ;
- le parent correct pour chaque sous-section.
Faites de chaque section une unité logique cohérente. Laissez l'architecture de l'information et la priorité des tâches guider la disposition, l'ordre, l'espace et le poids visuel. Placez l'état et les contrôles près du contenu qu'ils affectent.
Garder l'Interface Sobri
Évitez l'esthétique IA générique. Ne transformez pas chaque élément en carte, n'imbriquez pas de conteneurs sans besoin réel de regroupement, et ne faites pas lever les cartes au survol. Utilisez le survol uniquement pour clarifier l'interaction, et apportez la même clarté pour les utilisateurs au clavier et tactiles.
Préférez un petit nombre de régions fortes, une hiérarchie claire, un espacement compact et des contrôles cohérents. N'ajoutez pas par défaut de dégradés décoratifs, de pastilles, de métriques surdimensionnées, d'animations ou de texte ornemental. Chaque dispositif visuel doit communiquer une structure, un état, une priorité ou une affordance.
Rendre les États d'Interaction Précis
Modélisez les états pertinents (initial, chargement, vide, prêt, soumission, succès, échec, non autorisé et désactivé) avant de considérer qu'un flux est complet.
- Affichez le chargement dans la portée qui attend réellement : à l'intérieur d'un bouton soumis pour une action locale, ou avec un squelette de page pour le contenu initial de la page. Ne montrez jamais plusieurs chargeurs pour une seule action.
- Empêchez les soumissions en double. Préservez la saisie utilisateur en cas d'échec et placez les commentaires exploitables à côté du contrôle ou du contenu affecté.
- Gérez la création clairement : montrez que l'action a réussi, insérez le résultat là où l'utilisateur l'attend, et déplacez le focus uniquement lorsque cela aide la tâche suivante.
- Gérez la suppression clairement : distinguez la suppression réversible de la destruction définitive et ne confirmez que lorsque la conséquence justifie une interruption.
- Utilisez des mises à jour optimistes de liste lorsque le résultat est prévisible. Revenez en arrière en cas d'échec, affichez l'échec et réconciliez l'interface avec l'état Kernel validé.
- Fermez un menu déroulant ouvert lorsque l'utilisateur clique à l'extérieur ou appuie sur Échap. Prenez en charge la navigation au clavier, exposez l'élément sélectionné et ramenez le focus sur le déclencheur le cas échéant.
- Faites des étiquettes et valeurs longues une partie des tests de mise en page. Coupez le texte quand la lecture est importante ; tronquez uniquement dans un espace vraiment fixe et donnez accès à la valeur complète. Ne laissez jamais le texte couvrir des actions adjacentes.
- Gardez les boîtes de dialogue, menus, formulaires et actions en ligne utilisables au clavier. Utilisez un focus visible, des contrôles sémantiques, des étiquettes correctement associées et des annonces accessibles de statut ou d'erreur.
- Rendez les états de survol, désactivé, en attente, succès et erreur visuellement distincts sans vous fier uniquement à la couleur.
Réduire le Texte Délibérément
Ne conservez que le texte qui aide l'utilisateur à comprendre l'état, à décider ou à agir. Préservez les étiquettes nécessaires, les commentaires et le texte d'accessibilité. Supprimez les introductions, les répétitions, les aides évidentes, le texte décoratif et les descriptions qui ne font que reformuler un titre ou un contrôle.
Après l'implémentation, effectuez une passe de réduction de texte dédiée. Lisez chaque chaîne visible dans son contexte et supprimez-la sauf si l'interface devient plus difficile à comprendre, à décider ou à agir.
Vérifier le Résultat
Exercez les flux de tâches réels avec des données représentatives, vides, longues, en chargement et en échec. Vérifiez la création, la suppression, le rollback, le comportement au clic extérieur et à Échap, l'ordre du clavier, les mises en page étroites et les commentaires visibles. Ensuite, révisez l'écran une fois de plus et supprimez les cartes redondantes, les effets, le texte et l'espace avant le contenu utile.