Un guide sur le système de conception de bâtiments au-delà des éléments primitifs

Les systèmes de conception devraient aborder ces principes clés pour construire des composants complexes: découverte de la composabilité, construction pour l'extensibilité et mise en page cohérente.

Vous avez entendu l'histoire du bouton. Il existe plusieurs produits numériques destinés aux consommateurs dans toute l'organisation. Les concepteurs et les ingénieurs conçoivent et construisent les boutons de ces applications. Les équipes de marque et de marketing ne sont pas satisfaites car ces boutons ne se ressemblent jamais sur tous les produits.

Vous ajoutez le temps passé par les ingénieurs et les concepteurs à créer les mêmes (mais différents) éléments, et ces boutons s'avèrent coûteux

Un système de conception tente de résoudre ce problème. De nombreux systèmes de conception commencent à se concentrer principalement sur des éléments de base tels que des boutons, des entrées, des boutons radio ou des liens. Mais comme tout autre système, un système de conception évolue au-delà de ces éléments primitifs.

La complexité augmente si vous avez plusieurs produits au sein de votre organisation. Mais un système de conception doit résoudre la complexité en se basant sur des valeurs et un langage partagés. Il ne doit pas s'éloigner de la création d'une interface utilisateur complexe. Les composants complexes tels que les cartes, les tableaux de données, les grilles de mise en page ou les graphiques sont courants parmi les interfaces utilisateur, et un système de conception peut conduire la discipline requise pour créer de la cohérence dans ces interfaces utilisateur complexes.

Un exemple de composant d'interface utilisateur complexe est une carte.

Une carte est plus qu'un conteneur avec du contenu. Une carte peut être décrite comme un modèle de conception d'interface utilisateur qui regroupe des informations connexes – pensez à une carte à jouer. Une carte peut être statique, contenant une image et / ou une légende. Il peut également être interactif, avec un bouton ou un lien. Il peut contenir des métadonnées telles que la date ou des balises et peut se présenter sous différentes formes et tailles. Il peut également avoir des variantes telles qu'une image à fond perdu ou une image par défaut avec un espacement autour d'elle.

En utilisant un composant d'interface utilisateur de carte, explorons comment un système de conception doit aborder quelques principes clés pour construire des composants complexes— découverte pour la composabilité bâtiment pour l'extensibilité et pilotant des mises en page cohérentes .

Discovery pour la composabilité

Discovery est la première étape de la création de votre composant de système de conception. La création d'une interface utilisateur complexe nécessite de comprendre les valeurs et le langage partagés dans votre écosystème organisationnel. L'image dans une carte devrait-elle offrir des variantes telles que le haut ou le bas? Une carte doit-elle avoir une image à fond perdu ou être régulièrement espacée d'un conteneur de cartes? Tous les produits utilisent-ils des cartes de manière cohérente? Si ce n'est pas le cas, comment une équipe de système de conception peut-elle pousser pour un langage partagé?

Voici quelques-unes des façons dont vous pouvez rassembler les besoins de conception et aider divers groupes à reconnaître une vision partagée:

1. Identifier les composants primitifs d'une carte – titre, image, bouton, étiquette, icône – ceux-ci serviront de blocs de construction

2. Identifier le contenu principal d'une carte – titre, description, image, légende, contenu et métadonnées

3. Identifiez les lacunes de votre bibliothèque en scannant votre référentiel de composants

4. Identifier les variations d'un composant de carte en vérifiant les produits consommant le composant

En exécutant les étapes ci-dessus, vous comprendrez le besoin partagé d'un composant de carte.

Une fois que l'équipe a identifié les éléments de base d'une carte, l'équipe devrait évaluer les cas limites en jetant un large filet à travers l'organisation pour éviter les zones manquées. La découverte est la première étape pour identifier ces cas extrêmes, car si vous n'obtenez pas l'adoption, la création d'un système de conception peut être un effort inutile. Rendez-le aussi inclusif que possible en élargissant le réseau pour comprendre les besoins de votre organisation.

Voici quelques-unes des questions de découverte que vous devriez examiner:

1. Les produits utilisent-ils des cartes comme liste?

2. Les produits utiliser des tableaux de données dans une carte?

3. Une carte est-elle interactive, utilisant un lien ou un bouton?

4. Une carte peut-elle contenir à la fois une icône et un bouton ou un seul élément interactif?

5. Que se passe-t-il quand il y en a plus?

6. Les cartes ont-elles la même apparence et le même aspect sur mobile que sur le Web, ou sont-elles différentes?

7. La carte entière peut-elle être cliquable? Ou, en d'autres termes, enroulé autour d'un lien hypertexte Je suis une carte interactive amusante, ?

8. L'image d'une carte devrait-elle être zoomable?

Ces questions d'enquête devraient donner des résultats qui ont des besoins communs à travers le portefeuille de produits de votre organisation. Construire une carte va au-delà de la représentation visuelle, et votre découverte devrait également distiller le comportement des cartes.

Appliquez une inversion à vos sessions de découverte. Que se passe-t-il si un système de conception ne donne pas de prix à un cas d'utilisation? Les adoptants vont-ils étendre le composant en créant leurs propres composants ou en utilisant les composants existants dans une bibliothèque?

Permettre aux adoptants d'étendre ou non les composants dépend des besoins de votre organisation. Il vaut la peine d'explorer l'extensibilité de vos composants – vos adoptants seront reconnaissants!

Construire pour l'extensibilité

Les composants doivent être étendus lorsqu'un système de conception ne prend pas en charge ou n'offre pas une variation dont un produit a besoin. L'extensibilité joue un rôle clé dans la croissance d'un système de conception. En effet, lorsqu'une variante est étendue par un adoptant, elle peut être réinjectée dans le système pour que d'autres équipes puissent l'utiliser. Cela permet de faire évoluer et de maintenir le système. En d'autres termes, l'extensibilité offre une polyvalence qui permet à l'équipe produit de modifier la conception d'un composant de base.

Pour assurer la cohérence de la structure et du modèle, une équipe de système de conception doit disposer d'une documentation complète sur Dos et À ne pas faire . Une documentation approfondie sur les directives de conception permet de construire et d'étendre les composants de base d'une bibliothèque.

Tirons parti de notre exemple précédent de carte en énumérant les choses à faire et à ne pas faire en matière de directives de conception.

• Utilisez le modèle de carte pour résumer un petit ensemble d'informations.

• Ne l'utilisez pas pour regrouper un grand ensemble d'informations.

• Ne l'utilisez pas lorsque vous fournissez plus d'un type d'interaction. Une carte peut servir de lien ou doit avoir un bouton avec lequel interagir.

• Appliquez une hauteur et une largeur personnalisées en fonction des besoins de votre produit.

La liste de ces types de directives de conception aide l'équipe produit à étendre les composants de base. En fonction de la manière dont la bibliothèque est créée et utilisée, fournissez toutes les instructions applicables, telles que ce qui peut et ne peut pas être importé dans les cartes. Tous les niveaux de titre doivent-ils être importés ou seulement certains? La suppression de toute ambiguïté contribuera à assurer la cohérence de l'expérience utilisateur. Votre équipe de branding sera ravie et vous remerciera d'avoir dirigé et documenté cet exercice!

Pilotage de mises en page cohérentes

Les sous-éléments d'un composant de base sont séparés via margin et padding . En plus de l'espacement, vous devez vous soucier de la grille de mise en page. Certaines des questions à se poser pour piloter une disposition uniforme de cartes:

• Combien de cartes pouvez-vous avoir dans une grille?

• Toutes les cartes doivent-elles être de même hauteur sur une seule ligne?

• Et si le contenu pour chaque mise en page n'est pas cohérente?

• Le contenu doit-il être aligné verticalement et horizontalement?

• Le contenu des cartes doit-il être réactif?

• Devriez-vous avoir des marges ou un remplissage fixes?

Définition de la relation entre l'espacement et la mise en page est essentiel pour créer une expérience utilisateur cohérente.

Conclusion

Pour résumer, la découverte est un élément clé de la construction d'interfaces utilisateur complexes. Cela facilite la maintenance de votre système de conception une fois le composant construit, car il existe un ensemble de processus définis par les principes dont nous avons discuté: composabilité, extensibilité et cohérence de la mise en page.