SUPPORT DE COURS ET TRAVAUX PRATIQUES

Développement web

1 ère licence en Informatique de gestion

Enseignante : Nahla Baccar

Email : Baccar.naahla@gmail.com

2021-2021
 SOMMAIRE DU COURS
Développement web

Introduction au développement web

et multimédia
Les architectures multi-tiers, web statique, web
dynamique
Outils de développement web
Ergonomie web
Concept de base du multimédia
Le langage HTML5
Les feuilles de style CSS3
Mise en fonctionnement d’un site web
 INTRODUCTION AUX
Développement web

Introduction au développement web

Le développement Web est le codage ou la programmation qui
permet de faire fonctionner un site Web, selon les exigences du
propriétaire. Il traite principalement de l’aspect non conceptuel
de la création de sites Web, qui comprend le codage et l’écriture
du balisage.
Le développement Web va de la création de pages en texte brut
à des applications Web complexes, des applications de réseaux
sociaux et des applications commerciales électroniques.
Exemple des langages de programmation les plus populaires
Python, JavaScript et HTML.

4
 INTRODUCTION AUX
Développement web
Quelle est la fonction d’un développeur Web ?
Un développeur ou programmeur Web est une personne qui
prend un projet Web, qui a été pensée et réfléchie par un client
ou une équipe de conception, et la transforme en site Web. Ils le
font en écrivant des lignes de code compliqué. Pour les écrire, ils
utilisent différents langages avec une spécificité et une utilité
pour chacun d’entre eux.
Les développeurs Web ont un travail assez difficile, car ils
doivent prendre une langue que nous comprenons, comme
l’anglais, et la traduire dans une langue qu’un ordinateur
comprend, comme Python ou HTML.
Comme vous pouvez l’imaginer, cela va prendre beaucoup de
temps et d’efforts pour apprendre différents langages de
programmation ainsi que leurs utilisations.

5
 INTRODUCTION AUX
Développement web

L’architecture N-tier (anglais tier : étage, niveau), ou encore

appelée multi-tier, est une architecture client-serveur dans
laquelle une application est exécutée par plusieurs
composants logiciels distincts.

Exemple d’architecture 3-tier :

Tier de présentation : interfaces utilisateurs sur un PC
poste de travail, qui s’adressent à des applications serveur
Tier des règles de gestion : applications serveur qui
contiennent la logique de gestion et accèdent aux données
stockées dans des bases de données
Tier de base de données : serveurs de bases de données

6
 INTRODUCTION AUX
Développement web

Avantages des architectures N-tier :

Le lien entre les niveaux est défini et limité à des
interfaces
Les interfaces assurent la modularité et l’indépendance
technologique et topologique de chaque niveau

7
 INTRODUCTION AUX
ARCHITECTURES N-TIER
L e s d i ff ér en t es c o u c h es d ’ u n e ar c h i t e c t u r e 4 - t i er :

4
 INTRODUCTION AUX
ARCHITECTURES N-TIER
L e s d i ff ér en t es c o u c h es d ’ u n e ar c h i t e c t u r e 4 - t i er :
La couche de présentation contient les différents
types de clients, léger (ASP, JSP) ou lourd (Applet)
La couche applicative contient les traitements
représentant les règles métier (créer un compte de
facturation, calculer un amortissement ... )
La couche d'objets métier est représentée par les
objets du domaine, c'est à dire l'ensemble des entités
persistantes de l'application (Facture, Client ... )
La couche d'accès aux données contient les usines
d'objets métier, c'est à dire les classes chargées de créer
des objets métier de manière totalement transparente,
indépendamment de leur mode de stockage (SGBDR,
Objet, Fichiers, ...)

5
 INTRODUCTION AUX
ARCHITECTURES N-TIER
La valeur ajoutée des architectures n-tier :
Cette séparation par couches de responsabilités
sert à découpler au maximum une couche de l'autre
afin d'éviter l'impact d'évolutions futures de
l'application.
Par exemple : si l’on est amené à devoir changer de
base de données relationnelle, seule la couche
d'accès aux données sera impactée, la couche de
service et la couche de présentation ne seront pas
concernées car elles auront été découplées des
autres.

6
 INTRODUCTION AUX
ARCHITECTURES N-TIER
• Les différentes technologies côté client :

– HTML, XML, XSL sont des langages de marquage/balisage.

• HTML, CSS, XML, XSL sont des standards du W3C

• JavaScript et Java sont des langages standards

• VBScript est un langage propriétaire

• Active X est une technologie objet propriétaire7

 INTRODUCTION AUX
ARCHITECTURES N-TIER
 Les différentes technologies côté serveur :
– JSP (Java Server Pages de Sun)
Comme la plupart de ses concurrents, il permet d'intégrer des
scripts, ici sous forme de code Java, dans les pages html.
Lorsqu'une page JSP est appelée pour la première fois, elle est
compilée et transformée en servlet (programme côté serveur).
Ce servlet est exécuté et produit un contenu au format html.

– Java / J2EE (Java 2 Enterprise Edition, Sun)

Promu par la société Sun, l’avantage principal de java est d'être
indépendant du système d'exploitation (interprété par une
machine virtuelle). Java offre de plus la particularité de pouvoir
être exécuté côté client (applets) ou côté serveur (servlets). Il
nécessite une bonne connaissance technique et des
concepts objet. 8
 INTRODUCTION AUX
ARCHITECTURES N-TIER
 Les différentes technologies côté serveur :
– ASP (Active Server Pages de Microsoft)
Cette technologie est basée sur des scripts côté serveur, écrits
en Vbscript ou Javascript. Ces scripts sont exécutés par le
serveur et leur résultat est produit sous forme de pages html
standard. Un des avantages d'ASP est sa facilité de mise en
œuvre. Largement répandue, cette technologie présente
toutefois le désavantage d'être intimement liée à
l'environnement Windows Server et au serveur IIS.

– C# / .Net (Microsoft)
Cette technologie ressemble en de nombreux points à la
technologie Java / J2EE. Elle présente cependant encore de
nombreuses faiblesses en terme de portabilité serveur,
multi-plateformes, scalabilité ...
9
COURS-DEV-WEB

 Les différentes technologies côté serveur :

 PHP (Hypertext PreProcessor)
PHP connaît un succès toujours croissant sur le Web et
se positionne comme un rival important pour ASP et
JSP.
L'environnement Linux est sa plateforme de
prédilection. Combiné avec le serveur Web Apache et
la base de données MySQL, PHP offre une solution
particulièrement robuste, stable et efficace,
offrant en outre l'avantage d'être gratuite, tous
ces logiciels venant du monde des logiciels libres (Open
Source).

11
COURS-DEV-WEB

 Les différents réseaux :

• Internet : Réseau de portée mondiale
interconnectant des ordinateurs et des réseaux
personnels et professionnels.
• Intranet : Réseau de portée locale
interconnectant des ordinateurs et des réseaux
réservés à une entreprise.
• Extranet : Réseau interconnectant plusieurs

12
COURS-DEV-WEB

13
COURS-DEV-WEB

Qu’est-ce qu’une page Web statique (page statique)

E n s i m p l i fi an t , d i s o n s q u ’u n e p ag e We b s t at i q u e es t u n e p ag e
W e b d o n t l a m ac h i n e ( l e s erv eu r W e b , l ’o rd i n at eu r) s u r l aq u el l e
cel l e - ci es t s t o ck é e, n e fai t au cu n e ffo r t p o u r l a cré er l o rs q u e c el l e-
ci es t d e m a n d é e p ar l a m a ch i n e q u i v e u t l ’af fi ch é e à t ra v e rs
s o n n a v i g at eu r We b .
O n d i t a l o r s q u e l e s e r v e u r r e s t e s t a ti q u e p o u r l a c r é a t i o n d e l a p a g e
I n t e r n e t ( il n e f a i t r i e n p o u r c r é e r l a p a g e W e b ) .
L e s p a g e s s t a ti q u e s i m p li q u e n t d o n c q u e c e l l e s - c i d o i v e n t d é j à
ex i s t er s u r l a m ac h i n e ( l e s erv eu r W e b , l ’o rd i n at eu r), a v a n t q u e
l ’o n en f ac e l a d e m a n d e d ’affi c h a g e . C es p a g es w eb d i t es
s t a ti q u e s e n g é n é r a l e s o n t c r é é e s p a r u n W e b m a s t e r . L a p a g e W e b
s t a ti q u e a a u s s i u n e a u t r e p a r t i c u l a r it é , l ’ i n t é g r a l it é d u c o d e q u i l a
co m p o s e v a êt re i n t er p r ét é, co m p ri s d i rect e m e n t p ar l e n a v i g at eu r,
o n d i t q u e l e co d e d e l a p ag e p ro g r a m m é e es t éq u i v al en t au c o d e
d e l a p a g e a ffi ch é e (p ag e p ro g ra m m é e = p a g e affi ch ée) .
14
COURS-DEV-WEB

L e s p a g e s d it e s s t a t i q u e s p o r t e n t e n g é n é r a l e
l ’ e x t e n s i o n . h t ml o u . h t m .
R m q : l e s si t e s I n t e r n e t f a i t i n t é g r a l e m e n t d e p a g e s w e b
statiques sont de nos jours très rares dû à l’évolution et des besoins
d e s u t i li s a t e u r s e t d u W e b .

15
COURS-DEV-WEB

Circuit d’une page Web statique

16
COURS-DEV-WEB

Qu’est-ce qu’une page Web dynamique (page dynamique)

U n e p ag e W e b d y n a m i q u e, es t u n e p a g e W eb q u i n ’ ex i s t e p as en
t an t q u e t el l e s u r l a m a c h i n e (l e s er v eu r We b ) m ai s q u i es t cré ée
s eu l e m e n t l o rs d e s a d e m a n d e p ar l a m ac h i n e, l ’o rd i n at e u r q u i v eu t
l ’affi ch ée à t rav ers s o n n av i g at eu r w eb .
O n d i t a l o r s q u e l e s e r v e u r c r é é d y n a mi q u e m e n t l a p a g e I n t e r n e t à
l a d e m a n d e ( il m e t t o u t e n œ u v r e p o u r c r é e r l a p a g e W e b ) .
P o u r c ré er l a p a g e We b d y n a m i q u e , b i en s o u v e n t l e s er v e u r
W e b ( l ’ o r d i n a t e u r ) u t i li s e t o u t e u n e m é c a n i q u e d e c o n s t r u c ti o n
p o u r p o u v o i r cr ée r l a p ag e. E x e m p l es (s i l e l an g ag e P H P e s t ch o i s i )
P o u r c o n s t r u i r e l a p a g e W e b o n p e u t r e c o u r i r à l ’ u ti l i s a ti o n s d e
17
COURS-DEV-WEB

p l u s i e u r s s c r i p t s P H P ( s i o n c o n s t r u it n o t r e s i t e I n t e r n e t s e l o n
l e mo d è l e M . V . C . ( M o d è l e V u e C o n t r ô l e u r ) , m a i s a u s s i r e c o u r i r à
l ’ u ti l i s a t i o n d ’ u n e b a s e d e d o n n é e s d a n s l a q u e l l e e s t s t o c k é e l e s
t ex t e , …
R m q : B i e n s o u v e n t l a m é c a n i q u e d e c o n s t r u c ti o n d e s p a g e s
W e b p o u r l a c r é a t i o n d e s it e I n t e r n e t e s t u n C M S . L e s p l u s c o n n u s
é t a n t W o r d Pr e s s , J o o m l a , D r u p a l , Pr e s t a S h o p , …
C o n t r ai re m en t à u n e p a g e We b s t at i q u e, l a p ag e We b c ré é e
d y n a m i q u e m e n t n e c o n t i e n d r a d o n c p a s t o u t e s l e s c a r a c t é r i st i q u e s
t ech n i q u es (l an g ag es d e p ro g ra m m at i o n s , … ) q u i o n t s er v i à s a
création. La page Web créée ne contiendra donc que les
c a r a c t é r i s ti q u e s ( l a n g a g e s d e p r o g r a m m a t i o n + t e x t e ) q u e
l e n a v i g at e u r We b s er a cap ab l e d ’i n t er p r ét er ( co m p r en d r e ) p o u r
q u e c el l e- ci p u i s s e êt r e affi ch é e p ar ce l u i -ci . O n d i t au s s i q u e
ces p ag es W e b s o n t s écu ri s ées ca r l es d o n n ée s , i n fo r m a t i o n s
q u ’ e l l e s c o n ti e n n e n t n e s o n t q u e c e l l e s q u e l ’ o n v e u t t r a n s m e t t r e
l o rs d e l eu r affi ch ag e a u t rav e rs d u n av i g at eu r.
18
COURS-DEV-WEB

L e s p a g e s d it e s d y n a m i q u e s p o r t e n t b e n s o u v e n t l ’ e x t e n s i o n
. P H P, . A S P X o u d ’ au t r es en co r e.

Circuit d’une page Web dynamique

19
COURS-DEV-WEB

Circuit d’une page Web dynamique

 Quelle est la différence entre les pages Web

statiques et dynamiques ?
– Il ex i s t e es s en t i el l e m e n t d e u x p ri n c i p au x t y p es d e s i t es We b –
st a t i q u e e t d y n a m i q u e .
L e s s i t e s W e b s t a t i q u e s c o n s t i t u e n t l e t y p e d e s it e W e b l e p l u s
él é m e n t ai re , s an s co d a g e n i b as e d e d o n n é es p ers o n n al i s é s , et l e
p l u s f a c i l e à c r é e r . L e s s it e s W e b d y n a mi q u e s p e u v e n t a f f i c h e r d e s
co n t e n u s d i ffér en t s à p art i r d u m ê m e co d e s o u rc e, ce q u i l es re n d
p l u s d y n a m i q u e s e t s o p h i st i q u é s .

20

Pages Web statiques Pages Web dynamiques

COURS-DEV-WEB

Les pages Web statiques resteront les mêmes jusqu’à ce que quelqu’un le Les pages Web dynamiques sont comportementales et ont la capacité de
Présentation modifie manuellement, à moins que quelqu’un le modifie. produire un contenu distinct pour différents visiteurs.
Base de données N’utilise pas de bases de données Une base de données est utilisée.
Temps de chargement de la page Demande moins de temps Demande plus de temps
Changement d’information Se produit rarement Fréquemment
Complexité Simple à concevoir. Compliqué à construire.

N o u s p r é s e n t o n s i c i u n e c o m p a r a i s o n i mp a r t i a l e e n t r e l e s s it e s
Web statiques et dynamiques, tout en identifiant certains points
c l é s s u r l e s q u e l s i l e s t p r é f é r a b l e d e c o n c e v o i r d e s s it e s W e b .

21
COURS-DEV-WEB

 Les outils de développements web

L e d é v el o p p e m e n t w e b g ag n e r ap i d e m en t e n p o p u l ari t é e t d e
n o u v el l es f aço n s d e l ’ a p p re n d r e v o i en t l e j o u r p res q u e
q u o t i d i e n n e m e n t . Ce t t e c r o i s s a n c e e s t a c c o m p a g n é e d e t o u t u n
a r s e n a l d ’ o u ti l s c r é é s d a n s l e b u t d ’ a s s i s t e r l e s d é v e l o p p e u r s n o n
s eu l e m e n t d an s l eu r a p p ren t i s s ag e, m ai s a u s s i d an s l e u r
p r o d u c t i v i t é a u t r a v a i l.
M a î t ri s er l es co m p ét e n ces cl és es t u n e ch o s e, m ai s es s a y e r d e
r e s t e r a u f a i t d e p l u s i e u r s o u t il s e n e s t u n e a u t r e . I l e s t d o n c
e s s e n t i e l d ’ ê t r e s é l e c t i f . Po u r v o u s m e t t r e s u r l a b o n n e v o i e , n o u s
a v o n s s é l e c ti o n n é l e s c i n q o u t i l s q u e v o u s s e r e z a m e n é à u ti li s e r l e
p l u s u n e f o i s q u e v o u s s ere z d ev e n u u n d é v el o p p e u r w e b ac co m p l i .

22
COURS-DEV-WEB

1. C h r om e D e vTo ol s
Faites place aux outils de développement ! Ils sont accessibles dans
G o o g l e C h r o m e , M o z i l l a Fi r e f o x o u t o u t a u t r e n a v i g a t e u r d e v o t r e
ch o i x et v o u s p er m et t e n t d e j et er u n œ i l s u r l e fo n ct i o n n e m e n t
interne d’un site Web et de ses applications. Ce sont des ressources
t r è s u ti l e s , c a r e l l e s v o u s p e r m e t t e n t :
 D’ e x a m i n e r et d e m o d i f i er l es él é m en t s H T M L ;
 D ’ a j o u t e r e t d e t e s t e r d e s n o r m e s d e st y l e C S S ;
 D e c o n s u l t e r l e s f o n c t i o n s J a v a Sc r i p t d e l a p a g e ;
 D ’i d en t i fi er q u el s s o n t l es él é m e n t s q u i s e ch ar g en t v i t e o u
l en t e m e n t .

23
COURS-DEV-WEB

2. Visual Studio Code

En tant que développeur Web, vous aurez BEAUCOUP de code à écrire.
Il est donc tout à fait normal que nous vous assistions dans votre
recherche du meilleur éditeur sur le marché.

Il existe pas mal de bons éditeurs (Sublime Text est l’un de nos favoris),
mais Visual Studio Code est l’éditeur NUMÉRO UN.
Selon les développeurs web expérimentés, ses points forts sont
l’intégration de GitHub et la saisie semi-automatique IntelliSense. Visual
Studio Code propose également une interface ergonomique, prend en
charge plusieurs langages et met en évidence votre syntaxe

24
COURS-DEV-WEB

3. FileOptimizer (PC) / ImageOptim (Mac)

Ces deux outils vous permettent d’optimiser vos images.
ImageOptim est rapide, simple et ergonomique C’est un excellent outil de
compression d’images vous permettant d’économiser de l’espace de
stockage sur votre ordinateur.

FileOptimizer fait la même chose, mais au lieu de ranger les fichiers dans
un dossier compressé, il compresse le fichier d’origine.

25
COURS-DEV-WEB

4. Bootstrap
Vous n’avez pas envie de passer trop de temps sur le CSS de vos sites
Web ? Alors Bootstrap est l’outil qu’il vous faut. C’est un kit CSS créé
par des développeurs de Twitter, qui est vite devenu l’infrastructure CSS
de référence. Deux de ses fonctionnalités les plus appréciées sont :
 Une façon facile et rapide de concevoir des sites Web attrayants et
dynamiques.
 Une énorme communauté. Comme c’est un outil largement utilisé, il
existe de nombreux modèles de sites et beaucoup de tutoriels utiles. La
page GitHub officielle de Bootstrap est très active pour que l’outil soit
amélioré continuellement !
Il y a de plus en plus de nouvelles infrastructures
comme Materialize et Mui. Si vous souhaitez étendre encore plus
l’éventail de vos outils, ceux-ci pourraient constituer un bon départ.

26
COURS-DEV-WEB

5. GitHub
Avez-vous l’habitude d’écrire du code et de collaborer avec d’autres
développeurs ? Aimeriez-vous pouvoir suivre les modifications de votre
code en toute sécurité/sans perdre toutes vos données en cas de panne de
votre ordinateur ou serveur principal ?
De nos jours, la gestion des versions est essentielle. Git, un outil créé par
Linus Torvald, est parfait pour cela.

27
COURS-DEV-WEB

Q u 'e s t - c e q u e l 'er g o n o m i e w eb ? 9 r èg l es er g o n o m i q u e s d e s i t e
w eb
L'ergonomie web est un aspect primordial à comprendre et à optimiser
pour avoir des résultats avec son site web. Mais alors comment
l'optimiser ? Quelles sont les règles ergonomiques à respecter ?

Qu’est-ce que l’ergonomie web ? La définition

L’ergonomie d’un produit web représente l’ensemble des aspects de
l’interface en question permettant une utilisation efficace, agréable,
facile…
L'objectif ultime de l’ergonomie web est finalement de faciliter
l'interaction entre le site web et l'utilisateur.
Aussi appelée utilisabilité, l’ergonomie web est donc définie par 5 grands
composants qualitatifs :

28
COURS-DEV-WEB

La capacité d’apprentissage : est-il facile pour les nouveaux utilisateurs

d’accomplir des tâches de base et d’apprendre rapidement le
fonctionnement du design ?
La satisfaction : l’interface est-elle agréable pour les utilisateurs ?
L’efficacité : une fois que les utilisateurs ont appris le fonctionnement du
design de l’interface, à quelle vitesse effectuent-ils les tâches ?
La mémorisation : lorsque les utilisateurs reviennent sur l’interface, avec
quelle facilité peuvent-ils utiliser l’interface en question ?
Les erreurs : y a-t-il des erreurs que les utilisateurs commettent sur
l’interface ? Quelle est la gravité de ces erreurs ?
D’autres peuvent venir compléter ces principaux composants mais ceux
énumérés sont les plus importants.
Dans tous les cas, l'élément phare est l’utilité. Est-ce que le design de
l'interface et tout ce qui l’entoure répond aux besoins des utilisateurs ?
L'utilité et l’utilisabilité représentent la paire qui permet une ergonomie
optimale et une interface utile.
29
COURS-DEV-WEB

Pourquoi l’ergonomie d’un site web est-elle importante

?

L’ergonomie est essentielle au bon fonctionnement d’un site web. Si

l’utilisabilité n’est pas optimisée, si les règles ergonomiques de bases ne
sont pas respectées, les utilisateurs s’en vont.
Nous sommes dans une aire où les utilisateurs peuvent vite être agacés.
Une aire ou dès qu’un visiteur rencontre la moindre petite erreur, sa
solution est de quitter la page.
Si l’utilisateur ne comprend pas ce que l’entreprise propose, il s’en va. Si
l’utilisateur se perd sur le site, pareil, il quitte le site.
Un site web avec une mauvaise ergonomie est également un site web qui
ne répond pas aux attentes des utilisateurs.
30
COURS-DEV-WEB

L’ergonomie est donc un concept large qui prend en compte la faculté

d’un produit à donner aux utilisateurs ce qu’ils cherchent de la meilleure
des manières.
L’ergonomie et l’utilisabilité permettent donc d’optimiser plusieurs
points :
Le taux de conversion
L'expérience utilisateur
Le nombre de trafic, sur différentes pages
Le taux de rebond
Les performances des utilisateurs, s'ils utilisent beaucoup de
fonctionnalités
L’image de la marque
La fidélisation des utilisateurs/clients
Pour un site e-commerce par exemple, une mauvaise ergonomie
empêchera le visiteur de trouver rapidement et facilement un produit qui
31
COURS-DEV-WEB

lui convient. Ou pire, une mauvaise utilisabilité empêchera l’utilisateur

de passer sa commande dans de bonnes conditions.
L’ergonomie est donc un point majeur dans lequel les entreprises doivent
investir. Et le marché l’a bien compris. Que ce soit avec des audits
ergonomiques, des tests utilisateurs, des évaluations heuristiques,
beaucoup d’entreprises se mettent à utiliser des méthodes plus ou moins
complexes pour optimiser l’ergonomie globale et l’utilisabilité de leur
interface.

Comment améliorer l’ergonomie et l’utilisabilité de son site

web ?

Optimisation technique

Avant d’aller plus loin dans des méthodes complexes, il est d’abord primordial d’optimiser son site au niveau technique.
Si les bases ne sont pas respectées, rien ne sert d’aller c hercher des techniques révolutionnaires.

N'essayez pas de réinventer la roue, respectez avant tout les règles universelles pour une ergonomie web optimale.

32
COURS-DEV-WEB

Il y a trois règles de base qui mettent tout le monde d’accord. Ici, pas besoin de faire des recherches utilisateurs, de
savoir si oui ou non ces techniques vont fonctionner.

Les trois points qui peuvent améliorer directement l'ergonomie de votre site web sont :
La vitesse de chargement
L’accessibilité

Le responsive
La vitesse de chargement joue beaucoup sur l'utilisabilité d'une interface. Si un site web met du temps à charger, il a
des chances de décourager facilement les visiteurs.
L’accessibilité permet elle aussi d’améliorer facilement un site web. Pour une bonne ergonomie, un site se doit d' être
accessible sur un maximum de navigateurs. Il est important d’éviter le plus possible des bugs ou des casses sur certains
navigateurs, notamment les plus vieux. Il est également nécessaire de concevoir des pages adaptées pour les
personnes handicapées.
Le responsive est le fait de concevoir un design de site adapté pour les téléphones mobiles et tablettes. De plus en plus
de personnes naviguent sur internet à l’aide de smartphone. Si votre site web n'est pas adapté pour les plus petits
écrans, vous risquez de passer à côté de clients et d’une utilisabilité optimisée.

Évaluation heuristique

L’évaluation heuristique est une méthode d'analyse d’interface permettant de détecter les possibles points de
frictions, les problèmes d’utilisabilité et d’ergonomie.

33
COURS-DEV-WEB

34
COURS-DEV-WEB

Cette évaluation est basée sur l’expérience des spécialistes qui analysent l’interface. Les résultats ne sont pas garantis
d’être parfaitement justes, mais cette méthode a le mérite d'être rapide à mettre en place. De plus, les problèmes
détectés sont dans la plupart du temps des règles ergonomiques évidentes ne demandant aucune recherche.

Vous pouvez demander gratuitement une évaluation heuristique de +75 critères UX pour votre site web à un expert UX
de l'équipe et obtenir un plan d'action pour son op timisation. Demander mon Audit UX gratuit.

Bien sûr, cette évaluation est mieux si elle est faite en groupe avec des utilisateurs, des développeurs, des designers,
etc. Mais il doit y avoir au moins quelques spécialistes afin d’avoir un processus cohérent.

L'objectif ici est de récolter des avis et des opinions basées sur plusieurs critères :
La clarté : le contenu et l’offre sur l’ensemble du site sont-ils clairs ? Comment est-il possible de les rendre encore plus clairs et
compréhensibles ?
La valeur : le site web apporte-t-il de la valeur à l’utilisateur ? Comment pouvons-nous améliorer ce point ?
Pertinence : les pages du site répondent-elles aux attentes des utilisateurs. Comment les pages peuvent correspondre encore
plus ce qu’ils cherchent ?
Les frictions : quels sont les aspects qui peuvent créer du doute, des frustrations, des difficultés ? Comment réduire l’impact de
ces points de friction ?

En vous appuyant sur cela, vous serez en mesure de savoir quels sont les points pouvant améliorer l’utilisabilité et
l’ergonomie de votre site web.

Attention seulement, les observations que vous pouvez faire ne sont pas garanties d’êtr e de bonnes solutions pour
améliorer votre site web. Cette évaluation heuristique vous permet de trouver des indices sur ce qu’il est possible
35
COURS-DEV-WEB

d'améliorer. Le mieux est de tester des améliorations en lien avec vos observations afin de voir si oui ou non el les sont
cohérentes.

Test utilisateur

36
COURS-DEV-WEB

37
COURS-DEV-WEB

Au-delà de simples optimisation techniques, il existe des améliorations possibles qui sont plus compliquées à mettre en
place.

Les marchés, les personas, les différents secteurs d'activité, les cibles, les tendance s, etc sont des facteurs qui rendent
l’optimisation de l’utilisabilité plus complexe.

A un moment donné, les règles basiques d’ergonomie ne suffisent plus car chaque entreprise est différente. Il faut donc
des solutions sur mesures pour chaque site web en fonction de leur cible, des comportements de leurs utilisateurs, de
leurs données démographiques, etc.

Pour améliorer un maximum l’ergonomie et l’utilisabilité d’un site web, il faut donc connaître parfaitement ses
utilisateurs.

C’est là que le test utilisateur entre en jeu.

Le test utilisateur (ou test d’utilisabilité) consiste faire tester une interface par des utilisateurs de la cible en questio n. Le
but est de donner à l’utilisateur testé, des tâches à effectuer afin d’observer l'efficacité de l'inter face en matière
d’utilisabilité.

Les objectifs des tests utilisateurs sont donc :

Identifier les problèmes et les points de frictions possibles sur l’interface et son design
Détecter les opportunités d’amélioration

38
COURS-DEV-WEB

Connaître les comportements des utilisateurs ciblés

Les tests utilisateurs sont nécessaires pour optimiser au maximum l'expérience utilisateur, l'ergonomie et l'utilisabilité
d’un site web ou d’une application.

Même un expert en UX ne peut pas savoir à l’avance ce qui va fonctionner le mieux. Grâce à son expérience, il peut
détecter quelques problèmes grâce à l’évaluation heuristique. Mais il est impossible de concevoir un design UX parfait
sans recherche sur les utilisateurs.

9 règles ergonomiques à respecter sur son site

1 - La clarté

39
COURS-DEV-WEB

40
COURS-DEV-WEB

Rien de pire pour un utilisateur d’être sur un site avec du contenu qu’il ne comprend pas. Surtout dans le cas d’un e -
commerce, les gens n’achètent pas ce qu'ils ne comprennent pas. L’humain a peur de l’inconnu, c’est comme ça.

C’est pour cela que si vous voulez que l'ergonomie de votre site soit bonne, il faut que celui -ci soit le plus clair possible.
Que ce soit au niveau des descriptions des produits, des services, de sa proposition de valeur, de sa position sur le
marché, de son prix, etc.

La simplicité fonctionne mieux que la complexité. Si votre texte demande des efforts pour être lu et assimilé, c'est que
vous êtes dans le faux.

Travaillez la clarté de votre site de sorte à ce que son contenu soit agréable à consommer et que l’on comprenne
facilement de quoi il traite.

2 - La hiérarchie visuelle

Le design de votre site est important pour plusieurs choses. C'est un moyen qui va vous permettre de montrer à vos
utilisateurs ce qui est important et ce qui l’est moins. Cela donne finalement au visiteu r un ordre dans votre contenu.

Chaque page de votre site doit montrer rapidement les informations recherchées par vos utilisateurs. Et cela dans le bon
ordre.

41
COURS-DEV-WEB

L’utilisateur doit faire le moins d’efforts possible pour accéder à ce qu'il cherche. C'est l'ob jectif premier de
la hiérarchisation visuelle.

3 - L’accessibilité

42
COURS-DEV-WEB

43
COURS-DEV-WEB

Le principe de l'accessibilité sur les sites web représente le fait que chaque individu, peu importe sa situation, ait accès
à votre site comme tout le monde. Peu importe sur quel navigateur il se trouve, s’il est sur mobile, s’il a des problèmes
de vue ou s'il est handicapé.

L'objectif est de rendre le site le plus accessible possible. Cela passe par :
un design adapté à tous les formats d’écran
un code adapté pour un maximum de navigateur
des images avec des descriptions
des vidéos traduites

des contrastes réussis

Alors bien sûr, certains points sont plus importants que d'autres à optimiser car il concerne peu de personnes. Mais pour
une ergonomie parfaite, l'ergonomie doit être travaillée dans tous ces aspects de l'accessibilité.

4 - Gestion des points de friction

Il est difficile, voire impossible de supprimer tous les points de friction qui peuvent exister sur une interface. Mais vous
pouvez les minimiser.

Les frictions qui peuvent exister sur un site sont dû aux doutes, aux craintes et aux hésitations des utilisateurs.

44
COURS-DEV-WEB

Dites-vous que quand un utilisateur se rend sur un site, il se pose de multiples questions :
Ce site vaut-il vraiment la peine ?
Puis-je faire confiance ce site ?
Est-ce une arnaque ?
Est-ce le bon choix pour moi ?

Est-ce que d’autres utilisateurs aiment ce que propose ce site ?

Et cela concerne surtout les e-commerces, où les parcours d'achat sont parfois longs et gênants.

Les éléments qui peuvent ajouter de la friction à un site peuvent être :

Un design non professionnel
Trop peu de preuve sociale
Trop peu d’informations sur l’entreprise. Site anonyme
Processus trop compliqué. Comme des formulaires trop longs

Une incompréhension de l’interface. Les utilis ateurs ne comprennent pas le site

Tous ces points de friction peuvent être réglés en améliorant l'expérience utilisateur de l'ensemble du site web.

5 - Les normes d'utilisation et de design

45
COURS-DEV-WEB

Si votre site web est difficile à utiliser et compliqué à comprend re, l'ergonomie n’est pas optimisée. Même si vous
souhaitez que votre site soit unique, personnalisé et qu’il sorte du lot, vous ne pouvez pas ignorer complètement les
conventions du web.

Sachez qu'il existe un tas de standard concernant le web design avec lesquels les utilisateurs sont déjà familiers. Alors
pourquoi ne pas les respecter.

En respectant les standards existants, les utilisateurs comprendront facilement votre site web. L'objectif ici est de rendre
votre site web intuitif. Il faut que vos visiteurs soit le plus rapidement possible à l’aise avec votre interface et vos
fonctionnalités.

Voici quelques conventions connues :

Le menu doit être en haut ou à gauche
Le logo doit être un lien renvoyant l’utilisateur sur la page d'accueil
Les icônes standard achat (panier) ou de contact (enveloppe)
Les infos de contact positionnées dans le bas de page

Liens d'appels à l’action sous forme de boutons

Ne vous sentez pas bloqué par ces conventions. Vous pouvez tout de même modifier ces éléments à votre sa uce.
L’important ici est juste de rester dans l’esprit afin que les utilisateurs comprennent rapidement votre interface.

6 - Design de qualité
46
COURS-DEV-WEB

Les utilisateurs ont tendance à juger rapidement si un site web est ‘’moche’’ ou ‘’beau’’. En fait, si vous ave z créé votre
site web vous-même et que vous n’êtes pas designer, il y a de fortes chances que votre site ne soit pas considéré
comme ‘’joli’’.

Un web design réussi n’est pas forcément un design avec beaucoup de couleurs, beaucoup de contrastes, d’animatio ns,
des visuelles, d’animations, etc. On a observé que les sites qui fonctionnaient le mieux étaient ceux avec un design
simple et minimaliste.

Cela peut être contre-intuitif car on peut se dire qu’un site trop simple est un site sans personnalité, sans s aveur et sans
image de marque forte. Mais un site qui montre sans cesse des éléments non nécessaires n’est pas un site réussi.

Les éléments de design doivent avoir une signification et doivent être justifiés.

7 - Le parcours client

Le site web doit représenter un parcours facilement compréhensible pour les utilisateurs. Il doit savoir où il se trouve, sur
quelle page, dans quelle section, dans quelle catégorie…

47
COURS-DEV-WEB

48
COURS-DEV-WEB

Par exemple pour un e-commerce, lors du parcours d’achat, il doit savoir précisément où il s e trouve dans ce parcours.
Est-il sur la page d’inscription ? Combien d’étapes lui manque -t-il avant d’arriver au paiement ?

Le but ici est d’avoir un site web avec le maximum d’informations permettant à l'utilisateur de l'état de sa situation sur le
site internet.

Pour cela, plusieurs éléments doivent être optimisés :

Le menu doit contenir les pages principales.
Un état de hover doit être appliqué sur le nom de la page active pour une meilleure compréhension.
Un récapitulatif de toutes les pages peut être présent sur le bas de page pour présenter l'arborescence des pages du site.
Un fil d'ariane sur les pages pour montrer la localisation concernant la profondeur d'une URL.

Une mention concernant les étapes manquantes avant de passer au paiement sur un site e-commerce par exemple.

8 - La confiance

L’ensemble de votre site web doit donner confiance à vos utilisateurs. Certains internautes ont tendance à facilement
sentir l’arnaque, notamment sur des e-commerces.

Pour avoir une ergonomie optimisée, vous devez donc faire en sorte que vos visiteurs se sentent en confiance face à
votre interface.

49
COURS-DEV-WEB

Et cela passe par plusieurs choses :

La sécurité : votre site est-il sécurisé ? Utilise-t-il le HTTPS ? Les paiements sont-ils réglementés ?
Les mentions légales : votre site est-il en règle ? Contient-il toutes les informations nécessaires ?
Les recommandations : y a-t-il des avis clients sur votre site ?
Les informations : êtes-vous transparent par rapport à votre activité ? Par rapport aux prix, à vos produits, v os services, votre
équipe ?

L'objectif ici est d’être le plus authentique possible. Les gens n'aiment pas avoir des doutes sur une entreprise ou sur
une personne. Si vous vous cachez derrière votre logo, les utilisateurs seront plus méfiants concernant vot re site web et
votre entreprise.

9 - La vitesse de chargement

52% des acheteurs en ligne affirment que le chargement rapide des pages influence leur fidélité à un site.

Une bonne ergonomie passe par un site web qui se charge rapidement. Au -delà de 5 secondes, une page est considérée
comme longue à charger.

Pour optimiser la vitesse de chargement de l’ensemble de votre site, plusieurs points sont à optimiser :
La taille des images
La taille des pages
Le code HTML/CSS/JS
L'hébergement
50
COURS-DEV-WEB

Les animations

L'objectif est de simplifier les aspects techniques des pages pour avoir un rendu visuel plus rapide. Que ce soit sur
mobile ou sur pc.

Résumé

�Qu’est-ce que l’ergonomie web ? La définition

L'ergonomie web (ou utilisabilité) est un terme qui désigne l'o ptimisation de l'interface web concernant les aspects qui
viennent améliorer le confort, la facilité d'utilisation, l'efficacité, la vitesse, l'utilité, la sécurité, la lisibilité, et c.

Pourquoi optimiser l’ergonomie de son site web ?

L’ergonomie d’un site web permet de créer une expérience utilisateur de qualité, une meilleure fidélité client et un taux
de conversion optimisée.

51
COURS-DEV-WEB

�Comment améliorer l'ergonomie de son site web ?

Pour optimiser l’ergonomie d’un site web, plusieurs techniques peuvent être u tilisées. Des améliorations techniques
doivent d'abord être faites pour respecter les normes ergonomiques de base, comme l'accessibilité, le responsive, la
vitesse de chargement, la navigation, le design, etc. Ensuite, pour aller plus loin, des évaluations heuristiques ou des
tests utilisateurs peuvent être mis en place pour obtenir des retours plus précis sur des potentiels problèmes concernant
l'utilisabilité.

52