Le rôle des ingénieurs frontend dans les systèmes de conception, partie 2

Les ingénieurs logiciels frontaux jouent un rôle crucial dans les systèmes de conception, notamment en s’occupant de l’accessibilité, des performances et de la bonne documentation dans un système de conception.

Les ingénieurs frontaux jouent un rôle crucial dans la création et la maintenance des systèmes de conception. Dans Partie 1 de cette série d’articles, nous avons exploré comment les développeurs frontend préparent et maintiennent les guides de style de codage, les bibliothèques de composants et les jetons de conception lorsqu’ils travaillent dans un système de conception. Dans cet article, nous poursuivrons la discussion en examinant l’importance de reconnaître l’accessibilité, les performances et une bonne documentation dans un système de conception.

Accessibilité

L’accessibilité est un aspect essentiel de la conception de l’interface utilisateur qui ne doit pas être négligé. Les composants de l’interface utilisateur doivent être accessibles à tous, y compris aux personnes handicapées. Les directives d’accessibilité telles que Directives pour l’accessibilité du contenu Web (WCAG) aident à fournir des informations détaillées sur la façon de créer du contenu Web accessible.

Un aspect important de l’accessibilité consiste à fournir un texte alternatif pour le contenu non textuel tel que les images, les vidéos et l’audio. Cela permet aux lecteurs d’écran et aux autres technologies d’assistance de décrire le contenu aux utilisateurs qui peuvent ne pas être en mesure de le voir ou de l’entendre. Pour les images, cela peut être réalisé en utilisant le autre attribut qui fournit une brève description de l’image utilisée par les lecteurs d’écran et d’autres technologies d’assistance.

<img src="cat.jpg" alt="A fluffy gray and white cat with green eyes" />

En plus du texte alternatif, l’utilisation de HTML sémantique est également important pour l’accessibilité. En utilisant le HTML sémantique, les développeurs frontend s’assurent que les lecteurs d’écran et les autres technologies d’assistance peuvent comprendre le contenu et le transmettre aux utilisateurs de manière accessible.

<div class="header">
  <div class="logo">Company Logo</div>
  <div class="title">Page Title</div>
</div>


<header>
  <img src="logo.png" alt="Company Logo" />
  <h1>Page Title</h1>
</header>

Dans l’exemple de code ci-dessus, nous pouvons voir que le premier bloc de code utilise un en-tête non sémantique qui consiste en un <div> élément avec deux enfants <div> éléments pour afficher un logo et un titre de page. Ce n’est pas une structure idéale pour l’accessibilité car elle n’indique pas clairement quel élément est le titre principal de la page.

Le deuxième bloc de code, cependant, utilise le HTML sémantique en enveloppant le logo et le titre de la page dans un <header > élément et en utilisant l’élément <img> et <h1> éléments pour afficher respectivement une image et un titre.

Parmi les points ci-dessus, de nombreuses autres pratiques peuvent être appliquées pour assurer une bonne accessibilité dans les composants de l’interface utilisateur, notamment :

• Établir un contraste approprié entre le texte et les couleurs d’arrière-plan. Cela permet aux utilisateurs malvoyants de lire plus facilement le contenu. Des outils comme Vérificateur de contraste (par WebAIM) peut être utilisé pour voir si les rapports de contraste des couleurs de texte et d’arrière-plan satisfont ou échouent aux normes d’accessibilité.
• Fournir une navigation au clavier pour tous les éléments interactifs. Cela permet aux utilisateurs qui ne peuvent pas utiliser une souris ou un trackpad de naviguer et d’interagir avec les éléments d’un système de conception en utilisant uniquement le clavier.
• Éviter l’utilisation d’un contenu clignotant excessif ou clignotant ou de couleurs changeant rapidement qui peuvent être la cause de crises chez certaines personnes.

Performance

L’optimisation des performances des composants est un autre aspect crucial de la maintenance d’un système de conception, car elle affecte directement l’expérience utilisateur. Plus un site Web ou une application se charge rapidement, plus les utilisateurs sont susceptibles de rester dessus et d’interagir avec le contenu. Nous aborderons quelques pratiques importantes à prendre en compte pour garantir que les composants de l’interface utilisateur sont conçus en tenant compte des performances.

La création de composants d’interface utilisateur avec chargement différé peut améliorer les performances globales d’une application. Le chargement différé est une technique qui consiste à charger uniquement des ressources telles que des images et des vidéos lorsqu’elles sont nécessaires, ce qui peut améliorer le temps de chargement initial d’une page. En chargeant uniquement les ressources nécessaires, le navigateur peut donner la priorité au chargement du contenu le plus important de la page. Le concept de chargement paresseux peut également être utilisé avec les composants de l’interface utilisateur eux-mêmes en chargeant les composants uniquement lorsqu’ils sont nécessaires.

L’utilisation d’images réactives optimisées pour différentes tailles d’écran peut également améliorer les performances. Lors de la création de composants d’interface utilisateur qui utilisent (ou attendent des images), nous pouvons nous assurer que les images fournies sont adaptées à la taille de l’écran de l’appareil de l’utilisateur. Cela aide le navigateur à toujours télécharger la taille d’image appropriée, ce qui peut réduire la taille du fichier et améliorer le temps de chargement global d’une application.

La réduction du nombre de requêtes HTTP effectuées pour télécharger des ressources pour les composants de l’interface utilisateur peut également optimiser les performances des composants. Cela peut être fait en combinant des fichiers tels que des scripts et des feuilles de style dans un seul fichier, ce qui peut réduire le nombre de requêtes que le navigateur doit adresser au serveur. Sprites d’images peut également être utilisé pour combiner plusieurs images dans un seul fichier, ce qui peut réduire le nombre de requêtes nécessaires pour charger un grand nombre d’images.

Documentation

Enfin, les développeurs frontaux doivent s’assurer que tous les composants d’interface utilisateur d’un système de conception sont bien documentés. La documentation aide les autres développeurs de l’équipe à comprendre comment utiliser et personnaliser les composants, ce qui peut faire gagner du temps et réduire les erreurs.

Lorsqu’il s’agit de documenter les composants de l’interface utilisateur, il est important de fournir des instructions claires et concises sur la façon d’utiliser chaque composant. Cela devrait inclure des détails sur ce que accessoires ou attributs sont disponibles, ce qu’ils font et comment les utiliser. De plus, inclure des exemples d’utilisation du composant dans différents contextes peut aider les autres développeurs de l’équipe à comprendre comment utiliser et personnaliser les composants.

Voici un exemple de la façon dont les accessoires d’un certain composant dans la bibliothèque de composants KendoReact sont documentés.

Livre d’histoires est un outil open source qui peut être très utile dans la création et la documentation de composants d’interface utilisateur dans un système de conception. Storybook permet aux développeurs frontaux de créer une bibliothèque visuelle de composants avec divers cas d’utilisation et de fournir des extraits de code, des exemples et de la documentation pour chaque composant. Storybook dispose également d’un environnement de développement intégré, qui permet aux développeurs frontaux de travailler sur les composants de manière isolée et de les tester dans différents scénarios.

Vous pouvez voir le Storybook pour la bibliothèque KendoReact ici.

Il est également important de s’assurer que la documentation des composants dans un système de conception est à jour et reflète toutes les modifications ou mises à jour apportées au composant. Cela peut aider à éviter la confusion et les erreurs lors de l’utilisation des composants, et garantir que tous les membres de l’équipe travaillent avec la version la plus récente.

Construire un système de conception avec Kendo UI

Construire un système de conception à partir de zéro peut être une tâche ardue et chronophage, en particulier pour les organisations disposant de ressources limitées. Cependant, l’utilisation d’une bibliothèque de composants d’interface utilisateur telle que Progress Interface utilisateur de Kendo peut simplifier considérablement le processus.

Kendo UI est une bibliothèque complète de composants d’interface utilisateur, tels que des boutons, des entrées, des grilles et des graphiques, qui peuvent être utilisés pour créer des applications Web. L’interface utilisateur de Kendo est conçue dans un souci de personnalisation, ce qui en fait un excellent point de départ pour la création d’un système de conception. Et le Générateur de thèmes outil est conçu pour vous aider.

En commençant par Kendo UI, les développeurs frontend peuvent personnaliser la bibliothèque pour répondre aux besoins spécifiques de leur organisation. Cela comprend la définition de jetons de conception pour les couleurs, la typographie et l’espacement, ainsi que la création de composants et de styles personnalisés qui respectent les directives de marque et de conception de l’organisation.

Pour plus de détails sur la façon dont cela peut être fait, reportez-vous à l’article Construire un système de conception avec Kendo UI écrit par Thomas Findlay.

Conclure

Dans le premier article de cette série, nous avons discuté de l’importance de préparer et de maintenir des guides de style de codage, des jetons de conception et des bibliothèques de composants au sein d’un système de conception. L’accessibilité, les performances et une bonne documentation sont également des aspects importants que les développeurs frontaux doivent prendre en compte lors de la création et de la maintenance d’un système de conception. En s’assurant que les composants de l’interface utilisateur sont accessibles à tous, optimisés pour les performances et bien documentés, les développeurs peuvent offrir une meilleure expérience utilisateur et aider leur équipe à gagner du temps et à réduire les erreurs.