Prototypage dynamique avec SketchFlow

10 Prototypage dynamique avec SketchFlow Dans ce chapitre, vous découvrirez un nouvel outil de prototypage nommé SketchFlow. Bien qu il soit intégré à Expression Blend, vous n êtes pas obligé d avoir lu la totalité des chapitres précédents ou d avoir une connaissance approfondie de Blend pour utiliser SketchFlow. Sa facilité d utilisation est l un de ses grands avantages. Que vous soyez responsable de production, directeur technique ou artistique ou encore designer, ce chapitre vous concerne pleinement. Nous y aborderons le prototypage et nous créerons un premier prototype grâce à SketchFlow. L un des objectifs de SketchFlow est de faciliter la communication entre les différents acteurs du développement afin d arriver à un consensus. Dans cette optique, nous listerons les moyens mis à disposition par SketchFlow pour œuvrer en ce sens. Pour finir, nous étudierons les outils facilitant l interactivité utilisateur, ainsi que les différentes approches existantes pour la conception d interfaces utilisateur. 10.1 L environnement Si SketchFlow est un outil de prototypage, la notion même de prototype revêt des formes nuancées ainsi qu une mise en pratique différente selon les environnements de production rencontrés. Dans cette section, nous allons définir ce terme et étudier l intégration de SketchFlow au sein du flux de production. Pour finir, nous listerons les principes et moyens mis en œuvre par ce dernier lui permettant de se positionner comme outil de prototypage dynamique. 10.1.1 Le prototypage Le prototype, même s il n a pas toujours été formalisé comme tel, est sans doute l une des notions les plus vieilles de l histoire de l humanité. Il y a toujours une première fois. La première massue, le premier vélo, le premier avion, et même la première souris (voir Figure 10.1) ont tous été inventés et rapidement mis à l épreuve un beau jour. Même s ils n ont pas été dès le départ de

278 Partie II Interactivité et création graphique francs succès techniques ou populaires, ils sont devenus des objets indispensables que l homme n a jamais cessé d améliorer par la suite. Figure 10.1 L une des premières souris, créée en 1967 (source WikiPedia). En industrie, un prototype est le premier ou l un des premiers exemplaires fonctionnels d un produit industriel (que l on peut produire en grande quantité de manière rentable). Aujourd hui, le prototypage est très étroitement lié au design. Un objet "design" peut se définir par trois termes : industrialisable, esthétique et ergonomique. Le but des écoles de design est concentré exclusivement autour de la création de prototypes industriels qui doivent réunir ces trois qualités. Si aujourd hui ce concept est totalement intégré à l industrie, cela n est pas forcément de mise concernant le développement informatique. L industrialisation du développement informatique n en est aujourd hui qu à ses balbutiements, n oublions pas que l informatique est un domaine très jeune comparé aux industries traditionnelles. Il est de plus assez difficile d appliquer les recettes de succès industriels dans la conception informatique. En premier lieu, une application est théoriquement unique. Son déploiement ou encore les processus de production peuvent être industrialisés, mais il ne sert à rien de reproduire la même application 250 fois. Lorsque l on parle d industrialisation en matière de développement informatique, on évoque plus généralement la standardisation des procédés et des étapes de développement en équipe. En second lieu, une agence web, un studio de création ou une société de développement informatique (dans une moindre mesure) doivent produire un site ou une application interactive riche dans des délais parfois très courts. Cette phase est donc très souvent occultée ou alors complètement fusionnée à la phase de conception graphique. Ce n est pas le cas de produits hardware industriels qui peuvent bénéficier de plusieurs années de production. Il existe toutefois deux phases essentielles, communes au développement informatique et à l industrie : une première phase de croquis et une seconde de prototypage, qui lancera ou non la mise en production. La moindre bouteille d eau en plastique est le résultat d un prototype, lui-même étant le résultat d un schéma technique ou d un croquis. Certains logiciels, tels que Catia de Dassault industrie ou Alias Design de la société Autodesk, permettent aux créatifs de s exprimer tout en avançant les phases de prototypage et d industrialisation. La souris Arc Mouse de Microsoft a suivi ces étapes avant de pouvoir être produite en masse et commercialisée (voir Figure 10.2).

Chapitre 10 Prototypage dynamique avec SketchFlow 279 Figure 10.2 Prototype de la souris Arc Mouse (source : site Microsoft Expression). De nos jours, les phases de croquis et de prototypage sont très rapprochées. Elles sont parfois fondues en une seule grâce à l outil informatique (cette pratique est encore souvent contestée). L un des buts poursuivi par SketchFlow est de réduire le temps de conception global. Il entre donc précisément dans la catégorie d outils liant ces deux phases, mais il permet également de se rapprocher de l application finale. Jusqu à quel point le prototype doit se rapprocher ou être transformer en application est une question actuellement en débat. Il facilite ainsi la communication entre les créatifs et les ingénieurs. Quel que soit l environnement, plusieurs objectifs sont atteints grâce au prototype : Il permet de valider les choix de recherche, d approche et de conception. Il valide le bon fonctionnement, l ergonomie et peut mettre en valeur d'éventuelles intentions de couleurs. Il facilite la correction des erreurs de conception. Tous ces objectifs sont réalisés à travers la communication et l échange d idées entre les différentes parties impliquées. Le prototype permet donc d atteindre un consensus nécessaire à la mise en production. Il faut parfois beaucoup de prototypes avant d arriver à la version industrialisable d un objet. Quelles que soient les parties impliquées dans sa création, financière, technique, artistique, etc., le prototype permet à chacun d'échanger et de communiquer ses impressions, et c est là sa grande force. Nous allons maintenant voir comment SketchFlow reprend cette philosophie et engendre plus de productivité et des développements de meilleure qualité. 10.1.2 Qu est-ce que SketchFlow? SketchFlow n est pas un, il est en réalité constitué d un ensemble d éléments complémentaires qui ont été introduits dans la version 3 d Expression Blend. Il est tout d abord représenté par un type de projet spécifique généré via Expression Blend. Visual Studio n'est pas l'outil de prédilection pour prototyper. Cela est logique : la notion de prototype est inhérente à celle de design et Blend est avant tout un outil de designer. De plus, l objectif est de mettre un outil de prototypage à disposition des profils créatifs et techniques. Le logiciel Visual Studio n est pas approprié car il demande beaucoup d expérience et fait avant tout appel à des compétences de codeur. Son interface en termes de design est limitée, comparée à celle de Blend.

280 Partie II Interactivité et création graphique NOTE INFO SketchFlow se veut simple et accessible afin de fédérer les acteurs d une production autour d un outil accessible à tous. Vous pouvez également le percevoir comme un enjeu social. Au sein de ce livre, nous avons souvent évoqué le flux de production créatif et technique. SketchFlow est l un des outils permettant de rassembler les deux mondes trop longtemps séparés dans l histoire du développement informatique. Les projets SketchFlow permettent d accéder à un ensemble de panneaux dédiés. Ils sont inaccessibles au sein de l interface de Blend dans le cadre de projets standard. Nous verrons leur utilisation tout au long de ce chapitre. Vous pourrez générer des prototypes basés sur SketchFlow aussi bien pour WPF que pour Silverlight (voir Figure 10.3). De ce point de vue, il n y a pas de différences entre les fonctionnalités proposées sur l une ou l autre de ces plateformes. Figure 10.3 Les projets SketchFlow sous Expression Blend pour Silverlight et WPF. Le prototypage via SketchFlow consiste avant tout à concevoir la navigation, l ergonomie, les transitions et l expérience utilisateur de manière globale. Les projets SketchFlow contiennent par défaut le style Sketch (croquis) pour les contrôles utilisateur. Ainsi, l on s affranchit totalement du design de la charte graphique, qui vient après ces étapes. Cela peut paraître inutile puisque les composants par défaut connaissent les mêmes fonctionnalités. Ce style est pourtant l un des éléments indispensables constituant SketchFlow. Il permet aux non initiés d Expression Blend de prendre en main rapidement un projet avec une utilisation minimale du panneau des propriétés. L objectif est également de placer l utilisateur dans une réflexion sur l ergonomie, l expérience utilisateur, en mode croquis rapide. L erreur serait de se focaliser sur la production graphique directe, il vaut mieux rendre cette phase abstraite et moins importante dans un premier temps. Vous trouverez souvent plusieurs styles Sketch pour un même composant. Le contrôle TextBlock existe en version aligné à droite, à gauche, titre ou bloc de texte, etc. Ainsi, les adeptes de Blend ne sont plus les seuls à pouvoir mettre en forme une application. Vous pouvez accéder aux styles via le panneau Assets (voir Figure 10.4). Encore une fois, le but est de permettre au plus grand nombre d accéder à la création de prototypes. Le code logique est donc par défaut à éviter car seuls les développeurs ou les designers interactifs confirmés peuvent le créer ou le modifier. Un jeu de comportements interactifs spécifiques (Behaviors) est fourni à cette fin (voir Figure 10.5). Ils sont accessibles via le panneau Assets et sont utilisables de manière simplifiée grâce à de nouveaux menus contextuels. Ceux-ci permettent de les utiliser sans avoir à les déposer sur un contrôle et à les configurer. La création des prototypes en est grandement accélérée.

Chapitre 10 Prototypage dynamique avec SketchFlow 281 Figure 10.4 Le panneau Assets sous Blend donnant, entre autres, accès aux styles. Figure 10.5 Les comportements spécifiques à SketchFlow. Pour finir, nous avons évoqué depuis le début la collaboration intermétiers, mais cela ne serait pas possible sans un outil centralisant et permettant à chacun de fournir ses propres impressions. C est le rôle du lecteur SketchFlow. Lorsque vous testez un projet dans le navigateur, le prototype est affiché au sein de ce lecteur (voir Figure 10.6). Ce dernier donne accès à un certain nombre de fonctionnalités aux utilisateurs de l application, quels qu ils soient. Nous étudierons son utilisation à la section 10.3. Figure 10.6 Le lecteur SketchFlow visible lors de la première compilation.

282 Partie II Interactivité et création graphique Vous pouvez finalement remarquer que la compilation ne donne pas accès à l application finalisée. Produire une application finalisée et optimisée n est évidemment pas le but de SketchFlow. Vous pourrez toutefois détacher le cœur de votre application grâce aux compétences de développeurs et de designers interactifs, mais ce n est pas toujours conseillé. Plus l application que vous développerez sera complexe et moins cette manière de procéder sera viable. 10.1.3 Le flux de production SketchFlow est utilisable à deux niveaux. Dans un premier temps, les projets sont créés par les acteurs directs de la production, qu ils soient concepteurs techniques ou artistiques : Comme nous l avons évoqué, prototype et design sont liés. SketchFlow s adresse donc avant tout aux designers dans un sens large. Les designers d expérience utilisateur (UX Designers) sont la cible la plus évidente. Ces derniers ont à charge de proposer des interfaces intuitives et ergonomiques sans pour autant s attarder sur le graphisme proprement dit. En second lieu, viennent les designers interactifs qui possèdent une connaissance de Blend et occupent un rôle central dans le flux de production. Ils sont à même d établir une communication entre les profils techniques et artistiques. Si vous êtes graphiste ou directeur artistique, la prise en main technique simplifiée de SketchFlow a été conçue afin de vous donner un maximum de confort et de productivité. Les développeurs d applications clientes Winforms ou WPF et de RIA pour Silverlight utiliseront rapidement SketchFlow dans leurs futurs projets afin de concevoir les arborescences et écrans de leurs applications. Ils pourront de cette manière acquérir de nouvelles compétences, de prime abord inhérentes aux designers, tout au long des projets. Les architectes d applications ou d informations, dont le rôle est de proposer des structures organisées et performantes, peuvent également détourner SketchFlow afin de créer des arborescences complexes, faciles à maintenir et à partager. Sur un tout autre plan, SketchFlow est utilisable par les responsables : Les responsables de projets, les directeurs artistiques, les responsables de production peuvent participer pleinement au projet par le biais de leur feedback. Pour cela, ils peuvent utiliser le lecteur SketchFlow qui permet de communiquer sur le prototype durant sa création. Le client fait partie du processus de création. Avec SketchFlow, il devient facile de trouver un consensus, de proposer plusieurs maquettes fonctionnelles ainsi qu une direction avant de se lancer dans la production pure et dure. Vous l aurez compris, SketchFlow est un outil de prototypage dynamique et transverse. Dynamique, du fait de la souplesse et de l efficacité qu il propose pour passer d une idée à une autre et donner un aperçu en temps réel des décisions prises. Transverse car il est facile d accès et qu il favorise la communication intermétiers au sein d une production. En bref, le prototype est fait pour être testé et approuvé, SketchFlow est donc l affaire de tous. Attention toutefois à un axiome bien connu des designers : le cœur d une idée est émis par une personne ou deux, celle-ci peut-être étoffée, mais il faut une direction à tous projets. Quand une application doit plaire à de nombreuses parties et que ces dernières sont décideuses, le risque de perdre la force de l idée originale est élevé. Il faudra souvent soumettre plusieurs prototypes avant de trouver le juste milieu, celui-ci pourrait toutefois ne pas être si enthousiasmant que cela.

Chapitre 10 Prototypage dynamique avec SketchFlow 283 Pour finir, SketchFlow impose d abord une méthodologie efficace dans le flux de production. C est un lien direct avec le client. La relation doit être gagnant / gagnant entre prestataire de services et client. Il faut commencer par proposer des maquettes fonctionnelles et ainsi faire vivre le projet. Ce qui avant était figé est maintenant évolutif. Auparavant plusieurs storyboards étaient dessinés et représentaient le scénario interactif de l utilisateur. Le client en choisissait un ou deux, émettait des commentaires et on se lançait dans une sorte de "proof of concept" qui prenait non seulement du temps et de l argent, mais qui en plus n était peut-être pas validée en fin de parcours. Aujourd hui, à travers SketchFlow, nous nous appuyons sur les croquis et storyboards pour créer un prototype dont le scénario, la mise en forme et l interactivité peuvent évoluer dans le temps en un minimum de temps et d efforts. Le prototype fourni fait en quelque sorte figure de cahier de recette et de contrat autour duquel clients et prestataires peuvent s accorder. 10.2 Prototype simple Nous allons maintenant créer un premier prototype simple que nous étofferons au fur et à mesure des notions abordées. Pour réaliser les exercices qui vont suivre, décompressez les fichiers : chap10/assets.zip. 10.2.1 Problématique cliente Dans tous projets, il faudra proposer des croquis de différentes maquettes répondant à la problématique du client. Ce dernier peut même vous fournir lui-même des croquis des différentes pages de l application. Nous allons prendre l exemple d un concessionnaire de véhicule automobile. Celui-ci souhaite un site vitrine afin de mettre en valeur son savoir-faire et la qualité des voitures vendues. Faisant partie d un secteur très concurrentiel, il souhaite également se démarquer, en proposant aux visiteurs du site la possibilité de choisir la voiture de leur rêve à travers l utilisation d un configurateur riche. Nous détaillerons ce terme à la section 10.5.2. Le configurateur riche doit être accessible au sein du site sous forme d applications Silverlight. Afin de créer un premier prototype, le client fournit une première ébauche de maquette sous forme de cinq croquis simples que nous avons numérisés, puis retouchés sous Photoshop. Nous avons ajouté un code couleur pour chaque page et menu afin de reconnaître facilement les pages du futur site. Ces croquis représentent l ensemble des pages du site qu il souhaite mettre en ligne (voir Figure 10.7). La première page représente la page d accueil du site donnant accès à toutes les autres pages. La deuxième liste les critères certifiant la qualité écologique des véhicules. La troisième décrit les prestations diverses et le service après-vente. La quatrième page met en avant l innovation technologique et l ergonomie d utilisation des véhicules les plus récents, grâce à une galerie d images et à un lecteur vidéo. La cinquième page contient le configurateur riche, celui-ci permettra au visiteur de trouver le véhicule idéal en fonction de critères. Nous allons utiliser SketchFlow pour lui proposer une maquette fonctionnelle du site global, puis nous mettrons l accent sur le configurateur riche. De ce point de vue, SketchFlow peut vous permettre de prototyper n importe quel type d arborescence visuelle.

284 Partie II Interactivité et création graphique Figure 10.7 Les cinq pages de croquis retouchées sous Photoshop. Nous allons maintenant créer une première solution SketchFlow. 10.2.2 Le projet SketchFlow Ouvrez Expression Blend et créez un prototype nommé CarReseller. Vous remarquez d emblée l apparition de nouveaux panneaux, dont nous verrons l utilisation ultérieurement. Affichez le panneau Project s il n est pas visible, vous constatez que la solution est scindée en deux projets distincts (voir Figure 10.18). Figure 10.18 Arborescence du projet SketchFlow CarReseller. Le premier projet correspond au lecteur SketchFlow lui-même, il porte le nom original que vous avez défini (CarReseller). Le second contient le prototype, c est le même nom suffixé du mot Screens. C est dans ce dernier que vous travaillerez. Vous remarquez plusieurs différences avec les applications standard. Le second prototype possède tout d abord un répertoire Fonts contenant trois polices utilisées par le style Sketch (croquis). Ce style est un élément important des projets SketchFlow, il est fourni par le fichier SketchStyles.xaml présent à la racine du projet. Ce type de fichier est assez nouveau pour nous. Il s agit en fait d un dictionnaire de ressources qui permet d externaliser et de partager certains types de ressources utiles à un ou plusieurs projets.

Chapitre 10 Prototypage dynamique avec SketchFlow 285 NOTE INFO Il est facile de réutiliser le style Sketch au sein d un projet standard. Il vous suffira d ajouter le fichier SketchStyles.xaml, ainsi que les polices du répertoire Fonts à votre projet. Les styles définis dans le dictionnaire de ressources utilisent ces polices, c est pourquoi il ne faut pas les oublier. Comme nous l avons déjà précisé, ce type de projet contient des comportements (Behaviors) spécifiques à SketchFlow. Attendez-vous donc à trouver des références à de nouvelles bibliothèques dynamiques dans le répertoire References du projet. Nous n avons pas réellement besoin de décrire le rôle de chaque bibliothèque, mais celles-ci sont indispensables au bon fonctionnement du projet. Le fichier Sketch.Flow est le dernier que nous évoquerons. Vous pouvez l ouvrir sous l application NotePad, par exemple. Il s agit d un fichier au format XML, qui décrit une partie du travail réalisé dans le prototype (écrans, transitions, etc.), ainsi que d un ensemble de paramètres propres au projet, qu il peut être utile de personnaliser (comme les couleurs d écran par exemple). Vous pouvez modifier ce fichier de deux manières différentes, soit directement avec un éditeur de texte, soit en passant par le menu Project, puis en cliquant sur SketchFlow Project Settings Une boîte de dialogue vous permettra de modifier quelques-unes des options présentes dans le fichier XML (voir Figure 10.9). Figure 10.9 Options propres au projet SketchFlow en cours. Vous allez modifier certains des paramètres afin de travailler plus confortablement. Comme nous l avons précisé, le site est créé avec un code à quatre couleurs. Elles vont nous être utiles pour générer une carte de navigation avec ce code couleur. Si vous préférez modifier le fichier, vous pouvez remplacer les quatre dernières couleurs définies au sein de la balise VisualTags par celles exposées ci-dessous : <VisualTags> <VisualTag> <Name>OurServices</Name> <Color>FFFF9711</Color> </VisualTag> <VisualTag> <Name>MyCar</Name> <Color>FF48FEFF</Color> </VisualTag> <VisualTag>

286 Partie II Interactivité et création graphique <Name>Eco2Way</Name> <Color>FF2EF872</Color> </VisualTag> <VisualTag> <Name>Innovation</Name> <Color>FFF93CA5</Color> </VisualTag> </VisualTags> Sauvergardez le fichier, puis retournez dans Blend. Celui-ci a détecté la modification et vous propose de recharger le fichier Sketch.Flow. Dans la boîte de dialogue, cliquez sur OK ; si tout ce passe bien le fichier est rechargé proprement. Si les nœuds XML sont mal formatés, Blend vous proposera de recréer un nouveau fichier. Nous verrons le résultat de cette opération dans très peu de temps. Il reste encore un paramètre à régler avant de commencer notre prototype. Chaque écran correspondra à un croquis fourni par le client, l idéal serait que chaque nouvel écran que nous générerons possède, par défaut, des dimensions identiques à celles des croquis. Il existe plusieurs manières de procéder. Vous pouvez, par exemple, définir des dimensions d écran par défaut pour l ensemble des projets SketchFlow. Dans la barre du haut, choisissez Tools > Options Dans la fenêtre qui s affiche, sélectionnez l onglet SketchFlow. Une série d options propres à ce type de projets est proposée. Cochez l option Default size for new screens, puis définissez une largeur de 660 pixels et une hauteur de 517 pixels. Ces dimensions correspondent aux croquis réalisés par le client et retouchés par nos soins. Tous les écrans que nous générerons possèderont par défaut ces dimensions (voir Figure 10.10). Figure 10.10 Options de mise en pages propres à l ensemble des projets SketchFlow. Cette méthode présente un désavantage : si vous travaillez avec de nombreux prototypes aux dimensions différentes, ce réglage n est pas vraiment pertinent et vous devrez le changer régulièrement. Vous pouvez également utiliser la carte de navigation représentée par le panneau Sketch- Flow Map. Cliquez sur Screen 1. Dans l arbre visuel, sélectionnez le UserControl racine et affectez-lui une largeur (Width) de 660 pixels et une hauteur (Height) de 517 pixels. Faites ensuite un clic-droit sur Screen 1 dans la carte, puis cliquez sur l option Set As default Navigation Screen Size. Cette option modifie les valeurs de l une des balises XML contenues dans le fichier Sketch. flow. Lorsque vous concevrez de nouveaux écrans, ceux-ci auront par défaut des dimensions correspondantes à l écran d origine. L avantage de ce réglage est d être lié aux propriétés du projet. Il est donc rechargé par défaut lorsque vous ouvrirez à nouveau le projet dans Blend.