Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design, ergonomie et lisibilité des sites internet

Efa8c07900b9df1d12923f8a82df3344?s=47 FrederiqueGame
February 11, 2015

Design, ergonomie et lisibilité des sites internet

Conférence WordPress Camp Paris 2015

Efa8c07900b9df1d12923f8a82df3344?s=128

FrederiqueGame

February 11, 2015
Tweet

Transcript

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

    des sites internet @FrederiqueGame
  2. WORDPRESS 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. » WORDPRESS 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. » WORDPRESS 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…). WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  6. Quelques définitions… WORDPRESS 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) ? WORDPRESS 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 WORDPRESS 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. WORDPRESS 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… WORDPRESS 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 WORDPRESS 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 WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr L’objectif de tout projet web = la satisfaction et le confort de l’utilisateur final
  13. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr

  14. WORDPRESS 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é WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  16. Quelques chiffres… WORDPRESS 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 WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  18. Champs d’application WORDPRESS 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. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  20. • LOGO • TYPO • COULEURS #design WORDPRESS 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. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  22. None
  23. #design WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr

  24. Jolis exercices sur Photoshop… Mais ce ne sont pas des

    LOGOTYPES #design WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  25. Abstraction trop poussée, le message du logo risque de passer

    à côté. #design WORDPRESS 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%)
  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é WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr #typo
  28. #design WORDPRESS 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. WORDPRESS 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é WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  31. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr

  32. WORDPRESS 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/ WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr #contraste #accessibilité

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

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

  43. #lisibilité WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr Gestion de l’aération

    des textes et paragraphes
  44. #lisibilité WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr Gestion de l’aération

    des textes et paragraphes
  45. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr

  46. • ARCHITECTURE • ORGANISATION VISUELLE • COHÉRENCE • CONVENTIONS •

    INFORMATION • COMPRÉHENSION • ASSISTANCE • GESTION DES ERREURS #ergonomie WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr Balises Hyperliens Fil d'ariane Terminologie Formulaires Aides Éléments cliquables Libellés
  47. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr

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

    @frederiquegame www.frederiquegame.fr Cette information est disproportionnée par rapport à l’utilisation du site...
  50. #ergonomie WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr WORDPRESS 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. #ergonomie WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr WORDPRESS CAMP PARIS

    2015 @frederiquegame www.frederiquegame.fr Noyé… Le compte lecteur !
  52. #ergonomie WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr WORDPRESS CAMP PARIS

    2015 @frederiquegame www.frederiquegame.fr JARGON BAZAR ABSENCE DE HIÉRACHIE D’ INFORMATIONS CONFUSION Zône « Vous » et « Nous »
  53. #ergonomie WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr WORDPRESS 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 WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  55. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr WORDPRESS 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 WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  57. Prendre soin des visiteurs… ...d’un maximum d’entre-eux. WORDPRESS 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 WORDPRESS 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. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
  60. Prendre soin des visiteurs… Jusqu’au bout. WORDPRESS CAMP PARIS 2015

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

  62. WORDPRESS 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. Audit simple pour vos sites WORDPRESS CAMP PARIS 2015 @frederiquegame

    www.frederiquegame.fr opquast.com/fr/
  64. WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr

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

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