0
palais des
congrès
Paris
7, 8 et 9
février 2012
07 février 2012
Bewise
Le livre de recette du design et de
l'ergonomie pour le développeur
@ocourtois ocourtois.fr
Olivier Courtois
Responsable BewiseDesign
Consultant, Spécialiste UX
Toulouse Stand 47
@cmaneu maneu.net
Christopher Maneu
Directeur Projet
Consultant, MVP
Toulouse Stand 47
Ouverture d’une
agence sur Paris !
Retrouvez nous sur
le stand 47
Diffuse une expertise novatrice
Contribue à l’émergence ...
CONSTAT
Du webdesign au quotidien
2 CAS DE FIGURE
Aucun designer
Aucun ergonome
Equipe avec designer
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 avant de le livrer
Fondamentaux
LayoutCouleursTypo Ergonomie
TYPOGRAPHIE
1 Familles
Une famille c’est pour la vie, utilisez en moins de trois,
respectez les guidelines (typefaces)
2 S...
TYPOGRAPHIE
4 L’espacement
Ajustez vos textes par rapport à la mise en page avec les
différents espacements
5 Glyphs et al...
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 nom...
DEMO : Typographie et couleurs
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ér...
LAYOUT
Une bonne organisation
Cela tient en 3 étapes
1. Connaissez les règles
Elles sont très simples
2. Remarquez leurs a...
DEMO : Layout
ERGONOMIE
1 Affordance
Caractère intrinsèque d’un objet à nous renseigner sur sa fonction
VS
ERGONOMIE
2 Loi de Fitts
Plus c’est grand et proche, plus c’est facile à cliquer
ERGONOMIE
3 Nombre de Miller
7 (+/- 2)
Vérifier votre travail
1 Issu de l’expérience Bewise
2 Utilisé par des dizaines de
développeurs
OUTIL
”
“Vérifiez et améliorez l’ergonomie
de vos applications vous-même
avec nos chucklists.
Bewise Team
DEMO : ChuckLists
APPLICATION WINDOWS
Utilisez-vous moins de 3 couleurs ?
Utilisez-vous moins de 3 polices de caractères ?
Votre application...
Disponible dès maintenant
http://chucklists.bewise.fr/techdays
5min max
Gratuit
Satisfaction utilisateur
Q/A Merci
Le livre du design et de l'ergonomie pour le développeur
Upcoming SlideShare
Loading in...5
×

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

403

Published on

Présentation donnée en février 2012 pendant les Techdays par Christopher Maneu et moi-même. La vidéo : https://vimeo.com/88650145. 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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
403
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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 devenu 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.
  • Maisrassurez-vouscen’est pas votrefaute. Vousêtesvictime du cloisonnement entre nos métiers ainsiqu’une formation initialedéficiente… n’abordantmalheureusement pas cespratiquesessentiels.
  • C’est pourquoi nous vous proposons un plan en 2 étapes pour partager d’ici la fin de l’heure d’une culture commune en ergonomie et graphisme.
  • Nous vous encourageons à prendre conscience qu’un écran que vous développez n’est pas juste un ensemble de fonctionnalités regroupées au hasard dans ce dernier. Il existe plusieurs couches successives à réfléchir et développer.
  • Malheureusementce site n’estaujourd’hui plus disponible…
  • Transcript of "Le livre du design et de l'ergonomie pour le développeur"

    1. 1. palais des congrès Paris 7, 8 et 9 février 2012
    2. 2. 07 février 2012 Bewise Le livre de recette du design et de l'ergonomie pour le développeur
    3. 3. @ocourtois ocourtois.fr Olivier Courtois Responsable BewiseDesign Consultant, Spécialiste UX Toulouse Stand 47
    4. 4. @cmaneu maneu.net Christopher Maneu Directeur Projet Consultant, MVP Toulouse Stand 47
    5. 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
    6. 6. CONSTAT Du webdesign au quotidien
    7. 7. 2 CAS DE FIGURE Aucun designer Aucun ergonome Equipe avec designer 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. LayoutCouleursTypo Ergonomie
    12. 12. 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
    13. 13. 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.
    14. 14. 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
    15. 15. DEMO : Typographie et couleurs
    16. 16. 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
    17. 17. LAYOUT 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 !
    18. 18. DEMO : Layout
    19. 19. ERGONOMIE 1 Affordance Caractère intrinsèque d’un objet à nous renseigner sur sa fonction VS
    20. 20. ERGONOMIE 2 Loi de Fitts Plus c’est grand et proche, plus c’est facile à cliquer
    21. 21. ERGONOMIE 3 Nombre de Miller 7 (+/- 2)
    22. 22. Vérifier votre travail
    23. 23. 1 Issu de l’expérience Bewise 2 Utilisé par des dizaines de développeurs OUTIL
    24. 24. ” “Vérifiez et améliorez l’ergonomie de vos applications vous-même avec nos chucklists. Bewise Team
    25. 25. DEMO : ChuckLists
    26. 26. 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.
    27. 27. Disponible dès maintenant http://chucklists.bewise.fr/techdays 5min max Gratuit Satisfaction utilisateur
    28. 28. Q/A Merci
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×