Article original : Design tips all developers should keep in mind
Par Wiki Chaves
Dans un monde idéal, les équipes de développement de produits grand public devraient avoir un designer pour quatre à six ingénieurs. En réalité, cela arrive rarement. J'ai donc écrit quelques conseils que tout ingénieur peut suivre lorsqu'il y a une pénurie de designers dans son équipe.
Contexte
Je suis designer produit avec un parcours diversifié. J'ai travaillé dans différents secteurs, de l'éducation et de la publicité à la vente au détail et à la technologie.
J'ai toujours considéré les rôles comme une frontière stricte entre ce qui relève de mes responsabilités et ce qui n'en relève pas. En tant que designer, je m'occupais du design, et les ingénieurs s'occupaient du codage. Cela m'a aidé à définir mon rôle et à avoir un certain contrôle sur mes responsabilités.
L'année dernière, alors que je travaillais chez Airbnb — une entreprise technologique renommée pour sa culture du design — j'ai été confrontée à un grand défi. Après ma semaine d'intégration, j'ai rejoint une équipe composée de 12 ingénieurs, un chef de produit, un data scientist, un chercheur, et moi-même en tant que designer. J'ai un peu paniqué. Comment allais-je satisfaire les besoins de mon équipe ?
J'ai pensé à trois solutions possibles.
- Travailler plus d'heures. C'était mon premier instinct. Si je devais fournir du design pour plus du double du nombre idéal d'ingénieurs, je devrais travailler beaucoup plus d'heures. Cela affecterait sérieusement mon équilibre vie/travail et finirait par m'épuiser.
- Ralentir. Si je voulais continuer à travailler à mon rythme habituel, je finirais par devenir un goulot d'étranglement humain. Les demandes de design commenceraient à s'accumuler et je n'aurais jamais le temps de rattraper mon retard (ce qui aurait un impact négatif sérieux sur les objectifs de notre équipe).
- Lâcher prise. En tant que designer, il est difficile de lâcher prise. Nous sommes fiers d'être les experts avec l'expérience. Laisser toute l'équipe designer donnait l'impression que je ne faisais pas correctement mon travail, et bien sûr, cela avait un impact sur mon ego. Mais avec le temps, cela s'est avéré être la meilleure approche.
Tout le monde est designer
J'ai beaucoup réfléchi à ce sujet, et j'ai trouvé un excellent article de Daniel Burka qui m'a finalement convaincu que c'était la bonne approche. Tout le monde peut être designer.
Lâcher prise ne signifiait pas que je cessais de me soucier de notre design. Mais je devais permettre et encourager le reste de l'équipe à utiliser leur état d'esprit de designer et à proposer des solutions aux problèmes des utilisateurs ou aux objectifs commerciaux. En fin de compte, l'utilisateur qui utilise votre produit ne se soucie pas de savoir si un écran ou un flux particulier a été conçu par un designer ou non. Il se soucie de l'expérience qu'il vit, et ce n'est pas la responsabilité d'une seule personne.
Pour faire cela correctement, j'ai donné quelques conseils et outils de design à notre équipe et j'ai programmé des heures de bureau de design une fois par semaine. Cela a fourni un créneau fixe où tout le monde pouvait venir avec leurs idées de design pour en discuter et partager des retours.
Ce processus a fini par donner des résultats incroyables. En quelques semaines seulement, nous avons vu comment certaines de ces idées ont été mises en production avec des résultats positifs. Nous avancions beaucoup plus vite qu'avant et l'équipe était super excitée de voir leurs idées de design en production !
Scénarios possibles
Avant de passer aux conseils de design pour les développeurs, je veux commencer par mentionner les scénarios possibles auxquels vous pourriez être confronté. Cela dépendra beaucoup de l'étape du projet dans laquelle vous vous trouvez.
Scénario 1 - Il n'y a pas de designer.
Probablement le scénario le plus courant parmi les startups en phase de démarrage ou les projets étudiants. N'avoir aucun designer dans votre équipe signifie que vous êtes le designer ! Ne paniquez pas, et utilisez cette opportunité pour apprendre. Je suis sûre que si vous suivez quelques règles simples, vous pouvez livrer un MVP cohérent.
À ce stade, vous êtes probablement une très petite équipe. Ne passez pas beaucoup de temps à essayer de construire quelque chose de beau, tendance ou accrocheur. Concentrez-vous sur la construction d'une grande expérience avec une interface utilisateur décente. Vous aurez le temps de l'améliorer plus tard.
Scénario 2 - Il n'y a qu'un seul designer pour environ 10 développeurs.
Cela m'est arrivé l'année dernière, et votre designer aura certainement besoin d'aide. Comment pouvez-vous aider ? Proposez des idées — n'attendez pas que tout soit résolu. Asseyez-vous avec votre designer et montrez-lui vos idées. Ils les apprécieront certainement. Rejoignez-les lors des sessions de brainstorming et donnez des retours. Si les designs ne sont pas entièrement spécifiés, demandez à votre designer le fichier source et regardez-le vous-même pour lui faire gagner du temps.
Scénario 3 - Il y a un designer pour quatre à six développeurs.
Vous avez de la chance, car c'est un scénario idéal ! Cela ne signifie pas que vous pouvez oublier complètement le design, mais ce n'est plus une préoccupation primaire. Je recommanderais toujours de rejoindre les sessions de brainstorming pour proposer des idées et donner des retours précoces du point de vue de l'ingénieur.
Conseils de design pour les développeurs
Voici une liste de conseils de design qui vous aideront si vous vous trouvez dans le scénario sans designer. Mais ils peuvent également être applicables dans toute autre circonstance.
État d'esprit de designer
Si vous allez designer, il est très important que vous pensiez comme un designer. Lorsque vous designerez, ne pensez pas aux problèmes d'ingénierie, mais pensez à la manière de résoudre les problèmes des utilisateurs.
L'utilisateur passe en premier.
Disons que vous devez construire une fonctionnalité de téléchargement de photos. Pendant votre temps de designer, vous ne devriez pas penser à la performance, à l'optimisation du code ou aux limitations de la plateforme. Pensez à la manière la plus efficace et intuitive pour qu'un utilisateur puisse télécharger une photo. Pensez à la motivation de l'utilisateur pour télécharger une image. Comment ce processus peut-il être simple et peut-être même agréable ?
Ensuite, lorsque vous aurez terminé votre design, mettez votre casquette d'ingénieur et examinez ce que vous venez de faire, avec votre perspective d'ingénieur. Est-ce techniquement réalisable ? Combien de temps faut-il pour construire cette fonctionnalité telle que vous l'avez conçue ? Avez-vous le temps de la construire ? Si ce n'est pas le cas, pouvez-vous réduire un peu la portée afin de respecter vos délais ?
Il est très important que vous ne franchissiez pas la ligne entre les rôles, sinon vous finirez par limiter votre design en raison des contraintes d'ingénierie ou vice-versa. Si cela aide, vous pouvez essayer de consacrer les matins au design et les après-midis à l'ingénierie. Ou vous pouvez utiliser une zone dans votre espace de travail pour faire tout le travail de design, puis vous déplacer vers une autre zone pour faire votre travail d'ingénieur.
Construire un plan
Si vous avez une idée, avant de vous lancer directement dans le code, construisez un plan. Vous pouvez faire des wireframes, utiliser des notes autocollantes, un tableau blanc ou esquisser sur un bloc-notes — c'est à vous de choisir. Ne sautez pas cette étape même si vous pensez avoir tous les détails en tête. Lorsque vous finaliserez vos wireframes, examinez-les et vous remarquerez probablement qu'il manque quelque chose.
Balsamiq est un bon outil pour le wireframing rapide. Vous pouvez également utiliser Sketch ou Figma pour tout votre processus de design, des wireframes à la production.
Commencer avec un framework
Ne pas avoir de designer dans votre équipe ne signifie pas que vous devez tout concevoir à partir de zéro. Il existe de nombreux frameworks déjà construits que vous pouvez utiliser comme point de départ et personnaliser à votre manière. Bootstrap et Foundation sont mes préférés, mais il en existe beaucoup d'autres selon le type d'application que vous souhaitez construire.
Si vous construisez une application native, je vous recommande fortement de suivre les directives de Material Design pour Android et les directives de l'interface humaine pour iOS. Commencez par suivre les modèles natifs aussi étroitement que possible, sauf si vous souhaitez explicitement construire une interface utilisateur unique, comme Snapchat, ou un jeu. Ce n'est qu'après avoir maîtrisé les modèles et composants par défaut que vous pourrez commencer à personnaliser.
Systèmes de design
Si vous avez la chance d'avoir au moins un designer dans votre équipe, vous pouvez penser à construire votre propre système de design.
Attention !
Cela peut être chronophage et ne vaut la peine que lorsque vous scalez rapidement et que vous devez maintenir plusieurs applications avec le même langage visuel. Un excellent outil pour construire un système de design est Pattern Lab.
Branding
En construisant votre framework, vous commencerez probablement à prendre des décisions qui définiront votre marque. Ne vous sentez pas intimidé par cela ! Le branding est un exercice amusant que vous pouvez certainement faire. La marque que vous finirez par créer ne sera pas gravée dans le marbre et vous engagerez probablement un designer si votre MVP est un succès ou si vous obtenez plus de ressources. Mon ami Marc a écrit un article amusant sur comment faire un logo en environ 5 minutes.
Typographie
Après avoir construit votre logo, vous voudrez peut-être choisir une famille de polices pour le reste de l'application. Google propose un bon guide pour débutants sur le choix des polices web.
Vous pouvez certainement utiliser la même police que celle de votre logo, mais assurez-vous que votre police a une bonne lisibilité, surtout si votre produit contient de grandes quantités de texte. Je vous recommande de garder cela simple et de limiter le nombre de familles de polices à une ou deux maximum. Voici une liste de polices populaires.
Une technique courante consiste à utiliser une police distinctive pour les titres et une police plus lisible pour les grands blocs de texte. Vous pouvez vous inspirer de ces exemples. Un outil pratique que j'utilise souvent pour identifier les polices sur les pages web est l'extension Chrome WhatFont.
Lors de la construction de votre framework, soyez conscient du nombre de tailles de police différentes que vous utilisez. Encore une fois, gardez cela simple. Si possible, utilisez le nombre minimum de variations. Essayez d'éviter de descendre en dessous de 16pt pour de grandes quantités de texte. Beaucoup de gens, comme moi, auront du mal à lire en dessous de cette taille !
Si votre produit en a besoin, utilisez une police appropriée qui supporte de nombreuses langues. Noto, par exemple, est une police développée par Google qui vise à supporter toutes les langues.
Couleur
Similaire à la typographie, gardez cela simple. Une technique courante consiste à choisir une couleur primaire affichée le plus fréquemment dans votre application et une couleur secondaire qui offre plus de moyens de mettre en valeur et de distinguer votre produit. Pour vous inspirer, vous pouvez utiliser cette page de combinaisons de couleurs créée par Tobias van Schneider, ou utiliser l'outil de couleur de Material Design pour jouer avec des combinaisons de couleurs. Pour des combinaisons plus complexes, vous pouvez utiliser la roue chromatique d'Adobe.
Lors du choix de deux couleurs, évitez d'avoir des combinaisons de couleurs vibratoires. Cela se produit lorsque des couleurs adjacentes semblent fusionner, s'estomper et briller, donnant l'illusion de mouvement. En savoir plus dans cet article. Soyez prudent avec cet effet indésirable si vous créez des dégradés.
Enfin, pensez au contraste des couleurs et à l'accessibilité. Pour un MVP, vous n'avez pas à être entièrement conforme aux WCAG. Mais avec un peu d'attention, vous pouvez atteindre un certain degré de conformité minimum. Il existe de nombreux outils pour vérifier votre ratio de contraste des couleurs comme celui-ci.
Iconographie
Les icônes peuvent certainement donner du caractère à votre interface utilisateur et vous aideront dans les moments où vous devez synthétiser des concepts complexes. Elles prennent également moins de place et évitent les longues chaînes de texte et les problèmes d'internationalisation. Cependant, si vous utilisez une icône peu claire pour transmettre une action importante, vous aurez un problème sérieux. En cas de doute sur l'icône, utilisez uniquement du texte ou une icône avec une étiquette à proximité.
De bonnes sources d'icônes sont Noun Project, Material Design icons, et Streamline icons.
Illustrations
Les illustrations peuvent vous aider à soutenir des messages importants que vous ne voulez pas perdre. En moyenne, les utilisateurs lisent au plus 28 % du texte. Avoir une illustration et réduire la quantité de texte peut aider l'utilisateur à assimiler cette information. Une petite animation peut rendre ce moment encore plus agréable.
Il est difficile de trouver l'illustration parfaite qui correspond à vos besoins, donc ma recommandation serait d'engager un illustrateur pour le faire sur demande. Sinon, si vous n'avez pas les ressources pour cela, vous pouvez toujours chercher des illustrations gratuites et trouver ce dont vous avez besoin. N'oubliez pas de donner crédit.
Photographie
Lorsque je construis un nouveau produit, j'aime toujours créer un ensemble de photos que j'appelle produit en utilisation. Celles-ci montrent différents scénarios d'utilisateurs utilisant votre produit ou profitant du bénéfice qui vient après l'utilisation de votre produit.
Par exemple, si vous créez une application qui vous aide à réduire le temps passé sur votre téléphone, vous voulez peut-être avoir un ensemble de photos de personnes participant à des activités de plein air, ou passant du temps avec leur famille.
Une fois que vous avez cet ensemble de photos, vous pouvez l'utiliser pour construire l'histoire et le merchandising autour de votre produit. Utilisez les photos pour votre visite d'intégration, la page d'accueil, les pages de médias sociaux ou le communiqué de presse. Soyez cohérent avec les images que vous utilisez, le style, le ton et le groupe d'âge. Cela influencera la manière dont les gens perçoivent votre marque.
Une source incroyable pour des images gratuites est Unsplash. Si vous voulez placer votre produit dans un contexte, une option abordable est Placeit.
Prototypage
À un moment donné, vous voudrez peut-être construire un prototype pour tester une idée ou un flux. Vous pouvez tester un prototype même au stade du wireframing !
Un outil très simple pour construire des prototypes est InVision, car il vous permet de lier une série d'images statiques et de construire un flux avec des transitions qui donnent l'impression d'un produit fini. Framer est un autre excellent outil de prototypage, et il étend ses capacités au-delà du prototypage chaque jour.
Ne vous attachez pas trop à ces outils qui changent constamment. Tout ce qui fonctionne pour vous pour tester votre idée (même le prototypage papier) est bien.
Tests utilisateurs
À ce stade, vous avez probablement un produit ou un prototype que vous êtes impatient de tester. Tester votre produit avec seulement 5 utilisateurs vous donnera des informations précoces sur ce qui fonctionne et ce qui ne fonctionne pas.
Si vous avez le budget, vous pouvez utiliser un outil comme UserTesting. Mais si vous ne l'avez pas, vous pouvez faire vos propres tests utilisateurs en recrutant des membres de la famille ou des amis, tant que vous gardez cela objectif. Avant de commencer votre test, prenez le temps d'identifier les questions auxquelles vous essayez de répondre par le biais des tests utilisateurs.
Une méthode facile et peu coûteuse pour tester est le test de pensée à voix haute. Cela consiste à laisser les testeurs verbaliser simplement leurs pensées lorsqu'ils naviguent dans l'interface utilisateur après que vous leur avez donné une tâche. Il est important que vous restiez silencieux et que vous n'aidiez pas les testeurs à accomplir leurs tâches.
Par exemple, s'ils vous demandent « Que se passe-t-il si j'appuie sur ce bouton ? », vous pouvez répondre « Que vous attendez-vous à ce qu'il se passe ? ». Sinon, si vous leur donnez la réponse, vous n'apprendrez pas de leur expérience.
Il pourrait être utile d'avoir une troisième personne pour documenter la session. Il est difficile d'être le modérateur et de prendre des notes en même temps. Si vous ne pouvez pas trouver une troisième personne pour vous aider, vous pouvez enregistrer votre session en vidéo.
Itérer
Après avoir lancé votre produit, rappelez-vous : Le design n'est jamais terminé !
Vous apprendrez probablement beaucoup après avoir lancé la version un de votre MVP. Prenez ces connaissances et retournez au cycle de wireframing → prototypage → test utilisateur.
Conversation ouverte
J'espère que vous trouverez ces conseils utiles et applicables à votre travail quotidien.
