Introduction Dans un système interactif on retrouve 2 composantes principales les noyaux fonctionnelle et l’interface homme-machine, cette dernière permet de lier l’utilisateur et la machine en autorisant l’utilisateur de contrôler, de commander et de superviser le système interactif. Pour la conception, L’implémentation et l’évaluation ces systèmes, l’interaction homme-machine a été créer. Mais parmi les problèmes rencontrer au IHM c’est le manque d’ergonomie et d’expérience utilisateurs des interfaces qui est principalement causé par les informaticiens prenant ces notions comme une affaire d’intuition et de bon sens, et donc pour remédier a ce problème plusieurs métiers sont apparue comme le UX et le UI designer pratiquant la méthode du maquettage et du prototypage permettant de se rapprocher du désir de l’utilisateurs. Qu’est ce donc le maquettage et le prototypage et quel est son rôle dans les IMS ? I. Le maquettage et le prototypage Pour mieux comprendre le rôle du maquettage et du prototypage il faut d’abord Comprendre c’est quoi une ergonomie d’interface. Définition de l’ergonomie dans les interfaces homme-machine IHM : L’ergonomie est une discipline visant a créé des interfaces homme-machine amélioré, facile à utiliser et adaptées à l’utilisateur final et permet de rendre l’interface plus satisfaisante et plus efficiente. Et donc pour créé une bonne ergonomie d’interface il faut qu’elle soit adapté à l’utilisateur, c’est là que le ux et le ui interviennent. Définition de l’ux et de l’ui : -ux : Pour user expérience (expérience utilisateurs) se réfère à l’étude des attentes, des besoins et l’analyse du ressenti de l’utilisateur pour la création d’une interface. -ui : Pour user interface (interface utilisateurs) se focalisant plutôt sur l’aspect graphique et esthétique de l’interface dans lequel évolue l'utilisateur. C’est l’équipe UX et UI qui se charge du processus du maquettage et du prototypage d’une interface. Définition du maquettage et prototypage : Le maquettage et le prototypage consiste à stimuler une interface graphique de façon complète ou partielle, afin d’obtenir des informations sur l’interaction des utilisateurs avec le futur produit ça permet de modéliser, de tester et de lui donner la vie en passant de l’idée au concret, Il existe plusieurs objectifs au prototypage. Quels sont les objectifs du maquettage et du prototypage ? Les objectifs du maquettage et prototypage 1. 2. 3. 4. 5. détecter les problèmes et de vérifier les besoins des utilisateurs avant l’étape du développement si le prototypage est fait tôt. Economiser du temps et de l’argent. Simplifier la communication avec des supports visuels <<showing is better than telling>> Stimuler la production d’idées Permettre aux utilisateurs cibles de visualiser et de tester l’interface avant le développement de celle-ci. La création d’une interface graphique se fait par étapes, ces étapes sont appeler cycle de vie du développement, pour connaitre l’importance du prototypage il est nécessaire de savoirs dans les quels de ces étapes il intervient. Phase d’intervention Le prototypage peut être employé tout au long du cycle de développement Conception Implémentation Evaluation Le degré de précision du prototype est déterminé par le stade du cycle de développement du projet où il est utilisé, Il est cependant recommandé d’y recourir le plus en amont possible avant la phase de dévlopement. Il joue notamment un rôle principale dans un cycle de conception itérative centrée utilisateurs et la prise en compte des usages où plusieurs prototype sont amélioré et affiner jusqu’à l’obtention d’un prototype avec une qualité ergonomique et expériences utilisateurs convenant a l’utilisateur. Types de prototypage Le maquettage et le prototypage nous permettent de réalisé différent types de maquette / prototype pour l’interface, elles sont classer par 4 critères : 1. L’interactivité : Nielsen fait la distinction entre deux approches du prototypage dans le développement de logiciels en fonction du niveau d'interactivité offert par le prototype : 1) Prototypages horizontale : Correspond à la partie graphique de l’interface, c’est des maquettes statique qui ne se base pas sur l’interaction, elle permet l’agencement général des éléments de l’interface. 2) Prototypage vertical : met en place certaine fonctionnalité de l’interface le rendant interactif avec l’utilisateur permettant à l’utilisateur de dérouler un scénario d’utilisation typique. 2. La pérennité : 1) Le prototypage jetable : aussi appeler prototypage rapide est utilisé pour tester certains aspects de l’application, son but de récupération pour l’application finale. 2) Le prototypage itératif :se base sur le développement de plusieurs versions successives d’une interface (prototype) qui serviront de base à l’application finale. 3) Le prototypage incrémental : consiste à deviser l’interface en plusieurs partie (modules), chaque partie aura son propre prototype, tout les prototypes vont être fusionner a la fin pour créé un seul prototype qui sera l’interface final. 3. Le degré de fidélité : 1) Prototypage basse fidélité : C’est une maquette qui est réalisé à la main (papier/crayon) ou grâce à des outils numériques. Il facilite l’implication et la concentration de l’utilisateur sur les aspects fonctionnels de l’interface, évitant les dérives de jugements sur les aspects esthétiques. Au cas où l’interactivité est mise en place ça devient un prototype de basse fidélité qui permet des interactions simplistes avec l’utilisateur, ce type de prototype est essentiellement des maquettes basse fidélité liés les une aux autres. Avantage : Rapide et pas cher. Facile à modifier et à tester de nouvelles itérations, Présentation rapide du produit. N'importe qui peut les produire. Inconvénient : Un manque de réalisme inhérent. Le manque d'interaction Peut trop simplifier un problème complexe 2) Prototypage haute fidélité : Il s’agit d’une maquette de haute fidélité qui tente de se rapprocher le plus possible du produit final en terme de graphisme et de fonctionnalité, il offre ainsi à l’utilisateur une représentation réaliste de l’interface et comprend la plupart du contenu qui apparaîtra dans le design finale. Au cas où l’interactivité est mise en place ça devient un prototype de haute fidélité qui en plus de l’aspect désigne, il permet de recueillir des données précises sur les fonctionnalités que l’on veut tester avec des interactions réalistes. Avantages : Permet de valider les « petits détails » d’ordre graphique (design) Les tests fourniront des résultats plus précis et plus applicables Permets de fournir une expérience à l’utilisateur similaire à l’interface finale. Inconvénients : Plus cher à fabriquer Prend plus de temps. Les utilisateurs sont plus susceptibles de commenter des détails superficiels que du contenu. 4. Le support : 1) Prototypage papier : Dans ce cas-là, le prototype est réalisé à la main à l’aide des crayons ou n’importe quels outils de dessins. 2) Prototypage numérique : prototype qui est présenté sur un écran, sous forme interactive ou statique. De nos jours, la variété de logiciels spécialisés permet aux concepteurs de créer des prototypes visuellement riches et puissants, remplis d'effets interactifs et d'animations complexes il en existe 2 types : Les logiciels générales : ils sont des logiciels de design multifonctions permettant de créer des maquettes et des prototypes dynamique et statique de haute et de basse fidélité tel que figma, adobe xd, invsion ou morkflow. Les logiciels spécifiques : tel que balsamique studio qui permet que de créer que des prototypes et maquettes de basse fidélité. Les IDE sont aussi utilisés pour les prototypes qui sont codées avec un langage de programmation comme le css, swift ux etc…. 3) Prototypage vidéo : C’est un prototype réalisé en filmant et en montant une vidéo sur le fonctionnement de l’interface souvent matérialisée par des maquettes papier ,il ne permet pas à l’utilisateur d’avoir de l’interactivité avec l’interface mais il lui permet d’avoir une meilleure représentation du fonctionnement de l’interface II. ETAPES DU PROTOTYPAGE MAQUETTAGE ET Le prototypage englobe 4 étapes classés par rapport à leurs fidélités visuelles: le prototype haute fidélité statistique(zoning et le wireframe), le prototype basse fidélité dynamique, le prototype haute fidélité statique(le mockup) et le prototype haute fidélité dynamique ces étapes ont chacune des rôles différents qui permettront la création d’une interface ergonomique et graphiquement plaisante. On peut être tenté de se lancer directement dans un prototype haute fidélité dynamique, sans passer par l'étape du zoning ou wireframe sur papier. Pourtant, si ce premier prototype ne convient pas, le temps et l'argent investi dans ce processus n’ont servis à rien ce qui fait de lui une mécanique lourde et coûteuse. C'est la raison pour laquelle on suit souvent cet ordre logique : 1. le prototype haute fidélité statistique : 1.1. zoning :C’est une étape importante qui appartient au prototypage horizontale qui consiste à schématiser de façon grossière en découpant à l’aide de blocs permettant de représenter la différente zone et identifier les éléments principaux de l’interface. 1.2. Le wireframe (basse fidélité): En français "maquette fil de fer” ou « maquette fonctionnelle », est une maquette de basse fidélité appartenant au prototypage horizontal, il est l’évolution du zoning, c’est une sorte de croquis qui permettra de voir a quoi ressemblera la prochaine interface en indiquant le contenu présent dans chaque bloc avec des annotations et des formes géométriques sans s’appuies sur l’aspect désigne, cela permettra d’élaborer rapidement et concrètement l’agencement de l’information et les fonctionnalités de l’interface. 2. Prototype (basse fidélité) : C’est une sorte de wireframe cliquable qui appartient au prototypage vertical (dynamique). Les wireframes peuvent être utilisés comme base pour les prototypes de basse fidélité c’est la forme la plus simple des prototypes interactifs - créé en reliant des wireframes statiques ensemble permettant la navigation entre eux. 3. Mockup (haute fidélité) : En français « maquette» est une maquette de haute fidélité appartenant au prototypage horizontale (statique), se basant sur le wireframe, elle ajoute l’aspect esthétique à ce dernier en mettant en valeurs le désigne ajoutant alors des photos, des couleurs, une typographie etc… ce qui permettra de savoir a quoi ressemblera l’interface final. 4. Prototype (haute fidélité) : Est la dernière étape du prototypage, il appartient au prototypage vertical (prototype dynamique) il est très similaire a l’interface final, il va permettre de tester de manière approfondie l'expérience des utilisateurs par exemple en ajoutant des bases de données et des animation et de récolter des retours qui vont pouvoir servir au développement final. Il y’en a 2 type : le prototype en utilisant des outils de prototypage sont la forme la plus courante de prototypage hi-fi. Ne nécessite pas des connaissances en code. le prototype codé Ce type de prototypage qui est recommandé pour les concepteurs qui ont confiance en leurs compétences en codage il permet la réutilisation du code du prototype et de l’implémenter dans la version finale de l’interface. ETUDE DE CAS :
