Définition : qu’est ce qu’un wireframe ?
C’est un « dessin » d’une page web (ou écran d’application mobile) qui permet de préparer la mise en forme. Vous pourrez aussi identifier les fonctionnalités nécessaires à votre page (ou écran). C’est important car la création de wireframe vous donne plus de recul. Elle vous apporte une vision globale et complète de votre page (ou écran).
Qu’est ce que Balsamiq ?
C’est un logiciel pour réaliser des wireframes qui sont présentés ici.
Mon conseil :
Je recommande de le faire en parallèle de la liste des spécifications fonctionnelles. En effet, cet exercice vous amène souvent à compléter les fonctionnalités manquantes.
Mes exemples de wireframes
L’objectif de cette page est de vous montrer quelques exemples. Certains projets n’ont pas vu le jour (manque d’opportunité/business). D’autres ne sont plus en ligne car je travaille depuis plus de 10 ans (!). Je vous présente 2 projets : un site e-commerce et une application mobile.
C’est intéressant pour comprendre comment fonctionne Balsamiq et l’utilité des wireframes.
Meilleure alarme : le comparateur d’alarmes
Il s’agit d’un beau projet, ici ce sont des wireframe du front office.
Projet justement victime des difficultés pour trouver notamment des partenaires, et donc : le projet n’a pas vu le jour !
Ce qui ne m’a pas empêché d’avancer sur le projet alors que j’étais Chef de projet marketing chez Ariase/BeMove. Il y a eu des spécifications fonctionnelles, les wireframes, les maquettes graphiques et le développement partiel du projet.
Meilleure alarme devait être un comparateur d’alarmes (voire d’objets connectés). Un projet e-commerce où l’on pouvait comparer plusieurs produits en même temps. Les visiteurs pouvaient se renseigner sur les fabricants et déterminer la liste de matériels en fonction d’une interface animée.
Application mobile : Déménagez-moi (Android)
C’est une application mobile sur le déménagement, car chez Bemove j’étais principalement responsable de ce secteur. L’idée de ce projet est une application qui permettait surtout de faire des demandes de devis (acquisition de leads). Plusieurs fonctionnalités aidaient les utilisateurs à préparer leur déménagement. Par exemple :
- un calculateur de volume : une liste d’articles est proposée en fonction des pièces du logement. Un volume est défini pour chaque article. L’utilisateur peut ainsi obtenir une estimation du volume de son déménagement (fonctionnalité encore présente sur le site des Artisans Déménageurs).
- un outil de calcul d’itinéraire (lié aux applications maps natives) : fonctionnalité encore présente sur le site des Artisans Déménageurs.
- un outil agenda qui fonctionnait avec les applications du même type. Des démarches pré enregistrées apparaissaient sur le calendrier.
- la fonctionnalité « Carton » qui permettait de lister ce qu’il que contenait le carton (vocal), photographier le contenu avant de le fermer. Ensuite, l’utilisateur l’imprimait l’étiquette avec le QR code et la collait sur son carton. Il suffisait de scanner le QR code pour afficher les informations saisies sur l’application (ou le site).
L’espace client du site Les Artisans Déménageurs était synchronisé avec l’application. L’utilisateur avait donc accès aussi aux données depuis un ordinateur.
J’ai pris beaucoup de plaisir à imaginer les fonctionnalités, tout en jouant avec les caractéristiques mobiles (geolocalisation, appareil photo…) et applications natives (maps, agenda…). Il existait seulement les fonctionnalités : calendrier et « comparateur de devis » (formulaire de demande de devis), dans le projet avant mon arrivée.
L’application n’est plus en ligne. En effet le site internet Les Artisans Déménageurs a été refait en 2018 et son espace supprimé.
D’autres exemples de wireframes réalisées avec l’outil Balsamiq : https://www.cocolabs.io/wp-content/uploads/2016/01/wireframe_cocorico_19.pdf