• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 05/09/2017

Visualisez votre projet avec cinématiques, zonings et maquettes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Encore une fois, un schéma vaut mieux qu’un long discours. Toutes les personnes qui vont consulter votre document doivent avoir une vision claire des différentes étapes et des éventuelles différences de comportement des pages en fonction de telle ou telle action.

Je regroupe en 3 familles les types de schémas que l’on peut reprendre dans un cahier des charges :

  • Les cinématiques : ce sont des schémas qui vont présenter les parcours des utilisateurs entre les différentes pages (ex. dispositif d’inscription à l’espace perso).

  • Les zonings et wireframe : ce sont des schémas avec différents niveaux de détail de ce que comportera la page au final.

  • Les maquettes : ce sont les images précises des futures pages du site, qui sont réalisées par le directeur artistique en charge du design.

Cinématiques

L’objectif de chaque schéma est d’expliquer les actions de l’internaute et les contraintes de l’application.

Ce qui est intéressant, c’est de montrer la réalité des comportements utilisateur : il n’y a pas qu’un seul parcours mais de très nombreuses variantes. Pour présenter votre schéma, commencez par le parcours le plus simple, puis intégrez au fur et à mesure les différentes bifurcations et illustrez les impacts.

Ex. Dans la page "Panier", est-ce que l’internaute a mis des produits ? Si oui alors je lui propose de commencer immédiatement son check out, si non alors je lui propose des produits pour lui donner envie d’acheter et le faire retourner dans le catalogue produit.

Quand vous faites un schéma, il est important de mettre en place une logique de lecture pérenne. Soyez cohérent dans votre utilisation des couleurs et des formes. Éventuellement, rajoutez une légende. Voici les formes que j’utilise le plus souvent :

Exemple de pictogrammes utiles dans les cinématiques
Exemple de pictogrammes utiles dans les cinématiques

 

Et voici un exemple de schéma pour un tunnel d’achat :

Exemple de parcours utilisateur pour un tunnel d'achat
Exemple de parcours utilisateur pour un tunnel d'achat

 Quels sont les outils pour faire des schémas ?

  • Pour les puristes, il existe des outils comme Microsoft Visio sur PC ou Omnigraffle sur MacOS qui sont très complets et précis, en revanche les licences demandent un petit investissement.

  • LibreOffice, Microsoft Power Point ou Apple Keynote permettent de faire 99% des schémas dont vous allez avoir besoin.

Zonings, wireframes et maquettes

Quelles sont les différences entre un zoning, un wireframe et une maquette ?

  • Un zoning est une schématisation grossière de la page présentant les éléments ou blocs devant figurer dans la page. On n’entre pas forcément dans les détails de chaque type de contenu

  • Un wireframe est une représentation fonctionnelle avancée : 

    • Tous les types de blocs de contenus ont été illustrés après un travail de réflexion.

    • Un wireframe permet de servir de POC (Proof Of Concept) pour montrer que les choix ergonomiques et que la structure du projet est viable avant de passer en phase de maquettage.

  • Une maquette est réalisée par un directeur artistique ou infographiste une fois que le wireframe a été validé et représente le rendu graphique attendu de la fonctionnalité (avec les choix de mise en page, couleurs, typos, etc.).

Voici un exemple des différences entre un zoning et un wireframe :

Zoning à gauche, wireframe à droite
Zoning à gauche, wireframe à droite

 La réalisation des zonings puis des wireframes permettent d’avancer dans la réflexion ergonomique et fonctionnelle avant de passer à l’étape de création graphique. Vous connaissez les contenus que vous avez à votre disposition et vous commencez à les placer ensemble. Pour chaque bloc, imaginez les variantes possibles de contenus (ex. si l’internaute n’a pas encore renseigné son pays de résidence, on n’affiche pas encore le prix de la livraison) et en fonction des devices (desktops, tablettes, mobiles).

Ces éléments permettent ensuite au directeur artistique travaillant sur la maquette du site de se concentrer sur la mise en page et le stylisme des pages.

Les outils pour faire des wireframes ou des zonings 

  • Microsoft Power Point et Apple Keynote sont très bien pour commencer.

  • Il y a ensuite d’autres outils tels que Balsamiq et Axure qui sont des références. Vous pouvez utiliser une version d’essai gratuite sur une période limitée pour ces deux outils.

  • Enfin vous trouverez sur Internet de multiples outils comme Wireframe, Cacoo ou encore Mockflow‌, qui proposent des options plus ou moins avancées et dont les versions gratuites peuvent suffire pour les usages simples

Dans la dernière partie du cours, nous allons nous orienter sur la partie technique du cahier des charges.

 

Exemple de certificat de réussite
Exemple de certificat de réussite