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 :
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 :
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.
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.
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.