Le wireframe est un schéma utilisé pour la conception d’une interface utilisateur. Ce schéma va servir pour définir les zones et composants que l’interface doit contenir.
Cette conception est réalisée par un graphiste, et la démarche de recourir aux wireframes s’inscrit dans la recherche d’ergonomie.
L’utilisation de wireframe est surtout employée pour le développement de logiciels, de sites web et d’applications web.
Qu’est-ce qu’un wireframe ?
Le wireframe, ou maquette fonctionnelle, est le squelette de la future interface des applications web et mobiles. Il sert au développement de la partie graphique de ces derniers. Il sert ainsi de « plan de construction » pour les structures de sites web.
Le wireframe permet de :
- Confirmer la satisfaction des exigences de l’interface utilisateur et des possibilités du site web ;
- Simuler le fonctionnement a priori du site web selon les objectifs de départ ;
- Faire une première estimation du temps et du coût de développement.
La première maquette va donc servir à définir le « zoning » des écrans, qui vont permettre au concepteur de découper plus facilement les pages du site. Pour chaque page (page d’accueil, page intérieure, etc.), le concepteur va identifier les différentes zones en les schématisant en blocs pour déterminer les grandes fonctionnalités du site.
Le concepteur va ensuite définir le rôle et la position de chaque zone, puis ajuster leur taille et leur importance visuelle. Plus tard, il pourra détailler et donner des précisions sur chaque élément de la page tel que la hiérarchisation des textes, les dimensions en pixel des contenus, etc.
Le wireframe peut être utilisé comme support de discussion des commanditaires du site web, mais aussi pour effectuer les premiers tests utilisateurs. Pour vérifier l’ergonomie du système de navigation, le concepteur peut insérer des liens dans les parties de la maquette, permettant la navigation entre les écrans.
Pourquoi utiliser un wireframe ?
Les wireframes sont un moyen de gagner considérablement du temps lors de la conception d’une page web. Ils permettent au concepteur de montrer un aperçu de la future page web au client, en présentant la structure du site ou de l’interface avant la conception proprement dite.
De plus, réaliser le wireframe à la main à l’avantage de garder les idées par écrit et sur papier. Cela facilite les retouches en cas de changement d’idée.
Etant donné que les clients seront plus focaliser sur les fonctionnalités et l’expérience utilisateur plutôt que sur l’esthétique du site, le wireframe va aider le développeur à ne pas se perdre lors des réunions concernant les détails pertinentes comme le choix des couleurs. Le concepteur pourra ainsi mettre toute sa concentration sur les interactions et non sur les éléments visuels.
En résumé, le wireframe va alors permettre de modifier la structure de la page web en réponse aux exigences du client.
Le wireframe sur papier permet également à toute l’équipe de développement de collaborer. Le travail n’en sera que plus qualitatif.
Le client sera ainsi satisfait de son projet, et pourra suivre son développement pas à pas.
Différences entre wireframe pour sites Web et wireframes pour versions mobiles
Le mot wireframe est souvent associé à un schéma pour la version desktop d’un site web. Les wireframes pour mobiles requièrent des considérations particulières. Quelles sont donc les principales différences entre les deux ?
Taille
Les mises en pages sont a étudier avec beaucoup d’attention. En effet, les différences de taille entre les applications mobiles et les sites Web de bureau peuvent créer des erreurs. Par exemple, en fonction de la largeur de l’écran d’un site Web de bureau, le wireframe de votre site Web peut présenter une mise en page qui s’étend sur plusieurs colonnes.
Sur une application mobile, le nombre de colonnes est généralement limité à une ou deux colonnes maximum. Vous devrez décider s’ils voient un défilement infini ou si vous souhaitez diminuer le nombre d’éléments par page afin d’afficher d’autres contenus en dessous.
Comportement
La deuxième différence fondamentale est le comportement de l’application mobile ou du site web. Sur un site web, l’utilisateur utilisera une souris ou un trackpad pour naviguer sur la page. Il peut également cliquer sur certains éléments pour afficher des informations supplémentaires, ou même survoler certaines interactions pour afficher des menus.
Sur une application mobile, en revanche, les utilisateurs devront toucher l’écran pour ouvrir une fonctionnalité. Lors de la conception d’une application mobile, il faut donc réfléchir plus attentivement à la manière dont vous allez encourager vos utilisateurs à appuyer sur un bouton spécifique pour atteindre un objectif précis.
Interaction
La manière dont les utilisateurs interagissent avec les applications mobiles est très différente de celle qu’ils utilisent sur un ordinateur de bureau. L’application peut extraire du contenu et des données de l’internet de la même manière qu’un site web, mais de nombreuses applications offrent également à l’utilisateur la possibilité de télécharger du contenu pour une utilisation hors ligne. Ces « modes hors ligne » propres aux applications mobiles doivent être pris en compte dans votre maquette.
Les outils en ligne pour créer un wireframe
Malgré le fait que réaliser un wireframe sur papier soit plus pratique et encore courante, il n’est pas rare de voir des concepteurs utiliser des logiciels spécialisés pour structurer leurs projets.
Adobe Fireworks
Adobe Fireworks est un logiciel de création d’images pour le web. Il permet de réaliser des effets sous les textes, créer des boutons de menu, optimiser les images, etc.
Ce logiciel est spécialisé dans la création de site internet, notamment grâce à l’ajout de Creative Suite à la gamme.
Keynote
Keynote est un logiciel de présentation développé par Apple.
Il permet à l’utilisateur d’utiliser des thèmes afin de garder une uniformité lors des choix de couleurs et de polices. Il peut également faire des transitions et opération en 2D et 3D en utilisant OpenGL.
WireframeSketcher
WireframeSketcher est un outil permettant de créer des wireframes, mockups et des prototypes pour site web.
Quelle est la différence entre un wireframe et un mockup ?
Si les designers ont l’habitude des termes wireframe et mockup, et peuvent faire la différence entre les deux, il est plus difficile pour les amateurs de distinguer les deux méthodes.
Comme on l’a dit plus haut, le wireframe s’agit de la représentation graphique d’une page web ou d’une application, sur laquelle on retrouve des éléments essentiels du développement. En d’autres termes, le wireframe est un point de départ de tous le projet de création du site internet.
Alors que le mockup reprend les principes du wireframe, tout en permettant d’avoir un aperçu du rendu final. Cependant, le mockup n’est qu’une simple image, impossible donc de ré-agencer les éléments.
Ces articles peuvent aussi vous intéresser :
