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.
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
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
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
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…
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
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
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
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
et compréhensible. C’est centrer la réflexion sur le destinataire du contenu. La lisibilité WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
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
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
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
à 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
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%)
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
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
• 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
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
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
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
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 !
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.
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 !
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
@frederiquegame www.frederiquegame.fr BON POINT :) Les zônes utilisateurs sont identifées, clairement. Le site prend bien en compte les BESOINS des internautes.
(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
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
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
recherche, leur navigation. Afin de soulager leur appréhension. Let’s do Quality Enjoy :) WORDPRESS CAMP PARIS 2015 @frederiquegame www.frederiquegame.fr
frederiquegame
naoyawatanabe
ajstarks
hopin
takuro_nakajima
magi1125
_limex_
torije
hrtnde
nextbeat
ryoya_frst
kinakobooster
jirosh1998
eitanlees
smashingmag
sachag
davidbonilla
samanthasiow
sstephenson
chriscoyier
addyosmani
tmm1
andyhume
orderedlist
