Design, ergonomie et lisibilité des sites internet, Frederique Game

1WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
Design, ergonomie et lisibilité
des sites internet
@FrederiqueGame

2
@frederiquegame
Bonjour je suis Frédérique Game,
Consultante en stratégie éditoriale, web et design + Designer
Mes passions ?
Typographie - Design - Art - Innovation - Expérience utilisateur
WordPress et le Web !
Mon aspiration ?
Contribuer à rendre le Web agréable, simple et efficace.
Mes réalisations ?
Conseil, audits de communication, conception de contenus,
identité graphique (logo, charte), réalisation de sites internet.

New York Times, 2003
« La plupart des gens font l'erreur de
penser que le design, c'est l'apparence
(…).
Ce n'est pas notre avis. Le design, ce n'est
pas seulement l'apparence et le style.
Le design, c'est comment ça marche. »
3
3
@frederiquegame

« I don't know the rules of grammar…
If you're trying to persuade people to do
something, or buy something, it seems to me you
should use their language, the language they use
every day,
the language in which they think. »
« Je ne connais pas les règles de la grammaire …
Si vous essayez de convaincre les gens de faire
quelque chose, ou d’acheter quelque chose,
il me semble que vous devriez utiliser leur language,
le language qu'ils utilisent tous les jours,
le language dans lequel ils pensent. »
4
4
@frederiquegame

L'apparence
Le style
Comment ça marche
Appliqué au Web…
C’est recourir à l’itération constante + réflexion pour se poser les bonnes questions
et orienter notre travail vers l’exigence d’une meilleure qualité.
C’est se soucier des différents enjeux en tentant de répondre à un maximum de
demandes que nous font les internautes dans leur contexte (âge, aisance, handicap,
habitudes…).
@frederiquegame

Quelques définitions…
@frederiquegame

Design centré sur l'utilisateur ?
Design de services ?
Design d'information ?
Design interaction ?
Design d'interface ?
Design graphique ?
Design pattern ?
Design thinking ?
Le(s) Design(s) ?
@frederiquegame

« Le design d’expérience utilisateur est un démarche pragmatique,
pluridisciplinaire, orienté vers la résolution des problèmes et
résolument tourné vers l'innovation.
Puisant ses racines dans le design centré sur l'utilisateur et le
design thinking, il continue d'évoluer et de s'enrichir des méthodes
d'autres disciplines, comme le design de service, pour relever le
défi inédit d'un monde désormais toujours connecté. »
Syvlie Daumal
@frederiquegame
Celui que je retiens…

On ne désigne pas quelque chose
On désigne POUR une expérience.
C’est un processus.
Recherche, imagination.
Conception, optimisation.
L’expérience utilisateur
=
Résultat du travail de toute l’équipe
et de tous les métiers impliqués.
@frederiquegame

Au final, peu importe la définition…
Ce qui compte est la QUESTION
Que vise LE DESIGN ?
LA QUALITÉ
+
la clarté
la simplicité
l’efficacité
Itération basée sur : le bon sens,
une (très) bonne culture graphique,
des tests…
@frederiquegame

« L'ergonomie est l'ensemble des connaissances relatives à l'homme et nécessaires pour
concevoir des outils, des machines & des dispositifs qui puissent être utilisés avec un
maximum de confort, de sécurité & d'efficacité. » Alain Wiesner, fondateur ergonomie française
Science qui s’applique à tout ce qui touche l’interaction homme-machine, du rasoir électrique
à la rampe d’escalier mécanique, en passant par les matériels informatiques - elle se base sur
des techniques centrées sur des tests utilisateurs (tris de carte, eyetracking…).
Appliquée au Web, nous pouvons retenir trois points :
- Concevoir des dispositifs = applications, interfaces, sites internet
- À utiliser avec un maximum de confort
- Et comme objectif d’efficacité
L'ergonomie
@frederiquegame

« Le web, ce n’est pas la télévision. les utilisateurs ne s’en servent pas
pour passer le temps. Ils surfent sur le web dans un but précis. Une main
sur la souris, ils sont prêts à interagir et à s’engager. » Jakob Nielsen
@frederiquegame
L’objectif de tout projet web
=
la satisfaction et le confort de l’utilisateur final

@frederiquegame

La lisibilité, c’est le fait de délivrer
un message clair et compréhensible.
C’est centrer la réflexion sur le destinataire du contenu.
La lisibilité
@frederiquegame

Quelques chiffres…
@frederiquegame

Temps moyen passé sur une page : 30-60 secondes
Temps moyen passé sur un site : 2 minutes
Nombre pages consultées sur un site : 2
79% internautes lisent en diagonale
Le lecteur lit en moyenne 20 à 28% de mots sur une page
La page de résultats a 7 secondes pour convaincre
⅓ des internautes français sont des seniors,
85% d’entre eux ont des problèmes de vue.
On peut presque dire qu’un ⅓ des internautes a donc des problèmes de vue.
8 à 10% de la population mondiale est dyslexique
8 à 10% de la population mondiale est daltonienne.
Contexte Web
@frederiquegame

Champs d’application
@frederiquegame
● LOGO
● TYPO
● COULEURS
● AMBIANCE
#design
Note Bene : les images sont à ranger dans la gestion du contenu (comme vidéos, pdf…)
● TYPOGRAPHIE
● COULEURS
● ESPACES
● RYTHME
● AMBIANCE
● MESSAGE
#lisibilité
● STRUCTURE
● NAVIGATION
● PAGES
● FONCTIONNALITÉS
#ergonomie

Rôle fondamental
d’orientation
+
Définir les principales
fonctionnalités du site.
Objectifs du site ?
La page d’accueil
Identifier immédiatement les services ou produits
Informer de l’activité de l’entreprise
ou de la raison d’être du site
Idéalement, la page d’accueil diffère
des autres pages du site
tout en conservant une cohérence
dans la charte graphique.
@frederiquegame

● LOGO
● TYPO
● COULEURS
#design
@frederiquegame

Affirmer son identité et son image.
Devenir pérenne, s’ancrer dans le temps.
Transmettre les valeurs de l’entreprise et sa personnalité.
Se décliner (formats, en négatif, en monochrome, timbre-poste).
Susciter la sympathie et rassurer
Simple
Mémorable
Distinctif
Polyvalent
Approprié
#design #logo
Le logo représente le socle d’une stratégie d’identification visuelle définie.
@frederiquegame

#design
@frederiquegame

Jolis exercices sur Photoshop…
Mais ce ne sont pas des LOGOTYPES
#design
@frederiquegame

Abstraction trop poussée,
le message du logo
risque de passer à côté.
#design
@frederiquegame
S’agit-il d’un pont,
d’une montagne, d’un torii ?
Pourquoi la calligraphie ?
L’eau et l’aquarelle ?
Si des symboles existent,
ils demeurent trop confidentiels.
IUT de Bordeaux

ÉTUDE Business.com en 2009 - portant sur les 100 + grandes marques
mondiales.
Pour 50 d’entre-elles :
● Le nom ne décrit pas le produit vendu (94%)
(dans la plupart des cas, un logo est utilisé pour identifier une entreprise, pas décrire ce qu'elle fait.)
● La base-line n’est pas incluse dans le logo (90%)
● Le style de police est clair (84%)
● Le logo utilise une seule couleur (74%)
(blanc et noir ne sont pas comptées comme une couleur)
● Le logo utilise seulement des lettres sans le symbole (74%)
● Le logo est composé d’un nom ou d'un sigle (72%)
● Le logo est de forme rectangulaire (66%)
● Le logo est un seul mot (62%)
● Le logo comprend le symbole de marque (54%) et il est placé dans le haut
à droite (48%)
● Le nom est de six lettres ou moins (52%)
● Le nom utilise des bas de casses et capitales (44%) (sauf sigle)
● Le fond est plein et solide. (52%)
● La prononciation comprend trois sons / syllabes (44%)
● La couleur prédominante est le bleu (40%)
26

Intégrer et adapter les règles du « print »
● LE LAPIN TUE ou LE LAPIN TUÉ - accentuer les capitales
● Respecter les espaces, les virgules, utilisation des minuscules et majuscules
● Permettre le zoom (police « liquide ») à 200%
● Laisser le texte à 100% (font-size: 100% sur <html>)
● Ne pas justifier les paragraphes, pour éviter les blancs (accessibilité)
● Augmenter l’interlignage (1.5 pt)
● Augmenter la largeur des lignes, espacer les paragraphes, aérer les
paragraphes
● Rédiger de 60 à 80 caractères par ligne maximum, éviter les longues
phrases
● Soigner le contraste entre les couleurs de fond et des polices
● Choix des polices de caractères, éviter mauvais mariages, jouer plutôt sur la
graisse. Ne pas surcharger, 3 polices maximum
● Prévoir des polices de substitution
#design
#lisibilité
@frederiquegame
#typo

#design
@frederiquegame
RESPONSIVE DESIGN
Utiliser l’unité EM
Un paragraphe dont la taille est de 2 em aura 2x
taille du texte plus haut que son élément parent.
Utiliser une taille globale pour l'ensemble de la
page. Ne pas imposer de taille de texte, de "base"
fixe mais utiliser la taille par défaut du navigateur.
html {font-size: 100%;}
body {font-size: 0.8em}
Cette taille (et pour les enfants de l'élément body)
sera proportionnelle à la taille par défaut du
navigateur.
body : 15px
p : 0.8em
donc p = 0.8 x 15px = 12 px

@frederiquegame
http://opendyslexic.org

La couleur
● Contraster les couleurs
● Harmoniser les tons
● Tester les choix pour l’accessibilité
Les couleurs ont un sens, on ne mettra pas du rouge pour la charte d’une
association qui lutte contre la violence ou du gris pour parler de produits
naturels.
VITALITÉ, FORCE, CALME, NATUREL, CHIC, LUXE, CONFIANCE...
#design
#lisibilité
@frederiquegame

@frederiquegame

@frederiquegame
Le message ne produit pas le même effet, selon les couleurs
qui lui donnent plus ou moins de force, voire d’émotion :)

http://www.snook.ca/
@frederiquegame
#contraste
#accessibilité

http://colororacle.org
@frederiquegame
#contraste
#accessibilité
http://gray-bit.com

@frederiquegame
OUTILS
Palettes couleurs
http://paletton.com
https://color.adobe.com/fr/

● TYPOGRAPHIE
● COULEURS
● ESPACES
● RYTHME
● AMBIANCE
● MESSAGE
#lisibilité
@frederiquegame

#lisibilité
@frederiquegame
Espaces blancs
Ce qui est absent de votre site est aussi important que ce qui s’y trouve
L’espace blanc d’une page représente les parties qui ne comportent
ni texte ni illustrations.
FACILITERA :
le traitement de l’information
l’identification des points importants
la concentration des visiteurs
le confort visuel

#lisibilité
@frederiquegame
Mise en page
Respecter l'ordre des priorités
Améliorer les interactions trop complexes
Proposer un guidage
Afficher toutes les zones connexes qui ne sont pas à proximité
Aligner les éléments pour créer de l'ordre
Vérifier que certains éléments sont placés là où on les attend
Alléger et éviter de placer trop d'éléments sur la page

@frederiquegame

Sleon une édtue de l'Uvinertisé de
Cmabrigde, l'odrre des ltteers dans un mtos
n'a pas d'ipmrotncae,la suele coshe
ipmrotnate est que la pmeirère et la drenèire
soit à la bnnoe pclae. Le rsete peut êrte dans
un dsérorde ttoal et vuos puoevz tujoruos lrie
snas porlblème. C'est prace que le creaveu
hmauin ne lit pas chuaqe ltetre elle-mmêe
mias le mot comme un tuot.
@frederiquegame

La lisibilité n’est pas une denrée mesurable.
C’est pourtant quand elle se fait rare
que l’on se rend compte de sa nécessité.
@frederiquegame

@frederiquegame

#lisibilité
@frederiquegame
Gestion de l’aération des
textes et paragraphes
https://drewish.com

#lisibilité
@frederiquegame
Gestion de l’aération des
textes et paragraphes
http://lamb.cc/typograph/

@frederiquegame

● ARCHITECTURE
● ORGANISATION VISUELLE
● COHÉRENCE
● CONVENTIONS
● INFORMATION
● COMPRÉHENSION
● ASSISTANCE
● GESTION DES ERREURS
#ergonomie
@frederiquegame
Balises
Hyperliens
Fil d'ariane
Terminologie
Formulaires
Aides
Éléments cliquables
Libellés

@frederiquegame

48
#ergonomie
@frederiquegame
www.frederiquegame.fr484848WORDPRESS CAMP PARIS 2015
@frederiquegame
Qui a -t-il sous la ligne de flottaison ?
Que vient chercher l’internaute ?
Quel est le principal objectif d’une BU ?
Ses lecteurs !

@frederiquegame
@frederiquegame
Cette information est
disproportionnée par rapport à
l’utilisation du site...

50
#ergonomie
@frederiquegame
@frederiquegame
Et sous la ligne de flottaison ?
Étude Clicktale (clicktale.com) sur plus de 80 000 pages :
- 91% pages consultées comprennent un ascenceur ;
- 76% pages comportant un ascenceur, ont été scrollées ;
Les trois seuils de scroll les plus fréquents se trouvent à :
430 - 600 et 860 px (écrans entre 800 et 1280px)
570 et 590 px (écrans optimisés tablettes)
Utiliser la technique du cut-off design : concevoir la maquette de telle
manière que certains éléments (image ou paragraphe) soient volontairement
coupés au niveau des seuils de scoll les plus courants, afin de montrer qu’il y
a du contenu plus bas.

51
#ergonomie
@frederiquegame
@frederiquegame
Noyé…
Le compte lecteur !

52
#ergonomie
@frederiquegame
@frederiquegame
JARGON
BAZAR
ABSENCE DE
HIÉRACHIE D’
INFORMATIONS
CONFUSION
Zône « Vous » et « Nous »

53
#ergonomie
@frederiquegame
@frederiquegame
Structure dite classique
en « arche »
Header, cœur, sidebar, footer.
C’est aussi, l’avènement
des sites « ONEPAGES »
NAVIGATION et ERGONOMIE
encore plus à soigner !

BON POINT :)
Pour éviter la surcharge d’
infos, on renvoie ailleurs
BESOINS
Hiérarchisés,
en fonction des
problèmes rencontrés
@frederiquegame
@frederiquegame

@frederiquegame
@frederiquegame
BON POINT :) Les zônes utilisateurs sont identifées, clairement.
Le site prend bien en compte les BESOINS des internautes.

Jusqu’au bout.…
Dans les contenus.
Dans la granularité.
Titres hiérarchisés (H1,H2,H3)
Mots en gras (strong)
Paragraphes aérés (P)
Liste à puces (UL)
Images (pertinentes)
Légendes pour les images (ALT)
Visibilité des liens (lien distinctif, exclusifs)
Taille de la typographie suffisante
Hyperliens accessibles, identifiables, simplifiés
@frederiquegame

Prendre soin des visiteurs…
...d’un maximum d’entre-eux.
@frederiquegame

Le Web est une bouffée d’air pour les personnes handicapées et/ou âgées.
Tout devient vite un parcours du combattant pour se déplacer, travailler, s’amuser.
Le Web devient alors un espace où l’on peut aller à son rythme et continuer à
échanger, faire des achats, se promener dans les allées de la Culture.
Il nous revient de rendre cet espace accessible.
Une alternative pertinente à une image, des étiquettes sur les formulaires,
un balisage HTML correct, une structure logique…
Quelques bonnes habitudes à prendre.
« L’accessibilité tient au fait d’y penser » Armony Altinier
@frederiquegame

« La nature du web est dans son universalité.
Il doit être accessible à toutes les personnes handicapées »
Tim Berners-Lee- Directeur du W3C et créateur du Web
à titre d’exemples…
● Placer des boutons suivants et précédents / bouton retour
● Inclure un plan du site trié par catégorie + par ordre alphabétique
● Pagination claire et évidente
● Créer le fil d’Ariane (breadcrumbs), pour les sites dont le contenu est large
et profond avec plus de 3 niveaux d’arborescence.
@frederiquegame

Prendre soin des
visiteurs…
Jusqu’au bout.
@frederiquegame

@frederiquegame

@frederiquegame
L’humour est agréable mais il est plus important de s’excuser et de
permettre à l’internaute de naviguer ailleurs...

63
Audit simple pour vos sites
@frederiquegame
opquast.com/fr/

@frederiquegame

65
Concevoir pour les autres…
Afin de faciliter leur lecture,
leur recherche, leur navigation.
Afin de soulager leur appréhension.
Let’s do Quality
Enjoy :)
@frederiquegame

Merci !
@frederiquegame

67
Rappel des liens cités :
- « Le design d’experience utilisateur » Sylvie Daumal, Eyrolles.
- « Confessions of an advertising man » David Ogilvy
- http://www.snook.ca/
- http://opendyslexic.org
- http://gray-bit.com
- http://colororacle.org
- http://paletton.com
- https://color.adobe.com/fr/
- https://drewish.com
- http://lamb.cc/typograph/
- ww.clicktale.com
- opquast.com/fr/
@frederiquegame

Design, ergonomie et lisibilité des sites internet, Frederique Game

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Design, ergonomie et lisibilité des sites internet, Frederique Game

Similaire à Design, ergonomie et lisibilité des sites internet, Frederique Game (20)

Design, ergonomie et lisibilité des sites internet, Frederique Game