UXPin : Révolutionnez votre workflow avec cette plateforme !

1- Pourquoi faut-il maquetter ?

Les étapes d'un projet webdesign sont très importantes, à commencer par le cahier des charges. Mais ce n'est pas la problématique que je veux aborder aujourd'hui. Passons directement à la phase de maquettage. Je serais curieux de savoir comment vous procédez (n'hésitez pas à commenter pour vous défouler). 

Je suis sûr que pour certains, vous sautez directement sur votre logiciel de PAO favori (Photoshop, Illustrator ou encore GIMP) après avoir récupéré les besoins du client. Vous mettez en oeuvre les formes, les couleurs, les photos et rien ne peut vous arrêter. Permettez-moi de vous dire que vous faites une grosse erreur. Pourquoi passer du temps sur une maquette en couleurs et stylisée au pixel près alors qu'elle risque à 99% (et je n'exagère pas) d'être rejetée par le client ?

Vous venez de griller une étape ! En effet il y a bien mieux à faire avant de passer au stade supérieur. Je vous conseille fortement de vous concentrer sur l'ergonomie de vos pages autrement dit l'architecture du site, à commencer par le plan. Comment les pages seront reliées entre elle et là on revient aux sources d'internet, les hypers liens… Ensuite comment vais-je mettre en forme ma page d'accueil ? Il vous faut trouver la bonne harmonie.

Attention là encore je ne parle pas de couleurs et vous allez me dire "Dur d'imaginer des éléments en noir et blanc alors que nous vivons dans un monde où les couleurs n'ont jamais eu autant de place"… Oui mais justement, la couleur est le second stade et vous risqueriez d'être distrait, alors que la priorité de notre étape reste la structure du site. Quand vous faites construire une maison, vous ne faites pas appel au peintre ou décorateur d'intérieur avant que l'architecte ait dressé les plans et le maçon les murs. Là c'est pareil !

Et la question que vous devez vous poser, c'est "comment vais-je hiérarchiser et organiser mes éléments et comment vais-je les rendre fonctionnels ?". "Quel est le but premier de mon client ?" (Vendre des produits ou présenter ses services), "Quelle est la cible ?" (des séniors ou des jeunes). De ces questions, découleront des solutions qui vous donneront des pistes à exploiter. Mais là nous touchons à un autre domaine qu'est le UX Design, et je laisserai le soin à ces spécialistes de traiter du sujet.

2- Le web évolue et les clients aussi !

"Oui mais comment faire tes maquettes grisâtres pour exprimer nos idées ?" Bonne question car il existe 2 solutions ou… Plutôt 3.

1) Le zoning

Source: www.youtube.com avec Wirefy

Le crayon, un outil facile à prendre en main et rapide à utiliser. Une feuille pas très loin, super quoi de mieux que le plus vieux support du monde ? Ce serait parfait pour ce qu'on appelle le zoning. Cette étape consiste à poser rapidement les zones du site : le header, le wrapper (conteneur principal), le footer, la sidebar… Oui mais un peu trop basique. Le client n'arrivera sans doute pas à se projeter avec ce genre de maquettes et ne visualisera pas le site dans son esprit.

2) Le mockup

Source: www.youtube.com

Passons maintenant à notre compagnon de tous les jours, Photoshop ou Illustrator peu importe, on lui demande juste de faire son job. En tout cas là on ne peut pas dire que le rendu ne sera pas propre. Oui mais ces logiciels sont plutôt faits pour du mockup. Cette étape est un stade trop avancé (dit Hi-Fi pour High Fidelity) du design. Vous réalisez toutes les pages du site proprement pour tout refaire en intégration ? Cela n'a pas d'intérêts et cela s'appelle du temps de perdu. Surtout que maintenant beaucoup d'éléments peuvent être réalisés en CSS3 et seront bien meilleurs en terme de performance qu'avec des images découpées sous Photoshop. (C'est aussi pour ça qu'on en est venu au flat design qui n'est pas juste une tendance esthétique mais aussi une tendance technique).

3) Zoning + Mockups = Wireframes. Une belle combinaison !

Le wireframe est un mix des deux, nous allons associer la disposition des éléments à un style (dit Lo-Fi pour Low Fidelity) sans trop rentrer dans les détails comme la couleur et les fioritures. Ne vous inquiétez pas, ça va venir. Oui mais alors on peut très bien faire des wireframes sur papier, Photoshop ou sur Fireworks qui est plus adapté ? Ces logiciels sont des usines à gaz qui ne répondent plus aux besoins d'aujourd'hui. Voici pourquoi !

4) Il y a encore des contraintes

• Un site est dynamique et pourtant les maquettes au format papier, jpg ou pdf restent statiques. Ce n'est quand même pas très convaincant. Encore une fois le client aura du mal à imaginer ce qui se passe sur son site. Impossible ou pas très pratique de passer d'une page à une autre. "Que se passe t-il si je clique sur ce bouton ?" Bref autant de questions que peut se poser la personne qui aura vos fichiers entre ses mains.
• Imaginons que vous envoyez vos maquettes au client ! déjà il y a un problème: "envoyer vos maquettes"…Comment, par mail ? Oui mais alors là je vous arrête de suite. Il n' y a rien de plus anti-productif qu'un mail. Vous envoyez vos 15 fichiers .jpg, vous attendez les retours du client, qui lui va vous écrire un mail aussi long que cet article avec tout ce qu'il faut corriger.

Alors bien sûr son mail n'est pas très compréhensible, vous ne savez pas de quel menu il parle. Mais en bon prestataire, vous corrigez tout cela, vous réenregistrez votre travail et vous le renvoyer (on devrait chronométrer le temps que ça prend). Mais ce n'est pas tout, il vous renvoie son compte-rendu 3 jours plus tard, et il vous annonce que vous avez oublié de modifier le bouton en haut à gauche mais pas trop à gauche quand même. Bah ouais, mais le problème c'est que vous avez perdu son premier mail… Vous voyez le truc ? Et ça peut tourner en rond très longtemps.

3- Travailler (plus efficacement) ensemble ou échouer seul !

À force de chercher un outil qui pourrait supprimer toutes les étapes inutiles telle que l'envoi des fichiers, les retours clients par mail et la statique des maquettes. Il m'est venu à l'idée de m'orienter vers un outil collaboratif comme on utiliserait Google Doc. mais pour les webdesigners. Et cet outil vous savez quoi ? Il existe, ou plutôt ils existent et n'ont que des avantages à vous proposer.

• Force 1 : La collaboration > Il suffit à vous ou à votre client de cibler la zone sur laquelle on souhaite converser. Bye bye les mails.
• Force 2 : L'interactivité > Enfin vous allez pouvoir démontrer tout le potentiel de vos maquettes en les rendant vivantes. Fini Photoshop et Cie (Quoique… j'en parlerai un peu plus bas).
• Force 3 : Le cloud > L'accès aux maquettes peut se faire un peu partout. Que votre client ou votre collègue soit en réunion, au bureau, ou à l'hôtel, tout le monde pourra avoir un oeil sur les ébauches du site via une url publique ou privée.
• Force 4 : La rapidité > Je vais y venir dans la partie ci-dessous.

J'ai testé des dizaines de ces plateformes collaboratives. En passant par les plus connues, mais il manquait toujours le petit plus qui pouvait faire la différence. Certaines proposent un service plus orienté mockups Hi-Fi (High Fidelity) et d'autres orienté wireframes Lo-Fi (Low Fidelity).

• Balsamiq mockup et Mockingbird : les plus connus mais n' innovent pas assez. Il manque le responsive design, une option qui devrait être une priorité aujourd'hui !
• Axure et Mockflow (service Amazon) : Pas assez intuitives. Ce sont des usines à gaz.
• Moqups : Simple, une interface épurée mais quelques options manquent à l'appel.
• Invision (Hi-Fi) : Un bon système collaboratif mais nécessite de faire des maquettes Photoshop pour les rendre interactives via l'interface.
• Wireframe.cc : trop basique.
• Omni Graffle, Gliffy, Cacoo : interface amatrice.
• Hotgloo et Protoshare : Ces deux services proposent des options intéressantes. À surveiller !

Le service uxpin.com

source: uxpin.com

Thanks God !!! Après tous ces tests, voici celui que je retiendrais. Il a été créé par une équipe d'UX Designer polonais, donc autant vous dire que l'ergonomie est là.

1. – Un système de collaboration bien pensé. Il suffit de placer une pastille pour cibler l'élément sur lequel on souhaite engager une conversation. Les personnes liées au projet n'auront plus qu'à se répondre mutuellement, ce qui supprime une grande partie des mails.
2. – L'interface ergonomique vous donne accès à une librairie UI avec des éléments préconstruits dans la colonne de gauche. Un simple drag and drop et vous pouvez disposer tous les éléments que peuvent constituer une page web (images, liens, paragraphes, titres…). Chaque élément a ses propres options et vous pouvez modifier ses dimensions, angle, opacité à la volée très rapidement. Avec un logiciel de PAO, on mettrait beaucoup plus de temps.
3. – Les smarts objects ou masters : on retrouve sur chaque page notre header et footer. On pourrait très bien faire un copier/coller ou dupliquer sa page. Oui mais si vous faîtes une modification du header, vous serez bien embêté pour appliquer cette modification à toutes les pages. Alors de la même façon qu'en intégration, il est possible de créer son gabarit en plusieurs parties, ainsi quand nous modifierons notre header ou footer, cela se répercutera sur toutes les pages.
4. – L'intéractivité : contrairement à Photoshop où nous avions des maquettes statiques, là notre client pourra naviguer de pages en pages via les liens, pourra déclencher certaines actions comme le hover sur un bouton ou l'apparition d'une pop up…
5. – Le responsive design : la cerise sur le gâteau qui nous donne enfin la possibilité de créer une maquette responsive. Votre client n'aura plus qu'à redimensionner la fenêtre de son navigateur pour connaître le comportement du site sous toutes les résolutions.
6. – Pleins d'autres options :

• Créer des documents pré-remplis : Personas et cahier des charges.
• Uploader des fichiers .jpg, pdf… Si vous souhaitez avoir des retours sur une newsletter, un logo…
• On retrouve des outils de précision de PAO : guides, grilles, alignements, rotation…
• L'export HTML/CSS (récupérer quelques propriétés css ça peut être pratique) et l'export au format PDF (au cas où vous ou votre client n'aurait pas de connection internet)
• Ajout de collaborateurs sur un ou des projets (Prévoir un budget un peu plus important)

Edit du 22/08/14: 

UxPin à apporter entre temps de nouvelles fonctionnalités fortes intéressantes qui renforce la façon de maquetter.

• Les déclencheurs qui permettent de réaliser des animations et interactions simples comme le célèbre slider
• Les calques qui permettent à la façon des logiciels Adobe de grouper, d'organiser, et renommer ses éléments
• La possibilité de parker son compte pour 5$ par mois. Si jamais vous n'avez plus rien à maquetter mais souhaitez garder un oeil sur vos maquettes et garder votre compte actif alors Uxpin propose cette option ce qui vous évite de débourser 15$ par mois dans le vent.

Et Photoshop & Illustrator dans tout ça ?

Ne me faîtes pas dire ce que je n'ai pas dit. Les logiciels de PAO ne sont pas à mettre sur la touche. Au contraire, ils peuvent être un complément en leur donnant une autre utilité dans le processus de création. Le Styles Tiles (planche tendance) ça vous parle ? Cette méthode a été développée par Samantha Warren, designer chez Twitter. Cette technique est un peu similaire à une mood board (planche d'inspiration) mais plus poussée, une sorte de charte graphique. Que pouvons-nous mettre sur cette planche ? Et bien tous les éléments essentiels du site : photos, pictos, typographie, couleurs, boutons (hover, active, focus…). Cela dressera une carte d'identité générale du site.

Pour plus d'informations je vous invite à visiter le site http://styletil.es/

4- D'autres pistes à explorer : le prototype

1) Les frameworks

Après vous avoir parlé des wireframes et des outils pour les réaliser, d'autres solutions voient le jour comme les frameworks Bootstrap, Foundation, Knacss… Alors pourquoi ne pas maquetter directement dans le navigateur.

source: http://getbootstrap.com/ et http://foundation.zurb.com/

L'intérêt :

• Le côté interactif avec aperçu réel du site : navigation, animations, responsive.
• Des éléments directement réalisables en HTML/CSS sans passer par Photoshop ou autre application graphique.

L'inconvénient :

• Maquetter en codant sans avoir de trame me parait hasardeux et il y a de fortes chances qu'on soit sans cesse obligé de modifier le code suite aux remarques du client.
• Aucun système de collaboration.

2) Edge Reflow

Un outil tout droit sorti de chez Adobe dans sa Creative Cloud. Je dirais qu'il se situe entre la maquette et le protoype. Edge Reflow est encore en cours de développement et semble très prometteur pour l'avenir. Cela dit il manque un système collaboratif. D'ailleurs je ne comprends pas pourquoi Adobe n'a pas encore racheté ou créé son propre système de collaboration comme les solutions citées plus haut. Ils auraient tout à y gagner.

5- Conclusion

La méthode que je vous propose ne sera peut-être plus bonne dans quelques années qui sait ? L'objectif aujourd'ui est de valider ensemble chaque étape pas à pas plutôt que de créer seul au risque de repartir à zéro. Ne restez pas dans votre petit confort parce que "on a toujours procédé comme ça pour maquetter". Parfois il faut changer sa méthode, pour gagner du temps et se concentrer sur d'autres étapes qui auront plus d'importance aujourd'hui ou demain.

Et pour finir voici un petit comparatif concocté pour vous !