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

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

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

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

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

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/

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

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

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/

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

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (20)

Viewers also liked (8)

Similar to Design, ergonomie et lisibilité des sites internet, Frederique Game (20)

Recently uploaded (20)