Cours intensif UX : Wireframing

Les wireframes sont parfaits pour nous obliger à réfléchir à la manière dont l’interface utilisateur répondra aux entrées de l’utilisateur et à capturer toutes ces informations !

Si vous lisez notre dernier volet de la série UX Crash Course, alors vous savez tous comment scénarimage peut aider à définir les objectifs généraux d’une nouvelle idée et pourquoi c’est l’endroit idéal pour commencer le processus de développement de fonctionnalités ou de produits.

Mais ce dont nous n’avons pas discuté, c’est de ce qui se passe ensuite dans cette UX → processus de développement. Lorsque vous avez une idée définie (et un storyboard pour vous aider à communiquer cette idée à tous ceux avec qui vous travaillez), quelle est la prochaine chose que vous devez faire pour commencer à transformer cette idée en un élément réel et interactif ? logiciel? La réponse à cette question est — vous l’aurez deviné — le wireframing.

Qu’est-ce que le Wireframing ?

Si vous êtes un développeur, vous avez presque certainement déjà vu un wireframe. Peut-être que quelqu’un vous en a montré un pendant le processus de conception pour obtenir vos commentaires – ou peut-être s’agit-il du livrable qui vous a été remis, comme référence pour la création du site Web ou de l’application.

Les wireframes peuvent avoir un aspect très différent, en fonction de leur niveau de fidélité ou de leur degré de finition. et ils sont détaillés. Les wireframes sont généralement classés en basse, moyenne ou haute fidélité ; un concepteur peut choisir de créer plusieurs wireframes de fidélités différentes à mesure que la conception et le concept évoluent, ou il peut simplement en créer un et aller de l’avant. Chaque type de fidélité répond à un objectif légèrement différent, mais leur mise en œuvre demande toujours du temps et des efforts. Vous constaterez peut-être qu’un wireframe de fidélité moyenne est suffisant pour une petite fonctionnalité, mais une conception de page complète peut passer par plusieurs fidélités de wireframing au fur et à mesure qu’elle est testée, révisée et itérée. La fidélité filaire est souvent choisie projet par projet, en fonction des besoins et des objectifs du concepteur.

Image de https://decode.agency/article/low-fidelity-vs-high-fidelity-wireframes/

Le wireframing est aussi l’étape où l’on commence à vraiment réfléchir les étapes intermédiaires de la conception. Que se passe-t-il lorsque quelqu’un clique sur ce bouton ? Comment cela apparaît-il à l’écran ? Y a-t-il des animations ou des transitions impliquées ? De bons wireframes incluront également des notes et des annotations, pour capturer autant de ces informations que possible.

Wireframes basse fidélité

Les wireframes basse fidélité sont très vagues et sommaires, et ne prennent pas la peine de définir des unités de mesure spécifiques (telles que les pixels) ou d’obtenir chaque mot de la copie correctement. Il s’agit davantage de définir une idée et de définir les éléments principaux : la fonction de la fonctionnalité/de la page, la mise en page générale, les principaux titres et le flux d’utilisateurs de haut niveau. Ils peuvent être réalisés sur papier ou sur ordinateur.

Les wireframes basse fidélité sont créés au tout début du processus de conception. Parce que nous savons qu’à ce stade, de nombreux changements et itérations seront encore à venir, il n’est pas sage d’investir beaucoup de temps et d’énergie dans des wireframes très détaillés. Vous pourriez passer des heures à choisir des polices, à définir des couleurs, à tout aligner sur une grille… puis recevez des commentaires selon lesquels ce n’est pas la bonne direction et devez tout jeter. Quel gâchis !

Wireframes moyenne-fidélité

Les wireframes moyenne-fidélité sont les plus couramment utilisés car ils trouvent l’équilibre parfait entre être suffisamment finis pour être montrés aux clients/parties prenantes tout en gardant les choses suffisamment simples pour qu’elles n’en aient pas besoin. une tonne de temps à faire.

C’est généralement là que les gens passent à l’ordinateur, même si vous pouvez le faire tout aussi efficacement sur papier si vous avez la main ferme. Les wireframes moyenne fidélité auront l’air plus propres et plus raffinés que les wireframes basse fidélité : plus de lignes sommaires ni de polices d’espace réservé. Cependant, vous souhaiterez toujours garder les choses à un niveau assez élevé ici et éviter de vous laisser entraîner dans les très petits détails dont nous avons parlé plus tôt : des choses comme les couleurs, les images ou le corps du texte, par exemple. Pensez à finaliser l’aménagement, la structure et les éléments de repère.

Si vous choisissez de passer à l’ordinateur à ce stade, vous constaterez que la plupart des logiciels de conception actuels proposent des boîtes à outils de wireframing, pleines de formes courantes (cartes, modaux, menus et plus), ainsi que des icônes. pour que vous puissiez en faire usage. Cela peut vraiment accélérer le processus (surtout si vous êtes limité par vos capacités de dessin actuelles), alors profitez-en.

Wireframes haute fidélité

Parfois appelés « maquettes » ; Les wireframes haute fidélité sont l’endroit où nous enfin arrivons à ces petits détails. Un wireframe haute fidélité semble souvent impossible à distinguer d’une capture d’écran. Comme vous pouvez l’imaginer, leur réalisation prend beaucoup de temps ; c’est pourquoi nous ne voulons pas commencer à ce niveau de fidélité.

Alors, qu’est-ce qui justifie ce type d’investissement en temps ? Pourquoi créer un wireframe haute fidélité, alors qu’une moyenne fidélité communique 80 % des mêmes informations ? Deux des exemples les plus courants sont 1) les tests utilisateur ou 2) l’obtention de l’approbation des clients/parties prenantes dans des situations à budget élevé ou à haut risque. Lorsque nous plaçons un wireframe haute fidélité devant un utilisateur, nous pouvons obtenir en grande partie les mêmes commentaires que nous pourrions obtenir lors des tests d’utilisabilité, avant que le produit n’existe réellement ! Et si vous travaillez sur un projet d’une importance cruciale ou à un budget extrêmement élevé, les parties prenantes nerveuses préféreront peut-être voir une vue très détaillée avant d’approuver le passage au développement.

Essayez-le !

Les wireframes sont parfaits pour nous obliger à réfléchir à la manière dont l’interface utilisateur répondra aux entrées de l’utilisateur – et à capturer toutes ces informations ! Il est important d’être aussi minutieux que possible, car c’est lorsque la conception commence à être touchée par des personnes autres que vous-même – des gens qui ne savent pas ce qui se passe dans votre tête ou quelles hypothèses vous avez faites sur la façon dont les choses se passeront. travail. Pensez au wireframing, comme écrire de la documentation ou commenter votre code ; tous ceux qui examinent vos wireframes doivent avoir une compréhension complète du fonctionnement de votre conception, même si vous n’êtes pas là pour le leur expliquer. À la fin de l’étape de wireframing, votre travail devrait être capable de se suffire à lui-même et de communiquer efficacement votre solution.