Bon App - Création collaborative de maquettes efficaces
•
0 j'aime•803 vues
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.
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Bon App - Création collaborative de maquettes efficaces
Similaire à Bon App - Création collaborative de maquettes efficaces (20)
Plus de Cédric Leblond
Plus de Cédric Leblond (9)
Bon App - Création collaborative de maquettes efficaces
- 1. Architecture & Design Création collaborative de maquettes efficacesCédric Leblond – Consultant ALM Happly
- 2. Création collaborative de maquettes efficaces Happly, l’Expert Microsoft du Grand-Est ! Société de Conseil de De Gamma Group 11 ans d’expertise – création en 2001 (anciennement Evaluant) Un Groupe de plus de 30 collaborateurs présents sur le Grand-Est Plus de 140 clients - CA > 2,5 M€ en 2011 Un acteur local à portée nationale 2 Grands domaines d’activité : Services & Formation Centre des Usages Microsoft Centre de Formation certifié Microsoft Centre de Certification Prometric
- 3. Création collaborative de maquettes efficaces Storyboard avec PowerPoint • Ensemble de formes prédéfinies fournies (Possibilité d'ajout de 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 équipes de développement et les différents acteurs du projet • Clarification des besoins des utilisateurs par la création de prototypes d'interfaces graphiques
- 4. Création collaborative de maquettes efficaces Storyboard avec SketchFlow • Simulation détaillée des comportements et différents scénarios • Création de prototypes d'interfaces graphiques • Importer depuis PowerPoint, Photoshop, Illustrator • Exporter vers Word et vers un projet Visual Studio Bénéfices : • Expression précise des scénarios complexes de fonctionnalités utilisateurs • Interactions riches avec l’interface possibles
- 5. Création collaborative de maquettes efficaces Démos !
- 6. Création collaborative de maquettes efficaces Accé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. Création collaborative de maquettes efficaces Outils 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 de travail • Feedback client, intégré à TFS • SharePoint, intranet d’entreprise • Yammer, réseau social d’entreprise
- 8. Création collaborative de maquettes efficaces Démos !
- 9. Création collaborative de maquettes efficaces Cycle de vie du Storyboard Equipe Utilisateurs Designer SPRINT FEEDBAC K
- 10. Création collaborative de maquettes efficaces Résumé VS et TFS 2012 proposent des outils simple et collaboratifs de maquettage. Ils permettent de construire visualiser et valider les scénarios d’utilisation avant leur implémentation. Pour aller plus loin : • Contact : c.leblond@happly.fr, Twitter: @leblond_c • http://cedricleblond.blogspot.com • http://visualstudio.fr/bonapp Ce qu’on a vu, ce qu’il faut savoir
- 11. UN PROJET, DES QUESTIONS ? Retrouvez toutes les émissions sur visualstudio.fr/bonapp
Notes de l'éditeur
- 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.