Vous êtes sur la page 1sur 139

CULTURE DU WEB

Bonnes Pratiques
du web
Toutes les cls pour concevoir votre site web

Smile Digital

Bonnes pratiques
du web
Page 2

PREAMBULE

WWW.SMILE.FR

SMILE
Smile est une socit dingnieurs experts dans la mise en uvre de solutions open source et
lintgration de systmes appuys sur lopen source. Smile est membre de lAPRIL, lassociation
pour la promotion et la dfense du logiciel libre, du PLOSS le rseau des entreprises du
Logiciel Libre en Ile-de-France et du CNLL le conseil national du logiciel libre.
Smile compte prs de 800 collaborateurs dans le monde, dont plus de 500 en France (octobre
2014), ce qui en fait le premier intgrateur franais et europen de solutions open source.
Depuis 2000 environ, Smile mne une action active de veille technologique qui lui permet de
dcouvrir les produits les plus prometteurs de lopen source, de les qualifier et de les valuer,
de manire proposer ses clients les produits les plus aboutis, les plus robustes et les plus
prennes.
Cette dmarche a donn lieu toute une gamme de livres blancs couvrant diffrents domaines
dapplication. La gestion de contenus (2004), les portails (2005), la business intelligence (2006),
la virtualisation (2007), la gestion lectronique de documents (2008), les PGIs/ERPs (2008), les
VPN open source (2009), les Firewall et Contrle de flux (2009), les Middleware orients
messages (2009), lecommerce et les Rseaux Sociaux d'Entreprise (2010), le Guide de lopen
source et NoSQL (2011), Mobile et Recensement et audit (2012) et plus rcemment Big Data et
ERP open source pour le-commerce (2014). Chacun de ces ouvrages prsente une slection
des meilleures solutions open source dans le domaine considr, leurs qualits respectives,
ainsi que des retours dexprience oprationnels.
Au fur et mesure que des solutions open source solides gagnent de nouveaux domaines,
Smile sera prsent pour proposer ses clients den bnficier sans risque. Smile apparat dans
le paysage informatique franais comme le prestataire intgrateur de choix pour accompagner
les plus grandes entreprises dans ladoption des meilleures solutions open source.
Ces dernires annes, Smile a galement tendu la gamme des services proposs. Depuis 2005,
un dpartement consulting accompagne nos clients, tant dans les phases davant-projet, en
recherche de solutions, quen accompagnement de projet. Depuis 2000, Smile dispose dun
studio graphique, devenu en 2007 Smile Digital agence interactive, proposant outre la
cration graphique, une expertise e-marketing, ditoriale, et interfaces riches. Smile dispose
aussi dune agence spcialise dans la TMA (support et lexploitation des applications) et dun
centre de formation complet, Smile Training.
Enfin, Smile est implant Paris, Lille, Lyon, Grenoble, Nantes, Bordeaux, Marseille et
Montpellier. Et prsent galement en Suisse, au Benelux, en Ukraine, en Russie, au Maroc et
en Cte dIvoire.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 3

QUELQUES REFERENCES DE
SMILE
SMILE est fier davoir contribu, au fil des annes, aux plus grandes ralisations Web franaises
et europennes. Vous trouverez ci-dessous quelques clients nous ayant adress leur confiance.

WWW.SMILE.FR

Web
EMI Music, Salon de lAgriculture, Mazars, Areva, Socit Gnrale, Gtes de France, Groupama,
Eco-Emballage, CFnews, CEA, Prisma Pub, Volia, JCDecaux, 01 Informatique, Spie, PSA, Boiron,
Larousse, Dassault-Systmes, Action Contre la Faim, BNP Paribas, Air Pays de Loire, Forum des
Images, IFP, BHV, Gallimard, Cheval Mag, Afssaps, Bnteau, Carrefour, AG2R La Mondiale,
Groupe Bayard, Association de la Prvention Routire, Secours Catholique, Canson, Veolia,
Bouygues Telecom, CNIL, Danone, Total, Crdit Agricole

E-Business
Krys, La Halle, The North Face, Kipling, Vans, Pepe Jeans, Hackett, Minelli, Un Jour Ailleurs,
Decitre, ANWB, Solaris, Gibert Joseph, De Dietrich, Macif, Figaroclassifieds, Furet du Nord,
Gtes de France, Camif Collectivit, GPdis, Projectif, ETS, Bain & Spa, Yves Rocher, Bouygues
Immobilier, Nestl, Stanhome, AVF Primdical, CCI, Snowleader, Darjeeling, Cultura, Belambra

Collaboratif
HEC, Bouygues Telecom, Prisma, Veolia, Arjowiggins, INA, Primagaz, Croix Rouge, Eurosport,
Invivo, Faceo, Chteau de Versailles, Eurosport, Ipsos, VSC Technologies, Sanef, Explorimmo,
Bureau Veritas, Rgion Centre, Dassault Systmes, Fondation dAuteuil, Gaz Electricit de
Grenoble, Ville de Niort, Ministre de la Culture, PagesJaunes Annonces, Primagaz, UCFF,
Apave, Goservices, Renault F1 Team, INRIA, CIDJ, SNCD, CS informatique, Serimax, Volia
Propret, Netasq, Corep, Packetis, Alstom Power Services, Mazars, COFRAC, Assemble
Nationale, DGAC, HEC

Systmes dInformation Mtiers


Veolia Transport, Solucom, Casden Banque Populaire, La Poste, Christian Louboutin, PubAudit,
Effia Transport, France 24, Publicis, Nouvelles Frontires, Jus de Fruits de Moora, Espace
Loggia, Bureau Veritas, Skyrock, Lafarge, Cadremploi, Groupe Vinci, IEDOM, Carrefour, Corsair,
Le Bon Coin, Jardiland, Trsorerie Gnrale du Maroc, Ville de Genve, ESCP, Faiveley
Transport, INRA, Yves Rocher, ETS, Perouse Mdical, Auchan ecommerce, Viapresse, Danone

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 4

Infrastructure

WWW.SMILE.FR

Agence Nationale pour les Chques Vacances, Pierre Audoin Consultants, Rexel, Motor Presse,
OSEO, Sport24, Eco-Emballage, Institut Mutualiste Montsouris, Ionis, Osmoz, SIDEL, Atel Hotels,
Cadremploi, Institut Franais du Ptrole, Mutualit Franaise, Bouygues Telecom, Total,
Ministre de lcologie, Orange, Carrefour, Jardiland, Kantar, Coyote, France Televisions, Radio
France

Consultez nos rfrences, en ligne, ladresse : http://www.smile.fr/clients.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 5

SOMMAIRE
PREAMBULE................................................................................................ 2

WWW.SMILE.FR

SMILE ................................................................................................................................................................... 2
QUELQUES REFERENCES DE SMILE............................................................................................................................... 3

SOMMAIRE ................................................................................................. 5
EN RESUME ................................................................................................. 7
CONCEVOIR DANS UN CONTEXTE EN CONSTANTE EVOLUTION ........................................................................................... 7
QUI EST CONCERNE ? ............................................................................................................................................... 7
POUR QUEL TYPES DE SITES ? ..................................................................................................................................... 8
LINTERET DES BONNES PRATIQUES ............................................................................................................................. 8
QUAND LES BONNES PRATIQUES NE SUFFISENT PAS ?...................................................................................................... 9

ENJEUX DE LA CONCEPTION WEB.............................................................. 10


LES BESOINS UX DU WEB ........................................................................................................................................ 10
DEMULTIPLICATION DES PLATEFORMES ET CONTEXTES DE CONSULTATION ......................................................................... 13

LES BONNES PRATIQUES ........................................................................... 15


LES BASES ............................................................................................................................................................ 15
ARCHITECTURE DINFORMATION............................................................................................................................... 19
PRINCIPES DE NAVIGATION ...................................................................................................................................... 33
NAVIGATION DE PAGE A PAGE ET TYPES DE GABARITS .................................................................................................... 61
LE HEADER ........................................................................................................................................................... 89
LA PAGE DACCUEIL................................................................................................................................................ 92
CONTENUS........................................................................................................................................................... 96
FORMULAIRES .................................................................................................................................................... 103
PUBLICITES......................................................................................................................................................... 117
MOTEUR DE RECHERCHE ....................................................................................................................................... 120

SYNTHESE DES BONNES PRATIQUES........................................................ 132


ARCHITECTURE DINFORMATION............................................................................................................................. 132
NAVIGATION ...................................................................................................................................................... 132
CONTENU ET EDITORIAL ........................................................................................................................................ 133
FORMULAIRES .................................................................................................................................................... 133

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 6

MOTEUR DE RECHERCHE ....................................................................................................................................... 134


PUBLICITES......................................................................................................................................................... 134
REFERENCEMENT ................................................................................................................................................ 134
ACCESSIBILITE ..................................................................................................................................................... 135
PERFORMANCES.................................................................................................................................................. 135

DISGRESSIONS ........................................................................................ 136


LA VALEUR AJOUTEE POUR LES UTILISATEURS............................................................................................................. 136

WWW.SMILE.FR

ENGAGER SUR LE LONG TERME ............................................................................................................................... 136


CONTENANT & CONTENU...................................................................................................................................... 137
LA FORCE DES CONNAISSANCES ACQUISES................................................................................................................. 137
PRENDRE EN COMPTE LE CONTEXTE......................................................................................................................... 138

REMERCIEMENTS .................................................................................... 139

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 7

EN RESUME
CONCEVOIR DANS UN
CONTEXTE EN CONSTANTE

WWW.SMILE.FR

EVOLUTION
En peine 25 ans, le web sest transform du tout au tout, dun outil rserv une niche de la
population un outil grand public accessible tous. Les innovations techniques suscitent des
changements profonds dans les usages. En 2000, les premiers CMS voyaient le jour. Ils ont permis
lmergence du web collaboratif en dmocratisant la production de contenus par les internautes.
Le dveloppement des rseaux sociaux partir de 2005, ainsi que la dmocratisation des
smartphones et tablettes tactiles, ont largement conditionn les avances techniques et usages.
Depuis 2010, la conception web a volu dautant plus rapidement, avec lmergence de la
conception base sur des grilles, du responsive web design (RWD), lutilisation de polices web,
dillustrations vectorielles. Des concepts anciens se sont moderniss, comme les menus fixes et
ancres au sein des pages. De nouvelles tendances ont merg, comme les sites en une page, le
scroll horizontal qui sadapte particulirement bien aux terminaux tactiles, le flat et le fat design
Le web designer doit plus forte raison maintenir un regard critique vis--vis des tendances pour
distinguer les effets de mode des innovations durables. Les usages, la consommation des contenus
web voluent galement, selon leur nature et le contexte dutilisation. Dans ce contexte
dvolutions technologiques rapides, il est dautant plus important de sappuyer sur des
connaissances fiables et rcentes des utilisateurs, de leurs comportements, afin de proposer les
meilleures solutions chaque projet.

QUI EST CONCERNE ?


Ce livre blanc sadresse toute personne implique dans la conception et lvaluation dinterfaces
web, quel que soit le support dutilisation, pc, mobile, tablette. Les contenus de ce livre blanc
intresseront plus particulirement :

Les intervenants projet amens aborder des problmatiques dinterfaces et de prise en


compte des besoins des utilisateurs finaux : chef de projet fonctionnel, intervenants
mtier, maitrise douvrage, maitrise duvre

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 8

Les designers dinterfaces et dinteraction, ainsi que tout profil cratif ayant besoin de
prendre en compte des problmatiques dergonomie dans un travail de conception
visuelle, graphique.
Les profils techniques, fonctionnels et mtier amens travailler avec des ergonomes,
designers dexprience utilisateur, et autre consultants spcialiss afin de faciliter la
communication entre les corps de mtiers.

WWW.SMILE.FR

POUR QUEL TYPES DE SITES ?


Les bonnes pratiques et patterns de conception prsents dans cet ouvrage peuvent tre mis au
service de tout type dinterface web.

Les sites institutionnels, sites vitrines, dinformation et sites vnementiels


Les sites commerciaux, e-commerce, BtoC
Les applications mtiers, outils, postes de travail
Les intranets, extranets, services B2B
Les outils de partage social et collaboratif
Les sites mobiles et sites optimiss pour tablette.

LINTERET DES BONNES


PRATIQUES
Le prsent livre blanc sattache prsenter un ensemble de solutions pour aiguiller le lecteur dans
ses choix en suivant les meilleures pratiques de conception. Nous ne prtendons pas dtenir une
vrit unique, ni tre exhaustifs, ce serait illusoire.
Les bonnes pratiques prsentes dans ce livre blanc permettront doptimiser lorganisation et la
prsentation des contenus et services :

Leviers damlioration de la productivit des utilisateurs et des conditions de travail et de


la satisfaction

Accs aux produits, pertinence de la recherche, limportance du catalogue de produits


et/ou services, optimisation de lengagement et de la conversion

Accs et valorisation des contenus ditoriaux, enjeux dimage et prise de contact


Concevoir un site utilisable, efficace, efficient et satisfaisant pour le plus grand nombre
dutilisateurs.

Ce livre blanc vise proposer une photo de bonnes pratiques web, avantages et inconvnients.
Vous y trouverez :

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 9

Un guide illustr pour clairer les choix de conception


Une introduction aux patterns de conception
Des cas pratiques avancs pour des pages spcifiques
Des cas pratiques spcifiques par type de site
Un rcapitulatif de conseils concrets la fin.

WWW.SMILE.FR

Picorez ce qui vous intresse, selon vos besoins, votre culture.


Nous esprons quil vous aidera prendre les bonnes dcisions dans la conception et vous incitera
aller plus loin.

QUAND LES BONNES


PRATIQUES NE SUFFISENT
PAS ?
Les bonnes pratiques sont des lignes directrices gnrales bases sur des rsultats de recherche en
ergonomie, psychologie, et sur les constats issus dtudes utilisateur et de terrain. Les bonnes
pratiques vous permettent de prendre en compte des caractristiques gnrales des patterns de
conception, des besoins et des comportements des utilisateurs. Elles vous permettent de rendre
utilisable et satisfaisant lusage de votre produit, site ou application pour le plus grand nombre.
Les bonnes pratiques ont toutefois leurs limites et diffrent en fonction de vos cibles spcifiques,
contextes dusages et objectifs business. Parfois, amliorer ses performances demande daller
lencontre des bonnes pratiques. Cette prise de risque est matrise par un travail dexpertise et
dtudes impliquant vos utilisateurs finaux, pour lesquels il est important de bnficier de la
rigueur, des connaissances et de lexprience dergonomes professionnels. Dans ce cas, nhsitez
pas faire appel SMILE pour bnficier de laccompagnement de nos experts.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 10

ENJEUX DE LA CONCEPTION WEB


LES BESOINS UX DU WEB

WWW.SMILE.FR

Les exigences du web


Pour tre performant, un site internet a besoin de rpondre un certain nombre dexigences
techniques, fonctionnelles, ergonomiques et motionnelles.
Un site doit tre utile : il doit le plus souvent rpondre la fois un besoin business, commercial
et/ou de communication, et un besoin utilisateurs. Il doit rpondre des attentes bien dfinies
et apporter linformation et les fonctionnalits ncessaires pour y rpondre.
Un site doit tre fiable : il doit tre suffisamment stable et disponible pour pouvoir tre consult
avec des temps de rponse performants, un affichage correct et sans bug.
Un site doit tre accessible : accessible signifie que toute personne connecte internet peut
accder au site et le consulter, et ce quelles que soient ses caractristiques propres. Le site doit
tre certes compatible avec les navigateurs les plus rcents. Cela ne suffit cependant pas : le site
doit tre consultable dans les cas o linternaute a dsactiv des fonctionnalits telles que le
javascript, ou sil prsente des dficiences visuelles, auditives ou des difficults motrices.
Un site doit tre utilisable : un utilisateur doit parvenir raliser laction pour laquelle il a consult
le site de faon efficace, sans effort inutile et de faon satisfaisante pour lui. Lutilisation doit tre
facile prendre en main, et apprendre.
Un site intuitif : il doit prsenter linformation utile au moment o lutilisateur en a besoin, en
adoptant une structure comprhensible lutilisateur. Lutilisateur doit pouvoir se servir du site
web avec un temps minimum dapprentissage pralable . Pour cela, le site doit sappuyer sur la
connaissance de ce que lutilisateur connait dj pour acclrer son apprentissage et faciliter la
mmorisation.
Un site doit tre engageant : le site doit crer une relation personnelle de confiance avec
linternaute, en limpliquant dans son usage et en devenant un alli indispensable pour lui.
Un site doit tre porteur de sens : il doit proposer une exprience motionnelle lutilisateur
dans laquelle linternaute puisse trouver un cho ses propres objectifs, valeurs et vcus.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 11

La base de la pyramide prsente les exigences indispensables au bon fonctionnement du site. Plus
on monte au sein de cette pyramide, plus les exigences contribuent au succs du site. Tout site ne
requiert pas de rpondre aux exigences les plus leves. Selon le type de site, les attentes des
utilisateurs varient.
Une application mtier ne ncessite pas dtre engageante, car par nature lutilisateur naura
dautre choix que de sen servir. Pour autant une application mtier plus utilisable offrira de
meilleures performances et une satisfaction utilisateur plus leve. Et une application mtier
engageante aura des performances meilleures si la motivation et lattitude positive des utilisateurs
lgard du produit augmente. Sur un march BtoB, proposer une application mtier porteuse de
sens est un atout commercial indniable pour se dmarquer de la concurrence.

Conciliation des besoins entreprise et utilisateurs


A lorigine, lergonomie est la science qui tudie le travail dans lobjectif damliorer
conjointement la productivit et la satisfaction utilisateur par la comprhension de lhumain et de
son activit. Les fondamentaux de lergonomie amnent les concepteurs web comprendre les
tenants et aboutissants des tches et activits de lutilisateur en interaction avec le systme pour
transformer cette interaction. Ces deux objectifs d se rejoignent dans la mesure o la qualit de

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 12

lenvironnement de travail et ladaptation des outils lhomme amliorent galement la


productivit.

WWW.SMILE.FR

Chaque projet de conception web implique de mme une mise en tension des objectifs de lentit
la source du projet et des objectifs des utilisateurs finaux. Le rle de lergonome dans un projet
de conception est didentifier et de concilier les besoins et objectifs des deux parties. Le succs de
la conception se mesure par la satisfaction du commanditaire et le retour sur investissement du
produit, mais galement par la satisfaction et les bnfices pour lutilisateur final, qui se
rpercuteront positivement sur le commanditaire dans une logique de cercle vertueux.
Bnfices pour lutilisateur
Concevoir un site russi au bnfice de ses utilisateurs implique de leur proposer une exprience
satisfaisante et si possible motionnellement riche comme nous lavons pralablement illustr
avec la pyramide des besoins. Un utilisateur satisfait est un client ou un collaborateur efficace et
heureux dutiliser lapplication conue pour lui.
Pour lentreprise
Lentreprise ou commanditaire qui ralise le site ou lapplication bnficie de retours sur
investissement directs et indirects, bass soit sur un chiffre objectif constatable associe une
valeur montaire, soit sur une estimation de gain.
Gains mesurables par des indicateurs :

Consommation des contenus : taux daffichage, de consultations, taux de rebond, dure


de visite, pour des contenus bien identifis.
Conversion des flux de visiteurs
o Fidlisation (nouveaux visiteurs vs visiteurs rcurrents, nombre et dure des
visites par utilisateurs, frquence des visites ).
o Engagement (partage et diffusion via les rseaux, interactions sur le site et sur les
rseaux ).
o Conversion (crations de compte personnel, prises de contact, demandes de devis,
ventes, panier moyen, CA par utilisateur, CA mensuel).

Gains estims

Maitrise de limage de marque : susciter des attitudes et perceptions positives des


utilisateurs envers la marque ou linstitution
o Premire impression positive : importante car elle conditionne la perception de la
marque lors de toutes les interactions ultrieures
o Efficacit et maitrise des messages diffuss et retenus par les visiteurs

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 13

Charge de travail : conomies de temps / ressources estimes selon le salaire horaire ; soit
par lefficacit sur des tches (ex : moins de temps pour contribuer sur plusieurs
applications diffrentes), soit par la rduction de la charge de travail (ex : moins de
courriers clients traiter), soit par la rduction des besoins de support et de formation des
collaborateurs.

DEMULTIPLICATION DES

WWW.SMILE.FR

PLATEFORMES ET CONTEXTES
DE CONSULTATION

Adapter son contenu la diversit du matriel


Avec larrive des smartphones sur le march, la conception web sest dans un premier temps
oriente vers la mise en place de stratgies mobiles pour prendre en compte les usages
spcifiques. Le dbat portait alors sur la conception dun site et/ou dune application mobile.
Puis la dmocratisation des tablettes a amen les concepteurs web basculer progressivement
dune stratgie mobile vers une stratgie web globale dans la continuit des travaux entams par
le W3C. Depuis les annes 90, il existe une volont claire de sparer contenu et mise en forme du
contenant, afin de faciliter laffichage dinformations indpendamment du support. Cette
dmarche a men, en 1996, la cration du CSS qui nous permet aujourdhui de mettre en place
des sites en responsive web design, capable dafficher la mme information de faon diffrente
sur nimporte quel type de support.
Et lavenir, il existera presque autant de matriel que dutilisateurs : features phones,
smartphones, tablettes, ordinateurs fixes et portables, terminaux hybrides, consoles de jeu,
tlvision connectes, dispositifs de ralit virtuelle, papier numrique, surfaces interactives en
lieux publics, objets du quotidien connects
Pour les concepteurs, cela a soulev de nouveaux dfis, impactant lensemble des tapes de la
chane de production web, de la stratgie ditoriale lintgration technique, en passant par la
conception ergonomique et graphique.
La production dun contenu unique adapt aux diffrents supports donne une importance accrue
aux enjeux ditoriaux. La longueur et la structuration des contenus notamment ne rpondent plus
seulement aux enjeux de lecture sur cran mais galement la diversit des contenants.
En termes de cration graphique, cela reporte la maitrise de laffichage sur chaque dispositif vers
la maitrise des rgles dajustement de laffichage sur lensemble des supports, dans lobjectif
dobtenir un meilleur rendu tout en maitrisant les cots de production.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 14

En termes dergonomie, la diversification des modes dinteraction pose des enjeux daccessibilit
diffrents de lusage classique au clavier et la souris, par lintroduction de nouveaux modles
dinteraction : surfaces tactiles, utilisation de stylet. Ces modes dinteraction impliquent de
concevoir les interfaces en prvoyant des contenus lisibles et des zones dinteraction adaptes
tous les terminaux et tous les contextes dusage. Qui na jamais fait lexprience sur son
smartphone dune lecture ardue de textes trop petits, ou de boutons trop proches occasionnant
des erreurs de tap agaantes ? Par ailleurs, la visibilit des contenus est rduite : la manipulation
tactile engendre des problmatiques de recouvrement de la zone de lecture par la main, et
labsence de survol rduit les possibilits de feedback et la disponibilit des informations
contextuelles.
En termes fonctionnels, cela ouvre aussi des perspectives indites. Ces nouveaux supports,
smartphones en tte, permettent daccder des informations et interfaces complmentaires :
golocalisation en mobilit, dtection de lorientation de lobjet, capture dimages, de luminosit,
du regard, possibilit doffrir des feedbacks tactiles, de dclencher un appel tlphonique en une
seule action autant de nouveauts prendre en compte et intgrer dans une exprience plus
labore.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 15

LES BONNES PRATIQUES


Avant dentrer dans le vif du sujet, nous souhaitons rappeler quelques lments de base que ce
livre blanc ne vise pas traiter en dtail.

WWW.SMILE.FR

LES BASES
Optimisations pour le SEO
Afin de bien rfrencer votre site, il est important de prendre en compte les enjeux de SEO (Search
Engine Opimization) ds le dbut de la conception. Le fonctionnement des moteurs de recherche
volue rapidement pour proposer un classement pertinent, bas sur la qualit des contenus
proposs. Afin davoir une bonne visibilit et de gnrer un trafic qualifi sur votre site, les rgles
respecter sont les suivantes :

Les url du site doivent tre rcrites, stables et explicites, c'est--dire utilisant des termes
pertinents plutt quun code abstrait.
Les titres et termes des liens doivent galement tre explicites et contenir des mots
pertinents.
Laccs doit tre facilit pour les robots.
Le site ne doit pas contenir dinformations sans rapport avec les sujets et disposs
spcifiquement pour le rfrencement. Les moteurs de recherche mettent en place des
mesures punitives drastiques envers les sites qui tentent dinfluencer les rsultats de
manire artificielle.

Pour en savoir plus, nous vous invitons consulter le livre


blanc Smile sur le Rfrencement

Optimisations pour laccessibilit


Afin de rendre votre site consultable par le plus grand nombre, il est important de respecter au
mieux les bonnes pratiques daccessibilit. Cet ouvrage na pas vocation aborder le sujet en
profondeur, mais il sagit dun pr-requis pour concevoir des interfaces utilisables. En termes de
contribution, les enjeux daccessibilit impliquent de prvoir la prsence et la visibilit des
lments suivants :

Le texte doit tre prsent sous forme de texte et non tre inclus dans des images.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 16

WWW.SMILE.FR

Sur les images, il est ncessaire de renseigner correctement les balises alt, pour prsenter
du texte alternatif pertinent selon le type dimage :
o Si limage est purement dcorative, la balise alt peut tre laisse vide.
o Si limage est informative, il est ncessaire de rdiger un texte de remplacement
explicite qui prsente le mme niveau dinformation que limage.
o Si limage contient un lien, le texte de remplacement doit dcrire la fonction du
lien.
Les vidos et fichiers audio doivent inclure une transcription. Les tableaux doivent
disposer dune description dtaille via la balise summary , et les images riches doivent
tre associes une description dtaille.
Le respect des balises est primordial pour faciliter la lecture par liseuse :
o Il est important dutiliser et de respecter lordre des niveaux de titres
o Il est ncessaire de dclarer les citations avec la balise approprie
o Les abrviations et acronymes doivent tre expliqus
Les caractres accentus doivent tre prservs mme sur les lettres majuscules
Les changements de langue doivent tre dclars correctement

Pour en savoir plus sur laccessibilit, nous vous invitons consulter


les rfrentiels RGAA et Accessiweb.

Optimisations des performances


Un utilisateur se fait une impression globale et complte dune page web, positive ou ngative, en
moins de 5 secondes. Labondance des ressources tant ce quelle est sur la toile, cest le temps
quil lui faut pour dcider de rester sur le site, ou daller trouver ailleurs ce quil cherche. En ralit,
il leur faut mme moins dune seconde pour tre capable de donner un avis positif ou ngatif qui
sera consistant avec leur opinion plus long terme.
De plus, 40% des internautes abandonnent laffichage dune page si elle met plus de 3 secondes
safficher (Source: Econsultancy). Une tude de Joomla Mobile montre galement que le taux de
rebond dune page est multipli par deux si la page met 4 secondes safficher, et par trois avec
un temps daffichage de 8 secondes.
Afin doptimiser vos performances, voici quelques rgles de base suivre pour bien commencer :

Eviter les introductions en flash, qui de plus, sont peu accessibles, dfavorables au
rfrencement et ne safficheront pas sur tous les supports.
Eviter les imbrications de tableaux pour mettre en forme votre site. Utilisez des feuilles de
style CSS pour mettre en forme vos contenus, qui produisent un code optimis donc plus
lger.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 17

WWW.SMILE.FR

Evitez autant que possible les applets, activeX. Si vous utilisez du javascript, dont on trouve
une myriade de fonctionnalits cls en main nutilisez que la partie du code qui est
rellement utilise par votre site
Assurez-vous que votre site soit compatible avec les navigateurs et plateformes dont
dispose votre audience cible.
Assurez-vous que vos images sont encodes dans un format adquat, et compresses pour
tre lgres. Ceci est dautant plus important sur les vignettes.
De faon gnrale, essayez de limiter le poids des pages: vos utilisateurs mobiles en
particulier disposent dune qualit de connexion variable. De plus, vous respectez ainsi
leur forfait data.
Ct hbergement, faites attention la qualit de service pour assurer des temps de
rponse corrects, la disponibilit continue et une bande passante suffisante au niveau des
serveurs.

Les critres dutilisabilit


Pour rpondre aux exigences dutilisabilit, de nombreux critres ergonomiques ont t mis en
place, afin de concevoir demble des interfaces plus faciles prendre en main. Voici les deux
rfrences les plus utilises :
Critres dutilisabilit de Nielsen
Visibilit de ltat du systme : Le systme doit toujours informer lutilisateur de ltat dans lequel
il se trouve et des actions en cours, avec un feedback dlivr dans un dlai raisonnable.
Cohrence entre le systme et le monde rel : le systme doit sadresser lutilisateur avec un
niveau de langage et un choix de vocabulaire familiers lutilisateur, plutt que des termes
techniques propres au systme. Linformation doit apparaitre de faon conventionnelle, dans un
ordre naturel et logique similaires dautres contextes bien connus des utilisateurs.
Contrle utilisateur et libert : les utilisateurs font frquemment des erreurs de manipulation et
ont besoin de pouvoir interrompre un vnement tout moment sans passer par un dialogue
complexe. Faciliter les fonctionnalits de type annuler / refaire.
Cohrence et respect des standards : les utilisateurs ne devraient pas avoir se demander si des
termes, situations ou actions diffrentes dclenchent la mme action. Suivre les conventions
permet de rester cohrent.
Prvention des erreurs : sil faut proposer des messages derreur explicites, il est encore plus
important dviter lapparition des erreurs leur source. Pour cela, il faut identifier et liminer les

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 18

conditions susceptibles de crer des erreurs, ou vrifier et demander une confirmation


lutilisateur avant quil ne valide son action.

WWW.SMILE.FR

Reconnaissance plutt que rappel : Rendre visible les objets, actions et options permet de rduire
la sollicitation de la mmoire de lutilisateur. Lutilisateur ne devrait pas avoir se rappeler
linformation dun dialogue lautre. Au besoin, lutilisateur doit facilement pouvoir afficher des
instructions.
Flexibilit et efficience dutilisation : Les raccourcis / acclrateurs, invisibles des novices, rendent
plus efficaces linteraction des utilisateurs experts, adaptant ainsi le systme la fois aux experts
et aux novices. Ils doivent tre prsents pour permettre dacclrer les actions rptes.
Esthtique et design minimaliste : les dialogues ne devraient pas contenir dinformations non
pertinente ou rarement utile. Chaque unit dinformation supplmentaire entre en comptition
avec les informations utiles et diminue leur visibilit relative.
Aider les utilisateurs reconnaitre, diagnostiquer et rparer les erreurs : Les messages derreurs
doivent tre rdigs en langage naturel, sans codes, indiquant prcisment le problme et
proposant une solution constructive.
Aide et documentation : bien quil soit prfrable de proposer un systme utilisable sans
documentation, cela peut tre ncessaire. Dans ce cas, il doit tre facilement accessible,
permettre de faire une recherche, prsenter de linformation focalise sur la tche en cours, lister
une srie dtapes concrtes effectuer, et ne pas tre trop volumineuse.
Critres de Bastien et Scapin
Guidage : Conseiller, orienter l'usager dans son interaction avec le systme.
Charge de travail : Le systme vise rduire la charge perceptive ou mnsique en maitrisant la
longueur et la densit de linformation.
Contrle explicite : Le systme doit permettre lutilisateur danticiper leffet de ses interactions
et de lannuler au besoin.
Adaptabilit : Linterface doit proposer plusieurs faons de faire une action, dont des moyens
adapts prenant en compte le niveau dexpertise de lutilisateur.
Gestion des erreurs : Le systme doit anticiper et tenter dviter lapparition derreurs. En cas
derreurs, il doit informer lutilisateur via un message comprhensible et laccompagner dans la
mise en uvre de solutions.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 19

Homognit, cohrence : les lments internes au site doivent avoir une logique de
fonctionnement unique, prvisible et systmatique.
Codes et dnominations : Le vocabulaire employ doit tre explicite, les relations smantiques
entre les lments du site doivent tre fortes.

WWW.SMILE.FR

Compatibilit : Le site doit tre cohrent avec ce que lutilisateur connait en dehors du site.

ARCHITECTURE DINFORMATION
Dfinir le plan du site
Les enjeux lis au plan du site
Concevoir un site web utile, efficace et performant commence par la dfinition dun plan du site
adapt la fois sa typologie de contenus et la logique utilisateur de classification et de
recherche dinformation. Un architecte ne construit pas directement des murs sans avoir dabord
fait le plan de la maison. Il en va de mme pour un site : la premire tape est de rpertorier les
contenus et fonctionnalits et dorganiser leur structure et articulation : cest la phase
darchitecture dinformation, indispensable au bon droulement des tapes suivantes de
conception ergonomique et graphique.
En effet, larchitecture dinformation a un impact direct fort sur la navigation, les choix
dinteraction et les parcours utilisateurs, cest dire la manire dont les utilisateurs pourront
accder aux contenus du site.
Attention : Le plan du site ne prsume pas de ce qui sera affich sur la page daccueil, et le fait
quune page soit classe bas dans larborescence ne signifie pas quelle ne peut pas tre atteinte
en un seul clic.
Diffrents types de classification des contenus
Construire un plan du site implique de dfinir une logique daccs aux contenus. Cette logique
peut se baser sur diffrentes approches, proprits des contenus ou services.
Classification par source : la classification des contenus reflte la structure interne de lentit qui
les produits. Cest frquemment le cas dans les intranets, dont la structure reflte la structure
interne de lentreprise. Pour un intranet, cela peut tre appropri : un collaborateur qui cherche
des informations lies aux ressources humaines pourra se tourner logiquement vers la rubrique
RH.
Pour un site vocation grand public, ce type dapproche est gnralement viter, car la structure
interne reflte rarement les besoins et attentes des utilisateurs, a plus forte raison lorsque la

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 20

structure interne leur est totalement inconnue. Les utilisateurs qui nont dautre choix que de
venir chercher linformation sur le site passeront par un apprentissage plus ou moins long et
laborieux.

WWW.SMILE.FR

Cette approche a pour le producteur lavantage de simplifier le processus de contribution, en


assurant des limites claires la responsabilit de chaque contributeur, puisquelles correspondent
des rubriques entires.
Classification par nature de contenu : une classification que lon retrouve souvent sur les sites de
contenu multimdia est une approche par nature de contenu, ou mme par gabarit de page. Par
exemple, un site pourra tre dcoup en articles, agenda, annuaire et vidos. La nature du
contenu peut effectivement tre une faon daccder un contenu de longueur approprie et
rpondre des besoins utilisateurs : disposer dinformations de fond ou dun survol rapide dun
sujet, rcuprer des fichiers consulter plus tard, etc.
Cette approche prsente cependant deux inconvnients principaux :
Une classification trop fine risque de faire passer lutilisateur ct de ce quil cherche, sil ne
soriente pas dans la bonne section. Par ailleurs, si linternaute recherche une information sur un
sujet, la classification par type de contenu peut crer de la confusion. Par exemple, sil cherche des
informations sur une exposition dart contemporain, doit-il chercher dans la rubrique articles,
dossiers, communiqus de presse, dossiers de presse ou articles de fond ?
Classification thmatique : classique, la classification thmatique sadapte bien tout type de
site de contenu ditorial.

Il existe des mthodologies impliquant des utilisateurs qui


permettent de guider les choix dans la dfinition du
plan de site : le tri par carte et le teste darbre.
Classification par besoin : le classement reflte les attentes et besoins des utilisateurs finaux.
Cette approche sadapte particulirement aux sites proposant des services pour des besoins bien
identifis, tels que des sites de vente de pices dtachs ou des services aux personnes. Un site de
maisons de retraites va par exemple saxer plutt autour de la localisation ou des types de soin
requis pour proposer des tablissements pertinents selon les besoins utilisateurs.
Une approche par besoin sous entend une stratgie globale et des processus de production de
contenus plus complexes, qui impliquent potentiellement une collaboration troite entre
diffrents dpartements.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 21

WWW.SMILE.FR

Par ailleurs, il est indispensable de baser sa classification sur une connaissance des besoins rels
des utilisateurs et de leurs comportements. Si ce nest pas le cas, non seulement lutilisateur ne sy
retrouve pas, mais en plus, il devra deviner la logique des concepteurs ou se perdre dans des
chemins trompeurs. Russir une approche par besoin requiert donc soit davoir une trs bonne
connaissance de ses utilisateurs, soit de raliser une expression de besoin autour de leurs attentes
par rapport au site.

Concevoir une arborescence par besoin ncessite une


vision perspicace de lactivit de vos utilisateurs. Les
mthodes dentretiens et de focus groupes permettent
de dfinir la stratgie en adquation avec les attentes
de vos utilisateur finaux.
Classification par profil utilisateur : les lorsque les besoins des utilisateurs varient beaucoup et
sont cloisonns, il est ais de les rpartir dans un profil. Il est alors possible de classer les contenus
dans des rubriques qui rfrent directement ces profils. Lutilisateur sy reconnait et soriente
directement vers les contenus qui lui sont adresss.
Cette approche est particulirement adapte pour les sites de service prsentant des offres
diffrentes pour diffrentes cibles comme les banques et mutuelles. Il sadapte galement trs
bien aux sites de sensibilisation ou vocation pdagogique comme, par exemple, celui de
lassociation Prvention Routire, qui sadresse diffremment aux jeunes, aux conducteurs de 2
roues et aux routiers par exemple. Ces cibles sont effectivement, intrinsquement et de faon non
ambige, tout fait diffrentes.
Tout comme le classement par besoins, cette approche requiert de bien connaitre ses cibles. Pour
autant, cette approche peut aussi se baser sur les objectifs de communication fixs par les
contributeurs vis--vis de leurs cibles. Dans ces conditions, rien ne garantit cependant que les
utilisateurs seront vraiment intresss par ces contenus.
Autres classifications :
Il existe de nombreuses autres faons de classer linformation. Par exemple, classer par millsime
des contenus lis des confrences annuelles a du sens. Un site e-commerce pourra classer ses
produits par nature doffre (nouveaut, promotion, occasion). Un blog est gnralement class
par date de publication avec des archives mensuelles et ventuellement un agenda dvnements
futurs.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 22

Tableau de synthse
Efficace, intuitif
pour l'utilisateur
--

Simple et facile pour


les contributeurs

Thme / Sujet

Offre / Service

Besoin

++

Cible / profil

++

Date / Temps

Source / Dpartement de
production

--

++

WWW.SMILE.FR

Format / Type de contenu

Russir sa classification de contenu


Aucune des approches prsentes prcdemment nest fondamentalement bonne ou mauvaise.
Chaque projet dispose de contenus spcifiques, avec des besoins et objectifs associs. Une bonne
approche est de combiner plusieurs logiques de classification pour construire son arborescence, et
de les croiser via de la navigation alternative ou transverse.
Par exemple, un site peut disposer dune classification principale thmatique (arts, sports,
sciences), mais proposer des remontes contextuelles bases sur le type de produit (ex : vidos
similaires, articles lis, fichiers associs) et proposer en plus de la grille thmatique des pages par
profil centralisant les contenus les plus consults respectivement par les jeunes, enseignants,
associations, journalistes.
Attention toutefois ne pas chercher proposer trop de chemins alternatifs qui produiraient des
hsitations chez les utilisateurs ou les amneraient penser que les chemins mnent vers des
contenus diffrents alors que ce nest pas le cas.
Dfinir les rubriques principales
Les rubriques principales se focalisent sur la valeur ajoute du site, le cur de loffre, quil sagisse
de services, de produits ou de contenus. Elles peuvent galement intgrer les informations
contextuelles importantes, soit parce quelles sont utiles et demandes par lutilisateur comme

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 23

des lments de rassurance dans le e-commerce, soit parce quelles participant dmarquer le
site de la concurrence, par exemple des actualits ou des ressources.

WWW.SMILE.FR

Les rubriques secondaires permettent un accs alternatif aux contenus. Il peut sagir daccs par
profils complmentaires la navigation principale, mais aussi de contenus complmentaires utiles,
mais qui ne relvent pas de la fonction premire du site. Un site commercial pourra ainsi proposer
en rubriques secondaires une section institutionnelle pour prsenter la marque ou le groupe, ou
des rubriques de type recrutement.
Les rubriques transverses sont des contenus types couramment rencontrs sur des sites similaires
sur la toile. Il sagit de contenus tels que laide, les questions frquentes, le contact. Ces accs
peuvent tre des pages seules ou petits clusters de pages qui sont pertinentes dans toutes les
rubriques ou au contraire ne tiennent pas dans les cases et peuvent ainsi tre centralises pour
plus de visibilit et de clart. Sauf spcificit, le concepteur a tout intrt les disposer de faon
standard, c'est--dire selon le mme modle que celui des autres sites similaires, afin de bnficier
de la connaissance antrieure des utilisateurs.

Arborescence large vs. Arborescence profonde


Arborescences larges
Une arborescence large prsente peu de profondeur, mais de nombreuses rubriques positionnes
au mme niveau. Le graphique ci-dessous prsente une arborescence large compose de 12
rubriques de niveau 1, mais seulement 2 niveaux de profondeur.
accueil
1

Avantages

Visibilit immdiate des catgories


Accs rapide au contenu, peu dtapes

10

11

12

Inconvnients

Information moins visible, noy par le


nombre dentres
Temps de prise de dcision plus long
pour entrer dans une des rubriques

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 24

WWW.SMILE.FR

Une arborescence large sadapte bien des sites disposant de contenus suivant une nomenclature
prdfinie ou des usages exclusivement experts. Par exemple, pour une application mtier ddie
des experts, cela a du sens de leur permettre un accs en un clic leurs outils quotidiens. Le
bnfice de basculer en un clic entre ses diffrents outils compense la densit dinformation, par
ailleurs un usage rpt garantit lapprentissage terme ainsi que la mmorisation par les
utilisateurs.
Quel que soit le type de site, il est gnralement recommand de maintenir la largeur de
larborescence entre 5 et 9 rubriques. Cela correspond environ au nombre dunits dinformation
quun humain peut garder en mmoire court terme.
Des contenus particulirement htrognes peuvent rendre difficile la factorisation des rubriques.
Il est possible de recourir des distinctions de traitement pour orienter lutilisateur sans
ncessairement avoir de rubrique explicite en en-tte. Par exemple, un site requrant 14
rubriques de mme niveau pourra les regrouper en plusieurs sous ensembles visuels via un code
couleur sparant entres principales et secondaires. Le design final du site jouera alors un grand
rle dans la comprhension et la perception de ces regroupements.
Arborescences profondes
A linverse, une arborescence profonde affiche peu de rubriques un mme niveau, mais dispose
de nombreux niveaux de profondeur. Dans lexemple ci-dessous, larborescence ne propose jamais
plus de deux catgories en mme temps, mais elle comprend 7 niveaux de profondeur.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 25

Avantages

Inconvnients

Guidage utilisateur fort


Charge visuelle faible

Nombre dtapes important avant


darriver au contenu

WWW.SMILE.FR

Une arborescence profonde sadapte bien aux sites daide en ligne, rubriques ddies au service
client, outils de diagnostic ou devis, pour lesquels un guidage fort de lutilisateur est requis.
Si le site dispose dune base de contenu trs riche et dun moteur de recherche performant et
proposant des fonctions avances dont lusage sera majoritaire (au dtriment dune navigation
classique en page par page), une grande profondeur ne sera pas un handicap.
Il faut noter que lavantage du guidage utilisateur fort peut galement desservir la facilit daccs
aux contenus si les utilisateurs ne choisissent pas la bonne branche de larborescence.
Concevoir une arborescence quilibre
Une arborescence quilibre est ni trop large, ni trop profonde. Lensemble de ses rubriques et
sous rubriques est galement prsent en nombre homogne dans lensemble du site. Lexemple
ci-dessous est une arborescence quilibre : elle prsente environ 7 rubriques en largeur, et 2
niveaux de profondeur.
1

1
2
3
4
5
6
7

En termes de profondeur, nous recommandons de se limiter 3 niveaux maximum. 3 niveaux


signifient que lutilisateur arrivera un contenu proche de ce quil cherche entre 3 et 5 clics en
suivant une navigation descendante.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 26

WWW.SMILE.FR

La rgle des trois clics


Afin de concevoir une arborescence logique et intuitive, il faut pouvoir accder n'importe quel
contenu en 3 clics. En effet, plus une recherche est longue, plus l'utilisateur est mcontent, et plus
il risque de quitter le site ou d'oublier ce qu'il cherchait. En rapprochant l'information de la page
d'accueil, l'information est plus facilement trouve.
Simple, mesurable, cette rgle a le mrite d'tre facilement applique sans expertise et de
contraindre une certaine simplicit dans l'architecture d'information. Malheureusement, lorigine
de cette rgle reste un mystre dpourvu de sources scientifiques. Effectivement, plus une
recherche est longue et laborieuse, plus lutilisateur sera mcontent. Toutefois, si une structure
trop profonde est nfaste l'efficacit des recherches, une structure trop peu profonde l'est
galement, car il est plus difficile d'y reprer l'information.
Par ailleurs, cette rgle ne tient pas compte de la complexit des contenus fournis. Un site
compos de 50 pages ou de 10 000 pages ne peut pas, par nature suivre les mmes rgles. Une
autre limite de la rgle des 3 clics est quelle prtend faciliter le parcours des utilisateurs alors
mme quelle en nie la complexit et la diversit. Plutt que de lappliquer scolairement, il faut
sattacher atteindre lobjectif, c'est--dire proposer une navigation simple et efficace, rduisant
au maximum le nombre dtapes ncessaires pour atteindre un contenu, sans que cela se fasse au
dtriment de la clart, densit et logique des regroupements dinformation.
Enfin, il est relever que la tendance actuelle du web, inspire par labsence de survols et de la
quantit rduite dinformation affichable sur mobile, tend vers une approche dite de rvlation
progressive (progressive disclosure) : mieux vaut un clic satisfaisant que trop dinformations la
fois avec peu de clics. Si chaque action ralise rapproche lutilisateur de son objectif de faon
satisfaisante, le nombre dtapes nest pas gnant. Ceci est dautant plus vrai si un clic (ou un tap
sur terminaux tactiles) fait apparaitre un contenu au sein de la page de faon instantane
(accordon, menu riche, ). Le cout associ cette action est nettement moindre que le
chargement dune nouvelle page : tout dabord en raison de limmdiatet du rsultat de laction,
mais aussi parce que lutilisateur conserve le contexte de la page dans laquelle il se trouve, celle-ci
sen trouvant simplement enrichie.

Les parcours utilisateurs


Lorsquun utilisateur navigue sur un site ou utilise une application, il va passer par un
enchainement dcrans avant darriver sur la page qui lintresse. Cet enchainement dpend de
ses objectifs, mais aussi des possibilits et fonctionnalits proposes par le site. En termes
dexprience, ces parcours peuvent varier grandement, toutefois plusieurs modes de navigation
peuvent tre identifis.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 27

WWW.SMILE.FR

Diffrent types de parcours


Navigation descendante : depuis la page daccueil, lutilisateur entre dans une rubrique et
descend dans larborescence jusquau niveau le plus profond. Ce type de navigation se fait via le
menu, de page page, ou suite un affinage depuis une rubrique via des filtres et facettes dans
une liste de contenus. Par exemple, il entre dans la catgorie sport de son journal prfr, puis
dans la sous rubrique golf, pour enfin voir la liste des tournois et regarder les rsultats de la Ryder
Cup.

Navigation transverse : lutilisateur peut, au cours de sa descente dans larborescence, basculer


dune rubrique vers une autre via des lments de navigation transverse, sans remonter dans
larborescence. Par exemple, lutilisateur consulte des articles sur la mode, et bascule dans une
boutique en ligne, ou accde un formulaire de contact suite une recherche dans laide en ligne.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 28

WWW.SMILE.FR

Raccourcis et mises en avant : Quelle que soit la largeur et la profondeur de larborescence et la


position dun contenu dans cette structure, lutilisateur a la possibilit daccder en un clic des
pages situes dans une partie profonde de larborescence. Lutilisateur peut par exemple accder
directement une rubrique de niveau 3 depuis un menu riche, ou consulter le dtail dun article
mis en avant sur la page daccueil.

Accs direct depuis un site externe : Enfin, parcours souvent oubli, lutilisateur peut trs bien
arriver sur une page situe dans un niveau bas de larborescence depuis un lien externe. Il peut
tre amen sur une page de contenu directement depuis des rsultats de recherche web, depuis
un lien sur un site partenaire, ou un partage de contenu sur un rseau social. Il est essentiel de
connaitre les sources de traffic dun site existant lorsque lon est amen le faire voluer :
certains sites possdent une part mineure dutilisateurs en provenance des moteurs de recherche
tandis que pour dautres, cette source est majoritaire et par consquent vitale.

Instaurer un dialogue homme-machine


Au vu de la diversit des parcours amenant une mme page, il est essentiel daider lutilisateur
reprer sa position actuelle par rapport lensemble, rappeler le parcours emprunt et mettre en

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 29

valeur les options de navigation dont il dispose pour poursuivre son chemin : remonter dans
larborescence, descendre plus profondment, basculer dune rubrique lautre

WWW.SMILE.FR

Positionner et structurer ses contenus dans larborescence


Concevoir un plan du site clair et utilisable requiert de dterminer une logique de fond pour
classer les contenus, et danticiper un rubriquage quilibr en fonction des contenus et besoins
des utilisateurs. Le positionnement des diffrents contenus au sein de ces rubriques peut se faire
de plusieurs faons.
Positionnement unique des contenus dans une rubrique unique : chaque contenu est plac un
seul et unique endroit, sans doublons. Le contenu nest cr et stock quune fois, via un
rattachement principal. Cela nempche pas de crer des raccourcis vers ce contenu depuis
dautres rubriques par le biais de liens de navigation transverse.
Duplication de contenus dans plusieurs rubriques : chaque contenu existe plusieurs endroits
sous formes de copies conformes ou de duplicatas partiels du contenu. Cette approche prsente
cependant des inconvnients notables :

La charge de contribution et de mise jour du contenu est dmultiplie par le nombre de


versions existantes
Le contenu risque de ne pas tre mis niveau de la mme faon dans les multiples
entres, ce qui cre des incohrences et suscite la confusion, incomprhension des
utilisateurs. Par ailleurs, les incohrences peuvent dcrdibiliser le site qui les prsente
Le rfrencement peut galement souffrir de contenus dupliqus. Lors de lindexation des
contenus, les nouveaux sont compars aux contenus prexistants. En cas de doublon, il ny
a pas de sanction proprement parler, toutefois, la visibilit du contenu dans le moteur de
recherche se trouve dilue, et le moteur de recherche fera le tri pour garder la meilleure
version, qui peut ne pas tre celle que le webmaster prfre mettre en avant.

Multi-positionnement de contenus : il sagit dune fonctionnalit associe la solution technique


faisant fonctionner lapplication. Le contenu nest cr quen un unique exemplaire depuis
linterface de contribution, mais il est positionn dans plusieurs rubriques du site. Par exemple,
une prsentation de service peut se retrouver la fois dans une entre par service et dans une
entre par besoin.

Le multi positionnement permet de rpondre plusieurs logiques de recherche


dinformation en proposant des parcours utilisateurs multiples pour arriver un mme
contenu
Le contenu multi-positionn nest cr et stock quen un seul exemplaire, il permet de
maitriser la charge de contribution

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 30

WWW.SMILE.FR

Le rfrencement dun mme contenu sur 4 ou 5 url diffrentes nest pas sanctionn par
les moteurs de recherche condition dindiquer clairement dans le code source
lexistence de ces contenus dupliqus.
Le multi-positionnement des contenus peut avoir des rpercutions ngatives sur les
performances du site

La mthode du test darborescence permet doptimiser


larchitecture dinformation en la confrontant des
utilisateurs rels. Elle permet didentifier les contenus
multi-positionner pour rpondre diffrentes tches et
de simplifier laccs linformation aux utilisateurs.
Multi-positionnement de rubriques : Une ou plusieurs rubriques incluant des contenus identiques
sont prsentes plusieurs endroits de larborescence de contenus. Par exemple, dans une
arborescence thmatique, la rubrique danse pourrait se trouver la fois dans la catgorie
sport et dans la catgorie culture.
En premire approche, cette stratgie permet de proposer plusieurs parcours utilisateurs,
rpondant chacun une logique de consultation diffrente. Que lutilisateur sintresse la danse
comme expression culturelle ou comme discipline sportive, lutilisateur trouvera ce quil cherche.
Cela fonctionne bien lorsquun contenu sadresse deux catgories dutilisateurs distinctes qui ne
sintressent par ailleurs pas du tout aux mmes contenus.
La limite de cette approche apparait ds lors que les utilisateurs sont susceptibles de consulter les
deux instances de la catgorie multi-positionne. Cela risque de crer de la confusion et de
linquitude chez lutilisateur, qui ne sera pas certain de disposer de toute linformation qui lui est
utile. Il est alors important davoir exactement les mmes contenus dans les deux occurrences de
la rubrique.
Architecture adaptative selon lutilisateur : La personnalisation de larchitecture dinformation
par profil utilisateur peut se faire de deux faons. La structuration peut tre compltement
diffrente selon le profil utilisateur. Par exemple, un intranet peut proposer une approche par
mtier pour les commerciaux et chefs de projets ; avoir une approche par dpartement pour les
managers ; et une approche par besoin pour les techniciens.
En soi, chaque approche dans notre exemple est bien dfinie, toutefois les premires difficults
mergent ds lors que ces acteurs vont essayer de discuter ensemble. Si les utilisateurs ne voient
pas la mme chose, ils ne pourront pas communiquer efficacement autour de loutil, sentraider,
partager une information via un lien, qui risque de ne pas fonctionner pour le destinataire, voir
pointer sur un contenu diffrent.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 31

WWW.SMILE.FR

Un compromis intressant est de conserver exactement la mme arborescence pour tous les
profils, mais den masquer des branches en fonction des droits de lutilisateur, ou de personnaliser
des blocs dans une zone rserve des pages. Cela permet de prserver la cohrence densemble
dun site ou dune application, tout en offrant des raccourcis personnaliss aux utilisateurs, et en
rduisant le bruit par le masquage des contenus inutiles.
Sur des sites grand public, cest galement une approche viable, par exemple, pour afficher des
contenus supplmentaires aux utilisateurs identifis, ou pour adresser des messages personnaliss
aux utilisateurs selon leur origine, prospect ou client, ou selon les informations quils ont renseign
dans leur profil.

Dfinir des persona permet de formaliser les besoins,


comportements et motivations utilisateurs et de les faire
vivre tout au long du projet pour une meilleure prise en
compte de la diversit des profils types.
Architecture personnalisable : Les utilisateurs ont la possibilit, au cas par cas, de rarranger
lordonnancement des menus de navigation et donc de disposer dun plan de site personnalis.
Cette approche, souvent demande sur des intranets, dcoule frquemment dune volont de
permettre aux utilisateurs de sapproprier loutil, en poussant lextrme la personnalisation.
Outre la complexit technique inhrente cette approche, elle prsente de nombreux
inconvnients.

La diversit des configurations possibles risque de rendre impossible la communication


entre les diffrents utilisateurs, le partage de liens ou laccompagnement des novices.
Les utilisateurs ne sont pas des concepteurs. Ils sont experts de leur activit, mais pas
expert en conception. De fait, une interface totalement personnalise, conue par
lutilisateur pour lui-mme, risque fortement de ne pas tre optimise : il risque de
manquer des informations quil a oubli avoir pralablement masques, ou au contraire
de sencombrer dun nombre trop important doutils
Ce principe a de fortes chances de ne pas tre utilis. La personnalisation avance est par
nature complexe et utilise principalement par une minorit dutilisateurs experts. Il faut
donc particulirement faire attention la cible laquelle on sadresse pour savoir cela
apportera la valeur ajoute escompte. Gnralement, la rponse est non.

Plutt que de reporter sur lutilisateur le travail du


concepteur en lui permettant de modifier lui-mme son
arborescence, utiliser la mthode du tri par cartes met

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 32

jour la logique de classement des utilisateurs pour leur


proposer par profil une arborescence adapte leurs
taches.

WWW.SMILE.FR

Tableau de Synthse
Simplicit de
contribution

Favorise le
rfrencement
naturel

Cohrence
interne de
l'arborescence

Cohrence
externe de
l'arborescence

Logique,
intuitif

Personnalis,
adapt aux
profils

Position unique

++

++

Doublonnage du contenu

Multi-positionnement du
contenu

++

++

Multi-positionnement
des rubriques

++

Structuration par profil

++

++

Masquage ou affichage
de rubriques par profil

++

Architecture
personnalisable

--

variable

variable

Lorsque vous choisissez comment positionner un contenu, posez-vous les questions suivantes :

Quel sont les objectifs de lutilisateur ? Quel sont les parcours logiques pour lui ?
Quel vocabulaire est familier pour lutilisateur ? Evitez lutilisation de jargon dans la
majorit des cas. Seules les applications et sites mtiers destins exclusivement un
public expert bnficient de lusage de termes techniques.
Les libells choisis sont ils suffisamment diffrents smantiquement ? Les utilisateurs vontils facilement faire la diffrence entre les catgories, ou les diffrences sont-elles trop
subtiles ?

Des catgories proches, mme diffrentes du point de vue du concepteur peuvent proposer des
nuances trop subtiles du point de vue des utilisateurs, sources derreurs de navigation. Par

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 33

exemple, proposer trois rubriques notre offre , nos solutions , expertise est en gnral
source de confusion.

WWW.SMILE.FR

Le tri par cartes et le test darborescence sont deux


mthodes complmentaires pour identifier les libells et
logiques de navigation les plus intuitifs pour vos
utilisateurs et faciliter laccs linformation de faon
concrte et objective.

PRINCIPES DE NAVIGATION
La navigation englobe tous les aspects qui permettent un utilisateur de parcourir un site ou une
application et de passer dun cran lautre. Nous y inclurons donc les menus de navigation
proprement parler, mais galement la structure gnrale des pages, plus ou moins adapte
diffrents types de navigation.
Bien assortir sa navigation son arborescence est indispensable pour proposer un accs fluide et
efficace aux contenus. Cette section sattache prsenter les choix adquats par nature
darborescence, en fonction du support de consultation, lors dune phase de conception.

Identifier les lments de navigation


Afin de faciliter la navigation, le premier pr-requis est didentifier les lments interactifs qui vont
permettre la navigation. Les lments de navigation doivent pour cela se distinguer visuellement
des lments non interactifs.
Identification des liens
Les liens sont en bleu pour se dmarquer du texte noir. La distinction de couleur permet de crer
un effet pop out, c'est--dire quil attire lattention et permet de trouver plus rapidement le lien
dans le texte. Cela vite lutilisateur de devoir passer sa souris au dessus des diffrents lments
de la page pour savoir sil pourra cliquer ou non. Et les terminaux tactiles devenant de plus en plus
rpandu, au point de reprsenter dornavant la majorit du trafic web, labsence de survol
implique ncessairement de pouvoir identifier visuellement les zones interactives.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 34

WWW.SMILE.FR

Les couleurs standards pour indiquer les liens dpendent de leur tat : non visit en bleu, actif en
rouge, dj visit en violet. Ces couleurs nont dailleurs pas t proposes au hasard : elles
correspondent aux codes couleur identifiable par la plus grande part de la population possible. Le
bleu notamment est une des couleurs les moins sensibles aux effets du daltonisme, ce qui facilite
dautant le reprage des liens.

Bien entendu, chaque site dispose dune charte graphique propre refltant son identit. Les
solutions techniques actuelles permettent de mettre en place des liens lgants, distinctifs et
homognes. Pour cela, il faut dfinir dans le design les codes qui signalent les liens et les utiliser de
faon cohrente et systmatique travers lensemble des pages du site.
Lutilisation dautres couleurs ou dautres signifiants (par exemple, nutiliser que la couleur pour
distinguer les liens hypertextuels et souligner le lien seulement au survol) pour des raisons
desthtisme est dornavant courante. Certes, le gain sur cet axe l est indniable, mais il faut
assumer que leur facilits de reprage ne sera pas optimal, au moins pour une partie de la
population utilisatrice.
Affordance des boutons
Comme pour les liens, les utilisateurs ne devraient pas avoir se demander si un lment est un
bouton ou sil est cliquable. Lutilisateur doit immdiatement comprendre en voyant un bouton,
quil est cliquable. Laffordance peut facilement tre cre par analogie un bouton physique, en
ajoutant du relief ou une ombre qui indique quil est possible dappuyer sur le bouton.

Durant la conception graphique, crer des lments affordants par ces procds revient avoir
une charte sinscrivant dans la tendance du skeuomorphisme : se rapprocher du look and feel du
monde rel pour habiller son site et bnficier des proprits de cette mtaphore.
Depuis lanne 2013, la tendance est au flat design, c'est--dire tout le contraire du
skeuomorphisme ! En termes dergonomie et daffordance, on peut donc supposer que ce
principe est moins explicite et vident pour lutilisateur. Il est dautant plus important dans ce
contexte de dfinir des codes indiquant linteractivit aux utilisateurs et de les respecter.
Nanmoins, lergonomie est aussi et beaucoup matire dhabitudes chez les utilisateurs. Hors, les
internautes sont des usagers du web de plus en plus expriments. Le passage au flat design

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 35

relve en partie dune expertise plus pousse et dun besoin moindre (voire nul) des utilisateurs
bnficier des proprits inhrentes la mtaphore sous jacente au skeuomorphisme.

WWW.SMILE.FR

Quoi quil en soit, sans affordance, lutilisateur devra procder par essai et erreur pour apprendre
se servir du site. La cohrence interne du site et ses codes graphiques facilitent lapprentissage
de lutilisateur et la rutilisation de ce quil a pu comprendre dautres sites. De nos jours, un
utilisateur sattend pouvoir cliquer sur une zone entire plutt quun lien spcifique, encore une
fois du fait de linfluence de la conception pour les terminaux tactiles (en particulier smarphone)
qui le ncessitent du fait mme des modalits dinteraction.

Libells des lments de navigation


Les libells doivent galement tre explicites et indiquer clairement ce que lutilisateur trouvera
sil clique dessus.
Il nest pour autant pas utile dindiquer laction faire sur chaque bouton. Par exemple, il est
inutile de rappeler cliquer ici avant chaque intitul, en particulier dans une liste de liens, car
cela rend plus difficile le reprage du lien recherch parmi la liste.
Le roll over pour identifier les lments interactifs
Pour un usage la souris, en plus de distinguer visuellement les liens, il est possible de faire
apparaitre au roll-over un changement de style, et ventuellement des informations
complmentaires. Cette approche permet dattirer lattention par la dtection dun changement
dtat ou dun mouvement dans la page.
Par exemple, les liens sont souligns au passage de la souris et les boutons saffichent en
surbrillance.
Sur tablette et mobile, il nest pas possible dafficher de roll-over. Les informations disponibles
premire vue, sans interactions doivent donc suffire identifier les liens et boutons
immdiatement.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 36

Permettre lutilisateur de se reprer et de


revenir en arrire
Un utilisateur ne se dplace pas de faon linaire au sein dun site.

WWW.SMILE.FR

Il peut descendre dans une branche de larborescence tape par tape


Il peut basculer dune branche lautre par la navigation transverse
Il peut arriver immdiatement sur une page plus profonde du site sans passer par la page
daccueil

Il est donc important de permettre lutilisateur de se reprer dans le site et de rpondre ses
questions :

O suis-je ?
Quy a-t-il derrire moi ?
O puis-je aller en partant dici ?

Voici plusieurs moyens de rpondre ses questions.


Mise en vidence des entres de menu
Lorsque lutilisateur est dans une rubrique, les entres de menu associes doivent tre distingues
visuellement des autres. Il y a diffrentes faons de les identifier, dune puce discrte devant un
lien jusqu linversion de contraste sur les boutons.

La position de lutilisateur dans le site doit tre explicite, il ne doit pas avoir besoin de rechercher
activement cette information. La distinction des entres actives doit tre rapidement reprable,
en fonction des codes bien sur, mais aussi de la charge visuelle globale de la page.
Le fil dariane
Le fil dariane, aussi appel chemin de fer ou petit poucet, permet lutilisateur de retrouver la
trace de sa position au fil de sa navigation. Le fil dariane est cliquable, ce qui permet lutilisateur
de revenir en arrire ou de remonter dans larborescence.
Un fil dariane statique rattache la position actuelle de lutilisateur aux pages et rubriques de
niveau suprieur. Il prsente la branche de larchitecture dinformation dans laquelle lutilisateur

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 37

se trouve. Lutilisateur sen sert pour identifier sa position dans le site, et en consquence den
comprendre la structure. Il sy rfre lorsquil se sent perdu en particulier.

WWW.SMILE.FR

Un fil dariane dynamique restitue lutilisateur les tapes relles de son parcours. Lutilisateur
peut revenir en arrire par le mme chemin quil a emprunt.
Lutilisateur visualise les tapes qui lont amen au contenu quil consulte, plutt que le plan du
site. Ce type de fil dariane vite les ruptures de navigation et incomprhensions ventuelles lors
de navigation transverse. Il naide cependant pas lutilisateur comprendre la position dun
contenu dans larborescence dun site.
Les fils dariane dynamique sont plus adapts aux sites e-commerce, et aux contenus accessibles
via de la navigation par facettes. Dans ce cas le fil dariane permet de reprsenter les tapes dune
recherche plutt quun parcours.
Les boutons retours
Il est dusage courant sur les sites de proposer un bouton permettant de retourner en un clic la
page daccueil. Ce bouton peut tre prsent sous forme dune entre de menu accueil , ou par
le biais dune icne de maison par exemple.
Les utilisateurs ont galement pris lhabitude de cliquer sur le logo du site, traditionnellement
plac en haut gauche, ou tout visuel occupant cet espace.
Les sites internet prsentent rarement des boutons de type page prcdente de nos jours. Le
retour la page prcdente est trs bien gr par les navigateurs, et les utilisateurs ont pris
lhabitude de sen servir depuis de nombreuses annes. Dans la majorit des cas, il est donc inutile
de placer un bouton retour dans les pages dun site.
Des boutons de type retour aux rsultats de ma recherche sont toujours trs utiles pour
permettre de revenir non pas au formulaire de recherche, mais la liste de rsultats que
lutilisateur aura pralablement travers. Selon la faon dont la recherche sur le site est
implmente, il est possible daccder aux rsultats galement via un back navigateur, ce bouton
nest donc pas forcment indispensable. Il peut toutefois tre utile du point de vue de lutilisateur
pour lui suggrer cette possibilit de navigation.
Identification des lments de navigation par leur cohrence et regroupement
Afin de faciliter lapprentissage du site et la recherche dinformation, les lments de navigation
doivent tre regroups en un seul endroit, et prsents de faon homogne graphiquement, tout
en tant distincts des autres lments de la page, afin de facilement les distinguer et les trouver.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 38

Les lments de navigation doivent galement tre prsents dans les mmes zones et avec la
mme apparence sur lensemble des pages du site.

WWW.SMILE.FR

Navigation et menus principaux sur ordinateur


Position du menu principal sur ordinateur
Sur ordinateur, les menus sont attendus principalement dans lentte de la page, prsente horizontalement, ou verticalement en
colonne de gauche. Les zones o lutilisateur sattend trouver le
menu principal sont indiques en vert sur le schma ci-contre.
La position du menu conditionne lespace qui lui est rserv, en
largeur et en hauteur. Selon larborescence du site ou de
lapplication, un menu horizontal ou vertical peut tre prfrable.
Les menus se trouvent galement occasionnellement en colonne de
droite, ou en bas de page. Ces alternatives sont moins attendues et moins frquentes. Elles
prsentent des inconvnients en termes de visibilit et daccessibilit de la zone par le biais de la
souris, mais dautres arguments peuvent jouer en leur faveur : volont dinnover, cohrence avec
dautres supports de consultation ou applications de la mme source.
Bonne
visibilit

Bonne
Correspond une
accessibilit attente de
( la souris) l'utilisateur

Colonne de gauche

++

Colonne de droite

En-tte

++

++

Pied de page

Il est noter quune tendance sest maintenant largement rpandue : rendre un menu de
navigation fixe (c'est--dire que celui-ci reste coll dans la page). Cette astuce technologique
permet effectivement de conserver de faon toujours visible et rapidement accessible la
navigation principale du site. Une condition importante est dafficher un menu fixe occupant un
espace rduit afin laisser un espace de visualisation confortable pour les contenus de la page. Il ne

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 39

faut donc pas hsiter afficher une version allge dun menu fixe par rapport son apparence
initiale.

WWW.SMILE.FR

Menu vertical
Un menu vertical consiste prsenter les diffrentes entres les unes en dessous des autres sur
une colonne. Les diffrents niveaux de rubrique sont reprsents par des indentations,
traitements de couleurs ou puces.

Avantages

Lutilisateur peut facilement scanner


pour trouver une information
spcifique dans une liste prsente
verticalement
Le nombre dentres est flexible et
peut sadapter des arborescences
trs larges
Cette position permet de prsenter
jusqu 3 niveaux de profondeur
Distance minimale entre les zones
dynamiques

Inconvnients

Limite lespace disponible pour le


contenu en cur de page
Ne permet pas dafficher une 2eme
colonne de faon confortable
(typiquement, des remontes de bloc
et/ou des raccourcis)
Risque de perdre en clart du fait de la
flexibilit dans le cas ou larborescence
slargi de faon trop importante

Lors de lutilisation dun menu vertical, nous recommandons de se limiter trois niveaux de
rubriques en profondeur, et jusqu 9 rubriques en largeur.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 40

WWW.SMILE.FR

Menu horizontal
Les menus horizontaux fonctionnent trs bien sur deux niveaux de profondeur et un nombre de
rubriques limit un maximum de 5 7 items de largeur. Les entres de niveau 1 sont affiches
les unes ct des autres. Au clic, un second bandeau saffiche en dessous du premier pour
prsenter les rubriques de niveau infrieur.

Avantages

Le menu prend peu de place : le


contenu remonte dans la page et peut
occuper la largeur maximale disponible
Le menu est positionn dans une des
zones les plus visibles de la page
Laffichage est moins dense

Inconvnients

Laffichage horizontal limite le nombre


dentres affichables de faon lisible
Les libells doivent tre courts
Les zones dynamiques sont plus
loignes si lutilisateur a besoin de
basculer dune entre lautre ou sil
veut cliquer sur une entre du sous
menu

Il est possible de faire tenir jusqu 11 rubriques sur un menu horizontal, mme sil est prfrable
de ne pas dpasser 9 entres.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 41

Cette quantit dinformation sajoute cependant au dtriment de la lisibilit et de la visibilit des


rubriques : le texte doit tre largement compact et lutilisateur mettra plus de temps pour
identifier et choisir la rubrique la plus pertinente pour lui.
Contourner les limites dun menu horizontal
Pour aller au-del des deux niveaux de profondeur darborescence, il est possible dintercaler
diffrent niveaux de menu horizontaux en les sparant par des contenus ditoriaux ou des
bannires visuelles de contexte entre les menus.
Cela permet dattnuer la charge visuelle qui serait lie quatre niveaux de menus superposs,
tout en profitant de la largeur entire des pages pour prsenter les contenus.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 42

Sil est indispensable daller au-del de la limite en largeur, il existe nanmoins des solutions :

Afficher le menu sur deux lignes, au risque de crer de la confusion quant-au niveau
dinformation prsent sur la seconde ligne, que lutilisateur interprtera instinctivement
comme un niveau infrieur darborescence.
Afficher les entres supplmentaires en faisant dfiler le menu droite et gauche,
manuellement, au risque que lutilisateur ne voit pas les entres masques dans un
premier temps. Cette approche peut galement se retrouver sur mobile avec un
dfilement horizontal des entres de menu, bien que ce soit rare.
Afficher un plus comme tant la dernire entre, et faire apparaitre les entres
supplmentaires manquantes dans une liste verticale au clic sur le dernier onglet. L aussi,
les utilisateurs risquent de passer ct de ces rubriques, mais le fonctionnement se
dmocratise avec larrive des mobiles.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 43

Ces quelques exemples montrent quil est possible de rendre plus utilisable un site conu
initialement avec une navigation mal ajuste son arborescence. Cest gnralement lorsque les
contenus ont volu, et que le site nest pas encore en phase de refonte. Ces solutions
alternatives sont cependant loin dtre optimales.

WWW.SMILE.FR

Double menu et menu mixte


Jusquen 2011, il tait encore courant de voir des sites proposer les deux modes de navigation en
concurrence.
Un menu horizontal et un menu vertical prsentent la mme information. Cette pratique est
viter : la navigation occupe ainsi plus despace au dtriment du contenu. Au mieux, lutilisateur
nutilise quun des deux menus, ne voyant pas le second. Dans le pire des cas, lutilisateur se
sentira perdu, ne comprenant pas larticulation entre les deux menus.
Un menu horizontal et un menu vertical permettent daccder aux mmes contenus via des
arborescences diffrentes. Cette approche peut galement crer de la confusion selon son
implmentation, et amener lutilisateur se sentir perdu.

En cas de doute, croiser les statistiques de consultation


de votre site avec des tests utilisateurs permet de
clarifier les difficults lies la navigation puis de
proposer des solutions pragmatiques et efficaces.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 44

WWW.SMILE.FR

Combinaison dun menu horizontal et vertical. Il est toutefois possible de combiner les deux types
de menus pour sadapter une arborescence la fois profonde et large. Dans ce cas, un menu
horizontal sera mis en place pour les deux premiers niveaux de larborescence. A partir du
troisime niveau, un menu vertical apparait et permet de naviguer dans les niveaux 3 5 de
larborescence.

Interactions avec le menu


Pour accder au contenu, les menus prsentent sur ordinateur des interactions au clic et au survol.
Accs une page fille au clic : au clic sur une entre du menu, lutilisateur change de page et
arrive sur une page daccueil de la rubrique fille.
Disposer dune page daccueil pour les rubriques est une bonne pratique pour le rfrencement
(on parlera de landing page ou page datterrissage) et permet dorienter progressivement les
utilisateurs vers le contenu qui les intresse, par choix successifs.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 45

Avantages

WWW.SMILE.FR

Lutilisateur est guid par la


prsentation des diffrentes entres de
faon plus dtailles sur laccueil de
rubrique
Le site peut remonter des informations
plus pertinentes lutilisateur, sachant
dans quelle voie il sest engag sur le
site
Lutilisateur maitrise les pages quil
veut visiter ou non
Des descriptions plus pousses des
rubriques contribuent au
rfrencement du site

Inconvnients

Laccueil de rubrique constitue une


tape intermdiaire dans la navigation,
il est fondamental de dterminer si ce
passage oblig prsente de la valeur
aux utilisateurs ou non, en particulier
pour la suite de leurs parcours
Selon sa construction, laccueil de
rubrique peut crer une charge de
contribution supplmentaire, voir un
inutile doublon de contenus car ceux-ci
sont prsents dans des pages filles

Cas alternatif : au clic sur une entre du menu, lutilisateur arrive, par dfaut, sur la premire page
ou sous rubrique inclue dans la rubrique fille. La rubrique en elle-mme nest matrialise par
aucune page.
Ex : un site e-commerce propose une rubrique Homme , qui contient les sous rubriques
Chemises , Pantalons et Chaussures . Comme il nexiste pas de page Homme , cliquer
sur Homme affiche par dfaut la 1ere sous rubrique Chemises .
Ce type daccs est viter car il cr de la confusion chez lutilisateur. Le comportement requiert
dtre explicit trs clairement dans laffichage du menu. Cela permet toutefois un accs plus
rapide au contenu si la premire page contient linformation la plus pertinente parmi lensemble
des choix.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 46

Avantages

WWW.SMILE.FR

Accs direct la premire page de


niveau 3, le niveau 2 ntant pas
physiquement reprsent par un cran
intermdiaire

Inconvnients

Lutilisateur voit afficher une page dont


le titre et le contenu ne correspondent
pas au lien initial
La page est impose par dfaut et nest
probablement pas la plus pertinente
pour lui
Lutilisateur dispose seulement de la
navigation pour sorienter

Affichage dun menu au clic : au clic sur une rubrique, lutilisateur ne change pas de page, mais un
menu prsentant les sous rubriques apparait. Il ne change de page quau second clic.
Cette approche permet une interaction simplifie sur tactile et vite de charger une page
intermdiaire inutilement, conomisant la bande passante facture lutilisateur par la mme
occasion.
Avantages

Laffichage dun menu au clic vite


lapparition ventuellement non
dsire des survols
Cet affichage du menu est compatible
avec les interfaces tactiles

Inconvnients

Afficher le menu au clic rend plus


complexe et moins clair laccs des
landing pages ditorialises car il
faudra prsenter un lien en doublon
dans le menu, qui cette fois affichera la
dite landing page

Affichage dun menu droulant au survol : Lorsque lutilisateur passe sa souris au dessus dune
entre du menu, les sous rubriques saffichent dans une liste qui permet de pr-visualiser le
second niveau de menu.
Ce sous menu peut tre lui-mme horizontal ou vertical, et situ directement ct ou en dessous
de la rubrique slectionne. Son mode daffichage profite des mmes avantages que les menus
horizontaux et verticaux affichs. Lutilisateur peut ainsi choisir daccder directement une
rubrique de niveau 2, sans tape intermdiaire de changement de page. Il garde la possibilit
dafficher laccueil de la rubrique si la page existe, par un clic sur lintitul de la rubrique.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 47

Cette approche permet daccder de faon plus directe et efficace au contenu choisi et sadapte
bien aux utilisateurs experts et/ou qui savent ce quils cherchent. Les survols ne sont toutefois pas
utilisables sur les supports tactiles.
Avantages

WWW.SMILE.FR

Le menu au survol permet daccder en


un clic des contenus de niveau 2
Il donne une vue densemble du
contenu dune rubrique sans avoir
besoin de changer de page et rduit les
erreurs de navigation

Inconvnients

Un menu ayant une hauteur


importante peut rendre difficile laccs
aux dernires rubriques listes
De mme, un menu volumineux peut
tre difficile refermer car pour ce
faire, lutilisateur doit faire sortir son
pointeur de souris du menu
Le survol peut apparaitre de faon
intempestive lors de mouvements de
souris par-dessus le header, surtout si
celui occupe une place importante
Il nest pas utilisable avec des
interfaces tactiles et doit donc disposer
dune alternative dans tous les cas

Affichage de plusieurs niveaux de hirarchie dans un survol : il est possible dafficher un second
survol sur le ct du premier, la faon du classique menu Dmarrer sous Windows. Cette
approche est souvent difficile manipuler, car le survol risque de changer de sous rubrique ou
disparaitre si le mouvement de souris sort du champ. Les utilisateurs ont peu de patience face ce
genre de dsagrments et cela peut tre un motif de dcouragement et de fuite du site web.
Pour viter cela, il est possible de calculer langle de dplacement de la souris et dajuster le
comportement du survol en fonction. Cest le cas sur le site dAmazon par exemple. Cette
approche est toutefois rarement dveloppe sur internet car couteuse.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 48

Avantages

WWW.SMILE.FR

Lutilisateur peut accder en un clic


des rubriques de niveau 3 ou 4
Lutilisateur ne voit que les sous-sous
rubriques qui lintressent selon la
position de sa souris

Inconvnients

Lutilisateur risque de faire disparaitre


le menu sur lequel il veut cliquer en y
dplaant sa souris
Avec plusieurs niveaux de profondeur,
les survols deviennent rapidement
complexes lire

Affichage dun menu riche au survol : Lorsque lutilisateur passe sur une entre du menu, jusqu
deux niveaux darborescence supplmentaires sont affichs ct ou en dessous de lentre.
Les menus riches (nomms aussi mga menus ou menus XL) permettent aux utilisateurs daccder
en un clic une rubrique de niveau 3. Cela permet de bnficier dune meilleure vue densemble
des contenus de la rubrique, ce qui favorise lorientation de lutilisateur et lui permet de mieux
anticiper les erreurs ventuelles dans sa recherche dinformation. Il est galement possible dans
un menu riche de mettre en avant des contenus ou de proposer des raccourcis vers des contenus
spcifiques situs en pages profondes.
Avantages

Lutilisateur a une vision densemble


du contenu des rubriques pouvant
aller jusquau niveau 3, la demande
Lutilisateur ne risque pas de refermer
le menu par accident en essayant de
cliquer sur un lien
Il est possible de renforcer la visibilit
de certains contenus en affichant un
bloc de remontes dinformations
(offre spciale, dernier article, etc.)

Inconvnients

Lutilisateur risque dafficher le survol


par accident
Un menu de grande dimension peut
savrer pnible refermer
Lutilisateur risque de ne pas reprer
certaines entres dans un menu
particulirement charg (ce problme
tant plus accentu sur laxe vertical)

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 49

Tableau rcapitulatif
Efficacit et
rapidit
d'accs

Favorise le
Clart
rfrencement

Guidage

Compatible
interfaces
tactiles

Accueil de rubrique -

++

Page fille

Menu au clic

Menu au survol

Menu riche au
survol

++

La navigation sur mobile


Affichage du menu sur mobile.
Le fonctionnement le plus frquemment observ sur mobile pour naviguer
est laffichage dun menu au tap (tap : action tactile sur lcran) sur un
bouton. Les zones vertes du schma ci-contre indiquent les zones o
lutilisateur sattend le plus trouver laccs au menu : en haut de lcran,
gauche ou droite.
La position gauche, moins accessible, permet de rduire les erreurs
ventuelles daffichage du menu. La position droite est davantage
accessible dans la majorit des cas (usage du pouce pour la population
droitire, majoritaire).
Lorsque lutilisateur interagit avec le bouton menu , ce dernier peut
safficher de plusieurs faons.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 50

Avantages

WWW.SMILE.FR

Inconvnients

Les boutons visibles guident


lutilisateur dans lutilisation du menu
La position haute des boutons vite de
les activer par accident
Les utilisateurs sont habitus ce
fonctionnement

Selon les modles de tlphones, les


boutons sont plus ou moins faciles
daccs. Un accs trop difficile pose
autant de problmes quun accs trop
facile susceptible de provoquer des
erreurs

Alternative : affichage du menu au swipe


Une alternative au bouton est laffichage du menu suite un geste
prdfini. Il est ainsi possible de faire apparaitre des menus au
swipe depuis le ct ou le haut de lcran. Cette approche est plutt
attendue sur la gauche de lcran. Le swipe a lavantage de
permettre dafficher un menu quelle que soit la position du doigt
sur laxe vertical. Le swipe, pour un utilisateur plus expert est un
geste quil effectuera de faon naturelle, et celui ci sattend ce que
le geste soit pris en compte.
Le swipe prsente cependant des inconvnients notables si cest le
seul moyen daccder au menu :

Labsence dun bouton oblige lutilisateur faire appel sa


mmoire pour ouvrir le menu, si aucun indicateur visuel ne lui rappelle son existence. Cela
implique une charge mentale plus leve.
Les personnes peu habitues lusage des terminaux mobiles ont bien plus de mal
apprendre et retenir ce type dinteraction, plus forte raison sans indication visuelle, et il
est fortement recommand de conserver un bouton explicite pour ce type de public, qui
proposera linteraction en doublon.
Le swipe est dj utilis nativement sur certaines fonctions du systme dexploitation,
notamment pour faire apparaitre des raccourcis du tlphone en effectuant ce geste de
haut en bas. Il est galement dj utilis de gauche droite avec certaines options,
comme la possibilit dutiliser plusieurs applications en mme temps. A terme, recourir au
swipe seul peut donc susciter des incohrences et erreurs de manipulation si lusage qui
en est fait nest pas consistant sur un mme tlphone.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 51

WWW.SMILE.FR

Une dclinaison de ce principe consiste introduire un effet : au tap sur le bouton menu,
ce dernier se dplie vers la droite pour entrer dans lespace visible. Il pousse le contenu
hors champ.

Avantages

Lutilisateur peut utiliser nimporte


quelle zone de son tlphone pour
afficher le menu, laction est donc plus
confortable et plus facile.
Le risque dafficher le menu par
accident est faible car il requiert un
geste prcis

Inconvnients

Les novices ne pourront pas deviner ce


fonctionnement et ont besoin dun
didacticiel
Les utilisateurs ne sont pas guids et
doivent faire appel leur mmoire
pour accder au menu. Si la frquence
dusage de lapplication est faible, cela
posera un problme majeur.
Le geste peut entrer en conflit avec des
fonctionnalits natives du tlphone
qui lutilisent diffremment

Le bouton pointe sur une ancre en pied de page : Au tap sur le bouton menu, la page scrolle vers
une ancre situe en bas de page. Le pied de page contient le menu, qui est ainsi accessible.
Cette approche a lavantage de faciliter la navigation en fin de consultation dun contenu : les
utilisateurs intresss arriveront en fin de lecture sur le menu de faon naturelle, sans besoin de
remonter au dbut de la page.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 52

Avantages

A la fin de la consultation, lutilisateur


retombe naturellement sur le menu
Le menu sadapte des arborescences
relativement larges car sa zone de
visualisation na pas de limitation

Inconvnients

Le menu sadapte mal plus de deux


niveaux de profondeur
Le menu est peu accessible en cours
de consultation dune page longue :
lutilisateur devra scroller
intensivement quoi quil arrive (en haut
ou en bas de page)

Le menu est directement visible en haut de chaque page : larrive sur le site, lutilisateur voit
directement le menu, affich par dfaut. Le menu peut tre affich directement de faon verticale
ou horizontale et habill graphiquement ou rester sobre. En fonction du nombre dentres, de la
longueur des libells et de la prsence dun second niveau darborescence ou non, lune de ces
approches sera plus approprie.
Lutilisateur sait ainsi trs rapidement ce quil pourra trouver sur le site et na pas chercher la
navigation. Cette approche est souvent utilise sur des sites responsives car elle est facile
implmenter et ne demande pas de comportement complexe spcifique au mobile.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 53

Cela oblige cependant lutilisateur sauter le menu en faisant systmatiquement dfiler la


page jusquau contenu et ne lui permet pas de confirmer rapidement quil est bien arriv sur la
page souhaite. Le design joue galement beaucoup sur la comprhension de ce systme : un
menu horizontal prsent sur plusieurs lignes doit tre ralis de sorte que lutilisateur
comprenne quil sagit bien de deux lignes dun mme menu, et non de niveaux hirarchiques.
Le bouton amne sur une ancre au dessus de la page : Au tap sur le bouton menu, la page scrolle
vers une ancre situe au dessus de len-tte.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 54

Lavantage de cette approche est quau chargement de la page, lutilisateur dispose soit dun
menu graphiquement habill pour sorienter, soit accde directement au contenu via une ancre : il
a simplement besoin de scroller vers le haut pour retrouver la navigation.
Avantages

Le menu en haut de page constitue un


cran dintroduction en soi qui permet
dorienter les utilisateurs efficacement,
quelle que soit leur page dentre

Inconvnients

Cette approche ne sadapte pas bien


aux arborescences larges et / ou
profondes
Lutilisateur risque de rechercher le
contenu sur lequel il se trouve dj
lorsquil vient dun site externe

Le menu saffiche par-dessus le contenu : Au tap sur le bouton menu, ce dernier saffiche pardessus le contenu et masque ce dernier. Lutilisateur peut ainsi choisir tout moment de voir le
contenu ou le menu et de basculer facilement entre les deux.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 55

Avantages

WWW.SMILE.FR

Lutilisateur a moins dinformations


traiter car lorsquil ouvre le menu, le
contenu est cach entirement ou
opacifi
Cette approche est familire aux
utilisateurs car proche dun
fonctionnement sur ordinateur
Le menu sadapte des arborescences
relativement larges

Inconvnients

Cette approche ne sadapte pas bien


aux arborescences profondes

Le menu saffiche entre len-tte et le contenu, en poussant le contenu vers le bas : Au tap sur le
bouton menu, ce dernier repousse le contenu de la page vers le bas et se dplie entre le contenu
et len-tte de la page.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 56

Avantages

WWW.SMILE.FR

Inconvnients

Le contenu reste visible et lutilisateur


na pas besoin de refermer le menu sil
dcide finalement de lire la page

Tableau rcapitulatif
Guidage de
lutilisateur

Optimisation
de lespace

Ce menu ne sadapte pas bien aux


arborescences profondes ou larges

Poursuite de la
navigation

Facilit de
comprhension
et prservation
du contexte

Menu visible en
haut de page

Menu au clic insr


entre le header et
les contenus

Menu au clic pardessus la page

Menu au swipe

++

Ancre en pied de
page

++

Ancre au dessus de
la page

Principes de navigation sur mobile


Selon larborescence, il est important de prsenter une navigation adapte et cohrente.
Accs direct des pages intrieures, accueil de rubriques
Le menu le plus simple comporte un seul niveau et amne lutilisateur une page intrieure, soit
directement un contenu riche ou une liste de contenus, soit une page daccueil de rubrique
incluant la liste de ses sous rubriques en cur de page.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 57

Ce type dapproche permet de donner un premier accs trs rapide du contenu pour des
arborescences simples, mais requiert gnralement un niveau complmentaire de navigation pour
grer un second ou troisime niveau darborescence. Elle sadapte le mieux des arborescences
larges, mais sans grande profondeur.

WWW.SMILE.FR

Menu en plier-dplier deux niveaux


Quel que soit le type de menu choisi, il est possible de facilement grer deux niveaux
darborescence en utilisant des plier-dplier pour accder au niveau infrieur, sans passer par des
pages daccueil de rubrique.

Avantages

Permet daccder directement des


pages classes en niveau 2 de
larborescence
Fonctionnement classique bien connu
et compris par les internautes

Inconvnients

Absence dun accueil de rubriques qui


prsenterait avantageusement des
contenus progressivement plus prcis
(risque de guidage utilisateur
insuffisant)

Il est galement possible de proposer deux actions alternatives sur chaque entre de rubrique :
lune qui permet de dplier le niveau 2, lautre qui permet dafficher la page daccueil de rubrique.
Lapproche consiste distinguer deux zones sur chaque entre de rubrique, dont laction est
explicite.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 58

WWW.SMILE.FR

Dans lexemple ci-dessous, si lutilisateur touche la partie gauche de la ligne, il ouvrira une page
daccueil associe la rubrique. Par contre, sil touche le chevron situ sur la droite, il dpliera les
sous rubriques. Une sparation visuelle claire entre les deux zones est essentielle pour faciliter la
comprhension.

Le menu droulant
Un menu droulant permet de basculer de faon simple et explicite entre diffrentes catgories de
mme niveau. Par dfaut, le menu occupe lentre active. Au tap sur le menu, les autres choix
apparaissent en dessous de celui actif et lutilisateur peut changer dentre. Au chargement de la
page, le menu montre lentre active.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 59

Ce type de menu est plus frquent en page intrieure pour naviguer entre des pages de bas
niveau. Cest une option lgante pour grer un niveau supplmentaire de navigation,
complmentaire la navigation principale.
Ce type de menu sadapte galement sur deux niveaux darborescence, voir plus en proposant
plusieurs instances de menus diffrent niveaux : un premier menu permet daccder aux niveaux
1 et 2 de larborescence. Un second menu permet daccder aux niveaux 3 et 4.
Avantages

Sadapte bien aux arborescences larges


et profondes
Fonctionnement de chaque menu
individuel simple et connu des
utilisateurs

Inconvnients

Sur des arborescences profondes, la


prsentation de diffrent menus
spars, mme similaires, peut crer
de la confusion chez lutilisateur si la
navigation est trop fragmente
Le menu droulant tant rserv une
navigation secondaire, lutilisateur
peut ne pas sattendre son existence
et ne pas le reprer

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 60

Le menu hamburger
Un menu hamburger est un menu qui se dplie par-dessus lui-mme chaque choix, jusquau
niveau le plus fin. Il se compose alors de couches qui saccumulent la manire dun hamburger.

WWW.SMILE.FR

La grande force de ce type de menu est quil permet doffrir un mode de navigation cohrent
quelle que soit la profondeur de larborescence, sans rupture de navigation.
Comme pour le menu en plier-dplier, il est possible de dcouper chaque entre en zones pour
permettre lutilisateur de dcider sil veut afficher une page ou descendre plus profondment
dans le menu.
Comme il naffiche quun niveau la fois, il permet galement de revenir en arrire via un lien de
retour plac sur la 1ere ligne du menu. Dans le cas prsent, le bouton de retour nest pas le mme
que celui du navigateur, car il permet simplement de remonter dun cran dans larborescence du
menu. Il est galement recommand dy faire figurer un fil dAriane pour rappeler lutilisateur sa
position dans le menu.

Avantages

Sadapte bien des arborescences


larges et profondes
Adaptable la fois sur mobile, tablette
et ordinateur

Inconvnients

Risque de perdre lutilisateur dans une


arborescence trop complexe
La prsentation partielle dune
arborescence est plus sujette erreurs
et hsitations

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 61

WWW.SMILE.FR

Tableau rcapitulatif
Largeur
Nombre de
darborescence niveaux de
recommande profondeur
recommands

Guidage et
prservation
du contexte

Homognit
de la
navigation

Accs au contenu
en un clic

2 9 entres

1 niveau

Pliers-dpliers

2 7 entres

2 niveaux

++

Menu droulant

2 9 entres

1 niveau

Menu hamburger

2 9 entres

5 6 niveaux

++

NAVIGATION DE PAGE A
PAGE ET TYPES DE GABARITS

Pages daccueil / dorientation / datterrissage


Lutilisateur a recours naturellement aux menus lorsquil sait ce quil cherche. Un utilisateur qui a
besoin de plus de guidage doit pouvoir bnficier de pages intermdiaires dorientation et de liste
de contenu pour laider dans ses choix. Ces pages peuvent prendre plusieurs formes selon les
contenus et objectifs spcifiques de chaque site.
Page structure
Ce type de mise en page permet de hirarchiser
linformation en fonction des besoins des
utilisateurs et des objectifs du site. Ce format est
de nos jours le plus rpandu pour les pages
daccueil et de rubrique. Elle est compose de
zones prdfinies permettant de faire remonter
les contenus les plus pertinents. Les premiers
contenus prsents sont souvent intgrs dans
des grandes zones visuelles, et les contenus plus
secondaires se retrouvent plus bas dans la page.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 62

WWW.SMILE.FR

Idalement, ces contenus correspondent aux contenus les plus pertinents, les plus demands et
les plus rcents. Cela signifie que lorsque ce gabarit est employ pour un accueil de rubrique, il ne
cherche pas forcment reprsenter toutes les sous-rubriques de faon exhaustive.

Avantages

Hirarchisation des contenus selon les


besoins des utilisateurs et les enjeux de
communication ou de vente
Donne des accs rapides vers des pages
de niveau profond sans tapes
intermdiaires

Inconvnients

Tous les contenus ne sont pas


ncessairement reprsents : requiert
la prsence visible dun menu de
navigation
Si les contenus choisis ne sont pas
pertinents pour les utilisateurs, ceux ci
ne percevront pas la relle valeur
ajoute du site et sen retourneront
immdiatement

Page en mosaque
Les pages dorientation en mosaque sattachent
gnralement prsenter lensemble des sous
rubriques de faon exhaustive, avec ou sans
mise en avant de rubriques phares.
Linformation pertinente pour les utilisateurs

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 63

WWW.SMILE.FR

peut tre mise en avant, mais la page prsente lensemble des contenus disponibles.

Avantages

Alternative complte la navigation


par un menu
Donne de la visibilit lensemble des
rubriques
Contribue un aspect vitrine plaisant
pour lutilisateur
La prsentation plus homogne permet
de mieux sorienter dans les choix
proposs

Inconvnients

Toutes les sous rubriques sont


prsentes, ce qui rajoute du bruit
dans le contexte de recherche dune
information prcise.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 64

Pages de listes
Les pages de listes peuvent tre utilises la fois pour orienter les utilisateurs parmi un choix de
sous rubriques, et pour prsenter lensemble des contenus prsents au sein dune rubrique. Selon
la nature du site et des contenus, les listes pourront se prsenter de faon plus ou moins visuelle
et informative.

WWW.SMILE.FR

Liste en lignes
La prsentation en ligne des items de liste facilite le parcours vertical des
diffrentes entres. Visuellement, il sera plus facile pour lutilisateur de
reprer le texte de lentre qui lintresse. Selon le type dinformation, la
liste peut se composer dune simple srie de liens ou dentres
structures plus complexes comprenant par exemple un titre, un chap,
un visuel, etc.
On trouve frquemment ce type de liste pour prsenter des actualits ou
des fichiers, car cest le format qui facilite le plus le reprage du titre, qui
intressera linternaute et lamnera cliquer.
Ce format est galement adapt lorsque lutilisateur a besoin de comparer diffrents produits : si
la liste prsente les mmes informations les unes sous les autres pour diffrent produits (par
exemple, des spcifications techniques, dimensions, etc.) Lutilisateur a plus de facilit
rechercher une information principale, puis vrifier son choix via des informations secondaires
avant de poursuivre sa navigation.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 65

Liste en vignettes
La prsentation dune liste sous forme de vignettes facilite la
reconnaissance visuelle dimages, logos ou pictogrammes. Ce type de
liste est particulirement adapt lorsque les utilisateurs ne recherchent
pas quelque chose par son nom (texte), mais plutt par son apparence
(visuelle). Cela donne un aspect vitrine qui donne galement une vision
densemble des entres plus complte quavec une vue ligne par ligne.
On trouve typiquement ce type de liste sur les sites e-commerce qui
demandent un choix bas sur lesthtique du produit, par exemple des
vtements.
Cest galement appropri dans les sites de contenu prsentant des
contenus visuels, tels que des galeries de photos ou de vidos, pour lesquelles le visuel de
couverture joue autant que le titre dans le choix de consultation de lutilisateur final.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 66

Liste fluide
Les listes fluides ont fait leur apparition avec
larrive de pinterest notamment. Ce type de liste
permet laffichage de contenus htrognes en
divisant la page en colonnes, et en ajustant la
position de la hauteur des contenus selon leur
structure. Ce type de liste permet de mlanger de
faon homogne des entres avec ou sans visuel,
avec des visuels de hauteur htrogne, avec ou
sans description, avec un titre plus ou moins
long
Cette approche permet galement de facilement intgrer des listes en responsive web design, en
ajustant le nombre de colonnes affiches cte cte selon le support de consultation. Par
exemple, sur ordinateur, la liste sera prsente en 4 colonnes, sur 2 colonnes sur tablette, et sur
une seule colonne sur mobile.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 67

Elle est trs utilise pour les sites agglomrant des articles ou ressources htrognes, pour les
sites de type magazines.
Lhabillage graphique de ces listes est important pour guider le regard de lutilisateur et mettre en
avant certaines entres. Cette approche est toutefois moins efficace quune liste en lignes pour
prsenter des contenus parmi lesquels lutilisateur cherche une entre prcise.
Liste sous forme de tableau
Une liste de contenus peut galement tre prsente sous forme de tableau, si la quantit
dinformation prsenter dans chaque entre de liste nest pas trop importante. En effet, il faut
limiter le nombre de colonnes en fonction de la longueur des contenus dans chacune delles afin
que le tableau reste lisible.
La structure en colonnes permet lutilisateur de comparer trs facilement les informations entre
les diffrentes lignes du tableau, mais aussi de rechercher linformation par nimporte quelle
dimension, sans que le systme mette en avant une information par dfaut.
La prsentation sous forme de tableau permet de proposer aux utilisateurs des filtres et tris sur
chaque colonne si ncessaire.
Cette approche est cependant juge moins attrayante que les listes classiques. Elle sapplique
mieux aux applications mtiers, qui demandent une activit de recherche complexe. On peut
toutefois lappliquer galement au grand public (Exemple : comparateurs de sites), ou des sites
B2B qui donnent des informations normes ou associes des rgulations.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 68

Format des cellules

WWW.SMILE.FR

Pour faciliter la lecture dun tableau, le format des cellules dpend de leur contenu. Un texte,
libell ou des noms doivent tre aligns gauche pour faciliter la lecture lcran. Des
informations normes, de longueur fixe, comme les dates, numros clients, numros de
tlphones doivent tre centrs. Enfin, les informations numriques, tels que les nombres, prix,
ges, doivent tre ferrs droite pour faciliter la comparaison des valeurs.

Pagination des listes


Lorsquun utilisateur consulte une liste et recherche une information, il a besoin de savoir o il se
trouve. Comme pour la position dans le site, la position dans la liste de contenus va laider
atteindre son objectif. Il a besoin de connaitre le nombre total dlments et sa position dans la
liste. En termes dinteraction, il a besoin de pouvoir naviguer entre les diffrents items de la liste,
mais galement daller directement au premier ou au dernier. Cette information peut se compter
en nombre de pages ou en nombre dentres.
Nombre de pages
Prsenter le nombre de pages doit tre simple et explicite.. Lapproche la plus efficace consiste
afficher 5 pages les plus proches de celle en cours de consultation, plus la premire et la dernire.

Il est possible dy associer des liens textuels pour accder aux pages prcdentes et suivantes,
mais aussi la premire et dernire page. Ces liens peuvent galement tre prsents sous forme
dicnes.
Nombre dlments
Il est galement possible dafficher le nombre total dlments lists. Au lieu des pages, on
indiquera alors le rang des lments observs. Dans cette approche, plutt que des liens spars
vers chaque sous ensemble, on prfrera prsenter la position avec un menu droulant
permettant de basculer plus bas ou haut, nimporte o dans la liste. Le nombre total dlment
doit tre rappel.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 69

Cette approche peut galement proposer des liens suivant et prcdent, premier et dernier. Dans
lexemple ci-dessus, ils sont reprsents sous forme dicnes.

WWW.SMILE.FR

Scroll infini
Avoir une liste avec scroll infini est une mthode de
navigation dans une liste, mais sans pagination. Lorsque
lutilisateur arrive la fin de la portion affiche de la liste, la
suite est charge automatiquement et il peut continuer
scroller vers le bas. La liste semble donc infinie.
Cette mthode a lavantage de prsenter linformation
suivante sans que lutilisateur ait besoin de la demander, au
moment o il en a besoin.
Selon le dispositif de lutilisateur, cette approche a
cependant galement des inconvnients.
Lutilisateur a plus de mal savoir o il se situe dans les
rsultats, car mme si le numro de la page est indiqu entre les items de liste, lutilisateur doit le
plus frquemment se rfrer la position de sa barre de scroll pour savoir o il se situe dans la
page. Comme la hauteur de la page varie, cette information est relative et change rgulirement.
Cest dautant plus gnant que les navigateurs modernes ont tendance masquer la barre de scroll
lorsquaucun scroll nest actif.
Par ailleurs, il arrive frquemment que lutilisateur saute un endroit non dsir de la liste sans le
vouloir en scrollant vers le bas, et se retrouve bien plus bas quil ne le voudrait.
De plus, un utilisateur qui veut retrouver un contenu quil a trouv une premire fois ne pourra
pas sappuyer sur sa position pour le retrouver plus facilement : il ne pourra pas se rappeler que
linformation tait en page 5 par exemple.
A la demande
Le chargement dentres supplmentaires peut galement tre dclench par un bouton en bas
de page, plutt quau scroll de faon automatique. Cela permet lutilisateur de mieux contrler
laffichage de la liste et dviter le problme des sauts intempestifs lamenant trop bas dans la
liste. Il peut galement sappuyer sur le nombre de clics pour retrouver des informations une
seconde fois.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 70

Pagination ou scroll infini / la demande ?


Le principe de scroll infini / la demande avec des entres complmentaires est intressant pour
les contenus qui nont pas vocation tre recherchs de faon spcifique aprs coup. Par
exemple, prsenter des actualits rcentes et remonter dans le temps a du sens.
Peu de personnes vont sintresser aux actualits prsentes en page 15 moins de savoir ce quils
y trouveront. Hors, si les actualits ont une frquence de publication leve, il devient illusoire de
rechercher un contenu initialement situ en page 15, car il y a de fortes chances que celui ci soit
dj en page 18 entre temps. Dans ce cas, une approche progressive est pertinente.
Filtres et tris sur la liste
Si la liste prsente de nombreuses entres, lajout de possibilits de filtres et tris permet
lutilisateur daccder plus facilement et rapidement aux entres pertinentes pour lui.
Actions unitaires sur des entres de liste
Les listes ne servent pas seulement naviguer. Les utilisateurs ont besoin deffectuer des actions
sur les diffrentes entres de la liste : diter, supprimer, tlcharger des fichiers, etc. Cest le cas
dans les applications mtiers, mais galement dans les sites de contenu mtiers, des annuaires en
ligne, etc.
Les actions disponibles sur une entre de liste doivent tre regroupes au mme endroit, pour
viter lutilisateur deffectuer de grands mouvements de souris. En consquence, ils sont souvent
placs en ligne droite ou gauche de la liste.
Position des actions

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 71

La position gauche permet de les rendre plus visibles, car elles sont positionnes trs proche de
lendroit o lutilisateur porte son regard pour lire les entres de la liste. Cependant, cette position
encombre le champ visuel de lutilisateur et peut provoquer des erreurs de clics.

WWW.SMILE.FR

La position droite cre moins de bruit pour lutilisateur, qui peut plus facilement se concentrer
sur les intituls des entres, mais la position droite est moins accessible la souris.
Sur tablette et mobile, ces constats sinversent : la position droite est plus sujette erreurs car
elle se situe dans une zone plus accessible sur les interfaces tactiles (une fois de plus, lusage du
pouce pour la population droitire). La position gauche est moins accessible, mais moins sujette
erreurs.
Le type, la criticit des actions et le support dutilisation permettront de faire le bon choix, entre
une position gauche ou une position droite.
Actions sous forme dicnes ou de boutons ?
Si le site propose peu dactions et sadresse plutt des utilisateurs occasionnels, personnes ges
ou novices, alors les actions peuvent tre reprsentes sous forme de liens textuels ou de boutons
contenant un libell explicite.
Si le site sadresse plutt des utilisateurs rguliers, experts ou que les actions disponibles sont
nombreuses, il est prfrable de les prsenter sous forme dicnes, au moins les fonctions
secondaires ou de support. Le choix des icnes est alors important pour assurer la comprhension
de laction implique. Pour les clarifier, une info bulle au survol permet lutilisateur de vrifier le
sens de licne. Cette information ne sera par contre pas disponible sur des interfaces tactiles.
Visibilit des actions
Les actions peuvent tre visibles de faon constante : par exemple, la fin de chaque ligne, une
srie dicnes permet dditer, de copier ou de supprimer une entre de ligne. Cela cre une
mosaque dicnes qui charge visuellement la page, mais prsente lavantage dtre tout fait
explicite.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 72

Pour rduire la charge visuelle de la page, il est possible de griser les diffrentes icnes et de ne
passer en couleurs que celles de la ligne sur laquelle lutilisateur pointe sa souris. Cette approche
permet de rduire les erreurs de clics intervenant sur la mauvaise ligne. De plus, le feedback visuel
intervenant lors du survol rendra les icones davantage visibles.

Il est galement possible de ne pas afficher les icnes sur lensemble des lignes, mais seulement
sur la ligne sur laquelle lutilisateur pointe sa souris. La charge visuelle est galement rduite de
faon significative. Cette approche implique toutefois de conserver un espace vide en lieu et place
des actions, ce qui peut introduire un problme de cohrence visuelle. De plus, elle force
lutilisateur faire appel sa mmoire et rechercher les boutons en passant sa souris dessus. Les
rgles daffichage des icones doivent donc tre soigneusement dfinies afin que celles-ci
apparaisse au moment ou lutilisateur en a justement besoin.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 73

Pour les interfaces tactiles, il est galement possible de faire apparaitre les boutons
individuellement sur chaque entre, au tap sur la ligne dsire. Dans ce cas, lutilisateur a besoin
deffectuer deux actions au lieu dune.

Quel que soit le support, il faut prter attention la taille des boutons dactions : ils doivent tre
suffisamment grands pour viter les erreurs et rester visibles. La souris est plus prcise que le
doigt, il faudra donc une taille plus grande sur tablette et mobile.. La taille permet aussi de saisir
plus facilement le symbole et donc le sens des actions : elle est donc tout aussi importante pour la
perception et comprhension que pour linteraction.
Actions de masse sur des entres de liste
Lutilisateur peut avoir besoin de raliser la mme action sur plusieurs entres dune liste, par
exemple, archiver un ensemble de contenus obsoltes, renouveler des prlvements passs en
impay, valider des dossiers de candidature, identifier des produits acheter comme des cadeaux.
Slection ditems de la liste

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 74

WWW.SMILE.FR

Lorsquil est ncessaire de raliser des actions sur plusieurs entres de liste, la norme est de
prsenter devant chaque entre de liste une case cocher. Cette case permet dindiquer si laction
doit sappliquer ou non lentre. Ces cases cocher sont prsenter sur la gauche de la liste,
mme si les actions unitaires se trouvent sur la droite.

Si lentre nest pas cliquable, alors il est pertinent de pouvoir cocher la case en cliquant nimporte
o sur la ligne.
Lorsquune ligne est slectionne, il est important de lidentifier comme telle. Une case cocher
est explicite, mais un style spcifique sur lensemble de la ligne est un feedback bien plus fort et
facilite davantage son reprage visuel, surtout si lutilisateur est amen pour une raison ou une
autre monter et descendre dans une liste longue

Un bouton slectionner tout facilite linteraction de lutilisateur sil doit agir sur la majorit des
entres, par exemple aprs avoir effectu une recherche pour ne voir dans sa liste que ce qui
lintresse.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 75

Il faut alors faire attention prvoir une slection de masse cohrente : slectionner tout peut
sappliquer :

La portion visible de la liste : dans ce cas, lutilisateur a besoin de traiter individuellement


chaque page de la liste
Lensemble des lments inclus dans la liste : lutilisateur peut traiter toutes les pages en
une action, mais il ne sera pas certain des items qui sont inclus. Cela peut gnrer des
erreurs de manipulation.
Tous les lments indpendamment de laffichage et du filtrage de la liste. Cette approche
peut tre pertinente mais les erreurs sont trs frquentes si ce nest pas clair pour
lutilisateur. Cest galement frustrant si lutilisateur a fait une recherche pralable sur les
entres qui lintressent et saperoit aprs coup que ctait inutile. Dans le cas dun effet
sur tous les lments dune liste, il est prfrable de proposer un bouton indpendant et
autonome de type valider touts

Il est donc prfrable dutiliser un libell explicite si plusieurs options sont proposes:

Slectionner tout sapplique la portion visible de la liste


Slectionner tous les rsultats de recherche

Si une action doit sappliquer toute la base, un message de confirmation peut viter les erreurs
graves, en faisant prendre conscience lutilisateur de la consquence de son action de slection.
Un rappel du nombre ditems slectionns permet lutilisateur de se rendre compte derreurs
ventuelles. Si laffichage comprend 10 lments par page et quau moment dappliquer laction,
lutilisateur lit 246 lments slectionns , il pourra se rendre compte dune erreur ventuelle
et lviter.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 76

WWW.SMILE.FR

Choix de laction effectuer sur la liste


Une fois les items de liste slectionns, le choix de laction appliquer dessus peut se faire via des
boutons spars ou via un menu droulant.

Les boutons spars permettent dafficher de faon immdiate les diffrentes actions disponibles.
Les boutons peuvent galement tre accompagns dicnes, ce qui permet lutilisateur de faire
le lien entre les actions unitaires et les actions de masse. Il peut ainsi les reconnaitre visuellement
et les utiliser sans avoir besoin de lire le libell du bouton chaque fois. La prsence de boutons
permet galement de mettre en avant une action par dfaut, en la faisant ressortir visuellement.
Le menu droulant permet de prsenter un plus grand nombre dactions de faon compacte, sans
occuper beaucoup despace lcran, donc sans surcharger visuellement la page. Le menu
droulant est galement plus flexible : il permet dafficher un nombre variable dactions selon la
slection ou les droits de lutilisateur, sans impacter la mise en page. Lutilisateur perd toutefois la
vision densemble des actions ralisables en masse sur la liste.
Selon le risque derreur et le style du menu droulant, il est possible dappliquer laction
immdiatement au changement du choix, ou aprs validation par un bouton.
Position des actions en masse avec slection
Lorsque lutilisateur doit raliser des actions en masse, il na pas la mme logique dactivit selon
les lments auxquels laction sapplique.
Un utilisateur qui doit slectionner les items de liste affects devra dans tous les cas parcourir la
liste avant de choisir son action. Prsenter les actions en bas de la liste permet de les rendre
accessible au moment o il en a besoin : aprs avoir slectionn les items de la liste. Prsenter les
actions au dessus de la liste permet toutefois de prendre connaissance des actions possibles avant
de faire une slection. Cela force ensuite lutilisateur remonter au dessus de la liste pour valider
une action aprs sa slection. Une alternative consiste afficher les actions en haut et en bas, en
doublon.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 77

WWW.SMILE.FR

Il est galement possible de faire figurer les actions dans une barre fixe, ce qui vite lutilisateur
de chercher les actions, que ce soit au dessus ou en dessous de la liste : elles seront visibles tout
moment et ne demandent donc aucun effort lutilisateur. Elles occupent toutefois un peu
despace sur la page, ce qui peut poser problme sur les plus petits appareils et les rsolutions
basses. Lorsque les actions sappliquent lensemble de la liste, un rsultat de recherche ou
lensemble de la base, il convient de les prsenter au dessus de la liste. Si la recherche influence
les items impacts, lutilisateur le comprend plus facilement si la slection se trouve en dessous ou
droite de la recherche.

Pop up, pop out, pop in : o ouvrir les pages


cibles ?
Au clic sur un lien, lors de la navigation, o faut-il ouvrir la nouvelle page ? Cette question se pose
de faon rcurrente depuis longtemps. De nombreux choix sont possibles, mais tous ne sont pas
quivalents.
Ouverture dans la mme fentre
Le comportement par dfaut de tout lien devrait tre de souvrir dans la mme fentre. Cela
permet lutilisateur de mieux contrler sa navigation. En effet, les utilisateurs savent en grande
majorit ouvrir un nouvel onglet sils le dsirent et connaissent mme parfois les raccourcis
claviers pour cela.
Cela permet galement de bnficier de la fonctionnalit retour du navigateur.
Nouvelle fentre, nouvel onglet : le lien souvre dans une nouvelle fentre ou un nouvel onglet.
Louverture de liens dans un nouvel onglet ou une nouvelle fentre est utilis pour que les
utilisateurs ne perdent pas la page sur laquelle ils se trouvaient, soit parce que le lien pointe vers
un site tiers, soit parce que la page est considre importante. Si lutilisateur navigue longtemps
sur le site tiers, il retrouvera la page dorigine telle quil la laisse.
Mais si lutilisateur essaye de revenir la page prcdente, il ny arrivera pas avec le bouton retour
du navigateur. Sur mobile, cela peut signifier que la page dorigine est considre perdue, car la
gestion des onglets nest pas aussi explicite que sur ordinateur : en effet, les onglets inactifs ne
sont pas visibles si lutilisateur naffiche pas volontairement la liste.
Louverture dans une nouvelle fentre ou onglet peut tre approprie ponctuellement, si le lien
pointe sur un site externe ou vers un espace scuris. Il faut toutefois veiller signaler ce
comportement par un indicateur visuel pour que lutilisateur puisse lanticiper.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 78

Gnralement, une flche indique ce comportement.

WWW.SMILE.FR

Les pop up : ou fentre modale : le lien souvre dans une fentre par-dessus la fentre actuelle.
Trs utilises pour afficher des publicits intrusives, les pop-ups sont en consquence bloques
par de nombreux internautes. Le navigateur permettant de consulter les pages internet demande
donc aux utilisateurs de confirmer avant ouverture quils acceptent de lafficher. En consquence,
de nombreux utilisateurs ne les voient pas.

Pop in
Egalement appele fancy box ou light box (par abus de langage), la pop in permet dafficher un
contenu par-dessus la page web, dans la mme fentre. Ce comportement est frquemment
utilis. Des lightbox permettent de solliciter des actions sociales ou engageantes pour lutilisateur.
Elles servent galement confirmer une action, par exemple, un ajout au panier, ou pousser une
alerte. Enfin, elles permettent de recueillir des informations complmentaires avant de valider une
action, donner une information contextuelle ou apporter de laide.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 79

Lavantage de la pop in est quelle permet de communiquer avec linternaute sans lui faire perdre
son contexte, sa demande ou de faon spontane. A la demande, cest une approche moins
intrusive, enrichie et complmentaire des info-bulles et messages contextuels. Spontane,
attention car les popin peuvent devenir aussi intrusives que des pop up, voir plus si elle prsente
un bouton fermer trop petit ou hors champ.

Navigation au sein des pages


La consultation du contenu peut galement ncessiter des possibilits de navigation au sein des
pages. Selon la quantit dinformation associe au contenu, cette navigation peut tre aussi
simple quun scroll, ou ncessiter une articulation plus fine des sous parties du contenu.
Quel que soit la modalit de navigation interne la page choisie, elle peut tre source de
confusion, dans la mesure o lutilisateur clique sur un lien pour interagir et est susceptible de
sattendre changer de page. Afin de clarifier leffet du lien, il est essentiel dajouter une
animation qui permettra lutilisateur de se rendre compte du mouvement, quil sagisse dun
scroll ou dun plier-dplier.
Scroll
Le scroll vertical

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 80

Il permet de parcourir un contenu en se dplaant verticalement dans la page. Ce procd est


classique, connu et compris. Ce scroll doit cependant rester raisonnable, sans quoi il faut proposer
des alternatives lutilisateur pour accder rapidement une portion spcifique du contenu.

WWW.SMILE.FR

Notre propos concerne lutilisation, classique, ancienne et toujours efficace, du sommaire dont les
titres sont des ancres pointant plus bas dans la page, la manire dun article du clbrissime
Wikipedia. Mais penchons nous tout dabord sur des approches plus rcentes qui sappuient sur le
principe du story telling, trs visuel par dfinition, et qui de fait sloignent fortement du principe
initial.
Pour viter que la page soit considre comme complte et que les utilisateurs ne scrollent pas,
une indication de type flche vers le bas, pointills, ou mme un dbut de bloc dpassant au
dessus du bord de lcran invite lutilisateur explorer le reste de la page.

La qualit du feedback visuel est trs importante pour assurer un bon guidage des utilisateurs :
ceux-ci doivent se sentir engags dans une histoire et chaque tape de celle-ci doit senchainer
naturellement.
Le scroll horizontal
Le scroll horizontal est plus rare, et plus difficile comprendre pour les utilisateurs. Il revient la
mode cependant avec la navigation sur tablette, o un scroll horizontal est plus facile expliquer
et plus proche de la consultation, par analogie au magazine papier. Le scroll correspond alors
plutt un swipe , c'est--dire, un mouvement horizontal du doigt, qui voque le fait de
tourner une page.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 81

Scroll mixte
Enfin, quelques sites de prsentation de produit utilisent dsormais un mix de scroll vertical,
horizontal et mme en oblique combin, dans une logique de storytelling. Au scroll, diffrents
lments bougent tour tour verticalement ou horizontalement, voir en biais. Cette approche est
la fois ludique et innovante, toutefois elle cre de la confusion chez lutilisateur qui est incapable
danticiper, de comprendre ou de se reprer dans la page, ou plutt les portions de page.

Dans lexemple suivant, au scroll, des objets vont se placer dans le coffre de la voiture, sans que la
page ne scrolle effectivement. Leffet est explicite, mais utiliser dans un cas bien prcis, lorsque

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 82

WWW.SMILE.FR

cela permet de supporter un message. Les pages de ce type sont toutefois lourdes et mettent le
plus souvent un temps non ngligeable se charger.

Scroll par sections


Le scroll se fait aussi de plus en plus par section, c'est--dire quau lieu de descendre
progressivement dans la page, un scroll fera basculer dune hauteur dcran entire, comme si on
consultait une prsentation en ligne. Cette approche permet de maitriser exactement laffichage
lcran des informations, mais est sujet erreurs de manipulation : lutilisateur a vite fait de faire
dfiler par inadvertance plusieurs tapes en un seul scroll.
Ancres
Pour faciliter le dplacement dans des pages demandant beaucoup de scroll, il est possible
dajouter des ancres qui permettent lutilisateur de se rendre directement sur la zone de la page
qui les intresse, pour peu que les ancres portent un libell explicite.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 83

Les ancres ont galement lavantage de donner une vision densemble des contenus prsents dans
la page ds le dbut.
Les ancres peuvent tre fixes afin de permettre la bascule dune section une autre quel que soit
lendroit o lutilisateur se trouve sur la page.
Si la page prsente beaucoup de scroll, il faut galement proposer lutilisateur un retour en haut
de page, soit sur chaque section, soit une position fixe sur la page. Les liens en rouge dans
lexemple ci-dessous sont en ralit des ancres permettant de naviguer entre les zones de la page.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 84

Les ancres peuvent tre prsentes verticalement ou horizontalement. Comme pour larchitecture
dinformation, il faut proposer une prsentation adapte aux ancres en fonction de leur longueur
de libell et nombre, ou veiller maintenir des intituls courts et un nombre rduit.
Les onglets
Les onglets permettent au sein dune mme page, dafficher la demande une portion diffrente
de linformation. Contrairement aux ancres, les onglets ne permettent pas de parcourir le contenu
de haut en bas et den voir lensemble. Les onglets sont plus adapts pour rpartir un contenu
entre de linformation principale et des informations secondaires, que lutilisateur pourra afficher
la demande sil en a besoin.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 85

Les onglets permettent de limiter le scroll de la page, tout en donnant un accs trs rapide de
linformation secondaire. Cest souvent le cas par exemple sur les fiches produits dun site ecommerce, dans lesquelles les informations par dfaut sont une brve description, mais que
lutilisateur a la possibilit dtendre largement en affichant des dtails techniques avant de faire
son achat.
Comme pour les menus et ancres, les onglets peuvent tre prsents de faon horizontale ou
verticale. Dans les deux cas, il faudra galement tenir compte des mmes recommandations
concernant le nombre donglets et la longueur des libells.
Pli-Dpli
Les plis-dplis permettent galement dafficher
uniquement la demande une partie du contenu,
rduisant ainsi le scroll. Contrairement aux onglets qui
affichent une alternative au contenu, le plier-dplier
permet dafficher la demande de linformation
complmentaire, intgre dans le contenu principal, et
non sa place.

Lavantage de cette approche est que lutilisateur dispose dune vision densemble des sous
parties lorsque tout est repli, dans une page courte. Lutilisateur peut donc rapidement scanner
la page pour trouver linformation quil cherche, puis afficher et lire seulement la section qui
lintresse.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 86

Ce systme est frquemment utilis dans les sections daide et les questions frquences, ce qui
permet aux utilisateurs de rapidement retrouver la question qui les concerne et den lire la
rponse.
Un avantage li cette approche (par rapport aux onglets) est quil permet de dplier plusieurs
blocs conscutivement et de conserver lcran toutes les informations demandes.

WWW.SMILE.FR

Navigation alternative
Pied de page
Le pied de page (footer) est, comme len-tte de page (header), une zone fixe, visible sur toutes les
pages du site. Le pied de page est le dernier lment affich dans la page. Lutilisateur sattend
galement y trouver des informations spcifiques, dont les rseaux sociaux, le plan du site, les
contacts et accs presse, mais aussi les crdits, conditions gnrales de vente et mentions lgales.

La premire partie du footer regroupe gnralement des lments de fidlisation, tels que les
rseaux sociaux et linscription la lettre dinformation.
Si un utilisateur cherche un contact et ne le trouve pas dans le header, son premier rflexe sera de
vrifier sil est prsent dans le pied de page avant dessayer de le trouver ailleurs. Cest galement
le lieu privilgi pour les espaces recrutement, candidatures et conditions dutilisation.
Le plan du site
Le plan du site est une page qui regroupe lensemble des rubriques ou pages du site et permet
ainsi lutilisateur de reprer linformation quil cherche, si cette dernire est difficilement
accessible par la navigation classique. Un utilisateur qui ne trouve pas une page et veut sassurer si
elle existe bien sur le site passera par le plan du site pour la rechercher.
Le pied de page riche
Le plan du site peut tre remplac ou complt par un footer riche . Derrire ce terme se cache
un plan du site affich directement dans le pied de page, sur au moins deux ou trois niveaux
darborescence. Ce footer peut alors prendre la hauteur dun cran entier.
En fin de consultation dun contenu, la prsence dun pied de page riche permet aux utilisateurs
de poursuivre plus facilement leur navigation, sans repasser par le haut de la page pour accder au
menu.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 87

Un utilisateur qui consulte une page et ne trouve pas ce quil cherche en premire lecture passera
ventuellement par le footer riche et arrtera dexplorer la page, optant pour la solution
prsentant le moins de bruit visuel et textuel (remontes, mises en avant, publicits ne
figurent pas dans le pied de page) au profit de lefficacit de sa navigation.
La recherche

Navigation transverse
La navigation transverse est ce qui permet aux utilisateurs de basculer rapidement dune branche
de larborescence une autre sans repasser par les niveaux suprieurs ou la page daccueil. Il
existe diffrent types de raisons pour lesquelles les utilisateurs recherchent des contenus
connexes. Selon le besoin auquel il rpond, la navigation transverse pourra tre prsente
diffremment.
Contenus alternatifs

Ce que lutilisateur consulte ne rpond pas tout fait sa question, il a besoin dun
contenu similaire.
Lutilisateur sest tromp de contenu et il a besoin dtre rorient.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 88

Dans ce cas, le site peut lui proposer des lectures conseilles pour le
rorienter sous forme de liens directs vers des contenus ou dautres listes
de contenu. Ce contenu peut tre remont automatiquement, par exemple
via un tag commun, ou manuellement par les contributeurs.

WWW.SMILE.FR

Ces contenus gagnent tre prsents en colonne de droite : lutilisateur en


a besoin avant davoir termin sa lecture. Si le contenu sur lequel il se
trouve ne rpond pas son attente, il sera attir par les contenus
alternatifs, ou reviendra en arrire pour chercher ailleurs.
Poursuites de lecture

Lutilisateur a fini de se renseigner sur un sujet, et il veut plus dinformations sur un aspect
spcifique de ce sujet.
Lutilisateur engag dans la consultation du contenu est susceptible de
sintresser des contenus annexes plutt en fin de consultation. Des
contenus pertinents peuvent tre prsents comme poursuites de
lectures pour permettre lutilisateur de continuer sa navigation sans
repasser par la page de liste.

Les poursuites de lectures peuvent proposer des contenus plus dtaills


ou plus synthtiques sur le mme sujet, ou des contenus approfondissant
un aspect prcis du sujet. On trouve galement dans les poursuites de
lectures des informations connexes au contenu, telles que des sources, des dfinitions, des
lments de mthode par exemple.
Les poursuites de lectures ont plus de chance dtre consultes aprs la lecture de larticle, cest
pourquoi il est plus pertinent de les prsenter soit en bas de la colonne de droite, aprs les
contenus conseills, soit en dessous du contenu : les liens sont vu moins souvent, mais ils sont vus
par les utilisateurs pour lesquels ils prsentent la plus grande utilit.
Autres positionnements possibles pour les poursuites de lectures
Si les pages du site disposent dj dune colonne de gauche pour la
navigation, il est possible de positionner la navigation transverse en
colonne de gauche, en dessous de la navigation. Cela vite de
contraindre le contenu entre deux colonnes droite et gauche, et de
charger la page visuellement.
Si le contenu transverse est trs dense, prsente de nombreux liens,
voir des contenus spcifiques, il peut tre intressant de prsenter

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 89

ces contenus dans un onglet alternatif au contenu principal. Les lments de navigation transverse
sont alors accessibles la demande pour les utilisateurs qui sy intressent sans noyer le contenu
principal par une densit dinformation trop leve.

WWW.SMILE.FR

LE HEADER
Le header (ou en-tte) a un rle didentification du site et dorientation. Le header prsente
gnralement le logo, le signe et la baseline du site, qui permettent didentifier la source et le type
de contenus ou services que lutilisateur pourra y trouver.
Le header contribue la constitution de la premire impression de lutilisateur, car il est visible
quelle que soit la page dentre de lutilisateur. La composition du header doit donc tre
particulirement soigne.
Composition du header

La partie gauche du header est gnralement ddie limage du site. Elle contient le
logo, gnralement cliquable pour revenir la page daccueil, ainsi que la baseline. La
baseline explicite le positionnement de la marque et lutilit du site sur lequel lutilisateur
se trouve. Un utilisateur qui se demande sur quel site il se trouve va gnralement
rechercher linformation dans cette zone lorsquil arrive sur une page du site.

La recherche sur le site est gnralement trouve dans la partie centrale ou droite du
header. Permettre lutilisateur daccder la recherche via le header est une bonne
pratique car elle lui donne de la visibilit sur lensemble des pages du site de faon
homogne.

Si le site propose un mcanisme dauthentification, les informations concernant le compte


utilisateur se retrouvent gnralement dans la partie droite du header. Lutilisateur aura
du mal trouver ces informations si elles sont places ailleurs.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 90

De mme, si le site est un site de e-commerce, le panier et les informations relatives son
achat (voir dautres fonctions lies lutilisateur) sont galement recherches en haut
droite, accoles lauthentification. Tout autre emplacement les rendra plus difficile
reprer pour lutilisateur.

Enfin, le header est galement, le plus souvent, le premier accs vers la navigation
principale, avec un premier niveau de menu horizontal. La navigation principale est
gnralement ce qui clt le header, faisant le lien avec le contenu.

Le header contient galement des liens de navigation secondaire, qui doivent tre
accessibles trs facilement. Il peut sagir des liens classiques vers les pages presse, contact,
newsletter, mais galement des ponts vers dautres sites de la mme institution ou vers
des contenus spcifiques.

Exemple de structure de header


Sur ordinateur
Le header classique se compose dun logo et dune baseline sur la gauche, dune navigation
secondaire et du moteur de recherche sur la droite et dune navigation principale horizontale

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 91

WWW.SMILE.FR

Selon limportance de la recherche sur le site, celle-ci pourra tre place de faon plus visible et
centrale, les liens secondaires tant repositionns sur la droite.

Ces exemples ne sont pas exhaustifs : selon la typologie de contenu, les objectifs du site, il sera
ncessaire darranger / pondrer de faon spcifique chacun de ces lments.
Version allge pour tablette
Sur tablette, le header est gnralement plus compact et a besoin doccuper moins despace,
relativement la taille de lcran. Le logo et la baseline sont gnralement prservs. La
navigation peut passer sur la mme ligne que le moteur de recherche, et ce dernier peut tre
cach derrire un bouton donnant accs au champ de saisie afin dconomiser de lespace :
chaque pixel compte !. Les contenus des menus secondaires peuvent alors tre prsents derrire
une entre + si la navigation est visible.

A linverse, si la recherche est importante, il sera possible galement de masquer la navigation


derrire un bouton menu comme sur mobile, et de laisser le champ de recherche apparent.

Header minimaliste sur Mobile


Sur mobile, les contraintes daffichage obligent aller lessentiel. Le header se limite
gnralement au logo, pour reprer le site et un bouton menu permettant daccder la fois la

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 92

WWW.SMILE.FR

navigation principale et secondaire, ainsi qu la recherche. Les lments sont affichs la


demande de lutilisateur pour laisser la place au contenu.

LA PAGE DACCUEIL
La page daccueil a plusieurs rles :

identifier le site et sa source


introduire la navigation et le contenu que lutilisateur pourra y trouver
donner accs des informations utiles, dont les plus demandes et les contacts

Larrive sur la page daccueil est un instant cl dans la perception du site par linternaute, car il
sagit souvent de sa premire impression du site. La page doit donc rester suffisamment lgre
pour tre charge rapidement, et complte pour que lutilisateur comprenne la promesse du site.
Des contenus chauds, mis en ligne de faon intensive, montrent le dynamisme du site, son activit.
Des contenus froids, plus statiques, permettent de donner accs des informations cls, souvent
trs demandes par les utilisateurs.

Valoriser les contenus chauds


Carrousel, slider, zone dfilement automatique
Le carrousel est une prsentation visuelle des contenus consistant utiliser un espace important
pour une information unique qui est remplace intervalle rgulier par une autre, la faon dun
diaporama.
Le carrousel, par son mouvement, attire lattention de lutilisateur. Il permet galement de
prsenter de faon ar des contenus multiples en occupant un espace fixe dans la page.
Lutilisateur a la possibilit de modifier laffichage volont en faisant dfiler manuellement les
entres.
Les utilisateurs interagissent cependant peu avec les carrousels, se contentant dune prise
dinformation passive. De plus, les carrousels tant souvent utiliss pour des contenus d'autopromotion, ils peuvent tre ignors, de la mme faon que certaines publicits.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 93

En utilisant un carrousel, il faut faire attention le rendre lisible, visible et viter de frustrer
lutilisateur :

WWW.SMILE.FR

la vitesse de dfilement des informations ne doit pas tre ni trop lente, ni trop rapide :
lutilisateur doit voir que linformation change, mais doit avoir le temps de la lire.
Si lutilisateur interagit avec le carrousel, le dfilement doit sarrter, au moins
temporairement. En effet, rien de plus frustrant pour lutilisateur que de cliquer pour voir
le texte qui lintresse disparaitre aussitt.
Afficher le nombre dlments contenus dans le carrousel facilite galement le reprage
de linformation par les utilisateurs, sils veulent accder directement une des
informations. Pour favoriser cela, il est galement prfrable de permettre lutilisateur
de savoir ce quil va afficher avant quil ait besoin dinteragir : les entres peuvent tre
reprsentes par leur titre ou par une vignette.
Le carrousel, comme un diaporama, permet de mettre en
valeur de grands visuels, de laisser respirer le contenu
principal. Il donne un aspect vitrine et permet dallger
visuellement la page, sans rduire la quantit
dinformation quelle contient, en mettant en avant une
opportunit dexploration ludique.

Liste hirarchise
Les contenus chauds peuvent galement tre prsents sous
forme de liste. Selon la nature et la quantit dinformation, mais
galement limportance relative des diffrents contenus, il est
prfrable de proposer une liste hirarchise. Toutes les entres
ne sont pas prsentes avec le mme degr dimportance, ce qui
guide lutilisateur dans sa recherche dinformation.
Par exemple, un site dactualits met en avant la une, linstar
des journaux papier. Pour hirarchiser les contenus, plusieurs
variations sont possibles. Les variations permettent de guider le regard de lutilisateur et de
rythmer visuellement la page :

Accorder un espace plus grand une entre, sans faire varier le contenu
Faire varier le type dinformation prsente selon limportance des entres. Par
exemple, les actualits du jour disposent dun titre, un chap et un visuel. Les actualits de
la semaine disposent dun titre et dune image ; les actualits prcdentes nont quun
titre, suffisant pour comprendre le sujet.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 94

WWW.SMILE.FR

Bannires dfilantes et news ticker


Les bannires dfilantes et les news tickers correspondent une zone, relativement rduite, dans
laquelle dfile un texte. Cest le mme principe que les brves dfilant en bas de lcran lors du
journal tlvis.
Pour des informations trs courtes, le news ticker permet de mettre en avant des informations
importantes au dessus d coeur de page, sans occuper beaucoup despace. Ce procd est souvent
utilis pour mettre en avant des informations en temps rel ou des alertes ponctuelles. Par
exemple, il peut tre utilis pour donner les cours de la bourse en temps rel, ou visible sur un site
de qualit de lair uniquement en cas de pic de pollution.

Le mouvement a lavantage dattirer lattention sur ce contenu. Il rend toutefois la lecture plus
difficile. En effet, le lecteur doit compenser le dfilement du message avec ses mouvements
oculaires pour la lecture.
Si le message est long et dpasse de la zone, il sera visible partiellement diffrents instants. Un
dfilement trop rapide sera frustrant car lutilisateur naura pas la possibilit de lire tout. Trop lent,
le dfilement sera galement frustrant car il forcera lutilisateur patienter avec une information
parcellaire.
Comme pour le carrousel, le ticker doit permettre lutilisateur de contrler laffichage, de le
mettre en pause et davancer ou reculer dans le texte.
Plutt quun dfilement, un effet dapparition / disparition (par le bas) sur un texte fixe attire
galement le regard, tout en facilitant la lecture.

Valoriser les services et contenus phares


Les contenus et services stratgiques sont de deux natures. Ils peuvent correspondre des besoins
forts provenant des utilisateurs / usagers du site, ou daxes importants que le fournisseur de
service souhaite dvelopper. La conjonction des deux est bien entendu lobjectif final : un besoin
utilisateur avr rencontrant une offre qui y rpond convenablement garantira le succs du
service et la satisfaction des utilisateurs. Dans les deux cas, la mise en avant de ces contenus et
services peut prendre plusieurs formes.
Accs rapides
Les accs rapides sont des liens plus ou moins graphiques vers des contenus trs utiles
lutilisateur. Ils consistent gnralement en un accs simple (lien ou bouton) ou ventuellement en
une mise en situation graphique et / ou ditoriale. Ces raccourcis viennent sajouter aux liens par

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 95

ailleurs disponibles au sein de larchitecture de linformation, mais renforcent leur prsence et leur
visibilit en doublonnant leur prsence au sein de pages cls du site, en gnral la page daccueil
ou des pages datterrissage

WWW.SMILE.FR

Les accs rapides peuvent se prsenter sous forme de menu droulant. Un menu droulant est
principalement utile dans le cadre de formulaires, mais souvent utilis pour prsenter des options
de navigation de faon plus compacte. Il est prfrable dutiliser un menu, plutt quun menu
droulant. Dans les deux cas, lutilisateur se verra proposer un accs rapide avec, au clic, une liste
de choix parmi lesquels il peut choisir sa destination.
Lavantage de cette prsentation est quelle est trs compacte, et facile intgrer en haut de page
sans perdre despace. Le principal inconvnient est quelle nest pas trs visible : lutilisateur ne
peut pas savoir ce qui se trouve dans le menu droulant moins dinteragir avec. Cette approche
fonctionne donc mieux avec les visiteurs rguliers, qui connaissent bien le site mais est peu adapt
pour orienter les nouveaux visiteurs.
Les raccourcis peuvent tre prsents sous forme dune liste de liens, auquel cas lutilisateur
disposera dune vision densemble des accs rapides proposs, tout en restant relativement
minimaliste et compact.
Les mises en avant visuelles permettent de rendre plus visibles les accs rapides, si le site propose
un nombre limit dentres. En effet, si la page daccueil prsente de nombreux accs rapides, la
mise en avant visuelle risque de surcharger lutilisateur au lieu de le guider.
Mises en avant
Les mises en avant sont le pendant ditorial des accs rapides. Il sagit ici aussi dattirer lattention
de lutilisateur sur les contenus les plus susceptibles de rpondre son besoin, travers les plus
consults par exemple. Les mises en avant poussent du contenu lutilisateur par des choix
ditoriaux afin dattirer son attention sur un contenu qui peut lui tre utile, mais quil nirait pas
chercher par lui-mme, ou qui nest pas la raison principale motivant les visites.
Les mises en avant peuvent porter sur un nouveau service, des contenus qui ont volu, ou encore
des pages plus pdagogiques afin de guider les utilisateurs plus novices dun site.

La ligne de flottaison
Le but dune page daccueil rejoint lobjectif de la Une dun journal. Dans la presse papier, la Une
avait vocation inciter les passants prendre le journal, le dplier pour lire la suite, puis lacheter
et lire le contenu des pages intrieures. La ligne de flottaison correspondait au pli du journal,
lorsquil tait dans ltalage.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 96

WWW.SMILE.FR

Sur un site internet, la ligne de flottaison correspond la hauteur maximale visible sur une hauteur
dcran. Elle dfinit le premier cran visible au chargement de la page. Ce qui est au dessus de
la ligne de flottaison dfinit la premire impression que lutilisateur aura de votre site et les
informations dont il disposera pour comprendre votre site et dcider de rester sur la page ou de
chercher ailleurs ce qui lintresse.
Au dessus de la ligne de flottaison doivent donc apparaitre le rle de la page consulte, ce que
vous proposez et attendez de vos utilisateurs. Une erreur frquente de conception est de vouloir
tout faire tenir au dessus de la ligne de flottaison, au prix dune page surcharge dans laquelle
lutilisateur a du mal se reprer.
De nos jours, dfinir la position de la ligne de flottaison devient de plus en plus complexe et il est
illusoire de maitriser la zone daffichage visible dune page avec prcision. La ligne de flottaison est
une notion obsolte, de part la dmultiplication des formats et dispositifs de consultation : mobile,
tablette, ordinateur Les rsolutions dcran varient entre 320 * 640 et 1900 * 1200. Mme sur
mobile, les rsolutions varient grandement.
De nos jours, 90% des utilisateurs dordinateur grand public sont quips de rsolution dcran
au dessus de 1024 pixels de large. La conception peut alors se faire sur une rsolution de base de
1280 * 720. Seules les applications mtiers et tablettes, en entreprise ou association, disposent
encore de parcs avec des rsolutions dcran de 1024*768. Larrive des crans rtina
complexifie encore la donne en permettant dafficher des rsolutions trs leves sur des crans
trs rduits.
Il est donc de nos jours plus pertinent de parler de zone de flottaison plutt que de ligne , et
la notion tend tre abandonne. Cependant, ce constat ne doit pas occulter le travail de
priorisation des contenus au sein des pages : il est clair que les contenus du haut de page sont
davantage visibles que ceux du bas de page.

CONTENUS
La lecture sur cran
Spcificits de la lecture sur cran
Une personne lisant un texte sur un cran ne le fait pas de la mme faon que sil est imprim sur
papier. La lecture lcran est plus lente. La luminosit de lcran peut crer une gne et
engendrer des maux de ttes et un sentiment dinconfort. Enfin, la lecture est influence par la
luminosit externe qui peut crer des reflets et gner galement la prise dinformation.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 97

En fonction des supports de consultation, la qualit daffichage et leffet du contexte dans lequel
lutilisateur lit un article varie grandement. Il faut donc redoubler de vigilance dans la conception
pour les supports mobiles ou multi-support.

WWW.SMILE.FR

Optimiser la lisibilit
Afin de rendre les contenus plus lisibles, la forme du texte compte autant que le fond.
Interlignes : durant la lecture, lutilisateur effectue de faon parfaitement automatique des
saccades oculaires pour percevoir un certain nombre de caractres, quil pourra interprter. Plus
linterligne est grand, plus il peroit de caractres chaque saccade oculaire. Augmenter
linterligne rduit donc la fatigue et permet de lire plus vite. Un interligne trop lev peut par
contre faire perdre le fil de la lecture lors du passage dune ligne lautre. Une interligne de 1.5 2
facilite la lecture lcran de faon optimale.
Alignement du texte : les lecteurs ont tendance prfrer un texte justifi car cette mise en page
leurs sont plus familire. Les performances de lecture seront toutefois meilleures si le texte est
align gauche, car cela vite le potentiel effet rivire dun texte justifi, c'est--dire des
espaces blancs entre les mots exagrment importants, qui ralentissent la lecture.
Indentation : Mettre en retrait le premier mot dun paragraphe permet de faciliter la
comprhension du texte par le lecteur. Lindentation permet de reprer plus facilement les
changements de perspective et de fond dans le texte. En comparant un texte avec et sans
indentation, les lecteurs qui doivent rappeler les ides voques dans un texte contenant des
indentations rappellent davantage dlments.
Tailles de polices : la taille de police affiche varie selon la rsolution de lcran et son ratio avec la
taille de la zone daffichage. Pour assurer un bon confort de lecture, la taille de police dun
contenu doit tre au minimum de 12px, de prfrence 14px, et 16px pour un confort maximal.
La tendance actuelle est lagrandissement des polices et un contraste important entre les
tailles de titres et les tailles de contenu. Attention leffet de mode sur les polices dmesures.
Contrastes et couleurs : la lisibilit dun texte dpend de la distinction fond forme entre la couleur
du texte et la couleur de fond. Ecrire en noir sur fond blanc est bien visible et peu sensible aux
reflets. Ecrire en blanc sur fond noir rend le texte trs visible, mais est plus fatiguant et plus
sensible aux reflets, hormis dans des conditions dclairage rduit (typiquement, la nuit). Pour un
confort de lecture optimal, un gris 90% sur un gris 10% est plus respectueux de la rtine du
lecteur.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 98

En termes de couleurs, il faut viter de combiner les couleurs complmentaires : proscrire le rouge
sur fond vert, le vert sur fond rose et le blanc sur fond jaune qui non seulement ne sont pas lisibles
mais crent un effet doptique dsagrable.

WWW.SMILE.FR

Cette question tant galement lie laccessibilit numrique, il convient de sapproprier les
critres du rfrentiel issu du W3C, les normes WCAG 2.0, et de les appliquer. La population
daltonienne, en particulier, est trs nombreuse et il est encore bien trop rare que les concepteurs
de sites web en tiennent systmatiquement compte dans leur travail.
Typographie : les polices avec srif facilitent la lecture sur papier. Les polices sans srif facilitent la
lecture sur cran. Cette diffrence sexplique par la rsolution dcran qui a longtemps affich les
polices avec srif de faon plus floue ou crant un effet de clignotement. Avec lamlioration des
rsolutions dcran, les polices avec srif saffichent mieux. Elles sont principalement utilises de
faon ponctuelle pour mettre en valeur les titres. Les polices sans srif restent privilgier sur les
contenus longs.
Faciliter la prise dinformation
Selon quil consulte un contenu visuel ou textuel, lutilisateur dun site internet commence par
explorer la page en adoptant une lecture en Z ou en F. En aucun cas lutilisateur ne lit lensemble
du texte qui est rdig tant quil na pas la garantie que celui-ci correspond ce qui lintresse. Il
scanne la page pour y glaner des indices et lit seulement ce qui ressort, cest dire ce qui lui
semble intressant.
Dans le cas de consultation de contenu, afin de faciliter la lecture en F, il est prfrable dutilisater
diffrents styles de titres pour identifier les paragraphes en reprenant lide phare quil dtaille.
Des mises en avant visuelles permettront dattirer lattention sur des extraits particuliers.
Lutilisation de puces facilitera la prise dinformation galement, par rapport une recherche dans
un paragraphe. Le gras permet galement de faire ressortir des lments saillants et faciliteront le
scan de la page par lutilisateur.
Litalique est viter car il est plus difficile lire, except sur les citations brves et dans les
bibliographies normes par exemple pour lesquelles cest un standard attendu.

Types de pages de contenu


Rares sont les sites web dvelopps de faon statique. La trs grande majorit des sites sont grs
avec des CMS (Content Management System). La typologie de pages prsentes ci aprs (ainsi que
les enjeux associs) sappuie donc galement sur les contraintes lies loutil de contribution dun
CMS, communment appel back office , et qui permet de crer, diter, supprimer de
nouvelles pages / contenus du site.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 99

Contenu ditorial riche


La page ditoriale riche est la page de contenu classique que lon retrouve sur la majorit des sites.
Elle nest pas structure et permet de contribuer librement linformation voulue en y intgrant du
texte, diffrent niveaux de titres, et des contenus multimdias (images, vidos, prsentation,
selon les solutions retenues etc.).

WWW.SMILE.FR

La page ditoriale riche prsente son contenu en cur de page et peut tre dote dune colonne
de droite ou de gauche, daucune ou de deux colonnes.
Ce type de gabarit offre le maximum de flexibilit tout en tant simple raliser. Le nombre rduit
de contraintes implique cependant le risque de proposer des contenus htrognes en termes de
structure. Cest effectivement le grand dfi des contributeurs que de suivre et respecter une
charte ditoriale claire.
Contenu structur (exemple : fiche produit)
Un contenu structur a la particularit dtre compos dun certain nombre dattributsprdfinis.
Cest typiquement le cas de fiches produits sur les sites e-commerce, mais galement de fiches
pratiques, de rfrences clients, de recettes de cuisine. Il contiendra par exemple une image, une
description brve, une liste dingrdients, une zone de texte riche dtaillant la recette, un niveau
de difficult et un temps de prparation.
Dans le cas dun contenu structur, il est souvent possible de ne pas renseigner une partie des
attributs, mais il est plus compliqu den ajouter ou de les modifier. Les attributs dfinissent alors
la fois la nature du contenu (texte, valeur, longueur), le fond et la fonction du contenu
(ingrdients, recette) et leur affichage lors de la consultation (exemple : les ingrdients sont
positionns gauche de limage, et le dtail de la recette sera en dessous).

Raconter une histoire


Une page ditoriale riche peut tre utilise pour raconter une histoire. Une approche plus visuelle
pour la narration est la ralisation de pages en lame, ou utilisant du scroll. Lapproche plus visuelle
implique que chaque contenu ralis de la sorte est unique et trs impactant. Elle sappuie
gnralement sur les techniques les plus modernes danimation et de navigation, utilisant par
exemple un dfilement dcal entre un visuel de fond et le contenu pour donner une impression
de profondeur (parallax), ou encore de frises interactives.

Bonnes pratiques ditoriales


Afin de concevoir des contenus qui seront consults et compris, il est important dappliquer les
meilleures pratiques ditoriales.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 100

Stratgie de contenus
Linternaute ne consulte pas un contenu dans sa totalit. Il lit le chap et/ou scan un texte long
puis dcide chaque instant de poursuivre ou non la lecture du contenu. Il est donc important,
ds le dbut du contenu didentifier clairement ce quil aborde : qui, quoi, o, comment et
pourquoi ? (QQOQP)

WWW.SMILE.FR

Afin de faciliter le reprage, il est important de donner ces contenus un titre explicite et
relativement court : il doit tenir sur une ligne.
La pyramide inverse
La structure du contenu en lui-mme doit rpondre une structure en pyramide inverse : les
informations gnrales et synthtiques doivent apparaitre en premier. Plus on progresse dans le
contenu, plus il devient exhaustif et dtaill.

Contenus multimdias
Les contenus multimdias sont de plus en plus simples intgrer et consulter en ligne, que ce
soit en tlchargement ou en flux direct (streaming). La part importante de contenus multimdias
sest dveloppe avec lvolution des dispositifs technologiques : bande passante de plus en plus
grande, lecteur web en flash puis en html 5
Toutefois, avec la gnralisation des dispositifs mobiles, le cot de chargement et la disponibilit
du rseau sont incertains. Aujourdhui plus que jamais il faut donc appliquer les meilleures
pratiques en termes de prsentation des contenus multimdias, la fois pour le confort de
lutilisateur, sa satisfaction, mais aussi pour son budget.
Lorsque nous parlons de contenus multimdias, les contenus vidos sont les principaux concerns,
mais ils ne sont pas les seuls : animations interactives, bannires animes et habillage sonore des
pages sont galement impliqus.
Le principal facteur dutilisabilit ayant un impact fort sur lexprience utilisateur consultant des
contenus multimdias relve du contrle utilisateur.
Lancement des contenus multimdias
Lors de laffichage dune page incluant des contenus multimdias, ceux-ci peuvent se lancer
automatiquement au chargement de la page ou dmarrer suite une action utilisateur.
Lancement automatique
Le lancement automatique dun contenu multimdia est gnralement peru comme intrusif par
les utilisateurs. En effet, il ne permet pas de tenir compte du contexte dutilisation. Linternaute
qui fait une recherche a souvent tendance ouvrir plusieurs sites dans diffrents onglets, puis

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 101

faire le tri pour trouver linformation recherche. Si lun des onglets lance automatiquement une
vido, cela force lutilisateur rechercher cet onglet et arrter manuellement la vido. Le
lancement automatique savre frustrant si lutilisateur est dans un contexte silencieux, ou coute
autre chose par ailleurs en mme temps quil navigue sur internet.

WWW.SMILE.FR

Si le contenu ne lintresse pas (par exemple, publicit), il risque de sirriter de lintrusion et en


garder une impression ngative. A linverse, si le contenu lintresse, il risque de rater le dbut et
de devoir relancer manuellement la vido aprs coup, par exemple. Lancement suite une action
de lutilisateur
Il est gnralement prfrable de laisser lutilisateur dcider du lancement du contenu
multimdia, pour lui viter toute gne. Le lancement peut se faire par un clic explicite ou via un
survol de la souris.
Une exception est une page ddie entirement la lecture dune vido. Dans ce cas prcis, lancer
la vido automatiquement fait sens.
Lancement au survol
Le survol de la souris est utilis frquemment sur laffichage de publicits vidos, prsentes sous
forme dimages animes. Au survol de la souris, le son est activ et la zone publicitaire peut ou
non tre agrandie. Cette approche a lavantage dattirer lattention de lutilisateur sur lencart,
notamment lorsquil passe la souris dessus involontairement.
Selon son positionnement, ce format reste plus ou moins intrusif : plac en colonne de droite ou
en bas de page, il est beaucoup moins intrusif quintercal entre un menu horizontal et un cur
de page. La facilit refermer le contenu contribue galement le rendre plus ou moins intrusif :
un dplacement du curseur en dehors de la zone pour refermer lencart ou dsactiver le son est
moins intrusif. A linverse, louverture dune fentre prsentant le contenu avec comme seule
possibilit de le fermer un tout petit bouton en haut gauche est trs intrusif et frustrant si
lutilisateur risque de louvrir plusieurs fois involontairement.
Lancement au clic
Un lancement du contenu au clic demande une action explicite de lutilisateur qui garantit que le
contenu est affich si et seulement si lutilisateur sintresse ce contenu. Cette approche est non
intrusive et laisse lutilisateur le contrle de son exprience.
Par dfaut, cest la meilleure approche et celle qui est la plus respectueuse des utilisateurs.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 102

Chargement des contenus multimdias


Indpendamment du dmarrage du contenu, le chargement peut galement tre ralis
automatiquement ou manuellement la demande de lutilisateur.

WWW.SMILE.FR

Pr-chargement du contenu
Le chargement dun contenu peut tre automatique. A larrive sur la page web, le contenu est
pr-charg de faon transparente pour lutilisateur. Il na aucune action effectuer pour rcuprer
les informations. Ralis en tche de fond aprs laffichage de la page, cela permet lutilisateur
de consulter le contenu ds quil le dsire, sans attendre au pralable un chargement. Cette
approche est toutefois coteuse en ressources, en particulier sur mobile o les donnes sont
factures ou au moins comptabilises par rapport un quota. Le risque de cette approche est que
lutilisateur utilise ses ressources (avec ventuellement des lenteurs du poste) alors quil na pas
lintention de consulter le contenu, mais par exemple, de lire seulement le texte associ.
Chargement du contenu la demande
La vido peut galement tre charge uniquement suite une action de lutilisateur. Cette
approche force lutilisateur, lorsquil clique sur la vido par exemple, attendre que celle-ci se
charge au moins partiellement avant de pouvoir la regarder. Gnralement, le chargement se fait
de faon progressive avec une lgre avance sur la consultation de lutilisateur, qui ne sen rend
donc pas compte. Des lenteurs du rseau, ou la volont de passer rapidement la suite peuvent
gner lexprience de lutilisateur qui voit la vido se mettre en pause le temps de charger la
suite. Cette approche est toutefois plus respectueuse du budget des utilisateurs en leur laissant le
contrle du chargement, sans crer de lenteur hors consultation de la vido.
Options audio
Lors de laffichage de contenus disposant de son, lutilisateur doit avoir la possibilit de contrler
le volume sonore du contenu et dactiver un mode muet pour couper le son facilement. A dfaut
de disposer de ces options, lutilisateur est contraint de les modifier sur son appareil de
consultation. Selon le contexte, lutilisateur pourra prfrer quitter le site de faon anticipe ou
mme le fermer en urgence , plutt que de modifier les paramtres du systme entier.
Contrles
Lutilisateur qui consulte un contenu multimdia long a besoin de pouvoir contrler la position
dans ce mdia. Afin dassurer le meilleur confort de consultation, lutilisateur doit pouvoir mettre
le contenu en pause et changer la position sur la piste vido ou audio pour sauter une section qui
ne lintresse pas ou revenir en arrire sil a rat une information.
En termes daffichage de vidos, lutilisateur doit garder la maitrise du passage en plein cran. Sur
mobile, cela peut tre automatis selon lorientation de lappareil. Sur pc, un bouton doit

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 103

permettre dafficher le contenu en plein cran, et de fermer la vue plein cran. Un raccourci
clavier sur la touche chap doit galement permettre de sortir de laffichage en plein cran.

WWW.SMILE.FR

De mme, pour les vidos, laisser le choix de la rsolution permet lutilisateur de compenser la
lenteur ventuelle de sa bande passante, doptimiser le poids des contenus tlcharger selon le
dispositif mobile ou pc, ou au contraire permettre lutilisateur de choisir la meilleure qualit pour
regarder le contenu plus tard, la fin du chargement, sil le dsire.
Le choix de lutilisateur peut tre facilit par une prslection de la qualit vido selon le dispositif
de consultation.
Alternatives accessibles
Lorsque votre site a des enjeux daccessibilit, il est ncessaire dassocier chaque fichier audio,
slides, vido ou image complexe une transcription et description dtaille du contenu de faon
textuelle, et de renseigner correctement les balises alt.

FORMULAIRES
Formulaires simples et complexes
Champs obligatoires ou optionnels
Lors de la conception de tout formulaire il est essentiel de signaler les champs obligatoires, pour
viter les erreurs de compltions et oublis ventuels. Lutilisateur ne doit pas avoir besoin de se
demander si un champ est obligatoire ou non, cela doit lui paraitre vident.
Pour identifier les champs obligatoires, il est possible dassigner un style aux libells et / ou aux
champs.
Il est possible dafficher le libell en gras ou en
couleurs. Cette approche est efficace, mais peut tre
difficile distinguer si le code est trop subtil. Le champ
en lui-mme peut galement bnficier dun style
spcifique pour indiquer quil est obligatoire : style du
contour, couleur de fond du champ Attention toutefois ce que le champ reste reconnaissable
comme tel. De plus, styliser le champ prsente les mmes limites que pour styliser les libells.
Lapproche qui fonctionne le mieux est lajout dun astrisque
(*) aprs ou avant chaque libell de champ obligatoire. Cet
astrisque est mettre en vidence galement, souvent par
la couleur rouge. Cette approche est claire pour tous les

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 104

utilisateurs et sur tous les crans, pour peu que le formulaire soit prcd dune mention en
lgende.

WWW.SMILE.FR

Lorsque quasiment tous les champs sont obligatoires dans un


formulaire, il est galement possible de le signaler ds le
dbut, par un texte type tous les champs sont obligatoires. Il
reste ensuite possible de faire ressortir les champs optionnels
en lcrivant en toute lettre ct du champ concern.
Affichage conditionnel des champs
Des blocs de formulaires peuvent tre interdpendants. Les rponses possibles un champ
peuvent dpendre de la rponse un champ prcdent. Par exemple, il nest pas possible de
choisir un crneau de livraison avant davoir choisi la date de livraison, car les disponibilits du
livreur ne sont peut tre pas les mmes.
Il est galement possible de ne demander des informations qu une partie des rpondants selon
leurs rponses prcdentes, par exemple, demander des informations diffrentes dans un
formulaire de contact selon que lobjet de la demande soit une rclamation, une demande de
devis ou une question concernant le site.
Si un champ ne peut pas tre complt tout de suite, il est possible soit de le griser pour indiquer
quil est inactif, soit de le masquer et de le faire apparaitre lorsquil est utile.

Masquer le champ permet de rduire la charge visuelle de lcran pour lutilisateur. Il risque
toutefois dtre surpris par lapparition de champs supplmentaires, plus forte raison si cela peut
constituer pour lui un motif de ne pas aller jusquau bout de la compltion.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 105

WWW.SMILE.FR

Regroupement visuel des champs


Afin de faciliter la compltion de formulaires, il est important de regrouper les informations qui
vont ensemble, selon une logique comprhensible lutilisateur. Les regroupements par type de
champ ou par sujet permettent aux utilisateurs de renseigner leurs rponses plus rapidement. De
mme, un formulaire demandant des donnes structures sera plus rapidement complt sil
reprend une structure proche de ces donnes.
Lutilisateur sattend par exemple trouver les champs nom et prnom proximit lun de
lautre. De mme, lutilisateur sera plus efficace pour complter son adresse si elle lui est
demande dans un nombre raisonnables de champs (Ex : numro, voie, commune)
Formulaires longs
Lorsque le formulaire complter est particulirement long, il est possible damliorer son taux de
compltion en le rpartissant sur plusieurs pages ou volets.
Les champs de formulaires peuvent tre regroups par nature ou type dinformation, par exemple
votre identit , vos informations de contact , votre demande .
Ordre alatoire, compltion en plusieurs fois
Si les sous parties du formulaire ne ncessitent pas dtre compltes dans un ordre
prdtermin, des onglets ou des pages spares peuvent tre utilises pour permettre
lutilisateur de complter ce quil peut, puis de renseigner les informations complmentaires plus
tard. Il est important dans ce cas dinformer lutilisateur du taux de compltion de chaque page, et
de lui indiquer les informations manquantes, pour quil nait pas les rechercher manuellement.
Si le formulaire contient des blocs conditionnels avec de nombreux champs, cela laisse la
possibilit dajouter une page ou un onglet supplmentaire pour les utilisateurs concerns.

Etapes fixes
Lorsque lordre de compltion des sous parties du formulaire est important, un tunnel prcisant
les diffrentes tapes doit tre prsent lutilisateur, afin quil se repre dans la procdure de
compltion. Cela lui permet galement destimer le temps quil lui reste investir dans la
compltion et la complexit de celle-ci.
Pour amliorer le taux de compltion, les tapes doivent rester le plus simples, explicites et peu
nombreuses possibles.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 106

Cette approche permet galement de grer les tapes optionnelles en ne les prsentant quaux
utilisateurs pertinents.

WWW.SMILE.FR

Libells des formulaires


Libells des champs de formulaire
Les libells utiliss sur les champs de formulaire ont un rle important jouer dans la gestion des
erreurs. En effet, un libell clair et sans ambigit permettra davoir des informations plus
pertinentes. Le libell doit galement tre synthtique, concis, pour permettre lutilisateur de se
focaliser sur la rponse et non sur la comprhension de la question. Le libell doit galement
sinspirer le plus possible du vocabulaire de lutilisateur, en vitant le jargon et les abrviations.
Position du libell
A ct de chaque champ
Placer les libells des champs gauche de chaque champ permet de crer un formulaire trs facile
scanner, souvent utile lorsquil sagit de mettre jour des informations ou complter des
sections diffrent moments dans le temps.
Cette approche occupe pour chaque champ une ligne entire de la page, ce qui signifie que le
formulaire prend plus de hauteur. En contrepartie, il propose un affichage plus lger des contenus,
car moins de champs sont prsents en concurrence.

En r evanche, cette approche nest pas adapte au mobile.


Au dessus
Positionner les libells des champs au dessus de la zone de saisie permet de clairement les
associer tout en les prsentant de faon compacte, car chaque champ occupe moins despace en
largeur. Il est alors possible de prsenter plusieurs champs sur une mme ligne et de structurer la
page de faon claire et comprhensible. Le formulaire pourra donc galement tre moins haut et

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 107

WWW.SMILE.FR

tenir sur un seul cran par exemple. Attention toutefois ne pas surcharger la page, car trop
dinformation en bloc peut galement nuire la qualit des rponses.

Ce type dapproche est adapt au mobile.


Inline labels
Il est galement possible dafficher les libells des champs de saisie directement lintrieur de
ceux-ci. Cela permet de gagner significativement de la place et de moins encombrer la page. Cette
approche est particulirement adapte au mobile pour permettre dafficher plus de champs sur un
cran de taille trs rduite.

Visuellement, le formulaire semble plus simple. Mais pour lutilisateur, il demande un travail plus
important. En effet, une fois complts, lutilisateur ne voit plus les libells et doit faire appel sa
mmoire sil a besoin deffectuer des corrections. Sur des champs simples et des formulaires trs
courts, cela fonctionne bien : nom, prnom, email, : linformation renseigne est facile
identifier. Sur des formulaires plus complexes, par exemple, incluant des numros de tlphones
et des numros clients, la comprhension a postriori est plus complexe.
Cette approche est donc favoriser sur des formulaires simples et limits 3 ou 4 champs de
saisie.
Le inline label doit tre clairement identifi par lutilisateur comme tant un libell ou une aide
la compltion. En effet, une erreur frquente, notamment sur les formulaires mlangeant
indications inline et hors champ, est que lutilisateur oublie de complter le champ, le percevant
comme dj rempli.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 108

Il est donc primordial que le style de texte du inline label soit distinct du style du texte
complt. Ce type daffichage sadapte mal aux champs de texte long, et aux libells longs, plus
propices aux erreurs.

WWW.SMILE.FR

Types de champs
Champs de texte
Le champ de texte permet lutilisateur deffectuer une saisie libre de contenu. Cette saisie peut
tre cadre par des rgles spcifiques, par exemple, le champ peut accepter ou non les caractres
spciaux.
Pour amliorer la qualit de la rponse, le champ de texte doit sadapter la longueur de la
rponse attendue.

Pour une rponse de moins de 4 mots, prfrer un champ de type texte court
Pour une rponse de plusieurs paragraphies, prfrer un champ de texte long
Pour une rponse longue, structure et compose de plusieurs paragraphes, un champ de
texte riche peut remplacer le champ de texte long

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 109

Les champs de texte disposent de proprits qui modifient nativement leur comportement. Un
champ mot de passe permettra de masquer la saisie le mot de passe saisi. Un champ de type
email permettra de vrifier plus facilement la prsence de @ et . dans la rponse.
De plus, lapplication correcte des types de formulaire permettra dutiliser les facilits de saisie
natives des supports tactiles, qui prsenteront par exemple, un date picker adapt lusage tactile
pour un champ date.

WWW.SMILE.FR

Bouton radio
Les boutons radio sont utiliser lorsque lutilisateur ne peut slectionner
quune seule rponse parmi les choix proposs. Les boutons radio donnent
une vue densemble des choix possibles, ce qui facilite la prise de dcision.
Au-del de 5 items, prfrer une liste droulante.

Cases cocher
Les cases cocher sont utiliser lorsque lutilisateur peut slectionner plusieurs
choix parmi la liste propose.
Laffichage des cases cocher peut tre personnalis galement pour rendre plus saillante loption
choisie, par exemple sous forme de bouton on/off ou en prcisant leffet de chaque position.
Listes droulantes
Les listes droulantes sont adaptes pour la slection dun choix unique parmi une liste de
propositions. La liste droulante permet dafficher de nombreux choix sans occuper despace sur la
page. De plus, elle permet de sauter jusqu une rponse en saisissant la premire lettre au
clavier, ce qui permet de naviguer plus rapidement dans une liste longue lorsque lutilisateur sait
ce quil veut rpondre et na pas besoin de voir la liste complte pour choisir.
Dates
La slection de date peut tre mise en place de diffrentes faons, chacune adapte un cas
spcifique.
Si la date renseigner est proche de la date de saisie, alors un champ unique assorti dun date
picker permet de slectionner rapidement une date, ou de la saisie directement dans le champ au
bon format.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 110

Pour slectionner une priode, deux date pickers peuvent tre combins. Si la date concerne une
date passe, il est prfrable de prsenter sparment anne mois et jour dans des menus
droulants, par exemple pour saisir une date de naissance.

WWW.SMILE.FR

Versement de fichiers
Pour permettre lutilisateur dassocier des fichiers dans un formulaire, il est important de
respecter les usages familiers lutilisateur. Le parcours doit tre conserv de faon native autant
que possible : un bouton explorer se trouve droite ou gauche du champ. Lorsquun fichier est
slectionn dans le dialogue, il est ensuite rappel dans le champ.
Si des conditions sont fixes sur les fichiers accepts ou non, il est important de les prciser de
faon directement visible : quels sont les formats de fichiers attendus ? Quelle est la taille
maximale de fichier autorise ? Faut-il nommer le fichier selon une nomenclature particulire ?
Pour ajouter plusieurs fichiers avec ce systme, il est prfrable de proposer par dfaut un
nombre de champs refltant le nombre de fichiers attendus. Un bouton ajouter un autre fichier
permet alors lutilisateur dajouter un champ supplmentaire.

Si lutilisateur a besoin dajouter des fichiers en grande quantit, permettre une slection multiple
et ajouter la vole lensemble des fichiers permet lutilisateur de gagner du temps.

Une zone permettant de faire un glisser-dposer de fichiers permet plus facilement aux
utilisateurs de dposer plusieurs fichiers en mme temps sans passer par lexplorateur pour
chaque fichier.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 111

Aide la compltion
Pour obtenir des rponses la fois plus compltes, correctes et viter les abandons, les
formulaires doivent proposer un niveau daide appropri pour accompagner lutilisateur qui en
aura besoin.
Aide visible immdiatement
Si une information est indispensable la bonne compltion dun champ, celle-ci doit tre visible
immdiatement, sans action de lutilisateur. Laffichage peut prendre plusieurs formes :
proximit du champ, et ventuellement inline pour indiquer le format de saisie notamment. Il est
pertinent de faire apparaitre linformation immdiatement, si elle est indispensable la bonne
compltion du champ ou si elle permet de savoir o trouver linformation demande. Pour que
cela fonctionne au mieux, il faut que lindication soit trs courte, sinon elle risque de ne pas tre
lue par lutilisateur - malgr sa valeur informationnelle.
Les indications permettent galement de convaincre les utilisateurs de renseigner un champ ou
une information quils nont priori pas envie de donner. Par exemple, un champ optionnel
tlphone associ une explication de lutilisation qui sera faite du numro de tlphone a
plus de chances dtre complt que sil ny a pas dindication. De mme, si le champ est
obligatoire, il peut tre source dabandons du formulaire.

Le message daide peut galement tre associ un bloc de champs. Dans ce cas, le message
daide doit rester le plus concis possible et se positionner au dessus du bloc. Cela permet par
exemple dexpliciter lutilit des informations demandes, de dtailler o se trouvent plusieurs
informations complter, expliquer la procdure densemble

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 112

L encore, si le message est trop long, il risque de ne pas tre lu. Une astuce pour encourager les
utilisateurs lire le contenu est de le prsenter sous forme de cases cocher. Voyant une action
raliser, lutilisateur est plus susceptible de lire linformation, mme si la case cocher na aucun
impact sur laccs au formulaire.
Aide la demande
Pour des messages daide plus longs ou utiles seulement une partie des rpondants, il est
prfrable dafficher le contenu au clic ou au survol du champ ou dune icne daide. Par exemple,
si des utilisateurs experts nont pas besoin de linformation daide, mais que des novices peuvent
en avoir besoin, cest appropri. Votre identifiant client sur une facture dlectricit peut tre
connu ou repr facilement par des utilisateurs rguliers du service en ligne. Un novice pourra
trouver davantage dinformation dans une bulle daide.
La bulle daide permet dafficher une aide ne dpassant pas deux lignes.

Accs la documentation
Si la compltion du formulaire ncessite une documentation plus construite et complte, un lien
vers une page spare sera plus efficace quune indication sur la mme page. En effet, cela vite

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 113

dencombrer lcran avec des informations non pertinentes pour une majorit dutilisateurs. Par
ailleurs, des textes trop longs dans des info bulles ou en vis--vis des champs rend plus difficile la
prise dinformation pour lutilisateur.

WWW.SMILE.FR

Cest le cas par exemple pour les explications concernant des rgles de gestion complexes ou les
rgles pour renseigner correctement sa dclaration dimpts, par exemple. Au clic sur une des
icnes daide, la documentation souvre dans une nouvelle fentre, avec un focus sur le
paragraphe pertinent pour ce champ (par exemple via une ancre sur la page ou un accordon
dpli par dfaut).

Prvention des erreurs


Crer des formulaires efficaces et efficients, recevoir des rponses de qualit et augmenter le taux
de compltion dun formulaire passe par une gestion adapte des erreurs :

Prvenir les erreurs plutt que les corriger


Si une erreur survient, les expliquer clairement et aider lutilisateur les corriger

Les messages daide et indications pralables situes proximit (telles que dcrites
prcdemment) rduisent le risque derreur, toutefois les diffrentes faons de les durant et aprs
une saisie ne prsentent pas la mme efficacit

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 114

WWW.SMILE.FR

Vrification la vole
A la sortie du champ, le systme vrifie immdiatement si une erreur sest produite. Si la saisie est
correcte, le champ est valid. Si le champ est en erreur, celle-ci est indique visuellement
lutilisateur de faon immdiate et explique. Cela lui permet de vrifier sa saisie et de la corriger
immdiatement avant de valider le formulaire. Lutilisateur vite ainsi la frustration dune erreur
post validation et la phase de recherche des champs en erreur qui sen suit invitablement.

Par exemple, la saisie dune adresse email est facilement vrifiable, le format dun code postal ou
dun numro de tlphone peuvent galement tre vrifis sans requte au serveur.
Le niveau de scurit dun mot de passe doit tre indiqu avant validation du champ pour viter la
frustration de lutilisateur mais aussi le guider dans un choix qui sera plus sr la fois pour lui et
pour le service.
Vrification lors de la validation du formulaire
Lors de la validation du formulaire, si des erreurs subsistent, il faut les indiquer clairement
lutilisateur. En tte de formulaire, celui ci doit trouver un rcapitulatif des erreurs corriger. Ce
rcapitulatif lui permettra de sorienter directement vers les champs en erreur sans perdre de
temps les chercher.
Chacun des champs doit galement tre mis en vidence individuellement dans le formulaire pour
que lutilisateur les repre visuellement plutt quen lisant les intituls des champs. Lindication
dun champ en erreur doit donc tre suffisamment vidente et visible sans effort, parfaitement
compatible avec le comportement de scan que nous avons dj dcrit.
Messages derreur
Pour chaque erreur, le systme doit indiquer clairement, en langage naturel les causes de lerreur,
et guider lutilisateur dans la faon de la rparer. Si lutilisateur a besoin dassistance, lerreur peut
comporter un code pour faciliter les changes avec le support, toutefois le code ne doit pas tre la
seule information disponible pour lutilisateur.
Mise en vidence des erreurs
Afin didentifier les erreurs, les navigateurs proposent dsormais des styles de champ par dfaut,
tels quun contour ou fond rouge. Comme pour les libells de champs obligatoires, un changement
simple de couleur ou de style peut suffire identifier le champ. Il est toutefois prfrable dy

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 115

associer un symbole explicite, comme une croix, afin de permettre au plus grand nombre de voir
linformation correctement et sans effort, quelle que soit sa qualit de vision ou dcran.
Le message expliquant lerreur et permettant de la rsoudre doit galement tre mis en vidence
pour tre facilement reprable par lutilisateur, sans effort de sa part.

WWW.SMILE.FR

Interactions sur les formulaires


Boutons dactions
Chaque formulaire doit disposer de boutons clairs et explicites pour le valider ou annuler laction
associe. Si plusieurs formulaires existent sur le site, il faut garder des libells cohrents, o un
terme correspond une action bien dfinie. Lutilisateur ne doit pas avoir se demander si
valider , ok , et envoyer produisent la mme action ou non. La charte des sites internet
de ltat propose une charte de libells connus et homogne dont on peut sinspirer, mais il est
galement possible de dterminer une charte spcifique chaque projet, en particulier lorsquil
sagit dapplications destines une cible prcise, qui dispose dun vocabulaire mtier spcialis
par exemple.
Limportant dans la dfinition de ces libells est de maintenir une cohrence dans lensemble du
site, et dexpliciter laction qui dcoule du clic : enregistrer, enregistrer comme brouillon,
envoyer Lutilisateur doit pouvoir anticiper leffet de son action et la raliser en connaissance de
cause. Les libells doivent rester courts, mais jamais au dtriment de la comprhension.
De plus, parmi les boutons proposs, laction par dfaut doit tre mise en avant de faon explicite.
Un des boutons doit apparaitre comme laction principale par rapport aux autres.
Captcha et les robots
Les formulaires sont un point de contact vers les responsables du site ou leurs reprsentants. Pour
viter de les inonder dentres non dsires, il est possible de mettre en place des systmes de
scurit qui filtrent les messages venant dhumains. Mettre en place ces systmes de scurit
permet de rduire la charge de travail des personnes charges de filtrer les messages entrant,
mais aussi le travail de modration de commentaires par exemple.
Les captcha demandent aux utilisateurs de recopier un texte prsent dans une image. Les robots
ntant pas capables de les identifier, ils peuvent ainsi tre filtrs, car seuls les humains sont
capables de rpondre correctement la question. Du moins, en thorie, car les algorithmes des
robots se perfectionnent galement sans cesse.
Un captcha simple prsente un visuel comprenant un seul mot / une chaine de caractres. Un
inconvnient du captcha est quil est parfois galement difficile dchiffrer pour un humain et

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 116

WWW.SMILE.FR

peut gnrer des erreurs successives et de la frustration, voir des abandons sil est trop difficile
complter.

Re-captcha est une solution qui scurise les formulaires et permet galement damliorer la
dtection automatique des caractres crits par les logiciels. Le visuel prsent demande deux
mots, mais seul lun dentre eux est utile pour vrifier que lutilisateur est un humain. Cette
solution est trs prise et souvent implmente. Le niveau de complexit du visuel est souvent
facile dchiffrer pour un humain, toutefois il pose une autre difficult : lutilisateur ne comprend
pas toujours sil faut recopier lun des mots ou les deux, et lequel des deux si un seul suffit. De
plus, la sparation entre les deux mots nest pas toujours claire. Des artefacts visuels pour
empcher les robots de dchiffrer le texte peuvent tre interprts comme des signes de
ponctuation. Le visuel prsente donc un texte plus ais dchiffrer, avec un niveau de difficult
homogne, toutefois, il nlimine pas totalement le risque derreurs.
Le grand avantage de re-captcha est que la solution propose des alternatives accessibles et donc
utilisables par nimporte quel utilisateur.

Plutt quun captcha, le formulaire peut galement contenir une question qui demande de la
rflexion pour trouver la bonne rponse, sous forme dnigme simple ou de problme
mathmatique rsoudre. Cette approche rduit largement la complexit pour un humain car la
rponse est vidente priori, toutefois, cela sous entend un niveau de culture minimum de la part
des visiteurs, ce qui peut galement rduire laccessibilit de la solution.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 117

Si la rponse la question est trop courte, cela limite galement le bnfice anti-robots, car face
la force brute de calcul, le nombre de caractres joue sur le temps mis par un robot trouver la
bonne rponse, par essai-erreur.
Une solution alternative, qui ne demande aucun effort de la part de lutilisateur et rduit
largement les erreurs ventuelles, est dinsrer un champ masqu destin uniquement aux robots.
Si le champ est complt, alors le systme peut tre sr que le formulaire na pas t envoy par
un humain et peut tre cart. Pour lutilisateur, cest transparent : soit il ne voit jamais le champ,
soit il lit la consigne et le laisse vide.

PUBLICITES
Positionnement et format des publicits
Bannires & encarts
Les publicits positionnes au dessus du header sont visibles au chargement de la page. Elles sont
lgrement intrusives, mais ont surtout un impact ngatif sur la perception du site, qui peut ne pas
tre bien identifi pour ce quil est : la publicit risque de prendre le pas sur le message du site.
Les bannires positionnes entre le header et le contenu sont particulirement intrusives et
attirent lattention de lutilisateur sur la publicit au dtriment de la navigation et du contenu, qui
se retrouve bien plus bas dans la page.
Les publicits en colonne de gauche ou de droite sont positionnes dans des zones visibles, sans
tre intrusives pour lutilisateur.
Une colonne ddie la publicit en plus du colonage de la page est peu intrusif, mais galement
moins regard.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 118

WWW.SMILE.FR

Liens sponsoriss
La prsentation de publicits sous forme de liens sponsoriss et publicits intgres dans les
contenus est visible par lutilisateur et peut tre considre comme des informations pertinentes.
Cela suppose que les publicits ressemblent visuellement aux autres contenus, avec une lgre
distinction visuelle pour ne pas tromper lutilisateur.
Image de fond sur le site
Lutilisation dune image de fond sur le site (de part et dautre de la page) comme zone
publicitaire est trs visible, et perue de faon globalement positive malgr la densit visuelle que
cela apporte. Elle est cependant sujette des erreurs et clics involontaires, notamment lorsque
lutilisateur cherche cliquer hors de la page pour mettre le focus sur la page avant de scroller.
Publicits interstitielles
Les interstitiels sont des publicits qui se sont dmocratises rapidement et sont trs prsentes
dans les applications mobiles gratuites. Le principe est dafficher un cran publicitaire
intermdiaire avant le chargement du contenu ou de la page suivante. Ce type de publicit
apparait typiquement au lancement dun appli ou dun site, lorsque lutilisateur clique sur une
entre de liste pour consulter un contenu. La publicit interstitielle peut alors occulter tout ou
partie de la page devant laquelle elle souvre.
Les publicits interstitielles peuvent tre plus ou moins intrusives et irritantes pour lutilisateur.
Par nature, elle est frustrante car elle impose une tape intermdiaire lutilisateur qui a
explicitement demand une action et nobtient pas immdiatement le rsultat escompt.
Si vous choisissez ce modle daffichage des publicits, il existe des bonnes pratiques permettant
de favoriser lacceptation des utilisateurs :
La publicit doit tre lgre et ne pas forcer lutilisateur charger une grande quantit de contenu
non dsir. Elle doit safficher rapidement pour ralentir le moins possible lutilisateur.
La publicit doit disposer dun bouton de fermeture explicite, suffisamment grand et visible, de
prfrence en haut droite de lencart. La zone dinteraction doit tre suffisamment grande pour
que lutilisateur ne clique pas accidentellement sur la publicit en essayant de la refermer.
Les interstitielles peuvent galement tre prsentes sous forme de page intermdiaire avec un
dcompte automatique lissu duquel la page peut tre ferme. Ici galement, le dcompte doit
tre bien visible et laisser place une fois coul un grand bouton de fermeture. De faon
occasionnelle, ce type de publicit est tolr par les utilisateurs, bien que dautres modles soient
plus apprcis. La rptition dune publicit chaque clic est cependant un facteur important dans
la dcision de quitter le site dfinitivement. A utiliser donc avec modration.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 119

Formats interactifs
Les publicits interactives, prsentant des vidos, sons ou animations doivent respecter les mmes
bonnes pratiques que les contenus multimdias. Il est dautant plus important de prserver le
contrle utilisateur que le contenu nest pas sollicit par ce dernier et simpose lui.

WWW.SMILE.FR

Sur les vidos, la possibilit de passer une publicit aprs 5s est importante, et implique pour
quelle soit efficace de faire passer le message principal (identification du produit et de la marque)
ds les 3 premires secondes.
Les publicits qui stendent par-dessus le contenu, avec activation dun son, sont trs intrusives
lorsquelles sont dclenches au survol de la souris, ou aprs un dlai de consultation de la page.
Prfrez un affichage au clic de la publicit dont lanimation premire, silencieuse et restreinte
un encart ddi, attirera la curiosit de lutilisateur qui laffichera volontairement, et sera plus
ouvert recevoir positivement le message.
Les publicits qui se prsentent sous forme dimage anime attirent normment le regard et
peuvent gner la concentration et la lecture. Elles ne sadaptent donc pas bien tous les types de
sites. De plus, certaines animations agressives comme le clignotement rouge et jaune est
proscrire. Les publicits qui simulent des mini jeux ou suivent le curseur de la souris sont les plus
attractives pour les utilisateurs, qui jouent avec pour leur ct ludique. L galement, attention
ne pas devenir trop intrusif au dtriment du contenu principal.

Phnomne de ccit la publicit


Avec lexprience, les internautes dveloppent de faon inconsciente des stratgies pour ignorer
les publicits les plus visibles. Ainsi, lutilisateur a tendance ignorer tout ce qui ressemble de la
publicit, par connaissance des formats prsents habituellement de publicit, et par distinction
avec les contenus du site. Le risque est que lutilisateur ignore, par confusion, des contenus qui ne
sont pas de la publicit.
Pour viter cela, il est important dharmoniser visuellement tous les contenus, les mises en avant
graphiques de contenus du site et les publicits en elle-mme. Pour rendre les publicits plus
visibles, il est prfrable de leur donner un habillage graphique similaire celui du site. In fine,
prsenter une liste de liens sponsoriss fonctionne mieux de nos jours que des encarts visuels.

Afin de vrifier si vos mises en avant visuelles sont bien


vues, des tests utilisateurs avec mesure des mouvements
oculaires permettent doptimiser la visibilit relative des
diffrents lments de vos pages.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 120

MOTEUR DE RECHERCHE

WWW.SMILE.FR

Position attendue du moteur de recherche

Le champ de recherche est plutt dans le header, droite ou centr. Cest lemplacement par
dfaut o les utilisateurs vont rechercher ce type de fonctionnalit.
Il est galement, dans une moindre mesure, attendu en haut de la colonne de gauche si elle existe.
Ce cas sapplique principalement dans les sites disposant dune navigation principale en colonne
ds la page daccueil.
Si la recherche est une fonctionnalit principale au cur de lactivit du site, alors la recherche
peut tre prsente centre en cur de page. Cest le cas par exemple de sites comme celui de
source forge, dont la vocation principale est de faire des recherches parmi des projets open
source.

Recherche simple et recherche avance


Recherche simple via une saisie libre
La recherche simple est compose gnralement dun champ de recherche unique. Lutilisateur
na pas besoin de se poser de questions : quelle que soit sa recherche, il saisit les mots cls qui
lintressent et na pas rflchir des options compliques. Lintelligence du systme doit alors
lui remonter les rsultats les plus pertinents. Lalgorithme de la recherche et lindexation des
contenus sont les cls dune exprience utilisateur positive.
Si les rsultats de la recherche sont nombreux, des tris et filtres peuvent tre proposs pour
affiner la recherche ultrieurement.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 121

WWW.SMILE.FR

Recherche simple via un formulaire structur


Sur des sites dont la recherche constitue une fonctionnalit cl principale, le site peut proposer
plusieurs champs dans une recherche simple. Ces champs doivent alors porter sur des
informations bien dfinies et prcises. Cest le cas par exemple de sites immobiliers, ou dachat de
pices dtaches. On verra ainsi par exemple trois champs pour indiquer le nombre de pices, le
lieu et le prix dune location.
Dautres critres existent, mais ne sont pas visibles au premier abord pour ne pas perturber
lutilisateur en le noyant dans une masse de choix qui ne lintressent pas ou pour lesquels il na
pas davis priori. Il faut alors sassurer que les critres proposs sont bien les plus utiliss,
pertinents et compris par tous. En effet, lutilisateur a tendance renseigner lensemble des
champs mme sils ne sont pas obligatoires. En consquence, un mauvais choix de critres en
recherche simple peut dgrader la qualit des rsultats obtenus.
La simplification de la premire tape de recherche peut passer par la rduction du nombre de
champs ou la rduction du nombre de valeurs parmi lesquelles il est possible de choisir.
Recherche avance
Par opposition la recherche simple, la recherche avance permet daccder lensemble des
critres de recherche possibles. La recherche avance est gnralement accessible depuis un lien
ou aprs avoir ralis une premire recherche simple.
La recherche avance permet de faciliter la tche et rduire le nombre dtapes pour mener une
recherche experte ou trs pointue. Elle met disposition sur une page ddie lensemble des
critres de recherche disponibles.

Rsultats de recherche
Nombre dchos
Quelle que soit la recherche, il est ncessaire de dfinir le nombre dchos afficher dans la liste
des rsultats. Il doit tre suffisamment important pour ne pas demander lutilisateur de charger
manuellement de nombreuses pages pour consulter peu dinformation in fine. Il doit toutefois tre
suffisamment rduit pour laisser une liste digeste parcourir.
Permettre lutilisateur dajuster manuellement le nombre dchos quil dsire afficher permet de
sadapter sa vitesse de connexion internet, mais aussi sa prfrence en termes de navigation :
scroll ou pagination.
Tris
Afin de faciliter le reprage dune information parmi des rsultats de recherche, il est souvent
intressant de proposer diffrent types de tri, par pertinence, date dcroissante, nombre de

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 122

consultation ou de votes positifs, ou par prix croissant et dcroissant. Selon le type de contenus
ditoriaux ou produits, diffrent types de tris pertinents pour lutilisateur sont dfinir.

WWW.SMILE.FR

Les tris sont gnralement proposs au dessus de la liste, sil sagit dune liste ou sur les en-ttes
des colonnes si les rsultats sont prsents sous forme de tableau.
Filtres
Si lutilisateur obtient de nombreux rsultats de recherche, offrir la possibilit de filtrer ces
rsultats postriori selon les critres pertinents aide lutilisateur trouver plus facilement ce
quil cherche. Limiter les rsultats de recherche permet de conserver un ensemble homogne
dchos et de rduire la charge de travail laisse lutilisateur.
Les filtres les plus courants sur les sites de contenus sont des filtres par rubrique du site,
thmatique ou catgorie de contenu. Les filtres peuvent galement sattacher la nature du
contenu de la liste : articles, multimdia, personnes, fichiers. Elle peut galement limiter la liste
des rsultats des dates, auteurs ou profils de cible.
Une recherche simple profite souvent dun ou deux critres de filtrage. Dans ce cas, les filtres sont
prsents au dessus de la liste des chos, sils sont peu nombreux. Si la recherche propose de
nombreux filtres, alors ils peuvent tre prsents en colonne de gauche pour leur donner
suffisamment despace.

Recherche facettes
Quand le nombre de contenus dans lesquels rechercher est trs important, lutilisateur a besoin
de pouvoir filtrer par tape successive sur un nombre de critres importants et diversifis : on
parle alors de recherche facette. Comme les filtres, les facettes peuvent tre positionnes au
dessus du contenu ou en colonne de gauche. Selon le nombre de facettes et de choix possibles
dans chacune delle, mais aussi selon leur mode de prsentation, lune ou lautre position sera
prfrable.
Facette prsentes au dessus de la liste dchos :

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 123

Facettes prsentes en colonne de gauche :

Facettes principales et secondaires


Lorsque le site propose de nombreuses facettes, il convient de les rpartir entre facettes
principales et secondaires.
Les facettes principales correspondent aux plus utilises par les internautes et sont les plus
pertinentes pour filtrer les rsultats de recherche. Ces facettes doivent tre immdiatement
visibles des utilisateurs.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 124

WWW.SMILE.FR

Les facettes secondaires permettent de faire des recherches trs spcifiques, pour les utilisateurs
experts ou ayant des critres de choix trs prcis en tte. Ces facettes doivent tre rapidement
accessibles, mais peuvent tre visibles dans un second temps.

Proposer dans un premier temps les facettes les plus simples permet dorienter la demande de
lutilisateur, avant de proposer des critres daffinages pertinents pour cette demande. Par
exemple, sur un site e-commerce gnraliste, pousser la personne slectionner un rayon avant
de rechercher un produit permet de rendre les rsultats de recherche plus pertinents. Cela
constitue une action en plus mais rendra certainement service aux utilisateurs.
Affichage conditionnel des facettes
Les facettes secondaires permettent galement daffiner une recherche bien spcifique. Elles ne
ncessitent pas toujours dtre visible immdiatement. Par exemple, une facette permettant de
choisir sa pointure peut ntre affiche quaprs que lutilisateur ait dj filtr ses rsultats sur des
chaussures uniquement, de mme que le type de talon, etc.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 125

Choix unique
Lorsquune facette permet de filtrer la liste dchos selon un choix unique, les facettes sont plus
explicites si elles sont prsentes sous forme de liens. Le choix unique peut tre reprsent par
des boutons radio, une liste droulante ou des liens.
Dans le cadre de recherche par facette, les boutons radio sont rarement utiliss. Les utilisateurs
sont principalement habitus la liste droulante et la liste de liens.
La liste droulante permet de prsenter plusieurs critres choix unique dans un espace trs
rduit. Lorsque la recherche offre des critres choix unique de faon homogne avec peu de
choix dans chaque dimension, ce systme est la fois simple, compact et comprhensible.

Il est galement possible de prsenter la liste de choix sous forme de liens. Cette solution occupe
plus despace, mais donne immdiatement une vision densemble des choix disponibles

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 126

Si le choix unique prsente une arborescence, il est prfrable de le prsenter sous la forme dune
arborescence de liens. A chaque tape, seul un niveau de choix est prsent. Une fois un choix
effectu dans un niveau, celui-ci est rappel et les choix du sous niveau sont prsents en dessous
avec une indentation. Ce fonctionnement permet la fois de se reprer dans larborescence de
choix possibles, mais galement de revenir en arrire en une seule action.

Choix multiple
Lorsquune facette permet lutilisateur deffectuer plusieurs choix parmi une liste, les cases
cocher doivent tre utilises pour faciliter la comprhension de lutilisateur.

Slection multiple arborescente


Si lutilisateur a la possibilit de slectionner plusieurs choix dans une arborescence, plusieurs
solutions sont possibles.
Prsenter les cases cocher de faon arborescente fonctionne sur deux niveaux. Dans ce cas, la
slection dun choix, ce dernier doit se dplier et afficher les choix de niveau infrieur impliqus.
Par dfaut, il vaut mieux cocher toutes les cases du niveau infrieur, et laisser lutilisateur
dcocher ce qui ne lintresse pas. Cela permet dexpliciter le fait quen cochant la premire case,
il a inclus par dfaut toutes les sous parties de son choix.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 127

Si larborescence dispose de plus dun niveau de profondeur, il est possible de conserver ce type
de fonctionnement, mais en laissant les cases infrieures dcoches. Ainsi il est possible de dplier
diffrentes branches de larborescence de faon rcursive lorsque lutilisateur coche
successivement les cases. Cette approche est cependant complexe comprendre pour
lutilisateur. Il est dans ce cas prfrable de masquer les facettes qui nont pas t coches
initialement, pour ne laisser visible que la branche darborescence en cours de consultation.

Afin de limiter laffichage une liste digeste pour lutilisateur tout en permettant la slection
multiple, les autres options peuvent tre masqus et affichs uniquement la demande de
lutilisateur.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 128

Une alternative est de prsenter larborescence sous diffrentes facettes. Il peut sagir dune
premire arborescence de cases cocher sur deux niveaux. Lorsquun des sous niveaux est
slectionn, alors des facettes supplmentaires apparaissent pour permettre lutilisateur de
prciser sa demande. La prsentation dans des facettes spares est moins explicite concernant le
lien entre ses diffrent choix pour lutilisateur. Cette approche permet toutefois de simplifier la
slection en maintenant une liste plus courte de choix dans chaque facette de faon individuelle.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 129

Gestion dun nombre lev de choix


Si le nombre de choix est lev, il convient de prsenter les choix les plus pertinents en premier, et
de proposer den afficher plus la demande pour accder aux choix moins frquemment utiliss
par les utilisateurs.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web

WWW.SMILE.FR

Page 130

Avec ou sans hirarchie, si le nombre de choix est important, il est pertinent dajouter un champ
de texte libre permettant de filtrer la liste de choix en fonction de la saisie. Cela permet
notamment de grer les longues listes de marques, par exemple, pour lesquelles lutilisateur sait
gnralement ce quil cherche et na ainsi pas besoin de parcourir la liste entire pour trouver ses
prfres.

Il est galement possible de permettre lutilisateur de saisir directement les critres via un
champ de saisie. Dans ce cas, une suggestion permet lutilisateur de slectionner en fonction de
ce quil est en train de saisir. Lorsquil clique sur la slection ou sur un bouton de validation, cela

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 131

WWW.SMILE.FR

lajoute comme critre. Lutilisateur na cependant pas la vision densemble des termes possibles,
et il doit deviner ou connaitre les valeurs de la facette pour pouvoir sen servir.

Intervalles
Selon le type dinformation demande, filtrer une liste dchos sur un intervalle entre deux valeurs
extrmes peut se faire de diffrentes faons (par exemple, prix minimum et prix maximum)
Si lintervalle est une valeur, deux champs libres de saisie peuvent tre utiliss. Ce format est
adaptable diffrent types dinformations et permet aux utilisateurs de choisir des intervalles
personnaliss. La contrepartie de la libert de saisie est labsence de guidage de lutilisateur et
prsente donc un risque lev derreurs si ce dernier saisit des valeurs qui ne correspondent pas
aux valeurs que connait le systme.
Si lintervalle est une mesure de temps, lutilisation dun date-picker (calendrier permettant de
choisir une date sur une interface plus visuelle) pour slectionner la date de dbut, puis la date de
fin facilite grandement la tche lutilisateur.
Lintervalle propos peut galement tre dfini par un choix des valeurs extrmes via des menus
droulants. Les valeurs sont limites et la saisie est guide. Les intervalles restent personnaliss
pour lutilisateur.
Les intervalles peuvent galement tre prdfinis par le systme. Dans ce cas, lutilisateur choisira
un intervalle directement, et les valeurs extrmes associes. Le fait de dfinir lintervalle assure
que le dcoupage a du sens par rapport au nombre de rsultats qui seront filtrs. Il faut toutefois
sassurer dans ce cas quil a galement un sens pour lutilisateur.
Les intervalles peuvent tre prsents en slection unique ou multiple (soit avec des liens ou des
cases cocher).
Enfin, lintervalle peut tre prsent sous forme de rglette avec positions extrmes. Cette
approche permet de faciliter la reprsentation de lutilisateur en lui apportant une aide visuelle
sur les valeurs exclues. Attention toutefois en utilisant ce type dinteraction de bien proposer des
extrmits pertinentes et adaptes la liste de produits effectivement disponibles dans les
rsultats de recherche.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 132

SYNTHESE DES BONNES PRATIQUES

WWW.SMILE.FR

ARCHITECTURE
DINFORMATION
1. Classez les contenus selon une logique proche des besoins utilisateurs
2. Prfrez une classification par thme, besoin, offre ou profil selon ce qui est pertinent, en
combinant si ncessaire plusieurs approches de faon consistante
3. Priorisez vos contenus entre contenus principaux, secondaires et transverses
4. Visez une arborescence quilibre, ni trop profonde, ni trop large, en fonction de votre
typologie de contenu
5. Oubliez la rgle des 3 clics, mais essayez de rendre le contenu accessible sans tapes
inutiles
6. Evitez autant que possible davoir plus de 7 rubriques par niveau dans larborescence
7. Evitez autant que possible davoir plus de 3 niveaux de profondeur de rubriques
8. Ne surchargez pas larborescence : noubliez pas quun contenu positionn bas dans
larborescence peut malgr tout tre accessible en un clic si ncessaire
9. Evitez de doublonner les contenus, cela cre des incohrences et augmente
potentiellement la charge de contribution
10. Par contre, multi-positionner un contenu unique permet de rpondre plusieurs logiques
utilisateur et profils
11. Evitez autant que possible de multi-positionner des rubriques entires
12. Pour proposer des contenus personnaliss vos utilisateurs, prfrez une arborescence
commune tous, avec des branches masques selon le profil utilisateur, allis des
encarts personnaliss dans les pages pour mettre en avant des raccourcis vers les
contenus pertinents
13. Ne laissez pas chaque utilisateur remanier son plan du site
14. Utilisez autant que possible le vocabulaire des utilisateurs : vitez le jargon en gnral, et
utilisez le vocabulaire mtier sur les sites et applications expertes

NAVIGATION
15. Choisissez un menu de navigation adapt votre profondeur et largeur darborescence
16. Un menu horizontal sadapte mieux une arborescence peu large et peu profonde
17. Un menu vertical sadapte mieux une arborescence large et peu profonde

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 133

WWW.SMILE.FR

18. Pensez tactile : les zones actives doivent tre visuellement trs explicites et de taille
adapte aux doigts
19. Ne rendez pas le survol indispensable pour naviguer : rservez-le pour accder un
surcroit dinformations, mais dont lutilisateur pourra se passer sans dprcier son
exprience
20. Lutilisateur doit toujours disposer dinformations explicites sur sa localisation au sein des
pages du site

CONTENU ET EDITORIAL
21. Dfinissez ds larchitecture de linformation les formats des pages types (gabarits)
22. Tenez-vous une liste la plus rduite possible en mutualisant si ncessaire : cela favorisera
lapprentissage par les utilisateurs
23. Dterminez lorientation gnrale de votre site / rubriques, entre dun cot une approche
story-telling linaire et de lautre une approche libre et ouverte mais exigeant de
lutilisateur quil fasse des choix : tapis roulant ou place de march ?
24. Dfinissez ces gabarits par rapport aux formats de contenus et en fonction des
fonctionnalits
25. Les formats de contenu vhiculent en eux mme les bases de votre stratgie ditoriale :
rdigez des contenus types pour vrifier la cohrence densemble
26. Ne vous lancez pas dans la conception si vous ne disposez daucune visibilit ou garantie
sur les contenus rels

FORMULAIRES
27. Un formulaire doit disposer dune consigne pralable et de labels explicites mais courts
28. Les utilisateurs doivent toujours comprendre pourquoi les champs obligatoires sont
obligatoires. Et y percevoir lintrt pour eux (et non pour vous).
29. Dcoupez un long formulaire en blocs et/ou tapes qui font sens aux utilisateurs, cela
rduira le risque dabandon
30. Indiquez la progression de lutilisateur afin quil value le temps restant pour boucler le
formulaire
31. Eventuellement, permettez aux utilisateurs de remplir le formulaire en plusieurs visites, et
relancez les intelligemment par courrier lectronique en leur rappelant la valeur ajoute
32. Contextualisez au maximum les erreurs de saisie pour rduire le temps de correction
autant que possible

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 134

33. Les formulaires sont couteux pour les utilisateurs, qui valuent toujours la valeur ajoute
quils en retireront : ne lsinez pas sur les moyens car mme des optimisations semblant
trs mineures peuvent avoir des effets considrables sur le taux de compltion

WWW.SMILE.FR

MOTEUR DE RECHERCHE
34. Le moteur de recherche reste toujours un outil essentiel au sein dun site web
35. Ne misez pas non plus tout sur le moteur de recherche : lexprience montre que la
plupart des utilisateurs ne sont pas des experts en la matire
36. Lefficacit dune recherche dpend en grande partie de la qualit de lindexation et des
capacits des algorithmes corriger les erreurs de saisie ainsi qu effectuer des liens
smantiques pertinents au sein des contenus indexs
37. Si vous proposez un moteur de recherche avanc, soyez exhaustif et proposez toutes les
options possibles, conditions quelles restent comprhensibles aux utilisateurs
38. Selon la diversit des contenus indexs, prvoyez les fonctionnalits de tri et de filtre
adquates dans la liste de rsultat pour permettre de rduire par tape successive la
quantit de contenus
39. Dterminez les informations cls, sources de dcision pour les utilisateurs, afficher dans
la liste de rsultats : ni trop, ni pas assez, mais celles qui sont essentielles pour choisir

PUBLICITES
40. Les utilisateurs prsentent une tolrance aux publicits qui dpend entirement de la
valeur ajoute quils accordent lutilisation du site
41. Ils dveloppent un mcanisme de ccit sur les formats les plus courants
42. Rendre une publicit trs intrusive est rarement une bonne chose, sauf si la valeur ajoute
pour les utilisateurs est leve. Dans ce cas, ils la tolreront, mais risquent de lignorer si la
frquence de prsentation est leve

REFERENCEMENT
43. Penser rfrencement naturel ds le dbut de la conception du site amliore grandement
les rsultats
44. Les url du site doivent tre rcrites, stables et explicites, c'est--dire utilisant des termes
pertinents plutt quun code abstrait
45. Rdigez des titres et liens explicites, incluant des mots cls pertinents
46. Facilitez laccs aux robots

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 135

47. Nincluez pas dinformation cache destination du rfrencement, les moteurs de


recherche punissent activement le bricolage des rsultats

WWW.SMILE.FR

ACCESSIBILITE
48. Le texte doit tre prsent sous forme de texte et non tre inclus dans des images.
49. Renseignez les balises alt des images avec un niveau dinformation quivalent celui du
visuel
50. Renseignez la destination et fonction du lien prsent sur une image dans la balise alt
51. Associez vos fichiers multimdias audio et vido une transcription complte
52. Respectez lutilisation et lordre des balises
53. Respectez lordre des niveaux de titre
54. Utilisez les balises citation cet effet
55. Expliquez les acronymes et abrviations
56. Conservez les caractres accentus sur les majuscules
57. Dclarez correctement les changements de langue

PERFORMANCES
58. Evitez les intro flash et les crans de chargement louverture sur les sites
59. Evitez les imbrications de tableaux pour mettre en page vos contenus, utilisez CSS
60. Evitez autant que possible les applets, activeX. Si vous utilisez du javascript, proposez des
alternatives.
61. Assurez-vous que votre site soit compatible avec les navigateurs et plateformes dont
dispose votre audience cible.
62. Encodez vos images dans un format adquat
63. Limitez le poids des pages au maximum
64. Assurez-vous que votre hbergement garantit des temps de rponse corrects et une
disponibilit continue du service.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 136

DISGRESSIONS

WWW.SMILE.FR

Il est intressant de noter que quelques grands principes peuvent tre dgags pour lesquels le
temps et les volutions technologiques n'ont que peu de prise.
Nous vivons dans un environnement trs mouvant, et pourtant, si l'on prend suffisamment de
hauteur, l'on en revient toujours ce constat : les humains interagissent avec des objets.
Que cet objet soit une massue, une machine crire, un cran monochrome, un smartphone ou
un objet connect, il y a et il y aura toujours une interface entre l'humain et l'objet, qui exploitera
un ou plusieurs de nos 5 sens.
Humblement, nous abordons quelques principes que chacun devrait garder en tte dans la
conduite de projets digitaux :

LA VALEUR AJOUTEE POUR


LES UTILISATEURS
Le succs d'un produit dpend systmatiquement de la valeur ajoute qu'il prsente pour ses
utilisateurs.
Cela explique pourquoi un site web peut devenir trs populaire en dpit d'une interface mal
conue : les utilisateurs passeront outre !
Travaillez avant toute chose sur la valeur ajoute relle de votre application, service, site web, etc.
et sachez la communiquer de faon intelligible.

ENGAGER SUR LE LONG


TERME
D'un cot, il y a des utilisateurs potentiels. De l'autre, il y a des organisations (entreprises, entits
publiques, associations, etc.) qui cherchent dvelopper leurs activits auprs de ces utilisateurs.
L'adquation n'est jamais totale : nanmoins, le succs et la prennit d'une organisation est
directement corrle son effort pour tendre vers cette adquation. Dit autrement, ce qui est bon
pour les utilisateurs est bon pour les organisations.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 137

Hors, par le jeu des contraintes, les organisations prennent souvent des dcisions dont les effets
court terme les favorisent mais qui vont l'encontre des intrts des utilisateurs : c'est une erreur
que l'on paye toujours un moment ou un autre, et plus tt qu'on ne le croit.
Il n'est pas question ici de justice cosmique : simplement, les utilisateurs ne sont pas idiots.

WWW.SMILE.FR

CONTENANT & CONTENU


Une erreur souvent commise lors de la conception de produits digitaux consiste dfinir
l'interface et la structure sans connatre quels seront les contenus qui s'y insreront. On peut
construire un superbe produit mais si les contenus ne rentrent pas dedans en parfaite harmonie,
le rsultat sera simplement mauvais.
Contenant et contenu sont comme le gant et la main : vous devez avoir une connaissance assez
prcise des contenus avant de dmarrer le travail de conception.
De prfrence, cela va au del du plan gnral (l'arborescence du site) et concerne les formats
textuels et multimdias, qu'il faut modliser et sur lesquels les contenus rels devront ensuite se
calquer.

LA FORCE DES
CONNAISSANCES ACQUISES
L'tre humain se construit continuellement travers les expriences mais n'aime pas le
changement sans raison valable.
Appliqu au digital, cela signifie que les utilisateurs ont acquis des connaissances et donc des
habitudes sur un certain nombre de produits, qu'ils transposent automatiquement des situations
similaires ou nouvelles, parfois de manire inattendue. Ces produits sont plus ou moins bien
conus, et mme lorsque c'est plutt moins que plus, les utilisateurs y sont malgr tout habitus.
Il faut s'appuyer sur ces habitudes, bon gr mal gr, et savoir inflchir prudemment les
mcanismes que l'on souhaite amliorer mais qui se dmarquent des habitudes des utilisateurs.
Etre en dcalage peut relever de l'innovation ou d'une rupture volontaire simplement pour se
dmarquer, mais quoi qu'il en soit la prise de risque comme les perspectives de gain sont levs. A
chacun d'estimer ses chances de gain ou de perte.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 138

PRENDRE EN COMPTE LE
CONTEXTE
Un objet technologique s'insre dans lenvironnement, et appliqu au digital, il est facile de
l'oublier et de se focaliser uniquement sur le produit lui-mme.

WWW.SMILE.FR

L'usage est par dfinition toujours contextuel et mlange technologie, rapports humains, monde
physique, etc.
Le dfi qui se prsente aux organisations daujourdhui, c'est de prendre rellement bras le corps
l'Exprience Utilisateur dans ce qu'elle est : observer les utilisateurs en situation d'usage d'un
produit est indispensable, mais se pencher sur ce qui se passe avant, pendant (car on oublie trop
souvent que les utilisateurs se servent de produits similaires, concurrents ou complmentaires au
sien) et aprs l'est encore plus.
Cela prend du temps, exige de la mthode, des efforts, un investissement mais le rsultat est l :
valeur ajoute maximale, adquation leve entre les objectifs des utilisateurs et ceux de
l'organisation, usages facilits par la prise en compte des connaissances acquises.

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

Bonnes pratiques
du web
Page 139

REMERCIEMENTS

WWW.SMILE.FR

Un grand remerciement toutes les personnes ayant contribu et rdig ce livre blanc :

Cornelia Laros, Responsable du ple ergonomie de Smile Digital

Cyrille Assire, Directeur de Smile Digital et ergonome

Flora Ganther, Graphiste Smile Digital

Leslie Martin, Charge de communication Smile

Nhsitez pas nous transmettre vos avis et valuations sur ce livre blanc.
Une seule adresse : contact@smile.fr

Edition Octobre 2014 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation