Download - Ergonomie des applications web
![Page 1: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/1.jpg)
Ergonomie des Applications Web
CESI • 4 janvier 2011
*
![Page 2: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/2.jpg)
Mais c’est qui, celui-là ?
2. @madsgraphics
3. flickr.com/madsgraphics
*
![Page 3: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/3.jpg)
Qu’est-ce qu’il nous raconte ?
1. Ergo, Késako ?
2. Bien connaître l’ennemi
3. /** Pause **/
4. La base, les règles, voire +
5. /** Déjeuner **/
6. A fond les ballons
1. Les prototypes
2. Les trucs de pros
3. Le web pour tous
7. /** Pause **/
8. Flameware
*
![Page 4: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/4.jpg)
Générateur de Newsletter Online (aka ‘‘le fil rouge’’)
1. Utilise un système de templates
2. Souple avec l’utilisation de sub-layouts
3. Autorise l’import de médias (images)
4. Facilite la saisie textuelle sans code
5. Multi-utilisateurs
6. Multi-sessions
7. Destiné à être utilisé par des personnes sans compétence informatique particulière
*
![Page 5: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/5.jpg)
Pas de panique, tout va bien se passer ;)
*
![Page 6: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/6.jpg)
Back to the future :Histoire de l’ergonomie
Web
*
![Page 7: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/7.jpg)
”L’ensemble des connaissances scientifiques relative à l’Homme nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité,
et d'efficacité”Alain Wisner
![Page 8: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/8.jpg)
Ergonomie Générale
Interfaces Homme-Machine (IHM)
Ergonomie des applications informatiques
Ergonomie Web
![Page 9: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/9.jpg)
Utilité
Capter l’utilisateur
Utilisabilité
Efficacité Efficience Satisfaction
![Page 10: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/10.jpg)
Non mais quel intérêt, franchement, je vous
demande ?!*
![Page 11: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/11.jpg)
Méthodes expertesvs
Méthodes participatives
*
*
![Page 12: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/12.jpg)
Soyez bon, soyez beau,mangez un ergonome au petit
dejeuner
*
![Page 13: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/13.jpg)
C’est qui, mon internaute ?
*
![Page 14: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/14.jpg)
Vos utilisateurs :méthode des personas1. Personas primaire /
secondaire
2. Conception des personas en groupe de travail
3. Définition des personas par granularité progressive
4. informations indispensables :
1. Photo
2. Devise
3. Orientation sur le projet
*
![Page 15: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/15.jpg)
Bien concevoir vos personas
1. Priorisez les fonctionnalités
2. Abordez les problématiques complexes
3. Orientez les tâches sur l'équipe
4. Favorisez l'empathie et les échanges au sein de l'équipe
5. Titre / nom / devise / photo sont les éléments indispensables
6. Restez réalistes
*
![Page 16: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/16.jpg)
![Page 17: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/17.jpg)
N’assassinez jamais vos Personas !
*
![Page 18: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/18.jpg)
Oui, mais c’est sûr ?
*
![Page 19: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/19.jpg)
Méthode du Card-Sorting
1. Préparer votre matériel
2. Cibler vos utilisateurs
3. 2. 1. ... Triez !
4. Analyser les résultats
5. Limites de la méthode
*
![Page 20: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/20.jpg)
Tests utilisateurs
1. Recruter vos testeurs
2. Quand tester quoi ?
3. Analyser les résultats
*
![Page 21: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/21.jpg)
Bonus : la méthode Lean IA*Analyser
Prototyper
Tester
Livrer
![Page 22: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/22.jpg)
/** Pause **/
![Page 23: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/23.jpg)
Allez, on s’y colle pour de bon !*
![Page 24: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/24.jpg)
C’est quoi, un site ergonomique ?
*
![Page 25: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/25.jpg)
![Page 26: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/26.jpg)
![Page 27: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/27.jpg)
![Page 28: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/28.jpg)
![Page 29: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/29.jpg)
![Page 30: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/30.jpg)
![Page 31: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/31.jpg)
![Page 32: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/32.jpg)
Principes de la Gestalt
1. Principe de proximité*
![Page 33: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/33.jpg)
![Page 34: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/34.jpg)
Principes de la Gestalt
1. Principe de proximité
2. Principe de similarité
*
![Page 35: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/35.jpg)
![Page 36: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/36.jpg)
Loi de Fitts
1. Augmenter la taille des éléments cliquables
2. Augmenter la surface de clic
3. Rapprocher les éléments cliquables
*
![Page 37: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/37.jpg)
![Page 38: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/38.jpg)
Principe d’affordance
1. Soyez explicite dans les interactions
2. Encouragez visuellement le contact
3. Ré-utilisez les apparences quotidiennes
*
![Page 39: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/39.jpg)
![Page 40: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/40.jpg)
![Page 41: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/41.jpg)
![Page 42: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/42.jpg)
Méfiez-vous des idées reçues
1. Les 3 clics
2. Les internautes sont tous des nazes
3. Ergonomie et Design, ennemis jurés ?
4. On le fera en Web2.0, Ajax, #WhatEverYouWant
5. Les internautes ne scrollent pas
6. L’ergo, on verra ça à la fin
*
![Page 43: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/43.jpg)
Mains dans le cambouis : c’est parti,
je fais de l’ergo !
*
![Page 44: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/44.jpg)
Règle #1 :Architecture & Organisation1. Regroupements logiques
2. Mise en avant des contenus clés
3. Menus intuitifs
4. Contenus directifs
5. Hiérarchie optimisée
*
![Page 45: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/45.jpg)
Règle #2 :Cohérence & Conventions
1. Localisations intelligentes
2. Appellations fiables
3. Formats de référence
4. Utilisation des chartes
*
![Page 46: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/46.jpg)
Règle #3 :Information de l’utilisateur
1. Le site informe et prévient
2. Le site répond aux actions de l’utilisateur
*
![Page 47: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/47.jpg)
Règle #4 :Aide & Gestion des erreurs1. Dirigez les actions de l’utilisateur
2. Assistez votre utilisateur
3. Fournissez de l’aide
4. Ne laissez pas la place à l’imprévu
5. Aidez l’utilisateur à comprendre ses erreurs
*
![Page 48: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/48.jpg)
Règle #5 :Rapidité d’accès a l’outil
1. Optimisez les actions
2. Multipliez les points d’entrée
3. Facilitez les interactions
4. DRY : Ne vous répétez pas !
*
![Page 49: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/49.jpg)
Règle #6 :L’internaute aux commandes
1. Respectez les contrôles conventionnels
2. Laissez le choix à l’utilisateur
3. N’allez jamais à l’encontre des habitudes de votre visiteur
*
![Page 50: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/50.jpg)
Ca va ?Pas trop mal aux
cheveux ?
*
![Page 51: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/51.jpg)
/** Pause **/
![Page 52: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/52.jpg)
Si on essayait, maintenant ?
*
![Page 53: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/53.jpg)
Ne tirez pas sur le Graphiste ...
*
![Page 54: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/54.jpg)
Concepts & enjeux
1. Respect de l’identité de l’entreprise
2. Respect des contraintes ergonomiques du prototype
3. Respect de la sémantique du code
*
![Page 55: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/55.jpg)
Un plan, c’est bien,une maison, c’est mieux !
*
![Page 56: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/56.jpg)
Objectifs
1. Concrétiser les éléments ergonomiques
2. Rendre l’outil agréable à utiliser
3. Fidéliser / Monétiser le flux
*
![Page 57: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/57.jpg)
Mes trucs à moiparce qu’en vrai, je suis vachement
sympa comme mec
*
![Page 58: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/58.jpg)
Concevez des Wireframes*
![Page 59: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/59.jpg)
Alla Gouraud • Artagence : Wireframe
![Page 60: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/60.jpg)
Alla Gouraud • Artagence : Rendu final
![Page 61: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/61.jpg)
![Page 62: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/62.jpg)
Architecture des mock-ups
1. Respectez la charte graphique imposée
2. Utilisez des grilles de mise en forme (960gs, blueprint ...)
3. Choisissez correctement votre typo
*
![Page 63: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/63.jpg)
Les PMR*, sur le web comme dans la vie !
*
![Page 64: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/64.jpg)
![Page 65: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/65.jpg)
![Page 66: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/66.jpg)
Accessibilité, un enjeu majeur
1. Faciliter l’accès au plus grand nombre
2. Maintenir un code de qualité pour les évolutions futures
3. Améliorer l’utilisabilité de l’ensemble pour tous les visiteurs
*
![Page 67: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/67.jpg)
Une seule norme pour les gouverner tous :
WCAG*
*
![Page 68: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/68.jpg)
/** Pause **/
![Page 69: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/69.jpg)
Lâchez-vous :Flameware*
![Page 70: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/70.jpg)
La boîte à Outils*
![Page 71: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/71.jpg)
Card-Sorting
1. xSort (Mac)
2. WebSort
3. Optimal Workshop
4. Du papier, des crayons, un polaroïd :)
*
![Page 72: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/72.jpg)
Wireframes
1. Visio (PC)
2. Omnigraffle (Mac)
3. Keynote (Mac)
4. Illustrator (Mac & PC)
5. Photoshop (Mac & PC)
6. Pencil (*)
7. Outils en ligne
*
![Page 73: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/73.jpg)
Mock-Ups
1. Photoshop (Mac & PC)
2. Illustrator (Mac & PC)
3. GIMP (*)
4. Fireworks (Mac & PC)
*
![Page 74: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/74.jpg)
Architecture
1. Frameworks Grid System (960.gs / Blueprint / YUI)
2. Frameworks CSS (YUI, jQuery-UI)
3. Guides typographiques
4. Web Frameworks (SproutCore, Cappuccino)
*
![Page 75: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/75.jpg)
Inspiration1. Inspiration Time
http://inspirationti.me
2. Trends Nowhttp://trendsnow.net/
3. Artskillshttp://www.artskills.net/
4. 365 PSDhttp://365psd.com/
5. Smashing Magazinehttp://smashingmagazine.com
6. Wireframes Magazinehttp://wireframes.linowski.ca/
7. Wireframe Showcasehttp://wireframeshowcase.com
8. Twitter@deaxon / @glazou /@wdfr
*
![Page 76: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/76.jpg)
Add-ons
1. Kuler
2. VMware / Virtualbox
3. Editeur CSS
*
![Page 77: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/77.jpg)
Ressources1. Ergonomie Web • Amélie Boucher • Ed.
Eyrolles
2. Interaction home-machine pour les SI • Christophe Kolski • Ed. Eyrolles
3. Ergonomie Web Illustrée • Amélie Boucher • Ed. Eyrolles
4. Mémento Sites Web : les bonnes pratiques • Elie Sloïm • Ed. Eyrolles
5. iPhone Human Interface Guidelines • Apple Developper portal
6. TUTS+ Network • tutsplus.com
7. Le Typographe • typographe.com
8. Ergolab • ergolab.net
9. Projet OPQUAST • opquast.com • opquast.org
*
![Page 78: Ergonomie des applications web](https://reader036.vdocuments.site/reader036/viewer/2022062300/555df718d8b42ae4628b4ba8/html5/thumbnails/78.jpg)
slideshare.net/madsgraphics/ergonomie-des-applications-web
Merci ;)