Première partie de notre dossier consacré au wireframing codé – petit rappel de ce que recouvre le wireframe d’un projet. Pour qui, pour quoi, comment le réaliser ?

Nous avons tous dû un jour expliquer à un client, ou à un collaborateur, en quoi consiste le wireframing. Et là,vous êtes tous en train de réfléchir à ce moment si particulier. A qui il est destiné, pourquoi nous l’utilisons, pourquoi y porter attention… Petit spitch pour savoir quoi raconter la prochaine fois.

Wireframe, késako ?

• Une base de travail centrée sur l’expérience utilisateur et l’utilisabilité.
• Un squelette des pages de votre projet (Web, bien sûr). L’idée est qu’il présente au mieux la hiérarchisation et l’organisation des éléments sur l’écran, et les chemins de navigation offerts à l’utilisateur pour y parvenir.
• Une wireframe reflète l’ensemble des spécificités d’un projet.
  C’est-à-dire ? L’emplacement des éléments sur les pages, le libellé des blocs, les items de navigation et les interactions interface/utilisateur telles que les messages de validation / d’erreur d’un formulaire par exemple.
• Pas de précision sur le choix des couleurs, du graphisme, etc. Ça, c’est le boulot des graphistes !
• Ajoutez un soupçon d’infos sur les éléments de conception de chaque page pour que tout le monde y trouve son compte : chef de projet, client, DA, intégrateur et développeur.
• Et terminez avec toutes les pages de votre projet, des plus anodines (mentions légales, 404…) aux plus complexes.
  Un conseil : c’est important de détailler le fonctionnement de chaque module pour chaque page. Précisez, par exemple, pour un formulaire les messages d’erreurs lorsque les champs ne sont pas complétés.

Pourquoi ? Le client, une fois le document validé, s’engage sur les données décrites (tout comme vous). C’est un peu comme un contrat. Autre avantage : grâce à ce doc, tous les intervenants n’ont (quasi) plus besoin de se référer au chef de projet. Tout y est détaillé.

Le wireframing, c’est la base. Il donne du sens au placement de chacun des éléments sur les pages, il donne les liens entre ces éléments et il détaille quels items doivent avoir des traitements graphiques spécifiques (slideshow, galeries, boutons vs liens, etc).

Pourquoi utiliser les wireframes ?

Quand on passe en phase de créa (graphique), il est important de souligner plusieurs éléments :

• comment les pages figurent au sein du site ?
• quels sont les contenus (textes, images, vidéos, etc.) dont vous avez besoin pour répondre aux attentes de l’utilisateur (et aux objectifs du client – n’oublions pas qu’il est le roi).
• quels sont les liens entre tous ces éléments.
• et enfin quel est leur aspect ?

Plus vous porterez attention à ces détails lors de la conception de vos wireframes, et plus vous gagnerez de temps lors de la mise en place de votre projet !

L’idée est de se poser les bonnes questions avant même sa conception.

• Quels sont les objectifs et les cibles de l’application Web ?
• Quels sont les contenus à insérer ?
• Comment organiser ce contenu ? Quelle architecture d’info ?
• La hiérarchisation de ces contenus est-elle pertinente ?
• Quels sont les chemins de navigation (mapping) ?
• Penser à l’arborescence back-end et  front-end de l’écosystème digital (pages, modules, liens internes et externes, etc.).
• Créer les zoning (papier en prems, puis en numérique une fois validés).
• Passer aux maquettes graphiques.
• Et penser à tous les autres détails…

Une fois tous les éléments clairement définis, votre projet pourra être mis en place, bien encadré.

• Le concepteur UX
• l’architecte de l’information
• le chef de projet
• le graphiste
• le DA (Directeur Artistique)
• le DC (Directeur de création)
• l’intégrateur
• le développeur
• et, bien sûr, le client

Le wireframing c’est tout simplement la ligne directrice de votre projet.

A suivre : Prototype d’un wireframe codé et, place à la pratique, les outils de wireframing HTML.

ITEMS RELATIFS : WIREFRAMING