Retour

26/01/2023

Le wireframe : une étape cruciale du design UX

Définition

Dans la conception UX, le wireframing est une étape qui consiste à visualiser le squelette des interfaces numériques. C’est une mise en page d’un produit qui démontre quels éléments d’interface existeront sur les pages clés. Pour faire le parallèle avec un autre domaine du design, on peut dire que le wireframe représente les fondations, l’architecture d’une maison tandis que l’UI design joue le rôle de la décoration intérieure.

Concrètement, un wireframe est un dessin monochromatique créé lors de la phase de conception du processus de réflexion. Il fournit un plan de la structure, de la disposition, des informations et des fonctions de la page. Cela permet aux parties prenantes d’avoir une idée claire du fonctionnement et de la représentation visuelle de l’interface utilisateur de l’application.

Fonction des wireframes

Les wireframes ont de multiples fonctions :

  • Relier l’architecture de l’information du site à sa conception visuelle en montrant les chemins et liens entre les pages
  • Clarifier l’affichage de certains types d’informations sur l’interface utilisateur
  • Déterminer toutes les fonctionnalités prévues dans l’interface
  • Hiérarchiser le contenu en déterminant l’espace à allouer à un élément donné et son emplacement.

  • Bonnes pratiques

    Il est important de garder à l’esprit que les wireframes sont des guides indiquant où les principaux éléments de navigation et de contenu de votre site vont apparaître sur la page. Puisque leur but n’est pas de dépeindre l’identité visuelle, restez le plus simple et synthétique possible.

    1. N’utilisez pas de couleurs. Si vous avez pour habitude d’utiliser la couleur pour distinguer les éléments, utilisez plutôt des tons de gris pour mieux hiérarchiser les différences sans semer le doute.

    2. N’utilisez pas d’images. Les images détournent l’attention de la tâche à accomplir. Pour indiquer l’endroit où vous souhaitez placer une image et sa taille, vous pouvez utiliser une boîte rectangulaire aux dimensions de l’image, traversée par un « x ».

    3. N’utilisez qu’une seule police générique. La typographie ne doit pas faire partie de la discussion sur l’architecture du site. Dans le cadre des maquettes, vous pouvez toutefois redimensionner la police pour indiquer les différents en-têtes et les changements dans la hiérarchie des informations textuelles de la page.

    4. Étant donné que les wireframes sont bidimensionnels, il est important de se rappeler qu’ils ne permettent pas toujours de montrer toutes les caractéristiques interactives de l’interface, comme les menus déroulants, les états de survol, les accordéons qui mettent en œuvre la fonctionnalité montrer-cacher ou les carrousels à rotation automatique. Il est toutefois possible de créer un prototype à partir de ces éléments sur un logiciel dédié, Figma par exemple, que notre équipe de design utilise au quotidien chez TKT.

    Contenu possible des wireframes

    Les éléments qui peuvent être considérés comme standards d’une page web sont les suivants :

  • Le logo
  • Titre du site
  • Titres des pages (H1)
  • Navigation par fil d’Ariane
  • Formulaire de recherche
  • Liens vers une organisation plus large dont vous faites partie
  • Liens de navigation globale pour le site
  • Navigation dans le contenu local
  • Contenu de la page principale
  • Informations sur les contacts
  • Déclarations de droits d’auteur
  • Footer

  • Variations

    Les wireframes peuvent varier à la fois dans leur production, des croquis sur papier aux images dessinées par ordinateur, et dans la quantité de détails qu’ils transmettent. Les termes « basse » et « haute fidélité » sont utilisés pour identifier le niveau de production ou de fonctionnalité des wireframes.

  • Wireframes basse fidélité

    Les wireframes à faible fidélité facilitent la communication au sein de l’équipe de projet et sont relativement rapides à développer. Ils ont tendance à être plus abstraits car ils utilisent souvent des images simples pour bloquer l’espace et mettre en place un contenu fictif, ou du texte en latin (lorem ipsum) pour remplir le contenu et les étiquettes.

  • Wireframes haute fidélité

    Les wireframes haute-fidélité possèdent un niveau de détail accru. Ils comprennent souvent des informations sur chaque bloc de la page, notamment les dimensions, le comportement et/ou les actions liées à tout élément interactif.

    S’ils comprennent des éléments d’interface utilisateur plus détaillés, ils ne doivent pas pour autant être des rendus réels de la conception visuelle d’une application ou d’une page web. Vous ne devez créer des wireframes haute-fidélité que si une partie prenante vous le demande ou si l’équipe produit n’est pas encore d’accord avec le concept ou le flux de l’application après avoir examiné des croquis, des storyboards ou des wireframes basse fidélité. Les wireframes haute fidélité permettent aux utilisateurs ou à l’équipe technique de mieux comprendre un concept. Ils peuvent également aider l’équipe technique ou le client à mieux comprendre les attentes de l’utilisateur.