3.

UX DESIGN : L’ARBORESCENCE

ARBORESCENCE : ARCHITECTURE DE L’INFORMATION

L’architecture de l’information

ou l’arborescence est une
représentation visuelle de la
structure d’un site web. Elle
renseigne sur la structure d’un
site web et la manière dont il est
organisé, sur son nombre de
page et sur ce que l’on y
trouvera.
L’arborescence d’un site web
permet de lister l’ensemble des
rubriques, sous rubriques et
pages d’un site internet sous
forme de plan.
A distinguer du “plan du
site” (index des pages du site)
3. UX DESIGN : L’ARBORESCENCE

ARBORESCENCE : ARCHITECTURE DE L’INFORMATION

L’arborescence montre les étapes
par lesquelles l’internaute devra
passer pour accéder à un
contenu donné.
Vous devez structurer votre site de
manière à ce que le visiteur trouve
l’information dont il a besoin
rapidement.
Un site Internet ne sert pas à
ranger de l’information. Il sert à
communiquer. Votre arborescence
ne doit pas présenter toute
l’information sur votre entreprise,
mais seulement celle qui appuiera
votre message et vous aidera à
atteindre vos objectifs.
3. UX DESIGN : L’ARBORESCENCE

ARBORESCENCE : ARCHITECTURE DE L’INFORMATION

Dans la hiérarchisation de
l’information, il ne faut pas oublier
les rubriques incontournables : le
plan du site, les mentions légales, les
contacts etc.
Les moteurs de recherche analysent
les liens entre les pages de votre site
pour en comprendre la structure
générale, et déterminer quelles sont
les pages clés.
Plus une page est « profonde »,
moins elle sera prise en compte.
Concrètement, une catégorie de 3e
ou 4e niveau sera référencé, mais

les moteurs de recherche lui
accorderont peu d’importance par
rapport une catégorie de premier ou
de second niveau.
3. UX DESIGN : L’ARBORESCENCE

ARBORESCENCE : ARCHITECTURE DE L’INFORMATION

En tant que concepteur nous devons décider du contenu de cette architecture.


On doit déterminer les rubriques dont nos utilisateurs auront besoin et la manière dont nous les nommerons et les
classerons.
Une bonne architecture de l’information, c’est avant tout une bonne gestion des contenus.

- Lister

- Classer

- Hiérarchiser

- Structurer
X. UX DESIGN : LA LIGNE DE FLOTTAISON

LA LIGNE DE FLOTTAISON : REMISE EN QUESTION

La ligne de flottaison est la ligne à partir de laquelle le
contenu n’est visible qu’en scrollant. Les anglophones
appellent cette ligne « the fold » (le pli) en référence au pli
d’un journal. Seul le contenu au-dessus du pli d’un journal est
visible au premier abord.
Le scroll est un moyen de navigation, il permet de visualiser
un contenu dans son ensemble.
Il est particulièrement adapté pour :
- les appareils mobiles : au vu de la taille réduite de leurs
écrans, l’accès aux informations par scroll est devenu
incontournable
- des activités d’exploration et de découverte, telles que
la lecture d’un article, la recherche d’un produit
- l’affichage d’un flux d’informations comme une
conversation SMS.
C’est pourquoi de nombreux sites ou logiciels affichent
désormais des pages dont le contenu est scrollable sur plus
de 10 fois la hauteur de l’écran. Ces sites remettent ainsi en
question les anciens standards recommandant de ne pas
dépasser l’équivalent de 4 fois la hauteur d’un écran pour une
page.
X. UX DESIGN : LA LIGNE DE FLOTTAISON

LA LIGNE DE FLOTTAISON : REMISE EN QUESTION

L’utilisation intensive du scroll est désormais
rentrée dans les usages et tend à diminuer
l’importance de cette zone de la page, qui reste
néanmoins déterminante.
Elle doit contenir les éléments de navigation
(menu, fil d’Ariane ou chemin de fer, recherche,
etc.) mais surtout présenter les informations
essentielles à l’utilisateur pour comprendre ce
que la «face cachée» de la page contient.
L’idée n’est cependant pas de faire tenir toute les
informations sur un même écran, mais d’inciter
l’utilisateur à découvrir le reste de la page.

Les informations à y afficher dépendent de
l’objectif du site. Si votre page affiche un article,
l’utilisateur doit pouvoir rapidement savoir de
quoi il traite. Pour cela, pensez à inclure un
résumé au début de l’article.
X. UX DESIGN : LA LIGNE DE FLOTTAISON

LA LIGNE DE FLOTTAISON : REMISE EN QUESTION

La ligne de flottaison est un peu plus difficile à
définir en UX design puisqu’elle dépend de la
résolution d’écran et il existe une grande variété de
tailles et de résolutions écrans.
Mais même si proposer de longues pages scrollables
n’est plus un problème, attention néanmoins à ne pas
tomber dans l’extrême inverse : un utilisateur ne doit
pas avoir à parcourir des kilomètres de pages pour
trouver le contenu prioritaire qu’il vient chercher !
Une étude (menée par ClickTale) apporte des
statistiques intéressantes sur le comportement de
l’utilisateur face au scroll, en effet 76% des pages
Web visitées sont scrollées.
Cette étude illustre la tendance observée ces
dernières années, les utilisateurs se sont donc
familiarisés au scroll. Les concepteurs de site web ont
pourtant considéré durant de nombreuses années
que les utilisateurs ne voulaient pas « scroller » et qu’il
fallait concevoir des pages courtes.
X. UX DESIGN : DESIGN DE NAVIGATION

DESIGN DE NAVIGATION : SE DÉPLACER

Le design de navigation permet de se déplacer
dans le site et doit permettre la navigation d’un
point à un autre du site, il combine plusieurs
systèmes de navigation dans une même interface.
- La navigation globale, primaire ou de premier
niveau : elle permet d’accéder à l’ensemble du site
(ex : barre de navigation type menu vers les
rubriques principales du site, grandes catégories) ;
- La navigation locale, secondaire ou de second
niveau : on appelle navigation secondaire les points
d’entrée au sein d’un même élément du menu, ce
sont des sous-rubriques. Elle peuvent apparaitre
sous forme de menu déroulant) ;
- La navigation remontante : type «fils d’Ariane». Il
fournit des liens sur chaque étape (page) parcourue
par l’utilisateur au fil de sa navigation à travers
l’interface afin de pouvoir se positionner au sein du
site et éventuellement de revenir sur ses pas depuis
le point d’entrée (de départ) du site Web.
X. UX DESIGN : DESIGN DE NAVIGATION

DESIGN DE NAVIGATION : SE DÉPLACER

- La navigation contextuelle ou transversale :

La navigation contextuelle désigne tous les éléments
proposant des contenus connexes ou en relation avec
ceux consultés. Encarts, cross-selling (produits
complémentaire), Focus ;
- La navigation hypertexte :

La navigation hypertexte se fait par le biais de liens
hypertexte insérés dans les textes consultés et menant
vers d’autres pages du site ;
- La navigation de courtoisie, utilitaire ou
fonctionnelle :

Ensemble d’outils ou d’informations pratiques relatives
au site : recherche, contact, mentions légales, crédits,
FAQ, se connecter, à propos de, aide, plan du site...) ;
- La navigation à distance ou additionnelle :

utilisée hors des systèmes de navigation classique, elle
prend l’apparence d’outils tels que le plan du site ;
- La navigation à facettes ou filtre :

permet d’effectuer une recherche de produit en
fonction de multiples critères (prix, couleur, sous-
catégorie de produit....) ;
X. UX DESIGN : LE BAS DE PAGE

LE BAS DE PAGE : DE PLUS EN PLUS VU

Cette évolution des usages sur le web montre un
autre point important. Le bas de la page (footer)
devient de plus en plus visible, puisque près d’1/4
des utilisateurs scroll jusqu’en bas de la page.
Cet espace est idéal pour proposer des contenus en
lien avec la page consultée tels que des articles ou
des produits similaires. Les utilisateurs déjà intéressés
par le contenu de votre page sont les plus à-même
d’être intéressés par d’autres contenus, n’hésitez donc
pas à les guidez vers de nouvelles pages.
Le pied de page est également un bon endroit pour
placer une navigation secondaire. Les utilisateurs
arrivés à la fin de leur lecture peuvent vouloir aller
consulter une autre rubrique de votre site. Une
pratique fréquente est de proposer un « site
map » (plan du site) montrant tous les contenus à plat
dans votre pied de page.
Le pied de page est une zone importante
permettant à l’utilisateur de continuer sa
navigation.
RESPONSIVE
DESIGN
4. RESPONSIVE DESIGN

ETHAN MARCOTTE
Ethan Marcotte, un développeur et designer ayant travaillé pour des
organismes prestigieux tels que l’université de Stanford ou New
York Magazine, est l’un des premiers en 2010 a observer que les
supports se multiplient : ordinateurs certes, mais aussi, tablettes,
smartphones, ou encore très grands écrans.
Plutôt que de développer un site par format, il se dit qu’il faudrait
mieux développer un site adaptable à toutes les résolutions. 

C’est le principe du RWD.
4. RESPONSIVE DESIGN

3 SOLUTIONS : SITE DÉDIÉ, APPLICATION, RESPONSIVE DESIGN

Site dédié, application native, Responsive Design, chaque solution a ses avantages et ses inconvénients : selon
vos besoins et contraintes (notamment de budget et de délais), il pourra être parfaitement pertinent d’opter pour
l’une ou l’autre.
4. RESPONSIVE DESIGN

APPLICATION NATIVE
Une application native est un produit développé
spécifiquement dans divers «langages» (iOS, Android,
WindowsPhone) et qui se télécharge et se référence au sein d’un
«Store» (AppStore, Google Play, Windows store).
Les avantages :
- La prise en charge facilitée de fonctionnalités natives (touch,
accéléromètre, notifications, GPS, etc.)
- Une installation possible sur son périphérique
- Une totale «acclimatation» au périphérique (ergonomie,
performances, densité de pixels)
- La présence de sa marque sur l’AppStore (par exemple) et de
pouvoir disposer d’un «raccourci» sur le smartphone de
l’utilisateur.
Les inconvénients :
- Un développement spécifique dans plusieurs langages
(propres à iOS, Android, WindowsPhone, etc.)
- Le coût du développement, des licences, et de la maintenance
pour chaque système d’exploitation
- Un contenu non indexable par un moteur de recherche web
classique
- La mise à jour de l’application nécessite une action de
l’utilisateur
4. RESPONSIVE DESIGN

LES DIFFÉRENTS TYPES DE SITES : STATIQUE, LIQUIDE, ADAPTATIF, RESPONSIVE

En France, et selon Wikipedia, le Responsive Web

Design est un synonyme de «site web adaptatif».
Techniquement, il conviendrait de distinguer les
sites web en Statique, Liquide, Adaptatif ou
Responsive :

Design Statique

Un design statique (ou fixe) se réfère à des
dimensions figées (par exemple 1000 px de
largeur) quelle que soit la surface de l’écran. La
très grande majorité des internautes ayant au
minimum un 17’ soit une interface de 1024 X
768 px.
La majorité des sites web était construit sur cette
base avant l’arrivée du Responsive Web Design
en 2010.
4. RESPONSIVE DESIGN

LES DIFFÉRENTS TYPES DE SITES : STATIQUE, LIQUIDE, ADAPTATIF, RESPONSIVE

Design Liquide

Un site web Liquide (ou fluide) est un site web dont
toutes les largeurs de colonnes sont exprimées en unités
variables (pourcentages, em, vw, etc.) et qui s’adapte
généralement automatiquement à la taille de fenêtre,
jusqu’à une certaine mesure.
Design Adaptatif

Un design Adaptatif est une amélioration du design
statique : les unités de largeur sont fixes, mais différentes
selon la taille de l’écran, qui est détectée via CSS3 Media
Queries.

Un tel design tient uniquement compte des principaux
points de rupture (320px, 480px, 768px, 1024px, etc.) et
adapte le gabarit en conséquence.
Design Responsive

Un site web Responsive est une amélioration du design
liquide associé à des méthodes CSS3 Media Queries
permettant de modifier les styles (ré-organisation de la
page par exemple) selon certains critères, pour s’adapter
complètement à la taille d’écran, quel que soit le point de
rupture.
4. RESPONSIVE DESIGN

PHILOSOPHIE : MEDIA QUERIES

Un site web pensé sur le principe du RWD
utilise la technologie media-queries CSS3.
Il permet à la page d’utiliser des règles
CSS différentes en fonction des
caractéristiques du terminal de
consultation.
Le plus communément il s’agit des règles
appliquées en fonction de la largeur du
terminal.
Ces différentes largeurs sont appelées
«points de rupture» et correspondent à un
besoin de modifier la mise en page à partir
d’un certain seuil critique pour faciliter la
navigation et la lecture du contenu.
On peut ainsi cibler des résolutions
précises et y attribuer un style particulier et
adapter dynamiquement le design à l’aide
de CSS.
4. RESPONSIVE DESIGN

PHILOSOPHIE : MEDIA QUERIES

Un même site doit pouvoir s’adapter lui-même aux
différentes résolutions d’écrans... et donc son contenu
aussi !

Un site web pensé sur le principe du RWD utilise la
technologie CSS3 media queries pour adapter la mise en
page à l’environnement de consultation grâce à une
grille fluide dans laquelle se casent les différents
contenus de la page.
C’est donc principalement à base de CSS que le design
est rendu fluide, adaptable.

La spécification CSS3 Media Queries définit les
techniques pour l’application de feuilles de styles en
fonction des périphériques de consultation utilisés pour
du HTML. Le RWD, désigne d’adaptation dynamique du
design à l’aide de CSS.
Ces différentes largeurs sont appelées «points de
rupture» et correspondent à un besoin de modifier la
mise en page à partir d’un certain seuil critique pour
faciliter la navigation et la lecture du contenu. Le concept
de grille fluide consiste en un dimensionnement relatif

des différents blocs de la page. Les unités relatives
comme les pourcentages, sont privilégiées par rapport
aux unités absolues comme les pixels ou les points.
4. RESPONSIVE DESIGN

PHILOSOPHIE : LES POINTS DE RUPTURE

En webdesign un point de rupture désigne le moment où le
design d’un site responsive design change en fonction de la
largeur/hauteur de la fenêtre du navigateur. Ces points de
rupture sont comme des paliers qui une fois franchie
permettent d’adapter le design ou le contenu à la nouvelle
largeur de la page web. Avec les largeurs définis on peut en
déduire les limites de passage d’un affichage « smartphone » à
un affichage « tablette », etc.

MOBILE MOBILE TABLETTE TABLETTE PC Il y a 2 approches différentes concernant le choix de ces paliers
DE 1ERE PAYSAGE
DE GÉNÉ
 SMARTPHONE IPAD MODE dans un design:
BASE PORTRAIT
RATION
‣ Adaptation selon le design/contenu : consiste à définir les
paliers soi-même à partir d’un design existant. Par exemple,
il s’agit de définir la largeur minimum du header avant qu’il
ne se «casse» et donc définir un palier pour cette largeur.
Cette approche est simple et s’adapte rapidement aux sites
web qui ont une charte graphique avec toutes les pages
similaires.
‣ Adaptation selon les largeurs populaires : consiste à
définir les points de rupture en fonction des supports des
internautes. Par exemple, si de nombreux visiteurs utilisent
un iPhone (écran : 320x480 pixels) alors la largeur de 320px
peut servir de point de rupture.
Ce sont les valeurs que l’on utilise dans les @media queries des
feuilles de style.
4. RESPONSIVE DESIGN

MOBILE FIRST
Cette pensée à pour objectif d’améliorer l’expérience utilisateur (UX). Donc il s’agit se reposer
la question de l’usage dans le contexte afin de simplifier la vie de l’utilisateur.
Cela nécessite effectivement de faire des choix, de renoncer à certaines fonctionnalités, ou à
les déporter sur certains supports. Il faut avoir à l’esprit la création d’une interface distribuée qui
s’adapte aux contextes d’usages et aux utilisateurs. Une ergonomie responsive doit être avant
tout fondée sur l’utilité afin de correspondre à vos utilisateurs et d’atteindre vos objectifs.
4. RESPONSIVE DESIGN

MOBILE FIRST
Le mobile first place le mobile au cœur des stratégies digitales : au
lieu de décliner un site web pour tablettes et smartphones, on
conçoit tout d’abord une version mobile (onglets déroulants,
textes courts et synthétiques, zones de clics agrandis etc.), et on
construit ensuite le site pour ordinateur autour de cette version.
Une utilisation mobile n’a pas les mêmes objectifs qu’une utilisation
desktop. L’accent est mis sur la rapidité et l’efficacité, afin de réduire
les problèmes d’espace et le temps de chargement des pages. Il faut
donc se focaliser sur l’essentiel et simplifier la navigation au
maximum.
Luke Wroblewski (Google) :
«Partir de ce dispositif nomade en premier nous permet de :
- Profitez de l’énorme croissance de l’utilisation de l’Internet mobile
et trouver de nouvelles façons pour les gens d’utiliser nos sites et
applications.
- Embrasser les contraintes mobiles pour mieux cibler et prioriser les
services que nous concevons et dessinons.
- Utilisez les capacités du mobile pour innover en matière
d’expérience utilisateur.
- Prendre ce que nous connaissons à propos de la conception pour
le Web puis penser mobile, action, service et mise en page. »