Dans un projet, lorsque le sujet de l’expérience utilisateur arrive sur la table, il y a de nombreux termes barbares qui sont lancés.

Parmi eux, on retrouve un trio gagnant bien souvent utilisés comme synonymes : wireframe, prototype, mockup.

Loin d’être identiques, ces étapes se complètent mais ne se ressemblent pas vraiment.

Je me souviens de certaines réunions où ces mots signifiaient plus ou moins la même chose. Surtout lorsqu’on mélange des compétences diverses : marketing, technique, ressources humaines, graphisme …

Au final, il ne s’agit que d’une représentation visuelle et non aboutie d’une idée, ça reste grisâtre, avec des boutons parfois grossiers, avec une impression de « pas fini ».

Et bien … pas vraiment !

Si on tente un parallèle, il suffit de comparer un plan d’architecte, une représentation 3D et une maison-témoin. Les trois permettent d’avoir en tête le futur d’un habitat. Ce sont des moyens d’exprimer nos souhaits d’aménagement de 4 murs et un toit. Pourtant, ils sont forts différents.

Un plan d’architecte vous permet de conceptualiser et de vous représenter les étapes de construction.

Une représentation en 3D permet de mieux prendre conscience du futur aménagement des volumes.

Une maison-témoin vous donne l’occasion de toucher et de vous balader dans un plan d’architecte.

Il s’agit de la même chose pour les wireframes, prototypes et mockups. Ils sont différents, communiquent différentes informations et ont des buts différents.

 

blog-wireframe

Wireframe

Il s’agit d’une représentation basse-fidélité d’un design. Son but est de mettre en avant quelques éléments précis concernant les informations affichées : quoi, où, comment.

  • Quoi : les contenus présents
  • Où : à quel endroit
  • Comment : les prémices de l’interface utilisateur

Les wireframes sont souvent composés de zones grisâtres, un peu comme un croquis rapide sur un carnet de notes. Il s’agit d’un squelette de ce que sera votre design.

Le temps accordé aux wireframes est destiné plus à la communication et la réflexion autour de l’idée qu’à la formalisation graphique de celle-ci. Servez-vous en lors de sessions de brainstorming par exemple.

 

blog-prototype

Prototype

Très souvent confondu avec le principe de wireframe, son rendu graphique est de qualité moyenne. Il sert à simuler les interactions de l’utilisateur : comment ça réagit, pourquoi.

  • Comment ça réagit : le contenu et les interactions au sein de l’interface
  • Pourquoi : la façon dont les utilisateurs vont s’approprier le produit

Il s’agit d’une simulation des interactions entre l’utilisateur et l’interface. Même si le design ne sera pas figé, il y ressemblera au moins dans les façons de présenter les contenus.

A la place des zones grisâtres du wireframe, des couleurs, boutons et fonctionnalités peuvent être misent en place (au menu : HTML, CSS, JS, …).

La ressemblance avec le produit fini doit être forte sans pour autant indiquer que la partie du design est finalisée. Similaire mais pas identique.

L’intérêt est de voir comment l’utilisateur s’approprie le produit. Un peu comme une documentation interactive du rendu final.

 

blog-prototype

Mockup

Il s’agit de la version la plus aboutie d’un projet. D’une haute qualité graphique (mais statique au niveau technique), un mockup bien fait permet de répondre à la problématique de la structuration des informations.

Tout en ayant un retour effectif et direct des utilisateurs sur l’aspect visuel du produit.

Autrement dit : de quelle façon, à quoi ça ressemblera.

  • De quelle façon : visualisation du contenu et démonstration des fonctionnalités basiques.
  • À quoi ça ressemblera : recueillir des retours d’expérience utilisateur sur le projet

Le mockup permet d’aller chercher l’information vitale, sous forme de feedback. Beaucoup plus rapide à mettre en place qu’un prototype (grâce à la partie hyper-visuelle de celui-ci) : il permet de donner vie à un projet en peu avec un peu de temps.

Son principal défaut est de proposer une expérience visuelle quasi-finalisée, pouvant bloquer l’imagination et les souhaits d’évolutions. A l’inverse du prototype qui est dynamique, le mockup est une version statique de la vision graphique d’un produit.

 

En bref

Wireframe :

  • Basse qualité
  • Peu coûteux à mettre en place
  • Représentation rapide d’une interface

Prototype :

  • Qualité moyenne (technique et graphique)
  • Très coûteux à mettre en place
  • Représentation interactive d’une interface

Mockup :

  • Haute qualité graphique, basse qualité technique
  • Moins onéreux qu’un prototype
  • Représentation graphique aboutie d’une interface