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

2. 2
22WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
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.

3. 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
33WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

4. « 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
44WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

5. 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…).
5WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

6. Quelques définitions…
6WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

7. 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) ?
7WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

8. « 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
8WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
Celui que je retiens…

9. 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.
9WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

10. 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…
10WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

11. « 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
11WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

12. « 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
12WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
L’objectif de tout projet web
=
la satisfaction et le confort de l’utilisateur final

13. 1313WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

14. 1414WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

15. 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é
15WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

16. Quelques chiffres…
16WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

17. 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
17WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

18. Champs d’application
18WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
● 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

19. 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.
1919WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

20. ● LOGO
● TYPO
● COULEURS
#design
20WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

21. 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.
2121WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

22. 22

23. #design
23WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

24. Jolis exercices sur Photoshop…
Mais ce ne sont pas des LOGOTYPES
#design
24WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

25. Abstraction trop poussée,
le message du logo
risque de passer à côté.
#design
25WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
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

26. É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

27. 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é
27WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
#typo

28. #design
28WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
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

29. 29WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
http://opendyslexic.org

30. 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é
30WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

31. 31WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

32. 32WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
Le message ne produit pas le même effet, selon les couleurs
qui lui donnent plus ou moins de force, voire d’émotion :)

33. http://www.snook.ca/
33WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
#contraste
#accessibilité

34. http://colororacle.org
34WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
#contraste
#accessibilité
http://gray-bit.com

35. 35WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
OUTILS
Palettes couleurs
http://paletton.com
https://color.adobe.com/fr/

36. ● TYPOGRAPHIE
● COULEURS
● ESPACES
● RYTHME
● AMBIANCE
● MESSAGE
#lisibilité
36WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

37. #lisibilité
37WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
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

38. #lisibilité
38WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
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

39. 39WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

40. 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.
40WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

41. 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é.
41WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

42. 42WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

43. #lisibilité
43WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
Gestion de l’aération des
textes et paragraphes
https://drewish.com

44. #lisibilité
44WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
Gestion de l’aération des
textes et paragraphes
http://lamb.cc/typograph/

45. 45WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

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

47. 4747WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

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

49. 4949WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr494949WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
Cette information est
disproportionnée par rapport à
l’utilisation du site...

50. 50
#ergonomie
50WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr505050WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
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. 51
#ergonomie
51WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr515151WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
Noyé…
Le compte lecteur !

52. 52
#ergonomie
52WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr525252WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
JARGON
BAZAR
ABSENCE DE
HIÉRACHIE D’
INFORMATIONS
CONFUSION
Zône « Vous » et « Nous »

53. 53
#ergonomie
53WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr535353WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
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 !

54. BON POINT :)
Pour éviter la surcharge d’
infos, on renvoie ailleurs
BESOINS
Hiérarchisés,
en fonction des
problèmes rencontrés
5454WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr545454WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

55. 5555WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr555555WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
BON POINT :) Les zônes utilisateurs sont identifées, clairement.
Le site prend bien en compte les BESOINS des internautes.

56. 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
56WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

57. Prendre soin des visiteurs…
...d’un maximum d’entre-eux.
57WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

58. 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
58WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

59. « 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.
59WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

60. Prendre soin des
visiteurs…
Jusqu’au bout.
60WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

61. 61WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

62. 62WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
L’humour est agréable mais il est plus important de s’excuser et de
permettre à l’internaute de naviguer ailleurs...

63. 63
Audit simple pour vos sites
6363WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr
opquast.com/fr/

64. 646464WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

65. 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 :)
65WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

66. Merci !
66WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr

67. 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/
67WORDPRESS CAMP PARIS 2015
@frederiquegame
www.frederiquegame.fr