LES LOGICIELS DU WEB

B2- SDC ESCM

PARTIE I
Table des matières
I. LES BASES......................................................................................................................................... 3
1.1. Terminologies .......................................................................................................................... 3
1.2. Les étapes d’un projet Web ..................................................................................................... 8
1.3. Intégration de votre charte graphique dans le design d’un site web ...................................... 9
II. DESIGN D’UN SITE WEB ................................................................................................................. 11
2.1. Le Skeuomorphisme .............................................................................................................. 11
2.2. Le Flat design : Design minimaliste........................................................................................ 19
2.3. Materials Design, une tendance qui grimpe ......................................................................... 26
III. ERGONOMIE DE SITE WEB......................................................................................................... 29
3.1. Quels sont les objectifs de l’ergonomie web ......................................................................... 29
3.2. UX et UI.................................................................................................................................. 30
3.3. Exemples d'ergonomie web à connaître ............................................................................... 30
3.3.1. Slogan ............................................................................................................................ 30
3.3.2. Simplicité ....................................................................................................................... 30
3.3.3. Lisibilité de la page ........................................................................................................ 30
3.3.4. Lisibilité du texte............................................................................................................ 31
3.3.5. Mise en forme ............................................................................................................... 32
3.3.6. Contraste des couleurs .................................................................................................. 32
3.3.7. Bouton d'action ............................................................................................................. 33
3.3.8. Simplicité de la navigation ............................................................................................. 33
3.3.9. Formulaires simplifiés.................................................................................................... 34
3.3.10. Champ de recherche ..................................................................................................... 35
3.3.11. Page 404 ........................................................................................................................ 35
 I. LES BASES
1.1. Terminologies

1.1.1. Arborescence d’un site internet (Menu):

L'arborescence d'un site web désigne l'architecture des différents contenus et des pages d'un site
internet ce qui permet à l'internaute de naviguer rapidement d'une page à l'autre. Elle est construite
en plusieurs niveaux de hiérarchie : la page d'accueil, les catégories et les sous-catégories.

Cette hiérarchie des contenus permettra d'accroître l'expérience utilisateur et de booster le

référencement naturel.

Importance de l’arborescence d’un site internet :

• Guider les intervenants au projet

L'arborescence du site web est matérialisée sous forme de diagramme de type carte mentale. Ce
support de travail permet de visualiser le menu de navigation et l'emplacement des liens internes.
Chef de projet, responsable SEO et développeur : plusieurs personnes collaborent dans le cadre de la
création ou de la refonte d'un site web. Grâce à l'arborescence, tous les intervenants sont d'accord et
avancent dans la même direction.

• Tracer un parcours utilisateur optimal

L'arborescence du site web est déterminante du parcours utilisateur. Proposer un menu de

navigation logique et des liens internes pertinents guide naturellement les visiteurs vers les
informations souhaitées. Les visiteurs gagnent du temps, et trouvent facilement les contenus qu'ils
recherchent. En conséquence :

o L'expérience utilisateur (UX) est bonne.

o Le taux de rebond est faible.
o Le temps de visite est élevé.
o Le taux de conversion est optimisé.

• Améliorer le référencement naturel du site

Google tient compte des statistiques d'utilisation des sites web pour les classer dans les résultats de
recherche : une bonne UX contribue au référencement naturel (SEO) du site.

D'un point de vue plus technique :

o Une bonne arborescence facilite le travail du robot d'exploration Googlebot. Les

pages du site web sont mieux indexées : Google les propose plus volontiers dans les
résultats de recherche.
o Créer « une structure de site logique qui facilite la navigation » est une pratique
recommandée par Google pour obtenir des sitelinks. Ces liens complémentaires
augmentent la visibilité du site web.
À noter qu'à des fins de SEO, Google conseille, au-delà d'une bonne arborescence, de créer et
envoyer un sitemap si le site est très volumineux, récent ou riche en contenus images et vidéo.

Quelques logiciels de conception d’arborescence : GlooMaps, MindMeister, Cacoo ; FlowMapp, ,

MindNode, Dyno Mapper, Slickplan, Balsamiq.
 1.1.2. Ligne de flottaison :

En web design, la ligne de flottaison d'un site internet est une ligne invisible qui s'épare la partie
visible de la page de la partie invisible. Cette ligne est mobile puisqu'elle change dès lors que
l'internaute fait défiler la page internet. Stratégique, la ligne de flottaison détermine où placer les
éléments les plus importants.

Importance de ligne de flottaison : La ligne de flottaison est très importante puisque les informations
sensées attiser l'attention de l'internaute doivent être placées au-dessus d'elle, sur la partie visible de
la page. Elle est aussi très importante pour l'ergonomie du site puisqu'elle permet d'optimiser le
placement des éléments de la page et d'optimiser l'expérience utilisateur. Cela peut avoir un impact
sur les ventes dans le cadre de l'e-commerce, que ce soit sur le site marchant ou dans le cadre
d'affichage de bannières publicitaires.

La bonne pratique jusqu'ici était de placer les éléments les plus importants au-dessus de la ligne de
flottaison. Cependant, les différentes tailles d'écran disponible aujourd'hui, les smartphones et les
tendances de web design comme les sites one page compliquent l'identification de la ligne et les
règles à appliquer.
Exemple d’information à mettre au-dessus de la ligne de flottaison

• Une problématique.

• Un avantage concurrentiel.

• Un exemple qui prouve l'avantage.

• Le bénéfice du produit ou du service.

• Un témoignage client.

• Un appel à l'action.

• Une phrase d'accroche.

1.1.3. Call-to-action :

Un call-to-action (ou CTA) est un bouton qui incite l'internaute à l'action. Il est positionné sur un site
web, un blog ou un email. En cliquant dessus, l'internaute peut par exemple acheter, contacter,
s’inscrire à une newsletter ou à un essai gratuit.

Le CTA fait avancer le visiteur dans son parcours d'achat. Il peut s'agir d'une image, d'un lien ou d'un
bouton. Il se situe juste avant d'arriver sur la page de destination. C'est un outil marketing qui
impacte le taux de conversion d'un visiteur sur le site web, le blog ou les autres supports digitaux
(newsletter, email marketing, etc.) d'une entreprise.

Quel est l'intérêt du call-to-action ?

• La conversion de visiteurs en clients

Le bouton call-to-action fait partie de la stratégie inbound marketing des entreprises, avec pour
principal objectif de transformer les visiteurs en clients. Il participe à la construction du parcours
utilisateur sur les sites internet, notamment en e-commerce. Il simplifie également l'expérience
utilisateur.
En bref, un call-to-action est ce qui va permettre la conversion et la fidélisation des clients d'une
entreprise.

• Un élément visuel qui attire l'attention des visiteurs

Lors de la préparation d'une campagne de marketing digital, les objectifs spécifiques à atteindre sont
à définir : nombre de ventes, d'inscriptions ou de téléchargements par exemple. Le call-to-action est
alors utilisé comme moyen pour atteindre ces objectifs. Le but est d'encourager les internautes à
effectuer l'action souhaitée. Ce bouton doit être rapidement identifiable et reconnaissable par les
internautes.

• Un bouton qui guide les visiteurs dans leur parcours d'achat

Grâce au call-to-action, les utilisateurs sont orientés vers le bon endroit lors de leur parcours d'achat.
Sans CTA, ils risquent de quitter le site web sans passer à l'étape suivante. Un bon call-to-action, c'est
un bouton qui indique clairement l'endroit où les utilisateurs doivent cliquer, avec un texte décrivant
précisément l'étape qui les attend ensuite.

• Une navigation optimale

Le CTA est un élément essentiel de l'UX design. L'idée est d'insérer un lien hypertexte qui permet
d'attirer du trafic sur des pages web auxquelles les internautes n'accèderaient pas de manière
naturelle. Grâce à un CTA envoyant vers des contenus qui pourraient susciter leur intérêt, les visiteurs
pourront profiter d'une meilleure expérience de navigation.

• Une segmentation de la clientèle

Il est possible de placer un call-to-action dans un contenu web en fonction des sujets abordés. La
segmentation permet aux entreprises de trier les internautes montrant un véritable intérêt pour
l'offre qu'elles leur proposent et d'adapter le CTA à une catégorie de visiteurs spécifiques.

• Une analyse de l'efficacité des actions marketing

Le call-to-action est un élément dynamique qui renvoie sur un lien. À partir de là, les entreprises ont
accès à une mine d'informations. Taux de clics, nombre de conversions par rapport au nombre de
clics, profil des internautes, plages horaires à privilégier : les données récoltées pourront être
compilées en CRM et participeront à l'analyse de l'efficacité des campagnes marketing.
 1.1.4. Le cahier des charges d'un site internet

Le cahier des charges d'un site internet est un document de référence dont le rôle est de fixer les
objectifs techniques et stratégiques à atteindre, ainsi que les exigences de conception à respecter
tout au long du projet. Son but général est de constituer un point de référence consultable à toutes
les étapes du projet web pour s'assurer de la conformité entre les choix techniques et les exigences
du commanditaire.

• Le cahier de charge délimite le périmètre du projet afin de quantifier les actions à mener et
d'éviter à toutes les parties prenantes une perte de temps et d'argent.
• Il fixe les objectifs à atteindre et donne ainsi une direction au projet dans son ensemble.
• le cahier des charges
o Précise la charte graphique du projet
o Il présente les fonctionnalités attendues
o Décrit en détail les attentes techniques du futur site web

Contenu d’un cahier de charge

1. Présentation de l'entreprise commanditaire.

2. Description de l’existant.

3. Détaille les objectifs du futur site web.

4. Objectifs graphiques et ergonomiques.

5. Formulation des attentes fonctionnelles et techniques.

6. Indication les prestations attendues (.

7. Un planning de projet.

1.1.5. Charte graphique

La charte graphique est un cahier des charges qui encadre l'utilisation des éléments graphiques
constituant l'image d'une marque, d'une entreprise ou d'une personnalité. Elle permet ainsi de
conserver une identité visuelle cohérente et harmonieuse sur tous les supports de communication.

Les éléments composant la charte graphique

 • Le logo

• Les couleurs

• Les icônes

• Les formes

• Les polices d'écriture

• Les illustrations

1.2. Les étapes d’un projet Web

La gestion d'un projet web se fait en plusieurs étapes et doit suivre un planning préétabli comme par
exemple associé a un diagramme de Gantt pour assurer une bonne répartition des tâches.

1.2.1. La rédaction d'un cahier des charges - Étape 1

La réussite d'un projet réside de sa préparation. Pour préparer une stratégie basée sur Internet, vous
devez définir vos attentes avec le maximum de précision. Le site à créer devra être conçu en
considérant la stratégie de votre entreprise. Une agence web a pour mission d'apporter des réponses
sur mesure aux exigences d'une entreprise. Dans le cas où les objectifs seraient mal communiqués,
l'aboutissement vers un site de qualité serait difficile. La rédaction d'un cahier des charges doit donc
être pensée avec le maximum de rigueur. D'ailleurs certains directeurs de PME ou de grandes firmes
sollicitent l'aide d'un professionnel en vue de bénéficier de conseils avisés dès cette étape.

1.2.2. Le zoning, Wireframe et prototype du site Internet - Étape 2

Il est essentiel de faire le nécessaire pour disposer d'un site web le plus ergonomique possible. De ce
fait, il convient de penser à un menu, une sidebar, un logo, un bloc contenu, sans oublier d'ajouter
des call-to-actions dans le site. Ce ne sont que des exemples de points clés à inclure sur un site.

Parmi les outils utilisés par les professionnels, il y a souvent Axure et basalmiq. Axure est idéal pour la
réalisation de prototypes dynamiques. Différentes appellations existent pour cette étape qui peut
être syndée en différents rendus de plus en plus précis. À ce stade, il est souvent utile de faire
quelques ajustements au niveau du cahier des charges. Ces ajustements se décident après une
réunion de différents acteurs.

1.2.3. La maquette - Étape 3

Les agences expérimentées utilisent des outils de traitement d'image avancés comme
Adobe Photoshop et Illustrator. Cette étape du maquettage d'un site internet va permettre au client
de voir concrètement et le plus fidèlement possible l'apparence finale de son projet digital.
Concernant la maquette, le client doit donner le maximum de précision à son graphiste pour que
celui-ci puisse concrétiser les souhaits en minimisant les allers-retours. D'ailleurs, en tant que
commanditaire, vous devez déjà disposer d'un concept bien défini et non laisser le graphiste inventer
pour vous un nouveau concept sorti de nulle part, qui ne conviendra que partiellement. Pour la
réalisation d'un bon site web, les moindres détails sont importants. C'est pourquoi il est
indispensable de savoir choisir une agence web qui pourra s'occuper avec efficacité de la gestion de
projet.
 1.2.4. L'intégration web - Étape 4

Dans cette étape, le développeur entre en scène pour assurer la transformation de la maquette dans
un langage compatible avec un navigateur web. L'intégration et le développement web est la phase
qui marque le tournant vers la concréatisation de votre projet web. Pour ce faire, le professionnel
utilise divers outils et langages, dont : javascript, HTML, css, ainsi qu'un CMS (dans le cas où le site
n'est pas fait sur mesure) comme Wordpress, Prestashop, Drupal, RBS Change, etc. La durée
nécessaire pour le développement d'un site dépend des niveaux d'exigences du client.

1.2.5. Test d'acceptation ou recette - Étape 5

La phase de tests et du recettage informatique est une étape incontournable pour garantir qu'un site
soit fonctionnel à 100 %. En effet, avant sa mise en ligne, il faut corriger tous les éventuels bugs. Pour
le test, il faut passer par différents navigateurs existants : Firefox, Internet Explorer, Safari, Chrome,
etc.

Il ne faut pas négliger de faire des tests des fonctionnalités du site sur mobile. En considérant vos
exigences mentionnées dans le cahier des charges, le développeur effectue les tests d'affichage et de
fonctionnalités en vue de voir si tout correspond aux attentes initiales. Par la suite les écarts pourront
être rectifiés rapidement.

1.2.6. Mise en ligne et suivi - Étape 6

Pour la mise en ligne, il est indispensable de savoir bien choisir un hébergeur. Ce dernier doit fournir
un serveur performant et sécurisé pour votre site. Il doit être adapté au trafic escompté sur le site.
Après l'identification d'un hébergeur fiable, la mise en ligne du site web de votre entreprise pourra
s'effectuer. Si vous avez été efficace dans votre méthode de gestion de projet, et que vous avez choisi
la meilleure agence web, tout se déroulera sans encombre, le résultat sera amplement satisfaisant et
votre site sera non seulement opérationnel, mais contribuera aussi à augmenter votre notoriété et
votre chiffre d'affaires..

Cependant, cette étape n'est pas une conclusion, elle constitue le point de départ de votre activité
sur le web, le site internet ou l'application mobile par exemple devra évoluer au fil du temps pour
s’adapter à son environnement évoluant en permanence. Un suivi est donc indispensable suite à la
mise en ligne.

1.3. Intégration de votre charte graphique dans le design d’un site web

L’intégration d’une charte graphique dans la conception d’un site web est une étape clé pour garantir
que l’identité visuelle de la marque soit cohérente et efficace.

Consistance et répétition

Uniformité des Couleurs : Assurez-vous que les couleurs définies dans votre charte graphique sont
utilisées de manière uniforme sur toutes les pages. Cela inclut les boutons, les liens, les en-têtes et
les pieds de page. Une telle uniformité renforce la reconnaissance de la marque et facilite la
navigation pour les utilisateurs.

• Cohérence typographique : Utilisez les mêmes familles de polices, tailles et styles définis
dans votre charte à travers tout le site. Cela garantit non seulement une cohérence visuelle,
mais aussi une lisibilité optimale.
 • Répétition des éléments graphiques : Les éléments tels que les logos, les icônes, et
les images doivent être répétées de façon cohérente. Par exemple, si un type d’icône est
utilisé pour une section spécifique, le même style doit être utilisé partout ailleurs.

Flexibilité et adaptation

• Adaptation aux contenus spécifiques : Bien que la charte graphique serve de guide, il peut
être nécessaire de l’adapter pour des contenus spécifiques. Par exemple, une page destinée
aux enfants pourrait utiliser des couleurs plus vives et des polices plus ludiques, tout en
restant dans les limites de la palette globale.

• Réactivité sur différents appareils : Assurez-vous que votre charte graphique s’adapte bien
aux différentes tailles d’écran, notamment les smartphones et les tablettes. Cela peut
nécessiter des ajustements dans la taille des éléments ou dans leur disposition.

• Équilibrage entre uniformité et originalité : Chaque page doit maintenir l’identité de la

marque tout en offrant quelque chose d’unique. Par exemple, une page de produit pourrait
avoir un design légèrement différent pour mettre en valeur des caractéristiques spécifiques.
 II. DESIGN D’UN SITE WEB

Le design est un élément important du digital, plus particulièrement lorsqu’il s’agit d’un site web.

2.1. Le Skeuomorphisme

Le skeuomorphisme est un type de design web qui reproduit des éléments graphiques présents dans
l’objet d’origine, mais de manière très esthétique. Cette technique consiste à s’inspirer du monde réel
pour concevoir les interfaces des logiciels et en particulier un site web.

C’est un design réaliste et détaillé, avec des éléments décoratifs (ombres, effet 3D…).

IOS 6
EXEMPLE DE DESIGN DE SITE WEB SKEUOMORPHISME
Le skeuomorphisme était voué être dépassé et ce fut le cas avec l’apparition du flat design.
 2.2. Le Flat design : Design minimaliste

Flat Design, une rupture totale avec le skeuomorphisme

Le flat design est une tendance qui exclut tout effet de profondeur, dégradés, d’ombre portée et de
reflets. C’est un style qui privilégie les grands aplats de couleurs, sans bordures. Il supprime tous les
choix stylistiques qui lui donnent l’illusion de la tridimensionnalité

Les défenseurs du « design-plat » affirment que les interfaces graphiques ne doivent pas chercher à
imiter « visuellement » les fonctionnalités existantes, mais se concentrer sur l’essentiel afin de
faciliter la navigation et optimiser la lisibilité. Le Flat Design se concentre sur les couleurs, la
typographie et les icônes.

L’interface en flat design est donc centrée sur le contenu, la fonctionnalité. Lorsque l’on opte pour la
tendance du flat design, les couleurs sont fondamentales pour faire ressortir des éléments
particuliers, comme les boutons cliquables et dynamiser son interface. De même, la typographie est
tout aussi importante. Le design étant minimaliste, la typo va pouvoir structurer l’information et
organiser de manière claire son contenu
DESIGN SITE WEB FLAT DESIGN
COMPARAISON SKEUOMORPHISME ET FLAT DESIGN

Le design actuel tende vers le Flat design.

Comment reconnaître un “vrai” flat design ?

Initialement, les interfaces en design plat présentaient, entre autres, les caractéristiques suivantes :
 • Perte de l’analogie avec des objets du monde réel au profit des métaphores

• Effets de transparence, sans dégradés ni jeux d’ombres.

• Absence de relief et de profondeur dans les icônes choisies.

2.3. Materials Design, une tendance qui grimpe

Material Design, un concept graphique conçu par Google. Le Material Design est déterminé par le Flat
Design, conception parfois trop simpliste dans son utilisation dans le webdesign. Material Design
reprend le Flat Design mais réapproprie des éléments skeuophorme permettant de mettre en
perspective les éléments, de donner de la profondeur et de mettre en avant les plus importants.
 III. ERGONOMIE DE SITE WEB

L'ergonomie c'est, le fait de concevoir et d'optimiser un objet afin de faciliter son utilisation au
quotidien. Pour un site web, on va chercher à répondre efficacement aux attentes d'un utilisateur
pour qu'il ait une navigation confortable. L'ergonomie repose sur 4 piliers : l'utilité, l'utilisation, le
design et la satisfaction. Il cherche à optimiser les interactions entre les internautes et le site web
pour un maximum de confort, de sécurité et d’efficacité.

La conception d’un site Internet doit, en toutes circonstances, prendre en compte les besoins et les
attentes de l’utilisateur final, afin de permettre une interaction aussi fluide que possible : c’est le
principe de l’« ergonomie web ».

Si les règles de base d'ergonomie ne sont pas respectées sur un site internet, il ne va pas retenir
l'attention des utilisateurs. Voilà pourquoi les utilisateurs quittent un site web, souvent par manque
de temps ou par agacement :

• Si un site est lent à charger

• Si on ne comprend pas directement ce que propose le site
• Si on se perd sur le site
• Si les textes sont peu ou pas lisibles
• S’il y a trop d'information

3.1. Quels sont les objectifs de l’ergonomie web

Le design ergonomique d’un site web doit prendre en compte de nombreux critères, qui agissent en
synergie au service de l’expérience utilisateur. Il vise essentiellement cinq objectifs :

L’utilisabilité : Le visiteur doit être en mesure de trouver facilement l’information qu’il est venu
chercher, sans se perdre au cours de la navigation.

La lisibilité : Le contenu des pages doit être soigneusement hiérarchisé, en priorisant l’information la
plus importante. Les couleurs et polices de caractères doivent respecter une certaine sobriété pour
être agréables à visualiser.

La rapidité : Un bon design web minimise les délais de chargement d’une page, afin de ne pas lasser
le visiteur et l’encourager à rester.

L’interactivité : Les utilisateurs ont à leur disposition des liens nombreux, visibles et positionnés
intelligemment afin de naviguer plus facilement sur le site. Ils peuvent commenter un contenu ou le
partager d’un simple clic.

L’accessibilité : Un site web ergonomique est inclusif par nature. Il est accessible sans difficulté depuis
n’importe quel terminal numérique ou navigateur web, et s’adapte aux besoins des personnes non-
voyantes ou souffrant de daltonisme.
 3.2. UX et UI

L’expérience utilisateur (User Experience ou UX) et le design de l’interface utilisateur (User Interface
ou UI) sont les deux branches de l’ergonomie web qui s’intéressent à la qualité des interactions entre
l’internaute et le site web.

L’UX design se réfère à l’étude des attentes et besoins de l’utilisateur pour la création d’un site web
et/ou d’une application mobile. Il s’agit donc de prendre en compte le ressenti d’un utilisateur quand
il navigue sur un support digital. L’objectif de l’UX design est d’améliorer le parcours de l’internaute
pour le rendre plus agréable et instinctif. Un UX Designer est donc une personne qui analyse et
conçoit le parcours utilisateurs sur un site internet.

UI quant à lui se centre davantage sur le visuel afin d’attirer le regard de l’utilisateur et de l’inciter à
rester sur la page. Attention toutefois à ce que votre site reste efficace ! L’internaute doit comprendre
immédiatement de quoi il s’agit. L’UI facilitera ainsi la navigation.

3.3. Exemples d'ergonomie web à connaître

3.3.1. Slogan

Au-dessus de la ligne de flottaison, affichez un slogan simple et clair qui va décrire ce que vend votre
site internet. Grâce à ce slogan, l'utilisateur doit comprendre au premier regard ce dont le site
internet parle. (Hero Header, Carousel, ..)

3.3.2. Simplicité

Utiliser du blanc de la page. Le blanc est essentiel pour que l'œil se focalise sur une information
importante. Il permet de rendre le contenu plus lisible. Mais il reste important de bien jauger la
quantité de blanc sinon l'internaute aura une sensation de vide pas agréable.

N'ajoutez pas trop d'animation sur votre site internet. Une page web qui bouge dans tous les sens ne
donne pas envie de rester. Si vous choisissez de mettre des animations sur votre site web, choisissez
des animations pertinentes qui donnent de la valeur à vos textes. Elles ne doivent pas juste être jolies
et décoratives, elles doivent servir à la compréhension de la page.

Unifiez toutes les pages du site pour que le lecteur ne soit pas perdu lors de sa navigation, qu'il ne
pense pas avoir changé de site en changeant juste de page. Cela passe par la couleur du header, les
couleurs de la page et aussi la typographie.

3.3.3. Lisibilité de la page

Hiérarchie visuelle des éléments

Hiérarchiser les éléments d'une page web. Cela passe par une hiérarchie des titres, mais aussi par un
sommaire pour un article de blog.
Un sommaire se trouve en haut de la page. Il va permettre à l'utilisateur d'avoir un résumé de tout
l'article en quelques secondes et si, un élément du sommaire l'intéresse, il peut s'y rendre en un clic
sans avoir à parcourir tout l'article. Ensuite, il y a les titres et le texte :

• Titre principal (ou h1)

• Titre 2 (ou h2)

• Titre 3 (ou h3)

• Titre 4 (ou h4)

• Paragraphe (ou p)

3.3.4. Lisibilité du texte

Choix de la typographie

Utilisez une police de caractère, ou typographie, très lisible. N'utilisez qu'une seule typographie et
jouez sur les différentes graisses (léger, normal, gras, italic). Pour les plus créatifs, n'utilisez pas plus
de 2 typographies sur votre site.

Pensez aux typographies simples et sans serif pour vos paragraphes, elles sont très lisibles et offrent
de nombreuses graisses pour mettre des mots en gras ou encore des citations en italique.

Voici une petite sélection de typographies disponibles gratuitement sur Google Font et ayant une belle
lisibilité :

• Lato
• Roboto
• Raleway
 3.3.5. Mise en forme

Utilisez des éléments pour clarifier vos textes comme :

3.3.6. Contraste des couleurs

Afin que tous les internautes puissent voir correctement votre contenu, vous devez respecter une
règle : il doit y a avoir une contraste entre la couleur de fond de votre page web et la couleur de votre
texte.

Prenons l'exemple d'un site internet avec un fond sombre :

Pour la typographie, privilégiez un gris clair à la place du blanc. Le contraste sera tout aussi important,
mais la couleur grise sera plus douce à l'œil et aidera à la lisibilité.

Pour les icônes, partez sur une couleur peps. Pensez à la couleur turquoise, au jaune ou encore au
rouge. Ces couleurs attireront l'attention du lecteur sur des points importants.

Pour les boutons, utilisez plusieurs couleurs : une couleur vive et une couleur moyenne selon
l'importance du bouton. Pour un bouton "Call to action" privilégiez la couleur vive.

3.3.7. Bouton d'action

Il ne faut pas oublier de rendre attractifs les boutons d'action. Les utilisateurs sont habitués à voir des
boutons à certains endroits et vont donc s'y diriger naturellement.

Quelques astuces pour vos boutons d'action :

• Pour le texte de votre bouton ajouter lui un verbe d'action comme "se lancer" ou pour faire
agir l'utilisateur.

• Pour la couleur, privilégiez une couleur attractive et moyenne comme un bleu, un orange ou
un vert.

• Animez votre bouton au passage de la souris comme sur l'exemple ci-dessous

• Ne mettez pas trop de texte dans votre bouton

3.3.8. Simplicité de la navigation

• Emplacement

Afficher le menu en haut de vos pages ! Il est important d'avoir le menu toujours accessible, surtout si
votre page web est longue. Avoir un header fixe dans la page évite à l'utilisateur de devoir scroller en
haut de page pour avoir le menu.

• Bouton

Mettez un bouton d'action en haut à droite. Ce bouton est votre "Call to action". Il permet les actions
suivantes :

1. Inscription

2. Connexion
 3. Contact

4. Souscription

5. ...

• Footer

Remettre dans le footer votre menu ainsi que des liens qui n'apparaissent pas dans le header

• Fil d'Ariane

Le fil d'Ariane permet au lecteur de se retrouver dans l'arborescence de votre site. Il s'agit d'un menu,
souvent horizontal, que l'on retrouve au-dessus du corps du site. Il va indiquer le chemin par lequel
l'utilisateur est passé pour arriver à la page où il se trouve. En e-commerce, on peut retrouver ce type
de fil d'Ariane :

Respecter les "standards" du web n'est pas une mauvaise chose, cela permet une navigation plus
fluide. Certains automatismes se sont créés chez les internautes! Comme :

• le menu en haut à droite

• le bouton d'action en haut à droite
• le logo en haut à gauche qui renvoie vers la page d'accueil
• Faire ressortir les liens cliquables avec une autre couleur

3.3.9. Formulaires simplifiés

Lorsque vous demandez par exemple à votre utilisateur de vous contacter via un formulaire, vous
devez suivre quelques règles d’ergonomie :
• Mettre un label pour chaque champ.
• Ordonner les champs logiquement.
• Afficher ce qui est obligatoire à remplir par un astérisque par exemple.
• Minimiser le nombre des champs : si vous demander trop d’informations à remplir, cela peut
freiner votre visiteur.
• Adapter les champs : il existe plusieurs types de champs comme sélection multiple, cases à
cocher, menu déroulant, calendrier de dates ...
• Afficher des erreurs clairement lorsqu’une information est incorrecte.
En résumé, évitez de mettre beaucoup de champs sur votre formulaire. Si vous pouvez éviter de
passer par un formulaire c'est encore mieux. Mais si son utilité est primordiale, pensez-le
simplement.
 3.3.10. Champ de recherche

Avoir un menu intuitif c'est bien mais donner la possibilité à l'internaute de faire une recherche
textuelle est un plus. En faisant cette recherche, il est sûr d'avoir accès à l'information qu'il souhaite.

Si vous optez pour ce champ de recherche, placez-le en haut de votre site internet. Mais pourquoi en
haut ? Et bien tout simplement parce que les internautes sont habitués à trouver ce champ en haut
de page, comme sur la recherche de Google.

3.3.11. Page 404

Il faut éviter d'avoir des pages 404 sur son site internet, c'est décevant pour l'internaute de tomber
sur une page qui n'existe plus. Cependant, si vous personnalisez votre page 404 et qu'elle est
attractive ou qu'elle permet de se diriger ailleurs sur le site internet c'est une très bonne pratique.