2. *
Mais c’est qui, celui-là ?
1. contact@madsgraphics.com
2. @madsgraphics
3. flickr.com/madsgraphics
3. *
Qu’est-ce qu’il nous raconte ?
1. Ergo, Késako ? 6. A fond les ballons
2. Bien connaître l’ennemi 1. Les prototypes
3. /** Pause **/ 2. Les trucs de pros
4. La base, les règles, voire + 3. Le web pour tous
5. /** Déjeuner **/ 7. /** Pause **/
8. Flameware
4. *
Générateur de Newsletter Online
(aka ‘‘le fil rouge’’)
1. Utilise un système de templates 5. Multi-utilisateurs
2. Souple avec l’utilisation de sub- 6. Multi-sessions
layouts
7. Destiné à être utilisé par des
3. Autorise l’import de médias personnes sans compétence
(images) informatique particulière
4. Facilite la saisie textuelle sans
code
6. *
Back to the future :
Histoire de l’ergonomie
Web
7. ”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
14. Vos utilisateurs :
* méthode des personas
1. Personas primaire /
secondaire
4. informations indispensables :
1. Photo
2. Conception des personas en
2. Devise
groupe de travail
3. Orientation sur le projet
3. Définition des personas par
granularité progressive
15. * Bien concevoir vos personas
1. Priorisez les fonctionnalités
2. Abordez les problématiques
complexes
4. Favorisez l'empathie et les
échanges au sein de l'équipe
5. Titre / nom / devise /
photo sont les éléments
3. Orientez les tâches sur
indispensables
l'équipe
6. Restez réalistes
34. *
Principes de la Gestalt
1. Principe de proximité
2. Principe de similarité
35.
36. *
Loi de Fitts
1. Augmenter la taille des éléments cliquables
2. Augmenter la surface de clic
3. Rapprocher les éléments cliquables
37.
38. *
Principe d’affordance
1. Soyez explicite dans les interactions
2. Encouragez visuellement le contact
3. Ré-utilisez les apparences quotidiennes
39.
40.
41.
42. *
Méfiez-vous des idées reçues
1. Les 3 clics 4. On le fera en Web2.0,
Ajax, #WhatEverYouWant
2. Les internautes sont tous des
nazes 5. Les internautes ne scrollent
pas
3. Ergonomie et Design, ennemis
jurés ? 6. L’ergo, on verra ça à la fin
43. *
Mains dans le
cambouis : c’est parti,
je fais de l’ergo !
44. Règle #1 :
*
Architecture & Organisation
1. Regroupements logiques
2. Mise en avant des contenus clés
3. Menus intuitifs
4. Contenus directifs
5. Hiérarchie optimisée
46. Règle #3 :
*
Information de l’utilisateur
1. Le site informe et prévient
2. Le site répond aux actions de l’utilisateur
47. Règle #4 :
*
Aide & Gestion des erreurs
1. 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
48. 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 !
49. 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
54. *
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
55. *
Un plan, c’est bien,
une maison, c’est mieux !
56. *
Objectifs
1. Concrétiser les éléments ergonomiques
2. Rendre l’outil agréable à utiliser
3. Fidéliser / Monétiser le flux
57. *
Mes trucs à moi
parce qu’en vrai, je suis vachement
sympa comme mec
62. *
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
66. *
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
- Utilité : offrir au visiteur ce qu’il attend\n- Efficacité : l’utilisateur doit réussir à faire ce qu’il veut faire\n- Efficience : l’utilisateur doit pouvoir agir rapidement, sans se tromper\n- Satisfaction : l’utilisateur doit prendre plaisir à venir sur le site\n
- Augmenter le trafic / taux de conversion\n- Faciliter l’accès à l’information\n- Améliorer l’image de marque\n
- Méthode expertes : ergonome expert seul\n- Méthode participative : inclusion de panel d’utilisateur / développement en groupe de travail\n
L’ergonomie est le souci de chacun, tout au long de la durée de vie d’un projet\n
\n
\n
\n
\n
\n
\n
- Observer pour déceler les grandes tendances\n- Utiliser l’analyse de clusters\n\n+ Rapide, peu coûteuse, retour d’expérience presque immédiat\n- attention bottom-up (données -> mental) vs top-down (mental -> données), très abstrait, base de travail non-générale\n
- tester prototypes (même papier), maquettes, interfaces fonctionnelles, moteur de recherche\n- établir des scenariis => jeu de rôle, objectifs d’utilisabilité\n- Analyser en masse pour déduire une tendance générique\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
«Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande»\n\n
\n
Affordance : possibilités d’actions suggérées par les caractéristiques de l’objet\n
