3 Octobre Les Communautés MS

Transcription

1 3 Octobre 2013 Les Communautés MS

2 PixelSense, une histoire collaborative Nicolas CALVI Consultant Senior / Expert NUI MVP Hardware Interaction Design & Development Wygwam nicolas.calvi@wygwam.com Blog : Twitter Facebook : Black Blog

3 Accélérateur sur technologies Microsoft.NET WPF Silverlight HTML5 MVC Cartographie Cloud SharePoint Office 365 Lync Windows Phone Windows 8 UX TFS Test Méthodologie SQL Server SSRS SSAS x 80 collaborateurs France Belgique Suisse Canada

4 Objectif de la session Sommaire - Introduction - Détail du périphérique - Les périphériques - Techniquement - L interface «Shell» - Conception d interface - Général - Sur PixelSense - Développement - Contrôles du SDK - API spécifique

5 Introduction Définition des concepts et première approche

6 Un monde de NUI Une évolution de nos habitudes NUI : natural user interface Pas de périphérique entre l Homme et la machine, utilisation du corps pour naviguer dans l interface - Le corps : Kinect, Leap Motion - Tactile : Microsoft Surface, PixelSense, Windows Phone, Windows 8 - La voix : reconnaissance vocale, Microsoft Speech. Intuitif, utile

7 Un monde de NUI Surprendre, innover et créer Les périphériques NUI doivent amener l utilisateur vers de nouveaux usages, rendant les actions quotidiennes plus ludiques et plus intuitives. Simplifier la technologie. Créer des interactions étendues qui permettent de se démarquer des usages courant, capter l attention des utilisateurs et leur faire partager une «expérience technologique».

8 La collaboration Pouvoir utiliser un support à plusieurs Le concept même de collaboration sur un support tactile entraine une utilisation du périphérique a plusieurs utilisateurs. - Vertical : 2 personnes - Incliné : 2 à 3 personnes - Horizontal : 4 personnes

9 Détail du périphérique Spécification technique, Software et Shell.

10 Les périphériques Microsoft Surface La première table collaborative qui voit! - Reconnaissance infrarouge - 5 caméras - Reconnaissance de «Tag» - Collaborative - Multiutilisateurs

11 Les périphériques Samsung SUR40 with Microsoft PixelSense Une nouvelle technologie, Pixel Sense. Une bonne solution tactile sur le marché, fluide et précise. - Technologie infrarouge unique - Gestion des Tags - Différencie les contacts (doigts, volumes, ) - Orientation des contacts - Orientation de la table - Massivement multi-points

12 Techniquement Spécification de la table Quelques éléments Hardware : - Processeur Athlon X2 Dual-Core 245e (2.9GHz) - Mémoire 4Go DDR3 - Ecran 40 Full HD (1920x1080) - Carte graphique AMD HD6750M

13 Techniquement Spécification de la table Quelques éléments Logiciel : - Windows 7 Pro 64 bit Embeded (PixelSense édition) - Surface Shell & Surface Administration - Développement - XNA Framework.Net WPF - Surface SDK 2.0

14 L interface «Shell» Accessible et adapté à tous les usages - Orientable - Prévu pour une expérience unifiée - Exécution «sandbox» des applications

15 L interface «Shell» Un comportement unifié Clavier, MessageBox, Bouton de retour au Shell

16 Conception d interface Comment bien concevoir de manière générale. Comment bien concevoir sur PixelSense.

17 Concevoir des interfaces (Général) L importance du Design Tous commence par prendre du temps pour : - Concevoir pour tous - Concevoir pour être utile - Concevoir pour être productif - Concevoir pour une expérience agréable

18 Concevoir des interfaces (Général) Importance des métiers Designer : Celui qui conçois Graphiste : Celui qui met en image Développeur : Celui qui donne vie

19 Concevoir des interfaces (Général) Gestion de l espace vertical et incliné Problématiques : - Ne pas empiéter sur l espace de l autre - Que chacun puisse accomplir ses actions - Information claire qui ne déborde pas sur l autre Pensez a bien séparer les zones collaboratives de façon vertical.

20 Concevoir des interfaces (Général) Gestion de l espace horizontal Problématiques : - Orientation des personnes - Arriver à garder un espace de travail personnel - Partager facilement les éléments manipulées Pensez a bien créer des zones de travail pour chaque personne et une zone commune accessible de tous.

21 Concevoir des interfaces (PixelSense) Fond sombre Permet de ne pas perturber la détection des contact

22 Concevoir des interfaces (PixelSense) Type d interaction - Filtrer les contacts par type : doigt, tag, blob, - Un accès peu fréquent : utiliser un tag par exemple. - Action critique : créer un délais ou un feedback pour interpeller.

23 Concevoir des interfaces (PixelSense) Ecran d accueil «vivant» Pour une expérience optimal - Permet d avoir un effet «Waouh» - Permet une meilleure immersion

24 Concevoir des interfaces (PixelSense) Les quatre coins Cela fait partit du Shell, c est donc un élément central avec lequel il faut composer. - Toujours prévoir de la place pour l icône et son expansion - Essayez de faire en sorte qu il s intègre dans la charte

25 Concevoir des interfaces (PixelSense) Interactions étendues avec des «Tags» - Sortir des 2 dimensions de l interface pour l étendre. - Un objet pour une fonction particulière. - Des objets assez grand pour être manipulés

26 Concevoir des interfaces (PixelSense) Cas de Manchester - Surface V1 - Exemple d interaction avec objet - Exemple de démarche

27

28 Design d application Si le Design d application vous intéresse Johanna Rowe Designer Industriel & Interaction MVP Hardware Interaction Design & Development Wygwam Blog : Twitter Facebook : Design in Progress

29 Développement Ce qu il y dans le SDK Surface 2.0 Quelques lignes de code pour bien commencer

30 SDK Surface 2.0 «Write once, run anywere» - Permet de développer sur tous les périphériques Windows 7 - Extension de WPF Outils intégrés - Simulateur - Stress Test

31 Les contrôles du SDK Contrôle phare du SDK Le ScatterView est un contrôle de type «ItemsControl» qui permet de manipuler de façon collaborative des éléments. <s:scatterview ItemsSource="{Binding MySource}"> <s:scatterview.itemtemplate> <DataTemplate> <Grid> <TextBlock Text="{Binding Label}"/> </Grid> </DataTemplate> </s:scatterview.itemtemplate> </s:scatterview>

32 Les contrôles du SDK Contrôle phare du SDK Le «LibraryBar» et le «LibraryStack» permettent de gérer la visualisation et la sélection d éléments avec la possibilité de faire des groupes. <s:librarystack> <BitmapImage UriSource="Resources/Images/Blue1.jpg"/> <BitmapImage UriSource="Resources/Images/Blue2.jpg"/> </s:librarystack> <s:librarybar> <BitmapImage UriSource="Resources/Images/Blue4.jpg"/> <BitmapImage UriSource="Resources/Images/Blue5.jpg"/> </s:librarybar>

33 Les contrôles du SDK Contrôles redéveloppés Les contrôles standards ont été refait pour être utilisé en tactile

34 API Spécifique Les bases d un projet PixelSense Pour interagir avec le Shell et certaines possibilités du SDK <s:surfacewindow x:class="pixelsenseproject.mainwindow" xmlns=" xmlns:x=" xmlns:s=" <Grid> </Grid> </s:surfacewindow>

35 API Spécifique Filtrer sur le contact «doigt» Si l on veut filtrer sur le contact «Doigt», il faut faire appel aux API du SDK Surface 2.0 using Microsoft.Surface.Presentation.Input; private void Grid_TouchDown(object sender, TouchEventArgs e) { // Filtrage pour un doigt if (InteractiveSurface.PrimarySurfaceDevice.IsFingerRecognitionSupported && e.touchdevice.getisfingerrecognized()) { //... } }

36 API Spécifique Orientation d un contact Récupérer l orientation d un contact permet de diriger l interface vers l utilisateur peut importe ou il se trouve par rapport à la table. Cela permet aussi de filtrer les actions si l on veut que l interaction soit limitée à une personne se trouvant d un certain coté de la table. using Microsoft.Surface.Presentation.Input; private void Grid_TouchDown(object sender, TouchEventArgs e) { // Récupération de son orientation if (InteractiveSurface.PrimarySurfaceDevice.IsTouchOrientationSupported) { double orientation = e.touchdevice.getorientation(); } }

37 API Spécifique Gestion des «Tags» On peut récupérer la valeur d un tag pour identifier l objet qui est posé sur celle-ci. private void Grid_TouchDown(object sender, TouchEventArgs e) { // On vérifie si c'est un Tag if (InteractiveSurface.PrimarySurfaceDevice.IsTagRecognitionSupported && e.touchdevice.getistagrecognized()) { // Récupération des informations du Tag TagData taginfo = e.touchdevice.gettagdata(); } } // Récupération de sa valeur long value = taginfo.value;

38 API Spécifique Gestures Certaines gestuelles sont déjà présente dans le SDK, comme le «TAP» et le «Hold» <s:surfacewindow x:class="pixelsenseproject.mainwindow" xmlns=" xmlns:x=" xmlns:s=" <Grid s:touchextensions.tapgesture=" " s:touchextensions.holdgessture=" "> </Grid> </s:surfacewindow>

39 Conclusion Que retenir de cette session

40 Question? N hésitez pas je suis là pour ça nicolas.calvi@wygwam.com Blog : Twitter Facebook : Black Blog

41 Merci à Nos Sponsors

42 Merci à nos partenaires et membres

43 Pour adhérer à l association : Ou contact@communautes.ms Nous suivre sur Facebook : Nous suivre sur Twitter :