Applications tactiles : Design en mode maquette papier et story-board
Télécharger en tant que PPTX, PDF0 j'aime1,219 vues
Le document présente les activités de Winwise, spécialisé dans le design industriel, avec un accent sur l'application de méthodes de design centrées sur l'utilisateur pour la création d'applications tactiles. Il décrit le processus de design à travers différentes étapes, de l'observation des utilisateurs à la création de concepts interactifs, avec une attention particulière portée sur la conception pour les enfants. Des exemples de projets et des sessions futures de développement logiciel sont également mentionnés, soulignant l'importance de la collaboration interdisciplinaire dans le design de solutions technologiques.
Applications tactiles : Design en mode maquette papier et story-board
- 1. palais des congrès Paris 7, 8 et 9 février 2012
- 2. Applications tactiles : Design en mode maquette papier et story- board 9 février Jeudi Johanna Rowe Designer Industriel – MVP Surface Winwise
- 3. Winwise Winwise 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 Conseil Et 3 types d’intervention chez nos clients: - L’expertise - L’accompagnement - La réalisation de projets aux forfaits Nos 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 - Infrastructure Tous nos collaborateurs sont certifiés sur les nouvelles technologies Microsoft.
- 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. Partie 1 Ca Fait Quoi un Designer Industriel ?
- 6. TYPES DE DESIGN Le design industriel est partout
- 7. Design Produit Mobilier Electro-ménager Accessoires (cuisine/sdb/…) Outils (Perceuses/tournevis/etc.) Objets High Tech (Téléphonie/TV/lecteurs mp3/souris/clavier etc.)
- 8. Design Transport Voitures (forme extérieure, pneus, habitacle) Yatch, bateaux (extérieure, intérieure) 2 roues Trains, bus, avions, navettes spatiales etc.
- 9. Design Packaging Packaging du quotidien (alimentaires/produits ménagers/soins et hygiène) Emballages luxe (cosmétique/parfum/ spiritueux/champagnes/ etc.)
- 10. Design Service Design de service avec design transport associé : Velib’ Design de service avec design objet associé : pass navigo
- 11. Design d’Interaction Interaction directe : tactile, application Smartphone, tablettes tactiles, tables tactiles, dalles tactiles, Kinect Interaction indirecte : Tactile sur mobile pour agir sur une interface a distance TV, etc. Objets : interaction entre des objets (pass navigo), interaction entre un objet et une interface (électroménager)
- 12. QUALITES REQUISES Une personnalité qui compte
- 13. Curiosité Observer Questionner S’interroger S’intéresser Comprendre le fonctionnement
- 14. Empathie Ecouter Comprendre Ressentir S’intéresser Concevoir pour autrui Concevoir pour une marque
- 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. Sens Pratique Faciliter la vie Résoudre Améliorer Rendre intuitif pour l’utilisateur ciblé
- 17. Sens Esthétique Nourrir son esprit Mur d’inspiration Observer Comprendre les images de marques Analyser les tendances
- 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. Partie 2 Processus de Design Appliqué au Monde des NUI
- 20. Phase de Design Pourquoi un designer industriel pour des interfaces ? Phase naturelle domaine de l’industrie Nouveau et mal compris domaine de l’informatique Phase de design de l’application créative & organisationnelle = base et de fil conducteur En amont du graphisme et du développement Démarche nécessaire remettre l’utilisateur au centre du projet (User Centred Design ou User Oriented Design) Valeur ajouté des projets
- 21. ETAPE 1 – PREMIERS PAS Observation, échange et écoute
- 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. Atelier Client Support choisi par le client Microsoft Surface 2
- 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. 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. 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. 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. Premières Déductions « enfants de 3 à 8 ans, plusieurs applications » Les applications devront s’adapter selon l’âge, niveaux de difficultés « enfants, 1 à 3 utilisateurs » Table inclinaison horizontale, table basse « toutes nationalités, différents âges » Pas de textes écris ni parlés
- 29. Premières Déductions « 30 à 45 min » Un contenu riche « non accompagné, pas de musique » Des applications intuitives, des feedback sonores et visuels « en journée » Calibrer la table en conséquence, installation de luminaires : lumière indirecte
- 30. ETAPE 2 – IMPREGNIATION Compréhension, observation et étude
- 32. La Cible Enfants 3 à 8 ans Ils dessinent Ils font des jeux de constructions Il faut les occuper
- 34. Ambiance Illustration par Franck Roth
- 35. ETAPE 3 – RESTITUTION Usages, besoins et problématiques
- 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. 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. 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é
- 40. ETAPE 4 – EFFERVESCENCE Créativité, concepts et idées
- 41. Brainstorming Brainstorming Séances de créativité Obtenir un maximum d’idées
- 42. Brainstorming Sélection Regroupement Organisation des idées les plus pertinentes
- 43. Concepts d’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. Concepts d’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. 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. Concepts d’interactions - maquettage zoom Chaque joueur glisse un élément de menu vers sa zone de jeu zoom Sélection d’un jeu
- 48. ETAPE 5 – ENRICHISSEMENT Evolution, formes et interactions
- 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. Maquettage Encombrement Vérification de l’ensemble de l’encombrement à échelle 1 avec les formes choisies. Maquettage papier avec le design formel
- 51. DEMO Découverte de ma table Surface 2
- 52. Story-board Complet Réalisation du story- board complet de l’application avec formes choisies - Gestuelles - Interactions - Formes - Transitions - Positionnement
- 54. Validation Equipe Technique Présentation complète de l’application au lead technique - Gestuelles - Interactions - Formes - Transitions - Positionnement
- 56. ETAPE 6 – FUSION Suivi, encadrement et communication
- 57. Les autres métiers Graphiste Propositions de maquettes graphiques Application de la charte choisie Document de spécifications graphiques Développeur Définition de l’architecture Aide technique pour équipe créative – audit de faisabilité/complexité Développement de l’application Ergonome Tests utilisateurs, revues expertes, focus groupes, observation des utilisateurs, validation story-board (designer) et maquettes (graphiste).
- 58. Contact Johanna Rowe Blog : www.johannarowe.com Twitter : @johanna_rowe Page Facebook : Design in progress Email : [email protected]
- 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 d'un Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript 20 mars Live Retour d'expérience LightSwitch, Optimisation de www.visualstudio.fr 2012 Meeting l'accès aux données, Intégration Silverlight 23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans 2012 Meeting votre application