Le speedboat, outil essentiel pour animer vos rétrospectives
Le speedboat, un exercice très simple et facile à mettre en place pour dresser et permettre à chaque membre de l’équipe de s’exprimer
Le Wireframing est l’une des étapes les plus importantes du processus de création d’un produit tech ou d’une nouvelle fonctionnalité. C’est à ce moment que vos idées prennent forme. Il permet, grâce à l’absence déléments graphiques, de se concentrer uniquement sur l’ergonomie. Son objectif est de définir les différents éléments d’une interface (titres, textes, icônes, boutons, images…) ainsi que leurs emplacements.
La définition la plus simple d’un wireframe c’est qu’il s’agit du squelette d’un projet, c’est-à-dire le schéma d’une interface digitale… C’est comme un plan d’architecte : un schéma en noir et blanc, en deux dimensions.
Un wireframe a pour objectif d’étudier l'ergonomie et la navigation, avant même d’avoir défini les choix visuels. Il aide également à visualiser les différents blocs (header, sidebar, footer...) pour les développeurs, ce qui permet d’identifier rapidement les impossibilités techniques.
On l’utilise lors des étapes préliminaires de la conception d'une interface web. Il permet de :
Très visuel, il est facilement compréhensible pour tous : client, graphiste, développeur. Son format simple permet de le modifier rapidement, contrairement à des maquettes très avancées sur le design.
Un wireframe permet de gagner du temps dans la conception d'un site/app.
On peut traiter le wireframing en passant par les différentes étapes ci-dessous :
Maquette fonctionnelleSource : [https://www.lafabriquedunet.fr/creation-site-vitrine/articles/wireframing-guide-complet-maquettes-fonctionnelles-web/](https://www.lafabriquedunet.fr/creation-site-vitrine/articles/wireframing-guide-complet-maquettes-fonctionnelles-web/)
Pour réaliser des wireframes, il faut avant tout travailler en amont. Il faut chercher ce que les utilisateurs veulent et ce dont ils ont besoin. Un wireframe c’est SIMPLE.
Il faut trouver de l’inspiration, benchmarker les concurrents, se tenir à jour des tendances web. Il existe une multitude de sites pour s’inspirer, propres à ce que vous cherchez. En voici quelques-uns :
Prenez l’habitude d’observer les maquettes d’autres designers et d’analyser des applications/sites que vous avez l’habitude d’utiliser. Votre vision se renforcera avec le temps.
Concevoir des wireframes peut s’intégrer à différentes étapes du process créatif. Chaque designer a une manière différente d’aborder la conception des wireframes. C’est à vous de trouver le processus qui vous convient. Il faut tester les différents processus pour voir lequel est le mieux adapté à votre projet.
Notions clés :
Voici quelques exemples de processus :
Le conseil de Nicolas, Product Designer : “j’ai pour habitude d’utiliser le processus SKETCH > HI-DEF WIREFRAME > PROTOTYPE > MOCKUPS > PROTOTYPE” que j’applique pour la plupart de mes projets. Je le trouve complet, il permet d’itérer à chaque étape importante du projet”.
Après la phase d’inspiration, on vous conseille de commencer vos projets par une phase de sketching papier. Sur un carnet, une feuille A4 ou encore des gabarits pré-conçus, on commence à sketcher ses premiers écrans pour tester les différents éléments et disposions. Il faut aussi discuter, challenger, tester avec des acteurs du projet ou même extérieurs à celui-ci.
**Quel outil pour des wireframes à la main ?**Par exemple, le site [https://sketchsheets.com/](https://sketchsheets.com/) propose de télécharger des templates d’appareils (iPhone, Browser) pour les imprimer et sketcher facilement directement dessus.
Il existe des ateliers pour réaliser ses premiers wireframes papier. Tous les acteurs du projets peuvent participer, pas besoin de talent d’ “UX Designer”. Ils permettent au Designer de ne pas faire les wireframes dans son coin, seul. Il est nécessaire d’échanger avec l’équipe produit et les parties prenantes impliquées : challenger, modifier pour arriver sur un produit complet.
Le crazy 8 consiste à esquisser 8 écrans en un temps record : 8 minutes sur une feuille A4, divisée en 8. Cet atelier n’a pas pour but de de réaliser vos écrans finaux car son objectif est :
Le Priority Guide Content, quant à lui, consiste à hiérarchiser uniquement le contenu en le mettant sur des feuilles. On ajoute ensuite les interactions entre les utilisateurs et le produit, sur des post-its qui gravitent autour.
Ensuite vient la phase de wireframing. Chacun dispose de sa méthode : détailler ses wireframes pour concevoir des prototypes rapidement ou rester flou pour ne pas influencer l’utilisateur.
Un wireframe se compose d'éléments très différents et la seule limite est votre créativité. On retrouve principalement des images, des textes et CTA (Call To Action : boutons). Il ne faut pas hésiter à bien respecter les tailles d'éléments pour se rendre compte de la hiérarchisation et des degrés d'importance des différents blocs.
Favoriser l'architecture
Lors de la conception d'un wireframe, on veut tout d'abord proposer une architecture d'interface. On utilise peu de couleurs et design pour éviter de distraire l'œil et se projeter sur le futur produit. Cependant, on peut utiliser des couleurs sur les CTA pour faire ressortir les éléments importants.
Hiérarchiser l'information
Bien définir les différentes tailles de blocs, texte (H1, H2,...) est très important. Ils peuvent être souvent modifiés durant les premiers tests utilisateurs.
Le moins de Lorem Ipsum
Essayez d'utiliser du vrai contenu. Placer le vrai contenu vous permettra de vous projeter et de décider comment les éléments se positionnent. Bien sûr, n’oubliez pas de prêter attention à la lisibilité de ce contenu, qui permet de garder l'utilisateur sur le site.
Penser mobile
N'oubliez pas de prendre en compte les différents devices, votre produit n'est pas destiné à un seul usage et chaque utilisateur dispose de produits différents. Cela passe par la taille des boutons sur un mobile, la disposition des blocs sur une tablette ou bien la taille des typographies sur un écran haut résolution.
Enfin vient la phase de prototypage qui permet de se projeter dès les premiers wireframes, ce qui est essentiel. Le prototype consiste à ajouter des actions et des relations entre les wireframes afin qu’ils puissent représenter le plus possible l’expérience utilisateur réelle. Par exemple, si je clique sur ce bouton, alors j’arrive sur le wireframe de la page d’après. Cette étape est utile pour corriger et récolter les tests utilisateurs.
Aujourd'hui, la plupart des logiciels (Sketch, Adobe XD) proposent le prototypage directement dans le logiciel, cependant Invision est à ce jour la solution la plus complète. Elle permet de collaborer en temps réel (commentaires, modifications) et des plugins sont disponibles pour lier vos logiciels préférés à cet outil.
Le wireframing n'est pas une phase simple d'un projet mais cette étape permet de poser les premières pierres et donner vie à votre produit.
Le Wireframing est une des étapes fondamentales dans la conception d’un produit digital. Bien trop souvent oubliée, cette étape permet grâce à l’absence de contenus, de réfléchir à l’expérience utilisateur et l’ergonomie en premier. Très rapidement, vous pouvez avoir des retours utilisateurs et améliorer ces wireframes. Le wireframing, vous permettra de valider ou invalider vos hypothèses posées pendant la phase de recherche utilisateurs, avant de lancer les développements. C’est aussi une étape qui vous permet de limiter les coûts sur du long terme et d’être dans une démarche de test & learn.
Nous croyons en un nouveau modèle de consulting où l’excellence commence par l’écoute, le partage et une vraie vision