Le document aborde les principes de conception web centrés sur l'utilisateur, en soulignant l'importance de l'utilisabilité pour garantir la satisfaction client et augmenter les taux de conversion. Il discute également des méthodes d'ergonomie, de la psychologie de la perception et de la structuration de l'information pour optimiser l'expérience utilisateur. Enfin, il présente des outils et techniques de prototypage ainsi que l'importance des tests dans le processus de développement web.

1. Conception web

2. gino (at) bontempelli.net Gino Bontempelli DEA de philosophie Mastère d'ingéniérie numérique Mastère Intelligence économique Chef de projet - Région PACA Editeur Internet - Editions Nivéales Directeur de Projets - Groupe Expansion

3. Une Loi… ... plutôt qu'à vous même ! Pensez aux utilisateurs…

4. Pourquoi ? Que disent les scientifiques ? Une histoire de méthode et d'outils Des exemples Agenda

5. http://www.usabilitynet.org/management/c_business.htm Utilité : capacité d’être utile dans la réalisation d’une tâche. Utilisabilité (usability) : capacité d’être facile à utiliser. Definitions

6. Un système est utilisable lorsqu’il permet à l’utilisateur de réaliser sa tâche avec efficacité, efficience et satisfaction dans le contexte d’utilisation spécifié. « » ISO 9241-11

7. http://www.usabilitynet.org/management/c_business.htm Good usability leads to satisfied, purchasing and returning customers Bad usability leads to angry customers and loss in sales Conversion rate: measure purchases, not traffic Better brand Reduced costs for development and maintenance Improved productivity Reduced costs for training Pourquoi ?

8. http://www.usabilityprofessionals.org/usability_resources/usability_in_the_real_world/roi_of_usability.html The ROI of Usability "The rule of thumb in many usability-aware organizations is that the cost-benefit ratio for usability is $1:$10-$100. Once a system is in development, correcting a problem costs 10 times as much as fixing the same problem in design. If the system has been released, it costs 100 times as much relative to fixing in design." (Gilb, 1988) "

9.  L'Homme perçoit

10. Alberto Fernandez Fernandez

11. Gestalt, la théorie de la « bonne forme » Physiologie de la perception Des paradigmes de la perception

12. ! http://fr.wikipedia.org/wiki/Psychologie_de_la_forme "L’eau est autre chose que de l’oxygène et de l’hydrogène ; une symphonie est autre chose qu’une succession de notes. On constate ainsi que le tout est différent de la somme de ses parties"

13. ! http://fr.wikipedia.org/wiki/Psychologie_de_la_forme "L’eau est autre chose que de l’oxygène et de l’hydrogène ; une symphonie est autre chose qu’une succession de notes. On constate ainsi que le tout est différent de la somme de ses parties"

14. ! http://fr.wikipedia.org/wiki/Psychologie_de_la_forme La loi de la bonne forme : loi principale dont les autres découlent : un ensemble de parties informe (comme des groupements aléatoires de points) tend à être perçu d'abord (automatiquement) comme une forme, cette forme se veut simple, symétrique, stable, en somme une bonne forme.

15. http://www.netway.eu/news/games/game1/game1.taf La loi de bonne continuation : ce qui est aligné s’assemble (exemple d’application : les textes doivent être en fer à gauche, les puces relèvent d’un même thème)

16. http://www.kalenga.fr/web/ergonomie-web-principes/2009/04/ Loi de proximité : ce qui est proche s’assemble (exemple d’application : les fonctions doivent être regroupées dans un même espace)

17. Sacades occulaires : mouvements simples, rapides permettant de cibler les lettres à lire. L’empan perceptif : région du champ visuel autour du point de fixation à l’intérieur de laquelle de l’information utile est extraite. Il est communément admis que la taille de cet empan est très limitée. Il peut être augmenté par de bonnes informations typographiques. http://tel.archives-ouvertes.fr/tel-00342146/en/ Voir ...

18. 6° - 20 / 30 – 125 / 180 Vision périphérique vs Fovéa

19.  L'Homme pense !

20. Miller, 1956 MCT : taille (7 +- 2), durée, problèmes MLT : Taille, durée, structures (reconnaissance) Une affaire de mémoire(S)

21. http://www.netway.eu/news/games/game2/game2.html http://www.marsouin.org/article.php3?id_article=152 1) Amorçage du fond par la forme 2) « L’amorçage ou priming en anglais caractérise un processus d’activation cognitive et comportementale faisant que des informations incidentes auxquelles un individu est exposé vont par la suite affecter le jugement et le comportement de cet individu dans une autre situation quand bien même cette situation n’a rien à voir avec les informations. » Amorçage

22. l'effet de primauté , qui traduit le rappel plus aisé des premiers mots en tête d'une liste probablement attribuable à une plus grande répétition et à leur vulnérabilité relativement moindre à l'interférence, l'effet de récence, qui correspond au rappel plus aisé des derniers mots d'une liste attribuable au stockage en mémoire à court terme. http://www.lergonome.org/so/u.htm#/index.php?option=com_content&task=view&id=31&Itemid=29 « »

23. Selon les objectifs de la tâche, les sujets développent une représentation de l’objet à traiter, laconique et déformée fonctionnellement, qui est plus adaptée à la tâche qu’une représentation « objective » (cité par Spérandio, L’ergonomie du travail mental, 1984)

24. Modèle de contrôle de l’activité : -Skill-based behaviour -Rules-based behaviour -Knowledge-based behaviour « Coût cognitif » Le modèle de Rasmussen, un modèle adapté aux tâches sur le web ?

25. Ne pas faire réfléchir L’utilisateur !

26. http://www.youtube.com/watch?v=kab9DmLZNj8 Le tracking visuel

27. http://www.jasonunes.com/labels/agile.html “ La” méthode

28. Démarche de conception orientée utilisateur Communautés d’utilisateurs

29.  Pour qui ?

30. Archétypes utilisateurs issus de l’analyse ethnographique des publics cibles Leur donner un petit nom Leur créer une histoire

31. … pour créer les rubriques Classer, organiser l’information

32. Regrouper, créer des rubriques adaptées à l’utilisateur et à sa recherche Attention aux schémas trop classiques Attention aux schémas trop originaux ! Exercice : Site de vente d’animaux d’afrique Pourquoi ?

33. a) appartenant à l’Empereur, b) embaumés, c) apprivoisés, d) cochons de lait, e) sirènes, f) fabuleux, g) chiens en liberté, h) inclus dans la présente classification, i) qui s’agitent comme des fous, j) innombrables, k) dessinés avec un pinceau très fin en poils de chameau, l) et cætera, m) qui viennent de casser la cruche, n) qui de loin semblent des mouches. Classer ?

34. http://louisrosenfeld.com/home/

35. Individuel ou collectif Post-it Classement automatique de données (CAH) Tri par cartes

36. Exacts Géographiques; Alphabétiques; Chronologiques Orientés utilisateur Hybrides Magazine; Métaphore; Par thème (pages jaunes) Des principes de classification divers

37. 7 + 3 Attention à la largeur et à la profondeur 1 3 2 4 5 6 7 21 22 23 31 32 33 41 42 43 51 61 62 63 71 72 11 12

38. Permettre à l’utilisateur de savoir ou il est, ou il est allé Fil d’ariane Titres explicites Créer un schéma de navigation simple et stable Éviter les sous-menus cachés Barre de navigation identique sur toutes les pages Respecter les schémas des standards de fait Soigner les liens (« clic » informé, sur mots clés) Principes d’ergonomie

39. Tester ?

40. Maquettes / prototypes Zoning Maquette fonctionnelle sans graphisme Utilisation des outils wysiwyg Montrer, “in intinere”

41. Papier / crayon ! Powerpoint Dreamweaver Nombreux outils spécifiques…(ProtoShare, InVision, Just Proto, App Sketcher, PowerMockup). Du statique … au plus ou moins dynamique … Des outils pour réaliser les maquettes ?

42. 193.95.3.185 - - [18/Oct/2002:23:00:13 +0200] "GET /pat/internet/didactic/menusour.gif HTTP/1.0" 200 22102 "http://www-ipst.u-strasbg.fr/pat/internet/didactic/introwin.htm" "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)" 193.95.3.185 - - [18/Oct/2002:23:00:13 +0200] "GET /pat/internet/didactic/recherch.gif HTTP/1.0" 200 4255 "http://www-ipst.u-strasbg.fr/pat/internet/didactic/introwin.htm" "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)" Les log et leur analyse

43. La notion de session Le visiteur unique La notion de clickstream Le cas de la home page Les limites de l’analyse des log serveurs Le principe des logs HTTP

44. Bienvenue en cuisine

45. L’enfer est pavé de bonnes intentions L’utilisateur a toujours raison L’utilisateur n’a pas toujours raison L’utilisateur n’est pas le développeur Le développeur n’est pas l’utilisateur Le patron n’est pas l’utilisateur Le mieux est l’ennemi du bien Le détail est essentiel L’aide n’en est pas une D’après « Ergonomie du logiciel et design web », JF Nogier, DUNOD, lui-même d’après Nielsen Useit.com

46. Ecriture, secrétariat de rédaction

47. Importance des textes intermédiaires accroches, surtitres Intempéries Des conditions de routes difficiles en montagne Alors que les services des routes du Conseil général sont largement mobilisés pour nettoyer les routes du département, les difficultés restent nombreuses, en particulier sur le réseau secondaire. Pour les routes du Var, les hivers se suivent et… se ressemblent. Alors que le Conseil général et la Région ont fortement augmentés leurs budgets dédiés à l’entretient du réseau secondaire du du département, les résultats, pourtant visibles, n’empêchent pas de nombreuses voies secondaires être de nouveau bloquées aujourd’hui. Un travail de journaliste

48. Principe de la pyramide inverse

49. Page Titre Accroche Texte Liens hypertextes Indépendance des niveaux de lecture