4. 1. Audit du contenu
Contenu
existant Objec0f
de
contenu
futur
Tests
d’u0lisateurs
Friday, May 27, 2011
5. 1. Audit du contenu
★ Inventaire du contenu existant et sommaire
★ Documentation par sections
★ Organisation par type de contenu (vidéos,
textes, nouvelles, résumés, images, sons, ...)
★ Indication des mises à jour (dynamique,
automatique, éditorial)
Friday, May 27, 2011
8. 1. Audit du contenu
★ Arborescence principale : Accueil, Société,
musique, ...
★ Arborescence secondaire correspondant
★ Détail du contenu (type, mise à jour)
★ Détail des éléments répétitifs ou
confondants
Friday, May 27, 2011
9. 1. Audit du contenu
L’objectif de cet exercice :
★ Connaître le contenu
★ Créer des liens entre différentes sections
★ Comprendre la dynamique du site
★ Comprendre comment ce site ce construit
★ Regroupement des grands contenus
★ “Card sorting”
Friday, May 27, 2011
11. 1. Audit du contenu : Triage de carte
Comment s’y prendre :
★ Grouper l’information par sujet (type
d’information)
★ Définir chaque groupe et bien les
différenciers (parfois regrouper des
sections similaires)
★ Identifier les objectifs de chacun des
groupes
Friday, May 27, 2011
12. 1. Audit du contenu : Triage de carte
L’objectif de cet exercice :
★ Augmenter la trouvabilité des éléments du
site (l’information facile à trouver)
★ Créer un système solide et fiable
★ Créer des “patterns” familier pour
l’utilisateur
Friday, May 27, 2011
17. 2. Arborescence principale
Web
site
:
Accueil Recherche
Groupe
d’informa0on
A Groupe
d’informa0on
B Groupe
d’informa0on
C Groupe
d’informa0on
D
Sec0on
B1 Sec0on
C1
Thèmes
communs
Sous-‐groupe
A1 Sous-‐groupe
A2 Sous-‐groupe
D1 Sous-‐groupe
D2
Thèmes
1
Sec0on
B2 Sec0on
C2
Thèmes
2
Sec0on
A2 Sec0on
D1
Thèmes
3
Sec0on
C3
Sec0on
D1’
Thèmes
4
Forum
de
Communauté UGC
conversa0on
Friday, May 27, 2011
18. 2. Arborescence principale
L’objectif de cet exercice :
★ Organiser le contenu principale
★ S’addresser au 80% des utilisateurs
★ Avoir un objectif principale
Web
site
:
Accueil Recherche
Groupe
d’informa0on
A Groupe
d’informa0on
B Groupe
d’informa0on
C Groupe
d’informa0on
D
Friday, May 27, 2011
19. 2. Arborescence principale
Objectif de l’arborescence principale
★ Orienter l’utilisateur rapidement
★ Offrir les services de l’entreprise de façon claire
★ Regrouper stratégiquement le contenu sous les bonnes
sections
Friday, May 27, 2011
23. 2. Arborescence secondaire
Objectif de l’arborescence principale
★ Trouver
l’informa0on
clé
à
travers
tout
le
site
★ Contenir
des
sec0ons
cachées
(les
mePre
de
l’avant)
★ Créer
des
liens
vers
les
sites
partenaires
(ou
des
sites
externes)
Friday, May 27, 2011
28. 3.1. Périmètres de l’affichage par défaut
640 pixels
1000 pixels
Friday, May 27, 2011
29. 3.2. L’information du contenant à l’arrivée
★ L’utilisateur sait où il se
trouve
★ L’utilisateur a des options
de navigation
★ L’utilisateur est guidé
★ Le site offre d’emblée les
services que l’utilisateur
est venu chercher
Friday, May 27, 2011
30. 3.3. Objectif premier : Trouver de l’information
Comment chercher?
Friday, May 27, 2011
36. 4. Gabarits
Navigation
principale
Navigation de
bas de page
Friday, May 27, 2011
37. 4. Gabarits
Sec0on
de
Sec0on
de
nouvelles droite
de
promo0on
Sec0on
de
services
et
offres
à
mePre
de
l’avant
Friday, May 27, 2011
38. 4. Gabarits : Favoriser le contenu principal
Texte Colonne
de
droite:
auto-‐
promo0on
et
informa0on
secondaire
Images
Liens
u0les
Friday, May 27, 2011
39. 4. Gabarits : Favoriser le contenu médiatique
Sec0on
de
visionnement
Informa0ons
par
rapport
au
contenu
visionné
Contenu
1 Contenu
2 Contenu
3
Mots
clés
et
liens
u0les
Friday, May 27, 2011
41. 4. Gabarits : Comment le contenu est-il inter-relié?
Sec0on
de
nouvelles Sec0on
de
Texte Colonne
de
droite:
droite
de
auto-‐promo0on
et
promo0on informa0on
secondaire Sec0on
de
visionnement
Images Informa0ons
par
rapport
au
contenu
visionné
Contenu
1 Contenu
2 Contenu
3
Liens
u0les
Sec0on
de
services
et
offres
à
mePre
de
l’avant Mots
clés
et
liens
u0les
Friday, May 27, 2011
42. 4. Gabarits : Page de produit
★ Montrer le produit à
l’utilisateur
★ Se différencier par la
marque
★ Présenter des liens vers
des produits similaires
Friday, May 27, 2011
43. 4. Gabarits : “Auto-Complete”
★ Sert à éviter les confusions
★ L’élément entré est
facilement détecté
★ Offre toutes les possibilités
avec les éléments entrés
★ La rapidité de trouver des
éléments est un objectif
★ La précision de la
recherche est un objectif
Friday, May 27, 2011
44. 4. Gabarits : Liste d’article
★ Utilisé pour attirer
l’attention de l’utilisateur
sur le contenu qui pourrait
l’intéresser
★ Si le contenu est une
histoire, une nouvelle, un
article
★ Permet à l’utilisateur de
rapidement parcourir les
thèmes présentés
★ Une longue liste permet de
rapidement parcourir
plusieurs articles
Friday, May 27, 2011
53. 1. La largeur souhaitée d’un texte
640 pixels
˜600 pixels
1000 pixels
Friday, May 27, 2011
54. 2. S’adapter au contenant variable
le text doit s’adapter
aux différentes échelles
+1000 pixels
Friday, May 27, 2011
55. 3. Le nombre de caractères par colonne
45 à 70 caractères
maximum par colonne
Cela dépend des éléments suivants :
★ Taille de la typo (min 11 - 12 pix)
★ Espace entre les lignes (min 14 pix)
★ Nombres de paragraphes
Friday, May 27, 2011
60. 1. Une bonne lisibilité du texte
★ Utiliser des couleurs à grands contrastes
(texte noir sur fond blanc; texte blanc sur
fond noir)
★ Le fond doit toujours être de couleur unie
(ou avec des dessins très légers et
subtils)
★ Le texte doit se tenir seul sans
ornements
★ Justifier à gauche les textes pour suivre
l’oeil occidental (de gauche à droite)
★ Ne pas utiliser des petites majuscules
pour tout le texte
★ Utiliser de façon justifiée les styles Gras
et Italique (pour permettre que ces
éléments soient mis de l’avant)
Friday, May 27, 2011
61. 2. Les points de références
Titre
Notes
Image
Sous-titre
Liens
>> Page suivante
Friday, May 27, 2011
62. 2.1 Les points de références
Résumé explicatif
>>
Friday, May 27, 2011
63. 2.2 Faciliter la tâche de “scanner” l’information
Résumé explicatif
★ Utiliser des conventions claires
telles : Titre, descriptions du
document en 250 caractères,
texte intégral, système de
pagination, notes de bas de page,
liens utiles.
>>
Friday, May 27, 2011
64. 2.3 Un exemple concret : 90% Texte
Titre
de
ce
document
Maecenas
rutrum
arcu
facilisis
metus
0ncidunt
feugiat.
Donec
Maecenas
rutrum
arcu
facilisis
metus
sollicitudin
ultrices
elit
quis
aliquam.
Curabitur
id
eros
quam.
0ncidunt
feugiat.
Donec
sollicitudin
“Aliquam
ut
nunc
vitae
magna
porta
volutpat.
In
hac
habitasse
ultrices
elit
quis
aliquam.
Curabitur
id
eros
quam.
Aliquam
ut
nunc
vitae
platea
dictumst”.
Sed
vel
mi
ipsum,
non
tris0que
erat.
magna
porta
volutpat.
In
hac
habitasse
Curabitur
pharetra
vulputate
eros
sit
amet
dapibus.
platea
dictumst.
Sed
vel
mi
ipsum,
non
tris0que
erat.
Curabitur
pharetra
vulputate
eros
sit
amet
dapibus.
Aenean
ornare
tempus
vulputate.
Suspendisse
id
eros
in
dui
lobor0s
bibendum
vel
eget
urna.
Duis
ves0bulum
tempor
iaculis.
Pellentesque
habitant
morbi
tris0que
senectus
et
netus
et
malesuada
fames
ac
turpis
egestas.
Nullam
hendrerit
fermentum
mi
lacinia
vehicula.
Ut
scelerisque
metus
vel
nisi
facilisis
malesuada.
In
gravida
dui
quis
nisl
laoreet
viverra.
Phasellus
non
quam
tortor,
in
dictum
lorem.
Sed
pharetra
mollis
nisi,
sed
venena0s
sem
tris0que
sed.
Aenean
ornare
tempus
vulputate.
Suspendisse
id
eros
in
dui
lobor0s
bibendum
vel
eget
urna.
Duis
ves0bulum
tempor
iaculis.
Pellentesque
habitant
morbi
tris0que
senectus
et
netus
et
malesuada
fames
ac
turpis
egestas.
Nullam
hendrerit
fermentum
mi
lacinia
vehicula.
1.1.
Sous-‐8tre
de
ce
document
Ut
scelerisque
metus
vel
nisi
facilisis
malesuada.
In
gravida
dui
quis
nisl
laoreet
viverra.
Phasellus
non
quam
tortor,
in
dictum
Friday, May 27, 2011
lorem.
Sed
pharetra
mollis
nisi,
sed
venena0s
sem
tris0que
sed.
65. 3. Les espaces vides sont aussi
importants que les espaces pleins
★ Les espaces vides sur une page
web ne peuvent être trop grands,
car l’utilisateur est ralenti au fait
de “scanner” l’information
rapidement
★ Un espace vide justifié et
équilibré permet d’être utilisé
afin de séparer naturellement le
contenu sur une page
Friday, May 27, 2011
66. 4. Emphases
★ U9liser
l’italique
lorsque
vous
citez
un
livre
ou
un
ar9cle...
mais
n’écrivez
pas
tout
en
italique,
car
cela
défit
l’objec9f
de
meAre
l’accent
sur
une
par9e
du
texte!
★ Me:re
du
texte
en
Gras
pour
a>rer
l’a:en8on
sur
certains
termes.
A:en8on
de
ne
pas
tout
écrire
en
Gras!
★ Ne
pas
souligner
le
texte
sur
le
Web
pour
mePre
de
l’emphase;
car
les
u0lisateurs
peuvent
penser
que
c’est
un
lien.
★ Ne
pas
u0liser
des
couleurs
dans
le
texte
pour
mePre
de
l’emphase;
car
les
u0lisateurs
peuvent
penser
que
c’est
un
message
d’erreur
ou
un
lien
vers
une
autre
page.
À utiliser avec modération !
Friday, May 27, 2011
67. 5. Cohérence
★ Créer une structure stable, mais
malléable dans laquelle le texte
s’inscrit.
★ Garger la même structure tout
au long des pages du site afin de
permettre aux lecteurs de s’y
retrouver.
★ Décider d’un réglage continu et
consistant tout au long des
pages du site (police de
caractère, taille, couleurs, liens ...)
Friday, May 27, 2011
69. Faire du contenu pour le Web
★ Contenu court, parcourable
rapidement.
★ Contenu allant droit au but (clair,
épuré, éloquant)
★ Contenu répondant rapidement aux
questions des utilisateurs.
★ Utiliser un language approprié à
celui du lecteur en bout de ligne.
Friday, May 27, 2011
70. À retenir
★ Faciliter la tâche de “scanner”
l’information rapidement. Donc en
priorisant la lisibilité.
★ Utiliser des conventions cohérentes
tout au long des pages du site web.
★ Construire une structure stable et
malléable pour contenir
l’information de façon à suivre les
standards Web et de servir aux
utilisateurs.
★ Construire le contenu de façon à ce
que l’information soit priorisée sur la
forme. La forme aide à la lecture du
contenu et non l’inverse.
★ Mettre en évidence ce qui est un lien
vers une autre page.
Friday, May 27, 2011