Suite de https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/ l’article présente le "prompting" comme un acte de design : au lieu de donner des instructions vagues à l’IA, il faut structurer ses demandes comme un brief créatif, en définissant clairement le rôle, le contexte, les contraintes et le format attendu. Le framework WIRE+FRAME (Who, Input, Rules, Expected Output + Flow, Reference, Ask, Memory, Evaluate) permet de concevoir des prompts précis et réutilisables, transformant l’IA en un collaborateur efficace – à l’image d’un stagiaire guidé. Résultat : des outputs plus pertinents, actionnables et adaptés aux workflows design ou produit, avec moins d’allers-retours. Une approche inspirée du design UX, qui rend les interactions avec l’IA plus intentionnelles et productives.
L’article raconte l’expérience de Kate, une designer UX fictive dans une FinTech, qui intègre l’IA dans son processus de design sprint sur une semaine. Chaque jour, elle explore comment l’IA peut l’aider à comprendre les besoins des utilisateurs, générer des idées, critiquer des concepts, prototyper et tester, tout en restant centrée sur l’humain. L’IA accélère certaines tâches (synthèse de données, génération d’idées, création de prototypes), mais Kate réalise qu’elle doit constamment superviser, vérifier et adapter les résultats pour éviter les erreurs ou les biais. Elle souligne l’importance de conserver des compétences purement humaines comme l’empathie, la pensée critique et la curiosité, car l’IA reste un outil complémentaire, pas un remplaçant. L’article montre que l’IA peut être un collaborateur créatif, à condition de l’utiliser avec discernement et de ne pas lui déléguer le jugement ou la compréhension fine des utilisateurs. Une réflexion utile pour les designers souhaitant adopter l’IA sans perdre leur touche humaine.
Optimiser les PWAs selon leurs modes d’affichage — Les Progressive Web Apps (PWA) permettent de transformer une application web en une expérience proche du natif, mais cela peut aussi supprimer des fonctionnalités essentielles du navigateur (boutons retour, partage d’URL, etc.). L’article explique comment utiliser les requêtes média display-mode (standalone, fullscreen, minimal-ui, browser) et JavaScript pour adapter l’interface et l’expérience utilisateur en fonction du mode d’affichage. Par exemple, masquer les incitations à l’installation pour les utilisateurs ayant déjà installé l’app, ajouter des alternatives aux contrôles du navigateur, ou personnaliser le contenu pour un usage plus "app-like". Une approche progressive et ciblée permet de créer des PWAs plus intuitives et adaptées à chaque contexte d’utilisation.
L'article explore les distinctions cruciales entre les données brutes, les résultats et les insights dans le domaine de l'expérience utilisateur. Il souligne l'importance de transformer les observations en informations exploitables pour influencer les décisions stratégiques. L'article aborde également la question de la signification statistique dans la recherche UX, un sujet souvent source de confusion. Enfin, il propose des conseils pratiques pour communiquer efficacement les résultats de la recherche UX aux parties prenantes.
L'article explore comment le masquage CSS peut enrichir les animations web, leur donnant une dimension supplémentaire et un aspect plus cinématique. L'auteur, Andy Clarke, utilise des exemples inspirés de dessins animés classiques pour illustrer comment les techniques de masquage peuvent rendre les animations plus fluides et dynamiques. Il explique les concepts de base des masques et des chemins de découpe, et montre comment les appliquer pour créer des effets visuels captivants. L'article inclut également des démonstrations pratiques et des extraits de code pour aider les développeurs à intégrer ces techniques dans leurs projets.
L'article explore comment les techniques d'animation des dessins animés classiques peuvent inspirer les animations CSS modernes. L'auteur, Andy Clarke, montre comment il a appliqué ces principes pour créer des animations engageantes sur le site web du compositeur Mike Worth. Les limitations budgétaires des anciens dessins animés ont conduit à des techniques créatives, comme la réutilisation de cellules et de fonds, qui peuvent être reproduites avec CSS. Ces animations améliorent l'expérience utilisateur et renforcent l'identité de la marque.
L'article souligne l'importance de créer des messages d'erreur utiles et empathiques pour améliorer l'expérience utilisateur. Il recommande d'identifier les types d'erreurs possibles, d'écrire de manière humaine et claire, d'éviter un ton trop fantaisiste, d'utiliser la voix active, et de fournir des solutions claires pour aider les utilisateurs à résoudre les problèmes. La cohérence dans la présentation des messages d'erreur est également essentielle pour faciliter la compréhension et l'action des utilisateurs.
Une liste des attributs bien pratiques de l'élément input
Tout est dans le titre
Tout est dans le titre
Quelques bizarreries des formulaires HTML selon qu'il y ait un ou plusieurs champs input
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Les bonnes pratiques pour choisir entre masquer ou rendre "inactif" en UX :
- Masquer des fonctionnalités nuit à la possibilité de les découvrir
- Désactiver des fonctionnalités est frustrant sans explication
- Certaines peuvent être indisponibles ou hors sujet pour les utilisateurs
- Les utilisateurs peuvent s'attendre à l'existence d'une fonctionnalité mais ne la trouvent pas
- Nous devrions montrer uniquement ce qui est nécessaire et désencombrer le reste
- Il faut éviter les changements de disposition perturbants quand on montre / masque des fonctionnalités
- Ne supprimer pas des options ou des boutons non disponibles automatiquement
- À la place, désactivez les et permettez à l'utilisation de "masquer les options non disponibles"
- Permettez à l'utilisateur de masquer les sections ayant beaucoup de fonctionnalités désactivées
- Expliquez pourquoi une fonctionnalité est désactivée et comment la réactiver
Tout est dans le titre