Mockup


Une maquette ou mockup est un design numérique d'un site web et/ou d'une application. Les mockups sont utilisés dès le début de la phase de conception pour visualiser des idées et des concepts dans le contexte du webdesign et comprennent la structure de navigation, le site et les éléments de design en détail. Les mockups peuvent être des modèles produits à l'aide de programmes d'édition d'images sans fonctionnalité ou des modèles créés à l'aide d'outils spéciaux de maquette et dont les éléments de commande sont déjà associés à des fonctions simples.

Comparaison : mockup, wireframe et prototype[modifier]

Les termes mockups, wireframe et prototype sont souvent considérés comme la même chose, mais il s'agit en fait de trois types différents de représentations dans le cadre du prototypage rapide. Ils sont utilisés à différentes étapes de la conception avant la programmation proprement dite.

Un wireframe est la forme la plus simple de modèle et ne comprend pas de couleurs, typographie, images ou graphiques, contrairement à un mockup. Cette première esquisse peut être réalisée à la main ou sur ordinateur. La fonctionnalité est complètement absente de cet écran. Par conséquent, les wireframes sont considérées comme des designs basse fidélité.

Les mockups peuvent s'appuyer sur la structure de n'importe quel wireframe existant et visent à le développer davantage. En intégrant la couleur, la typographie, les images et les graphiques, ils se rapprochent beaucoup du design final. Les mockups sont donc préférables à des fins de présentation.

Un mockup classique est statique. Cependant, les outils de mockup modernes permettent l'intégration de fonctions simples telles que les liens pour qu'en fonction de la complexité, ils puissent être classés comme des design de moyenne à haute-fidélité et frisent le prototype.

Des mockups complexes en plusieurs parties peuvent servir de base à des prototypes qui, selon leur style, peuvent également être considérés comme des modèles de moyenne à haute fidélité. Contrairement au mockup statique classique, les prototypes sont toujours interactifs et contiennent la plupart des fonctions du site web ou de l'application.

Utilisation et avantages des mockups[modifier]

Les mockups sont utilisées dans la première phase de développement de sites Web et d'applications pour la présentation et le contrôle de la qualité. Ils servent à coordonner les idées et les exigences de l'interface utilisateur avec le client pour les fonctions de base, la navigation, l'architecture du contenu et le design. Dans le cadre d’un appel à projet, on décide souvent qui obtient le contrat final en se basant sur le mockup.

Les mockups sont utilisées pour les tests d'utilisabilité sans qu'un gros effort de programmation soit nécessaire à l'avance. Tous les problèmes peuvent être ainsi détectés tôt, avant la création du prototype. Cela réduit aussi le risque qu'un concept doive être complètement révisé au milieu de la phase de développement. Dans l'ensemble, les mockups peuvent donc contribuer à des économies de temps et de coûts pour un projet en ligne.

Exemples[modifier]

Les logiciels d'édition et de présentation d'images faciles comme PowerPoint sont parfois utilisés pour les mockups, mais comparés aux outils alloués, ils requièrent beaucoup de temps. Des outils spécialisés fournissent des éléments préfabriqués et même la possibilité de tester des processus d'interaction simples. Sélection d’outils de mockups pour sites web :

Sélection d’outils de mockups pour applications :

Bénéfices pour l'utilisabilité[modifier]

Comme les mockups sont bien adaptées aux tests d'utilisabilité en raison de leur niveau de détail moyen à élevé, ils peuvent fournir des informations importantes sur l'expérience utilisateur et aider à optimiser la conception de l'expérience utilisateur à un stade précoce de la phase de conception, en particulier dans les domaines de l'esthétique et de la facilité d'utilisation.

Liens web[modifier]