Concevoir des pages web à l’aspect cohérent et faciles à utiliser pour tous

## Faire ressortir d’abord le message principal et l’étape suivante Utilisez le poids visuel pour rendre l'importance évidente avant d'affiner la décoration. Une page doit aider les personnes à identifier son objectif, à comprendre sa valeur principale et à reconnaître l'action suivante en quelques secondes. - Donnez à chaque écran ou section un seul message principal. - Limitez la hiérarchie fondamentale au titre de la page, aux titres de section et au corps du texte ; n'ajoutez des niveaux plus profonds que lorsque c'est nécessaire. - Renforcez le contenu le plus important par la taille, le contraste, la position et l'espace qui l'entoure. - Placez la conclusion avant les détails qui l'étayent lorsque la lecture rapide est importante. - Réservez le traitement le plus marqué à l'action ou à la décision principale. - Évitez de rendre chaque élément grand, gras, coloré ou très contrasté. - Effectuez un test de 5 secondes : une nouvelle personne peut-elle expliquer la page et l'étape suivante attendue ? ## Aligner les éléments sur une grille et des espacements communs L'espacement communique les relations. Utilisez une échelle et une grille communes afin que les éléments liés paraissent connectés, que les groupes distincts restent séparés et que les mises en page puissent changer sans perdre leur rythme. - Commencez par une échelle d'espacement de 8 pixels ; autorisez une subdivision de 4 pixels lorsqu'un contrôle plus précis est nécessaire. - Utilisez une grille responsive simple, par exemple 1 colonne sur les téléphones, 2 sur les tablettes et jusqu'à 12 sur les écrans larges. - Maintenez l'espace à l'intérieur d'un groupe inférieur à l'espace entre les groupes. - Alignez les composants répétés sur des colonnes, des bords et des lignes de base communs. - Comme points de départ, réglez l'interligne du corps du texte près de 1.6 et l'espace entre les paragraphes autour de 1.5 à 2 hauteurs de ligne. - Utilisez des tokens pour les valeurs d'espacement au lieu d'inventer des mesures presque identiques. - Examinez le rythme vertical entre les sections et les composants à chaque largeur prise en charge. ## Garder un ordre de lecture clair du mobile au grand écran Organisez le contenu dans l'ordre dont les personnes ont besoin, puis laissez la mise en page visuelle renforcer cette séquence. Le design responsive doit préserver le sens, et non simplement adapter le contenu à des écrans plus petits. - Concevez d'abord l'ordre du contenu pour les appareils mobiles, puis enrichissez la mise en page pour les écrans plus larges. - Lorsque c'est possible, maintenez les lignes du corps de texte japonais autour de 35 à 45 caractères et le texte latin autour de 45 à 75 caractères. - Séparez les paragraphes web par un espace au lieu de vous fier à l'indentation de la première ligne. - Placez le point essentiel de chaque section avant les preuves, puis l'action correspondante après les preuves. - Rendez la séquence des titres compréhensible lorsqu'elle est lue sans le corps du texte. - Préservez l'ordre logique du code source lorsque les colonnes se replient ou que les éléments se déplacent. - Testez le zoom, l'agrandissement du texte, les largeurs étroites, les libellés longs, les dates, les prix et les systèmes d'écriture mixtes. ## Choisir des tailles de texte et des interlignes faciles à lire La typographie établit la hiérarchie, la lisibilité et la confiance. Utilisez une échelle typographique limitée et un interligne suffisant pour que le texte reste confortable sur les petits écrans et stable malgré les variations de contenu. - Commencez autour de 28 à 36 pixels pour H1, de 22 à 28 pour H2, de 18 à 20 pour H3 et de 16 à 18 pour le corps du texte. - Utilisez un interligne proche de 1.6 pour le corps du texte et d'environ 1.25 à 1.4 pour les titres. - Ne comptez pas sur un corps de texte de 13 à 14 pixels ou moins sur mobile. - Limitez les familles et les graisses de police ; créez d'abord une distinction par la hiérarchie avant d'ajouter davantage de polices. - Conservez un espacement normal des caractères japonais et n'utilisez un interlettrage subtil pour le texte latin d'affichage que lorsque c'est nécessaire. - Limitez l'emphase en gras aux quelques expressions qui guident réellement la lecture rapide. - Testez les chiffres, les symboles, les chaînes multilingues, le texte généré par les utilisateurs et les glyphes manquants. ## Limiter les couleurs et garder assez de contraste pour lire le texte La couleur doit communiquer la priorité, l'état et l'identité sans devenir le seul vecteur de sens. Une palette sobre permet de reconnaître plus facilement l'action principale et les changements d'état importants. - Utilisez un arrière-plan dominant, une gamme secondaire pour le texte ou les surfaces et une faible proportion de couleur d'accent. - Commencez par environ 3 couleurs fonctionnelles, plus des couleurs neutres et 1 couleur d'accent principale. - Attribuez de manière cohérente des couleurs aux états de réussite, d'avertissement, de danger et d'information. - Visez un contraste d'au moins 4.5:1 pour le texte normal et de 3:1 pour le texte de grande taille. - Donnez à l'action principale une combinaison distincte de couleur, de forme, de libellé et de position. - Associez les états codés par couleur à du texte, des icônes, des motifs ou d'autres indices non chromatiques. - Vérifiez chaque paire de premier plan et d'arrière-plan, y compris les états désactivé, survolé, focalisé et superposé à une image. ## Transformer les boutons et blocs répétés en composants communs La cohérence réduit le coût d'apprentissage pour les utilisateurs et le coût de maintenance pour les équipes. Transformez les décisions visuelles récurrentes en tokens et composants partagés plutôt que de corriger des pages isolées. - Définissez des tokens pour la couleur, l'espacement, la typographie, le rayon, la bordure, l'ombre et le mouvement. - Créez des boutons, des cartes, des éléments de navigation, des formulaires, des boîtes de dialogue, des badges et des éléments de retour réutilisables. - Définissez les états par défaut, survolé, actif, désactivé, en cours de chargement, d'erreur et focalisé lorsqu'ils s'appliquent. - Nommez les variantes selon leur objectif ou leur rôle plutôt que selon leur apparence temporaire. - Maintenez un même rôle cohérent sur les plans visuel et comportemental dans l'ensemble du produit. - Documentez les variantes autorisées, les règles de contenu, les exigences d'accessibilité et le comportement responsive. - Modifiez le composant partagé lorsque le modèle change ; évitez les divergences propres à chaque page. ## Utiliser images et icônes pour expliquer, pas seulement décorer Les images, les icônes et les diagrammes doivent expliquer, orienter ou renforcer la confiance. Un traitement standardisé des ressources améliore la qualité perçue tout en empêchant la décoration de masquer le message. - Attribuez des proportions cohérentes aux rôles récurrents des ressources, tels que les visuels principaux et les cartes. - Redimensionnez les images selon leurs dimensions d'affichage et privilégiez les formats modernes efficaces. - Fournissez des sources responsives et différez le chargement des images hors écran lorsque cela ne masque pas de contenu essentiel. - Rédigez un texte alternatif qui communique l'objectif de l'image, et pas seulement son apparence. - Maintenez cohérents le trait, les angles, le remplissage et la taille optique des icônes au sein d'un même ensemble. - Organisez les diagrammes comme une explication, un modèle visuel et une conclusion concise, avec une légende claire. - Vérifiez le contraste du texte sur les images et fournissez un traitement d'arrière-plan stable lorsque c'est nécessaire. ## Réagir vite et sobrement aux clics et à la saisie Le design d'interaction doit révéler ce qui peut être utilisé, accuser réception des saisies, montrer la progression et confirmer les résultats. Le mouvement doit clarifier les changements d'état sans retarder le travail ni provoquer d'inconfort. - Lorsque c'est possible, fournissez une réponse visible à une saisie principale dans un délai d'environ 100 millisecondes. - Utilisez de courtes durées de survol et de transition, souvent autour de 120 à 200 millisecondes. - Définissez les retours d'état appuyé, en cours de chargement, de réussite, d'erreur, désactivé et focalisé pour les contrôles concernés. - Utilisez des indicateurs de progression ou des écrans squelettes lorsque l'opération ne s'achève pas immédiatement. - Utilisez la direction et l'accélération pour expliquer les changements spatiaux ou de calque plutôt que pour les décorer. - Évitez les animations qui concurrencent le contenu, captent l'attention ou bloquent la saisie. - Respectez les préférences de réduction des animations et ne lancez pas automatiquement de médias d'arrière-plan distrayants. ## Permettre de finir les tâches au clavier et avec un lecteur d’écran L'accessibilité est une exigence fondamentale de l'interaction, et non un audit visuel final. Les personnes doivent pouvoir percevoir l'état, comprendre les contrôles, naviguer, récupérer après une erreur et accomplir le parcours principal au moyen de différents modes d'entrée et de sortie. - Préservez un indicateur de focus visible et un ordre de navigation au clavier logique. - Lorsque c'est possible, donnez aux cibles interactives une taille minimale de 44 par 44 pixels. - Donnez aux images des alternatives pertinentes, aux contrôles des noms accessibles et aux champs de formulaire des libellés explicites. - Veillez à ce que les erreurs identifient le champ, expliquent le problème et indiquent comment le corriger. - Fournissez des sous-titres ou des transcriptions pour les contenus audio et vidéo significatifs. - Vérifiez l'intégralité du parcours critique en utilisant uniquement un clavier et la sortie d'un lecteur d'écran. - Testez le contraste, le zoom, le redimensionnement du texte, la réduction des animations et les différences courantes de perception des couleurs. ## Avant la mise en ligne, vérifier la vitesse et les bases pour les moteurs de recherche Les performances, la découvrabilité et la maintenabilité font partie de l'expérience conçue. Définissez des contrôles de publication mesurables et préservez les décisions afin que les améliorations résistent aux modifications courantes du contenu et des composants. - Utilisez des images responsives et compressées, et ne chargez les ressources non essentielles que lorsqu'elles sont nécessaires. - Créez des sous-ensembles de polices, autorisez le rendu de repli, réduisez au minimum les styles bloquants et différez les scripts non essentiels. - Donnez à chaque page un seul H1 significatif, ainsi qu'un titre, une description et un aperçu pour les réseaux sociaux qui lui sont propres. - Utilisez un LCP inférieur à 2.5 secondes et un CLS inférieur à 0.1 comme objectifs de départ, puis appliquez les normes de performance en vigueur. - Testez la vitesse et l'abandon sur le parcours d'inscription, d'achat ou de demande le plus important. - Avant la publication, examinez la hiérarchie, l'espacement, la typographie, la couleur, les états, les ressources, l'accessibilité et les performances. - Consignez les décisions de conception et mettez en œuvre les changements au moyen de composants et de tokens partagés. - Surveillez les résultats des utilisateurs réels et révisez les seuils lorsque les preuves montrent qu'une meilleure norme existe.