Design : Pourquoi colorions-nous en wireframes?

• Vous avez besoin d’un buy-in de palette de couleurs – Il existe de nombreuses façons de combiner la conception graphique créative, les livrables de la conception de l’interface utilisateur et de l’expérience utilisateur, mais parfois (encore une fois selon les parties prenantes), il peut être bénéfique de commencer à faire la démonstration de nouvelles palettes de couleurs via des wireframes haute fidélité pour obtenir l’adhésion et empêcher douleur future.
• Si vous travaillez sur des variantes de produits multimarques – Si vous travaillez pour une marque où deux produits ou services ont des couleurs de marque différentes, mais des expériences de produit similaires – la couleur peut communiquer le type de prototype de produit que l’intervenant regarde. Exemple: flux de réservation pour le produit A, flux de réservation pour le produit B, lorsque les deux produits ont une palette de couleurs différente ET des variantes / détails d’interaction différents dans le flux.

Tous les scénarios ci-dessus comportent des problèmes et des défis. Il y a beaucoup plus de raisons pour lesquelles cela pourrait être mauvaise idée pour commencer à colorier vos wireframes.

• Le gris signifie «pas fini» – Les wireframes en niveaux de gris vous donnent la liberté d’itérer, de se tromper et de jeter les choses sans que les parties prenantes et les équipes de conception ne soient attachées à une seule conception. Une fois que vous commencez à leur ajouter de la couleur, vous communiquez un niveau de «terminé»; un engagement que vous ne pouvez pas reprendre aussi facilement. Si vos wireframes ressemblent à l’interface utilisateur, cela signifie que vous avez confiance en la solution. Si vous commencez ensuite à le changer, vous pouvez paraître moins confiant en tant que designer.

• La couleur est émotionnelle – Mettre la palette de marque de votre client sur un filaire leur donne un sentiment d’appartenance. Comme ci-dessus, cela peut être bénéfique. Mais pas si vous êtes à un stade précoce des itérations – si votre client s’attache à quelque chose, il sera plus difficile d’obtenir la permission de le jeter.
• Il est plus facile d’expliquer la différence entre deux choses distinctes – Pour la plupart des projets, vous devez disposer d’une taxonomie d’artefact claire. Tout le monde, de l’équipe de conception au développeur en passant par les parties prenantes, doit comprendre ce que vous appelez les choses. Il n’est pas avantageux de brouiller les lignes. Cela aide vraiment vos processus de signature lorsque tout le monde le sait est un filaire et est ma conception finale de l’interface utilisateur. Commencez à brouiller les lignes, et vous allez passer beaucoup de temps à clarifier les choses au lieu de les approuver.

• Votre interface utilisateur doit aller encore plus loin – Une fois qu’un client voit un filaire en couleur, votre interface utilisateur finale devra aller beaucoup plus loin afin d’indiquer clairement qu’il s’agit maintenant de la conception finale. Et pour certains clients, vous avez besoin de ce «ta-da» final de voir A Pretty pour la première fois. Ce n’est pas grave si votre design final est extrêmement créatif, mais vous allez en perdre un peu, sinon tout cela si votre filaire et votre interface utilisateur sont similaires.
• Votre interface utilisateur finale est essentiellement colorée en wireframes – J’ai vu beaucoup de « l’interface utilisateur finale » qui ressemble étrangement à un filaire coloré. C’est généralement pour l’une des deux raisons suivantes:

1. parce que le concepteur UX / UI a fait les deux parties lui-même, c’est-à-dire qu’il a déplacé ses propres wireframes en UI et n’a pas réfléchi très fort entre les deux étapes. Dans la mesure du possible, je recommande de garder les deux tâches sur deux personnes (de tout ensemble de compétences proclamé UX / UI) afin de conserver cette friction de conception nécessaire pour trouver une réponse réfléchie.
2. parce que l’équipe a commencé à utiliser la couleur dans les wireframes haute fidélité, probablement trop tôt, et juste parce que la «vérité» (c’est-à-dire la solution de conception choisie)

Ou les deux.

• Il vous empêche de faire une exploration de conception appropriée – Ceci est lié au point ci-dessus. Vous passez trop de temps à faire une jolie chose plutôt que d’explorer une centaine d’alternatives. Si une personne laboure un sillon droit à travers des structures filaires et dans l’interface utilisateur, et brouille la ligne entre les deux, le biais de confirmation les empêchera d’explorer correctement les solutions de conception et d’interaction.

Dans notre équipe, même si nous sommes sur le point de réaliser des wireframes haute fidélité avec les couleurs de la marque, nous avons effectué une double exploration créative avec la conception IA et UX afin de ne pas finir par concevoir la première chose à laquelle nous avons pensé. Notre objectif est de proposer la meilleure expression de marque possible en plus d’une base d’interaction solide.

• Vous ne pourrez pas créer une échelle de gris de base lorsque vous en aurez besoin – Si les membres de l’équipe et les parties prenantes s’habituent aux wireframes quasi-fidèles de haute fidélité, vous ne pourrez jamais revenir en arrière.

C’est correct si vous travaillez sur le même produit massif et que vous avez une bibliothèque de modèles de conception UX à partir de laquelle (ou même que vous prototypez dans l’interface utilisateur – Dieu vous bénisse), mais si vous travaillez sur plusieurs projets, vous devez parfois supprimer quelque chose rapidement (gris) et sale. Mais maintenant, vous ne pourrez plus, car vous avez placé la barre trop haut. Tout va prendre deux fois plus de temps et les gens vont s’attendre à être «séduits» par vos wireframes. Encore une fois, pas le point des wireframes.

• Vous préparez des choix de couleurs —Nous savons qu’il existe plusieurs façons de communiquer la hiérarchie des pages, même dans un filaire en niveaux de gris. Si vous comptez tôt sur la couleur, non seulement vous limitez votre propre conception en ne réfléchissant pas à un niveau d’interaction, mais vous risquez de ne pas respecter les directives d’accessibilité du W3C.
• Il peut bousiller vos résultats de test utilisateur – Certains peuvent affirmer que la couleur, comme le contenu, améliore la compréhension des utilisateurs lors des tests. Cependant, si la couleur est essentiel pour que les utilisateurs comprennent que vous faites probablement quelque chose de mal. Il vaut toujours la peine de faire un test de première étape de votre produit à un niveau d’interaction (tester l’IA) avant d’ajouter même le contenu principal.

Si vous ajoutez même une couleur de marque principale, vous risquez que les utilisateurs soient distraits par l’implication de la marque pour laquelle c’est – et tout effet de halo associé. Naturellement, cela ne s’applique pas si vous êtes une équipe interne et que l’utilisateur est venu dans vos bureaux physiques. Vous avez déjà adopté ce parti pris.

• Vous le faites parce que vous voulez concevoir quelque chose de joli – Tant de concepteurs UX avec lesquels j’ai travaillé trouvent IA ennuyeux (huer) ou filaire ennuyeux, car ce n’est pas «joli». Si vous colorez des wireframes pour stimuler votre cerveau, optez pour une coloration latérale. Ou devenez un concepteur d’interface utilisateur à temps plein.

En parcourant ce qui précède, j’ai énuméré 5 scénarios où il pourrait être utile (si toujours difficile) d’ajouter de la couleur aux wireframes. Et j’ai énuméré 10 façons dont cela pourrait faire dérailler votre projet ou être généralement mal avisé.

Prenez de cela ce que vous voulez. Pour ma part, je suis heureux de l’avoir écrit afin de pouvoir réduire le nombre de conversations que je dois avoir à ce sujet à partir de maintenant 😉.

Je ne dis pas que vous ne devez JAMAIS ajouter de couleur aux wireframes. Je dis que vous devez être conscient des implications et le faire pour une bonne raison.

Si vous allez de l’avant et êtes confiant que cela fera plus de bien que de mal à votre projet, voici mes trois principales recommandations pour éviter qu’il ne se passe mal:

1. Ayez une taxonomie d’artefact claire pour votre projet – réles produits livrables sont importants. Si vous avez la chance de démarrer un projet UX avec un nouvel ensemble de parties prenantes, expliquez clairement ce que vous appelez un document ou un artefact et ce que cela signifie. Ne vous attardez pas sur la différence entre un flux d’utilisateurs, un flux de tâches, un parcours utilisateur ou autre chose. L’industrie n’a pas la moindre idée – il suffit de choisir des noms et de les utiliser de manière cohérente.
2. Indiquez clairement ce qui est / n’est pas filaire – Si vous le devez, appelez-les wireframe basse fidélité (100% niveaux de gris), wireframe haute fidélité (+1 couleur) et conception d’interface utilisateur (pleine couleur). Mais ne créez pas de nouveaux hybrides mutants entre eux à mesure que votre projet évolue.
3. Définir les attentes d’utilisation – Expliquez clairement pourquoi ce type de filaire / prototype est utilisé, quel est le cas d’utilisation et les avantages, combien de temps il sera utilisé et si (le cas échéant) il sera utilisé à l’avenir. Ou pas.

Quoi que vous fassiez, ne vous engagez pas à une fidélité toujours plus élevée des livrables au détriment de votre propre temps, de votre processus de conception, de votre temps de réflexion et de résolution, de votre budget de projet et, finalement, de vos utilisateurs.