Lors de la réalisation d’un projet digital, on va passer par plusieurs étapes dont les étapes conception et design. Elles vont former des points essentiels pour définir ce que sera l’ergonomie, le Webdesign, et surtout, l’expérience utilisateur du site Internet développé...

1. § MISE EN OEUVRE § SITE INTERNET
VER.1
05/2016 § QUELLES SONT LES REGLES A RESPECTER POUR L’ERGONOMIE DE SON SITE
INTERNET ?
NTRODUCTION
Aujourd’hui, le digital est partout. En l’espace
de quelques années, il a totalement bouleversé
nos comportements.
Pour l’entreprise, force est de constater que le
digital s’impose de plus en plus et devient
incontournable.
Le digital transforme les modèles existants.
Le consommateur devient acteur prêt à imposer
son point de vue et ses choix. On est passé
d’une société de l’information à une société
de la recommandation.
ES OPPORTUNITES DU DIGITAL
Elles sont nombreuses : de la recommandation
(bouche à oreille) aux résultats de recherche
(lien à site Internet à information) à la
visibilité sur Internet (Web, mobile, réseaux
sociaux…).
Les opportunités de développer sa présence
sur le Web ne manquent pas et deviennent
incontournables pour une entreprise.
ES DIFFERENTS PROJETS (TYPES)
Peu importe le projet, BtoC, BtoB… site vitrine,
à valeur ajoutée ou e-Commerce, il est
important de bien définir :
§ votre stratégie,
§ d’identifier votre offre unique de
produits et/ou de services,
§ de cibler vos segments de clients,
§ de définir les objectifs précis de votre
présence sur Internet.
TAPES D’UN PROJET DIGITAL
Lors de la réalisation d’un projet digital, on va
passer par plusieurs étapes dont les étapes
conception et design. Elles vont former des
points essentiels pour définir ce que sera
l’ergonomie, le Webdesign, et surtout,
l’expérience utilisateur du site Internet
développé.
Fig. 1 : Les différentes étapes d’un projet digital
I
L
L
E
1

2. A CONCEPTION
E DESIGN
EB DESIGN, ERGONOMIE &
UX DESIGN
Un projet digital demande de travailler
l’ergonomie, le Webdesign, et l’UX Design afin
que les internautes aient une expérience
utilisateur agréable. Les objectifs sont les
suivants :
1. Ergonomie
§ Ergonomie physique : adaptation de
l’outil aux caractéristiques physiologiques
et morphologiques de l’être humain
§ Ergonomie cognitive : adaptation des
outils au fonctionnement cognitif des
utilisateurs
Objectif de l’ergonomie :
Améliorer l’Interaction Homme -
Machine (IHM)
2. Webdesign
Graphisme pour support Internet…
Objectif du Webdesign :
Mettre en valeur de l’information sous
forme de contenus visuels
3. UX Design
Design de l’expérience utilisateur…
Objectif de l’UX Design :
Faire ressentir une émotion à un
utilisateur lorsqu’il utilise un service
(web ou humain) dans l’attente d’un
objectif
ETHODE DE GARRETT
Il existe une méthode simple et infaillible pour
rendre un site Internet utile, facile d’utilisation et
fiable. C’est la méthode de Garrett.
Fig. 2 : Méthode de Garrett
Les étapes sont les suivantes (de bas en haut
du schéma) :
1. Stratégie (premier étage du schéma) :
définir les besoins de l’utilisateur et les
objectifs du site
L
L
W
M
2

3. 2. Scope : déterminer les fonctionnalités
souhaitées et faire l’inventaire des contenus
3. Squelette : Arborescence, interaction,
architecture de l’information
4. Structure : Design d’information,
d’interface et de navigation -> les
storyboards
5. Surface : le Design graphique
U SQUELETTE A LA SURFACE
Les étapes 3 à 5 vont être primordiales dans la
réalisation, et surtout à terme, dans l’utilisation
du site Internet.
En résumé, ces étapes vont permettre de
travailler l’UX Design au travers de :
§ L’architecture de l’information ou
l’arborescence
§ Le zoning
§ Le Wireframe
Puis le Webdesign au travers du :
§ Graphisme
RCHITECTURE DE
L’INFORMATION
L’architecture de l’information va permettre
d’organiser la façon dont les informations seront
accessibles sur le site Internet.
Fig. 3 : Exemple d’arborescence
E ZONING
Le zoning va permettre de positionner les
différents éléments de navigation et
fonctionnalités sur les différentes pages du site
Internet.
Fig. 4 : Exemple de zoning
E WIREFRAME
Quand au Wireframe, il va permettre de créer la
maquette du site Internet. Manquera ensuite, la
couche graphique (Webdesign).
Fig. 5 : Exemple de Wireframe
’EXPERIENCE UTILISATEUR
Au-delà de la définition de l’expérience
utilisateur, un internaute qui visite un site
D
A
L
L
L
3

4. Internet aura envie d’y revenir si les 4 critères
clés sont respectés :
1. Utilité : le site a été utile au visiteur…
2. Facilité et confort d’utilisation : le
visiteur a trouvé facilement ce qu’il
cherchait…
3. Confiance : les informations trouvées
sur le site lui ont donné confiance…
4. Qualité de service : la logistique en aval
du site a tenu ses promesses…
Dans ce cadre, ce qui caractérisera une
expérience utilisateur positive sera :
§ Un nombre plus important de « premiers
visiteurs » seront convertis en utilisateurs
réguliers
§ Votre marque sera bien mémorisée. Par
conséquent,…
§ …le bouche à oreille positif sera plus
important…
§ …et drainera nombre de nouveaux
visiteurs à coût d’acquisition nul vers votre
site Internet.
§ …
A l’inverse, ce qui caractérisera une expérience
utilisateur négative sera :
§ Peu de visiteurs convertis en utilisateurs
fidélisés.
§ Mémorisation faible à nulle de votre
marque.
§ Bouche à oreille faible, ou pire, négatif…
§ Taux de conversion bas
§ Nécessité de recourir fréquemment à des
campagnes de publicité lourdes pour
maintenir un niveau minimal de chiffre
d’affaires.
§ …
ISTORIQUE ET TENDANCES…
Depuis plus de 20 ans, Internet n’a eu de cesse
d’évoluer afin d’amener toujours plus
d’expérience utilisateur agréable.
1995 à Les tableaux / Javascript
1996 à Flash
1998 à CSS
2007 à Grilles et frameworks
2010 à Responsive et flat design
ONCLUSION
Ce qui fait la qualité d’un site Web est
surtout son utilisation par les internautes.
C’est un assemblage d’expériences tels que :
§ l’accueil,
§ la sélection,
§ l’achat,
§ la livraison,
§ la consommation,
§ …
Ergonomie, utilisabilité (Webdesign) et
expérience utilisateur (UX Design) doivent
rester les maîtres mots dans toute réalisation
d’un site Internet.
H
C