Construire les gabarits des pages clés pour incarner les principes ergonomiques
Gabarit, Zoning, Wireframe, Mock-up, Prototype… différents termes sont employés pour désigner la représentation basique des pages clés d’une interface, chez Netemedia, nous parlons de gabarits ergonomiques.
La réalisation des gabarits ergonomiques intervient généralement une fois l’arborescence validée et avant l’étape des maquettes.
L’objectif principal lors de la réalisation d’un gabarit ergonomique est la mise en place d’un agencement idéal des fonctions au sein de chaque page, selon les attentes des internautes et des contenus.
Il n’y a pas d’intention graphique à ce stade, néanmoins, les gabarits ergonomiques permettent une bonne projection dans le futur site.
Les gabarits ergonomiques sont au cœur du processus de conception d’un site web ou d’une application, nous les réalisons en co-constructions avec l’équipe projet à l’occasion d’ateliers afin de déterminer ensemble la hiérarchie des éléments sur chaque page-clés.
Vous souhaitez réaliser des gabarits pour votre projet numérique ?
Quelles sont les étapes de la conception des gabarits ?
La réalisation des gabarits intervient au cours de la phase de conception. Une fois la structure du site et les fonctionnalités déterminées, il est possible de distinguer les pages clés des pages secondaires et le parcours que l’on souhaite proposer à l’internaute.
La conception des gabarits s’établie généralement au cours de plusieurs ateliers de co-construction. Nous travaillons sur la base d’un tableau blanc interactif qui facilite le travail collaboratif. C’est un outil qui permet de schématiser facilement les contenus des pages d’un site ou d’une application, et qui intègre des systèmes d’annotation et d’intégration de commentaires.
Ci-dessus : aperçu du tableau Miro à l’occasion de la refonte du site Netemedia
Durant les ateliers, nous appliquons notre expertise pour assurer le respect des grands principes ergonomiques, la prise en compte des parcours utilisateurs mais également pour informer sur les possibilités techniques.
Après les ateliers, nous retranscrivons les gabarits sur le logiciel Adobe XD. Nous produisons ainsi des documents mis en forme représentant les pages clés travaillées, au format desktop et/ou mobile, afin de disposer d’une version finalisée permettant de se projeter dans le projet.
Suivant le type de projet, nous pouvons réaliser des prototypes animés, sur la base des gabarits.
A l’aide d’Adobe XD, nous simulons les transitions entre les différents écrans pour permettre de naviguer aisément dans le prototype. Nous prévoyons un temps de formation pour permettre à l’équipe projet de manipuler le prototype aisément.
Ci-dessus : extrait des gabarits du site Netemedia sur Adobe XD
Ci-dessous : le résultat, des maquettes graphiques qui tiennent compte des recommandations ergonomiques
