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.

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

31. La Marque
Qualité
Luxe
Savoir faire
Développement durable

32. La Cible
Enfants
3 à 8 ans
Ils dessinent
Ils font des jeux de
constructions
Il faut les occuper

33. Notions Importantes
Ludique/amusement
Ludo-informatif
Qualité
Développement durable
Intuitivité

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é

39. ETAPE INTERMEDIAIRE -
VALIDATION
Client/MOA

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

47. ETAPE INTERMEDIAIRE -
VALIDATION
Client/MOA

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

53. Story-board Complet

54. Validation Equipe
Technique
Présentation complète de
l’application au lead technique
- Gestuelles
- Interactions
- Formes
- Transitions
- Positionnement

55. ETAPE INTERMEDIAIRE -
VALIDATION
Client/MOA

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 : johanna.rowe@winwise.com

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