palais descongrèsParis7, 8 et 9février 2012
Applications tactiles :Design en modemaquette papier et story-board 9 février   Jeudi   Johanna Rowe   Designer Industriel...
WinwiseWinwise en chiffres : 9,5 M€, 80 collaborateurs, 800 clients qui nous font confiance.Winwise a été créé en 1996 aut...
Sommaire Ca fait quoi un designer industriel ?    Les différents types de design industriel    Qualités requises Processus...
Partie 1   Ca Fait Quoi un           Designer           Industriel ?
TYPES DE DESIGNLe design industriel est partout
Design ProduitMobilierElectro-ménagerAccessoires (cuisine/sdb/…)Outils (Perceuses/tournevis/etc.)Objets High Tech(Téléphon...
Design TransportVoitures (forme extérieure, pneus,habitacle)Yatch, bateaux (extérieure,intérieure)2 rouesTrains, bus, avio...
Design PackagingPackaging du quotidien(alimentaires/produitsménagers/soins et hygiène)Emballages luxe(cosmétique/parfum/sp...
Design ServiceDesign de service avec designtransport associé : Velib’Design de service avec designobjet associé : pass nav...
Design d’InteractionInteraction directe : tactile, applicationSmartphone, tablettes tactiles, tablestactiles, dalles tacti...
QUALITES REQUISESUne personnalité qui compte
Curiosité            Observer            Questionner            S’interroger            S’intéresser            Comprendre...
Empathie           Ecouter           Comprendre           Ressentir           S’intéresser           Concevoir pour autrui...
Esprit Créatif                 Imaginer                 Se projeter dans le                 future                 Cultive...
Sens Pratique        Faciliter la vie        Résoudre        Améliorer        Rendre intuitif pour l’utilisateur        ci...
Sens Esthétique          Nourrir son esprit          Mur d’inspiration          Observer          Comprendre les images de...
Rigueur Technique          Faisabilité          Comprendre les technologies          Connaître les produits en phase      ...
Partie 2   Processus de           Design Appliqué           au Monde des           NUI
Phase de DesignPourquoi un designer industriel pour des interfaces ?Phase naturelle  domaine de l’industrieNouveau et mal...
ETAPE 1 – PREMIERS PASObservation, échange et écoute
Le Client            Qui est notre client ? Un            magasin qui vend de la            maroquinerie de luxe.         ...
Atelier Client         Support choisi par le client         Microsoft Surface 2
Microsoft Surface                  Surface 1                    Surface 2-   Gorilla Glass-   Technologie infrarouge uniqu...
Atelier Client         Un certain nombre d’informations         doit être obtenu durant cet atelier.         Pour qui ? Le...
Atelier Client         Où ? Dans un salon VIP du magasin         Nationalité des clients ? De         nombreuses nationali...
Atelier Client          Combien d’utilisateurs simultanés ?          De 1 à 3 enfants simultanément          Peux-il y avo...
Premières Déductions« enfants de 3 à 8 ans, plusieursapplications » Les applicationsdevront s’adapter selon l’âge, niveaux...
Premières Déductions« 30 à 45 min » Un contenu riche« non accompagné, pas de musique »Des applications intuitives, desfeed...
ETAPE 2 – IMPREGNIATIONCompréhension, observation et étude
La MarqueQualitéLuxeSavoir faireDéveloppement durable
La Cible           Enfants           3 à 8 ans           Ils dessinent           Ils font des jeux de           constructi...
Notions ImportantesLudique/amusementLudo-informatifQualitéDéveloppement durableIntuitivité
Ambiance   Illustration par Franck Roth
ETAPE 3 – RESTITUTIONUsages, besoins et problématiques
Scénarios            Étape 1 : La famille arrive à Paris            depuis l’étranger en avion            Étape 2 : La fem...
Scénario Choisi            C’est donc sur cette dernière            étape que nous voulons            intervenir          ...
Objectif           Pour la transformer… en une           expérience aussi positive pour la           mère que pour les enf...
ETAPE INTERMEDIAIRE -VALIDATIONClient/MOA
ETAPE 4 – EFFERVESCENCECréativité, concepts et idées
Brainstorming          Brainstorming          Séances de créativité          Obtenir un maximum          d’idées
Brainstorming          Sélection          Regroupement          Organisation des idées les plus          pertinentes
Conceptsd’interactions       Concept 1 : Dans une même       application accès aux différents       jeux       Concept 2 :...
Conceptsd’interactions          Choix de ce concept car complexité          pour 2 enfants d’avoir envi de faire la       ...
Concepts d’interactions -maquettage           Organisation visuelle et arborescence du contenu           (par rapport au s...
Concepts d’interactions -maquettage                                                         zoomChaque joueur glisse un él...
ETAPE INTERMEDIAIRE -VALIDATIONClient/MOA
ETAPE 5 – ENRICHISSEMENTEvolution, formes et interactions
Design Formel           Croquis de recherche de formes           Recherche de formes : différentes           inspirations ...
Maquettage Encombrement           Vérification de l’ensemble de           l’encombrement à échelle 1 avec           les fo...
DEMODécouverte de ma table Surface 2
Story-board Complet                 Réalisation du story-                 board complet de                 l’application a...
Story-board Complet
Validation EquipeTechnique             Présentation complète de             l’application au lead technique             - ...
ETAPE INTERMEDIAIRE -VALIDATIONClient/MOA
ETAPE 6 – FUSIONSuivi, encadrement et communication
Les autres métiersGraphistePropositions de maquettes graphiquesApplication de la charte choisieDocument de spécifications ...
ContactJohanna RoweBlog : www.johannarowe.comTwitter : @johanna_rowePage Facebook : Design in progressEmail : johanna.rowe...
Pour aller plus loin                                               Prochaines sessions des Dev Camps  Chaque semaine, les ...
Prochain SlideShare
Chargement dans…5
×

Applications tactiles : Design en mode maquette papier et story-board

912 vues

Publié le

Cette session sera consacrée à l’intervention d’un designer industriel et interactif sur un projet d'application tactile. Johanna ROWE, designer industriel et interactif au sein de Winwise, mettra en avant les clés de cette profession intervenant en amont des projets informatiques bien avant la phase de développement et graphisme. Une session 100% design, du premier brainstorming au story-board complet de l’application en passant par le choix des outils et l’élaboration du concept. Vous pourrez notamment découvrir comment le design complet d’une application pour la table tactile Microsoft Surface V2 est possible sans même avoir besoin du support (ni du SDK). Envolez-vous vers le monde des maquettes papier et de la conception centrée utilisateurs.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Applications tactiles : Design en mode maquette papier et story-board

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Applications tactiles :Design en modemaquette papier et story-board 9 février Jeudi Johanna Rowe Designer Industriel – MVP Surface Winwise
  3. 3. WinwiseWinwise en chiffres : 9,5 M€, 80 collaborateurs, 800 clients qui nous font confiance.Winwise a été créé en 1996 autour de 2 métiers:- La Formation, centre agréé Microsoft- Le ConseilEt 3 types d’intervention chez nos clients:- L’expertise- L’accompagnement- La réalisation de projets aux forfaitsNos clients sont de tout secteur d’activité et sollicitent nos 5 domaines de compétences:- Interfaces Riches et Naturelles- Architecture- Collaboratif- Business Intelligence et Data Management- InfrastructureTous nos collaborateurs sont certifiés sur les nouvelles technologies Microsoft.
  4. 4. Sommaire Ca fait quoi un designer industriel ? Les différents types de design industriel Qualités requises Processus de design appliqué au monde des NUI Premier pas Imprégnation Restitution Effervescence Enrichissement Fusion
  5. 5. Partie 1 Ca Fait Quoi un Designer Industriel ?
  6. 6. TYPES DE DESIGNLe design industriel est partout
  7. 7. Design ProduitMobilierElectro-ménagerAccessoires (cuisine/sdb/…)Outils (Perceuses/tournevis/etc.)Objets High Tech(Téléphonie/TV/lecteursmp3/souris/clavier etc.)
  8. 8. Design TransportVoitures (forme extérieure, pneus,habitacle)Yatch, bateaux (extérieure,intérieure)2 rouesTrains, bus, avions, navettesspatiales etc.
  9. 9. Design PackagingPackaging du quotidien(alimentaires/produitsménagers/soins et hygiène)Emballages luxe(cosmétique/parfum/spiritueux/champagnes/ etc.)
  10. 10. Design ServiceDesign de service avec designtransport associé : Velib’Design de service avec designobjet associé : pass navigo
  11. 11. Design d’InteractionInteraction directe : tactile, applicationSmartphone, tablettes tactiles, tablestactiles, dalles tactiles, KinectInteraction indirecte : Tactile sur mobilepour agir sur une interface a distanceTV, etc.Objets : interaction entre des objets(pass navigo), interaction entre un objetet une interface (électroménager)
  12. 12. QUALITES REQUISESUne personnalité qui compte
  13. 13. Curiosité Observer Questionner S’interroger S’intéresser Comprendre le fonctionnement
  14. 14. Empathie Ecouter Comprendre Ressentir S’intéresser Concevoir pour autrui Concevoir pour une marque
  15. 15. Esprit Créatif Imaginer Se projeter dans le future Cultiver son esprit d’enfant Visualiser Nourrir son esprit créatif Développer ses propres techniques
  16. 16. Sens Pratique Faciliter la vie Résoudre Améliorer Rendre intuitif pour l’utilisateur ciblé
  17. 17. Sens Esthétique Nourrir son esprit Mur d’inspiration Observer Comprendre les images de marques Analyser les tendances
  18. 18. Rigueur Technique Faisabilité Comprendre les technologies Connaître les produits en phase de R&D Veille techno Connaître les matériaux Communiquer avec les équipes et autres métiers
  19. 19. Partie 2 Processus de Design Appliqué au Monde des NUI
  20. 20. Phase de DesignPourquoi un designer industriel pour des interfaces ?Phase naturelle  domaine de l’industrieNouveau et mal compris  domaine de l’informatiquePhase de design de l’application  créative & organisationnelle = base etde fil conducteurEn amont du graphisme et du développementDémarche nécessaire  remettre l’utilisateur au centre du projet(User Centred Design ou User Oriented Design) Valeur ajouté des projets
  21. 21. ETAPE 1 – PREMIERS PASObservation, échange et écoute
  22. 22. Le Client Qui est notre client ? Un magasin qui vend de la maroquinerie de luxe. Quelle est sa problématique ? Ses clients viennent parfois avec leurs enfants qui peuvent les gêner pendant la vente.
  23. 23. Atelier Client Support choisi par le client Microsoft Surface 2
  24. 24. Microsoft Surface Surface 1 Surface 2- Gorilla Glass- Technologie infrarouge unique- Gestion des Tags- Différencie les contacts- Inclinaison de la table selon les usages- Orientation des contacts- Massivement multipoints Pixel Sense™- Metro
  25. 25. Atelier Client Un certain nombre d’informations doit être obtenu durant cet atelier. Pour qui ? Les enfants de 3 à 8 ans Peut-il y avoir plusieurs applications ? Oui du moment que la navigation entre les applications est simple
  26. 26. Atelier Client Où ? Dans un salon VIP du magasin Nationalité des clients ? De nombreuses nationalités Temps d’utilisation ? Environs 30 à 45 minutes Accompagnés ? Non, les enfants ne sont pas assistés par un adultes
  27. 27. Atelier Client Combien d’utilisateurs simultanés ? De 1 à 3 enfants simultanément Peux-il y avoir du son ? Oui pour quelques sons mais pas de musique d’ambiance qui tournerai en boucle A quel moment ? En journée
  28. 28. Premières Déductions« enfants de 3 à 8 ans, plusieursapplications » Les applicationsdevront s’adapter selon l’âge, niveauxde difficultés« enfants, 1 à 3 utilisateurs » Tableinclinaison horizontale, table basse« toutes nationalités, différentsâges » Pas de textes écris ni parlés
  29. 29. Premières Déductions« 30 à 45 min » Un contenu riche« non accompagné, pas de musique »Des applications intuitives, desfeedback sonores et visuels« en journée » Calibrer la table enconséquence, installation deluminaires : lumière indirecte
  30. 30. ETAPE 2 – IMPREGNIATIONCompréhension, observation et étude
  31. 31. La MarqueQualitéLuxeSavoir faireDéveloppement durable
  32. 32. La Cible Enfants 3 à 8 ans Ils dessinent Ils font des jeux de constructions Il faut les occuper
  33. 33. Notions ImportantesLudique/amusementLudo-informatifQualitéDéveloppement durableIntuitivité
  34. 34. Ambiance Illustration par Franck Roth
  35. 35. ETAPE 3 – RESTITUTIONUsages, besoins et problématiques
  36. 36. Scénarios Étape 1 : La famille arrive à Paris depuis l’étranger en avion Étape 2 : La femme et ses enfants se dirigent vers une boutique de sac de luxe Étape 3 : Dans un salon VIP, on lui présente les sacs de la nouvelle collection
  37. 37. Scénario Choisi C’est donc sur cette dernière étape que nous voulons intervenir Transformer cette expérience plutôt négative pour tous en expérience positive pour tous
  38. 38. Objectif Pour la transformer… en une expérience aussi positive pour la mère que pour les enfants qui l’accompagnent. Besoin principal : occuper les enfants pendant que leur mère fait son shopping en toute tranquillité
  39. 39. ETAPE INTERMEDIAIRE -VALIDATIONClient/MOA
  40. 40. ETAPE 4 – EFFERVESCENCECréativité, concepts et idées
  41. 41. Brainstorming Brainstorming Séances de créativité Obtenir un maximum d’idées
  42. 42. Brainstorming Sélection Regroupement Organisation des idées les plus pertinentes
  43. 43. Conceptsd’interactions Concept 1 : Dans une même application accès aux différents jeux Concept 2 : Chaque application dans le menu « shell » de Microsoft Surface On pourra ensuite séparer les jeux collaboratif des jeux solo (toujours en multi-users)
  44. 44. Conceptsd’interactions Choix de ce concept car complexité pour 2 enfants d’avoir envi de faire la même chose Les enfants n’ont pas le même âge et n’ont pas les mêmes passions Chacun peut avoir sa liberté de jeu mais peut toujours aider l’autre (collaboratif)
  45. 45. Concepts d’interactions -maquettage Organisation visuelle et arborescence du contenu (par rapport au support) Séance de créa avec de « petits morceaux de papier » Scénario complet : « petits morceaux de papier »  prenant en compte l’arborescence Permet de déduire les contraintes organisationnelles
  46. 46. Concepts d’interactions -maquettage zoomChaque joueur glisse un élément de menu vers sa zone de jeu zoomSélection d’un jeu
  47. 47. ETAPE INTERMEDIAIRE -VALIDATIONClient/MOA
  48. 48. ETAPE 5 – ENRICHISSEMENTEvolution, formes et interactions
  49. 49. Design Formel Croquis de recherche de formes Recherche de formes : différentes inspirations de nombreux domaines : nature, jeux vidéos, mode etc. Ressemblance à des objets réels du quotidien (transformés)  l’utilisateur reconnaît l’objet et sait donc le manipuler Poignée Boîte
  50. 50. Maquettage Encombrement Vérification de l’ensemble de l’encombrement à échelle 1 avec les formes choisies. Maquettage papier avec le design formel
  51. 51. DEMODécouverte de ma table Surface 2
  52. 52. Story-board Complet Réalisation du story- board complet de l’application avec formes choisies - Gestuelles - Interactions - Formes - Transitions - Positionnement
  53. 53. Story-board Complet
  54. 54. Validation EquipeTechnique Présentation complète de l’application au lead technique - Gestuelles - Interactions - Formes - Transitions - Positionnement
  55. 55. ETAPE INTERMEDIAIRE -VALIDATIONClient/MOA
  56. 56. ETAPE 6 – FUSIONSuivi, encadrement et communication
  57. 57. Les autres métiersGraphistePropositions de maquettes graphiquesApplication de la charte choisieDocument de spécifications graphiquesDéveloppeurDéfinition de l’architectureAide technique pour équipe créative – audit de faisabilité/complexitéDéveloppement de l’applicationErgonomeTests utilisateurs, revues expertes, focus groupes, observation des utilisateurs,validation story-board (designer) et maquettes (graphiste).
  58. 58. ContactJohanna RoweBlog : www.johannarowe.comTwitter : @johanna_rowePage Facebook : Design in progressEmail : johanna.rowe@winwise.com
  59. 59. Pour aller plus loin Prochaines sessions des Dev Camps Chaque semaine, les 10 Live Open Data - Développer des applications riches avec le février DevCamps 2012 16 Meeting protocole Open Data ALM, Azure, Windows Phone, HTML5, OpenData février Live Meeting Azure series - Développer des applications sociales sur la plateforme Windows Azure 2012 http://msdn.microsoft.com/fr-fr/devcamp 17 Live Comprendre le canvas avec Galactic et la librairie février Meeting three.js 2012 Téléchargement, ressources 21 février Live La production automatisée de code avec CodeFluent Meeting Entities et toolkits : RdV sur MSDN 2012 2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour http://msdn.microsoft.com/fr-fr/ 2012 Meeting Windows Phone 7, iOS et Android 6 mars Live Nuget et ALM 2012 Meeting Les offres à connaître 9 mars 2012 Live Meeting Kinect - Bien gérer la vie de son capteur 90 jours d’essai gratuit de Windows 13 mars 2012 Live Meeting Sharepoint series - Automatisation des tests Azure 14 mars Live TFS Health Check - vérifier la bonne santé de votre www.windowsazure.fr 2012 Meeting plateforme de développement 15 mars Live Azure series - Développer pour les téléphones, les 2012 Meeting tablettes et le cloud avec Visual Studio 2010 Jusqu’à 35% de réduction sur Visual 16 mars Live Applications METRO design - Désossage en règle dun Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript 20 mars Live Retour dexpérience LightSwitch, Optimisation de www.visualstudio.fr 2012 Meeting laccès aux données, Intégration Silverlight 23 mars Live OAuth - la clé de lutilisation des réseaux sociaux dans 2012 Meeting votre application

×