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, vous savez tous comment storyboard peut aider à définir les objectifs généraux d’une nouvelle idée et pourquoi c’est le point de départ 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 suivant dans ce processus de développement UX →. Lorsque vous avez une idée définie (et un storyboard pour vous aider à communiquer cette idée à toutes les personnes avec lesquelles vous travaillez), quelle est la prochaine chose que vous devez faire pour commencer à transformer cette idée en un véritable logiciel interactif ? La réponse à cette question est, vous l’aurez deviné, le wireframing.

Qu’est-ce que le wireframing ?

Si vous êtes développeur, vous avez 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 être très différents, selon leur niveau de fidélitéou à quel point ils sont « finis » et 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 évoluer à travers 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 également l’étape où l’on commence à vraiment réfléchir aux é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 parfaitement correct. 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 réalisé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 judicieux 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 à recevoir un retour indiquant que ce n’est pas la bonne direction et à tout jeter. Quel gâchis !

Wireframes moyenne fidélité

Les wireframes de fidélité moyenne sont les plus couramment utilisés car ils offrent l’équilibre parfait entre être suffisamment finis pour être montrés aux clients/parties prenantes tout en gardant les choses suffisamment simples pour ne pas nécessiter beaucoup de temps.

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 ou de polices d’espace réservé. Cependant, vous voudrez toujours garder les choses à un niveau assez élevé ici et éviter de vous laisser entraîner dans ces 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 que vous pouvez utiliser. Cela peut vraiment accélérer le processus (surtout si vous êtes limité par votre capacité de dessin actuelle), 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, cela prend un certain temps parcelle de temps à réaliser – c’est pourquoi nous ne voulons pas commencer à ce niveau de fidélité.

Alors, quoi fait justifier ce genre 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 présentons un wireframe haute fidélité à 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 à ce moment-là que la conception commence à être touchée par des personnes autres que vous-même, des personnes 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 vont fonctionner. 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.