définitions du marketing digital et relation client

Définition Mockup

Le mockup ou mock-up intervient à la fin de la phase de conception web. Il désigne une maquette d’une interface utilisateur.

 

Schéma zoning mockup marketing digital et relation client
Exemple de processus de conception web

Définition de mockup

Le mockup est une maquette graphique des différentes pages du site . Cette version détaillée et plutôt fidèle au résultat final permet aux différents acteurs du projet de valider l’apparence graphique avant d’entamer la phase de production.

 

Pourquoi utiliser un mockup?

Il est intéressant d’utiliser un mockup pour transformer une wireframe en page interactive.

En effet, il permet de montrer par exemple :

  • les différents types de navigation inter et intra-pages
  • le comportement des boutons call to action
  • l’affichage de messages d’erreur des formulaires
  • les sliders

En bref, le mockup permet de vérifier la cohérence du parcours de l’utilisateur et de scénariser ses interactions avec l’interface. C’est la dernière étape de cette phase de test il vaut mieux tester un maximum de principes de navigation ainsi que la plupart des fonctionnalités. Ces simulations vous permettront d’éviter les mauvaises surprises lors de la phase de production puis la mise en ligne.

 

Exemple de mockup
Exemple de mockup

 

Comment réaliser techniquement un mockup?

Ce wireframe interactif est au format html. Parmi les différents outils présentés dans l’article sur le wireframing, certains sont spécialisés comme Mockflow.  Nous l’avons vu précédemment, c’est une application accessible en ligne et facile d’utilisation avec un éditeur très complet. Vous pouvez aussi tout à fait utiliser des outils de conception graphique vectoriel plus classiques comme Inkscape.

 

Attention : à ne pas confondre avec wireframe, zoning ou prototype ! Le mock-up est la version la plus évoluée du travail du webdesigner.

Le nom mockup est aussi utiliser pour décrire certaines mises en situation type du produit.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *