j-c armici / ph. schutz. physicien, enseignant en informatique cartes perforées, turbo pascal,...
Post on 04-Apr-2015
107 Views
Preview:
TRANSCRIPT
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
Agenda
IntroductionOù 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éalismeAccessibilité:
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
2
1
4
3
Empilage vertical ou horizontal des éléments
21 43
LayoutWrapPanel
21
4
3
Positionnement en continu (horizontal ou vertical)
2
1
4
3
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
top related