Applications tactiles : Design en mode maquette papier et story-board
-
Upload
microsoft-developpeurs -
Category
Technology
-
view
538 -
download
0
description
Transcript of Applications tactiles : Design en mode maquette papier et story-board
palais des congrès Paris
7, 8 et 9 février 2012
Jeudi 9 févrierJohanna RoweDesigner Industriel – MVP SurfaceWinwise
Applications tactiles : Design en mode maquette papier et story-board
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.
Ca fait quoi un designer industriel ?Les différents types de design industrielQualités requises
Processus de design appliqué au monde des NUIPremier pasImprégnationRestitutionEffervescenceEnrichissementFusion
Sommaire
Partie 1 Ca Fait Quoi un Designer Industriel ?
TYPES DE DESIGN
Le design industriel est partout
Design Produit
Mobilier Electro-ménagerAccessoires (cuisine/sdb/…)Outils (Perceuses/tournevis/etc.)Objets High Tech (Téléphonie/TV/lecteurs mp3/souris/clavier etc.)
Design Transport
Voitures (forme extérieure, pneus, habitacle)Yatch, bateaux (extérieure, intérieure)2 roues Trains, bus, avions, navettes spatiales etc.
Design Packaging
Packaging du quotidien (alimentaires/produits ménagers/soins et hygiène)
Emballages luxe (cosmétique/parfum/ spiritueux/champagnes/ etc.)
Design Service
Design de service avec design transport associé : Velib’
Design de service avec design objet associé : pass navigo
Design d’InteractionInteraction 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)
QUALITES REQUISES
Une personnalité qui compte
Curiosité
Observer QuestionnerS’interrogerS’intéresserComprendre le fonctionnement
EmpathieEcouter ComprendreRessentirS’intéresserConcevoir pour autruiConcevoir pour une marque
Esprit Créatif
Imaginer Se projeter dans le futureCultiver son esprit d’enfantVisualiserNourrir son esprit créatifDévelopper ses propres techniques
Sens Pratique
Faciliter la vie Résoudre Améliorer Rendre intuitif pour l’utilisateur ciblé
Sens Esthétique
Nourrir son espritMur d’inspirationObserverComprendre les images de marquesAnalyser les tendances
Rigueur Technique
FaisabilitéComprendre les technologiesConnaître les produits en phase de R&DVeille technoConnaître les matériauxCommuniquer avec les équipes et autres métiers
Partie 2 Processus de Design Appliqué au Monde des NUI
Phase de Design
Pourquoi 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 et de 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
ETAPE 1 – PREMIERS PAS
Observation, échange et écoute
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.
Atelier Client
Support choisi par le client
Microsoft Surface 2
Microsoft Surface
- Gorilla Glass- Technologie infrarouge unique- Gestion des Tags- Différencie les contacts - Inclinaison de la table selon les usages- Orientation des contacts- Massivement multipoints- Metro
Surface 1 Surface 2
Pixel Sense™
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
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
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
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
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
ETAPE 2 – IMPREGNIATION
Compréhension, observation et étude
La Marque
QualitéLuxeSavoir faireDéveloppement durable
La Cible
Enfants3 à 8 ansIls dessinentIls font des jeux de constructionsIl faut les occuper
Notions Importantes Ludique/amusementLudo-informatifQualitéDéveloppement durableIntuitivité
Illustration par Franck RothAmbiance
ETAPE 3 – RESTITUTION
Usages, besoins et problématiques
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
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
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é
ETAPE INTERMEDIAIRE -
VALIDATIONClient/MOA
ETAPE 4 – EFFERVESCENCE
Créativité, concepts et idées
Brainstorming
BrainstormingSéances de créativité
Obtenir un maximum d’idées
Brainstorming
SélectionRegroupement Organisation des idées les plus pertinentes
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)
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)
Concepts d’interactions - maquettageOrganisation 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
Concepts d’interactions - maquettage
zoom
zoom
Sélection d’un jeu
Chaque joueur glisse un élément de menu vers sa zone de jeu
ETAPE INTERMEDIAIRE -
VALIDATIONClient/MOA
ETAPE 5 – ENRICHISSEMENT
Evolution, formes et interactions
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éeBoîte
Maquettage EncombrementVérification de l’ensemble de
l’encombrement à échelle 1 avec les formes choisies.
Maquettage papier avec le design formel
DEMO
Découverte de ma table Surface 2
Story-board CompletRéalisation du story-board complet de l’application avec formes choisies - Gestuelles- Interactions- Formes- Transitions- Positionnement
Story-board Complet
Validation Equipe Technique
Présentation complète de l’application au lead technique- Gestuelles- Interactions- Formes- Transitions- Positionnement
ETAPE INTERMEDIAIRE -
VALIDATIONClient/MOA
ETAPE 6 – FUSION
Suivi, encadrement et communication
Les autres métiersGraphiste Propositions de maquettes graphiquesApplication de la charte choisieDocument de spécifications graphiques
Développeur Définition de l’architectureAide 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).
Contact
Johanna RoweBlog : www.johannarowe.comTwitter : @johanna_rowePage Facebook : Design in progressEmail : [email protected]
Chaque semaine, les DevCampsALM, Azure, Windows Phone, HTML5, OpenDatahttp://msdn.microsoft.com/fr-fr/devcamp
Téléchargement, ressources et toolkits : RdV sur MSDNhttp://msdn.microsoft.com/fr-fr/
Les offres à connaître90 jours d’essai gratuit de Windows Azure www.windowsazure.fr
Jusqu’à 35% de réduction sur Visual Studio Pro, avec l’abonnement MSDN www.visualstudio.fr
Pour aller plus loin
10 février 2012
Live Meeting
Open Data - Développer des applications riches avec le protocole Open Data
16 février 2012
Live Meeting
Azure series - Développer des applications sociales sur la plateforme Windows Azure
17 février 2012
Live Meeting
Comprendre le canvas avec Galactic et la librairie three.js
21 février 2012
Live Meeting
La production automatisée de code avec CodeFluent Entities
2 mars 2012
Live Meeting
Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, iOS et Android
6 mars 2012
Live Meeting
Nuget et ALM
9 mars 2012
Live Meeting
Kinect - Bien gérer la vie de son capteur
13 mars 2012
Live Meeting
Sharepoint series - Automatisation des tests
14 mars 2012
Live Meeting
TFS Health Check - vérifier la bonne santé de votre plateforme de développement
15 mars 2012
Live Meeting
Azure series - Développer pour les téléphones, les tablettes et le cloud avec Visual Studio 2010
16 mars 2012
Live Meeting
Applications METRO design - Désossage en règle d'un template METRO javascript
20 mars 2012
Live Meeting
Retour d'expérience LightSwitch, Optimisation de l'accès aux données, Intégration Silverlight
23 mars 2012
Live Meeting
OAuth - la clé de l'utilisation des réseaux sociaux dans votre application
Prochaines sessions des Dev Camps