1 / 50

Ergonomics and Design with WPF and Expression

Explore the relationship between ergonomics, design, and technology using WPF and Expression tools. Learn about the roles of designers and developers, the advantages of WPF, and the evolution of user interface design. Discover the impact of aesthetics on usability and the importance of user-centric design.

alain
Télécharger la présentation

Ergonomics and Design with WPF and Expression

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ergonomie et design avec WPF et Expression J-C Armici / Ph. Schutz

  2. 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

  3. 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

  4. Introduction • Ergonomie = bon sens • Design = aspect visuel • Peu de code • Démonstrationsvisuelles • La présentationcomplète • http://techdays09.blogspot.com • Expression Blend 3 !

  5. La famille Expression

  6. La famille Expression Microsoft Expression Blend Microsoft Expression Design

  7. 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 ? • 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,…)

  9. 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. 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

  11. 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

  12. Evolution du comportementEyetracking 2005 2008 Réf. http://thinkeyetracking.com

  13. 1. Carnet d’adresses& grid / chart WPF demo

  14. 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

  15. 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é

  16. Evolution designAvant / après relooking

  17. Evolution designIcône vectorielle

  18. Evolution designIcône vectorielle

  19. Evolution designIcône vectorielle

  20. Exemple d’intégration du design Projet V-City Cartographie dynamique 2004

  21. 2. Expression Design : LIVE! demo

  22. Nouveau partage des rôlesParadoxe ? Designer Développeur

  23. 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)

  24. 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

  25. 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

  26. 3. Flèches / Avril / Jeton demo

  27. Evolution ergonomie/designExemple de collaboration Version de départ 2004 ASP.NET 1.1

  28. Evolution ergonomie/design1ère étape Maquette de disposition des éléments

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

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

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

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

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

  34. Evolution ergonomie/designComparaison

  35. 3 rôles Développeur Designer Intégrateur

  36. 4. Loupe / Horloge5. Formulaire d’adresses demo

  37. LayoutCanvas Positionnement en absolu (x,y) Left=0 Top=0 Right=0 Top=0 Left=340 Top=220 Right=0 Bottom=0

  38. LayoutStackPanel 1 Empilage vertical ou horizontal des éléments 2 3 1 2 3 4 4

  39. LayoutWrapPanel Positionnement en continu (horizontal ou vertical) 1 2 3 1 3 4 4 2

  40. LayoutDockPanel Positionnement par ancrage Top Left Right

  41. LayoutUniformGrid Positionnement sur une grille dont les cellules ont les mêmes dimensions 1 2 3 4

  42. 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*

  43. 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

  44. 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

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

  46. 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

  47. Questions ?

  48. Save the date for tech·days nextyear! 14 – 15 avril 2010, CICG

  49. Premium Sponsoring Partners Classic Sponsoring Partners

More Related