Design : Le rôle de la recherche dans les systèmes de conception – Rangle.io

Ayant passé les 8 derniers mois de ma carrière universitaire à travailler dans des coopératives et des stages dans des rôles de marketing et de communication, mes racines proviennent en fait des arts et du design. Bien que je me décrirais le mieux comme un enfant du début des années 2000, car je suis né au milieu des années 90, la toute première technologie que je me souviens avoir utilisée était un ordinateur familial encombrant fonctionnant sous Windows 95.

Le World Wide Web a fait son apparition en 1992-1995. À l’époque, les médias sociaux ne se limitaient qu’aux systèmes de messagerie instantanée – le «Uh oh!» le son de ICQ sonne une cloche familière. La nostalgie instantanée pour moi, cependant, se trouve être Kid Pix, où je tamponnerais ces pois bitmap sur un écran pixelisé et m’appellerais le prochain Picasso. J’ai l’impression que ces programmes ont contribué à la prolifération de l’infographie, avantageuse par sa facilité d’utilisation et sa flexibilité, par rapport aux supports de conception traditionnels.

Avance rapide une vingtaine d’années plus tard, où mon cerveau est maintenant rempli de méthodes de recherche et d’universités de mes débuts. Prendre une pause dans les livres et rejoindre Rangle en janvier 2020 en tant que coopérative de marketing, c’est quand j’ai entendu parler pour la première fois de Design Systems. Me familiariser avec ce sujet a ravivé ma passion de toujours pour le design. Je pensais qu’avec les compétences et les approches enseignées au cours de mes études postsecondaires, je pouvais exploiter et utiliser pour illustrer le rôle de la recherche théorique dans la création d’un système de conception efficace, qui pourrait atténuer divers problèmes de conception plus tard.

Il y a tellement de systèmes de conception sur lesquels vous pouvez tomber avec une simple recherche Google – sur la base de mes découvertes dans les galeries et les référentiels, des exemples de systèmes de conception standard incluent:

• Polaris par Shopify
• Conception de matériaux par Google
• Design Atlassian
• IBM Design Language / Carbon pour les produits IBM Cloud
• Conception Airbnb
• Lightning par Salesforce

Il est très important de noter que «une taille unique ne convient pas à tous» s’applique en effet aux systèmes de conception. Ce n’est pas parce qu’un système de conception que vous pourriez rencontrer est esthétique, qu’il conviendra parfaitement aux besoins de votre projet. Il en va de même pour le créateur du système de conception – si une entreprise multinationale dont l’industrie se situe en fait dans le commerce électronique ou l’hospitalité a créé sa propre version d’un système de conception (par exemple, Polaris by Shopify, Airbnb Design).

Les systèmes de conception sont des produits. Sans surprise, créer un réussi et efficace Le système de conception vient en suivant les méthodes traditionnelles de recherche en conception qui ont été utilisées dans toutes ses disciplines (par exemple UX / UI, IA, IxD). Vous connaissez peut-être les entretiens et les enquêtes standard et typiques des utilisateurs, les expériences analogues plus qualitatives (navigation sur le Web) et la conception contextuelle (dessin de modèles de flux). Ces méthodes dérivent de sujets de longue date des sciences sociales, comme la psychologie, la sociologie, l’anthropologie et la linguistique. Envisagez d’élargir votre champ de recherche pour inclure des sujets de ces sujets, car ils se concentrent sur l’étude des sociétés humaines et de leurs interactions et comportements dans les aspects sociologiques.

Comment utiliser le design comme un outil pour créer non seulement des produits, mais des idées pour spéculer sur les futurs possibles. Les concepteurs sont également des résolveurs de problèmes – on leur pose un problème et on leur demande de le résoudre avec fonctionnalité et beauté. Avec une conception spéculative, c’est d’imaginer comment ces futurs peuvent finir par être totalement disparates, encapsulant des problèmes moraux, éthiques, politiques et esthétiques.

Tenez compte de ces questions courantes de fiction de conception lors de la création de votre prochain système de conception:

• Comment votre design devrait-il avoir un impact sur le monde entier?
• Comment devrions-nous concevoir pour bénéficier à notre plus grand bien?
• Que peut faire notre design pour influencer les futurs publics?
• Comment les technologies futures peuvent-elles être affectées par nos produits, services et conceptions? Quoi ne fais pas nous voulons voir de l’avenir?

Dans les systèmes de conception, il existe des jetons, des actifs, des composants et des bibliothèques de variance. Ces parties des systèmes de conception sont synonymes de conception visuelle (par exemple, couleur, typographie, images, grilles). Souvent, les gens se mélangent des «systèmes de conception» et un «guide de style» ou une «bibliothèque de modèles», pensant qu’ils sont tous la même chose. Considérez les guides de style comme un type de documentation qui décrit l’apparence d’une marque, les bibliothèques de modèles comme un ensemble qui doit être utilisé dans toute l’entreprise, et enfin, les systèmes de conception agissant comme un parapluie pour ces sous-classes – «l’ensemble complet des normes de conception, de la documentation et des principes ainsi que la boîte à outils (modèles d’interface utilisateur et composants de code) pour atteindre ces normes.

À mes débuts en conception graphique, lorsqu’il s’agissait de produire l’identité visuelle d’une marque, les séances de brainstorming typiques concernant la couleur et la typographie seraient basées sur les besoins et les désirs du client, et sur les goûts et les aversions. Ceci est toujours applicable aujourd’hui, mais avec les directives d’accessibilité et d’inclusion maintenant dans le mélange, vous voulez que votre conception soit adaptée à les besoins de tous les utilisateurs aussi.

À quoi cela ressemble-t-il? Lisez le AA des directives d’accessibilité du contenu Web, publié par nul autre que le W3C. Commencer avec contraste de couleur, le rapport étant:

(L1 + 0,05) / (L2 + 0,05)

• L1 est la luminance relative du plus clair des couleurs, et
• L2 est la luminance relative de la plus sombre des couleurs.

Un exemple pour le texte / arrière-plan serait le rapport de contraste agissant à au moins 4,5 à 1. Toujours confus? Il existe de nombreux outils pour vous y aider, dont Application de contraste.

Bien que la couleur soit évidente et fascinante, elle ne devrait pas être le seul outil essentiel utilisé pour résoudre les problèmes de conception – les personnes atteintes de daltonisme ou d’autres carences peuvent avoir du mal à suivre. Essayez le test d’impression noir et blanc sur votre imprimante pour voir si vous pouvez toujours comprendre vos informations. Utilisez des éléments Web tels que des zones de texte avec des étiquettes, des icônes et des styles typographiques (par exemple, le poids des polices, les soulignements) pour une meilleure communication visuelle. Et en parlant d’informations et d’éléments Web, écrivez Texte alternatif pour vos images et autres contenus perceptuels.

Si votre système de conception suit certaines des directives d’accessibilité du W3C, il aura de meilleures chances de figurer en bonne place dans les résultats de recherche, d’atteindre un public d’utilisateurs plus large, d’avoir un temps de téléchargement plus rapide, d’encourager de bonnes pratiques de codage et, bien sûr, une meilleure convivialité .

Mettez l’accent sur l’accessibilité dans le cadre de votre recherche de conception, et sachez qu’il y a toujours des gens prêts à aider.

Un «audit» peut sembler intimidant – y ajouter le mot «visuel» ne l’améliorera probablement pas. Mais effectuer un audit visuel avant de lancer votre système de conception vous sera un exercice bénéfique. Tout comme ce que signifie un audit régulier, une «analyse approfondie d’un projet», un «audit visuel» analyse les éléments de conception utilisés. Vous devrez gérer ses éléments, en vous assurant que les consistances sont en place, que tout répond aux «pourquoi» et «comment» de votre produit, avant enfin de donner un sens à la messagerie de sa marque avant de l’envoyer pour publication. Considérez un audit de votre système de conception comme une opportunité de réflexion – pour vérifier la qualité de votre travail, les actifs contenus et l’expérience utilisateur.

L’enchaînement avec le modèle de conception accessible, vient l’évaluation heuristique, « l’utilisabilité et l’accessibilité d’un site Web ou d’une application ». Jakob Neilsen, l’un des deux leaders mondiaux de la NN / g Neilsen Norman Group, a publié le 10 Heuristique pour la conception de l’interface utilisateur en 1994 qui règne encore à ce jour. Bien que ses 10 principes aient été écrits pour cette branche spécifique de la conception, ils sont appelés «heuristiques» pour ses règles générales et ses directives générales d’utilisation.

1. Visibilité de l’état du système – Votre produit doit toujours être disponible pour son utilisateur dans un délai raisonnable.
2. Correspondance entre le système et le monde réel – Les utilisateurs doivent être capables de comprendre la langue de votre système. Évitez d’utiliser des explications trop techniques et concentrez-vous sur l’utilisation de concepts du monde réel faciles à suivre.
3. Contrôle utilisateur et liberté – Nous faisons tous des erreurs. Mais si vous faites une erreur dans une application, vous aurez besoin d’une «sortie d’urgence» requise sans avoir à passer par un processus long et indésirable. Envisagez d’implémenter des actions simples telles que «annuler» et «rétablir».
4. Cohérence et normes – Les utilisateurs ne devraient pas avoir à se demander si des mots, des situations ou des actions différents signifient la même chose.
5. Prévention des erreurs – Encore mieux que de bons messages d’erreur est une conception soignée qui empêche un problème de se produire en premier lieu. Éliminez les conditions sujettes aux erreurs ou vérifiez-les et présentez aux utilisateurs une option de confirmation avant de s’engager dans l’action.
6. Reconnaissance plutôt que rappel – Le monde numérique a provoqué le rétrécissement de notre capacité d’attention. Faites en sorte que votre conception contienne toutes les instructions nécessaires pour guider l’utilisateur.
7. Flexibilité et efficacité d’utilisation – Les accélérateurs, invisibles pour l’utilisateur novice, peuvent souvent accélérer l’interaction pour l’utilisateur expert de telle sorte que le système peut répondre aux besoins des utilisateurs inexpérimentés et expérimentés. Permettre aux utilisateurs d’adapter les actions fréquentes.
8. Design esthétique et minimal – Moins est plus.
9. Aide les utilisateurs à reconnaître, diagnostiquer et récupérer des erreurs – Les messages d’erreur ne doivent être exprimés qu’en langage clair, résoudre le problème et suggérer des solutions.
10. Aide et documentation – Parfois, vous ne pouvez pas l’aider – certaines tâches peuvent être trop compliquées à suivre. Ces informations devraient ensuite être accompagnées d’un soutien adéquat.

Si vous souhaitez approfondir les spécificités de l’audit visuel des systèmes de conception, le concepteur Web de Pittsburgh, Brad Frost, a inventé le terme «Conception atomique», « Une méthodologie qui vous permet (et vous oblige) de décrire et d’organiser chaque composant de votre système de conception. »

1. Atomes – Les plus petits blocs de construction de votre système de conception. Les exemples incluent les styles de texte, les boutons, les icônes, les champs de saisie et les cases à cocher.
2. Molécules – Entités plus complexes, constituées de plusieurs atomes. Les exemples incluent les toasts de notification, les valeurs de données (étiquette: valeur), les champs de saisie avec des boutons.
3. Organismes – Les parties vraiment fonctionnelles d’une page, composées de groupes d’atomes et de molécules. Les exemples incluent les navigations, les barres latérales, les formulaires, les fenêtres contextuelles.
4. Modèles – Pages sans contenu réel. Ils combinent des organismes dans une présentation de site Web appropriée.
5. Pages – Une fois que vous avez un modèle, vous pouvez créer des pages à l’aide de modèles. Un exemple de page standard:

Si la simplicité est votre truc, la conception atomique réduit les épuisements d’un audit minutieux. Il décompose les éléments en morceaux digestibles qui permettent la rapidité, l’uniformité et moins de composants.

Avec tout votre travail acharné maintenant, comment savez-vous que votre système de conception est efficace? Il nous reste à combler certaines lacunes, dont la documentation.

Au début, quand je pensais à la documentation dans les systèmes de conception, bien sûr, mon esprit académique pensait instantanément à la documentation de «recherche» où vous recherchez des articles savants et les référencez dans des ouvrages cités. Les outils de documentation dans la conception comprennent la récupération d’informations et le contrôle de version des fonctionnalités, afin que vous puissiez revenir à une version précédente et voir les erreurs que vous avez faites et que vous souhaitez améliorer. La documentation du système de conception inspecte également les composants et les variables, en gérant tous les actifs numériques, en plus des programmes qui se synchronisent même avec vos outils de conception lorsque vous êtes au travail, tels que Sketch, Figma et Adobe XD. Priorisez vos besoins en fonction de leur importance lors du choix d’un logiciel de documentation. Il existe de nombreux types disponibles – une documentation pure comme Gitbook et VuePress, et une documentation de conception comme Zeroheight et Frontify.

Vous avez entendu parler de la possibilité de proposer plusieurs solutions à un seul problème de conception, et la conception n’est pas non plus un processus linéaire. Tous les systèmes de conception ne sont pas créés de la même manière, car il faudra toujours des améliorations. Quel est l’état du design pour 2020?

«L’avenir est interactif, accessible et utilise des jetons.» – Google Material Design

Construire un système de conception est une entreprise passionnante, mais c’est aussi une tâche ardue qui nécessite la participation de nombreuses personnes – pas seulement celles des équipes de conception et de produit, mais aussi les développeurs, les chefs de projet, même les utilisateurs et clients de test, et diverses parties prenantes – La liste se rallonge de plus en plus. Votre système de conception bien conçu est un produit, mais il peut être plus qu’un simple produit. Votre public est composé de vos collègues créateurs, mais votre portée peut être plus que vos concepteurs. Avec la bonne dynamique, les systèmes de conception peuvent aider à renforcer et à valoriser une mentalité de pensée de conception appropriée dans tous les aspects de l’organisation. Certains lancent même leurs outils au public pour aider à s’imposer comme leader ou pionnier de l’industrie. Les systèmes de conception sont là, et ils vont dominer l’état du design cette décennie.