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

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