Concevoir des zonings

par Julien

Photo source par Pexels

Les zonings ont différentes appellations. Vous avez peut-être entendu parler de squelettes, d’esquisses, de maquettes, de layouts ou encore de wireframes.

Ils servent à représenter une version simplifiée d’une interface. Cela a l’énorme avantage d’être faisable, compréhensible et utilisable par tout acteur d’un projet, peu importe l’expertise.

Très flexibles, ils peuvent être établis rapidement dès qu’un besoin de clarifier les choses se fait sentir. Mais cette extrême flexibilité fait qu’on ne peut pas vraiment établir de règles pour les concevoir.

Objectif & Enjeux

Comme on l’a introduit précédemment, les zonings sont des documents servant à représenter une interface d’un projet. On peut établir ces documents à n’importe quel moment, pour n’importe quelle situation.

On s’en sert pour préparer le terrain à la conception de maquettes. Comme ils sont bien plus rapides à réaliser, on peut les concevoir en réunion et puis donner le feu vert à la direction artistique pour réaliser des maquettes respectant l’agencement prévu par les zonings.

Zoning de notre landing page
Maquette réalisée

Ils peuvent toutefois remplacer les maquettes. La réalité fait qu’il est déjà difficile d’avoir un graphiste pour réaliser une maquette, alors vous imaginez si on devait faire une maquette pour chaque interface ?

Les zonings permettent de réduire la quantité de graphisme à produire. Même s’il est plus agréable de travailler avec des maquettes, on peut se contenter d’une charte graphique qui contient tous les blocs designés, et du zoning nous indiquant comment les agencer.

En fonction de votre projet, vous aurez différentes versions d’un même zoning à établir :

  • Un site web va nécessiter un agencement PC et/ou Tablette et/ou Mobile
  • Une application mobile va nécessiter un agencement Tablette et/ou mobile

On précise et/ou car un site web n’est pas obligatoirement responsive si son objectif n’est de tourner que sur un type spécifique de support.

Toutefois, depuis quelques années, nous utilisons des systèmes de grille qui redimensionnent et réagencent automatiquement les différentes sections d’une application informatique. En les respectant, il est aisé de diminuer les temps de conception et de programmation.

Une méthode pour réaliser un zoning ?

On l’a mentionné, il n’y a pas vraiment de règles pour faire un zoning. C’est au feeling ou au pifomètre comme dirait l’autre. Un zoning Z peut être parfait pour une personne et ne pas l’être du tout pour son équipe.

Dans un premier temps, un zoning doit encadrer une interface bien précise. Ça sera une page web, un module ou un écran d’une application par exemple.

Listez l’ensemble des fonctionnalités que vous souhaitez sur votre interface - si ce n’est pas déjà fait via votre cahier des charges. Vous les cochez au fur et à mesure de votre conception.

Préparez également les fonctionnalités que vous souhaitez conserver en fonction du support utilisateur. Certains composants sont plus intuitifs sur tablette que sur PC.

Chaque zoning ne devrait pas avoir plus d’une fonctionnalité principale. En bourrant une interface de choses, on perd de la visibilité et l’utilisateur ne saura ni quoi faire, ni où aller ensuite. Ce n’est pas ce qu’on veut.

On va faire quelques cas pratiques pour mettre en évidence notre façon de les réaliser.

En voilà un site bien chargé
Et une version mobile surchargée (source : https://doisjeutiliser.fr/unTelechargeMonApp/ )

Cas pratique - Blog

Plus tôt dans un article, nous avons parlé de notre blog. En reparcourant tout cela, nous avons mis en évidence des dysfonctionnements, structurelles et ergonomiques.

C’est le problème que l’on a avec le secteur du développement informatique (et dans d’autres secteurs aussi) : ce n’est pas parce que ça fonctionne que c’est bien fait, et il faut parfois du temps pour s’en rendre compte.

Remédions à la partie ergonomique voulez-vous ?

La liste

Notre principal objectif est simple : permettre à tout utilisateur de visualiser nos derniers articles et aux robots de parcourir l’ensemble de nos articles.

La liste doit permettre de déterminer directement la catégorie de chaque article, via une icône ou une couleur. Ce qu’elle ne fait pas bien actuellement.

Concernant la pagination, nous souhaitons en conserver une classique, une technologie comme l’infinite scrolling ne nous semble pas intéressante vu la fréquence de parution. La première page contiendra maximum 11 articles, et les suivantes 10 jusqu’à ce qu’il n’y en ait plus de disponible. Seul le dernier article publié, présent sur la première page, sera affiché en grand.

Affichage PC
Affichage Mobile & Tablette

Le lecteur

Nous sommes plutôt satisfaits des articles en eux-mêmes. La page prévoit une grande flexibilité dans l’agencement des textes et des images, et il n’y a rien à changer ici.

Toutefois, nos statistiques montrent que ce sont des impasses. Les gens qui viennent sur un article ne vont pas sur d’autres sections du site.
Nous voulons donc rajouter, en fin d’article, une sélection de deux articles évoquant le même sujet. Pour des raisons de simplicité technique, nous afficherons les deux articles précédant l’article en cours de la même catégorie.

Affichage tous supports

La homepage

La slide correspondante à la dernière news affichée fait son boulot : elle affiche l’accroche du dernier article et un bouton permettant d’y accéder.

Cette slide n’est pour autant pas très visible, du fait de la structure de la page d’accueil. Ce n’est pas le sujet aujourd’hui mais elle sera certainement remaniée pour mieux mettre en valeur le contenu dynamique de notre site.

Affichage PC

Ressources & Outils

Même si un papier et un crayon suffisent à réaliser un zoning de qualité, nous sommes au XXIè siècle que diable. Cela veut dire qu’il existe plein d’outils et de ressources pour arriver à nos fins.

Tous les outils aujourd’hui disposent d’une relative gratuité d’accès. Cela permet de les tester et de les valider :)

Les 3 zonings présentés plus haut proviennent respectivement des 3 outils ci-dessous : Mockflow, Wireframe.cc et Moqups.

Mockflow

Site : https://www.mockflow.com
Gratuité : 1 projet / 1 utilisateur
Avantages : Très simple, intuitif, possibilité de créer plusieurs pages par projet. On dispose également de composants pré-faits, couvrant les besoins généraux des projets web. Mockflow permet également de faire des sitemaps ou des guides graphiques, fournissant ainsi un outil de conception complet.
Inconvénients : Embarqué dans un navigateur, donc on peut expérimenter quelques lacunes et des ralentissements. On est vite limités sur un compte gratuit mais les tarifs proposés sont plus qu’honnêtes pour qui s’en sert régulièrement. On regrette également une absence de connexion entre supports.


Wireframe.cc

Site : https://wireframe.cc/
Gratuité : Pas besoin de compte, pas de sauvegarde
Avantages : Assez flexible, pas besoin de compte pour commencer. Performant, il ne rame pas. C’est suffisant quand on a pas besoin de grand chose.
Inconvénients : Pas d’export sans compte, vous devez faire une capture d’écran. Cependant, il n’est pas très intuitif à utiliser, on ne peut pas faire autre chose que des formes simples.


Moqups

Site : https://moqups.com/
Gratuité : Pas besoin de compte, pas d’export ou de sauvegarde.
Avantages : Grosse ressemblance avec Mockflow. Il propose une grille qui aide bien à placer les composants entre eux. L’outil propose une grande quantité de composants, divers & variés.
Inconvénients : Limitation à 300 objets sur toutes les pages du projet. On dirait pas mais c’est vite atteint. L’outil est un peu moins intuitif vu qu’il propose plus de choses sans pour autant changer l’agencement des outils.

Vous l’avez compris, faire et comprendre un zoning est à la portée de tout acteur d’un projet. Avec les bons outils, il est possible de générer une grande quantité d’interfaces en peu de temps.
Que ce soit avant une maquette ou au beau milieu d’un projet, n’hésitez pas à en abuser. Ils font d’excellentes traces pour la compréhension du projet et vous pouvez même ensuite les lier entre eux pour en faire des storyboards.

Mais ça, on en parlera plus tard.