Gabarits ergonomiques

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 ?

Des gabarits ergonomiques, à quoi ça sert ?

Voici 5 bonnes raisons qui pourront peut-être vous convaincre (si ce n’est pas déjà fait) d’adopter le principe des gabarits ergonomiques.

Les gabarits permettent de :

  • Vérifier que l’ergonomie de chaque page répond bien aux objectifs fixés.
  • S’assurer qu’aucune fonctionnalité ou information n’ont été oubliées
  • Donner un cadre clair au graphiste et lui permettre et de se concentrer uniquement sur son expertise.
  • Gagner du temps sur la phase des maquettes en évitant les allers-retours
  • Préparer le contenu éditorial et iconographique du futur site ou de l’application.

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 

 

Cas client de l'agence web

Refonte du site

Airwell

ACS - visuel illustrant la refonte du site

Refonte du site

ACS Assurances

dapibus commodo luctus Aliquam odio Sed