Cours d’Ergonomie

Typographie & Décryptage de textes sur écran

Test n°1

Comptez rapidement le nombre de 'F' dans le texte suivant :

+++++++++++++++++++++++++++FINISHED FILES ARE THE RE-SULT OF YEARS OF SCIENTIF-IC STUDY COMBINED WITH THEEXPERIENCE OF YEARS+++++++++++++++++++++++++++

Vous avez 7 secondes…STOP!

Bravo ! Comme la majorité des

personnes, vous répondez

3...

Alors que la réponse est

…6 !

Vous pouvez recompter :

+++++++++++++++++++++++++++FINISHED FILES ARE THE RE-SULT OF YEARS OF SCIENTIF-IC STUDY COMBINED WITH THEEXPERIENCE OF YEARS+++++++++++++++++++++++++++

En fait, le cerveau ne peut traiter "OF", incroyable, non?Quiconque compte les six 'F' du premier coup est un génie, quatre est assez fréquent, cinq est plutôt rare, trois est normal.

Moins de trois, vous devez changer de lunettes ;-)

Explication :

Lors de la lecture rapide, les yeux font des microsaccades, fixent les mots "lexicaux", en sautant allègrement par dessus les mots "grammaticaux" (articles, conjonctions, ...).Les 3 "OF" du texte ne sont pas fixés directement

Les enfants de 6 ans sont pour la plupart au stade de déchiffrage et fixent tous les mots donc pas d'oubli. Toutefois, le niveau de concentration peut expliquer facilement pourquoi vous avez réussi, ou pourquoi vous vous êtes fait piéger lors de ce test.

Test n°2

Essayez de décrypter le paragraphe suivant :

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

Essayez avec votre propre texte: http://ophtasurf.free.fr/vue/faitesun.htm

Test n°3

Lisez rapidement la phrase suivante :

ILVA

A LALA PLAGE

Lisez rapidement la phrase suivante :

ILVA

A LALA PLAGE

relisez lentement, alors ? 9 fois sur 10, un "LA" est éludé

Test n°4

Faites rapidement et dans l'ordre des chiffres ce calcul mental:

1000+

40+

1000+

30+

1000+

20+

1000+

10

=?

La plupart du temps, si ce calcul est effectué rapidement et dans l'ordre, on trouve 5000... Refaisons le calcul pas à pas :

1000 +40 = 1040 +1000 = 2040 +30 = 2070 +1000 = 3070 +20 = 3090 +1000 = 4090 +10 = 4100

Explications :

En fait, la plupart des personnes réalise convenablement la première partie des calculs jusqu'à atteindre 4090.Mais après avoir été bercé par la litanie en mille de ce calcul, le cerveau se laisse piéger par le + 10. Ainsi, la plupart des gens néglige leur attention pour se jeter sur le millier suivant, c'est un phénomène d'oblitération de la mémoire. la réponse n'est donc pas 5000 mais bien 4100.

Test n°5

En 1843, un notaire nommé Leclerc publie une brochure qui parle de la réduction possible de moitié de tous les frais d’impression….

Une expérience bizarrePouvez-vous lire la suite?

En 1843, un notaire nommé Leclerc publie une brochure qui parle de la réduction possible de moitié de tous les frais d’impression….

Une expérience bizarreEt ce texte-ci?

En 1843, un notaire nommé Leclerc publie une brochure qui parle de la réduction possible de moitié de tous les frais d’impression….

Et voici son idée:

Miracle, on arrive à lire assez facilement!

Une expérience bizarre

Pas si bizarre que ça…

Il y a 3 fois plus de caractéristiques sur le haut que sur le bas des lettres minuscules.

Conclusion:

la lettre n’est pas l’unité de lecture mais bien le mot, voire le groupe de mots.

Test n°6

Chronométrez le temps nécessaire à votre voisin pour lire ce texte:Ô rage ! ô désespoir ! ô vieillesse ennemie !N’ai-je donc tant vécu que pour cette infamie ?Et ne suis-je blanchi dans les travaux guerriersQue pour voir en un jour flétrir tant de lauriers ?Mon bras qu’avec respect toute l’Espagne admire,Mon bras, qui tant de fois a sauvé cet empire,Tant de fois affermi le trône de son roi,Trahit donc ma querelle, et ne fait rien pour moi ?Ô cruel souvenir de ma gloire passée !Œuvre de tant de jours en un jour effacée !Nouvelle dignité fatale à mon bonheur !Précipice élevé d’où tombe mon honneur !Faut-il de votre éclat voir triompher le comte,Et mourir sans vengeance, ou vivre dans la honte ?Comte, sois de mon prince à présent gouverneur ;Ce haut rang n’admet point un homme sans honneur ;Et ton jaloux orgueil par cet affront insigneMalgré le choix du roi, m’en a su rendre indigne.Et toi, de mes exploits glorieux instrument,Mais d’un corps tout de glace inutile ornement,Fer jadis tant à craindre, et qui, dans cette offense,M’as servi de parade, et non pas de défense,Va, quitte désormais le dernier des humains,Passe, pour me venger en de meilleures mains.

Don Diègue dans Le Cid de Corneille, scène IVSource:http://www.atramenta.net/lire/le-cid/2168/5#oeuvre_page

Chronométrez le temps nécessaire à votre voisin pour lire ce texte:Ô RAGE ! Ô DESESPOIR ! Ô VIEILLESSE ENNEMIE !N’AI-JE DONC TANT VECU QUE POUR CETTE INFAMIE ?ET NE SUIS-JE BLANCHI DANS LES TRAVAUX GUERRIERSQUE POUR VOIR EN UN JOUR FLETRIR TANT DE LAURIERS ?MON BRAS QU’AVEC RESPECT TOUTE L’ESPAGNE ADMIRE,MON BRAS, QUI TANT DE FOIS A SAUVE CET EMPIRE, TANT DE FOIS AFFERMI LE TRONE DE SON ROI, TRAHIT DONC MA QUERELLE ET NE FAIT RIEN POUR MOI ?Ô CRUEL SOUVENIR DE MA GLOIRE PASSEE !ŒUVRE DE TANT DE JOURS EN UN JOUR EFFACEE !NOUVELLE DIGNITE FATALE A MON BONHEUR !PRECIPICE ELEVE D’OÙ TOMBE MON HONNEUR !FAUT-IL DE VOTRE ECLAT VOIR TRIOMPHER LE COMTE,ET MOURIR SANS VENGEANCE, OU VIVRE DANS LA HONTE?COMTE, SOIS DE MON PRINCE A PRESENT GOUVERNEUR;CE HAUT RANG N’ADMET POINT UN HOMME SANS HONNEUR ;ET TON JALOUX ORGUEIL PAR CET AFFRONT INSIGNEMALGRE LE CHOIX DU ROI, M’EN A SU RENDRE INDIGNE.ET TOI, DE MES EXPLOITS GLORIEUX INSTRUMENT,MAIS D’UN CORPS TOUT DE GLACE INUTILE ORNEMENT,FER JADIS TANT 0 CRAINDRE, ET QUI, DANS CETTE OFFENSE,M’AS SERVI DE PARADE, ET NON PAS DE DEFENSE,VA, QUITTE DESORMAIS LE DERNIER DES HUMAINS,PASSE, POUR ME VENGER EN DE MEILLEURES MAINS.

Don Diègue dans Le Cid de Corneille, scène IVSource:http://www.atramenta.net/lire/le-cid/2168/5#oeuvre_page

Résultats?

Vitesse de lecture : plus rapide en minuscules qu’en majuscules

Différentes études (Poulton et Brown, 1968 ; Tullis, S. T., 1988 ; ...) montrent que la vitesse de lecture est environ 14% plus rapide pour des textes écrits normalement en majuscules et minuscules que pour des textes écrits uniquement en majuscules.

Conclusions

Conséquences pour la conception de vos Designs???

« Si j’écris, c’est pour être lu.Tout ce qui peut rendre plus difficile cette lecture

doit être questionné. »

Moi

Un peu de

Technique

La lecture sur écran est fatigante et contraignante

Ecran Impression

Un peu de vocabulaire…

Les familles de caractères

• Serif avec empattement • sans-serif sans empattements• monospace à chasse fixe• cursive écriture

manuscrite• fantasy fantaisie

Times New Roman (avec serif) Les styles de caractèresGeorgia (avec serif) Les styles de caractèresCourrier (avec serif) Les styles de caractèresGaramond (avec serif) Les styles de caractèresArial (sans sérif) Les styles de caractèresVerdana (sans sérif) Les styles de caractèresTahoma (sans sérif) Les styles de caractères

Quelques exemples :

Remarquez que toutes ces polices ont la même taille (20pt) !!! On constate clairement que certaines polices sont mieux adaptées que d’autres à une diminution de taille ; par exemple, la police tahoma supporte très bien une petite taille tout en restant relativement lisible. Quand vos menus sont très touffus, c’est une police qui peut vous aider.

Choix d'une police de caractères.

Sérif ou sans sérif.

Les polices de caractères avec sérif ont une ligne de base plus marquée renforcée par les "pieds" des caractères. Ceci aide l'oeil du lecteur à se déplacer horizontalement.

Sans sérif et sérif peuvent être combinés sur une même page.

Sérif est souvent plus facile à lire dans le corps du texte. Sans sérif peut être utilisé pour créer un contraste.

La résolution et la couleur influencent ces choix.

Texte en Helvetica 28Texte en Times 28

Texte en Helvetica 28 Texte en Times 28

Texte en Helvetica 28Texte en Helvetica 28

Texte en Times 28Texte en Times 28

Variantes

Il existe différentes manières de faire varier une police de caractères. • alléger (rendre le trait plus fin)• engraisser (mettre en gras)• condenser (rétrécir la largeur des lettres)• étendre (élargir le corps des lettres)• mettre en italique (oblique)• ombrer• (coloriser)*

(*) la couleur sera traitée lors d’un prochain cours

• Les minuscules sont bien différenciées.• Les majuscules donnent moins d’indices pour

le repérage des lettres.• Il vaut mieux utiliser des minuscules, en

augmentant le corps et/ou la graisse.

Normalement

• Majuscules moins lisibles que minuscules• Italiques moins lisibles que romain• Serifs sur écran moins lisibles que sans-serifs• Caractères simples plus lisibles

Résumé

Ambiguïté des majuscules non accentuées

JUPPE CHAHUTE A L'ASSEMBLEE

Alain Juppé chahute-t-il ou est-il "chahuté" à l'Assemblée ?

HTMLPolices et Variantes

Unités

Absolues mmcm = 10 mmInch = 25,4 mmPica = 1/6 inchPoint = 1/72 inch

Proportionnelle %EmEx

Liée au support Px = ?

Unités employées en typographie :

Pixel (px) Point affiché sur l’écran d’un moniteurPoint (pt) 1/72 ème de pouce ;

si l’écran a une résolution de 72dpi, points et pixels sont équivalents

Pica (pc) 1 pica = 12 points

Em (em) Corps de la police ; pour une police de 12 point: 1 em = 12 points (Il existe aussi 1 En = ½ Em)

http://www.themaninblue.com/experiment/emWidths

http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem

Utilisation des variations d'une police de caractères.

La norme française (Afnor) précise que : "l'angle de vue doit être situé au minimum entre 0°16’et 0°22’ soit 3 et 4 millimètres à 60 cm de l'écran pour une lettre capitale

Si on prend une fonte qui fait 12 pixels de haut et un écran avec une résolution de 80 dpi (32 pixels par cm), une lettre capitale mesure 12/32 cm soit 3,75 mm .

Le corps est la taille de la lettre, exprimée en points. Un point équivaut à 1/72 de pouce soit environ 0,35 mm. C'est à dire qu'un corps 3 mesure un millimètre, un corps 9, trois millimètres et un corps 12, quatre millimètres.Pour les textes courants, il est préférable d'utiliser un corps compris entre 9 et 12pt. Un corps 6, par exemple, fatigue vite la vue, tandis qu'un corps 14 (ou supérieur) est souvent disproportionné par rapport à l’espace occupé par le texte.

Exemples

Corps 12 : Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12pt.

Corps 1: Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12px..

Corps 20 : Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12pt.

Corps 28: Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12.

Police de caractères et CSS

En matière de typographie, la norme CSS offre pratiquement les mêmes fonctionnalités qu'un bon logiciel de mise en page. C'est ainsi que l'on peut définir :

• la police utilisée, soit sous forme générique, soit sous forme spécifique (en indiquant le nom de la police, comme dans le HTML). Le téléchargement, total ou partiel d'une police, est même prévu

• le style : normal ou italique (déjà dans le HTML), ou oblique ;• la casse (ex : transformation de minuscules en majuscules), et les petites majuscules • les dimensions des caractères (taille, largeur, graisse), et leur couleur ;• la décoration de texte : souligné, barré, clignotant (déjà dans le HTML) et surligné ;• le positionnement vertical : indice, exposant (déjà dans le HTML) • le crénage (distance entre caractères et la distance entre les mots • l'interlignage (distance entre lignes) • l'ombre du texte (CSS2)

Police de caractères et CSS<style type="text/css">

p { font-family: Tahoma, Geneva, sans-serif;font-size: 12pt;font-style: italic;line-height: 15px;font-weight: bold;font-variant: normal;text-transform: capitalize;color: #03C;opacity: 0.5;text-shadow: 0px 0px 9px #777;text-decoration: underline;background-color: #FF0;letter-spacing: 5px;text-align: justify;text-indent: 10pt;word-spacing: 2pt;display: table-cell;padding: 15px;width: 300px;margin-top: 25px;margin-right: 20px;margin-bottom: 25px;margin-left: 20px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;list-style-position: inside;list-style-type: square;position: absolute;left: 200px;top: 50px;

}

.ombrage {text-shadow: 0px 0px 9px #222;color: #fff;font-size: 14pt;font-weight: bold;

}

Donc :

1. Utiliser des polices sans sérif pour les titres et les libellés.2. Utiliser éventuellement des polices avec sérif pour les textes bien que la tendance actuelle soit également à l’utilisation même pour les textes de polices sans sérif jugées plus modernes. Les polices avec sérif sont cependant en principe censées améliorer la lisibilité. Vérifiez.3. Utiliser des fontes de caractères dont la largeur se situe entre 50% et 100% de la hauteur. 4. Utiliser des polices sans sérif et non grasses pour les fontes de petites tailles (inférieure ou égale à 10 points). 5. Utiliser les polices bien formées plutôt que les polices stylisées ou décoratives non standards et parfois difficiles à lire. 6. Parfois le choix de la police peut renforcer ou déforcer le message : essayer de faire un site sur un château médiéval en utilisant une police courrier ou un site à caractère scientifique en gothique…

Choix de la couleur de police et de la couleur de fond

http://www.snook.ca/technical/colour_contrast/colour.html

HTML5: on a droit à la transparence!

BONNES PRATIQUES

• Attribuer à chaque fonte un seul usage pertinent et cohérent.

• Quand on combine plusieurs polices de caractères, il est important de décider à l'avance comment elles vont s'harmoniser ou contraster.

• En général, il ne faut pas utiliser plus de deux polices de caractères au cœur d’une même page.

• Une excellente typographie est invisible et elle n'entrave ni la lecture, ni l'information.

• Un surplus de polices de caractères sur une même page distrait le lecteur, crée une intrusion visuelle qui ralentit le processus de lecture.

CONSEILS

Une bonne utilisation de la typographie améliore la lisibilité. Celle-ci est globalement déterminée par :

• la police de caractères choisie • la qualité de l'affichage • la longueur des lignes • l'espace entre les lettres, les mots et les lignes • la justification ou l'alignement à gauche • la couleur des caractères et le contraste qu’elle

offre avec la couleur de fond• l’espace libre autour des blocs de texte.

Zones de texteHTML

Cours de Communication

Typographie & Décryptage de textes sur écran

Une lettre isolée ne possède que sa valeur plastique.. Dés que la même lettre sert à véhiculer un texte, elle se charge de nombreuses significations

http://perso.wanadoo.fr/elisabeth.fays/cours/

Comme pour les personnes, la physionomie d’une typo forge en quelques secondes notre première impression d’un site

Typographie Typographie Typographie

Note :

Deux polices différentes avec sérif se marient généralement mal entre elles.

Il est plus facile d’harmoniser des polices sans sérif (bâton) ou une police sans sérif et une police avec sérif.

EXEMPLES

EXEMPLES

Les détails, toujours les détails…

AvantAprès

Source: http://www.emballezmoi.com/category/art-graphisme/typographie/ & http://paganandsharp.com

La police Comic Sans est devenue le symbole de l’amateurisme au sein de la communauté des Designer élitiste et hautins…

Evitez-là s’il y a un designer dans le jury

ou

Envoyez promener les designers prétentieux et utilisez-là quand même mais alors avec talent!

http://comicsansproject.tumblr.com/

http://comic.olyxo.com/ Voir:

Pour les subversifs: http://www.goodfuckingdesignadvice.com/advice/43/

METHODE

Commencez par choisir la typographie de base du contenu de la page: Police, taille, couleur, contraste, largeur de colonne, interligne…

Rajoutez les typographies pour les titres (h1 à h6) et les menus: Police, taille, graisse, couleur, contraste, marges…

Rajoutez les typographies spéciales (liens, citations, légendes d’images…): Taille, variantes, graisse, couleur…

VOS OUTILS POUR LES CHOIX TYPOGRAPHIQUES

Vérification du contraste de lecture: http://www.snook.ca/technical/colour_contrast/colour.html

Choix de polices:http://typecast.com/

Téléchargement de polices non standards:Google fonts: http://www.google.com/webfonts

www.spurapp.com

http://www.google.com/fonts http://simplebits.comhttp://ilovetypography.comhttp://designr.it

Si vous voulez approfondir la notion de typographie en général, je vous conseille ce site :http://www.typographie.org

Avant l’écriture: on est dans la préhistoireA partir de l’écriture: l’Histoire commence

Exercices pour Votre Portfolio