Article 2/5 : Prototypage applicatif

 

Intro.

   Une fois la charte graphique de votre client définie, vient le temps de « sketcher » son application en devenir et de définir quels sont les besoins fonctionnels auxquels répondent l’application, quelle est la logique de cheminement, sa cible, son potentiel, etc. Pour cela, il faut une méthodologie solide pour respecter au mieux votre deadline et adresser votre projet dans les meilleures conditions.

Dans notre cas d’étude, le client à définit que son application doit servir majoritairement à obtenir de l’aide sur les vols et liaisons en cours, la flotte, les services et pouvoir se lier au site web sécurisé pour passer la commande de billets, le cas échéant. Pour rappel, il veut aussi une application Windows 8 afin de développer son image sur le continent européen, image qu’il désire jeune, active, dynamique et abordable.

 

Ce n’est pas parce que nous sommes des graphistes que nous pouvons faire n’importe quoi.

   Derrière ce titre un peu long (et un brin provoc’, sachons le reconnaître) se cache une constatation. Le design et le graphisme se contente souvent d’une image un peu particulière : En effet, l’acte de création semble reposer sur un terreau artistique, fertile certes, mais intangible et à la méthodologie douteuse, vaporeuse. Pour autant, la création ne saurait rentrer dans des cadres trop stricts. Néanmoins, un peu de méthodologie ne nuit pas et permet d’associer le client au succès de sa commande. Rien n’est pire que le client qui vous assène le fameux : « c’est vous l’artiste ». On a alors toutes les chances de se retrouver avec une compo refusée, qui est en dehors des clous, hors délais, etc.. Dans pareil cas, bornez le projet avec insistance et faites valider à chaque étape. Et associez-le au processus suivant:

 

Day 1 : tempête de cerveau.

   Une bonne application commence généralement par un bon brainstorming interne. Dès que vous êtes en contact avec le client, réunissez votre équipe (ou vous-même, si vous êtes plusieurs dans votre tête), et explorez le sujet de manière très, très libre, sans contrainte. On peut faire du « role playing », du mime, du Pictionnary, un concours de calembours, tout est bon pour débrider le sujet. A ce stade, c’est essentiellement le cortex et les émotions qui causent. Travaillez autours de la couleur, du métier et surtout lâchez-vous !

brainstorm

Le brainstorming, ce n’est pas non plus un concours de devinettes. Il faut tout de même une trame, qui peut être orientée par des questions récurrentes : «Que voulons-nous faire ? », « Comment allons-nous faire ceci ? », « Quelle est l’inspiration du moment ? ». De plus, pour être efficace, une session de brainstorming doit être limitée dans le temps. Un format d’une heure permet de traiter le sujet par la spontanéité, sans trop aller en profondeur. Encore une fois, toute idée à ce niveau est égale à une autre. On ne critique pas, mais on relève soigneusement chaque entrée. Ce n’est qu’à la fin de la session, lorsque le temps dévolu est échu que l’on peut trier dans les idées et en retenir cinq que l’on notera au terme d’un vote de manière à effectuer un premier tri.

En tant que créatif, nous avons tous entendu parler de logiciels sensés faciliter la gestion des brainstormings, ou la génération des idées (mind mapping). Je suis bien sûr attentif à ces nouvelles manières d’organiser les idées, mais je reste sceptique sur la spontanéité et sur l’immédiateté de ces supports, comparée à celle d’un bon vieux tableau blanc.

La deuxième phase se fait avec le client et nécessite un peu de matériel : Un tableau blanc, des Post-it, et du café. Sur le tableau blanc, notez à droite vos concepts dégagés du brainstorming privé. Le client note dans la partie gauche ses attendus, ses envies, son ambition. Au milieu, vous allez faire coïncider vos concepts avec les envies du client, avec les post-it pour symboliser les fonctionnalités, en tant qu’items à représenter et à développer. De nouvelles idées peuvent apparaître ici, et c’est généralement avec plaisir que le client se prêtera à l’exercice. Ah oui, prenez des étiquettes bleues pour les fonctionnalités, des rouges pour les concepts, des jaunes pour les assets graphiques et des violets pour les choses techniquement délicates. Organisez également votre tableau en fin de réunion pour classer les items dans des compartiments gérables (je sais faire/je ne sais pas faire, c’est facile/c’est délicat, c’est dedans/ c’est hors sujet). A la fin de cette session, vous devriez obtenir un tableau bien remplit, qui vous servira de guide vers votre rendu final.

Image1

 

Un bon principe, évoqué dans le livre de Saul Greenberg, Sheelag Carpendale, Nicolaï Marquadt et Bill Buxton, « Sketching User Experience – The Workbook”, est d’appliquer un funnel créatif, c’est-à-dire de partir d’un foisonnement d’idées, de ne retenir que celle qui provoque le plus d’envies, puis de créer une dizaine de prototypes, à partir de l’idée retenue, en explorant divers cheminements intellectuels, et de repasser par le tamis afin d’obtenir le jus le plus clair.

SKETCH2

 
Day 2 : La maquette.

   Ok, vous avez les idées et les concepts de base de votre appli, reste à maquetter un peu tout ceci. Bien entendu, on ne part pas d’une page blanche, puisque vous allez reprendre ici les post-it bleus, jaunes,… et les déposer dans le layout-cible. Pour ces layouts, sachez que vous disposez sur le site www.design.windows.com, de ressources photoshop, et notamment un ensemble de layouts vides, que je vous recommande d’imprimer, afin de pouvoir gribouiller vos idées dessus. Pour les plus numériques d’entre vous, sachez qu’il existe un certain nombre d’applications spécifiques de prototypage (Balsamiq, Blend4 avec Sketchflow,…). Toutefois, sachez que vous pouvez aussi utiliser PowerPoint pour cette tâche, si toutefois vous disposez de Windows 8 RP et de Visual Studio 2012 RC installé (ce qui devrait être le cas, si vous comptez développer une appli Windows 8).

 

PPT

 

Dans notre cas, nous avons opté pour une application plus informative et misant sur les services de la compagnie aérienne REEDAir, plutôt qu’une enseigne d’achat/réservation. Cela ne veut pas dire que cette application ne doit pas proposer ce genre de service, mais le focus sera porté sur l’  « Appeal », plutôt que sur le mercantile. Cette partie pourra aisément être re-routée par une page internet à laquelle notre application Windows 8 fera référence (voire dans un webview...).

Voyons ce que donne le premier prototype : Ici, nous forçons le trait sur le côté « jeunes dynamiques ». C’est clairement la cible identifiée par le client. Le jeune cadre qui se déplace pour son agrément ou pour relier deux points de production, ou encore deux universités.

EX1

Deuxième prototype : Nous avons déplacé le sujet du client à son envie, en explorant la destination. Ici, le sujet est moins le client que la destination en privilégiant la notion de pricing. Bien sûr, le mieux est de prototyper toute votre application, de manière à en faire un « Wireframe », un chemin de fer permettant de visionner toute le déroulé des interactions. C’est à ce niveau que vous travaillerez avec les développeurs qui ont une vision assez précise du fonctionnel de l’application.

EX2

EX3

Pas la peine d’aller plus loin ici, mais vous pouvez vous-même tenter d’explorer plus de sens et découvrir ainsi la richesse de votre concept (aspect évènementiel, aspect week-end). Le but est de toujours avoir un lien évident entre vos maquettes et le cahier des charges définit en Day 1, après les séances de brainstorming.

 

Day 3 : les rendus

   Enfin, une fois que vous avez assez de matière, il faut en faire un rendu numérique afin de pouvoir placer les assets à résolution définitive. Là encore, les layouts de base photoshop vous seront bien utiles afin de disposer des grilles de base utilisées par la charte Metro.

Le but est ici bien sûr de transposer les maquettes griffonnées sur papier par des écrans statiques afin de pouvoir discuter avec les décideurs sur des bases considérées « Pixel perfect », à savoir au Pantone près. C’est ici que commence la partie cruciale du travail où l’on va polir l’interface, finaliser certains aspects, tenter de purger le layout de tout ce qui n’est pas strictement indispensable et finalement d’imaginer une cinématique pour l’application (si cela n’a pas été fait à l’étape précédente). A ce propos, il existe des dizaines de moyens pour illustrer les animations d’interfaces : certains se réfèrent à des découpages pour montrer comment bougent les blocs, quitte à filmer les sessions. Pour ma part, je reste un adepte des solutions de type SketchFlow, qui permette de rester numérique, tout en étant hautement utilisables, voire réutilisables (c’est du XAML, derrière…). 

Mais bien sûr, le but est ici de valider les concepts avec le client final. Donc, le gros du travail se fera sous un outil de type Photoshop ou Paint.net et permettra la livraison d’un certain nombre de rendus, tels que ceux-ci :

Rendu1

Notez dans cette version comment j’ai séparé les items. On aurait pu, par exemple mettre une ombre portée, mais le design Metro demande que l’on évite les métaphores au réel. J’ai donc ajouté des triangles blancs pour bien séparer les offres.

 

Rendu2

Ce qu’il est intéressant de constater dans ces deux maquettes, c’est qu’elles respectent en premier lieu les préceptes de la charte graphique, évoqués dans le premier article (choix des couleurs, cible, logo, polices,...), mais en étant aussi raccord avec la philosophie Metro.

 

Ok, et ensuite ?

   Ensuite, il est temps de passer à la réalisation de notre application et ceci sera traité dans notre prochain rendez-vous, qui portera sur le portage de nos rendus maquettés vers du XAML… A suivre donc et à bientôt !