MultiTouch SNCF - REX Steria et I-Breed

4 002 vues

Publié le

Ce document présente le retour d'expérience de l'équipe Steria et I-Breed sur la conception d'une application tactile multi touch dans le cadre du concours SNCF "Inventez la nouvelle façon d'acheter des billets en Agence SNCF"

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

Aucun téléchargement
Vues
Nombre de vues
4 002
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 307
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • A partir des spécifications d’écrans Sur les propositions de design En cohérence avec la faisabilite technique Evaluation et test informels pour valider nos propositions
  • Guidage du process (enchainement par défaut des pages) Instructions pour accompagner Feedback et indices de tactile
  • Accès à une BLS pour avoir un élément de référence des fonctionnalités, informations et étapes actuelles du processus de commande
  • les critères/ éléments qui permettent de composer le voyage une zone de « travail » qui permet de préciser la valeur de chaque critère du voyage, de visualiser le détail d’un train etc une barre de suivi de progression qui permet à l’utilisateur d’identifier les éléments qu’il doit encore renseigner pour composer son voyage un « panier » qui regroupe les différents trains que l’utilisateur a sélectionnés et qu’il va comparer avant de sélectionner le voyage définitif un conseiller virtuel pour la partie assistance / conseil des scénarios Définition des interactions tactiles à la fin
  • Univers de couleur : couleurs chaudes, confortables rassurantes en cohérence avec les codes couleur de la scnf look : deux pistes à explorer : l’utilisateur est ancré dans la réalite => les objets présentés sont le plus proches possibles du monde réel. Par exemple l’écran d’accueil représente la gare du futur dans laquelle l’utilisateur va choisir de l’orienter vers le conseiller, l’espace borne de résa, les départs immédiats etc. Le calendrier pour sélectionne les dates du voyage ressemble à un calendrier papier classique, les cartes de réduction à celles du monde réel etc on reste sur les mêmes idées, mais plus symbolique pour faciliter au maximum la reconnaissance Design : On reste sur les pistes de desing proposées : Un design proche de l’univers SNCF. Une expérience visuelle illustrée. Un graphisme « tactile » : Volume. Transparence. Éléments interactifs dimensionnés pour le tactile. Un design proche de l’univers SNCF. Une expérience visuelle illustrée. Un graphisme « tactile » : Volume. Transparence. Éléments interactifs dimensionnés pour le tactile.
  • Etre proche de la réalité, du quotidien de l’utilisateur, par exemple : Calendrier pour les dates Le chemin d’un critère à l’autre qui jalonne la construction du trajet Le billet de train Le dossier/ panier pour y mettre les billets Un design proche de l’univers SNCF. Une expérience visuelle illustrée. Un graphisme « tactile » : Volume. Transparence. Éléments interactifs dimensionnés pour le tactile.
  • Langages : C# : pour mémoire, C# est une langage de programmation orienté objet à typage fort, créé par Microsoft. WPF : initiales de Windows Presentation Foundation. Il s’agit de la nouvelle spécification graphique de .NET 3.0. Intègre le langage descriptif XAML. XAML : Langage descriptif basé sur le XML. Il y a une hiérarchie dans les éléments, c’est-à-dire qu’il y a un élément racine , et que chacun des autres composants est contenu dans un et un seul composant parent. Outils : Expression Design : comme présenté plus tôt par Tristan, il s’agit d’un outil de création et d’illustration professionnel. Expression Blend : outil de conception d’interfaces utilisateurs et d’intégration. Supporte la version 3.5 de .NET. Visual Studio 2010 : environnement de développement intégré de Microsoft. Encore en beta 2. .NET 4.0 et WPF 4 sont intégrés (WPF 4 est la version à partir de laquelle on peut faire du Multitouch). Visual Studio 2008 : Version antérieure de Visual Studio. Supporte .NET jusqu’à la version 3.5 : il n’y a pas de Multitouch.
  • Pendant les brainstorms, et en attendant les premiers écrans, l’équipe technique s’est occupée : Du chargement des données (les données étaient fournies au format Excel : il s’agissait de les mettre au format csv et d’en optimiser le chargement au lancement de l’application) Du diagramme de classes De se familiariser avec WPF : Affichage des données chargées avec les contrôles de base Essais avec le Multitouch Nous n’avions pas d’écran tactile à notre disposition au début du projet. Pour procéder aux premiers tests et appréhender la technologie Multitouch, nous avons utilisé un outil permettant de simuler le Multitouch par l’intermédiaire de plusieurs souris : chaque souris représente donc un point de contact, ce qui permet de simuler des manipulations comme la rotation et le zoom. Voici une vidéo montrant ce que nous sommes parvenus à faire : c’est très moche, d’accord, mais nous avons pu en conclure que le Multitouch est quelque chose d’assez aisé à mettre en place. Nous pouvions donc nous concentrer sur l’intégration des écrans et le code métier.
  • Vidéo sur les PoC
  • Comme au cours de tout projet, nous avons rencontré quelques problèmes et difficultés. Après vous les avoir présenté, je vais vous parler des solutions que nous avons appliqué.
  • Problèmes de compatibilité entre VS2010 (utilisé pour le Multitouch avec .NET 4.0) et Blend 3 (qui ne supportait que la version 3.5 de .NET). Introduction d’une variable de compilation permettant de compiler certains bouts de code en fonction de la version de .NET utilisée. Plusieurs solutions (.sln) en parallèle : La solution .NET 4.0 avec VS2010 La solution .NET 3.5 avec Blend 3 et VS2008.
  • Translation du contrôle de départ à faire tourner à l’extérieur de l’écran. Rotation de deux VisualBrush (qui n’est qu’une image du contrôle à un instant donné => optimisation), représentant le contrôle à faire tourner. Translation du contrôle d’arrivée à faire tourner à l’intérieur de l’écran.
  • En fonction du matériel, certains boutons ou certaines zones peuvent être moins réceptives (ne réagissent pas) aux interactions utilisateurs? Ceci peut être dû à des zones trop petites. Pour régler le problème, nous avons agrandi les zones tactiles. On voit sur l’impression d’écran que la zone réceptive au contact (ici, en bleu) a été agrandie par rapport au bouton affiché. Comme ça, même Sophie-Laure arrive à cliquer sur les boutons !
  • Pour rappel, le XAML est basé sur le XML. Il y a une hiérarchie dans les éléments, chaque contrôle ou composant se trouve dans un et un seul parent. Un élément ne peut changer de parent. Nous avions parfois besoin de déplacer des composants qui étaient contenus dans des listes et les déposer en dehors du contrôle parent. Par exemple : les trains avec leurs différentes classes. Lorsqu’un utilisateur voulait acheter un billet, il devait le déplacer dans le panier. Nous avons donc créé un duplicata invisible du contrôle à déplacer et l’avons positionné au niveau de la fenêtre principale. A chaque déplacement (ou glisser / déposer), ce duplicata était affiché et prenait l’apparence de celui qu’il devait impersonnifier. A la fin de chaque manipulation, ce duplicata était à nouveau rendu invisible.
  • Les données fournies par la SNCF contenaient beaucoup trop de prix identiques, il n’y avait aucune différence entre un train partant à 6h du matin un lundi, et un train partant à 6h du soir un vendredi. Nous avons donc introduit une variation dans les prix, basée sur une sinusoïdale en fonction de l’heure de départ du train. Nous avons par conséquent pu mettre en place la jauge permettant de filtrer les trains par rapport à leurs prix. Démo !
  • MultiTouch SNCF - REX Steria et I-Breed

    1. 1. Concours SNCF multi touch
    2. 2. Agenda <ul><li>Le Film </li></ul><ul><li>Contexte général du projet </li></ul><ul><li>Le rôle des ergonomes </li></ul><ul><li>Le rôle des designers </li></ul><ul><li>Le rôle de l'équipe technique </li></ul>Steria - I-Breed - TechDays 2010
    3. 3. Le film Steria - I-Breed - TechDays 2010
    4. 4. Agenda <ul><li>Le Film </li></ul><ul><li>Contexte général du projet </li></ul><ul><li>Le rôle des ergonomes </li></ul><ul><li>Le rôle des designers </li></ul><ul><li>Le rôle de l'équipe technique </li></ul><ul><li>Conclusion </li></ul>Steria - I-Breed - TechDays 2010
    5. 5. Concours SNCF Multitouch « Imaginez le dialogue de vente de demain en boutiques SNCF » <ul><li>2 scénarios imposés : </li></ul><ul><ul><li>Scénario 1 : acheter un billet en libre-service de manière aussi rapide voire plus qu’avec une BLS avec un niveau d’ergonomie et de clarté supérieur. </li></ul></ul><ul><ul><li>Scénario 2 : modifier le contenu d’un voyage (dates, classe, nombre de personnes…) en libre service et de manière rapide </li></ul></ul>Steria - I-Breed - TechDays 2010
    6. 6. Notre volonté sur ce projet <ul><li>Chercher l’innovation au service des utilisateurs, dans leur réalité : </li></ul><ul><li>Une équipe pluridisciplinaire : </li></ul><ul><ul><li>Ergonomes du Pole Ergonomie de Steria </li></ul></ul><ul><ul><li>Graphistes/designers d’I-Breed </li></ul></ul><ul><ul><li>Architecte et développeurs du Centre de Compétences Microsoft de Steria </li></ul></ul><ul><ul><li>Et le commerce, le marketing, les chefs… </li></ul></ul><ul><li>Une méthode de travail </li></ul><ul><li>Un concept </li></ul><ul><li>… Et des idées, beaucoup d’efforts et de la bonne humeur ! </li></ul>Steria - I-Breed - TechDays 2010
    7. 7. Les principales contraintes <ul><li>Des technologies nouvelles </li></ul><ul><li>De nouveaux modes d’interaction </li></ul><ul><li>Des utilisateurs cibles aux compétences très variées à amener vers notre technologie </li></ul><ul><li>Des contraintes temporelles fortes </li></ul>Steria - I-Breed - TechDays 2010
    8. 8. Une méthode de travail « Agile » <ul><li>Implication de toute l’équipe </li></ul><ul><li>Equipe intégrée </li></ul><ul><li>Priorisation des fonctionnalités </li></ul><ul><li>Documentation : « juste ce qu’il faut » </li></ul><ul><li>Itérations courtes </li></ul><ul><li>Intégration continue… </li></ul><ul><li>… pour construire un produit qui fonctionne ! </li></ul>Steria - I-Breed - TechDays 2010
    9. 9. Notre concept <ul><li>Créer « Mon espace SNCF » : l’utilisateur doit pouvoir choisir le niveau de service SNCF et le niveau d’autonomie qu’il souhaite, tout en interagissant de manière intuitive avec l’interface </li></ul>Steria - I-Breed - TechDays 2010
    10. 10. Agenda <ul><li>Le Film </li></ul><ul><li>Contexte général du projet </li></ul><ul><li>Le rôle des ergonomes </li></ul><ul><li>Le rôle des designers </li></ul><ul><li>Le rôle de l'équipe technique </li></ul><ul><li>Conclusion </li></ul>Steria - I-Breed - TechDays 2010
    11. 11. Quel a été le rôle des ergonomes ? <ul><li>Piloter le projet comme « Product Owner » : </li></ul><ul><li>Répondre aux besoins fonctionnels actuels </li></ul><ul><li>Proposer de nouvelles fonctionnalités et modes d’interactions </li></ul><ul><li>Guider l’utilisateur dans son interaction avec l’application </li></ul><ul><li>Respecter les références actuelles du tactile </li></ul>Steria - I-Breed - TechDays 2010
    12. 12. Analyse de l’existant : identification des principales fonctionnalités Steria - I-Breed - TechDays 2010
    13. 13. Enrichissement et priorisation des fonctionnalités Steria - I-Breed - TechDays 2010
    14. 14. Des Spécifications d’IHM (pas très classiques…) [1] Le calendrier commence à la date du jour du jour et glisse sur 12 semaines (glisser pour faire défiler les semaines) La date par défaut est la date du jour [2] L’heure par défaut est la première heure. Pas de sélection par défaut des plages horaires [3] Le bouton « Ajouter retour » fait apparaître la zone bas de l’écran et le bouton se renomme en « Supprimer le retour » 1 2 3
    15. 15. Agenda <ul><li>Le Film </li></ul><ul><li>Contexte général du projet </li></ul><ul><li>Le rôle des ergonomes </li></ul><ul><li>Le rôle des designers </li></ul><ul><li>Le rôle de l'équipe technique </li></ul><ul><li>Conclusion </li></ul>Steria - I-Breed - TechDays 2010
    16. 16. I-Breed <ul><li>3 domaines d’expertise </li></ul><ul><ul><li>Le print </li></ul></ul><ul><ul><li>La transmission </li></ul></ul><ul><ul><li>Le design interactif </li></ul></ul><ul><li>1 équipe de 7 designers </li></ul><ul><li>5 ans d’existence </li></ul><ul><li>2 livres I-breed </li></ul><ul><ul><li>Prendre en main Expression Design </li></ul></ul><ul><ul><li>Prendre en main Expression Blend </li></ul></ul><ul><li>2 partenariats avec Microsoft </li></ul><ul><li>2 blogs </li></ul><ul><ul><li>www.r-u-experienced.net </li></ul></ul><ul><ul><li>www.technode.info </li></ul></ul><ul><li>Plein de clients heureux… </li></ul>Steria - I-Breed - TechDays 2010 Steria - I-Breed - TechDays 2010
    17. 17. Le rôle du design <ul><li>Le design est la valeur visuelle ajoutée d’un projet : </li></ul><ul><ul><li>Il définit sa personnalité. </li></ul></ul><ul><ul><li>Il conditionne la découverte du produit en attirant ou repoussant l’utilisateur, il est sa première impression. </li></ul></ul><ul><ul><li>Il est complémentaire des choix liés à l’ergonomie, il doit les mettre en valeur et éviter de les desservir. </li></ul></ul><ul><li>Le design tient une place charnière dans la vie d’un projet : </li></ul><ul><ul><li>En s’appuyant sur les spécifications ergonomiques, il met en place la couche graphique. </li></ul></ul><ul><ul><li>En amont du développement, le design proposé doit être réaliste et respecter les contraintes techniques liées au projet. </li></ul></ul>Steria - I-Breed - TechDays 2010 Steria - I-Breed - TechDays 2010
    18. 18. L’univers visuel du projet Steria - I-Breed - TechDays 2010 Steria - I-Breed - TechDays 2010
    19. 19. L’univers visuel du projet Steria - I-Breed - TechDays 2010 Steria - I-Breed - TechDays 2010
    20. 20. Expression Design : l’outil <ul><li>Un outil simple à appréhender. </li></ul><ul><li>Mise en place d’un graphisme vectoriel : </li></ul><ul><ul><li>Souplesse des retouches. </li></ul></ul><ul><ul><li>Redimensionnement possible sans perte de qualité. </li></ul></ul><ul><li>Un échange amélioré avec le développement : </li></ul><ul><ul><li>Technologie parfaitement compatible. </li></ul></ul><ul><ul><li>Possibilité d’export XAML. </li></ul></ul>Steria - I-Breed - TechDays 2010 Steria - I-Breed - TechDays 2010
    21. 21. Expression Design : l’outil Steria - I-Breed - TechDays 2010 Steria - I-Breed - TechDays 2010
    22. 22. Agenda <ul><li>Le Film </li></ul><ul><li>Contexte général du projet </li></ul><ul><li>Le rôle des ergonomes </li></ul><ul><li>Le rôle des designers </li></ul><ul><li>Le rôle de l'équipe technique </li></ul><ul><li>Conclusion </li></ul>Steria - I-Breed - TechDays 2010
    23. 23. Le Centre de Compétences Microsoft (CCMS) Steria - I-Breed - TechDays 2010 08/02/10 <ul><li>35 collaborateurs passionnés par les technologies Microsoft </li></ul><ul><li>1 objectif commun de certification des connaissances </li></ul><ul><li>1 portail communautaire pour favoriser l‘échange </li></ul><ul><li>Des processus projets issus de notre Système Qualité </li></ul><ul><li>1 usine logicielle basée sur Team System </li></ul><ul><li>La maitrise des développements agiles </li></ul>Une équipe d‘experts Des processus industriels <ul><li>Portail & Solutions collaboratives </li></ul><ul><li>Applications métiers innovantes </li></ul><ul><li>Business Intelligence </li></ul><ul><li>Ergonomie des applications </li></ul><ul><li>Gold Partner depuis 2004 </li></ul><ul><li>Exposant aux TechDays depuis 2007 </li></ul><ul><li>Partenaire SDPS pour le déploiement de SharePoint chez nos clients </li></ul>Des offres à valeur ajoutée Un partenariat avec Microsoft Un partenaire de choix
    24. 24. Les langages et technologies utilisés <ul><li>Langages / technologies utilisés : </li></ul><ul><ul><li>C# .NET 4.0 </li></ul></ul><ul><ul><li>WPF (XAML) </li></ul></ul><ul><li>Outils utilisés : </li></ul><ul><ul><li>Windows 7 </li></ul></ul><ul><ul><li>Expression Design </li></ul></ul><ul><ul><li>Expression Blend </li></ul></ul><ul><ul><li>VS 2010 </li></ul></ul><ul><ul><li>VS 2008 </li></ul></ul>Steria - I-Breed - TechDays 2010
    25. 25. Qu’a fait l’équipe technique au début du projet… <ul><li>Back Office : </li></ul><ul><ul><li>Chargement des données (depuis Excel) </li></ul></ul><ul><ul><li>Diagramme de classes </li></ul></ul><ul><ul><li>Familiarisation avec WPF </li></ul></ul><ul><li>Proof of concept sur le Multitouch : </li></ul><ul><ul><li>Premiers essais sans écran tactile : simulation de plusieurs contacts grâce à multitouchvista ( http://multitouchvista.codeplex.com ) </li></ul></ul><ul><ul><li>Ensuite un POC sur écran tactile 23 pouces </li></ul></ul>Steria - I-Breed - TechDays 2010
    26. 26. Proof Of Concept Steria - I-Breed - TechDays 2010
    27. 27. Problèmes rencontrés et les solutions mises en œuvre <ul><li>Compatibilité entre VS2010 et Blend 3 </li></ul><ul><li>La rotation 3D du panneau central </li></ul><ul><li>Agrandissement des zones tactiles </li></ul><ul><li>Duplication des billets </li></ul><ul><li>Introduction d’une variation dans les prix </li></ul>Steria - I-Breed - TechDays 2010
    28. 28. Problèmes de compatibilité entre VS2010 et Blend 3 Steria - I-Breed - TechDays 2010
    29. 29. Rotation 3D (« Flip ») Steria - I-Breed - TechDays 2010
    30. 30. Agrandissement des zones tactiles <ul><li>Certaines zones tactiles ne réagissent pas aux interactions utilisateurs. </li></ul><ul><li>Agrandissement des zones tactiles pour faciliter la détection des contacts. </li></ul>Steria - I-Breed - TechDays 2010
    31. 31. « Duplication » des billets Steria - I-Breed - TechDays 2010
    32. 32. Introduction d’une variation dans les prix Steria - I-Breed - TechDays 2010
    33. 33. Agenda <ul><li>Le Film </li></ul><ul><li>Contexte général du projet </li></ul><ul><li>Le rôle des ergonomes </li></ul><ul><li>Le rôle des designers </li></ul><ul><li>Le rôle de l'équipe technique </li></ul><ul><li>Conclusion </li></ul>Steria - I-Breed - TechDays 2010
    34. 34. Un prototype riche d’enseignement ! <ul><li>Le prototype réalisé valide notre démarche et pourra servir de base au développement d’applications futures </li></ul><ul><li>Au-delà des évolutions technologiques, la conception d’outils tactiles nécessite la mise en œuvre de compétences diversifiées : </li></ul><ul><ul><li>L’ergonomie pour un produit différenciant </li></ul></ul><ul><ul><li>Le Design pour renforcer l’ergo et améliorer l’expérience utilisateur </li></ul></ul><ul><ul><li>De développeurs et architectes pour implémenter les solutions </li></ul></ul>Steria - I-Breed - TechDays 2010
    35. 35. Conclusion <ul><li>STERIA + I-BREED = Vos partenaires pour la réussite d’un projet MultiTouch </li></ul><ul><ul><ul><li>Des équipes intégrées (ergonomes, designers, architectes) </li></ul></ul></ul><ul><ul><ul><li>Des expertises reconnues </li></ul></ul></ul><ul><ul><ul><li>Une méthodologie éprouvée </li></ul></ul></ul><ul><li>Venez nous rencontrer sur le Stand C19 et venez tester l’application SNCF sur notre écran 46 pouces </li></ul>Steria - I-Breed - TechDays 2010
    36. 36. Merci de votre attention !! <ul><li>Sophie-Laure PILVERDIER </li></ul><ul><li>Portable : +33 6 17 64 29 51 </li></ul><ul><li>sophie-laure.pilverdier@steria.com </li></ul><ul><li>www.steria.fr </li></ul><ul><li>Marc-André FRANCART </li></ul><ul><li>+33 1 43 80 54 02 </li></ul><ul><li>06 80 24 56 35 </li></ul><ul><li>www.i-breed.com </li></ul>Steria - I-Breed - TechDays 2010 N’hésitez pas à nous contacter :

    ×