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

Qui sommes-nous ? Physicien, enseignant en informatique 3/31/2017 2:39 AM Qui sommes-nous ? Jean-Claude Armici Philippe Schutz jc.armici@gmail.com pschutz@iprolink.ch Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# www.facile.ch 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

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

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 http://techdays09.blogspot.com Expression Blend 3 !

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

La famille Expression Microsoft Expression Blend Microsoft Expression Design

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

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,…)

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

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

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

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

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

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

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é

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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=*

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

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

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

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 http://techdays09.blogspot.com Outils commerciaux utiles http://www.devexpress.com http://www.erain.com/Products/ZAM3D Documentations / références http://www.microsoft.com/france/vision/mstechdays09 http://msdn.microsoft.com/fr-fr/library/ms754130.aspx Divers http://www.codeproject.com Ergonomie / web http://www.sensible.com (Steve Krug) http://www.useit.com (Jacob Nielsen) http://www.lergonome.org

3/31/2017 2:39 AM Questions ?

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.

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.

3/31/2017 2:39 AM