Mort au Wireframe. Directement en Haute Fidélité !

Le design UX est une discipline fascinante. Pour bien le faire, les praticiens doivent bien connaître une grande variété de sujets et de compétences. Pour pratiquer la méthodologie de conception centrée sur l'utilisateur et créer des solutions innovantes et faciles à utiliser aux défis quotidiens de la conception de produits, le métier et la compréhension d'un praticien UX impliquent tout, du dessin de base à la conception narrative / de voyage en passant par la psychologie cognitive.

Il existe une grande variété d'outils utilisés, d'artefacts générés et de résultats découverts dans le processus de conception UX/UI, et ils sont capturés dans un assortiment de documents ou même un prototype. Notre artefact de pain et de beurre le plus reconnaissable est le bon vieux fil de fer.

Les wireframes - généralement des squelettes monochromes de conceptions créées pour une évaluation rapide - sont excellents. Ils nous permettent de traduire les contributions de nombreuses parties indépendantes en un seul document que tout le monde peut consulter. De nombreuses fonctions différentes évaluent les wireframes ; analystes commerciaux, chefs de projet, responsables marketing, toutes sortes de concepteurs et développeurs, divers autres fournisseurs et prestataires de services, même le public cible lors des tests de produits. Le wireframe permet à chacun de voir comment ses besoins individuels seront pris en compte et donne à toute l'équipe une chance de résoudre tous les problèmes avant qu'un travail lourd ne soit nécessaire.

Il y a des avantages et des inconvénients, mais dans certains cas, il est logique de sauter complètement la phase de wireframing. Beaucoup de temps pourrait être gagné en gérant l'UX et la conception visuelle au niveau haute fidélité juste après la découverte ou lors de la préparation du prototypage. Cela donnerait à d'autres l'occasion d'évaluer à la fois la fonctionnalité et l'apparence du produit, des participants aux tests utilisateurs aux clients et collègues.

Découvrons pourquoi les wireframes peuvent parfois être problématiques, quand les ignorer a du sens, et comment adapter un processus no-wireframe à un workflow.

Le problème des wireframes

Que ce soit dans un environnement en cascade ou agile, le processus de conception typique implique des phases de recherche, de définition, d'idéation, de prototypage, de test et de déploiement, ainsi que de nombreux points de contact à examiner avec les parties prenantes en cours de route.

Examinons le processus de conception pour des exemples où la conception filaire peut être un goulot d'étranglement :

Raison 1 : les clients ne comprennent pas ce qu'ils regardent

Le processus de conception commence généralement par une sorte de recherche sur le problème. La recherche documentaire, les entretiens avec les parties prenantes et les entretiens avec les utilisateurs ne sont que quelques-unes des activités qui peuvent être entreprises pour approfondir la compréhension. Après la recherche, l'équipe de conception commence à évaluer un certain nombre d'idées et de concepts afin de trouver la meilleure solution.

Lorsqu'un concept est plus étoffé, l'équipe de conception partage souvent une série de wireframes avec le client lors d'une session de révision.

Le problème est que les wireframes sont très abstraits.

Ils décrivent quelque chose qui ressemble à la chose, mais pas la chose réelle qui sera construite. À ce stade, les wireframes contiendraient des images d'espace réservé et toutes sortes de savoirs traditionnels (à venir), de FPO (pour le placement uniquement) et de TBD (à décider) comme dans l'exemple ci-dessous.

Il y a probablement des détails sur les fonctionnalités, les exigences commerciales et la gestion des erreurs qui seront indiqués dans une énorme liste d'annotations. En règle générale, il n'y a jamais assez de temps pour les parcourir en détail, de sorte que le client devra les lire par lui-même.

Lors des revues filaires, nous demandons à nos clients de se concentrer sur le concept décrit et d'évaluer s'il semble ou non résoudre les problèmes de l'entreprise et des utilisateurs. Cependant, nous recevons toujours des questions sur des choses qui, pour nous, ne semblent pas être liées. Les clients veulent savoir si le wireframe est la « copie finale » ou s'ils peuvent voir des exemples de photos à afficher dans l'image du héros, ou une autre question sur quelque chose qui sera traité dans la conception visuelle, le prototypage de l'interface utilisateur ou le développement.

Les wireframes peuvent être trop abstraits pour que les clients et même les parties prenantes internes puissent les évaluer efficacement. Les wireframes indiquent aux gens comment un design va être une fois qu'il est terminé, mais ils doivent encore faire beaucoup de travail mental pour le faire se concrétiser dans leur tête. Nos clients peuvent ou non être des penseurs visuels, et il peut être exagéré de s'attendre à ce qu'ils regardent un plan et imaginent un produit ou un site réussi.

Quelques clients ont spécifiquement demandé à revoir les conceptions visuelles annotées, car il leur est beaucoup plus facile de relier les points, d'avoir une discussion approfondie et de donner des commentaires réfléchis.

Raison 2 : ils ne sont pas toujours adaptés aux tests utilisateurs

Espérons que des tests utilisateurs ont été programmés dans le processus de conception, car c'est un bon moyen de tout tester, de la faisabilité d'un concept complet au niveau de détail à afficher dans une transaction.

Une façon typique de tester ce genre de choses est le prototypage.

Les wireframes peuvent et fonctionnent pour le prototypage. L'équipe de conception se limite à tester le flux et les fonctionnalités uniquement, et comme elle manque d'une couche de conception visuelle, les styles visuels affectant le comportement de l'utilisateur peuvent être facilement ignorés.

Est-ce sage ? L'UX, le visuel et la conception de copie ont tous un impact les uns sur les autres. Il est difficile de les séparer et de les isoler dans un environnement de test. Semblable à une étude scientifique, les résultats d'une fonction testée isolément ne peuvent pas contrôler ou prédire comment elle se comportera dans la nature.

Parfois, il est plus efficace de tester toutes ces choses ensemble de manière holistique.

Exemple : un produit ou service multilingue. Les langues peuvent avoir des grammaires, des alphabets et des largeurs de caractères différents qui pourraient avoir un impact sur la conception globale.

De plus, étant donné que le contenu de la copie affecte l'UX, la traduction elle-même peut affecter l'UX.

Par exemple, nous avions une mission où nous devions tester quelques architectures d'informations différentes en raison de la nécessité d'expliquer divers concepts dans la langue locale. Nous n'aurions pas découvert l'impact sur la rédaction et la traduction sans tester la copie réelle dans l'interface utilisateur.

Nous avons découvert que davantage de mots étaient nécessaires pour décrire des concepts similaires dans la langue locale, et que nous devions modifier globalement la taille et la forme des boutons pour tenir compte de la formulation détaillée requise pour cette langue. Sans nous concentrer sur les problèmes de texte lors du test des composants visuels réels dans l'interface utilisateur, nous n'aurions pas découvert que les boutons devaient prendre toute la largeur de l'écran mobile, ce qui a eu un impact sur notre conception UX à l'avenir.

Point clé à retenir : il est logique de préparer des interfaces utilisateur haute fidélité dès le départ, en particulier pour un projet multilingue.

Raison 3 : Ils rendent la vie infernale pour les développeurs et le contrôle qualité

Ce qui se passe inévitablement pendant la phase de conception visuelle, c'est que tout bouge. Les images empilées deviennent des tuiles. Le texte centré devient aligné à gauche. Les icônes de déclenchement d'accordéon étaient + et - , mais maintenant ce sont quelques chevrons.

Il s'agit d'une partie normale du processus de conception visuelle. Ce qui est également normal, c'est que toute modification apportée à la conception visuelle ne sera pas reflétée dans les wireframes, car les wireframes ont été "approuvés".

Lorsque tous les visuels sont approuvés, il est temps de tout remettre aux développeurs. Dans la plupart des cas, ils recevront un ensemble de wireframes détaillés et annotés et un ensemble de superbes conceptions visuelles ainsi qu'un guide de style. A eux maintenant de croiser ces deux documents et de donner vie au tout.

C'est un domaine où le processus de conception peut vraiment échouer. Nous donnons aux développeurs trop de documents auxquels se référer et leur laissons le soin de déterminer quelles informations ont la priorité. Cela augmente le temps nécessaire aux appels d'assistance et à l'assurance qualité, ce qui a naturellement un impact sur le temps nécessaire pour mettre un produit ou une mise à jour sur le marché.

Pourquoi ne pas simplement donner aux développeurs un document précis qui inclut tout ? La plupart des clients apprécieraient également une copie à utiliser comme référence complète pour le travail.

La solution : ignorer les wireframes

De toute évidence, il y a des moments où une phase filaire complète est nécessaire, et il y a des moments où ce n'est pas le cas. Il y a même des moments où passer directement à la haute fidélité l'emporte complètement sur la phase filaire.

Vous pourriez envisager de sauter la phase filaire si l'une de ces conditions est vraie :

Un matériel de référence solide est en place.

Jetez un œil aux travaux existants en place. Des références détaillées sur l'interface utilisateur sont peut-être déjà disponibles. Si vous apportez des mises à jour à un site Web existant ou ajoutez une nouvelle fonctionnalité à une application existante, consultez le site Web et l'application actuels pour trouver des modèles et des styles à réutiliser.

Ce serait encore mieux si vous aviez accès aux fichiers source du travail existant. Certaines fonctionnalités et certains éléments peuvent avoir été perdus dans la traduction, pour ainsi dire, au cours du processus de développement, et vous pouvez vous référer au fichier source pour voir comment cette fonctionnalité aurait dû être réalisée.

En plus (ou en l'absence) d'un produit ou d'un site existant, vérifiez s'il existe un guide de style ou une bibliothèque de modèles en place. Le client a peut-être déjà payé pour certains travaux de branding et de conception visuelle, et ces ressources pourraient être réutilisées pour votre projet.

Utilisez autant de styles et de motifs que vous pouvez trouver afin que vos sorties haute fidélité soient aussi précises que possible.

Vous avez planifié de nombreux prototypes et tests itératifs en cours de route.

Épargnez-vous quelques efforts au cours des semaines de prototypage et de test. Si vous configurez soigneusement votre document la première fois et utilisez intelligemment les styles, motifs et symboles répétés, vous pouvez facilement effectuer des mises à jour incrémentielles en haute fidélité et les publier directement dans votre flux de travail de prototypage. Aucun fil de fer nécessaire.

Comme gros plus, vous pouvez faire d'une pierre deux coups. Vous pouvez obtenir des commentaires visuels et de l'interface utilisateur en plus de vos commentaires UX et apporter toutes ces modifications en une seule fois.

Vos participants au test sont très littéraux.

Tout comme vos clients et collègues peuvent parfois avoir besoin d'exemples concrets, le public cible de votre projet peut également en avoir besoin.

Un concert récent m'a fait concevoir des écrans financiers pour un public cible peu alphabétisé. La compréhension en lecture n'était pas le seul problème - les concepts abstraits étaient souvent très difficiles à aborder. Ce public cible avait généralement besoin de discuter de concepts financiers à l'aide d'exemples concrets ; sinon, ils ne pouvaient pas vraiment suivre la conversation.

Afin de comprendre les concepts financiers, les participants au test de ce public devaient avoir l'impression qu'ils effectuaient réellement des transactions. Et pour comprendre le fonctionnement du produit, il fallait qu'il ressemble à une véritable application.

Oubliez les wireframes pour un public comme celui-ci ! Vous finirez par passer beaucoup de temps à expliquer ce qu'ils sont - et votre public ne se concentrera pas sur les tâches, ni sur ce qu'il en pense, car il ne peut pas s'identifier à l'utilisation de quelque chose de si peu familier dans sa vie.

Votre client a un temps et/ou un budget limité.

Il est rare d'avoir le temps, les ressources et le budget en votre faveur. Vous pouvez souvent vous retrouver à essayer de réduire la portée et le prix, ou à vous démener pour voir où vous pouvez lésiner et économiser tout en offrant un excellent service à votre client.

Si vous avez un client qui ne peut pas se permettre (ou qui n'est pas susceptible d'acheter) un bilan UX complet, puis-je suggérer de réduire le temps de wireframing ? Créez-en en interne si vous en avez besoin, mais faites avancer le projet pour votre client. Testez des conceptions réelles et tangibles et faites réagir votre client au travail réel.

Comment tuer la phase filaire

Cette partie est plutôt subjective, car elle dépendra de votre flux de travail personnel et des besoins spécifiques de votre client.

Cela étant dit, il s'agit d'un «modèle» de processus que vous pouvez d'abord essayer d'adapter à votre flux de travail, puis de le peaufiner au fur et à mesure que vous vous entraînez à travailler de cette façon.

Étape 1 : Commencez par votre processus habituel de recherche et de découverte.

Entretiens, observations sur le terrain, recherches documentaires, analyses de la concurrence - quoi que vous fassiez normalement (ou que vous ayez prévu de faire), complétez cette phase comme vous le feriez normalement.

Étape 2 : Dessinez un peu en cours de route.

Pendant que vous menez des recherches, vous obtenez probablement des idées de mises en page et de modèles utiles, de flux attrayants, etc. Enregistrez-les comme vous le faites habituellement. J'aime faire des croquis miniatures dans mon cahier, avec des notes écrites à côté. Vous préférerez peut-être dessiner sur un tableau blanc ou prendre des captures d'écran de modèles d'interface utilisateur intéressants. Tout ce qui vous aide à vous rappeler de bonnes idées, faites-le.

Étape 3 : Préparez votre document haute fidélité

Ouvrez l'outil de conception de votre choix et configurez votre document correctement. Choisissez des tailles de plan de travail et commencez à créer des formes, des groupes et des symboles reproductibles.

Prenez le temps d'enregistrer la palette de couleurs de la marque sous forme d'échantillons individuels, de créer et d'organiser des styles de texte et de créer des ombres portées et des filtres standard que vous pouvez appliquer à toutes les formes si nécessaire.

Passez beaucoup de temps à faire en sorte que vos symboles soient parfaits. Vous pourriez avoir un bouton qui, selon son état, pourrait avoir quatre couleurs différentes. Utilisez les remplacements de symboles, si vous le pouvez, afin de pouvoir facilement appliquer différentes couleurs et étiquettes de texte selon vos besoins.

Si des icônes personnalisées sont utilisées, enregistrez-les en tant que symboles individuels sur un plan de travail carré (ou quelle que soit la forme appropriée). De cette façon, il vous sera facile de les mettre à l'échelle tout en maintenant l'espacement et l'alignement appropriés.

Étape 4 : commencez à concevoir.

Votre premier tour peut être un peu difficile car vous vous habituez à travailler de cette façon et à voir où votre guide de style tient (et où il ne tient pas). En plus de créer des solutions pour les modèles qui n'ont pas encore de style défini, attendez-vous à faire un peu de peaufinage pour obtenir tous les styles.

Tout au long de ce processus, optez pour une bonne "direction de copie" ou avec une vraie copie si vous l'avez. Ne créez pas de titres qui disent : "Le titre de la page va ici". Donnez au spectateur une idée de ce qui irait ici si c'était réel.

De même, ne créez pas une liste de noms qui disent tous John Smith avec le numéro de téléphone 555-1212. Utilisez un générateur de liste aléatoire ou un plug-in pour créer différents noms et numéros, ou créez tout ensemble de données que vous devez afficher. Cela peut sembler exagéré, mais cela vous permet de résoudre les problèmes de mise en page et de largeur des caractères, et aide votre spectateur à comprendre que ces cinq entrées sont toutes différentes.

Étape 5 : Sachez quand arrêter la conception.

Il y a certains détails dont vous ne devriez pas vous occuper à ce stade car ils prendront vraiment trop de temps. Il s'agit peut-être de choisir l'image exacte pour entrer dans un héros ou de concevoir une icône personnalisée pour indiquer un état de téléchargement. Voici quelques cas où vous pouvez choisir d'utiliser une image ou une icône d'espace réservé et tester des images ou une iconographie réelles à une date ultérieure.

Vous devrez faire l'appel sur ce qui est approprié ici, car cela dépendra des objectifs du projet, ainsi que de l'état d'avancement de celui-ci.

Notez que cela peut dépendre de ce dont vos participants au test utilisateur ont besoin pour évaluer correctement le travail. Pour le public cible peu alphabétisé que j'ai mentionné ci-dessus, rien n'était trop détaillé. Pour chaque participant, j'ai fait une variante du prototype avec leur vrai nom et numéro de téléphone utilisé tout au long de sorte que l'application ait vraiment l'impression que c'était «la leur». Moins ils avaient à assumer, plus il leur était facile de suivre et meilleurs étaient mes résultats.

Étape 6 : Bénéficiez de commentaires et de résultats de test de haute qualité.

Publiez vos conceptions directement sur l'outil de prototypage de votre choix et apportez-les sur le terrain pour les tester. Vous pouvez désormais obtenir des commentaires sur plus que la fonctionnalité. Vous pouvez découvrir des problèmes visuels potentiels, tels que des problèmes de contraste de couleur ou de lisibilité, et vous pouvez découvrir des problèmes de sens de copie ou de traduction. Vous pouvez également démêler les sentiments positifs ou négatifs que les utilisateurs peuvent avoir à propos de l'apparence ou de l'image de marque.

Ce sont toutes des choses sur lesquelles vous alliez probablement obtenir des commentaires de toute façon lorsque vous êtes arrivé à la phase de conception visuelle. Pourquoi ne pas obtenir tous ces commentaires maintenant ? Certains des commentaires sur les visuels pourraient affecter directement l'UX, et vice versa, il est donc bon de travailler tout cela en même temps si vous le pouvez.

Emballer

Il existe sans doute de nombreux cas où une phase de wireframe complète est nécessaire à la réussite du projet. Une conception complexe, comme une application Web réactive, nécessite une attention particulière et dédiée aux structures filaires. Cela permettrait d'économiser du temps et de l'argent pour résoudre toutes les exigences commerciales, les cas extrêmes et la gestion des erreurs au stade filaire, que ce ne serait le cas si une couche visuelle complète avait déjà été conçue et appliquée.

Cependant, dans les bons cas, passer directement à la haute fidélité peut améliorer votre processus :

• Améliorer les commentaires des parties prenantes . Les clients, les développeurs, les autres concepteurs et les participants aux tests du public cible peuvent voir exactement ce qu'ils obtiendront, ce qui leur permet de donner des commentaires de meilleure qualité.
• Accélérez votre workflow de prototypage . Non seulement vos conceptions seront prêtes à être testées immédiatement, mais vous pourrez obtenir des commentaires sur un certain nombre de choses à la fois : l'UX, la copie et les visuels.
• Fournissez un document unique aux clients et aux développeurs . Éliminez le besoin de recouper et de vérifier une variété de documents pour comprendre comment un bouton devrait fonctionner. C'est également un excellent moyen pour votre client de discuter du travail avec ses parties prenantes internes afin d'obtenir encore plus de commentaires.
• Gagnez du temps et de l'argent . Et c'est presque toujours une bonne chose !

Essayez cette approche la prochaine fois que vous avez un projet où vous avez des matériaux de conception existants auxquels vous référer, ou où cela fera une grande différence pour votre public si le travail est en basse ou haute fidélité.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques