palais descongrèsParis7, 8 et 9février 2012
Le livre de recette du design et delergonomie pour le développeur07 février 2012Bewise
Olivier Courtois     Responsable BewiseDesign      Consultant, Spécialiste UX@ocourtois        ocourtois.fr     Toulouse  ...
Christopher Maneu           Directeur Projet          Consultant, MVP@cmaneu      maneu.net        Toulouse   Stand 47
Ouverture d’une                                       agence sur Paris !Pure Player Microsoft depuis 1999Diffuse une exper...
CONSTATDu webdesign   au quotidien
2 CAS DE FIGUREAucun designer    Equipe avec designerAucun ergonome    Et ergonome
Ce n’est pas votre faute !
PLAN EN 2 ETAPES  1   FONDAMENTAUX      Avoir une culture design et ergo  2   VERIFICATIONS      Tester votre travail avan...
Fondamentaux
Typo   Couleurs   Layout   Ergonomie
TYPOGRAPHIE1   Familles    Une famille c’est pour la vie, utilisez en moins de    trois, respectez les guidelines (typefac...
TYPOGRAPHIE4   L’espacement    Ajustez vos textes par rapport à la mise en page avec les    différents espacements5   Glyp...
COULEURS1   Ne les choisissez pas vous même    Vous risquez une fracture de l’œil2   Créez des teintes    Ne multipliez pa...
DEMO : Typographie et couleurs
LAYOUT1     Contraste    Unedes éléments sont différents, différenciez les     Si bonne organisation                      ...
DEMO : Layout
ERGONOMIE1   Affordance    Caractère intrinsèque d’un objet à nous renseigner sur sa fonction2   Loi de Fitts    Plus c’es...
Vérifier votre travail
OUTIL 1   Issu de l’expérience Bewise 2   Utilisé par des dizaines de     développeurs
“Vérifiez et améliorez l’ergonomiede vos applications vous-même             ”avec nos chucklists.                         ...
DEMO : ChuckLists
APPLICATION WINDOWS  Utilisez-vous moins de 3 couleurs ?  Utilisez-vous moins de 3 polices de caractères ?  Votre applicat...
5min max    Gratuit    Satisfaction utilisateurDisponible dès maintenanthttp://chucklists.bewise.fr/techdays
Pour aller plus loin                                               Prochaines sessions des Dev Camps  Chaque semaine, les ...
Q/A   Merci
Le livre de recette du design et de l'ergonomie pour le développeur
Prochain SlideShare
Chargement dans…5
×

Le livre de recette du design et de l'ergonomie pour le développeur

518 vues

Publié le

Développeurs, échappez-vous quelques instants de la grisaille quotidienne. Le chef vous propose de vous asseoir à ses côtés pour apprendre ses techniques. Au menu, concentré de techniques ergonomiques, émulsion de couleurs avec sa touche de typographie, et son rizotto de conseils prêt à l’emploi pour les développeurs. Vous pourrez même emporter tous ses conseils chez vous.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
518
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Tout d’abord nous faisons un constat simple. Avec l’avènement d’internet ces dernières années et l’amélioration des technologies web, le webdesign est devenue très populaire. Si populaire que les gens se sont habitués à un confort d’utilisation. Cette habitude est maintenant clairement renforcée par l’amélioration continue de toutes les machines de notre quotidien : que ce soit les pcs, les tablettes, les téléphones ou les consoles de jeux. L’ergonomie et le design sont en passe de devenir des activités indispensables pour la réussite de votre projet, qu’il soit grand public ou pour l’informatique interne d’une entreprise.
  • Bien sur nous distinguerons 2 cas de figure : - Les équipes qui ne possèdent aucun designer et aucun ergonome. Le plus souvent les réalisations ne correspondent pas au niveau d’attente du client (l’illustration ci-dessus étant quelque peu exagérée j’en conviens). Qui n’a jamais entendu son client dire « ça ne marche pas » juste parce qu’il ne comprend pas l’écran ?? - Les équipes qui possèdent les compétences nécessaires. Dans ce cas de figure la proposition est souvent à la hauteur des attentes du client, c’est la mise en œuvre qui remet le tout en question. En effet quelque soit le cas de figure le développeur assure l’essentiel du travail et à moins d’avoir une sensibilité prononcée pour les interfaces, il y’a fort à parier qu’il y’aura des soucis d’ergonomie et de design.
  • Le livre de recette du design et de l'ergonomie pour le développeur

    1. 1. palais descongrèsParis7, 8 et 9février 2012
    2. 2. Le livre de recette du design et delergonomie pour le développeur07 février 2012Bewise
    3. 3. Olivier Courtois Responsable BewiseDesign Consultant, Spécialiste UX@ocourtois ocourtois.fr Toulouse Stand 47
    4. 4. Christopher Maneu Directeur Projet Consultant, MVP@cmaneu maneu.net Toulouse Stand 47
    5. 5. Ouverture d’une agence sur Paris !Pure Player Microsoft depuis 1999Diffuse une expertise novatrice Retrouvez nous sur le stand 47Contribue à l’émergence de logicielsperformants et ergonomiques
    6. 6. CONSTATDu webdesign au quotidien
    7. 7. 2 CAS DE FIGUREAucun designer Equipe avec designerAucun ergonome Et ergonome
    8. 8. Ce n’est pas votre faute !
    9. 9. PLAN EN 2 ETAPES 1 FONDAMENTAUX Avoir une culture design et ergo 2 VERIFICATIONS Tester votre travail avant de le livrer
    10. 10. Fondamentaux
    11. 11. Typo Couleurs Layout Ergonomie
    12. 12. TYPOGRAPHIE1 Familles Une famille c’est pour la vie, utilisez en moins de trois, respectez les guidelines (typefaces)2 Serif / Sans Serif Choisissez Sans Serif pour un look résolument moderne3 Grasse Le contraste d’un simple clic
    13. 13. TYPOGRAPHIE4 L’espacement Ajustez vos textes par rapport à la mise en page avec les différents espacements5 Glyphs et alphabets Toutes les polices ne naissent pas égales.
    14. 14. COULEURS1 Ne les choisissez pas vous même Vous risquez une fracture de l’œil2 Créez des teintes Ne multipliez pas le nombre de couleurs, utilisez des teintes
    15. 15. DEMO : Typographie et couleurs
    16. 16. LAYOUT1 Contraste Unedes éléments sont différents, différenciez les Si bonne organisation Une bonne organisation en 3 étapes… Cela tient en 3 étapes2 Répétition 1. Connaissez les règles Créez une unité en répétant Elles sont très simples 1 Connaissez les règles une caractéristique visuelle Elles sont très simples 2 2. Remarquez leurs absences Remarquez leurs absencesIl faut être en mesure de formuler le 3 Alignement Il faut être en mesure de formuler le problème problème 3. Appliquer ces règlesVous allez être surpris du résultat ! 3 Appliquez ces principes Guidez l’œil de l’utilisateur en alignant les éléments Vous allez être surpris du résultat !4 Proximité Regroupez les éléments de même sens, séparez les autres
    17. 17. DEMO : Layout
    18. 18. ERGONOMIE1 Affordance Caractère intrinsèque d’un objet à nous renseigner sur sa fonction2 Loi de Fitts Plus c’est grand et proche, plus c’est facile à cliquer VS3 Nombre de Miller 7 (+/- 2)
    19. 19. Vérifier votre travail
    20. 20. OUTIL 1 Issu de l’expérience Bewise 2 Utilisé par des dizaines de développeurs
    21. 21. “Vérifiez et améliorez l’ergonomiede vos applications vous-même ”avec nos chucklists. Bewise Team
    22. 22. DEMO : ChuckLists
    23. 23. APPLICATION WINDOWS Utilisez-vous moins de 3 couleurs ? Utilisez-vous moins de 3 polices de caractères ? Votre application se lance en plus de 200ms ? Soyez sur d’avoir un « splashscreen ». 1 Utilisez-vous des tooltips?2 Parfait à condition que ce soit pour aider vos utilisateurs et non pour palier un problème 4 de place 3 Positionnez-vous sur le premier champ puis vérifiez qu’à chaque appui sur TAB, le focus va sur le bon champ Devez-vous demander confirmation à l’utilisateur? Pour une action fréquente offrez un undo, pour le reste faites le.
    24. 24. 5min max Gratuit Satisfaction utilisateurDisponible dès maintenanthttp://chucklists.bewise.fr/techdays
    25. 25. Pour aller plus loin Prochaines sessions des Dev Camps Chaque semaine, les 10 Live Open Data - Développer des applications riches avec le février DevCamps 2012 16 Meeting protocole Open Data ALM, Azure, Windows Phone, HTML5, OpenData février Live Meeting Azure series - Développer des applications sociales sur la plateforme Windows Azure 2012 http://msdn.microsoft.com/fr-fr/devcamp 17 Live Comprendre le canvas avec Galactic et la librairie février Meeting three.js 2012 Téléchargement, ressources 21 février Live La production automatisée de code avec CodeFluent Meeting Entities et toolkits : RdV sur MSDN 2012 2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour http://msdn.microsoft.com/fr-fr/ 2012 Meeting Windows Phone 7, iOS et Android 6 mars Live Nuget et ALM 2012 Meeting Les offres à connaître 9 mars 2012 Live Meeting Kinect - Bien gérer la vie de son capteur 90 jours d’essai gratuit de Windows 13 mars 2012 Live Meeting Sharepoint series - Automatisation des tests Azure 14 mars Live TFS Health Check - vérifier la bonne santé de votre www.windowsazure.fr 2012 Meeting plateforme de développement 15 mars Live Azure series - Développer pour les téléphones, les 2012 Meeting tablettes et le cloud avec Visual Studio 2010 Jusqu’à 35% de réduction sur Visual 16 mars Live Applications METRO design - Désossage en règle dun Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript 20 mars Live Retour dexpérience LightSwitch, Optimisation de www.visualstudio.fr 2012 Meeting laccès aux données, Intégration Silverlight 23 mars Live OAuth - la clé de lutilisation des réseaux sociaux dans 2012 Meeting votre application
    26. 26. Q/A Merci

    ×