conception web 2011 public
TRANSCRIPT
-
8/3/2019 Conception Web 2011 Public
1/49
Conception web
-
8/3/2019 Conception Web 2011 Public
2/49
gino (at) bontempelli.net
DEA de philosophieMastre d'ingnirie numriqueMastre Intelligence conomique
Chef de projet - Rgion PACAEditeur Internet - Editions NivalesDirecteur de Projets - Groupe Expansion
-
8/3/2019 Conception Web 2011 Public
3/49
Une LoiPensez aux
utilisateurs
... plutt qu' vous mme !
-
8/3/2019 Conception Web 2011 Public
4/49
Agenda
Pourquoi ?Que disent les scientifiques ?Une histoire de mthode et d'outilsDes exemples
-
8/3/2019 Conception Web 2011 Public
5/49
http://www.usabilitynet.org/management/c_business.htm
Definitions
Utilit :
capacit dtre utiledans la ralisationdune tche.
Utilisabilit(usability) :
capacit dtrefacile utiliser.
-
8/3/2019 Conception Web 2011 Public
6/49
ISO 9241-11
Un systme est utilisable lorsquil permet lutilisateur de raliser sa tche avec
efficacit, efficience et satisfaction dansle contexte dutilisation spcifi.
-
8/3/2019 Conception Web 2011 Public
7/49
http://www.usabilitynet.org/management/c_business.htm
Pourquoi ?
Good usability leads tosatisfied, 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 andmaintenance
Improved productivity
R
educed costs for training
-
8/3/2019 Conception Web 2011 Public
8/49
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 problemcosts 10 times as much as fixing thesame problem in design. If the systemhas been released, it costs 100 timesas much relative to fixing in design."(Gilb, 1988)
"
-
8/3/2019 Conception Web 2011 Public
9/49
L'Hommeperoit
-
8/3/2019 Conception Web 2011 Public
10/49
AlbertoFernandez
Fernandez
-
8/3/2019 Conception Web 2011 Public
11/49
Des paradigmes
de la perception
Gestalt, la thorie dela bonne forme
Physiologie de laperception
-
8/3/2019 Conception Web 2011 Public
12/49
!
http://fr.wikipedia.org/wiki/Psyc
hologie_de_la_forme
"Leau est autre chose que deloxygne et de lhydrogne ;
une symphonie est autrechose quune succession de
notes.
On constate ainsi que le toutest diffrent de la somme
de ses parties"
-
8/3/2019 Conception Web 2011 Public
13/49
!
http://fr.wikipedia.org/wiki/Psyc
hologie_de_la_forme
"Leau est autre chose que deloxygne et de lhydrogne ;
une symphonie est autrechose quune succession de
notes.
On constate ainsi que le toutest diffrent de la somme
de ses parties"
-
8/3/2019 Conception Web 2011 Public
14/49
!
http://fr.wikipedia.org/wiki/Psyc
hologie_de_la_forme
La loi de la bonne forme : loiprincipale dont les autresdcoulent : un ensemble de partiesinforme (comme des groupementsalatoires de points) tend tre
peru d'abord (automatiquement)comme une forme, cette forme seveut simple, symtrique, stable, ensomme une bonne forme.
-
8/3/2019 Conception Web 2011 Public
15/49
http://www.netway.eu/news/games/game1/game1.taf
La loi de bonne continuation : ce quiest align sassemble (exempledapplication : les textes doivent tre enfer gauche, les puces relvent dunmme thme)
-
8/3/2019 Conception Web 2011 Public
16/49
http://www.kalenga.fr/web/ergonomie-web-principes/2009/04/
Loi de proximit : ce qui est prochesassemble (exemple dapplication : les
fonctions doivent tre regroupes dans unmme espace)
-
8/3/2019 Conception Web 2011 Public
17/49
Voir ...
Sacades occulaires : mouvementssimples, rapides permettant de cibler leslettres lire.
Lempan perceptif: rgion du champvisuel autour du point de fixation lintrieur de laquelle de linformation
utile est extraite. Il est communmentadmis que la taille de cet empan est trslimite. Il peut tre augment par debonnes informations typographiques.
http://tel.archives-ouvertes.fr/tel-00342146/en/
-
8/3/2019 Conception Web 2011 Public
18/49
Vision
priphrique vsFova
6r - 20 / 30 125 / 180
-
8/3/2019 Conception Web 2011 Public
19/49
L'Homme pense!
-
8/3/2019 Conception Web 2011 Public
20/49
Miller, 1956
Une affaire de
mmoire(S)
MCT : taille (7 +- 2), dure,problmes
ML
T
:T
aille, dure,structures (reconnaissance)
-
8/3/2019 Conception Web 2011 Public
21/49
http://www.netway.eu/news/games/game2/game2.htmlhttp://www.marsouin.org/article.php3?id_article=152
Amorage
1) Amorage du fond par la forme
2) Lamorage ou priming en anglais caractrise unprocessus dactivation cognitive et comportementalefaisant que des informations incidentes auxquelles unindividu est expos vont par la suite affecter lejugement et le comportement de cet individu dans une
autre situation quand bien mme cette situation narien voir avec les informations.
-
8/3/2019 Conception Web 2011 Public
22/49
l'effet de primaut, qui traduit lerappel plus ais des premiersmots en tte d'une listeprobablement attribuable uneplus grande rptition et leurvulnrabilit relativement
moindre l'interfrence,l'effet de rcence, qui correspondau rappel plus ais des derniersmots d'une liste attribuable austockage en mmoire courtterme.
http://www.lergonome.org/so/u.htm#/index.php?option=com_content&task=view&id=31&Itemid=29
-
8/3/2019 Conception Web 2011 Public
23/49
Selon les objectifs de la tche, les sujetsdveloppent une reprsentation de lobjet traiter, laconique et dformefonctionnellement, qui est plus adapte la tche quune reprsentation objective
(cit par Sprandio, Lergonomie dutravail mental, 1984)
-
8/3/2019 Conception Web 2011 Public
24/49
Le modle de Rasmussen, un
modle adapt aux tches surle web ?
Modle de contrle de lactivit :
-Skill-based behaviour
-Rules-based behaviour
-Knowledge-based behaviour
Cot cognitif
-
8/3/2019 Conception Web 2011 Public
25/49
Ne pas faire
rflchirLutilisateur
!
-
8/3/2019 Conception Web 2011 Public
26/49
http://www.youtube.com/watch?v=kab9DmLZNj8
Le tracking visuel
-
8/3/2019 Conception Web 2011 Public
27/49
http://www.jasonunes.com/labels/agile.html
La mthode
-
8/3/2019 Conception Web 2011 Public
28/49
Dmarche de
conceptionoriente utilisateur
Communauts
dutilisateurs
-
8/3/2019 Conception Web 2011 Public
29/49
Pour qui ?
-
8/3/2019 Conception Web 2011 Public
30/49
Archtypes utilisateursissus de lanalyse
ethnographique despublics cibles
Leur donner un petit nomLeur crer une histoire
-
8/3/2019 Conception Web 2011 Public
31/49
Classer, organiserlinformation
pour crer les rubriques
-
8/3/2019 Conception Web 2011 Public
32/49
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
-
8/3/2019 Conception Web 2011 Public
33/49
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 dechameau,l) et ctera,m) qui viennent de casser la cruche,n) qui de loin semblent des mouches.
-
8/3/2019 Conception Web 2011 Public
34/49
http://louisrosenfeld.com/home/
-
8/3/2019 Conception Web 2011 Public
35/49
Tri par
cartes
Individuel ou collectifPost-it
Classement
automatique dedonnes (CAH)
-
8/3/2019 Conception Web 2011 Public
36/49
Exacts
Gographiques;Alphabtiques;Chronologiques
Orients utilisateur
HybridesMagazine;Mtaphore;Par thme (pages jaunes)
Des principes de
classification divers
-
8/3/2019 Conception Web 2011 Public
37/49
7
Attention la largeur
et la profondeur
+
3
1 32 4 5 6 7
21
22
23
31
32
33
41
42
43
51 61
62
63
71
72
11
12
-
8/3/2019 Conception Web 2011 Public
38/49
Permettre lutilisateur de savoir ou il est, ou ilest all
Fil darianeTitres explicites
Crer un sc
h
ma de navigation simple et stableviter les sous-menus cachsBarre de navigation identique sur toutes les pagesRespecter les schmas des standards de faitSoigner les liens ( clic inform, sur mots cls)
Principes dergonomie
-
8/3/2019 Conception Web 2011 Public
39/49
Tester ?
-
8/3/2019 Conception Web 2011 Public
40/49
Maquettes / prototypesZoning
Maquette fonctionnelle sansgraphismeUtilisation des outils wysiwyg
Montrer, in
intinere
-
8/3/2019 Conception Web 2011 Public
41/49
Papier / crayon !PowerpointDreamweaverNombreux outils spcifiques(ProtoShare, InVision,
Just Proto, App Sketcher, PowerMockup).
Des outils pour
raliser lesmaquettes ?
Du statique au plus ou moins
dynamique
-
8/3/2019 Conception Web 2011 Public
42/49
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" 20022102 "http://www-ipst.u-strasbg.fr/pat/internet/didactic/introwin.htm" "Mozilla/4.0 (compatible; MSIE6.0; Windows 98)"193.95.3.185 - - [18/Oct/2002:23:00:13 +0200] "GET
/pat/internet/didactic/recherch.gif HTTP/1.0" 2004255 "http://www-ipst.u-strasbg.fr/pat/internet/didactic/introwin.htm" "Mozilla/4.0 (compatible; MSIE6.0; Windows 98)"
-
8/3/2019 Conception Web 2011 Public
43/49
La notion de sessionLa notion de sessionLe visiteur uniqueLe visiteur uniqueLa notion de clickstreamLa notion de clickstream
Le cas de la home pageLe cas de la home pageLes limites de lanalyse des log serveursLes limites de lanalyse des log serveurs
Le principe des
logs HTT
P
-
8/3/2019 Conception Web 2011 Public
44/49
Bienvenue en
cuisine
-
8/3/2019 Conception Web 2011 Public
45/49
Lenfer est pav de bonnes intentionsLutilisateur a toujours raisonLutilisateur na pas toujours raison
Lutilisateur nest pas le dveloppeurLe dveloppeur nest pas lutilisateurLe patron nest pas lutilisateurLe mieux est lennemi du bien
Le dtail est essentielLaide nen est pas une
Daprs Ergonomie du logiciel et design web , JF Nogier, DUNOD, lui-mme
daprs Nielsen
Useit.com
-
8/3/2019 Conception Web 2011 Public
46/49
Ecriture,secrtariat de
rdaction
-
8/3/2019 Conception Web 2011 Public
47/49
Importance des textes intermdiairesaccroches, surtitres
Un travail
dejournaliste
Intempries
Des conditions de routes difficiles en montagne
Alors que les services des routes duC
onseil gnral sont largement mobilisspour nettoyer les routes du dpartement, les difficults restent nombreuses, en particuliersur le rseau secondaire.
Pour les routes du Var, les hivers se suivent et se ressemblent. Alors que le Conseil gnral et laRgion ont fortement augments leurs budgets ddis lentretient du rseau secondaire dudu dpartement, les rsultats, pourtant visibles, nempchent pas de nombreuses voies secondairestre de nouveau bloques aujourdhui.
-
8/3/2019 Conception Web 2011 Public
48/49
Principe de la
pyramide inverse
-
8/3/2019 Conception Web 2011 Public
49/49
Indpendance des
niveaux de lecture
Page
Titre
Accroche
TexteLiens
hy
pertextes