Ergonomie et design avec WPF et Expression

Présentation au sujet: "Ergonomie et design avec WPF et Expression"— Transcription de la présentation:

1 Ergonomie et design avec WPF et Expression
3/31/2017 2:39 AM Ergonomie et design avec WPF et Expression J-C Armici / Ph. Schutz

2 Qui sommes-nous ? Physicien, enseignant en informatique
3/31/2017 2:39 AM Qui sommes-nous ? Jean-Claude Armici Philippe Schutz Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens Informaticien Créateur indépendant CT Technologies, Inc. Commodore 64, Turbo Pascal, Delphi, C#, Linq ASP.NET, Ajax Graphiste et dessinateur d’icônes

3 Agenda Introduction Où se situe WPF ?
3/31/2017 2:39 AM Agenda Introduction Où se situe WPF ? Pourquoi l’ergonomie et le design ? Nouveau partage des rôles Avantages pour le designer et le développeur Et la 3D, alors ? Questions Toutes les expressions/illustrations désignant des personnes concernent aussi bien les femmes que les hommes

4 Introduction Ergonomie = bon sens Design = aspect visuel Peu de code
3/31/2017 2:39 AM Introduction Ergonomie = bon sens Design = aspect visuel Peu de code Démonstrations visuelles La présentation complète Expression Blend 3 !

5 3/31/2017 2:39 AM La famille Expression

6 La famille Expression Microsoft Expression Blend
Microsoft Expression Design

7 Où se situe WPF ? Silverlight / WPF
3/31/2017 2:39 AM Où se situe WPF ? Silverlight / WPF Web Applications Windows HTML / XHTML Console ASP.NET WinForm Silverlight WPF

8 Où se situe WPF ? Que peut apporter WPF à l'ergonomie ?
3/31/2017 2:39 AM Où se situe WPF ? Que peut apporter WPF à l'ergonomie ? Indépendance de la résolution d’écran Meilleure compréhension: Approche visuelle (animation, modélisation…) Augmentation du réalisme Accessibilité: Taille des polices Thèmes (contraste, couleurs,…)

9 Avantages liés à WPF Mise en valeur de la créativité
3/31/2017 2:39 AM Avantages liés à WPF Mise en valeur de la créativité Applications à forte identité Exploitation optimale du matériel Concrétisation des idées

10 Ergonomie Principes généraux
3/31/2017 2:39 AM Ergonomie Principes généraux Concerne tout et tout le monde Adéquation humain – machine Ergonomie physique (caractéristiques physiologiques) Ergonomie mentale (fonctionnement cognitif) But: améliorer les conditions d’utilisation Trouver les dysfonctionnements, les résoudre

11 Ergonomie Informatique
3/31/2017 2:39 AM Ergonomie Informatique Importance croissante des IHM Nécessité de connaître l’utilisateur Comportement Habitudes Eye Tracking Utilité (servir un besoin) Utilisabilité (facilité, efficacité, satisfaction…) Distinction entre web et applications

12 Evolution du comportement Eye tracking
3/31/2017 2:39 AM Evolution du comportement Eye tracking 2005 2008 Réf.

13 1. Carnet d’adresses & grid / chart WPF
3/31/2017 2:39 AM 1. Carnet d’adresses & grid / chart WPF demo

14 Design L’importance du beau
3/31/2017 2:39 AM Design L’importance du beau Design = esthétique / look Importance de l’aspect visuel (qualité perçue) L’esthétique favorise l’utilisabilité La beauté est subjective et culturelle Une belle interface rend indulgent

15 Design La quête du Graal
3/31/2017 2:39 AM Design La quête du Graal Les outils: Expression Blend & Design Intégrer le design à la conception Importance de l’émotion sur la perception Libérer la créativité

16 Evolution design Avant / après relooking
3/31/2017 2:39 AM Evolution design Avant / après relooking

17 Evolution design Icône vectorielle
3/31/2017 2:39 AM Evolution design Icône vectorielle

18 Evolution design Icône vectorielle
3/31/2017 2:39 AM Evolution design Icône vectorielle

19 Evolution design Icône vectorielle
3/31/2017 2:39 AM Evolution design Icône vectorielle

20 Exemple d’intégration du design
3/31/2017 2:39 AM Exemple d’intégration du design Projet V-City Cartographie dynamique 2004

21 2. Expression Design : LIVE!
3/31/2017 2:39 AM 2. Expression Design : LIVE! demo

22 Nouveau partage des rôles Paradoxe ?
3/31/2017 2:39 AM Nouveau partage des rôles Paradoxe ? Designer Développeur

23 Rôle de l'intégrateur Expression Blend !
3/31/2017 2:39 AM Rôle de l'intégrateur Expression Blend ! Bonne connaissance des deux domaines Connexion du code et du design Resources, templates et styles Databind Commandes, événements Ajout des animations (scénarios) Création d’éléments visuels (UserControl)

24 Avantages pour le designer Expression Design !
3/31/2017 2:39 AM Avantages pour le designer Expression Design ! Intégration dans le processus de conception Richesse des moyens à disposition: Mode vectoriel natif Partage de la charte graphique Effets spéciaux (ombre, flous, etc) Import des formats .ai et .pdf Non confiné au graphisme pur Moins de contraintes techniques

25 Avantages pour le développeur Visual Studio !
3/31/2017 2:39 AM Avantages pour le développeur Visual Studio ! Se recentre sur son activité première Développe une logique métier Apporte des fonctionnalités Interface utilisateur 100% objet XAML simplifie le développement

26 3/31/2017 2:39 AM 3. Flèches / Avril / Jeton demo

27 Evolution ergonomie/design Exemple de collaboration
3/31/2017 2:39 AM Evolution ergonomie/design Exemple de collaboration Version de départ 2004 ASP.NET 1.1

28 Evolution ergonomie/design 1ère étape
3/31/2017 2:39 AM Evolution ergonomie/design 1ère étape Maquette de disposition des éléments

29 Evolution ergonomie/design 2ème étape : Création du graphisme
3/31/2017 2:39 AM Evolution ergonomie/design 2ème étape : Création du graphisme

30 Evolution ergonomie/design 2ème étape : Création du graphisme
3/31/2017 2:39 AM Evolution ergonomie/design 2ème étape : Création du graphisme

31 Evolution ergonomie/design 2ème étape : Création du modèle final
3/31/2017 2:39 AM Evolution ergonomie/design 2ème étape : Création du modèle final

32 Evolution ergonomie/design 3ème étape : Assemblage, version finale
3/31/2017 2:39 AM Evolution ergonomie/design 3ème étape : Assemblage, version finale

33 Evolution ergonomie/design 3ème étape : Assemblage, version finale
3/31/2017 2:39 AM Evolution ergonomie/design 3ème étape : Assemblage, version finale

34 Evolution ergonomie/design Comparaison
3/31/2017 2:39 AM Evolution ergonomie/design Comparaison

35 3/31/2017 2:39 AM 3 rôles Développeur Designer Intégrateur

36 4. Loupe / Horloge 5. Formulaire d’adresses
3/31/2017 2:39 AM 4. Loupe / Horloge 5. Formulaire d’adresses demo

37 Layout Canvas Left=0 Top=0 Right=0 Top=0 Left=340 Top=220
3/31/2017 2:39 AM Layout Canvas Positionnement en absolu (x,y) Left=0 Top=0 Right=0 Top=0 Left=340 Top=220 Right=0 Bottom=0

38 3/31/2017 2:39 AM Layout StackPanel 1 Empilage vertical ou horizontal des éléments 2 3 1 2 3 4 4

39 3/31/2017 2:39 AM Layout WrapPanel Positionnement en continu (horizontal ou vertical) 1 2 3 1 3 4 4 2

40 Layout DockPanel Top Left Right Positionnement par ancrage
3/31/2017 2:39 AM Layout DockPanel Positionnement par ancrage Top Left Right

41 3/31/2017 2:39 AM Layout UniformGrid Positionnement sur une grille dont les cellules ont les mêmes dimensions 1 2 3 4

42 Layout Grid Multicolonnes Multilignes RowSpan et ColSpan Dimensions
3/31/2017 2:39 AM Layout Grid Multicolonnes Multilignes RowSpan et ColSpan Dimensions Absolues (par ex. pixels) Auto-ajustement (*) Proportionnelles (%) Width=100 Width=* Width=100 Width=* Width=* Width=* Width=100 Width=* Width=2* Width=*

43 Et la 3D, alors ? Interaction “plus naturelle” 3D native dans WPF
3/31/2017 2:39 AM Et la 3D, alors ? Interaction “plus naturelle” 3D native dans WPF 2D et 3D : même méthodologie Symbiose 2D / 3D dans la même application Parfois la 3D est nécessaire

44 WPF et la 3D Fonctionnalités
3/31/2017 2:39 AM WPF et la 3D Fonctionnalités Caméras (vue perspective ou orthographique) Objets et scènes Éclairages (ambiant, directionnel, ponctuel ou spot) Textures et matériaux Transformations Animations

45 6. Un jeton / Trajectoire / Pile / TechDays 09, …
3/31/2017 2:39 AM 6. Un jeton / Trajectoire / Pile / TechDays 09, … demo

46 Liens Exemples et pptx de cette présentation Outils commerciaux utiles
3/31/2017 2:39 AM Liens Exemples et pptx de cette présentation Outils commerciaux utiles Documentations / références Divers Ergonomie / web (Steve Krug) (Jacob Nielsen)

47 3/31/2017 2:39 AM Questions ?

48 Save the date for tech·days next year!
3/31/2017 2:39 AM Save the date for tech·days next year! 14 – 15 avril 2010, CICG © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

49 Premium Sponsoring Partners
3/31/2017 2:39 AM Premium Sponsoring Partners Classic Sponsoring Partners © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

50 3/31/2017 2:39 AM