Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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.

Christopher MANEU

February 07, 2012
Tweet

More Decks by Christopher MANEU

Other Decks in Technology

Transcript

  1. palais des
    congrès
    Paris
    7, 8 et 9
    février 2012

    View Slide

  2. 07 février 2012
    Bewise
    Le livre de recette du design et de
    l'ergonomie pour le développeur

    View Slide

  3. @ocourtois ocourtois.fr
    Olivier Courtois
    Responsable BewiseDesign
    Consultant, Spécialiste UX
    Toulouse Stand 47

    View Slide

  4. @cmaneu maneu.net
    Christopher Maneu
    Directeur Projet
    Consultant, MVP
    Toulouse Stand 47

    View Slide

  5. Ouverture d’une
    agence sur Paris !
    Retrouvez nous sur
    le stand 47
    Diffuse une expertise novatrice
    Contribue à l’émergence de logiciels
    performants et ergonomiques
    Pure Player Microsoft depuis 1999

    View Slide

  6. View Slide

  7. CONSTAT
    Du webdesign au quotidien

    View Slide

  8. 2 CAS DE FIGURE
    Aucun designer
    Aucun ergonome
    Equipe avec designer
    Et ergonome

    View Slide

  9. Ce n’est pas votre faute !

    View Slide

  10. PLAN EN 2 ETAPES
    1 FONDAMENTAUX
    Avoir une culture design et ergo
    2 VERIFICATIONS
    Tester votre travail avant de le livrer

    View Slide

  11. Fondamentaux

    View Slide

  12. Layout
    Couleurs
    Typo Ergonomie

    View Slide

  13. TYPOGRAPHIE
    1 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 moderne
    3 Grasse
    Le contraste d’un simple clic

    View Slide

  14. TYPOGRAPHIE
    4 L’espacement
    Ajustez vos textes par rapport à la mise en page avec les
    différents espacements
    5 Glyphs et alphabets
    Toutes les polices ne naissent pas égales.

    View Slide

  15. COULEURS
    1 Ne les choisissez pas vous même
    Vous risquez une fracture de l’œil
    2 Créez des teintes
    Ne multipliez pas le nombre de couleurs, utilisez des teintes

    View Slide

  16. DEMO : Typographie et couleurs

    View Slide

  17. LAYOUT
    1 Contraste
    Si des éléments sont différents, différenciez les
    2 Répétition
    Créez une unité en répétant une caractéristique visuelle
    3 Alignement
    Guidez l’œil de l’utilisateur en alignant les éléments
    4 Proximité
    Regroupez les éléments de même sens, séparez les autres
    Une bonne organisation
    Cela tient en 3 étapes
    1. Connaissez les règles
    Elles sont très simples
    2. Remarquez leurs absences
    Il faut être en mesure de formuler le
    problème
    3. Appliquer ces règles
    Vous allez être surpris du résultat !
    Une bonne organisation
    en 3 étapes…
    1 Connaissez les règles
    Elles sont très simples
    2 Remarquez leurs absences
    Il faut être en mesure de formuler le problème
    3 Appliquez ces principes
    Vous allez être surpris du résultat !

    View Slide

  18. DEMO : Layout

    View Slide

  19. ERGONOMIE
    1 Affordance
    Caractère intrinsèque d’un objet à nous renseigner sur sa fonction
    2 Loi de Fitts
    Plus c’est grand et proche, plus c’est facile à cliquer
    3 Nombre de Miller
    7 (+/-
    2)
    VS

    View Slide

  20. Vérifier votre travail

    View Slide

  21. 1 Issu de l’expérience Bewise
    2 Utilisé par des dizaines de
    développeurs
    OUTIL

    View Slide


  22. “Vérifiez et améliorez l’ergonomie de
    vos applications vous-même avec
    nos chucklists.
    Bewise Team

    View Slide

  23. DEMO : ChuckLists

    View Slide

  24. 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 ».
    Utilisez-vous des tooltips? Parfait à condition que ce soit pour
    aider vos utilisateurs et non pour palier un problème de place
    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.
    1
    2
    3
    4

    View Slide

  25. Disponible dès maintenant
    http://chucklists.bewise.fr/techdays
    5min max
    Gratuit
    Satisfaction utilisateur

    View Slide

  26. Chaque semaine, les DevCamps
    ALM, Azure, Windows Phone, HTML5, OpenData
    http://msdn.microsoft.com/fr-fr/devcamp
    Téléchargement, ressources et
    toolkits : RdV sur MSDN
    http://msdn.microsoft.com/fr-fr/
    Les offres à connaître
    90 jours d’essai gratuit de Windows Azure
    www.windowsazure.fr
    Jusqu’à 35% de réduction sur Visual Studio
    Pro, avec l’abonnement MSDN
    www.visualstudio.fr
    Pour aller plus loin
    10 février
    2012
    Live
    Meeting
    Open Data - Développer des applications riches avec le
    protocole Open Data
    16 février
    2012
    Live
    Meeting
    Azure series - Développer des applications sociales sur la
    plateforme Windows Azure
    17 février
    2012
    Live
    Meeting
    Comprendre le canvas avec Galactic et la librairie three.js
    21 février
    2012
    Live
    Meeting
    La production automatisée de code avec CodeFluent Entities
    2 mars
    2012
    Live
    Meeting
    Comprendre et mettre en oeuvre le toolkit Azure pour Windows
    Phone 7, iOS et Android
    6 mars
    2012
    Live
    Meeting
    Nuget et ALM
    9 mars
    2012
    Live
    Meeting
    Kinect - Bien gérer la vie de son capteur
    13 mars
    2012
    Live
    Meeting
    Sharepoint series - Automatisation des tests
    14 mars
    2012
    Live
    Meeting
    TFS Health Check - vérifier la bonne santé de votre plateforme
    de développement
    15 mars
    2012
    Live
    Meeting
    Azure series - Développer pour les téléphones, les tablettes et
    le cloud avec Visual Studio 2010
    16 mars
    2012
    Live
    Meeting
    Applications METRO design - Désossage en règle d'un template
    METRO javascript
    20 mars
    2012
    Live
    Meeting
    Retour d'expérience LightSwitch, Optimisation de l'accès aux
    données, Intégration Silverlight
    23 mars
    2012
    Live
    Meeting
    OAuth - la clé de l'utilisation des réseaux sociaux dans votre
    application
    Prochaines sessions des Dev Camps

    View Slide

  27. Q/A Merci

    View Slide