Design : Développement d’un système d’icônes Open Source chez Microsoft – Microsoft Design

Les icônes transcendent les langues. Ce sont des panneaux qui ouvrent la voie à une expérience utilisateur simple et agréable. Si la direction ou le message d’une icône manque de clarté, il devient au mieux un régal pour les yeux et, au pire, une distraction. Alors, quand l’équipe a commencé l’exploit de créer 500 Icônes Fluent Design System Pour travailler sur les produits Microsoft, le Web, Android OS et Apple iOS, ils savaient qu’ils devaient bien faire les choses.

Mais qu’est-ce qui se passe exactement pour «bien faire les choses»? Et comment commence-t-on exactement à concevoir des icônes mobiles pour une entreprise qui en possède déjà? Et pourquoi faut-il tant de temps pour concevoir et mettre en œuvre quoi que ce soit dans l’écosystème des produits? Ce ne sont que quelques-uns des sujets difficiles que les esprits curieux nous ont demandé Instagram, Twitter et Facebook.

Le concepteur de produits senior Joe Woodward et le concepteur principal Jason Custer (avec les camées de la designer principale Janet Longhurst), deux des responsables de l’initiative Fluent icon, répondent à ces questions dans les Q&R ci-dessous. Nous espérons que cela vous sera utile et, comme toujours, nous aimerions connaître votre opinion sur les icônes dans les commentaires ci-dessous.

Les questions des clients et les réponses des concepteurs ont été légèrement modifiées pour plus de clarté et de concision.

@hraikai: Pourquoi faut-il autant de temps pour qu’un système de conception soit appliqué dans une entreprise?

Jason: Imaginez que le système est un train. Et en tant que train, vous devez faire monter et descendre les gens, mais vous voulez aussi les amener à destination. Nous ne voulons pas aller si lentement que nous prenons du retard et les équipes quittent le système de conception, mais nous ne voulons pas arriver trop tôt quand les gens n’ont pas encore rattrapé les composants du code. C’est l’équilibre parfait d’aller de l’avant et d’engager des équipes sans les perdre. Et aussi montrer la valeur, c’est la pièce qui est difficile. Lorsqu’une équipe est habituée à aller à sa propre vitesse, puis que vous lui demandez de se joindre à l’effort, il peut être difficile pour elle de voir la valeur de se joindre à l’effort si cette vitesse n’est pas la même que la leur.

Joe: Donc, vous avez tout l’effort de créer les icônes, le langage de conception ou quoi que ce soit. Et puis il y a tout ça autre pour convaincre différentes équipes d’adopter le nouveau système de conception. Dans une entreprise de cette taille, si vous concevez un ensemble d’icônes et que vous intervenez à la dernière minute et dites: «Hé, utilisez cet ensemble», je pense que les gens se sentiront moins susceptibles d’être d’accord avec ça. Vous devez vraiment les accompagner tout au long du voyage afin qu’ils puissent donner leur avis et en faire partie. Cela aide également si vous avez quelques équipes qui l’ont déjà adopté afin que les autres puissent voir à quoi tout ressemble dans la pratique.

Jason: Vous avez tout à fait raison, la preuve est dans le pudding. Il y a aussi le défi des équipes qui ont toutes leurs propres priorités à relever, comme corriger certains bugs ou publier de nouvelles fonctionnalités. Ils ont déjà leur calendrier défini, il peut donc être difficile d’ajouter ces types d’efforts de polissage ou d’alignement.

Janet: Il était également crucial que toutes les structures d’outillage et les systèmes de dénomination aient un sens pour tout le monde dans toutes les équipes de conception. Donc, au sujet de Joe au sujet de faire venir des gens, nous avons réexaminé notre processus pour voir à quoi cela pourrait ressembler si nous concevions en plein air, conçu de manière à encourager toutes les équipes à participer et à investir dans le travail. Nous avons finalement échelonné le travail en partageant de manière transparente nos progrès avec les équipes de l’entreprise. Et, comme vous le savez, partager, itérer, partager à nouveau, tout cela prend du temps.

@ catcatwack *: Comment pensez-vous des icônes d’avenir?

Joe: Je pense que cela revient à créer un système d’icônes qui fonctionne à plusieurs endroits. Les icônes doivent également avoir fière allure dans différentes tailles et poids. Les icônes deviennent comme une police où vous pouvez adapter le poids du trait et les tailles. Ces décisions font évoluer le système et l’aident à être un peu plus pérenne.

Jason: D’accord. Ce type de flexibilité est essentiel. Si quelqu’un essaie de plier quelque chose et qu’il se casse, il abandonne le système et commence à créer ses propres icônes. Souvent, un designer crée une icône en une seule taille et la fait simplement évoluer vers d’autres tailles en fonction de cela. Donc, vous feriez une icône à 32 pixels, mais si vous en avez besoin à 24 pixels, vous la réduisez simplement, mais vous ne pouvez pas contrôler à quoi ressemble cette icône dans cet emplacement. Nous avons donc construit des icônes à chaque taille, ce qui rend le système plus flexible et les icônes plus cohérentes.

Joe: Oui, ce système d’icônes Fluent est aussi flexible que possible. Nous avons également construit un état régulier et un état de remplissage. Je pense que parce que nous avons conçu ces États côte à côte et dans leur contexte, nous avons gagné en flexibilité et nous nous sommes assurés qu’ils fonctionnent tous les deux, où qu’ils se trouvent.

* Employé Microsoft

@ niels9001: Comment aligner les icônes de bureau, Web et mobiles?

Joe: Nous savions que nos icônes avaient besoin d’un rafraîchissement avec un point de vue mobile. Nous sommes partis de notre ensemble actuel conçu avec MDL2, mais nous avons vraiment étudié comment les appareils tactiles ont évolué et comment les icônes peuvent s’adapter à nos outils de productivité modernes.

Jason: Pour aider également à créer cette expérience transparente sur toutes les plateformes, les métaphores que nous utilisons pour les icônes couvrent le Web, le bureau et le mobile. Ce sont des icônes familières qui continueront probablement jusqu’à ce que nous soyons fatigués d’utiliser quelque chose comme une disquette pour la sauvegarde. Nous avons également fait quelques exceptions pour les icônes spécifiques à la plate-forme.

@pkbullock: Comment équilibrez-vous les différentes couleurs ensemble?

Joe: Les icônes fluides n’ont pas encore de couleurs appliquées – du moins pas plusieurs couleurs. Sur mobile, nous appliquons uniquement la couleur dans le code, mais ces couleurs indiquent uniquement quelque chose comme un état «actif» (par exemple, Outlook est bleu, PowerPoint est rouge). Cela nous aide à faire fonctionner nos icônes pour le mode clair et sombre, et cela nous permet d’augmenter le contraste pour des choses comme l’accessibilité. L’accessibilité est au cœur de Fluent Design, et elle reste une valeur fondamentale ici aussi.

L’application de couleur dans le code signifie également que si un concepteur souhaite changer la couleur de l’icône dans sa conception, il peut simplement échanger le style de calque et l’icône elle-même restera liée à l’icône principale. Lorsque la bibliothèque sera mise à jour, son icône sera également mise à jour.

@ jackerb07: Comment obtenez-vous une conception parfaite des pixels?

Joe: Sur notre tableau d’art de 24 pixels, nous utilisons en fait un trait de 1,5 pixel sur mobile, ce qui peut être un peu controversé car il est hors de la grille de pixels. Cela signifie que les icônes peuvent sembler un peu floues sur les bords, car elles se trouvent entre les pixels. Ce n’est pas un tel problème sur les écrans haute résolution, mais cela pourrait devenir un problème sur les écrans basse résolution. Mais nous avons fait un tas de tests, et nous alignons essentiellement l’extérieur du trait sur la grille de pixels, ce qui signifie qu’un seul côté du trait est assis à 0,5 pixel. Cela réduit autant que possible le flou. Nous utilisons 1,5 pixel, car nous avons constaté que cela aide les icônes à être optimales sur toutes les plates-formes.

Jason: Parce que c’est un trait de 1,5 pixel, cela secoue en quelque sorte le cœur des concepteurs qui travaillent sur les icônes depuis des années. Vous avez soit un ou deux pixels, et vous ne sortez jamais de cela. Mais je pense qu’il y a quelque chose de très intéressant à secouer cela, sachant qu’avec des écrans haute densité, cela n’a pas vraiment d’importance, donc c’est génial de faire quelque chose en dehors de la norme qui fonctionne vraiment bien.

Janet: Comme il s’agit d’un ensemble d’icônes qui s’étend sur les appareils mobiles et les ordinateurs de bureau, nous avons également conçu des icônes avec un trait de 1 pixel pour les appareils à faible résolution. Et pour Jason, il est intéressant d’explorer ce que les différences entre les plates-formes peuvent apporter et jouer sur ces points forts. En pensant à l’avenir, notre ensemble devra peut-être évoluer vers un système multi-poids et inclure 1 pixel, 1,5 pixel et 2 pixels pour tenir compte de tous les appareils.

@ jackerb07: Pouvez-vous partager quelques premiers prototypes?

Janet: Nous pouvons! Voici une version simplifiée de la façon dont nous avons itéré sur l’icône de la personne.

1: L’icône de la personne est souvent affichée dans un avatar en cercle, donc un fond incurvé pourrait mieux fonctionner ici.

2: Nous avons courbé le fond et les proportions fonctionnent mieux mais les deux personnes se sentaient déséquilibrées. De plus, nous avions besoin d’un contraste clair entre les rondeurs des épaules et des bas. De plus, la tête droite était un peu petite par rapport à son corps.

3: Ceci est l’icône finale. Cette version a résolu tous les problèmes de V2 et nous avons travaillé avec des équipes de conception pour confirmer que la forme fonctionnait bien dans toutes les variantes d’icônes de personnes nécessaires.

Rien d’autre?

Joe: Nos icônes sont accessibles à tous! Vous pouvez les télécharger ici

Jason: L’autre chose est qu’il n’y a pas d’équipe de designers entièrement dédiée à cet effort. C’était au départ celui qui avait le temps de les construire. Mais maintenant, nous sommes à un endroit idéal où cela ressemble plus à un effort cohérent organique, et maintenant nous sommes à 500 icônes.

Joe: Ouais, c’est un grand point. Nous avons eu des designers de différentes équipes de produits qui se réunissaient pour apporter leurs différentes perspectives, ce qui signifiait également que chaque équipe serait plus susceptible d’adopter les icônes. Cela ressemble vraiment à un effort collectif par rapport à un effort descendant.