songalobung/ui-ux-design

Conception UI/UX Centrée sur l'Humain

Rendez la chose utile compréhensible, accessible et digne de confiance pour les personnes qui en ont besoin. Le polissage visuel soutient une bonne expérience ; il ne peut pas compenser la résolution du mauvais problème, un contenu confus, des contrôles inaccessibles ou un flux de travail non testé.

Principes de fonctionnement

1. Commencez par les personnes et les résultats. Comprenez qui essaie de faire quoi, dans quel contexte, avec quelles contraintes. Ne confondez pas une demande de partie prenante, une fonctionnalité ou une tendance avec un besoin utilisateur validé.
2. Concevez l'ensemble du parcours. Considérez les étapes, les canaux, les transferts, les résultats, les chemins de récupération et les besoins de support avant de polir un écran.
3. Rendez les preuves et les hypothèses visibles. Séparez ce que les utilisateurs ont dit ou ce que la recherche a démontré des interprétations et des hypothèses. Ne fabriquez pas d'utilisateurs, de recherche, de tests, de métriques, de témoignages ou de faits sur le produit.
4. Incluez les personnes souvent exclues. Tenez compte des variations de capacité, d'âge, de langue, de littératie, de culture, d'appareil, de connectivité, de temps, de confiance, de vie privée et d'environnement. Incluez les personnes handicapées dans la recherche et l'évaluation lorsque cela est possible.
5. Préférez la clarté, le contrôle et la récupération. Expliquez l'état actuel, rendez la prochaine action utile apparente, prévenez les erreurs prévisibles et fournissez des moyens appropriés pour annuler ou récupérer.
6. Traitez l'accessibilité comme une exigence de conception et de mise en œuvre. Utilisez les normes applicables avec précision, mais ne confondez pas la conformité technique avec une preuve d'utilisabilité.
7. Utilisez les motifs et les effets visuels au service de la tâche. Soyez cohérent et distinctif sans obliger les utilisateurs à décoder l'interface.
8. Itérez à partir des problèmes observés. Prototypez tôt, évaluez avec des personnes représentatives, corrigez les obstacles à fort impact et continuez à apprendre après le lancement.
9. Pensez au produit avant ses écrans. Comprenez la valeur vérifiée, les réalités commerciales/de service, les objectifs des utilisateurs, les risques et le cycle de vie. Ne faites pas ressembler chaque produit au même modèle à la mode.
10. Utilisez la narration visuelle honnêtement. Façonnez l'attention, l'atmosphère, l'imagerie, la profondeur et le rythme pour clarifier le sens. Ne fabriquez jamais de preuves et ne laissez pas la composition masquer des informations importantes.
11. Pratiquez la retenue dans le design. Les dégradés, le verre, les cartes, l'animation, la 3D et la décoration doivent gagner leur place. Supprimez les effets qui n'améliorent pas la clarté de la tâche, l'identité ou le feedback utile.

Modèle de fonctionnement multidisciplinaire

Pour un travail de conception substantiel, appliquez huit lentilles complémentaires en séquence et laissez-les se challenger mutuellement : le design produit vérifie l'adéquation tâche/produit ; la recherche UX vérifie les preuves et hypothèses ; la direction créative vérifie l'originalité et la cohérence ; l'architecture des systèmes de design vérifie la réutilisation et la cohérence ; l'ingénierie frontend vérifie la faisabilité et le comportement rendu ; la conception d'interaction/mouvement vérifie l'état, le feedback et le mouvement intentionnel ; l'audit d'accessibilité/utilisabilité vérifie l'opérabilité et l'inclusion ; et un critique de design impitoyable cherche les raisons les plus évidentes pour lesquelles le résultat pourrait encore échouer. Le critique doit être rigoureux sur le travail et respectueux envers les personnes. Ne prétendez pas être un professionnel humain certifié ou avoir mené des recherches, des audits ou des tests qui n'ont pas eu lieu. Les responsabilités détaillées et la séquence de révision se trouvent dans references/design-capability-playbook.md.

Sélectionnez la profondeur appropriée

Pour un petit changement de composant, inspectez les conventions environnantes, identifiez les états affectés, implémentez et effectuez des vérifications proportionnées. Pour un écran ou un flux, utilisez la boucle de conception complète ci-dessous. Pour un nouveau produit, un flux à haut risque ou un problème ambigu, effectuez une découverte et une validation avant de vous engager dans une solution polie. N'enflevez jamais une petite tâche en un cérémonial de processus ; ne sautez jamais les questions humaines et d'accessibilité simplement parce qu'un livrable est visuel.

Boucle de conception de bout en bout

1. Cadrez le problème

Identifiez le public cible, la tâche utilisateur, le résultat souhaité, les contraintes commerciales ou de service, l'environnement d'utilisation, la plateforme, le contenu, les risques et ce qui est explicitement hors de portée. Inspectez le produit existant et le dépôt avant de les modifier : navigation, analyses ou preuves de recherche si disponibles, routes, composants, jetons de design, contenu, dépendances et conventions de plateforme.

Demandez : Qu'est-ce que la personne doit accomplir ? Que doit-elle savoir avant d'agir ? Que se passe-t-il si elle réussit, échoue, s'arrête ou revient plus tard ? Quelles hypothèses ne sont pas vérifiées ? Qu'est-ce qui rendrait cette expérience dangereuse, exclusive, confuse ou coûteuse ?

Ne présumez pas que les étiquettes démographiques expliquent le comportement. Préférez le contexte observable, les objectifs, les obstacles et les preuves aux stéréotypes ou aux personas fictifs. Si un contexte critique manque, posez une question ciblée ; sinon, énoncez une hypothèse prudente et continuez.

2. Recherchez les besoins et le contexte de manière proportionnée

Utilisez la méthode la plus légère qui peut répondre à la décision à prendre : examinez la recherche existante et les retours de support ; inspectez les analyses ou les résultats de tâches lorsque disponibles ; interviewez ou observez les utilisateurs ; menez une enquête contextuelle ; cartographiez un parcours ; ou testez un prototype. Posez des questions ouvertes et non orientantes sur le comportement réel récent. Observez ce que les gens font ainsi que ce qu'ils disent. Protégez la vie privée, obtenez un consentement approprié et ne collectez pas de données sensibles sans un besoin clair et des mesures de protection.

Recrutez des personnes représentatives des tâches et des contextes pertinents, y compris des personnes handicapées et des personnes confrontées à des obstacles d'accès. Évitez de traiter un participant comme représentatif de toute une population. Enregistrez la méthode, les limites de l'échantillon, les preuves et les questions non résolues. Si la recherche directe n'est pas disponible, dites-le et étiquetez les besoins inférés comme des hypothèses pour une validation ultérieure.

3. Cartographiez le service et l'information

Cartographiez la tâche de bout en bout, du déclencheur au résultat réussi, y compris les prérequis, les décisions, les erreurs, les interruptions, les transferts, l'aide et les visites de retour. Marquez les étapes inutiles, les saisies répétées, l'éligibilité peu claire, les impasses et les points où les gens ont besoin de réassurance ou d'aide humaine.

Organisez le contenu autour des questions et actions des utilisateurs, pas de l'organigramme de l'organisation. Donnez à chaque page ou vue un objectif clair. Utilisez des titres descriptifs, un regroupement significatif et une navigation prévisible. Gardez les informations et choix clés visibles lorsque les utilisateurs en ont besoin ; utilisez la divulgation progressive uniquement lorsqu'elle réduit la charge cognitive sans cacher un choix important ou une prochaine étape.

4. Priorisez et définissez le succès

Priorisez en fonction de l'impact utilisateur, de la fréquence, de la gravité de l'échec, du risque d'accessibilité et de l'incertitude – pas de la nouveauté visuelle. Définissez à quoi ressemble le succès en termes observables : accomplir une tâche, trouver des informations correctes, se remettre d'une erreur ou comprendre une décision. Utilisez des mesures de résultat uniquement lorsqu'elles peuvent être recueillies honnêtement et interprétées avec leurs limites. N'inventez pas d'améliorations de conversion et ne revendiquez pas une causalité à partir d'un simple redesign visuel.

5. Explorez avant de vous engager

Esquissez ou prototypez plusieurs structures plausibles lorsqu'il existe une incertitude significative. Commencez par des décisions de flux ou de maquette basse fidélité avant d'investir dans la décoration. Comparez les alternatives en fonction de la clarté de la tâche, de l'effort utilisateur, de l'accessibilité, de la faisabilité et de l'adéquation produit. Utilisez une référence fournie pour extraire des principes – pas pour tracer une mise en page ou copier une identité distinctive.

6. Spécifiez la structure et le comportement

Créez un brief de conception proportionné : utilisateurs et contexte ; tâche et résultat ; hiérarchie du contenu ; actions primaires et secondaires ; direction visuelle ; états critiques ; contraintes de plateforme ; cible d'accessibilité ; hypothèses connues ; plan de validation. Définissez des contrats d'interaction pour les contrôles : objectif, méthodes de saisie disponibles, transitions d'état, feedback, erreur/récupération, comportement clavier/focus, et ce que la technologie d'assistance devrait apprendre.

7. Construisez sur le système existant

Inspectez et réutilisez les jetons, composants, sémantiques, motifs de mise en page et comportements de plateforme établis. Implémentez avec la pile native du dépôt. Ajoutez des dépendances uniquement lorsqu'elles résolvent un besoin réel et sont compatibles avec les contraintes de performance, de maintenance, d'accessibilité et de licence. Créez des composants partagés lorsque l'utilisation répétée ou un comportement complexe justifie l'abstraction ; gardez les éléments uniques simples.

8. Validez, affinez et rapportez

Testez des tâches complètes à des tailles réalistes et avec un contenu réaliste. Révisez avec le clavier, la souris, le tactile, le zoom/redimensionnement du texte, le mouvement réduit et la technologie d'assistance pertinente lorsque disponible. Menez des sessions d'utilisabilité avec des personnes représentatives pour des flux significatifs. Enregistrez les observations comme preuves, distinguez la gravité de la fréquence, corrigez les obstacles les plus impactants et retestez. Indiquez ce qui a été testé, ce qui ne l'a pas été, l'incertitude restante et les problèmes connus. Ne revendiquez jamais la conformité, la validation utilisateur ou un test de navigateur réussi sans preuve.

Guidance complémentaire détaillée

Chargez les références pertinentes pour la tâche plutôt que de vous fier à la mémoire ou à ce seul aperçu. Le catalogue d'outils est facultatif : n'exigez jamais un service nommé, ne revendiquez pas un accès indisponible et n'utilisez pas une nouvelle bibliothèque simplement parce qu'elle apparaît dans le catalogue.

• references/human-centered-process.md — découverte, éthique de la recherche, cartographie du parcours, structure du contenu, priorisation et tests d'utilisabilité pratiques.
• references/accessibility-inclusive-design.md — conception inclusive du handicap, limites de WCAG 2.2, implémentation sémantique, clavier/focus, formulaires, médias, mouvement et vérifications de la technologie d'assistance.
• references/interaction-patterns.md — feedback d'action, navigation, formulaires, recherche, tableaux, boîtes de dialogue, actions destructrices, erreurs, états vides/chargement et décisions d'interaction réactives.
• references/visual-design-systems.md — hiérarchie, typographie, couleur, espacement, mise en page, contenu, jetons, thèmes, imagerie, mouvement et direction visuelle cohérente.
• references/design-capability-playbook.md — méthodes de sélection explicites étape par étape pour l'intelligence de conception, la direction créative, la recherche, la mise en page, la typographie, la couleur, l'architecture, la psychologie UX, l'interaction, le mouvement, le design réactif et l'assurance qualité rendue. Lisez ceci pour les nouveaux écrans, les systèmes de design, les rafraîchissements visuels ou les demandes utilisateur détaillées.
• references/design-intelligence-architecture.md — enregistrements de raisonnement de conception, critique visuelle, simulation alternative, interprétation de capture d'écran, comparaison conception-code, régression visuelle, UX comportementale, intelligence réactive/performance, gouvernance, mémoire de projet, benchmarks et amélioration contrôlée. Lisez pour un travail produit avancé ou lorsque l'utilisateur demande des systèmes d'intelligence de conception.
• references/tool-selection-and-workflow.md — workflow facultatif de la découverte à la livraison et guide de sélection pour les outils nommés de couleur, type, recherche, composant, mouvement, 3D, icône, illustration, photo et assurance qualité de l'utilisateur. Lisez lors du choix ou de l'utilisation de références externes, d'actifs ou de bibliothèques d'implémentation. Vérifiez toujours la documentation actuelle, la compatibilité, les prix et les droits.
• references/tool-source-notes.md — notes de vérification de source primaire datées pour un sous-ensemble de ces outils ; utilisez comme pointeurs de lien, pas un substitut à la vérification des conditions de source actuelles.
• references/curated-source-research.md — livres supplémentaires de l'utilisateur, articles UX, aperçus de recherche et liens source Apple/Meta, avec des points clés vérifiés, la provenance, la portée des preuves et les limites. Chargez lors de la consultation de ces sources ou du choix de références de plateforme/e-commerce.
• references/knowledge-library.md — carte de la bibliothèque de référence organisée complète et recettes de chargement basées sur les tâches. Lisez ceci lors de la planification d'un travail substantiel ou de la sélection de références.
• references/design-philosophy.md — pensée produit, narration visuelle, persuasion éthique et retenue.
• references/design-styles.md, references/typography.md, references/color-theory.md et references/layout-patterns.md — connaissances détaillées en design pour la direction visuelle et la composition.
• references/ux-patterns.md, references/motion-design.md et references/design-systems.md — modèles de tâche, mouvement intentionnel et systèmes réutilisables.
• references/accessibility.md et references/platform-guidelines.md — routage rapide de l'accessibilité et adaptation spécifique à la plateforme. Vérifiez les détails volatils de la plateforme dans la documentation officielle actuelle.
• references/anti-ai-slop.md et references/visual-qa.md — critiquez les décisions de conception génériques et inspectez/corrigez le produit rendu.
• references/quality-assurance.md — révision de conception, évaluation d'utilisabilité, assurance qualité d'implémentation, gravité, itération et transfert honnête.
• references/standards-and-sources.md — références faisant autorité et lesquelles sont normatives, informatives, spécifiques à une plateforme ou heuristiques.
• references/source-patterns.md — motifs observés sur les douze bibliothèques d'interface utilisateur fournies par l'utilisateur, plus mises en garde de réutilisation spécifiques aux éléments.
• templates/design-brief.md et templates/usability-test-plan.md — modèles de travail adaptables. Utilisez uniquement les champs pertinents pour la portée.
• templates/design-decision-log.md et templates/design-evaluation.md — enregistrements réutilisables pour la justification, les alternatives, les preuves, l'implémentation, la portée des tests et l'incertitude restante.

Barre d'acceptation de l'implémentation

Avant de déclarer une interface terminée, confirmez les points applicables ci-dessous ou notez explicitement pourquoi un élément n'a pas pu être évalué :

• Objectif : La vue a un travail clair, le contenu répond aux questions probables de l'utilisateur et l'action principale est compréhensible.
• Comportement : Chaque contrôle apparent fait ce qu'il promet ; les changements d'état sont visibles ; les erreurs ont un chemin de récupération ; aucun contrôle mort ou factice ne reste.
• Accessibilité : La sémantique et les noms sont corrects ; les utilisateurs de clavier peuvent accomplir la tâche ; le focus est visible et prévisible ; le contenu n'est pas véhiculé par la seule couleur ; le contraste, le zoom, le mouvement et les exigences de taille de cible ont été vérifiés par rapport aux critères applicables.
• Contenu : Les étiquettes sont spécifiques et simples ; la validation est utile ; les états vides, de chargement, de succès et d'échec sont conçus lorsque cela est pertinent ; les affirmations et le contenu sont exacts.
• Utilisation réactive :