SlideShare une entreprise Scribd logo
Architecture & Design
Création collaborative de maquettes
efficacesCédric Leblond – Consultant ALM Happly
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
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
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
Création collaborative de maquettes efficaces
Démos !
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
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
Création collaborative de maquettes efficaces
Démos !
Création collaborative de maquettes efficaces
Cycle de vie du Storyboard
Equipe Utilisateurs
Designer
SPRINT FEEDBAC
K
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
UN PROJET,
DES QUESTIONS ?
Retrouvez toutes les
émissions sur
visualstudio.fr/bonapp

Contenu connexe

En vedette

La rempailleuse par guy de maupassant
La rempailleuse par guy de maupassantLa rempailleuse par guy de maupassant
La rempailleuse par guy de maupassant
Tison Bruno
 
Www.mondebatterie.com dell-alienware-m11x.html
Www.mondebatterie.com dell-alienware-m11x.htmlWww.mondebatterie.com dell-alienware-m11x.html
Www.mondebatterie.com dell-alienware-m11x.htmltodone
 
Arb 8 virtu
Arb 8 virtuArb 8 virtu
Arb 8 virtu
gabogadosv
 
Deportes urbanos
Deportes urbanosDeportes urbanos
Deportes urbanos
GAFECZA
 
157 cards with-recommendations_to_employees_fr
157 cards with-recommendations_to_employees_fr157 cards with-recommendations_to_employees_fr
157 cards with-recommendations_to_employees_frVincent Ducrey
 
Presentacion olivared
Presentacion olivared Presentacion olivared
Presentacion olivared
Guadalinfo Escañuela
 
Mobile Marketing - Marketing
Mobile Marketing - MarketingMobile Marketing - Marketing
Mobile Marketing - Marketing
Montserrat Peñarroya
 
Présentation du 26 septembre 2012 - DoYouSeo Camp
Présentation du 26 septembre 2012 - DoYouSeo CampPrésentation du 26 septembre 2012 - DoYouSeo Camp
Présentation du 26 septembre 2012 - DoYouSeo Camp
Bruno Hug
 
Pourquoi voter
Pourquoi voterPourquoi voter
Pourquoi voter
Ismahen Chaabouni
 
Présentation webart
Présentation webartPrésentation webart
Présentation webartMark Héting
 
El constructivismo en el proceso enseñanza aprendizaje, libro
El constructivismo en el proceso enseñanza aprendizaje, libroEl constructivismo en el proceso enseñanza aprendizaje, libro
El constructivismo en el proceso enseñanza aprendizaje, libroLilia G. Torres Fernández
 
UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01
SGI Negocio
 
Sexenio Revolucionario
Sexenio RevolucionarioSexenio Revolucionario
Sexenio Revolucionario
Luz García
 
Réseaux sociaux, une soupe aux ingrédients variés et surprenants
Réseaux sociaux, une soupe aux ingrédients variés et surprenantsRéseaux sociaux, une soupe aux ingrédients variés et surprenants
Réseaux sociaux, une soupe aux ingrédients variés et surprenants
Antoine Servais
 
Fiche pédagogique 08b questionnement du sujet
Fiche pédagogique 08b questionnement du sujetFiche pédagogique 08b questionnement du sujet
Fiche pédagogique 08b questionnement du sujetcourgette
 
5 raisons pour choisir l'agence web ICE
5 raisons pour choisir l'agence web ICE5 raisons pour choisir l'agence web ICE
5 raisons pour choisir l'agence web ICE
dreal
 

En vedette (20)

La rempailleuse par guy de maupassant
La rempailleuse par guy de maupassantLa rempailleuse par guy de maupassant
La rempailleuse par guy de maupassant
 
Www.mondebatterie.com dell-alienware-m11x.html
Www.mondebatterie.com dell-alienware-m11x.htmlWww.mondebatterie.com dell-alienware-m11x.html
Www.mondebatterie.com dell-alienware-m11x.html
 
Arb 8 virtu
Arb 8 virtuArb 8 virtu
Arb 8 virtu
 
Theme 7
Theme 7Theme 7
Theme 7
 
Deportes urbanos
Deportes urbanosDeportes urbanos
Deportes urbanos
 
157 cards with-recommendations_to_employees_fr
157 cards with-recommendations_to_employees_fr157 cards with-recommendations_to_employees_fr
157 cards with-recommendations_to_employees_fr
 
diapo
diapodiapo
diapo
 
Presentacion olivared
Presentacion olivared Presentacion olivared
Presentacion olivared
 
Le réseau koezio rhone
Le réseau koezio rhoneLe réseau koezio rhone
Le réseau koezio rhone
 
Mobile Marketing - Marketing
Mobile Marketing - MarketingMobile Marketing - Marketing
Mobile Marketing - Marketing
 
Présentation du 26 septembre 2012 - DoYouSeo Camp
Présentation du 26 septembre 2012 - DoYouSeo CampPrésentation du 26 septembre 2012 - DoYouSeo Camp
Présentation du 26 septembre 2012 - DoYouSeo Camp
 
Pourquoi voter
Pourquoi voterPourquoi voter
Pourquoi voter
 
Présentation webart
Présentation webartPrésentation webart
Présentation webart
 
El constructivismo en el proceso enseñanza aprendizaje, libro
El constructivismo en el proceso enseñanza aprendizaje, libroEl constructivismo en el proceso enseñanza aprendizaje, libro
El constructivismo en el proceso enseñanza aprendizaje, libro
 
UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01
 
Wikipedia Projects
Wikipedia ProjectsWikipedia Projects
Wikipedia Projects
 
Sexenio Revolucionario
Sexenio RevolucionarioSexenio Revolucionario
Sexenio Revolucionario
 
Réseaux sociaux, une soupe aux ingrédients variés et surprenants
Réseaux sociaux, une soupe aux ingrédients variés et surprenantsRéseaux sociaux, une soupe aux ingrédients variés et surprenants
Réseaux sociaux, une soupe aux ingrédients variés et surprenants
 
Fiche pédagogique 08b questionnement du sujet
Fiche pédagogique 08b questionnement du sujetFiche pédagogique 08b questionnement du sujet
Fiche pédagogique 08b questionnement du sujet
 
5 raisons pour choisir l'agence web ICE
5 raisons pour choisir l'agence web ICE5 raisons pour choisir l'agence web ICE
5 raisons pour choisir l'agence web ICE
 

Similaire à Bon App - Création collaborative de maquettes efficaces

Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
Vanessa Ilmany
 
"Visio"-nnez vos données et facilitez vos prises de decision
"Visio"-nnez vos données et facilitez vos prises de decision"Visio"-nnez vos données et facilitez vos prises de decision
"Visio"-nnez vos données et facilitez vos prises de decision
Nicolas Georgeault
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
Idean France
 
Stages 2015
Stages 2015Stages 2015
Stages 2015
Fabian Restiaux
 
Innover avec SharePoint 2013
Innover avec SharePoint 2013Innover avec SharePoint 2013
Innover avec SharePoint 2013
GSoft
 
Slides des Rencontres du groupe MeetUp de Clamart des Administrateurs Project
Slides des Rencontres du groupe MeetUp de Clamart des Administrateurs ProjectSlides des Rencontres du groupe MeetUp de Clamart des Administrateurs Project
Slides des Rencontres du groupe MeetUp de Clamart des Administrateurs Project
Didier Maignan
 
OnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusOnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processus
Nomia
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontend
Louis Chenais
 
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Microsoft Ideas
 
Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013
Charbel Abdo
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
Use Age
 
Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4
Blue Forest
 
Patterns Agiles avec Visual Studio 2012 et TFS 2012
Patterns Agiles avec Visual Studio 2012 et TFS 2012Patterns Agiles avec Visual Studio 2012 et TFS 2012
Patterns Agiles avec Visual Studio 2012 et TFS 2012
Microsoft
 
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Microsoft Technet France
 
Réussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoCRéussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoC
Owlie
 
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Microsoft Décideurs IT
 
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Microsoft Technet France
 
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
Vincent Biret
 
Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...
Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...
Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...
Bonitasoft
 

Similaire à Bon App - Création collaborative de maquettes efficaces (20)

Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
 
"Visio"-nnez vos données et facilitez vos prises de decision
"Visio"-nnez vos données et facilitez vos prises de decision"Visio"-nnez vos données et facilitez vos prises de decision
"Visio"-nnez vos données et facilitez vos prises de decision
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Stages 2015
Stages 2015Stages 2015
Stages 2015
 
MS Project VS ProjectLibre
MS Project VS ProjectLibreMS Project VS ProjectLibre
MS Project VS ProjectLibre
 
Innover avec SharePoint 2013
Innover avec SharePoint 2013Innover avec SharePoint 2013
Innover avec SharePoint 2013
 
Slides des Rencontres du groupe MeetUp de Clamart des Administrateurs Project
Slides des Rencontres du groupe MeetUp de Clamart des Administrateurs ProjectSlides des Rencontres du groupe MeetUp de Clamart des Administrateurs Project
Slides des Rencontres du groupe MeetUp de Clamart des Administrateurs Project
 
OnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusOnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processus
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontend
 
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
 
Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4
 
Patterns Agiles avec Visual Studio 2012 et TFS 2012
Patterns Agiles avec Visual Studio 2012 et TFS 2012Patterns Agiles avec Visual Studio 2012 et TFS 2012
Patterns Agiles avec Visual Studio 2012 et TFS 2012
 
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
 
Réussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoCRéussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoC
 
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
 
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
 
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
 
Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...
Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...
Bonnes pratiques pour gérer l'automatisation de vos processus - Chapitre 3 - ...
 

Plus de Cédric Leblond

Migrer de Jenkins vers Azure DevOps les Builds Java
Migrer de Jenkins vers Azure DevOps les Builds JavaMigrer de Jenkins vers Azure DevOps les Builds Java
Migrer de Jenkins vers Azure DevOps les Builds Java
Cédric Leblond
 
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Cédric Leblond
 
Mes outils électroniques Agile, tout un programme!
Mes outils électroniques Agile, tout un programme!Mes outils électroniques Agile, tout un programme!
Mes outils électroniques Agile, tout un programme!
Cédric Leblond
 
Mes Outils Kanban, tout un programme !
Mes Outils Kanban, tout un programme !Mes Outils Kanban, tout un programme !
Mes Outils Kanban, tout un programme !
Cédric Leblond
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
Cédric Leblond
 
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
Cédric Leblond
 
Agile Tour 2012 Paris - Nouveaux Outils Agile MS
Agile Tour 2012 Paris - Nouveaux Outils Agile MS Agile Tour 2012 Paris - Nouveaux Outils Agile MS
Agile Tour 2012 Paris - Nouveaux Outils Agile MS
Cédric Leblond
 
Je démarre avec TFS 2012
Je démarre avec TFS 2012Je démarre avec TFS 2012
Je démarre avec TFS 2012
Cédric Leblond
 
Actionner ses processus qualité avec Visual Studio ALM
Actionner ses processus qualité avec Visual Studio ALMActionner ses processus qualité avec Visual Studio ALM
Actionner ses processus qualité avec Visual Studio ALM
Cédric Leblond
 

Plus de Cédric Leblond (9)

Migrer de Jenkins vers Azure DevOps les Builds Java
Migrer de Jenkins vers Azure DevOps les Builds JavaMigrer de Jenkins vers Azure DevOps les Builds Java
Migrer de Jenkins vers Azure DevOps les Builds Java
 
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
 
Mes outils électroniques Agile, tout un programme!
Mes outils électroniques Agile, tout un programme!Mes outils électroniques Agile, tout un programme!
Mes outils électroniques Agile, tout un programme!
 
Mes Outils Kanban, tout un programme !
Mes Outils Kanban, tout un programme !Mes Outils Kanban, tout un programme !
Mes Outils Kanban, tout un programme !
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
 
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
 
Agile Tour 2012 Paris - Nouveaux Outils Agile MS
Agile Tour 2012 Paris - Nouveaux Outils Agile MS Agile Tour 2012 Paris - Nouveaux Outils Agile MS
Agile Tour 2012 Paris - Nouveaux Outils Agile MS
 
Je démarre avec TFS 2012
Je démarre avec TFS 2012Je démarre avec TFS 2012
Je démarre avec TFS 2012
 
Actionner ses processus qualité avec Visual Studio ALM
Actionner ses processus qualité avec Visual Studio ALMActionner ses processus qualité avec Visual Studio ALM
Actionner ses processus qualité avec Visual Studio ALM
 

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

  1. 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
  2. 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
  3. 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.
  4. 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/
  5. 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.
  6. 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
  7. 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
  8. 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.
  9. 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.
  10. 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.