Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Mock-up gratuit d’applications Windows 8 avec PowerPoint

[new:31/12/2012]La bonne conception visuelle des applications Xaml (Silverlight, WPF, Modern UI) est un passage obligatoire pour des applications vendeuses et accrocheuses. Pourquoi ne pas se servir de PowerPoint que tout le monde sait manipuler pour créer des mock-up ? Avec de bon templates tout est possible…

Le tout est dans le tout

Toutes les disciplines, tous les arts, lorsqu’ils sont pratiqués avec professionnalisme, se ressemblent dans leurs fondements : tous nécessitent beaucoup de travail pour avoir l’agilité requise et tous impliquent de préparer soigneusement ses plans avant de se lancer dans la réalisation.

Je le vois tous les jours par exemple entre la musique que je pratique et compose et le travail de ma compagne qui est designer / infographiste. Je peux à chaque fois trouver un parallèle entre ses problèmes de réalisation et ceux que l’on rencontre en musique. La lisibilité d’un bon design est très proche de la “lisibilité” d’une ligne mélodique par exemple. Les différents layers d’un dessin peuvent s’apparenter avec les différentes “couches” d’un morceau à mixer, l’art du mixage lui-même et ses règles subtiles peut s’appliquer presque directement aux mélanges des couleurs, des tonalités, au respect de l’ambiance. Choisir un fond pour un dessin doit savoir le rehausser et mettre en valeur le trait tout comme une “nappe” dans un morceau de musique doit savoir remplir l’espace sonore sans pour autant prendre le pas sur le véritable discours musical qu’elle doit soutenir, etc, etc…

Il s’agit en réalité de “meta patterns”, tous les arts ayant une âme commune, un message, une émotion à véhiculer avec force et caractère ou avec douceur et nuance.

Je pourrais aussi vous parler des ressemblances qui existent entre ces “design patterns”, entre ceux qu’on utilise en informatique (des “patrons de conception” où le mot “design” n’a rien à voir avec le Design malgré une croyance confuse récente parmi les informaticiens) et ceux utilisés dans l’architecture du bâtiment (c’est d’ailleurs  comme ça que sont nés les premiers, en partant des seconds – le fameux livre fondateur de l’architecte autrichien Christopher Alexander).

Comme je pourrais rapprocher la conception d’une œuvre de Da Vinci avec celle d’un meuble de la famille d’ébénistes Wassmus (dont Henri-Léonard qui fut fournisseur notamment de Napoléon III) ou même résoudre les problèmes de la mise en page d’une application Modern UI en utilisant le point de vue d’un aquarelliste ou d’un premier violon d’orchestre, voire d’un réalisateur de films…

Toutes ces disciplines ont en commun tant de choses qu’il est même idiot de parler d’elles comme autant d’arts différents. L’Art est un, indivisible. Mais on peut l’aborder par différentes facettes. Un peu comme les cinq théories des cordes sont perçues aujourd’hui comme autant de facettes de la “théorie M”, dite aussi “théorie du tout”, tentative d’unification du physicien Edward Witten. Un seule théorie régit l’Univers, une seule essence est à l’origine de tous les arts qui n’en sont que des facettes, des angles de vue différents et partiels, aucun n’arrivant à englober l’Art en entier.

Et le mock-up dans tout ça ?

La réalisation d’un meuble, d’un immeuble, d’une sculpture, d’un morceau de musique ou d’une application informatique se ressemblent.

Il faut à la fois le niveau d’expertise, l’agilité requise pour mener à bien le projet, beaucoup de travail pour tendre vers cette maitrise et bien préparer ses plans pour être sûr de la qualité de l’œuvre finale.

On ne se lance pas dans l’écriture d’une bibliothèque de code sans avoir fait des plans, des diagrammes UML, sans avoir modéliser l’ensemble des comportements des classes et de leurs instances et les conséquences de ces comportements.

Mais aujourd’hui une application informatique n’est plus seulement faite que de code, elle est faite à part égale entre du code et du Design.

Et la partie Design est régit par les mêmes règles, le même besoin de rigueur.

Le Design d’une application ne consiste pas à mettre des boutons ronds ou un dégradé de couleurs en fond de page, ni même à dessiner des petits mickeys pour faire de jolies icônes…
J’ai écrit des billets sur ce sujet auxquels je renvois le lecteur intéressé (Créer des interfaces graphiques efficaces, les bases du Design Windows 8, le design d’interfaces vendeuses et sa conférence TechDays 2012 à Paris sur le même thème, etc.).

Comme tout travail professionnel fait avec art (ou tout art fait avec professionnalisme, cela revient au même), le travail du designer est structuré. Souvent l’Art est perçue comme l’archétype de la liberté, de l’esprit libre, voire de la rêverie, ou même comme le symbole d’un certain sens de la liberté proche de l’anarchie. L’Art serait même de Gauche selon certains. Quelle erreur ! Si l’inspiration est une rêverie (mais pas toujours), si l’idée réclame une écoute du monde (mais pas toujours), si l’envie de faire passer des émotions est une forme d’ouverture aux autres (mais pas toujours) et si ces valeurs sont plus proches en effet d’un Bénabar, ou d’une Balasko voire d’un Tahar Ben Jelloun que de Christian Clavier (tous ces noms ayant été des soutiens de Gauche ou de Droite “officiellement” aux dernières présidentielles), la réalisation d’une œuvre, elle, est comme la programmation : soumise à des centaines de contraintes, à des codes, des design patterns, des guidelines, à la même rigueur d’analyse, au même besoin de cohérence… Bref, si l’inspiration peut être fantasmatique ou idéologique (et de tout bord), la réalisation n’a qu’une seule valeur en étendard, celle du travail.

Et c’est là que les mock-up et le sketching entrent en scène !

Sketcher c’est prévoir, et prévoir c’est gérer…

Même les applications les plus simples nécessitent un sketching. Les interactions avec l’utilisateur doivent être naturelles, instinctives, toutes les “issues” doivent être prévues exactement comme un diagramme d’activité d’un logiciel ne peut avoir de “branches mortes” de cas de sélection “’débranchés”.

Et les choses les plus simples recèlent souvent des subtilités que seule une grande expérience et la sagesse permettent de détecter sans prendre la peine d’un petit dessin… Et encore, la sagesse et l’expérience dictent de se conformer toujours aux règles sous peine d’oublier quelque chose !

Les exemples où l’arrogance se termine toujours mal sont légions. En tant que mycophile ayant longtemps couru les forêts pour y dénicher quelques spécimens rares et délicieux (dont l’Oronge aussi appelée l’Amanite des Césars est une sorte de Graal tout comme la Truffe ou la Morille), je sais que les accidents n’arrivent jamais aux débutant (méfiants) ni aux experts (…experts) mais à tous ceux qui pensent tout savoir. C’est comme cela qu’un jour une amanite phalloïde (qui a la perversité d’être très changeante d’aspect) termine dans leur assiette, mettant un point final à leur arrogance, et à leur vie par la même occasion…

Un mauvais Design peut signer la mort d’une application, telle une phalloïde planquée derrière un Agaric blanc ou une Lépiote pudique au milieu de l’assiette de code…

Ici ce n’est plus seulement le code spaghetti qui tue, c’est sa présentation !

Lire l’article “Le retour du spaghetti vendeur”, ça détend …

L’expérience dicte ainsi qu’il n’existe jamais de cas simples, en apparence du moins et qu’il faut de toute façon se méfier justement des apparences ! Que derrière des choses qui paraissent évidentes peuvent se tapir des entortillements pouvant détruire les plus belles idées au moment de leur réalisation.

Dès lors le sketching devient une évidence, une étape absolument nécessaire.

On ne tape pas sous la console un “Del *.*” sans avoir vérifier 10 fois le nom du répertoire en cours… De la même façon on ne se lance pas dans la réalisation d’une application à la cinématique parfois complexe, même pour des actions simples, sans avoir pris le temps de la sketcher.

Mocker n’est pas sketcher

Sketcher permet d’aborder certes l’aspect général mais aussi la cinématique. Pour cela on peut utiliser la fonction de sketchflow de Expression Blend, logiciel fantastique mais souvent mal compris par les développeurs.

S’il s’agit de représenter la cinématique d’une application, Blend et son outil de sketching reste l’arme absolue. Il existe toutefois d’autres logiciels spécialisés permettant de modéliser la dynamique d’une application, mais bien souvent ils présentent une complexité et hermétisme autrement plus troublant que le sympathique Blend !

Créer un Mock-up est une autre affaire puisque là il ne s’agit que de fournir une image “ressemblant” à ce que sera tel ou tel écran.

A noter : je sépare le sketching de la création de mock-up pour tenter de clarifier deux aspects différents de la modélisation visuelle d’une application, à savoir les écrans, statiques, et la cinématique, dynamique par nature. Toutefois le sens exact de ces mots récents est fluctuant et la dichotomie que je propose ne reflète pas forcément le sens “officiel” si tant est qu’il y en ait un d’ailleurs. A la base sketcher n’est rien d’autre que produire des mock-up… L’aspect dynamique des choses, apporté notamment par Sketchflow sous Blend, est une nuance essentielle mais qui pourrait paraitre artificielle ou purement ad hoc à certains lecteurs. Je parle donc ici de sketching à la façon de Sketchflow et mock-up à la façon Photoshop.

Le design d’une application passe par plusieurs phases dont le sketching qui généralise la dynamique et l’essentiel de l’aspect général et les mock-up qui précisent l’aspect des écrans de façon plus réaliste.

L’un ne peut aller sans l’autre. On ne produit pas de mock-up au hasard sans connaitre ce qu’il y a en amont et en aval, donc sans la connaissance du logiciel que donne un sketching global et dynamique.

De Photoshop à Visio en passant par PowerPoint

Pour créer des mock-up tous les outils se valent mais certains sont assurément mieux adaptés à certaines situations ou à certains utilisateurs que d’autres.

Partir d’une page blanche sous Photoshop est une option souvent choisie par les infographistes “purs” si on leur demande de créer un “look” pour un site Web par exemple.

D’autres préfèreront le vectoriel d’Illustrator (les plus geeks adorent Expression Design, superbe application vectorielle trop peu connue hélas). Blend lui-même et ses fonctions vectoriels en font un parfais outil de travail (même hors Sketchflow).

Toutefois, dès qu’il s’agit de représenter des UI standardisées il semble bien plus pratique de pouvoir disposer de “briques visuelles” déjà dessinées. Dans ce cas on pourra utiliser Visio. Mais il dispose de templates un peu dépassés (notamment pour les applications où les objets ont un look Win32, en tout cas cela est toujours vrai au moment où j’écris ces lignes).

Tous ces logiciels réclament malgré tout une bonne expertise pour être utilisés efficacement.

Un autre logiciel est presque connu de tous : PowerPoint. Tout le monde a déjà fait des “slides” au moins une fois dans sa vie.

Mais hélas PowerPoint n’a pas été conçu à l’origine pour faire du sketching ni même créer des mock-up. Mais tout n’est pas perdu !

PowerPoint : les bons templates

Malgré tout, PowerPoint est un logiciel simple à utiliser, qui présente les choses sont la forme de pages et qui, justement, sert à communiquer, base même du sketching qui sert à nourrir la réflexion d’une équipe en partageant les plans visuels d’une application.

Ne pourrait-on pas utiliser PowerPoint pour créer au moins des mock-up, facilement et sans entrer dans les méandres de logiciels complexes comme Visio ou pire encore Illustrator ou Photoshop, devenus des monstres au fil des ans ?

Un template PowerPoint gratuit

Andreas Wulf a eu la bonne idée de regrouper l’ensemble des principaux éléments visuels d’une application Modern UI dans un template PowerPoint constitué de pages contenant les éléments en vecteur.

Le template est gratuit et peut être utilisé à titre personnel ou commercial, mais à la condition de cité la source (c’est un minimum) et de le faire en respectant la licence originale qui est la Creative Common Attribution – ShareAlike 3.0 Unported License.

Vous pouvez ce template (un fichier PowerPoint) ci-dessous :

Le Template PowerPoint Windows8 Wireframing

Aller plus loin avec PowerPoint ?

Au-delà de ce template, peut-on aller plus loin avec PowerPoint ?

La réponse est oui !

PowerMockup

Il s’agit d’une extension pour PowerPoint créé par la même personne que le template et qui offre bien plus de facilités et d’options que de simples images vectorielles à copier.

Le produit est réellement intéressant et peut simplifier la vie pour créer et tester visuellement des interfaces Windows 8

Vous trouverez tous les détails sur ce logiciel ici : http://www.powermockup.com/

Pour ne par rendre ce billet trop long, je vous reparlerai prochainement en détail de ses possibilités particulièrement attractives.

Conclusion

Le sketching et les mock-up sont indispensables à une bonne scénarisation de vos applications en général. Sous Modern UI qui met en avant la qualité de l’UI et de l’UX, tout comme les applications Silverlight ou WPF, cela devient totalement incontournable.

Il existe des outils extraordinaire pour vous aider dans cette tâches comme Expression Blend avec l’extension Sketchflow.

Mais il existe aussi des solutions plus simples, comme ce template gratuit pour PowerPoint ou l’extension payante PowerMockup.

Tout cela n’est pas directement interchangeable bien entendu, comme je le disais dans ce billet, chaque outil trouve sa place dans le processus de conception d’une UI et d’une UX réussie, de Photoshop à Blend, d’Illustrator à PowerPoint, du papier et du crayon aux outils graphiques les plus sophistiqués, chaque étape de la réalisation d’un logiciel réclame de la part du Designer un effort constant de mise en adéquation des moyens requis face aux besoins de chaque phase de développement.

L’utilisation d’un template pour PowerPoint, outil généralement bien connu des développeurs, est un moyen simple pour des non Designers de pouvoir produire des mock-up de bonne qualité. L’extension PowerMockup étend encore plus les possibilités.

Alors même si vous n’êtes pas un “artiste”, votre métier vous a habitué à suivre des guidelines, des principes rigoureux, le Design c’est la même chose avec des images à la place d’un langage informatique !

Alors n’hésitez pas à modéliser vos applications,

Et Stay Tuned !

blog comments powered by Disqus