Architecture et design d'information

Architecture d’information
Organisation des grands contenus, arborescences, maquettes

Friday, May 27, 2011

Organisation des
contenus


1. Audit du contenu


1. Audit du contenu

Contenu
existant Objec0f
de
contenu
futur

Tests
d’u0lisateurs


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)


Organiser le
chaos


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


1. Audit du contenu

L’objectif de cet exercice :

★ Connaître le contenu

★ Créer des liens entre diﬀérentes sections

★ Comprendre la dynamique du site

★ Comprendre comment ce site ce construit

★ Regroupement des grands contenus

★ “Card sorting”


Triage de carte


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


1. Audit du contenu : Triage de carte


★ Augmenter la trouvabilité des éléments du
site (l’information facile à trouver)

★ Créer un système solide et ﬁable

★ Créer des “patterns” familier pour
l’utilisateur


À garder en tête


À garder en tête

Objec0f
de
la
marque Objec0f
du
client
à

Objec0f
de
l’u0lisateur


Arborescence


Arborescence
principale


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




★ 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



Objectif de l’arborescence principale

★ Orienter l’utilisateur rapidement

★ Oﬀrir les services de l’entreprise de façon claire

★ Regrouper stratégiquement le contenu sous les bonnes
sections


Arborescence
secondaire


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)


2. Arborescence secondaire


Dessiner
l’espace


3. Dessiner l’espace

La page comme espace
d’information


3.1. Périmètres de l’aﬃchage par défaut

640 pixels

1000 pixels


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 oﬀre d’emblée les
services que l’utilisateur
est venu chercher


3.3. Objectif premier : Trouver de l’information

Comment chercher?


3.4. Où sommes-nous?

En-tête


3.5. Entrée directe, visite libre

Menu principal


3.6. Piquer la curiosité de l’utilisateur

Il y a une profondeur à
l’information


Gabarits


Dissection de l’information selon
un type de gabarit
pour une page d’accueil


4. Gabarits

Navigation
principale

Navigation de
bas de page


4. Gabarits

Sec0on
de
Sec0on
de

nouvelles droite
de

promo0on

Sec0on
de
services
et
oﬀres
à

mePre
de
l’avant


4. Gabarits : Favoriser le contenu principal

Texte Colonne
de

droite:
auto-‐
promo0on
et

informa0on

secondaire

Images

Liens
u0les


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


Structure et architecture


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

oﬀres
à
mePre
de
l’avant Mots
clés
et
liens
u0les


4. Gabarits : Page de produit

★ Montrer le produit à
l’utilisateur

★ Se diﬀérencier par la
marque

★ Présenter des liens vers
des produits similaires


4. Gabarits : “Auto-Complete”

★ Sert à éviter les confusions

★ L’élément entré est
facilement détecté

★ Oﬀre 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


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


Wireframe


5. Wireframe


5.1 Grille


5.2 Design et grille


5.3 “960 Grids”


5.4 Wireframe pour La Chambre des notaires


La forme et le contenu
Étude sur la hiérarchie du contenu et
son impact sur l’utilisateur


La forme: le contenant


1. La largeur souhaitée d’un texte

640 pixels

˜600 pixels

1000 pixels


2. S’adapter au contenant variable

le text doit s’adapter
aux diﬀérentes échelles

+1000 pixels


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


4. Pourquoi seulement 45 à 70 caractères?

v

30 cm de l’écran


4.1 La résolution de l’écran n’est pas
le même que celui du papier
v

Écran lumineux et
résolution basse


4.2 Une composition trop large est décorative


La forme: le contenu


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

★ Justiﬁer à 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 justiﬁée les styles Gras
et Italique (pour permettre que ces
éléments soient mis de l’avant)


2. Les points de références

Titre

Notes

Image

Sous-titre

Liens

>> Page suivante

2.1 Les points de références

Résumé explicatif

>>


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.

>>


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

lorem.
Sed
pharetra
mollis
nisi,
sed
venena0s
sem
tris0que
sed.

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 justiﬁé et
équilibré permet d’être utilisé
aﬁn de séparer naturellement le
contenu sur une page


4. Emphases
★ U9liser
l’italique
lorsque
vous
citez
un
livre

ou
un
ar9cle...
mais
n’écrivez
pas
tout
en

italique,
car
cela
déﬁt
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 !


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 aﬁn 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 ...)


Avoir à coeur l’utilisateur


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.


À 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.


Architecture et design d'information

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Architecture et design d'information