Conception Web 2011 Public

8/3/2019 Conception Web 2011 Public

1/49

Conception web


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


3/49

Une LoiPensez aux

utilisateurs

... plutt qu' vous mme !


4/49

Agenda

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


5/49

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

Definitions

Utilit :

capacit dtre utiledans la ralisationdune tche.

Utilisabilit(usability) :

capacit dtrefacile utiliser.


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.


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/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)

"


9/49

L'Hommeperoit


10/49

AlbertoFernandez

Fernandez


11/49

Des paradigmes

de la perception

Gestalt, la thorie dela bonne forme

Physiologie de laperception


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"


13/49

!


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"


14/49

!


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.


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)


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)


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/


18/49

Vision

priphrique vsFova

6r - 20 / 30 125 / 180


19/49

L'Homme pense!


20/49

Miller, 1956

Une affaire de

mmoire(S)

MCT : taille (7 +- 2), dure,problmes

ML

T

:T

aille, dure,structures (reconnaissance)


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.


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


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)


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


25/49

Ne pas faire

rflchirLutilisateur

!


26/49

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

Le tracking visuel


27/49

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

La mthode


28/49

Dmarche de

conceptionoriente utilisateur

Communauts

dutilisateurs


29/49

Pour qui ?


30/49

Archtypes utilisateursissus de lanalyse

ethnographique despublics cibles

Leur donner un petit nomLeur crer une histoire


31/49

Classer, organiserlinformation

pour crer les rubriques


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


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.


34/49

http://louisrosenfeld.com/home/


35/49

Tri par

cartes

Individuel ou collectifPost-it

Classement

automatique dedonnes (CAH)


36/49

Exacts

Gographiques;Alphabtiques;Chronologiques

Orients utilisateur

HybridesMagazine;Mtaphore;Par thme (pages jaunes)

Des principes de

classification divers


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


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


39/49

Tester ?


40/49

Maquettes / prototypesZoning

Maquette fonctionnelle sansgraphismeUtilisation des outils wysiwyg

Montrer, in

intinere


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


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)"


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


44/49

Bienvenue en

cuisine


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


46/49

Ecriture,secrtariat de

rdaction


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.


48/49

Principe de la

pyramide inverse


49/49

Indpendance des

niveaux de lecture

Page

Titre

Accroche

TexteLiens

hy

pertextes

Documents

Conception Web 2011 Public