Digital Morning - Mídia Programática, muito além do Retargeting
Digital Creative Morning 2
-
Upload
rapp-paris -
Category
Documents
-
view
540 -
download
0
description
Transcript of Digital Creative Morning 2
![Page 1: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/1.jpg)
RETOUR D’EXPERIENCE PARIS WEB
![Page 2: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/2.jpg)
10, 11 et 12 octobre 2013
650 participants 64 orateurs 41 conférences 21 ateliers
Paris Web, la conférence francophone des gens qui font le web.
Elle explore les thèmes de l'accessibilité Web, du design numérique et des standards ouverts.
![Page 3: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/3.jpg)
Penser l’expérience utilisateur mobile
1
![Page 4: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/4.jpg)
Notre job n’est pas (seulement)de fournir une belle expérience utilisateur
![Page 5: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/5.jpg)
C'est (aussi) travaillersur les moments dégradés de l’expérience
![Page 6: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/6.jpg)
![Page 7: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/7.jpg)
![Page 8: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/8.jpg)
![Page 9: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/9.jpg)
![Page 10: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/10.jpg)
![Page 11: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/11.jpg)
![Page 12: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/12.jpg)
![Page 13: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/13.jpg)
![Page 14: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/14.jpg)
![Page 15: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/15.jpg)
![Page 16: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/16.jpg)
![Page 17: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/17.jpg)
![Page 18: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/18.jpg)
Ce que Fraisse & Orsini nomment
la conduite temporelle " l'activité n'est plus dirigée vers l'acte à accomplirmais vers l'adaptation au délai. "
Etude des conduites temporelles. I. L'attenteIn: L'année psychologique.1955 vol. 55, n°1. pp. 27-39.
![Page 19: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/19.jpg)
Or les usagers sont très volatilesencore plus en situation de mobilité,et d'autant plus qu’ils ont le choix
![Page 20: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/20.jpg)
La preuve !"More than one-quarter say they will visit a competitorsite (28%) or not trust the website (27%)if the site takes too long to load."
SOASTA 2013 Website and Mobile App Report
![Page 21: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/21.jpg)
Que peut y faire le designer ?
![Page 22: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/22.jpg)
Tempsd’attenteréel
Tempsd’attenteperçu≠
![Page 23: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/23.jpg)
Conseils pour réduirele temps d'attente perçu
![Page 24: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/24.jpg)
Principe de gestion de l'attente
1.
Attendre avant d'entrer dans le systèmesemble plus long qu'attendre une fois entré dans le système
![Page 25: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/25.jpg)
Hello les splash screens !
![Page 26: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/26.jpg)
Hello les splash screens !
![Page 27: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/27.jpg)
Hello les splash screens !
![Page 28: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/28.jpg)
Le temps d'attente perçu augmente avec :
La criticité ou sensibilité de l'information recherchéeex : Ratp, Shazam, Skype
![Page 29: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/29.jpg)
Le temps d'attente perçu augmente avec :
Un contexte d'utilisation stressantEx : Google Maps
![Page 30: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/30.jpg)
Le temps d'attente perçu augmente avec :
La répétition de l'attenteEx : Meteo France (Splash screen + Intersticiel pub)
![Page 31: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/31.jpg)
La solution !
Simuler l'entrée dans le systèmeen affichant le maximum de chosesUtiliser les squelettes d'écran pour donner l'impression d'avancer.
![Page 32: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/32.jpg)
![Page 33: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/33.jpg)
![Page 34: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/34.jpg)
![Page 35: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/35.jpg)
![Page 36: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/36.jpg)
Un compromisentre image et réduction du tempsd'attente perçu
![Page 37: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/37.jpg)
Principe de gestion de l'attente
2.
Une attente occupéeparaît moins longue qu'une attente inoccupée
![Page 38: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/38.jpg)
Monoprix
![Page 39: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/39.jpg)
Principe de gestion de l'attente
3.
Détourner l’attention du loader
![Page 40: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/40.jpg)
Google drive
![Page 41: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/41.jpg)
Google drive
![Page 42: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/42.jpg)
Google drive
![Page 43: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/43.jpg)
Google drive
![Page 44: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/44.jpg)
Goodreads
![Page 45: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/45.jpg)
Goodreads
![Page 46: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/46.jpg)
Goodreads
![Page 47: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/47.jpg)
Principe de gestion de l'attente
4.
Donner de l’information précise
![Page 48: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/48.jpg)
Path Transit Monoprix Ibotta
![Page 49: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/49.jpg)
Principe de gestion de l'attente
5.
Varier les patienteurs
![Page 50: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/50.jpg)
![Page 51: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/51.jpg)
Savoir aussi prendre le temps...
![Page 52: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/52.jpg)
Quand j'ai le temps
WWF
![Page 53: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/53.jpg)
Quand c'est peu coûteux et peu fréquent
Yummly
![Page 54: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/54.jpg)
Yummly
Quand c'est peu coûteux et peu fréquent
![Page 55: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/55.jpg)
Yummly
Quand c'est peu coûteux et peu fréquent
![Page 56: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/56.jpg)
Yummly
Quand c'est peu coûteux et peu fréquent
![Page 57: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/57.jpg)
Mais aussi
Moins de clics mais pas sur tout
Aller jusqu'au bout de ces choix
Hiérarchiser les contenus
Inhiber les distracteurs
...
![Page 58: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/58.jpg)
Crédits
Cette présentation est un résumé de la conférence d’Amélie Boucher.
Director of User Experience chez Viadeo,consultante en Ergonomie, Architecture de l ’information et UX Design et diplômée du Master d’Ergonomie de l’Université René Descartes (Paris 5)Amélie Boucher lance en 2003 le site éditorial www.ergolab.net.
![Page 59: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/59.jpg)
La théorie du flow
ou l’expérience optimale
2
![Page 60: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/60.jpg)
Le « cognitive flow »
(ou « flux cognitif »)est un concept formalisé en 1970 par le psychologue hongrois
Mihály Csíkszentmihályi.
![Page 61: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/61.jpg)
Selon lui, notre disposition émotionnelle est directement influencéepar le rapport entre la difficulté d’une tâche et notre niveau de
qualification.
Buts concretset règlescompréhensibles
Exigencesintéractives etcapacités del’utilisateur
Feedback clairet temporellementpertinent
Réduireles distractionsextérieures
+ + +
=
Cognitive flow
![Page 62: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/62.jpg)
![Page 63: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/63.jpg)
• Grande concentration
• Impression de contrôle
• Sensation de maîtrise de ce qu’il faut faire et comment y arriver
• Perte de conscience de soi , extase
• Distorsion de la perception de l’écoulement du temps
• Conviction que la tâche elle-même est la seule justification nécessaire à son accomplissement (activité autotélique )
Les caractéristiquesde l’état de flow
![Page 64: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/64.jpg)
Les jeux vidéosLes rois du flow
![Page 65: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/65.jpg)
Application & Best practicesWeb-documentaires et autres sites de consultation de médias
![Page 66: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/66.jpg)
• Clair (compréhension rapide des règles et des buts)
• Qui permet l’exploration (série d’expériences gratifiantes)
• Qui sert la non-linéarité du propos documentaire (n’abandonne pas le spectateur)
• Qui permet la prise de décision en connaissance de causes
• Qui aide à re-créer du sens documentaire(rhétorique interactive) et de l’engagement (extase)
Design de l’interfaceButs concretset règlescompréhensibles
![Page 67: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/67.jpg)
Exigencesintéractives etcapacités del’utilisateur
• Choix du « niveau de difficulté »Facile (linéaire), intermédiaire (interactif), difficile (participatif)
• Hiérarchisation de la complexité
• Sentiment de progression, de montée en capacités
• Référence au « connu »
• Rassurer l’utilisateur tout en le poussant à sortir de sa zone de confort (règle des 10%)
• Analyse des comportements et adaptation dynamique
S’adapter aux usages,aux capacités, aux habitudes
Playtestez !
![Page 68: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/68.jpg)
• Perception spatiale
• Perception temporelle
• Perception de progression narrative
Feedbacks
Donner à l’utilisateur des outils de :
• Jauges de progression, effet grisé / allumé,bruitages, marqueurs de progression…
En utilisant des systèmes de :
Feedback clairet temporellementpertinent
![Page 69: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/69.jpg)
FeedbacksFeedback clairet temporellementpertinent
3 règles à respecter
• Ils doivent apparaître tôt dans la consultation, pour que l’utilisateur se familiarise et comprenne rapidement leur intérêt.
• Ils doivent apparaître au bon moment : soit directement après l’accomplissement d’une « tâche » soit à mi-chemin.
• Ils doivent être persistants d’une visite à l’autre. Un système de sauvegarde de la progression (cookie, Facebook connect, inscription…) est dès lors précieux.
![Page 70: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/70.jpg)
Réduireles distractionsextérieures
• Proposer le plein écran
• Éviter les liens sortants
• Miser sur la qualité d’image + fluidité du stream
• Faire disparaître l’interface
• Manier l’animation avec précaution
• Laisser partir et faire revenir
• Envisager le multiplateformes (cloud)
Dépolluer !
![Page 71: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/71.jpg)
Expérience Optimale
Conclusion
+
+
=
Plaisir (esthétique)
Engagement (quelque chose de plus grand que soi),
Sens (quelque chose d’important)
![Page 72: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/72.jpg)
Cette présentation est un résumé de la conférence de Florent Maurin.
Diplômé de l'Ecole supérieure de journalisme de Lille, scénariste interactif de webdocumentaires, et architecte transmedia, il dirige depuis janvier
2013 The Pixel Hunt (http://www.thepixelhunt.com).
Crédits
![Page 73: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/73.jpg)
• Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)http://www.paris-web.fr/2013/listening_platforms.pdf
• Le retour sur investissement de la qualité webPrésenté par Muriel de Dona (Consultante qualité Web chez Temesis – co-auteur du livre « Qualité Web »)http://paris-web.fr/2013/spopquast-partnersparis-web20131010-131016060421-phpapp01.pdf
3
![Page 74: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/74.jpg)
Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)
Approche globale permettant aux métiers de la marque d’optimiser leurs processus de pilotage des parcours clients et prospects sur les multiples points de contacts.
Customer eXperience Management
Source: Clever Age
![Page 75: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/75.jpg)
Source: Clever Age
CXM : Les points de contact traditionnels/numériques
Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)
![Page 76: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/76.jpg)
Source: Clever Age
Listening Platforms
Plateformes et services de surveillance d’indicateurs variés tels que : performances, sécurité, compatibilité multi-devices, e-reputation, réseaux sociaux…
Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)
![Page 77: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/77.jpg)
Source: Clever Age
Listening Platforms : Les outils du marché actuel
Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)
![Page 78: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/78.jpg)
Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)
Le ROI de la Qualité Web, c’est quoi ?
|Comment le mesurer ?
|Avec quel référentiel ?
Temesis édite le livre « Qualité Web - Les bonnes pratiques pour améliorer vos sites », développe également un ensemble de méthodes et d’outils pour la maitrise de la qualité Web : Opquast (http://opquast.com/fr/)
![Page 79: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/79.jpg)
ROI = (gains – couts) / couts
Les gains
Pour l’utilisateur • rapidité, accessibilité, sécurité
Pour l’agence • Image, RH, Process, business
Pour le client • garanties, économies, satisfaction
Les économies• Coûts de non qualité • Micro-coûts cachés• Dette technique = impact sur
maintenance (délais/coûts)
Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)
Les coûts• Management / Responsable qualité • Audit• Mise en conformité• Outils d’analyse et suivi• Formation
![Page 80: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/80.jpg)
Opquast, c’est :• Des bonnes pratiques (Livre & checklists)• Des outils• Des entreprises partenaires comme Clever Age
Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)
![Page 81: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/81.jpg)
Comment ?
Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)
![Page 82: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/82.jpg)
Référentiel
Les objectifs du référentiel sont :• sélection des bonnes pratiques ayant un potentiel supposé de ROI• sans oublier la satisfaction utilisateur
Méthodologie
• Première sélection de critères• Itérations• Réalisation d’audits tests• Ajustements
Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)
![Page 83: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/83.jpg)
SourcesVideo / Article / Slideshare
Un petit pas pour l'em,un grand pas pour le Web
Nicolas Hoizey
Co-fondateur & directeur de l’innovation de Clever Age
4
![Page 84: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/84.jpg)
Qu'est-ce qu'un « em » ?
Un peu d'histoire…
Cette unité de mesure, notée em, est appelée « cadratin » en typographie française.
Historiquement, le cadratin correspond à la hauteur d'un caractère de plomb utilisé dans l'imprimerie.
(Source)
![Page 85: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/85.jpg)
![Page 86: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/86.jpg)
![Page 87: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/87.jpg)
![Page 88: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/88.jpg)
![Page 89: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/89.jpg)
Les nouveaux moyens de navigation sur le Web doivent donc être pris en compte dans la conception des sites.
Les interfaces doivent être adaptées à des conditions de consultations variables
Ces différents appareils ont bien entendu des tailles physiques et formats — paysage ou portrait notamment — très différents.
![Page 90: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/90.jpg)
![Page 91: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/91.jpg)
![Page 92: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/92.jpg)
![Page 93: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/93.jpg)
![Page 94: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/94.jpg)
![Page 95: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/95.jpg)
![Page 96: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/96.jpg)
![Page 97: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/97.jpg)
![Page 98: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/98.jpg)
![Page 99: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/99.jpg)
« A DAO Of Web Design » écrit en 2000 par John Allsopp, est un article fondateur de l’intégration Web de qualité :
« C'est la nature du web d'être flexible, et il en va de notre rôle en tant que concepteurs et développeurs d'embrasser cette flexibilité et de produire des pages qui, en étant flexible, sont accessibles à tous. Faire des pages qui s'adaptent aux besoins d'un lecteur, dont la vue est plus qu'imparfaite, et qui souhaitent lire des pages avec une grande taille de police. »
![Page 100: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/100.jpg)
![Page 101: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/101.jpg)
![Page 102: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/102.jpg)
![Page 103: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/103.jpg)
![Page 104: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/104.jpg)
![Page 105: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/105.jpg)
![Page 106: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/106.jpg)
![Page 107: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/107.jpg)
![Page 108: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/108.jpg)
![Page 109: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/109.jpg)
![Page 110: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/110.jpg)
On trouve une taille par défaut de 16px dans les navigateurs d’ordinateurs, smartphones ou tablettes.
Mais il est important de savoir qu’au delà du fait que certains utilisateurs changent cette valeur par choix, certains appareil et/ou navigateurs sont fournis avec une taille par défaut différente.
La taille par défaut de 16px n’est pas un standard
![Page 111: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/111.jpg)
Source : http://lab.gasteroprod.com/rfs/
Taille par défaut de 16px
![Page 112: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/112.jpg)
![Page 113: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/113.jpg)
Responsive Web Design élastique
![Page 114: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/114.jpg)
![Page 115: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/115.jpg)
![Page 116: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/116.jpg)
![Page 117: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/117.jpg)
![Page 118: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/118.jpg)
![Page 119: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/119.jpg)
![Page 120: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/120.jpg)
L’unité rem permet de définir des tailles relatives comme em, mais en prenant la taille de html comme référence plutôt que l’élément parent.
![Page 121: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/121.jpg)
![Page 122: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/122.jpg)
![Page 123: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/123.jpg)
![Page 124: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/124.jpg)
![Page 125: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/125.jpg)
![Page 126: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/126.jpg)
![Page 127: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/127.jpg)
![Page 128: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/128.jpg)
![Page 129: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/129.jpg)
![Page 130: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/130.jpg)
Votre objectif est — devrait être — de diffuser un message, un service, et d’atteindre un public le plus large possible en lui proposant une expérience positive.
C’est que vous n’avez pas le choix, qu’il faut lâcher prise…
Respecter son public et s’adapter à ses préférences — tant que possible — est bien évidemment une bonne pratique.
![Page 131: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/131.jpg)
L’intégration en Responsive Web Design élastique est — aujourd’hui — le meilleur moyen de choisir vous-même comment votre site s’affiche, tout en respectant les préférences de vos visiteurs.
…mais que cela ne nécessite pas de perdre le contrôle !
![Page 132: Digital Creative Morning 2](https://reader034.fdocument.pub/reader034/viewer/2022052410/547b6299b4af9fe9468b45d5/html5/thumbnails/132.jpg)
Merci