Conception web

gino (at) bontempelli.net Chef de projet - Rgion PACA Editeur Internet - Editions Nivales Directeur de Projets - Groupe Expansion DEA de philosophie Mastre d'ingnirie numrique Mastre Intelligence conomique

Une Loi
Pensez aux utilisateurs
... plutt qu' vous mme !

Agenda

Pourquoi ? Que disent les scientifiques ? Une histoire de mthode et d'outils Des exemples

Utilit : capacit dtre utile Definitions dans la ralisation dune tche. Utilisabilit (usability) : capacit dtre facile utiliser.
http://www.usabilitynet.org/management/c_business.htm

ISO 9241-11

Un systme est utilisable lorsquil permet lutilisateur de raliser sa tche avec efficacit, efficience et satisfaction dans le contexte dutilisation spcifi.

Pourquoi ?

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

http://www.usabilitynet.org/management/c_business.htm

"

The ROI of Usability "The rule of thumb in many usabilityaware organizations is that the costbenefit 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)

http://www.usabilityprofessionals.org/usability_resources/usability_in_the_real_world/roi_of_usability.html

L'Homme peroit

Alberto Fernandez Fernandez

Des paradigmes de la perception Gestalt, la thorie de la bonne forme Physiologie de la perception

"Leau est autre chose que de loxygne et de lhydrogne ; une symphonie est autre chose quune succession de notes. On constate ainsi que le tout est diffrent de la somme de ses parties"

http://fr.wikipedia.org/wiki/Psychologie_de_la_forme

"Leau est autre chose que de loxygne et de lhydrogne ; une symphonie est autre chose quune succession de notes. On constate ainsi que le tout est diffrent de la somme de ses parties"

http://fr.wikipedia.org/wiki/Psychologie_de_la_forme

La loi de la bonne forme : loi principale dont les autres dcoulent : un ensemble de parties informe (comme des groupements alatoires de points) tend tre peru d'abord (automatiquement) comme une forme, cette forme se veut simple, symtrique, stable, en somme une bonne forme.

http://fr.wikipedia.org/wiki/Psychologie_de_la_forme

La loi de bonne continuation : ce qui est align sassemble (exemple dapplication : les textes doivent tre en fer gauche, les puces relvent dun mme thme)

http://www.netway.eu/news/games/game1/game1.taf

Loi de proximit : ce qui est proche sassemble (exemple dapplication : les fonctions doivent tre regroupes dans un mme espace)

http://www.kalenga.fr/web/ergonomie-web-principes/2009/04/

Voir ...
Sacades occulaires : mouvements simples, rapides permettant de cibler les lettres lire. Lempan perceptif : rgion du champ visuel autour du point de fixation lintrieur de laquelle de linformation utile est extraite. Il est communment admis que la taille de cet empan est trs limite. Il peut tre augment par de bonnes informations typographiques.
http://tel.archives-ouvertes.fr/tel-00342146/en/

Vision priphrique vs Fova

6r - 20 / 30 125 / 180

L'Homme pense !

Une affaire de mmoire(S)

MCT : taille (7 +- 2), dure, problmes MLT : Taille, dure, structures (reconnaissance)

Miller, 1956

Amorage

1) Amorage du fond par la forme 2) Lamorage ou priming en anglais caractrise un processus dactivation 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 mme cette situation na rien voir avec les informations.

http://www.netway.eu/news/games/game2/game2.html http://www.marsouin.org/article.php3?id_article=152

l'effet de primaut, qui traduit le rappel plus ais des premiers mots en tte d'une liste probablement attribuable une plus grande rptition et leur vulnrabilit relativement moindre l'interfrence, l'effet de rcence, qui correspond au rappel plus ais des derniers mots d'une liste attribuable au stockage en mmoire court terme.

http://www.lergonome.org/so/u.htm#/index.php?option=com_content&task=view&id=31&Itemid=29

Selon les objectifs de la tche, les sujets dveloppent une reprsentation de lobjet traiter, laconique et dforme fonctionnellement, qui est plus adapte la tche quune reprsentation objective

(cit par Sprandio, Lergonomie du travail mental, 1984)

Le modle de Rasmussen, un modle adapt aux tches sur le web ?

Modle de contrle de lactivit : -Skill-based behaviour -Rules-based behaviour -Knowledge-based behaviour

Cot cognitif

Ne pas faire rflchir Lutilisateur

Le tracking visuel

http://www.youtube.com/watch?v=kab9DmLZNj8

La mthode

http://www.jasonunes.com/labels/agile.html

Dmarche de conception oriente utilisateur

Communauts dutilisateurs

Pour qui ?

Archtypes utilisateurs issus de lanalyse ethnographique des publics cibles

Leur donner un petit nom Leur crer une histoire

Classer, organiser linformation

pour crer les rubriques

Pourquoi ?
Regrouper, crer des rubriques adaptes lutilisateur et sa recherche

Attention aux schmas trop classiques Attention aux schmas trop originaux

Exercice : Site de vente danimaux dafrique

Classer ?

a) appartenant lEmpereur, b) embaums, c) apprivoiss, d) cochons de lait, e) sirnes, f) fabuleux, g) chiens en libert, h) inclus dans la prsente classification, i) qui sagitent comme des fous, j) innombrables, k) dessins avec un pinceau trs fin en poils de chameau, l) et ctera, m) qui viennent de casser la cruche, n) qui de loin semblent des mouches.

http://louisrosenfeld.com/home/

Tri par cartes

Individuel ou collectif Post-it Classement automatique de donnes (CAH)

Des principes de classification divers

Exacts Gographiques; Alphabtiques; Chronologiques Orients utilisateur Hybrides Magazine; Mtaphore; Par thme (pages jaunes)

Attention la largeur et la profondeur

7
+

1
11 12

2
21 22 23

3
31 32 33

4
41 42 43

5
51

6
61 62 63

7
71 72

Principes dergonomie

Permettre lutilisateur de savoir ou il est, ou il est all Fil dariane Titres explicites Crer un schma de navigation simple et stable viter les sous-menus cachs Barre de navigation identique sur toutes les pages Respecter les schmas des standards de fait Soigner les liens ( clic inform, sur mots cls)

Tester ?

Montrer, in intinere

Maquettes / prototypes Zoning Maquette fonctionnelle sans graphisme Utilisation des outils wysiwyg

Des outils pour raliser les maquettes ?

Papier / crayon ! Powerpoint Dreamweaver Nombreux outils spcifiques(ProtoShare, InVision, Just Proto, App Sketcher, PowerMockup).

Du statique au plus ou moins dynamique

Les log et leur analyse

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.ustrasbg.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.ustrasbg.fr/pat/internet/didactic/introwin.htm" "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)"

Le principe des logs HTTP

La notion de session Le visiteur unique La notion de clickstream Le cas de la home page Les limites de lanalyse des log serveurs

Bienvenue en cuisine

Useit.com
Lenfer est pav de bonnes intentions Lutilisateur a toujours raison Lutilisateur na pas toujours raison Lutilisateur nest pas le dveloppeur Le dveloppeur nest pas lutilisateur Le patron nest pas lutilisateur Le mieux est lennemi du bien Le dtail est essentiel Laide nen est pas une
Daprs Ergonomie du logiciel et design web , JF Nogier, DUNOD, lui-mme daprs Nielsen

Ecriture, secrtariat de rdaction

Un travail de journaliste
Importance des textes intermdiaires accroches, surtitres
Intempries

Des conditions de routes difficiles en montagne

Alors que les services des routes du Conseil gnral sont largement mobiliss pour nettoyer les routes du dpartement, les difficults restent nombreuses, en particulier sur le rseau secondaire. Pour les routes du Var, les hivers se suivent et se ressemblent. Alors que le Conseil gnral et la Rgion ont fortement augments leurs budgets ddis lentretient du rseau secondaire du du dpartement, les rsultats, pourtant visibles, nempchent pas de nombreuses voies secondaires tre de nouveau bloques aujourdhui.

Principe de la pyramide inverse

Indpendance des niveaux de lecture

Page Titre Accroche Texte Liens hypertextes