UX : Hiérarchie et zoning, deux outils importants

Noémie

Noémie


Sep 28th 2016 in explication

Introduction

Au sein d’Antistatique, nous aimons beaucoup tester méthodes et outils ! Après avoir fait suffisamment de recherches sur les utilisateurs, leur environnement et la concurrence notamment, il est alors possible de passer à la conception du projet (site ou app). C’est une partie très importante de l’eXpérience Utilisateur et il y a bien entendu plusieurs étapes et moyens de procéder.

Un des premiers éléments que nous devons définir est l'architecture de l'information. Une fois celle-ci définie, nous pouvons mettre en place la structure des pages. Le but de ces deux étapes est simple: donner aux utilisateurs les informations de la manière la plus juste et la plus intuitive possible. 

Hiérarchie

Qu'est-ce donc et quelle est son utilité ?

Définir la hiérarchie des éléments permet non seulement de comprendre la dépendance entre eux, mais aussi de déterminer quels éléments englobent les autres. Il est ensuite possible de placer les éléments dans l’arborescence.

L'architecture de l'information d'un site comporte deux composantes principales: l'identification du contenu du site ainsi que l'organisation, la structure et la nomenclature qui définissent les relations entre ces différents contenus - Jennifer Cardello

arborescence

Nous nous sommes rendus compte de l’utilité de faire cet exercice parce qu’il est parfois compliqué de poser l’arborescence d’un site et par la suite de définir une navigation intuitive.

Zoning

Définition

Comme son nom l’indique, le zoning sert à définir des zones pour les différentes typologies de pages. Ce sont simplement des blocs que l’on hiérarchise en fonction de leur importance (informations que l'on veut donner en premier, éléments qui permettent à l’utilisateur de poursuivre sa navigation une fois arrivé au bas de la page, etc.).

Pour ce livrable, il est aussi important de mettre en valeur les call-to-action de la page, en fonction des objectifs de la page et les liens permettant la navigation. C'est également à ce moment que nous posons les bases du responsive. En effet, les contenus doivent s'adapter à toutes les tailles d'écran.

Utilité

Pourquoi est-ce que nous apprécions particulièrement cet outil?

  • Il permet de schématiser rapidement l’interface du site en découpant l’espace en de simples blocs

  • Il donne les lignes directrices

  • Comme nous définissons des typologies de pages, cela permet de garantir la cohérence entre les pages de même typologie

  • Il fixe la hiérarchie et les éléments nécessaires à une page

  • Il permet de définir les objectifs et les actions de chaque page

  • La hiérarchie des blocs doit être pensée pour tous types d’écran (mobile, tablette, desktop, etc.)

zoning

Livrable

Un des avantages du zoning est qu’il est possible de le réaliser très simplement. Il nous est même arrivé de le faire directement avec un client, sous la forme de post-it représentant les blocs et de feuilles blanches représentant les pages. Il est également possible de le faire sous forme de croquis, en peering avec un designer visuel ou plus proprement dans keynote (ou powerpoint) pour un rendu propre.

Et les wireframes ?

Le zoning intervient avant les wireframes. Selon le projet, il n’est pas nécessaire de passer par les 2 étapes. En effet, parfois un zoning clair est suffisant et permet de laisser une plus grande créativité aux designers visuels.

Pour faire les wireframes, nous avons besoin du contenu réel qui sera présent sur le site ou l’application, ceci afin de réaliser un prototype plus proche de la réalité.

Conclusion

Ce sont deux méthodologies que nous aimons utiliser car elles permettent rapidement de donner une vision globale et d’aligner les différents protagonistes du projet. Il y en a bien évidemment beaucoup d’autres ! Et vous, quels sont les outils qui vous sont chers ?

Liens