Concevoir des systèmes d'interface utilisateur modulaires via un développement basé sur un guide de style

L'utilisation d'un guide de style pour piloter le développement est une pratique qui gagne du terrain dans le développement front-end - et pour cause. Les développeurs commenceront dans le guide de style en ajoutant un nouveau code ou en mettant à jour le code existant, contribuant ainsi à un système d'interface utilisateur modulaire qui sera ensuite intégré à l'application. Mais pour mettre en œuvre un système d'interface utilisateur modulaire, nous devons aborder la conception de manière modulaire.

La conception modulaire nous encourage à penser et à concevoir une UI et une UX en motifs. Par exemple, au lieu de concevoir une série de pages ou de vues pour permettre à un utilisateur d'accomplir une tâche, nous commencerions le processus de conception en comprenant comment le système d'interface utilisateur est structuré et comment ses composants peuvent être utilisés pour créer le flux d'utilisateurs.

Lectures complémentaires sur SmashingMag :

• Comment faire un guide de style efficace
• Un aperçu détaillé des outils de guide de style de vie
• Automatisation du développement basé sur un guide de style
• Ensemble d'icônes de guides de style gratuits pour les écrivains et les éditeurs

Dans cet article, j'expliquerai la valeur de la modularité dans la conception de l'interface utilisateur et comment elle est liée au processus de développement basé sur un guide de style, qui améliore la mise en œuvre d'applications flexibles et conviviales, tout en aidant les concepteurs et les développeurs à collaborer de manière plus productive.

Conception modulaire dans l'interface utilisateur

La conception modulaire consiste à décomposer une conception en petites parties (modules), à les créer indépendamment, puis à les combiner plus tard dans un système plus vaste. Si nous regardons autour de nous, nous trouverons de nombreux exemples de conceptions modulaires : Les voitures, les ordinateurs et les meubles sont tous modulaires. En raison de leur modularité, des parties de ces systèmes peuvent être échangées, ajoutées, supprimées et réarrangées. C'est formidable pour les consommateurs, car ils peuvent personnaliser le système en fonction de leurs besoins . Vous souhaitez un toit ouvrant, un moteur plus puissant, des sièges en cuir ? Tu l'as eu! La conception modulaire des voitures permet ces types de personnalisations et bien plus encore.

Un autre bon exemple est celui des meubles IKEA. Dans les illustrations ci-dessous, vous pouvez voir que la modularité du design ne réside pas seulement dans la forme de la bibliothèque, qui permet de l'orienter dans différentes directions, ou dans le fait que vous pouvez ajouter des inserts dans ses ouvertures, mais aussi dans le très parties qui composent la pièce elle-même, qui sont des rectangles de tailles différentes, répétant le même motif.

Du point de vue de la fabrication, la conception modulaire est également rentable. Un aspect important de ceci est que la construction de petites pièces simples qui peuvent être connectées plus tard est plus facile et moins chère que la construction d'une seule grande pièce complexe à la fois. De plus, la solution peut être réutilisée à l'infini, ce qui maximise la productivité.

Les objectifs de la création d'une conception d'interface utilisateur sont similaires. En tant que concepteurs, nous souhaitons créer un système d'interface utilisateur efficace à la fois dans sa construction et son fonctionnement. Lorsque nous trouvons une solution à un problème, nous voulons pouvoir réutiliser la solution dans de nombreux endroits. Cela permet non seulement de gagner du temps, mais établit également un modèle que les utilisateurs peuvent apprendre une fois et réappliquer dans d'autres domaines de l'application. Nous souhaitons également pouvoir personnaliser le système pour certains scénarios sans avoir à tout restructurer.

C'est exactement ce que la modularité apporte à la conception de l'interface utilisateur : elle conduit à un système flexible, évolutif et rentable , mais également personnalisable, réutilisable et cohérent .

Exemples de conception modulaire

Certains exemples de conception d'interface utilisateur modulaire peuvent être vus dans des modèles tels que des grilles réactives, la conception de fenêtres en mosaïque et la conception de cartes . Dans chacun d'eux, les modules sont utilisés à plusieurs reprises pour fournir une disposition flexible qui s'adapte facilement aux différentes tailles d'écran. De plus, les modules agissent comme des conteneurs pour les composants, nous permettant d'insérer différents types de contenu et de fonctionnalités, un peu comme les inserts qui peuvent être ajoutés à une armoire IKEA.

Est-ce homogène ?

Si la conception modulaire consiste à concevoir un système et que les systèmes d'interface utilisateur comprennent principalement les mêmes éléments (boutons, polices de caractères, icônes, grilles, etc.), vous vous demandez peut-être :

• Les conceptions modulaires ne vont-elles pas toutes se ressembler ?
• Comment cela affectera-t-il l'identité de la marque ?
• Comment rendre l'interface utilisateur d'un produit unique ?

Ces questions, bien que valables, soulèvent une question sous-jacente : où se situent l'innovation et l'unicité dans la conception de produits ? Ce débat a repris ces derniers temps (voir "L'insoutenable homogénéité du design" et "Pour la défense du design homogène"), mais je dirais que, parce que le design visuel est ce que nous voyons en premier, nous avons tendance à penser que l'innovation et l'unicité résident dans l'apparence d'un design. Cependant, la conception visuelle n'est qu'une partie de cela. L'innovation et l'unicité de la conception des produits doivent être prises en compte dans l'ensemble du produit : dans la valeur intrinsèque qu'il offre et dans la façon dont les gens en font l'expérience, ce qui inclut son apparence. Prenez une chaise. Il doit s'agir d'une chaise, mais toutes les conceptions de chaise ne se ressemblent pas, ne se sentent pas ou ne fonctionnent pas de la même manière. En fait, la conception de chaises a toujours été un domaine d'innovation en matière de design et de matériaux. De même, les interfaces utilisateur ont leurs propres exigences, et l'utilisation de modèles qui ont fait leurs preuves ne signifie pas sacrifier l'innovation et l'unicité. Au contraire, l'innovation et l'unicité seront nécessaires pour résoudre les problèmes particuliers de vos clients. La beauté de la conception modulaire est qu'elle nous encourage à aborder ces solutions comme un système de pièces interconnectées, plutôt que de trouver des solutions originales de manière isolée dans le but d'être différent. En d'autres termes, une conception innovante appliquée à un contrôle de l'interface utilisateur ne restera pas reléguée à un seul endroit dans l'application, mais imprègnera plutôt l'ensemble du système, en maintenant la cohésion et en améliorant la convivialité.

La modularité du développement de guides de style

Du côté de la mise en œuvre, le développement basé sur un guide de style est également très modulaire. Pour commencer, le processus commence par une phase de découverte : comprendre le problème à résoudre, rassembler les exigences et parcourir les solutions de conception. Bien que les solutions de conception soient généralement présentées sous la forme d'un package ou d'une fonctionnalité complète, elles doivent en réalité être la combinaison des nombreuses parties du système documentées dans le guide de style. Certaines parties de la conception peuvent être nouvelles, mais elles doivent toujours être créées en tant que modules. Le but est d'utiliser le guide de style pour déterminer quels modules sont disponibles dans le système d'interface utilisateur qui peuvent être réutilisés ou étendus pour créer la conception.

(Et s'il n'y a pas de guide de style ? Ne vous inquiétez pas ! Je vais vous montrer dans la section suivante comment concevoir de manière modulaire, même si vous n'utilisez pas de guide de style.)

La prochaine étape du développement basé sur un guide de style est la phase d'abstraction , qui consiste essentiellement à décomposer la solution de conception en parties plus petites. Au cours de cette phase, les concepteurs et les développeurs travaillent ensemble pour discerner la conception proposée et identifier les éléments et les composants (c'est-à-dire les modules) qui seront utilisés ou améliorés ou qui devront être créés pour la mise en œuvre.

La phase d'abstraction sert également à tracer un plan pour l'étape suivante : implémentation et documentation . Au cours de cette phase, les modules sont soit construits soit améliorés indépendamment du reste des modules existants. En développement Web, cela signifie construire un composant ou définir les styles d'un élément indépendamment de l'application. Il s'agit d'un aspect important de la modularité, car il vous aide à identifier tout problème tôt dans le processus, évitant ainsi des dépendances imprévues avec d'autres parties du système. Le résultat est des pièces plus stables qui sont plus faciles à intégrer dans l'ensemble.

Quelque chose d'unique dans le développement basé sur un guide de style est que, tandis que la mise en œuvre progresse, la documentation a également lieu, plutôt que d'être une réflexion après coup. Cela est possible car lorsqu'un générateur de guide de style est utilisé, la documentation devient un guide de style vivant , servant à la fois de cadre et de bac à sable pour la mise en œuvre :

• Le guide de style de vie sert de cadre de définitions pour les éléments de l'interface utilisateur (tels que les en-têtes, les listes, les liens, les contrôles de saisie, etc.) et de bibliothèque de composants (tels que les systèmes de navigation, les barres d'outils, les outils de recherche, les tableaux de grille, etc. ) qui sont disponibles pour utilisation. Cela signifie que le développement ne part pas de zéro à chaque fois. Au lieu de cela, il s'appuie sur les définitions existantes dans le système d'interface utilisateur et y contribue.
• C'est aussi un bac à sable car il sert d'espace de démonstration pour construire et tester l'implémentation. C'est précisément là que se déroule le développement avant son intégration dans l'application.

La dernière étape du développement guidé par un guide de style, la phase d' intégration , ressemble à l'étape d'assemblage dans la conception modulaire. Les éléments ou composants d'interface utilisateur nécessaires ont été développés et sont prêts à être intégrés dans l'application. Il ne reste plus qu'à les configurer et les personnaliser. Lors de l'intégration, le guide de style est comme n'importe quel bon manuel d'instructions utilisé pour assembler une conception modulaire physique.

Maintenant que nous avons identifié les concepts fondamentaux de la conception modulaire et du développement guidé par un guide de style, mettons-les en pratique.

Concevoir de manière modulaire

Imaginez ceci : vous avez créé un excellent flux d'utilisateurs, assemblé des maquettes et des prototypes pour illustrer les interactions et documenté chaque partie. Il y a de fortes chances que vos conceptions suivent déjà un guide de style, ce qui pourrait vous donner un grand avantage. (Si ce n'est pas le cas, ne vous inquiétez pas !) Prenez du recul et commencez à cartographier les principales parties de votre solution de conception à un niveau élevé. Ces parties pourraient être les points d'interaction où certaines choses sont accomplies. Par exemple, un flux de paiement pourrait ressembler à ceci :

Mais tenez vos armes ! Ce ne sont pas encore des modules. Pour y arriver, nous devons identifier les éléments de l'interface utilisateur qui sont persistants dans le flux, tels que :

• l'indicateur d'étapes de paiement,
• les éléments de formulaire permettant de saisir des informations,
• la représentation des produits dans le panier,
• la représentation de produits connexes que d'autres ont achetés,
• politiques sur l'achat,
• Texte d'aide,
• messages et alertes.

En creusant un peu plus, nous trouverons également des styles et des modèles d'interaction :

• Modes:

• couleurs utilisées pour désigner :

  • messages d'erreur, de réussite, d'avertissement et d'information ;
  • actions primaires contre actions secondaires ;
  • états inactif versus sélectionné versus désactivé ;
  • liens contre texte normal ;
  • l'image de marque;

• typographie utilisée pour désigner différents types de contenu :

  • taille de police pour la présentation hiérarchique des informations ;
  • types de polices pour mettre en évidence les messages ou fournir des informations supplémentaires ;
  • des listes pour résumer les informations ;

• iconographie pour transmettre une signification visuelle et pour une référence rapide aux actions courantes.

• Modèles d'interaction :

  • montrant les étapes à venir (désactivé);
  • montrant les étapes précédentes (activé pour que les informations puissent être modifiées) ;
  • afficher des résumés modifiables ;
  • valider les informations une fois que l'utilisateur a cliqué en dehors du champ ;
  • fournir un texte d'aide lors du survol ;
  • mettre à jour le panier une fois la sélection effectuée.

Une fois la conception décomposée en tous ces petits morceaux, nous aurons enfin nos modules. À ce stade, il est plus facile de voir que beaucoup d'entre eux s'appliquent non seulement au processus de paiement, mais à de nombreux autres domaines de l'application. Avec une approche de conception modulaire, ces modules peuvent être créés de sorte qu'ils soient utilisables dans cette conception particulière ainsi que dans les futures.

La conception atomique mérite d'être mentionnée en tant que méthodologie pouvant accélérer ce processus de création de conceptions modulaires. Cette méthodologie analyse les relations entre les différentes parties du système et leurs interrelations, en utilisant la chimie comme analogie. Suivre les étapes est à peu près l'inverse de notre exercice précédent :

1. Nous partons des atomes , qui sont les plus petits modules du système (dans notre exemple, les boutons, la typographie et l'iconographie).
2. Les modules gagnent en complexité, se liant entre eux en molécules , qui offrent plus de fonctionnalités (dans notre exemple, les indicateurs d'étapes de paiement et le module des produits associés).
3. Ensuite, il y a les organismes , qui sont des molécules qui sont regroupées dans l'application (dans notre exemple, l'en-tête de l'application et divers formulaires).
4. Laissant l'analogie avec la chimie, le niveau suivant est celui des modèles , qui sont des structures prédéfinies où les organismes sont placés.
5. Enfin, il existe des pages , qui sont des instances de modèles.

La pièce manquante ici est un moyen de documenter les modules qui ont été identifiés. Il ne s'agit pas seulement de créer un document de spécification pour capturer la façon dont les modules doivent être construits, ou d'écrire des directives qui capturent des définitions de haut niveau telles que les couleurs de marque et les familles de polices (qui sont typiques de tout guide de style standard). Au contraire, la documentation doit être plus sophistiquée et dynamique, de sorte que lorsque ces modules changent (et vous savez qu'ils le feront !), la documentation ne devienne pas obsolète. C'est exactement là que les guides de styles de vie comblent le vide !

Utiliser un guide de style de vie

Un guide de style de vie peut être très utile pendant le processus de conception car il fournit plusieurs choses.

Une ligne de base avec laquelle travailler

Au lieu de repartir de zéro à chaque fois, le guide de style fournit la direction visuelle et les modules que vous devez utiliser pour créer le design.

Parce qu'un guide de style de vie est généré à partir du code réel, il reflète la dernière et la meilleure version de la conception mise en œuvre.

Documentation des solutions de conception

Les connaissances acquises pour résoudre un problème particulier d'interface utilisateur ou d'expérience utilisateur peuvent être consignées pour une utilisation ultérieure.

Cela aide à maintenir la cohérence dans la mise en œuvre, vous encourageant à intégrer toute nouvelle solution dans une partie de la conception actuelle.

Vous développerez des modèles avec lesquels les utilisateurs pourront se familiariser, améliorant ainsi la convivialité.

Facilité de communication

Le guide aide à communiquer la conception en fournissant la représentation la plus à jour de l'interface utilisateur (contrairement aux maquettes statiques, qui deviennent rapidement obsolètes).

Un langage UI commun est développé car il faut nommer les différents éléments dans la charte graphique. Cela nécessite une collaboration non seulement entre les concepteurs d'interface utilisateur, mais entre les concepteurs et les développeurs, ce qui est un grand avantage lorsque vous devez communiquer comment une conception doit être implémentée.

Que vous disposiez d'un guide de style existant ou que vous envisagiez d'en créer un, l'automatisation du processus vous mettra dans la bonne direction, en pilotant le processus de conception de manière modulaire. Donc, si vous êtes prêt à acheter un générateur de guides de style de vie, je vous recommande les ressources suivantes :

• "Un aperçu détaillé des outils de guide de style de vie", Robert Haritonov, Smashing Magazine
• "Aperçu des générateurs de bibliothèques de modèles", David Hund, GitHub
• "Récapitulatif du générateur de guide de style", Susan Robertson, Une liste à part

Ne le poussez pas à l'extrême !

Maintenant que nous avons examiné comment affiner le processus de conception pour intégrer la modularité, ainsi que les avantages d'un guide de style de vie, explorons certains des pièges courants que vous pourriez rencontrer en cours de route.

Le guide de style ne remplace pas le travail de conception

Il n'est pas rare d'entendre des gestionnaires dire qu'une fois le guide de style de vie en place, la majeure partie du travail de conception est terminée. Bien qu'une grande partie du travail répétitif et trivial soit effectué (comme le prototypage des différents états d'un bouton encore et encore), considérez que :

• de nouvelles fonctionnalités devront continuellement être construites,
• trouver une solution implique de prendre des décisions de conception.

Donc, oui, avoir un guide de style vivant et suivre un développement basé sur un guide de style améliore le flux de travail de développement, mais cela n'exclut pas le concepteur de l'équation. Disposer d'un outil qui accélère les flux de travail et stimule la communication est avantageux pour les concepteurs et les développeurs. Mais l'avantage de cette approche est qu'elle laisse beaucoup de place à la personnalisation de l'interface utilisateur, améliorant ainsi l'expérience utilisateur - et comprendre cela fait partie du rôle du concepteur.

Ne suivez pas les modèles à l'extrême

Nous devons toujours nous efforcer d'utiliser des modèles dans une application. Par exemple, une utilisation cohérente des couleurs et des tailles de police peut rapidement indiquer à l'utilisateur les éléments de l'interface utilisateur avec lesquels il peut interagir. Cependant, évitez d'utiliser un modèle simplement parce qu'il a déjà été implémenté ; utilisez-le plutôt car il résout vraiment le problème en question.

Par exemple, si vous avez établi le modèle d'affichage des barres d'outils en haut de l'écran, ce modèle fonctionnera dans la plupart des cas, mais il y aura des moments où la présentation d'une barre d'outils contextuelle, plus proche de l'endroit où l'utilisateur agit, a plus de sens . Donc, demandez-vous toujours si la réutilisation d'un modèle donne la priorité à la facilité de mise en œuvre plutôt qu'à l'expérience utilisateur.

Ne négligez pas l'itération de conception

Cela rejoint un peu le point précédent. Ne négligez pas la valeur de l'itération et de l'innovation lorsque vous essayez de nouveaux modèles et trouvez des moyens de concevoir une interface, même si à première vue ils ne suivent pas le guide de style. Le guide de style ne doit pas freiner vos efforts pour créer la meilleure expérience utilisateur possible. Au contraire, comme son nom l'indique, il devrait s'agir d'un guide, d'un point de départ pour vous aider à résoudre les problèmes en puisant dans le travail et l'expérience antérieurs. L'itération pendant la phase de conception devrait continuer à être aussi importante que jamais et devrait vous inciter à améliorer les modèles établis.

Le fardeau de l'entretien

Parmi les millions de choses que votre travail implique, le maintien du guide de style devrait être la dernière chose qui vous semble un fardeau. Pour surmonter cela, je trouve les pratiques suivantes utiles :

• Trouvez un système de documentation facile à installer et avec lequel il est facile d'interagir régulièrement.
• Faites des mises à jour de la documentation une partie de votre flux de travail, plutôt qu'une réflexion après coup une fois que la mise en œuvre est déjà terminée. Documentez-vous au fur et à mesure !
• Établissez des lignes directrices qui permettent à chacun de contribuer facilement à la documentation. Cela répartira la charge de travail et augmentera le sentiment d'appartenance.

Concevoir modulaire pour construire modulaire

La création d'un système d'interface utilisateur flexible, cohérent et facile à personnaliser, tout en étant évolutif et rentable, dépend non seulement de la manière dont il est construit, mais également de la manière dont il est conçu. Une bibliothèque de composants a très peu de valeur si chaque nouvelle conception est créée indépendamment, en ignorant les normes et les modèles établis.

D'un autre côté, il ne s'agit pas de créer des interfaces à l'emporte-pièce qui réutilisent les mêmes styles et modèles parce que c'est pratique. Un bon design est efficace non pas en raison de son caractère unique, mais parce qu'il combine à la fois la forme et la fonction pour créer une expérience formidable . Cet objectif doit toujours être une priorité, et l'utilisation d'une méthode telle que le développement basé sur un guide de style pour apporter de la modularité à la fois à la conception et au développement devrait vous aider à créer un système d'interface utilisateur cohérent qui atteint cet objectif.