La relation entre le wireframe UX et la recherche UX

Lorsque nous pensons à la conception d'un site web, la première chose à laquelle la plupart d'entre nous pensent est la marque et le style de la marque, les couleurs et les caractéristiques que l'interface utilisateur affiche dès le chargement de la page, et l'attrait qu'elle exerce pour nous propulser tout au long de notre voyage afin d'obtenir ce que nous attendons d'elle.

Avant que cette page d'images frappantes, de textes intelligemment rédigés et de cloches et de sifflets ne devienne une page de code vivante, il existe de nombreuses autres procédures et pratiques nécessaires pour amener chaque équipe à un stade où l'image de marque, la conception visuelle et la livraison peuvent être mises en place.

Chaque phase de conception commence par une réflexion sur ce que les parties prenantes attendent de leurs visiteurs et sur ce que ces derniers attendent des parties prenantes. Les discussions, basées sur les besoins des utilisateurs et des entreprises, qui conduisent à la réalisation de chaque objectif, sont facilitées en cours de route par des recherches approfondies, des idées, des présentations et des prototypes.

L'UX (expérience utilisateur) est l'interaction et la transaction agréables de l'utilisateur au sein du processus de votre site web. L'objectif est de fournir une expérience utilisateur qui les encourage à terminer, à revenir et à recommander rapidement, efficacement et sans effort.

Les wireframes sont un outil précieux utilisé lors de la première étape et des discussions ultérieures de chaque parcours de conception.

Qu'est-ce qu'un wireframe ?

Une conception web filaire est la représentation la plus simple de votre site web, généralement au cours des premières étapes.

La création de wireframes d'applications ou de sites web nous aide à imaginer comment le parcours du client se présente et se ressent pour l'utilisateur, à décider quels éléments sont importants, où ils doivent se situer sur la page, et comment conduire l'utilisateur à l'étape suivante pour atteindre son objectif.

Un wireframe guide la communication, l'organisation et le flux de travail. Il permet aux concepteurs et aux les chercheurs se sont concentrés sur le conceptIls constituent une partie essentielle du processus de conception de l'interaction et offrent un moyen rapide et facile de fournir ou d'appliquer des modifications au flux de travail.

À tous les stades où la conception, la recherche et le flux de travail se rejoignent, l'efficacité est primordiale pour respecter les délais et les échéances. Vous avez donc besoin d'un outil capable de recadrer les idées issues de vos dernières délibérations, sans qu'il soit nécessaire de faire appel à un concepteur ou à une équipe de présentation pour avancer en quelques étapes simples.

Dans leur forme la plus simple, les concepteurs UX commencent par esquisser des wireframes sur papier. Pourquoi attendre des jours ou des semaines quand un stylo et du papier peuvent faire le même travail en quelques coups de pinceau ? Ils peuvent être présentés à n'importe quel stade pour obtenir l'avis des utilisateurs ou l'approbation du client - des prototypes papier de base aux wireframes haute-fidélité - et, d'un point de vue pratique, faire avancer le projet rapidement et efficacement.

Les trois niveaux de conception des wireframes UX

Modèles filaires de basse fidélité

En fonction de l'état d'avancement du processus et des recherches que vous avez déjà effectuées, la conception web filaire peut être aussi simple et grossière que des esquisses. Il s'agit de les maquettes fil de fer à basse fidélité. Les wireframes au stylo et au papier clarifient le flux d'un produit ou d'un processus sans complications inutiles. Elles montrent comment la structure d'une page et ses éléments d'interface fonctionnent de la manière la plus simple possible.

Modèles de fil de fer à mi-fidélité

Au fur et à mesure de l'avancement du processus, vos wireframes de basse fidélité évolueront vers des options de wireframes numériques plus organisées (et plus courantes), présentées de manière professionnelle ? connues sous le nom de les wireframes mid-fidelity ? en utilisant des logiciels qui offrent des mises en page et des flux de travail plus intelligents et encore plus faciles à imaginer.

Pour les premières réunions, un stylo et du papier suffisent généralement à lancer le processus, mais ces premières options seront finalement remplacées par des wireframes numériques. De nombreux outils de wireframing destinés aux concepteurs UX fournissent le type de modèle requis à ce stade du processus de développement.

Les wireframes de moyenne fidélité introduisent de nouveaux détails - l'espacement, par exemple, ou des suggestions de proportions et de positions des composants de l'interface utilisateur - qui vous permettent de créer des wireframes d'une qualité appropriée pour les communications avec les parties prenantes et les clients.

Images filaires haute-fidélité

En haut de la pile, les wireframes présentent des mises en page parfaites au pixel près (des maquettes haute-fidélité) avec des pages présentées de manière professionnelle, à quelques pas seulement de votre prochaine étape. versions prototypes. L'élaboration de wireframes haute fidélité nécessite l'utilisation d'outils de conception UX spécialisés, permettant l'introduction de l'interactivité, de plus de détails visuels et d'une option plus facile à comprendre couvrant certaines des implications techniques qu'une page statique ou des wireframes sur papier ne peuvent pas prendre en compte.

Le passage d'une image filaire statique à une version numérique est l'occasion idéale de procéder à un prototypage rapide et à des tests d'utilisation à un stade précoce.

Avec des recherches supplémentaires, une réflexion plus approfondie et des délibérations, quelque chose de plus organisé peut aider chaque équipe à examiner les éléments qui fonctionnent et ceux qui ne fonctionnent pas et à fournir un plan plus structuré et de meilleure qualité sur la façon de procéder.

Un wireframe haute-fidélité fournit une version précise et pleine d'espoir que les concepteurs, les cobayes et les parties prenantes peuvent peaufiner avant de passer à l'étape suivante. Ce sont les wireframes qui permettent à tout le monde de rester sur la même longueur d'onde... ce sont les plans qui serviront à construire les étapes suivantes du processus. En tant que telles, ces pages statiques constituent souvent un bon point de départ pour envisager d'introduire la phase de conception de l'interface utilisateur et des prototypes plus détaillés.

Pourquoi utiliser un wireframe et le processus de wireframing ?

Un wireframe aide les concepteurs UX à décider du contenu, des informations et des fonctionnalités dont chaque plateforme a besoin, de la manière dont elle pourrait et devrait être structurée, de la façon dont la hiérarchie fonctionne et de ce que cela signifie pour le comportement et les attentes des utilisateurs.

Votre plateforme répondra-t-elle aux besoins de vos utilisateurs ? La création de wireframes devrait pouvoir offrir les avantages suivants :

Créer, modifier, supprimer ou retravailler rapidement et facilement
Aide les équipes, les parties prenantes et les opérateurs impliqués dans le processus de conception à comprendre chaque opportunité, à rester concentrés et à rester sur la même longueur d'onde.
Définir et présenter les caractéristiques et les opérations sans utiliser de descriptions compliquées ou de jargon de conception.
Tests manuels à un stade précoce sans opter pour des options gourmandes en temps et en expertise technique
Les parties prenantes peuvent déterminer si le produit ou la plateforme répond à leurs besoins.
Pour déterminer le flux logique entre les pages, les écrans et les actions
Détecter les lacunes et comprendre le parcours du client

Les wireframes UX ? la discussion commence ici

Où, comment et pourquoi ? Ce sont les questions que vous devez poser pour chaque élément de votre site.

Vos réponses définissent l'UX et l'UI de votre site web, de votre application ou d'autres plateformes numériques. Chaque wireframe UX ou UI vous aide, ainsi que vos utilisateurs et vos partenaires, à avoir une vision d'ensemble plus claire dans le cadre d'une structure définie.

Les inconvénients des tests filaires

Ils sont statiques et ne constituent donc pas la meilleure méthode de test selon les normes actuelles. Ils sont utiles pour les débats et les discussions, mais ne sont pas très utiles pour révéler les réactions réelles et les révélations des utilisateurs.
C'est une mauvaise option pour présenter le pouvoir de l'animation, des transitions et des effets sur l'attention et la réaction de l'utilisateur. Il n'y a pas la même facilité à prendre en compte l'émotion de l'utilisateur sur l'imagerie que les autres outils de recherche en conception révèlent.
Les wireframes requièrent de l'imagination. Les concepteurs UX l'ont en abondance, mais vous ne pouvez pas garantir que vos clients et les utilisateurs tests auront la même profondeur de vue.
Il faut du temps pour créer des livraisons compréhensibles par tous. Obtenir chaque partie sur la même longueur d'onde, il faudra peut-être plusieurs rounds pour les convaincre. Une technologie ou des pratiques supérieures pourraient les amener plus rapidement au but.

Comment créer des wireframes

Restez simple.
Abandonnez toutes les couleurs, elles ne font que vous distraire... contentez-vous du noir, du blanc et du gris.
N'utilisez pas de photographies, de polices décoratives ou de marques (tout cela vient bien plus tard).
Utilisez les symboles les plus simples, les espaces réservés et les représentations des éléments que nous avons l'habitude de voir sur des pages similaires.

Lorsque vous commencez à créer vos propres wireframes, vous devez être en mesure d'effeuiller, de gribouiller et de reproduire chaque élément à chaque nouvelle suggestion, alternative ou révision demandée. Après tout, le processus est conçu pour répondre rapidement et facilement aux éventualités et aux opportunités.

Ne soyez pas précieux avec vos wireframes. Leur rôle est d'être supprimés et facilement remplacés. C'est pourquoi nous les gardons simples et apprenons à créer des wireframes rapides à la volée. Si une solution ne fonctionne pas, abandonnez-la et préparez la suivante.

Les wireframes sont une question de retour d'information. Ce qui fonctionne, ce qui ne fonctionne pas et ce qui pourrait décupler l'efficacité de votre visiteur, en lui permettant d'atteindre ses objectifs plus rapidement et d'être plus heureux tout au long de son parcours.

Qu'est-ce qui est préférable : s'en tenir à de simples croquis ou utiliser des outils professionnels de wireframe ?

L'un ou l'autre et les deux. Cela dépend de votre système, de l'état d'avancement du processus et des moyens dont vous disposez.

Des équipes différentes auront des processus différents avec des plans et des compétences différents ; nous devrions tous jouer sur nos points forts, alors attendez de vos concepteurs qu'ils s'alignent sur les leurs. Il s'agit de faire le travail de la meilleure façon possible, aussi simplement et directement que possible. La plupart des concepteurs commencent simplement (avec les maquettes les plus simples sur papier), puis augmentent la fidélité au fur et à mesure que les éléments et les processus deviennent plus concrets.

La recherche UX rencontre le wireframe UX

Lors de la refonte d'une plateforme obsolète ou défaillante, ou lors de la création d'une nouvelle plateforme, votre étude UX définit les données et les motivations de vos utilisateurs.

Chaque opportunité de wireframe aide à découvrir des options de flux de travail alternatives et préférables. Au cours de l'étape suivante, le prototypage révèle ce que ressentent les utilisateurs et, enfin, tout s'assemble à l'étape de la conception, montrant comment le produit fini devrait fonctionner.

Où appliquer la recherche sur les utilisateurs ?

En ce qui concerne la recherche et les wireframes, les mêmes étapes fondamentales sont aussi nécessaires que si l'on partait d'un projet de page blanche. La différence est que nous appliquons nos données de recherche à.. :

Organiser le flux de travail
Évaluer la séquence
Attribuer une fonctionnalité
Fournir une mise en page idéale pour une expérience optimale de l'utilisateur

L'utilisation d'une recherche définie au cours de ces premières étapes permet d'établir une base solide sur laquelle on peut s'appuyer, en apportant une précision par rapport aux hypothèses à l'ensemble du flux de travail et à toutes les sections plus petites.

Les entretiens, les groupes de discussion, les enquêtes et les études peuvent fournir des données instrumentales et des données sur le déroulement du travail au début de chaque projet.

Que nous apprennent ces recherches ?

L'étude UX révèle les objectifs de chaque application, les éventuels points douloureux, les comportements typiques, les besoins et les désirs. L'examen des concurrents existants ou des flux de travail antérieurs permet de mettre en évidence les principaux défis et succès des opérations passées et d'engager des discussions sur la manière d'améliorer les choses.

La cartographie des flux de travail et des séquences dans les wireframes fournit un parcours visuel qui est beaucoup plus facile à comprendre et définit également le nombre d'étapes nécessaires pour atteindre un objectif donné.

Comment appliquer ces résultats ?

La fonctionnalité accrue de chaque système amélioré doit inclure tous les éléments utiles et les parties inutiles doivent être supprimées. En examinant le flux de travail, les besoins et les réactions des utilisateurs, nous pouvons livrer chaque nouvelle présentation avec une expérience utilisateur améliorée.

Les outils de prototypage vont-ils remplacer les wireframes UX et UI dans la recherche UX ?

Chaque wireframe est un squelette de votre conception UX à ce stade. Son objectif est de fournir une vue que tout le monde peut comprendre, de voir où en est le processus et de discuter de ce qu'il pourrait devenir.

Au fur et à mesure que notre technologie devient plus innovante et intuitive, chaque outil que nous utilisons pour présenter le flux de travail et conduire la discussion devient plus facile à utiliser. Ils offrent de bien meilleurs croisements et options pour les chercheurs UX dans leurs parcours de conception et de recherche.

Les outils de prototypage remplacent de plus en plus le wireframing dans la recherche UX, car le prototypage offre beaucoup plus de possibilités de test, de retour d'information et d'utilisabilité. Ils offrent également de bien meilleures possibilités de tester physiquement les flux et les processus dans des arènes numériques en temps réel.

Pour fournir des données exploitables, il faut plus que des croquis et un dialogue introductif.

Dans le domaine de la recherche, nous nous efforçons d'obtenir les données nécessaires à la prise de décision - pour l'approbation de l'utilisateur et du client. Les options de prototypes haute-fidélité fournissent bien plus de ce dont nous avons besoin que la plupart des conversations sur les premières étapes de l'élaboration d'un fil de fer.

Les outils numériques étant de plus en plus simples à utiliser, il est apparemment facile de passer au prototypage plutôt qu'au papier et au stylo ou même à un logiciel de wireframe personnalisé. S'ils fournissent des résultats de meilleure qualité, rendant le processus un peu plus transparent, plus simple et plus rapide - en particulier entre les mains des chercheurs UX - pourquoi ne seraient-ils pas les outils à utiliser et sur lesquels s'appuyer à l'avenir ?

Si vous souhaitez en savoir plus sur le wireframing et sur la manière de mener des études UX à l'aide de wireframes, envoyez-nous un courriel à l'adresse suivante hello@ux247.com.