Architecture & DesignCréation collaborative de maquettesefficacesCédric Leblond – Consultant ALM Happly
Création collaborative de maquettes efficacesHapply, l’Expert Microsoft du Grand-Est !Société de Conseil de De Gamma Group...
Création collaborative de maquettes efficacesStoryboard avec PowerPoint• Ensemble de formes prédéfinies fournies (Possibil...
Création collaborative de maquettes efficacesStoryboard avec SketchFlow• Simulation détaillée des comportements et différe...
Création collaborative de maquettes efficacesDémos !
Création collaborative de maquettes efficacesAccélérer la création et l’adhésion• Charte graphique intégrée ou style Filai...
Création collaborative de maquettes efficacesOutils de collaboration et commentaires• Outils intégrés de commentaires• Out...
Création collaborative de maquettes efficacesDémos !
Création collaborative de maquettes efficacesCycle de vie du StoryboardEquipe UtilisateursDesignerSPRINT FEEDBACK
Création collaborative de maquettes efficacesRésuméVS et TFS 2012 proposent des outils simple etcollaboratifs de maquettag...
UN PROJET,DES QUESTIONS ?Retrouvez toutes lesémissions survisualstudio.fr/bonapp
Prochain SlideShare
Chargement dans…5
×

Bon App - Création collaborative de maquettes efficaces

604 vues

Publié le

VS et TFS 2012 proposent des outils simples et collaboratifs de maquettage. Ils permettent de construire, visualiser et valider les scénarios d’utilisation.
Les outils de collaboration permettent d'obtenir d'en améliorer la qualité en obtenant des retours et remarques.

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
604
Sur SlideShare
0
Issues des intégrations
0
Intégrations
42
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Nous allons discuter de la création de maquettes dynamiques pour les interfaces Modern UI. Nous verrons comment les rendre efficaces, c’est-à-dire qu’elles permettent de valider le fonctionnement avant l’implémentation. Et comment obtenir l’adhésion et des retours de la part des personnes impliqués grâce à la collaboration. Je vais montrer aussi comment les outils de la gamme Visual Studio 2012 Premium et la plateforme Microsoft nous y aident.Prép démos:Ouvrir la maquette W8 et WPOuvrir les sites sur le sujet ….Ouvrir Blend for Visual Studio
  • Société de l’Est de la France pure player MicrosoftExpertise et reconnaissance sur la plateforme MS (cf domaine de compétence)Activité de services + centre de formation CPLS (certifiée MS)Membre des cercles ALM, AzureCentre des usages sur Strasbourg !Intervention sur des missions d’expertises, d’audit, de mise en œuvre de solutions Microsoft
  • Cela permet de créer de maquettes rapidement avec un outil connu de la pluspart des personnes impliqués.Les formes prédéfinies et ses propres formes personnalisés permettent une grande réutilisation. Les animations de PowerPoint apporte une simulation du comportement.L’animation/maquette est intégrée à la plateforme TFS et sa traçabilité au travers du lien avec les éléments de travail.Le fait d’utiliser une définition des spécifications/exigences très visuelle augmente la qualité de communication entre les acteurs du projet et clarifie les besoins utilisateurs.
  • Depuis l’update 2, l’outil sketchflow de création de prototypes d’interfaces (mockups) est intégré à Blend for Visual Studio.Il est possible d’importer depuis powerpoint ou adobe photoshopillustrator.Et de l’exporter vers Word, des images Et le convertir en projet de développement WPF/Silverlight.Préférer Sketchflow à PowerPoint: - Prototypage plus avancé de l’application, il s’applique mieux aux applications avec des règles métiers ou de gestion plus complexes. - Typiquement une application client lourd WPF de gestion de prise de commandes, avec beaucoup d’écrans et une logique d’enchainement à choix multiples sera mieux décrite.Préférer PowerPoint : Sketflow sera plus long de mettre en œuvre ce type d’animation, et demandera un peu plus de compétences (90% connaissent PowerPoint) Applications très graphique avec une navigation simple (Utilisé chez Happly pour les maquettes Windows Store/Windows Phone)http://msdn.microsoft.com/en-us/library/ee341458(v=expression.40).aspx http://badger.developpez.com/tutoriels/dotnet/expression-blend-4-sketchflow/
  • Montrer la maquette W8 de la présentation l’application Happly Box, celle de WP8. Utilisation des modèles masterpages, des formes prédéfinies (store, phone, web) d’autres disponibles, personnalisées et leur partage, animations, lien avec TFS. Conseil en créer une par scénario principale (montrer celle sur saisie des actvivités)Montrer l’application d’exemple (pas d’autorisation). Bien montrer que je peux vraiment interagir (cliquer, entrer du texte, …)Montrer les animations automatisés, la création d’un nouvel écran et liens dans le scénarios (déplacement sur clique d’un bouton), l’écran à plusieurs états, import et export (montrer Word).Montrer la création plus-tôt filaire par défaut. Cela permet au responsable de produit/fonctionnel de se concentrer sur le comportement puis en parallèle au designer de changer les styles!Conclusion : on sait maintenant créer des prototypes d’interfaces dynamiques riches, il s’agit maintenant d’obtenir le retour et remarques.
  • Juste avant quelquespoints pour accélérer la création et surtout l’adhésion des personnes impliquées (qui les incitera à faire des retours)Intégrer une charte graphique/ergonomie séduit plus sur des applications Modern UI, c’est pour moi incontournable (cela fait partie de la valeur ajoutée de l’application)Accélérer == Réutiliser  modèles, formes et composantsStyles, thèmes : cohérence facilite la compréhension, l’utilisation intuitive donc l’adoption
  • Comment collaborer et obtenir des commentaires de l’équipe, puis des personnes impliqués (voir plus largement les futurs utilisateurs).Visual Studio ALM et la plateforme Microsoft en offre plusieurs, et pour chaque usage et objectifs.Créer élément de travail depuis l’outil sketchflow :http://msdn.microsoft.com/en-us/library/ff723954(v=expression.40).aspx
  • Montrer très vite la révision dans PowerPoint et partage sous SharePoint.Montrer pas à pas l’outil de feedback intégré dans Skethflow qui permet d’en créer de les partager grâce à Sharepoint. Créer un élément de travail depuis un feedback de sketchflow.Montrer un feedback depuis l’outil de commentaire de TFS (demande, ) avantage complètement intégré au cycle de TFS et tracé (mais pas dans la maquette)Montrer les commentaires fil de discussion sous Yammer et les notes directement dans le fichier.
  • Afin de vous donner un exemple concret de choix, voici le processus qui s’est établis (par itération en interne) sur les applications développées pour nous:1/ le design est créé via powerpoint et/ou SketchFlow et le publie sur l’intranet (SharePoint), charte graphique intégrée.2/ pendant le Sprint/itération l’équipe (dev, CP, responsable produit) donnent leur retour (à travers le Feedback client, ou directement depuis l’outils de révision intégré qui est préféré en général)3/ Une fois go du responsable produit, le prototype est publié sur le réseau social pour obtenir les retours des futurs utilisateurs.4/ les retours sont faits par commentaires en réponse sur le site ou outils intégrés.
  • La gamme Visual Studio ALM propose des outils simples pour créer des maquettes en mode collaboratif.Elles permettent clarifier et valider les besoins utilisateurs avant l’implémentation de l’application.
  • Bon App - Création collaborative de maquettes efficaces

    1. 1. Architecture & DesignCréation collaborative de maquettesefficacesCédric Leblond – Consultant ALM Happly
    2. 2. Création collaborative de maquettes efficacesHapply, l’Expert Microsoft du Grand-Est !Société de Conseil de De Gamma Group11 ans d’expertise – création en 2001 (anciennementEvaluant)Un Groupe de plus de 30 collaborateurs présents sur leGrand-EstPlus de 140 clients - CA > 2,5 M€ en 2011Un acteur local à portée nationale2 Grands domaines d’activité : Services & FormationCentre des Usages MicrosoftCentre de Formation certifié MicrosoftCentre de Certification Prometric
    3. 3. Création collaborative de maquettes efficacesStoryboard avec PowerPoint• Ensemble de formes prédéfinies fournies (Possibilité dajoutde formes personnalisées)• Simulation du comportement par les animations• Liens avec les éléments de travail de TFS (Traçabilité)Bénéfices :• Amélioration de la communication entre les équipesde développement et les différents acteurs du projet• Clarification des besoins des utilisateurs par lacréation de prototypes dinterfaces graphiques
    4. 4. Création collaborative de maquettes efficacesStoryboard avec SketchFlow• Simulation détaillée des comportements et différentsscénarios• Création de prototypes dinterfaces graphiques• Importer depuis PowerPoint, Photoshop, Illustrator• Exporter vers Word et vers un projet Visual StudioBénéfices :• Expression précise des scénarios complexes defonctionnalités utilisateurs• Interactions riches avec l’interface possibles
    5. 5. Création collaborative de maquettes efficacesDémos !
    6. 6. Création collaborative de maquettes efficacesAccélérer la création et l’adhésion• Charte graphique intégrée ou style Filaire?• Utiliser les modèles réutilisables• Mises en page (PowerPoint)• Modèles de page (SketchFlow)• Créer une forme personnalisée, un composant pour chaque élément réutilisable• Utiliser les styles et thèmes
    7. 7. Création collaborative de maquettes efficacesOutils de collaboration et commentaires• Outils intégrés de commentaires• Outil de révision de PowerPoint, liens vers des éléments de travail depuis le fichier• Outil de Feedback de SketchFlow, export des commentaires dans un élément detravail• Feedback client, intégré à TFS• SharePoint, intranet d’entreprise• Yammer, réseau social d’entreprise
    8. 8. Création collaborative de maquettes efficacesDémos !
    9. 9. Création collaborative de maquettes efficacesCycle de vie du StoryboardEquipe UtilisateursDesignerSPRINT FEEDBACK
    10. 10. Création collaborative de maquettes efficacesRésuméVS et TFS 2012 proposent des outils simple etcollaboratifs de maquettage. Ils permettent deconstruire visualiser et valider les scénarios d’utilisationavant leur implémentation.Pour aller plus loin :• Contact : c.leblond@happly.fr, Twitter: @leblond_c• http://cedricleblond.blogspot.com• http://visualstudio.fr/bonappCe qu’on a vu, ce qu’il faut savoir
    11. 11. UN PROJET,DES QUESTIONS ?Retrouvez toutes lesémissions survisualstudio.fr/bonapp

    ×