jmaxzh/sdlc-conception-UI

Conception UI

Applicabilité

• S'applique à la conception, à l'implémentation, à la modification, à la revue, à l'optimisation ou au conseil sur les principes d'interface visuelle demandés pour desktop, mobile et web. Les tâches strictement backend, base de données ou autres sans travail d'interface visuelle sont hors du champ de cette compétence.
• Cette compétence fonctionne indépendamment du workflow SDLC et peut être installée seule. Pour les tâches qui impliquent également l'organisation de l'information, le comportement interactif ou la récupération, utilisez les directives UX disponibles, comme sdlc-ux-design, pour ces décisions.
• Lorsqu'un simple conseil sur les principes est demandé, donnez une réponse brève à ce niveau plutôt que de vous étendre dans une conception spécifique au produit, une implémentation ou un test d'acceptation.
• Pour les demandes de revue uniquement, rapportez les constatations et recommandations sans créer une nouvelle conception ni modifier l'implémentation.
• L'exploration de conception, les propositions, la comparaison de concepts et la validation de prototypes créent ou modifient uniquement des artefacts de conception autonomes. Ne modifiez le code de production que lorsque la demande inclut une implémentation.
• Pour les demandes mixtes, livrez la conception avant de poursuivre avec l'implémentation autorisée. Livrez et évaluez chaque élément séparément ; la validation d'un prototype ne constitue pas une acceptation de l'implémentation.
• Pour l'implémentation, suivez les vérifications existantes du projet. Lorsque l'environnement actuel permet de reproduire un défaut, effectuez une revérification ciblée de ce défaut ; choisissez les vérifications pour les autres changements de comportement en fonction de leur risque et de leur portée. Ne mettez pas en place d'environnements de vérification supplémentaires, ne produisez pas de rapports de vérification formels, et ne dupliquez pas les vérifications existantes uniquement pour satisfaire cette compétence.
• Pour les résultats d'implémentation, rapportez les vérifications effectuées, les observations et le périmètre non vérifié. Distinguez les preuves d'exécution, les inférences basées sur le code et le jugement subjectif ; l'auto-évaluation du modèle n'est pas une acceptation par l'utilisateur.

Lecture à la demande

• Suivez les principes partagés ci-dessous et lisez les références de plateforme pour la cible et le scénario réels.
• Desktop : lisez les principes desktop.
• Mobile : lisez les principes mobile.
• Web : lisez les principes web.
• Pour le web mobile, lisez à la fois les principes mobile et web. Pour d'autres combinaisons, chargez des références supplémentaires selon les conditions des documents sélectionnés.
• Si la plateforme n'est pas spécifiée, déduisez-la d'abord du contexte de la tâche et du projet. Pour des conseils généraux, utilisez uniquement les principes partagés. Ne demandez une clarification que si une tâche concrète manque encore d'une décision de plateforme nécessaire.
• Pour le contexte ou les limites d'une adaptation, consultez son entrée liée dans le contexte source et, si nécessaire, le passage original. Les instructions en anglais de cette compétence définissent l'adaptation locale ; la consultation n'importe pas les workflows ou outils en amont.

Livraison de conception

Utilisez cette section pour l'exploration visuelle demandée, les propositions, la comparaison de concepts ou la validation de prototypes, quelle que soit l'ampleur du changement. Dans les tâches mixtes, elle s'applique à la partie conception ; la livraison et l'acceptation de l'implémentation suivent la tâche et les exigences existantes du projet.

• Présentez les propositions de conception UI d'abord par génération d'images. Des captures d'écran d'interface existantes peuvent servir de références. Si la génération d'images n'est pas disponible ou échoue, présentez la proposition sous forme d'artefact HTML d'une seule page. Contexte source.
• Pour une conception UI/UX combinée, fournissez l'image de conception UI et un prototype UX HTML interactif. Lorsque l'UI utilise le repli HTML, utilisez un seul artefact HTML pour les deux.
• Pour les artefacts HTML, privilégiez le CSS et JavaScript en ligne afin qu'ils s'ouvrent directement. Utilisez un état local et des données illustratives clairement identifiées pour démontrer le périmètre d'interaction convenu.
• Inspectez la conception rendue à la fenêtre d'affichage prévue en utilisant du contenu réel lorsque disponible ; sinon, utilisez du contenu représentatif clairement identifié. Contexte source.
• Menez la livraison avec des images, des aperçus et des fichiers ouvrables. Gardez le texte d'accompagnement bref et limité aux instructions d'ouverture, au périmètre de simulation et aux limitations nécessaires.

Principes partagés

Application des principes

• Appliquez les principes pertinents au travail demandé, à la plateforme cible et au scénario.
• Expliquez les conditions et les compromis qui affectent la recommandation. Ne prescrivez pas un style visuel particulier de manière universelle.
• Avant de citer des exigences ou recommandations numériques, vérifiez leur source, leurs unités et leur applicabilité à la plateforme cible.

Principes de conception

• Points d'entrée et affordances : rendez les points d'entrée principaux visuellement reconnaissables. Utilisez l'apparence, l'étiquette et le placement d'un contrôle pour communiquer comment l'utiliser et ce que signifie son action. Contexte source.
• Cohérence et style : alignez les icônes, les composants et la décoration sur l'objectif du produit et les conventions de conception existantes. Maintenez le contenu lisible et les actions utilisables lors de l'ajout de décoration. Choisissez un style visuel qui correspond au type de produit, au public cible, au contexte d'utilisation et aux préférences visuelles déclarées. Contexte source.
• Système de conception visuel : utilisez par défaut des règles de conception visuelle à l'échelle du produit, avec des exceptions explicites au niveau de la page qui prévalent sur ces pages. Organisez les valeurs et motifs de conception réutilisables par rôle sémantique, en extrayant les définitions partagées lorsque des besoins répétés sont établis. Préservez les distinctions d'intention lorsque vous décidez quoi réutiliser. Contexte source.
• Direction esthétique : suivez les choix esthétiques explicites de l'utilisateur lorsqu'ils entrent en conflit avec les préférences stylistiques de la compétence. Contexte source.
• Concept de présentation : ancrez le concept visuel d'une page de présentation dans des caractéristiques spécifiques à son sujet. Contexte source.
• Adéquation du contenu : choisissez des mises en page qui s'adaptent à la forme, la longueur et la quantité du contenu réel. Lorsqu'une structure ne peut pas contenir le contenu requis, adaptez la structure tout en préservant les faits et les informations nécessaires. Contexte source.
• Médias disponibles : lorsqu'une approche visuelle dépend de médias, basez-la sur des actifs qui existent ou qui peuvent réellement être obtenus. Choisissez une composition réalisable lorsque les actifs requis ne sont pas disponibles. Contexte source.
• Typographie : choisissez des polices, tailles et interlignes adaptés aux conditions de lecture. Établissez une hiérarchie par la taille et le poids. Gardez le corps du texte et le texte de soutien lisibles, y compris lorsqu'ils sont agrandis, sans couper ou masquer le contenu ou les contrôles nécessaires.
• Langues cibles : pour les langues et systèmes d'écriture que le produit prend en charge, adaptez l'expansion du texte, la direction de lecture et le façonnement spécifique à l'écriture dans la typographie et la mise en page. Contexte source.
• Mise en page et espacement : utilisez la position et le regroupement pour exprimer l'importance et les relations. Appliquez l'alignement et l'espacement de manière cohérente. Adaptez la densité aux besoins de lecture, de comparaison et d'opération. Évitez les emphase concurrentes. Choisissez la structure de mise en page en fonction de l'espace disponible pour l'interface ou le conteneur. Réorganisez le contenu si nécessaire lorsque cet espace change, en gardant le contenu principal et les actions accessibles. Contexte source.
• Couleur, états et focus : définissez des couleurs primaires, de support et d'état et utilisez-les de manière cohérente. Assurez un contraste adéquat pour le texte, les contrôles et les états. Lorsque la couleur transmet des informations, complétez-la par du texte ou des formes. Rendez les états des contrôles et le focus visuellement identifiables. Pour chaque apparence que le produit prend en charge, vérifiez la lisibilité du texte et des contrôles ainsi que les distinctions d'état. Là où la plateforme cible expose des préférences de contraste élevé, respectez-les dans l'interface rendue. Contexte source.
• Cibles d'interaction : dimensionnez et espacez les cibles pour la souris, le toucher ou d'autres méthodes de saisie, en les rendant faciles à sélectionner sans activation accidentelle adjacente.
• Encodage des données : lors de la présentation graphique de données, choisissez des encodages visuels adaptés aux relations que les utilisateurs doivent comprendre. Rendez les unités et échelles applicables claires. Contexte source.
• Objectif du mouvement : utilisez le mouvement sur les surfaces orientées tâche et de lecture pour le retour d'information, les changements d'état ou la continuité. Lorsque le mouvement explique un changement, rendez sa cause et son effet compréhensibles. Sur les surfaces persuasives ou expérientielles, le mouvement peut servir un objectif expressif clair en soi. Lorsqu'un utilisateur active une préférence de mouvement réduit prise en charge par l'environnement cible, respectez-la. Lorsque vous réduisez ou remplacez le mouvement, gardez le contenu lisible et les changements d'état nécessaires compréhensibles. Le mouvement non essentiel ne doit pas bloquer la saisie. Lorsqu'une interaction prend en charge le basculement ou l'annulation, rendez son animation interruptible et passez à l'état d'interaction le plus récent ; interrompre une animation n'annule pas en soi une opération en arrière-plan. Contexte source.