jmaxzh/sdlc-ux-design

Conception UX

Applicabilité

• Appliquer à la conception, mise en œuvre, modification, révision, optimisation ou orientation sur les principes de l'expérience de tâche produit demandée pour desktop, mobile et web. Les tâches backend uniquement, base de données uniquement, et autres tâches sans interaction utilisateur visible sortent du cadre de cette compétence.
• Cette compétence fonctionne indépendamment du workflow SDLC et peut être installée seule. Pour les tâches impliquant également la hiérarchie visuelle, la typographie, la couleur, la disposition, la géométrie des contrôles ou le mouvement, utiliser les directives UI disponibles telles que sdlc-ui-design pour ces décisions.
• Lorsque seule une orientation sur les principes est demandée, fournir une réponse brève à ce niveau plutôt que de détailler dans une conception, mise en œuvre ou test d'acceptation spécifique au produit.
• Pour les demandes de révision uniquement, rapporter 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 prototype créent ou modifient uniquement des artefacts de conception autonomes. Modifier le code de production uniquement lorsque la demande inclut la mise en œuvre.
• Pour les demandes mixtes, livrer la conception avant de poursuivre avec la mise en œuvre autorisée. Livrer et évaluer chaque partie séparément ; la validation de prototype n'établit pas l'acceptation de la mise en œuvre.
• Pour la mise en œuvre, suivre les vérifications de projet existantes. Lorsque l'environnement actuel prend en charge la reproduction d'un défaut, utiliser une revérification ciblée de ce défaut ; choisir les vérifications pour les autres changements de comportement selon leur risque et leur portée. Ne pas configurer d'environnements de vérification supplémentaires, produire de rapports de vérification formels, ni dupliquer les vérifications existantes uniquement pour satisfaire à cette compétence.
• Pour les résultats de mise en œuvre, rapporter les vérifications effectuées, les observations et le périmètre non vérifié. Distinguer les preuves d'exécution, l'inférence basée sur le code et le jugement subjectif ; l'auto-évaluation du modèle n'est pas une acceptation utilisateur.

Lire à la demande

• Suivre les principes partagés ci-dessous et lire les références de plateforme pour la cible et le scénario réels.
• Desktop : lire principes desktop.
• Mobile : lire principes mobile.
• Web : lire principes web.
• Pour le web mobile, lire les principes mobile et web. Pour d'autres combinaisons, charger des références supplémentaires selon les conditions des documents sélectionnés.
• Si la plateforme n'est pas spécifiée, l'inférer d'abord à partir du contexte de la tâche et du projet. Pour des conseils généraux, utiliser uniquement les principes partagés. Demander une clarification uniquement 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, consulter son entrée liée dans 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 chaînes d'outils en amont.

Livraison de conception

Utiliser cette section pour l'exploration d'interaction demandée, les propositions, la comparaison de concepts ou la validation de prototype, quelle que soit la taille du changement. Dans les tâches mixtes, elle s'applique à la partie conception ; la livraison et l'acceptation de la mise en œuvre suivent la tâche et les exigences du projet existant.

• Présenter les conceptions UX sous forme d'artefact HTML interactif sur une seule page. Rendre les actions principales, les changements d'état pertinents et les actions de retour ou de récupération nécessaires opérables dans le prototype. Vérifier que les contrôles et les retours démontrent le fonctionnement prévu et distinguent les états pertinents. Contexte source.
• Par défaut, utiliser du CSS et du JavaScript en ligne pour que le HTML s'ouvre directement. Utiliser un état local et des données illustratives clairement identifiées pour démontrer le périmètre d'interaction convenu.
• Pour la conception UI/UX combinée, utiliser d'abord la génération d'image pour la proposition UI et fournir un prototype HTML UX interactif. Si la génération d'image est indisponible ou échoue, utiliser un seul artefact HTML pour les deux. Contexte source.
• Inspecter le prototype rendu à la fenêtre d'affichage prévue en utilisant du contenu réel lorsque disponible ; sinon, utiliser un contenu représentatif clairement identifié. Contexte source.
• Diriger la livraison avec l'aperçu interactif et le fichier HTML ouvrable. Garder la prose d'accompagnement brève et limitée aux instructions d'ouverture, au périmètre de simulation et aux limitations nécessaires.

Principes partagés

Application des principes

• Appliquer les principes pertinents pour le travail demandé, la plateforme cible et le scénario.
• Expliquer les conditions et les compromis qui affectent la recommandation.
• Avant de citer des exigences ou recommandations numériques, vérifier leur source, leurs unités et leur applicabilité à la plateforme cible.

Principes de conception

• Tâches et résultats : organiser l'interface utilisateur par objectifs utilisateur et ordre des opérations. Prioriser les informations et actions nécessaires pour la tâche en cours. Évaluer chaque surface par ce que ses utilisateurs doivent y accomplir. Contexte source.
• Points d'entrée et contrôles : rendre les points d'entrée principaux découvrables et l'action prévue de chaque contrôle claire. Utiliser des étiquettes de bouton qui identifient les actions et leurs objets ; étiqueter les icônes ambigües. Contexte source.
• Sémantique des icônes : déterminer la sémantique d'une icône à partir de son utilisation actuelle. Masquer les icônes décoratives redondantes à côté du texte visible de l'arbre d'accessibilité. Fournir une alternative textuelle pour les icônes autonomes significatives. Exposer le nom accessible d'un contrôle d'icône et l'état applicable. Contexte source.
• Priorité de tâche : sur un écran orienté tâche, laisser la question à laquelle l'utilisateur doit répondre en premier déterminer l'emphase visuelle et l'ordre de lecture. Contexte source.
• Structure de présentation : laisser les affirmations d'une page de présentation et les preuves qui les étayent déterminer les sections nécessaires et leur ordre. Contexte source.
• Contenu factuel et illustratif : baser les affirmations et preuves concernant des produits réels, des clients ou des activités commerciales sur des faits disponibles. Identifier clairement le contenu illustratif. Contexte source.
• Cohérence des données : dans le même périmètre de rapport, maintenir le même fait cohérent partout où il apparaît, et maintenir les chiffres dérivés cohérents avec leurs données sous-jacentes. Rendre claires les différences de périmètre, de période ou de base de calcul. Contexte source.
• Charge cognitive : présenter les options et le contexte nécessaires aux décisions, réduire la mémorisation et les saisies répétées, et permettre aux utilisateurs d'inspecter et de modifier les valeurs par défaut. Révéler les options complexes au fur et à mesure qu'elles deviennent pertinentes. Garder les informations nécessaires à une décision disponibles au point de choix, y compris lors de la réduction des étapes. Contexte source.
• Apprentissage : réduire l'effort mental inutile introduit par l'interface. Soutenir l'apprentissage qui aide les utilisateurs à comprendre et maîtriser leur tâche. Contexte source.
• Simplification : juger la simplification par les obstacles qu'elle supprime de la tâche de l'utilisateur. Préserver les fonctionnalités nécessaires, les informations pertinentes pour la décision et l'accessibilité. Contexte source.
• Cohérence : suivre les conventions d'interaction de la plateforme et le comportement cohérent des contrôles.
• Retour d'état et d'attente : montrer la place actuelle de l'utilisateur dans la tâche ou la navigation, l'état du traitement et les résultats. Distinguer le chargement, les données vides et l'échec. Répondre rapidement aux actions. Pour les longues opérations, fournir un statut fiable et montrer la progression réelle lorsqu'elle est mesurable. Adapter le feedback à l'importance sans interruptions fréquentes. Aligner la présentation de chaque état et les actions disponibles avec leur signification ; distinguer les états en lecture seule, désactivés et en cours. Contexte source.
• Contrôle utilisateur : fournir des actions de sortie, d'annulation et de retour découvrables. Prendre en charge l'annulation et le rétablissement là où approprié et clarifier quels changements ils affectent. Expliquer les conséquences avant les actions irréversibles. Les transitions visuelles ne doivent pas empêcher les actions de retour, de commutation ou d'annulation prises en charge. Distinguer l'interruption d'une animation de l'annulation d'une opération en arrière-plan. Contexte source.
• Modalité : réserver l'interaction modale aux tâches qui nécessitent d'interrompre le travail en cours ou de protéger la concentration. Contexte source.
• Prévention et récupération d'erreurs : énoncer les contraintes d'entrée et d'opération à l'avance au point où elles s'appliquent. Exiger une confirmation lorsque les conséquences le justifient. Valider à des moments appropriés sans interrompre une saisie incomplète. En cas d'échec, préserver la saisie valide, identifier le problème et son emplacement, expliquer les causes connues sans présenter des suppositions comme des faits, et offrir une voie de récupération.
• Connectivité et récupération : pour les tâches dépendantes du réseau, clarifier les capacités disponibles sous une connectivité limitée. Proposer des actions de repli ou de récupération que le produit prend réellement en charge. Contexte source.
• Langue de l'interface : utiliser la langue que le public cible comprend. Conserver les termes de domaine familiers lorsqu'ils transmettent précisément le sens voulu. Contexte source.
• Opération accessible : prendre en charge le clavier et les technologies d'assistance dans l'environnement cible, avec des noms de contrôle, états et focus identifiables. Fournir des actions équivalentes pour les entrées de précision ou les gestes complexes. Choisir le comportement d'interaction en fonction des capacités d'entrée réellement disponibles. Rendre les actions principales utilisables sans survol. Contexte source.