510 likes | 611 Views
Ergonomie et design avec WPF et Expression. J-C Armici / Ph. Schutz. Qui sommes-nous ?. Jean-Claude Armici. Philippe Schutz. Physicien , enseignant en informatique Cartes perforées , Turbo Pascal, Delphi, Java, C# www.facile.ch Très attaché au bon sens. jc.armici @ gmail.com.
E N D
Ergonomie et design avec WPF et Expression J-C Armici / Ph. Schutz
Qui sommes-nous ? Jean-Claude Armici • Philippe • Schutz • Physicien, enseignant en informatique • Cartesperforées, Turbo Pascal, Delphi, Java, C# • www.facile.ch • Très attaché au bon sens jc.armici@gmail.com pschutz@iprolink.ch • Informaticien • Créateurindépendant • CT Technologies, Inc. • Commodore 64, Turbo Pascal, Delphi, C#, Linq • ASP.NET, Ajax • Graphiste et dessinateurd’icônes
Agenda • Introduction • Où se situe WPF ? • Pourquoil’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 • Démonstrationsvisuelles • La présentationcomplète • http://techdays09.blogspot.com • Expression Blend 3 !
La famille Expression Microsoft Expression Blend Microsoft Expression Design
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 ? • Indépendance de la résolutiond’écran • Meilleurecompréhension: • Approchevisuelle(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é • Applications à forte identité • Exploitation optimale du matériel • Concrétisation des idées
ErgonomiePrincipes généraux • Concerne tout et tout le monde • Adéquationhumain – machine • Ergonomie physique (caractéristiquesphysiologiques) • Ergonomiementale(fonctionnementcognitif) • But: améliorer les conditions d’utilisation • Trouver les dysfonctionnements, les résoudre
ErgonomieInformatique • Importance croissante des IHM • Nécessité de connaîtrel’utilisateur • Comportement • Habitudes • Eye Tracking • Utilité(servir un besoin) • Utilisabilité(facilité, efficacité, satisfaction…) • Distinction entre web et applications
Evolution du comportementEyetracking 2005 2008 Réf. http://thinkeyetracking.com
DesignL’importance du beau • Design = esthétique / look • Importance de l’aspectvisuel(qualitéperçue) • L’esthétiquefavorisel’utilisabilité • La beautéest subjective et culturelle • Une belle interface rend indulgent
DesignLa quête du Graal • Les outils: Expression Blend & Design • Intégrer le design à la conception • Importance de l’émotionsur la perception • Libérer la créativité
Exemple d’intégration du design Projet V-City Cartographie dynamique 2004
Nouveau partage des rôlesParadoxe ? Designer Développeur
Rôle de l'intégrateurExpression Blend ! • Bonne connaissance des deuxdomaines • Connexion du code et du design • Resources, templates et styles • Databind • Commandes, événements • Ajout des animations (scénarios) • Créationd’élémentsvisuels(UserControl)
Avantages pour le designerExpression Design ! • Intégrationdans le processus de conception • Richesse des moyens à disposition: • Mode vectorielnatif • Partage de la chartegraphique • Effetsspéciaux (ombre, flous, etc) • Import des formats .ai et .pdf • Non confiné au graphismepur • Moins de contraintes techniques
Avantages pour le développeur Visual Studio ! • Se recentresur son activité première • Développeunelogique métier • Apporte des fonctionnalités • Interface utilisateur 100% objet • XAML simplifie le développement
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
3 rôles Développeur Designer Intégrateur
LayoutCanvas Positionnement en absolu (x,y) Left=0 Top=0 Right=0 Top=0 Left=340 Top=220 Right=0 Bottom=0
LayoutStackPanel 1 Empilage vertical ou horizontal des éléments 2 3 1 2 3 4 4
LayoutWrapPanel Positionnement en continu (horizontal ou vertical) 1 2 3 1 3 4 4 2
LayoutDockPanel Positionnement par ancrage Top Left Right
LayoutUniformGrid Positionnement sur une grille dont les cellules ont les mêmes dimensions 1 2 3 4
LayoutGrid • Dimensions • Absolues (par ex. pixels) • Auto-ajustement (*) • Proportionnelles (%) • Multicolonnes • Multilignes • RowSpan et ColSpan Width=100 Width=* Width=100 Width=* Width=* Width=* Width=100 Width=* Width=* Width=2*
Et la 3D, alors ? • Interaction “plus naturelle” • 3D native dans WPF • 2D et 3D : mêmeméthodologie • Symbiose 2D / 3D dans la même application • Parfois la 3D estnécessaire
WPF et la 3DFonctionnalités • Caméras(vue perspective ouorthographique) • Objets et scènes • Éclairages(ambiant, directionnel, ponctuelou spot) • Textures et matériaux • Transformations • Animations
Liens • Exemples et pptx de cetteprésentation • http://techdays09.blogspot.com • Outilscommerciauxutiles • 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
Save the date for tech·days nextyear! 14 – 15 avril 2010, CICG
Premium Sponsoring Partners Classic Sponsoring Partners