Sélectionner une page

Pour toutes les personnes qui sont amenées à faire de la conception (affiches, cartes de visite, sites internet, applications et cie.) : cet article est fait pour vous.

Ahhhhh le maquettage… En ce moment, j’ai le nez dedans. Le dernier webinaire « User Centric Innovation » auquel j’ai assisté en partant d’Orange était justement sur le maquettage et depuis quelques semaines, je travaille sur 2 projets d’applications mobiles et quelques projets de sites internet. Bref, je vous laisse imaginerJe suis sans arrêt en train de griffonner sur mon cahier, ou sur un feuille volante et il y en a de partout ! (A ce propos, il faut absolument que j’écrive un article sur l’organisation…).

Peut-être que parmi vous, chers lecteurs curieux, certains ont l’habitude de mettre en place cette méthode de conception d’interface. Mais pour les autres, je vous propose donc de vous expliquer, avec mes mots (et quelques sources pour compléter mes propos), en quoi cela consiste. Bonne lecture !

Le maquettage : en quoi cela consiste

Avant tout, qu’est-ce que cela signifie « maquetter » ? D’après la définition du Larousse : « Représentation (…), le plus souvent à échelle réduite, mais fidèle dans ses proportions, d’une construction, d’un appareil, d’un décor, d’un objet quelconque ». Le maquettage prend différentes formes selon le secteur d’activité : architecture, 3D, armée…

Dans de nombreux projets web, il est important de penser à la structure du site, au zoning, la hiérarchisation des contenus. L’objectif étant de simplifier au maximum l’accès aux informations. Il y a toute une réflexion au préalable, qui se base à la fois sur des tests utilisateurs, mais également sur un benchmark de l’existant. Oui, car lors de l’étape de conception, il est inutile de vouloir réinventer la roue et d’aller trop vite. Bien évidemment, il faut que l’idée soit innovante, mais ici nous ne parlons pas d’idée ou du concept, nous parlons d’une interface et celle-ci doit être la plus intuitive possible.

Maquetter une interface fait partie de la phase de réflexion dans la conception. C’est également un moyen de  communiquer le concept auprès des équipes et faire remonter les remarques. Rapide et simple, cette méthode présente plusieurs avantages, notamment la possibilité de mettre en place des tests utilisateur et d’intégrer les feedbacks avant même de lancer le développement de l’interface ! Le maquettage fait partie de la démarche d’amélioration de l’UX et représente une véritable étape dans le développement d’une interface.

Les étapes à respecter : analyse, brainstorming, maquettage papier, maquettage numérique

1. Observez ce qui existe et fonctionne bien

Avant de se lancer, une étape à ne pas négliger est l’analyse de l’existant. Cette phase de
réflexion et de recherche permet d’identifier les bonnes pratiques (ou pas d’ailleurs !). Pour illustrer : la dernière fois je maquettais un scénario d’achat en ligne (avec l’ajout au panier et tout le processus qui s’en suit), je suis automatiquement allée voir différents sites, pour noter les bonnes idées, les choses à faire et ne pas faire. Par exemple, sur vente-privee.com, ils schématisent le processus d’achat en 5 points (panier – livraison – récapitulatif – paiement – confirmation) et je trouve l’idée inspirante.

le panier sur Vente-privée.com

2. Faites appel à votre entourage pour brainstormer

Une fois que vous avez noté toutes les bonnes et mauvaises idées de votre étude, vous pouvez également alimenter la réflexion à travers un brainstorming d’équipe. N’oubliez pas les principes de l’UX. Comme je l’ai dit dans mon précédent article :

L’UX est un résultat à atteindre et qui se construit collectivement, au croisement des regards des métiers du business, de la technologie et de l’usage.

Il y a une quantité de méthodes pour animer une bonne séance de créativité. Ce que je vous propose, c’est d’aller voir cet article : les conseils pour un bon brainstorming.

3. Définissez clairement le contenu et les objectifs

Une fois que vous avez récolté le maximum de donnés avec l’analyse de l’existant et le brainstorming, il faut définir une sorte de « feuille de route ». Oui, car avant de se lancer à l’aveuglette, il faut définir :

  • Le contenu de l’application
  • Le contexte et son usage
  • Les fonctionnalités et aspects techniques

Une fois avoir répondu à ces questions, il est donc possible de détailler un scénario de navigation, par exemple :

  1. Je me connecte
  2. Je rentre les informations de ma ville
  3. Je parcours les offres que l’on me propose
  4. J’ajoute des articles
  5. J’accède à mon panier
  6. Je paie

Ce scénario de navigation vous permettra donc de commencer la conception de la première version « brouillon » de votre interface.

3. Saisissez votre meilleur stylo et une feuille vierge

Ça y est ! Vous allez enfin pouvoir commencer la conception de l’interface. Mais attention, pas trop vite tout de même.

Vous pouvez vous lancer seul, mais si vous avez une équipe disponible pour un petit atelier ludique, c’est le top ! Plus vous croiserez les idées, plus pertinente sera la conception. Moi ce que je préfère avant tout, c’est de dessiner sur papier. Je trouve que ce moment est important pour la réflexion. Car l’ordinateur, je ne l’associe pas à un moyen de réflexion (même s’il aide aussi), mais plutôt un outil de conception. La feuille est un bon moyen de s’isoler pour crayonner tranquillement.

Le maquettage by Lea

Une fois que j’ai mis sur papier – même si c’est brouillon – toutes les idées que j’avais dans ma tête, je me sens tout de suite libérée ! Et j’ai l’impression d’y voir beaucoup plus clair.

3. Place à la maquette numérique !

Quels logiciels choisir ?

Oui, car si vous devez présenter à un futur investisseur, à votre expert-comptable ou encore à un futur client, c’est pas très pratique et professionnel les feuilles volantes et le stylo baveux. Du coup, maintenant que tout est clair dans votre esprit, vous pouvez commencer à maquetter sur un logiciel les premières esquisses de l’interface (« ouf, enfin ! » me diriez-vous).

Il existe une multitude de logiciels de maquettage, et je ne pourrais vous conseiller un plutôt qu’un autre, puisque pour le moment j’en ai découvert qu’une poignée. Voici ma sélection :

Photoshop : attention, ce logiciel n’est pas fait pour le prototypage

A mes débuts, j’utilisais le bon vieux et fidèle Photoshop, et je me lançais directement dans l’aspect graphique de l’interface (couleurs, ombres, typographie…). En fait, il ne faut surtout pas faire ça tout de suite ! L’aspect graphique, c’est un peu la cerise sur le gâteau, la touche finale.

Pour rappel (de mon article sur l’UX), voici les 5 grandes étapes à respecter selon James Garett :

  1. Connaitre sa stratégie (les besoins, les objectifs)
  2. Définir les fonctionnalités souhaitées
  3. Construire une arborescence logique et simple
  4. Structurer l’information et la navigation
  5. Et la cerise sur le gâteau… Le graphisme de l’interface ! (qui vient à la toute fin du processus de conception)

Oui, donc à cette étape il faut encore structurer l’information et la navigation ! Selon la complexité de l’interface (différents niveaux de connexion et de droits, quantité de produits et d’informations etc.), cette étape peut être fastidieuse.

Quelques logiciels de maquettage

Balsamiq

Balsamiq est un logiciel de maquettage (ou en anglais « a wireframing tool ») dont j’ai beaucoup entendu parler à Orange et lors de ma veille constante sur le thème de l’expérience utilisateur (ou UX). C’est celui que j’ai installé en premier pour mon projet de maquettage de l’appli « Robert » (encore top secrète, je vous en parle dès que je peux !!).

Je travaille actuellement pour une équipe de 4 jeunes Grenoblois qui lancent leur application woov.in (concept très sympa et innovant permettant de mettre en relation des personnes proches – dans la rue, dans un bar, à la gare … – selon des critères – centres d’intérêt, caractère, physique…) et le chef de projet Tristan Coste a conçu la toute première maquette avec Balsamiq. Voici un extrait de cette première version :Woov.in

Ici, on voit différentes étapes de navigation sur l’interface, ce qui permet à la fois de structurer l’information et la navigation. Tout de suite, quand Tristan m’a présenté son projet, je me suis projetée dans la future application et tout m’a semblé très clair.

Maquetter permet de :

  • Clarifier la structure de l’interface pour l’UX Designer
  • Communiquer avec les équipes les objectifs et le concept (développeur, commercial, graphiste et designer…)
  • Communiquer avec les clients et investisseurs pour illustrer au mieux le projet encore embryonnaire

Balsamiq est un  bon outil pour faire le squelette de l’application. Quand j’ai découvert le logiciel, j’ai rapidement compris comment il fonctionnait, mais j’ai trouvé que l’emplacement des formes proposées n’était pas très intuitif. Plusieurs fois, je me suis surprise à chercher dans tous les onglets une forme que j’avais déjà trouvé au préalable… Et ce logiciel reste limité en termes d’interaction et transitions.

Mockingbot

Tristan Coste nous a récemment proposé de travailler en collaboration sur cette application. L’outil est intuitif : drag & drop, WYSIWYG (what you see is what you get)… Il permet de structurer très facilement les interactions à l’aide de liens visibles que l’on « tire » et connecte à des pages. Plutôt chouette !

De façon générale, l’outil semble tout à fait approprié, cependant l’ayant essayé, je trouve qu’il ne me convient pas : pas de clic gauche (trop l’habitude de l’utiliser !), l’alignement fonctionne mal et la duplication de dossier prend beaucoup trop de temps à mes yeux.MockingBot

Mockplus

Il y en a de nombreux autres, j’ai notamment essayé Mockplus, qui est encore en développement, et j’ai été agréablement surprise ! L’outil est à la fois super complet et très intuitif. Il permet d’avoir un rendu plutôt crayon (comme sous Balsamiq), mais également en version plus évoluée et graphique. Je suis en pleine remise au propre de la v1 de Robert sur MockPlus. Les éléments sont nombreux, inspirants et simples à trouver.

Je trouve que l’interface est intuitive, je me suis tout de suite sentie dans mon environnement, même s’il reste quelques détails à améliorer (je chipote !) :

  • L’importation des photos pourrait être plus intuitive et je pense que la définition du cadre au préalable n’est pas utile (déformation de la photo notamment)
  • Il manque la possibilité de mettre certains éléments et icônes à différentes échelles
  • Le verrouillage des éléments ne me semble pas très pratique

Robert_Mockplus

 

J’ai découvert ce logiciel via Berry Sarah, qui travaille à Los Angeles sur le développement du logiciel Mockplus.  Ce qui m’a plu, c’est que nous avons pu échanger, et j’ai également pu remonter des petites remarques d’amélioration : c’est chouette de partager ses feedbacks et contribuer au projet !  Si vous voulez l’essayer : c’est gratuit 🙂

Marvel App

Si vous préférez maquetter sur un logiciel « classique » de graphisme (InDesign, Illustror, Photoshop), l’application Marvel permet d’intégrer des wireframes en .jpg, pour une maquette graphique et des petites interactions. J’ai simplement vu rapidement ses fonctionnalités, mais je n’ai pas encore eu l’occasion de travailler sur un projet avec.

Axure

Axure est le logiciel de référence chez les « vrais » professionnels. Il est vraiment complet, et permet de faire une maquette d’interface complète, incluant les interactions. En fait, à ce stade, ce n’est plus une maquette statique, mais une vraie (fausse) application, qui fonctionne avec le tactile, lorsque nous scrollons, cliquons sur les boutons etc. Le logiciel est parfait pour sortir la « version finale v1 » de l’application, avant de passer à son intégration et son développement (oui parce que c’est bien beau de faire des maquettes, mais après faut rentrer dans le code et ça, ce n’est pas ma tasse de thé…). Je ne l’ai jamais utilisé, mais d’ici peu je pense avoir l’occasion.

Axure

Il existe tant d’autres logiciels, mais je vais m’arrêter là pour ma petite sélection. Si vous voulez plus d’outils et ressources, je vous propose de découvrir ci-dessous les références que je vous partage, issue de ma petite veille quotidienne.

Quelques ressources :

Plus de liens et d’articles UX ?  Suivez-moi sur Twitter ! @SchmLea