Conception Web 2011

2 176 vues

Publié le

Présentation réalisée pour les promotions IMN des Mastères Spécialisés de l'ESIEE

Publié dans : Design, Technologie, Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 176
Sur SlideShare
0
Issues des intégrations
0
Intégrations
900
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conception Web 2011

  1. 1. Conception web
  2. 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. 3.   Une Loi… ... plutôt qu'à vous même ! Pensez aux utilisateurs…
  4. 4. <ul><li>Pourquoi ? </li></ul><ul><li>Que disent les scientifiques ? </li></ul><ul><li>Une histoire de méthode et d'outils </li></ul><ul><li>Des exemples </li></ul>Agenda
  5. 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. 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é. « <ul><ul><li>  » </li></ul></ul>ISO 9241-11
  7. 7. http://www.usabilitynet.org/management/c_business.htm <ul><ul><li>Good usability leads to satisfied, purchasing and returning customers </li></ul></ul><ul><ul><li>Bad usability leads to angry customers and loss in sales  </li></ul></ul><ul><ul><li>Conversion rate: measure purchases, not traffic </li></ul></ul><ul><ul><li>Better brand </li></ul></ul><ul><ul><li>Reduced costs for development and maintenance </li></ul></ul><ul><ul><li>Improved productivity  </li></ul></ul><ul><ul><li>Reduced costs for training </li></ul></ul><ul><li>  </li></ul>Pourquoi ?
  8. 8. http://www.usabilityprofessionals.org/usability_resources/usability_in_the_real_world/roi_of_usability.html The ROI of Usability      &quot;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.&quot; (Gilb, 1988)   &quot;
  9. 9.  L'Homme perçoit
  10. 10. Alberto Fernandez Fernandez
  11. 11. <ul><ul><li>Gestalt, la théorie de la « bonne forme » </li></ul></ul><ul><ul><li>Physiologie de la perception </li></ul></ul><ul><li>  </li></ul>  Des paradigmes de la perception
  12. 12. ! http://fr.wikipedia.org/wiki/Psychologie_de_la_forme &quot;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&quot;
  13. 13. ! http://fr.wikipedia.org/wiki/Psychologie_de_la_forme &quot;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&quot;
  14. 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. 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. 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. 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. 18. 6° - 20 / 30 – 125 / 180 Vision périphérique vs Fovéa
  19. 19.  L'Homme pense !
  20. 20. Miller, 1956 MCT : taille (7 +- 2), durée, problèmes   MLT : Taille, durée, structures (reconnaissance) Une affaire de mémoire(S)
  21. 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. 22. <ul><ul><li>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, </li></ul></ul><ul><ul><li>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. </li></ul></ul>http://www.lergonome.org/so/u.htm#/index.php?option=com_content&task=view&id=31&Itemid=29 « <ul><ul><li>  » </li></ul></ul>
  23. 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. 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. 25. Ne pas faire réfléchir L’utilisateur !
  26. 26. http://www.youtube.com/watch?v=kab9DmLZNj8 Le tracking visuel
  27. 27. http://www.jasonunes.com/labels/agile.html “ La” méthode
  28. 28. Démarche de conception orientée utilisateur Communautés d’utilisateurs
  29. 29.  Pour qui ?
  30. 30. <ul><li>Archétypes utilisateurs issus de l’analyse ethnographique des publics cibles </li></ul><ul><ul><li>Leur donner un petit nom </li></ul></ul><ul><ul><li>Leur créer une histoire </li></ul></ul>
  31. 31. … pour créer les rubriques Classer, organiser l’information
  32. 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. 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. 34. http://louisrosenfeld.com/home/
  35. 35. Individuel ou collectif Post-it Classement automatique de données (CAH) Tri par cartes
  36. 36. <ul><li>Exacts </li></ul><ul><ul><li>Géographiques; </li></ul></ul><ul><ul><li>Alphabétiques; </li></ul></ul><ul><ul><li>Chronologiques </li></ul></ul><ul><li>Orientés utilisateur </li></ul><ul><li>Hybrides </li></ul><ul><ul><li>Magazine; </li></ul></ul><ul><ul><li>Métaphore; </li></ul></ul><ul><ul><li>Par thème (pages jaunes) </li></ul></ul>Des principes de classification divers
  37. 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. 38. <ul><li>Permettre à l’utilisateur de savoir ou il est, ou il est allé </li></ul><ul><ul><li>Fil d’ariane </li></ul></ul><ul><ul><li>Titres explicites </li></ul></ul><ul><li>Créer un schéma de navigation simple et stable </li></ul><ul><ul><li>Éviter les sous-menus cachés </li></ul></ul><ul><ul><li>Barre de navigation identique sur toutes les pages </li></ul></ul><ul><ul><li>Respecter les schémas des standards de fait </li></ul></ul><ul><ul><li>Soigner les liens (« clic » informé, sur mots clés) </li></ul></ul>Principes d’ergonomie
  39. 39. Tester ?
  40. 40. <ul><li>Maquettes / prototypes </li></ul><ul><ul><li>Zoning </li></ul></ul><ul><ul><li>Maquette fonctionnelle sans graphisme </li></ul></ul><ul><ul><li>Utilisation des outils wysiwyg </li></ul></ul>Montrer, “in intinere”
  41. 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. 42. 193.95.3.185 - - [18/Oct/2002:23:00:13 +0200] &quot;GET /pat/internet/didactic/menusour.gif HTTP/1.0&quot; 200 22102 &quot;http://www-ipst.u-strasbg.fr/pat/internet/didactic/introwin.htm&quot; &quot;Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)&quot; 193.95.3.185 - - [18/Oct/2002:23:00:13 +0200] &quot;GET /pat/internet/didactic/recherch.gif HTTP/1.0&quot; 200 4255 &quot;http://www-ipst.u-strasbg.fr/pat/internet/didactic/introwin.htm&quot; &quot;Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)&quot; Les log et leur analyse
  43. 43. <ul><li>La notion de session </li></ul><ul><li>Le visiteur unique </li></ul><ul><li>La notion de clickstream </li></ul><ul><ul><li>Le cas de la home page </li></ul></ul><ul><li>Les limites de l’analyse des log serveurs </li></ul>Le principe des logs HTTP
  44. 44. Bienvenue en cuisine
  45. 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. 46. Ecriture, secrétariat de rédaction
  47. 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. 48. Principe de la pyramide inverse
  49. 49. Page Titre Accroche Texte Liens hypertextes Indépendance des niveaux de lecture

×