Les details des 4 etapes du maquettage User Experience

Différences entre le Zoning, le wirefarm, la maquette et le prototype

Le maquettage UX consiste à concevoir une interface digitale, soit d’un site web, d’un logiciel ou d’une application. Les personnes prenant en charge ce processus sont entres autres : le lead UX, l’UX designer, l’UI designer et l’UX researcher. Le maquettage UX est généralement constitué de quatre étapes bien distinctes, aboutissant à un même résultat : une interface digitale avec un design exceptionnel.

  • Le zoning
  • Le wireframe
  • La maquette
  • Le prototype

 

  • Le zoning

Le zoning est l’organisation visuelle d’une interface de page web. Il s’agit entre autre de procéder au découpage visuel de la page web en plusieurs zones. Il permet d’avoir un aperçu de la maquette web. Cette étape est considérée comme préparation aux éléments qui vont constituer l’interface utilisateur. Le zoning n’a besoin de techniques ni d’outils spécifiques. Il suffit de prendre une feuille de papier et un stylo, puis réaliser des formes géométriques. L’agence web avec laquelle vous travaillerez vous aidera durant le zoning à déterminer plusieurs points comme la place du logo, et les différents menus de votre page web.

  • Le wireframe

Le wireframe ou traduit en français maquette fonctionnelle, est un schéma utilisé dans la définition des zones et composants d’une interface digitale. Il est entre autre la suite logique du zoning qui consiste aussi à schématiser une interface digitale à partir de boites ou de blocs.  Parmi les zones et composants définis par le wireframe figurent les zones de textes, la place des images et des vidéos. Il s’agit tout simplement de la représentation la plus simple de l’interaction qui aura lieu entre l’utilisateur et le logiciel ou l’application ou le site web. Le wireframe sert de base pour rassembler les éléments utiles dans la création de l’interface.  L’outil le plus utilisé par les professionnels dans le wireframing est le papier. Le projet peut se dessiner sur papier, et peut également se faire à l’aide d’un logiciel ou d’outils wireframes.

  • La maquette

Comparée à la maquette fonctionnelle, la maquette tout court ou la maquette web est l’étape où vous pouvez visualiser à quoi va ressembler le projet en question. En d’autre terme, c’est une représentation graphique du wireframe. La création de la maquette est l’étape la plus importante du maquettage et où plusieurs décisions qui influenceront le résultat final seront prises. Des décisions généralement focalisées sur l’aspect graphique de l’interface. Les maquettes vont dans ce cas être constituées de contenu visuel et nécessitent l’utilisation d’outils spécifiques comme les logiciels Sketch ou le Mokflow. Elle ne peut se faire sur papier comme le wireframe.

  • Le prototype

Comme définition, dans le monde du web design, le prototype du maquettage est le premier exemplaire du projet d’interface digitale. Comparée aux deux autres précédentes étapes du maquettage UX ou maquettage User Expérience ou Utilisateur Experience, le prototype est cliquable. Les éléments qui contiennent l’interface utilisateur seront testés  par les designers. Ils pourront par la suite modifier ce qui ne s’ajuste pas aux besoins. La réalisation de prototype doit se faire obligatoirement à l’aide de logiciels de travail comme Invasion ou Mockplus.

Para ir más profundo