Ergonomie et design avec WPF et ExpressionJ-C Armici / Ph. Schutz

Physicien, enseignant en informatiqueCartes perforées, Turbo Pascal, Delphi, Java, C#www.facile.chTrès attaché au bon sens

Qui sommes-nous ?

InformaticienCréateur indépendantCT Technologies, Inc.

Commodore 64, Turbo Pascal, Delphi, C#, LinqASP.NET, AjaxGraphiste et dessinateur d’icônes

jc.armici@gmail.com pschutz@iprolink.ch

Philippe Schutz

Jean-Claude Armici

AgendaIntroductionOù se situe WPF ?Pourquoi l’ergonomie et le design ?Nouveau partage des rôlesAvantages pour le designer et le développeurEt la 3D, alors ?Questions

Toutes les expressions/illustrations désignant des personnes concernent aussi bien les femmes que les hommes

Ergonomie = bon sensDesign = aspect visuelPeu de codeDémonstrations visuellesLa présentation complète

http://techdays09.blogspot.comExpression Blend 3 !

Introduction

La famille Expression

La famille Expression

Microsoft Expression Design

Microsoft Expression Blend

Où se situe WPF ?Silverlight / WPF

Web Applications Windows

Silverlight WPF

HTML / XHTML

WinForm

Console

ASP.NET

Indépendance de la résolution d’écranMeilleure compréhension:

Approche visuelle (animation, modélisation…)Augmentation du réalisme

Accessibilité:Taille des policesThèmes (contraste, couleurs,…)

Où se situe WPF ?Que peut apporter WPF à l'ergonomie ?

Mise en valeur de la créativitéApplications à forte identitéExploitation optimale du matérielConcrétisation des idées

Avantages liés à WPF

Concerne tout et tout le mondeAdé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

ErgonomiePrincipes généraux

Importance croissante des IHMNécessité de connaître l’utilisateur

ComportementHabitudesEye Tracking

Utilité (servir un besoin)Utilisabilité (facilité, efficacité, satisfaction…)Distinction entre web et applications

ErgonomieInformatique

Evolution du comportementEye tracking

2005 2008

Réf. http://thinkeyetracking.com

1. Carnet d’adresses& grid / chart WPF

demo

Design = esthétique / lookImportance de l’aspect visuel (qualité perçue)L’esthétique favorise l’utilisabilitéLa beauté est subjective et culturelleUne belle interface rend indulgent

DesignL’importance du beau

Les outils: Expression Blend & DesignIntégrer le design à la conceptionImportance de l’émotion sur la perceptionLibérer la créativité

DesignLa quête du Graal

Evolution designAvant / après relooking

Evolution designIcône vectorielle

Evolution designIcône vectorielle

Evolution designIcône vectorielle

Exemple d’intégration du design

Projet V-CityCartographie dynamique

2004

2. Expression Design : LIVE!

demo

Nouveau partage des rôlesParadoxe ?

Designer Développeur

Bonne connaissance des deux domainesConnexion du code et du design

Resources, templates et stylesDatabind Commandes, événements

Ajout des animations (scénarios)Création d’éléments visuels (UserControl)

Rôle de l'intégrateurExpression Blend !

Intégration dans le processus de conceptionRichesse des moyens à disposition:

Mode vectoriel natifPartage de la charte graphiqueEffets spéciaux (ombre, flous, etc)Import des formats .ai et .pdf

Non confiné au graphisme purMoins de contraintes techniques

Avantages pour le designerExpression Design !

Se recentre sur son activité premièreDéveloppe une logique métierApporte des fonctionnalités

Interface utilisateur 100% objet XAML simplifie le développement

Avantages pour le développeur Visual Studio !

3. Flèches / Avril / Jeton

demo

Evolution ergonomie/designExemple de collaboration

Version de départ

2004 ASP.NET 1.1

Evolution ergonomie/design1ère étape

Maquette de disposition des

éléments

Evolution ergonomie/design2ème étape : Création du graphisme

Evolution ergonomie/design2ème étape : Création du graphisme

Evolution ergonomie/design2ème étape : Création du modèle final

Evolution ergonomie/design3ème étape : Assemblage, version finale

Evolution ergonomie/design3ème étape : Assemblage, version finale

Evolution ergonomie/designComparaison

3 rôles

Designer

Développeur

Intégrateur

4. Loupe / Horloge 5. Formulaire d’adresses

demo

LayoutCanvas

Right=0Top=0

Left=0Top=0

Right=0 Bottom=0

Left=340Top=220

Positionnement enabsolu (x,y)

LayoutStackPanel

21

43

Empilage vertical ou horizontal des éléments

21 43

LayoutWrapPanel

21

4

3

Positionnement en continu (horizontal ou vertical)

2

1

43

LayoutDockPanel

Left

Top

Right

Positionnement par ancrage

LayoutUniformGrid

21

43

Positionnement sur une grille dont les cellules ont les mêmes dimensions

LayoutGrid

Width=*Width=100

DimensionsAbsolues (par ex. pixels)Auto-ajustement (*)Proportionnelles (%)

Width=*Width=100 Width=* Width=*

Width=*Width=100 Width=2* Width

=*

MulticolonnesMultilignesRowSpan et ColSpan

Interaction “plus naturelle”3D native dans WPF2D et 3D : même méthodologie Symbiose 2D / 3D dans la même applicationParfois la 3D est nécessaire

Et la 3D, alors ?

Caméras (vue perspective ou orthographique)Objets et scènesÉclairages (ambiant, directionnel, ponctuel ou spot)Textures et matériauxTransformationsAnimations

WPF et la 3DFonctionnalités

6. Un jeton / Trajectoire / Pile / TechDays 09, …

demo

Exemples et pptx de cette présentationhttp://techdays09.blogspot.com

Outils commerciaux utileshttp://www.devexpress.comhttp://www.erain.com/Products/ZAM3D

Documentations / référenceshttp://www.microsoft.com/france/vision/mstechdays09http://msdn.microsoft.com/fr-fr/library/ms754130.aspx

Divershttp://www.codeproject.com

Ergonomie / webhttp://www.sensible.com (Steve Krug)http://www.useit.com (Jacob Nielsen)http://www.lergonome.org

Liens

Questions ?

Save the date for tech·days next year!14 – 15 avril 2010, CICG

Classic Sponsoring Partners

Premium Sponsoring Partners