Design, ergonomie de navigation, expérience utilisateur, rapport au lecteur... quelles sont les grandes tendances des interfaces web et les innovations graphiques ou éditoriales de la presse et des médias en ligne pour 2015 ?
Keynote du 21 novembre 2014 réalisée pour le Spiil (Syndicat de la presse indépendante en ligne), lors de la 5e journée de la presse en ligne.
Ergonomie editoriale : les innovations et tendances 2015 Mediaculture.fr - Cyrille Frank
1. Les innovations
en ergonomie
éditoriale
Twitter : @cyceron site : mediaculture.fr
Newsletter : mediacademie.org
Conseil éditorial, formation, accompagnement
2. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Les tendances
3. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La progression
du Responsive Design
4. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Un passage obligé pour les sites qui souhaitent offrir une expérience utilisateurs satisfaisante sur tous les supports.
Plus long et compliqué à développer, mais plus pérenne (fini le relookage pour s’adapter à l’écran de l’utilisateur qui grandit).
5. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Mais progression parallèle des applis en temps passé sur smartphone
En savoir plus sur
Viuz.com
6. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
L’irruption des homes
déstructurées
7. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Homes destructurées : 3 cols/2cols
8. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Homes destructurées sur la verticalité aussi
9. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Homes destructurées sur la verticalité aussi
Theverge.com
10. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La lecture « zen »
11. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
•
Grande réserve de blanc sur les côtés de l’article
•
Tendance à rétrécir un peu la colonne centrale pour faciliter la lecture
•
La hauteur du texte augmente mais l’usage courant de la molette compense (ou du doigt sur tablette/smartphone)
12. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
gigaom.com
13. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
lemonde.fr
14. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
getpocket.com
15. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Titres très fortement
en avant
16. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Le titre (long pour le SEO avec mots clés ou le social avec termes incitatifs ) s’étend sur trois colonnes dans l’article
17. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
18. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
19. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La forte mise en avant des
contenus multimédia
en Home
20. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
latimes.com
21. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
lemonde.fr
22. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
lefigaro.fr
23. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
theverge.com
24. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La personnalisation
25. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
mashable.com
26. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
francetvinfo.fr
Une relation de proximité avec le lecteur comme ce passage de témoin et ces réponses personnelles
27. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Le développement des
interfaces horizontales
28. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
time.com
29. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Pour 3 raisons
•
Réserver la hauteur au contenu pour hameçonner le lecteur le plus tôt possible, avant l’ascenseur
•
Exploiter les taille d’écran 16/9e
•
Anticiper / combiner la navigation horizontale sur tablette via le toucher
30. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La navigation horizontale
(adaptation à la tablette)
31. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
thenextweb.com
32. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
lemonde.fr
Sur PC : navigation horizontale par clic sur les flêches
33. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Sur tablette : navigation horizontale au doigt
lemonde.fr
34. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
35. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Le retour de la barre de
menu verticale
36. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Pour 3 raisons
•
Exploiter la largeur des écrans 16/9e
•
Diminuer la taille des headers
•
Mettre cette barre en option (clic ou roll-over) pour favoriser la tête de gondole et non le rayonnage (ce qu’on me propose versus ce que je suis venu chercher)
37. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Barre de navigation fixe avec sous navigation dynamique
laprovence.com/
38. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Barre de navigation accessible au clic
39. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
latimes.com/
Barre de navigation et sous-navigation en roll-over
40. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
41. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La mise en avant du
partage social
42. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Boutons accessibles en premier niveau (et non plus en liste déroulante)
43. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Un choix : moins de réseaux, mais mieux
theverge.com
44. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Une omnipésence : avant, après le contenu
upworthy.com
45. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Une omnipésence : les boutons de partage magnétiques
buzzfeed.com
46. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Les boutons d’interaction aussi : partage, commentaire, impression…
47. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Les photos, citations “prêts à partager”
mashable.com
49. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La navigation infinie
50. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
mashable.com
Navigation déployée sous chaque article
51. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
lesechos.fr
Accès à toutes les rubriques depuis la Home :
Ascenseur (presque) sans fin > 17 écrans !
52. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
qz.com
Article précédent
Article suivant
Enchaînement des articles les uns après les autres, mais chargement progressif en bas de page
53. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
L’irruption des interfaces
« applis »
54. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
55. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Pour 2 raisons
•
Motiver un passage au payant. On ne paie pour du web, mais pour une application…
•
Fidéliser via des services associés : espace personnel, favoris classés, personnalisation, contributions perso
Augmenter le temps passé, la récurrence de visite, le nombre de pages vues par visite
Un engagement qu’on espère bien monétiser bientôt (cf FT et The Economist)
56. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Place inédite accordée
aux visuels
immenses
57. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Visuel immense format panoramique au début des articles
gigaom.com
58. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
medium.com
59. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
lequipe.fr/explore
Large place aux visuels dans les formats longs en parallaxe
60. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
La hiérarchie
chronologique
61. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
62. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
L’actu en bref
63. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
64. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
lemonde.fr
65. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
brief.me
66. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
politico.com
67. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
68. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Les recirculations
originales
69. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Présentations de trois sujets forts avant les articles et non pas après (ceci dit, recirculer avant de circuler ?)
gigaom.com
70. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
71. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Le reblog via la plateforme Wordpress : diffuser avant tout
techcrunch.com
72. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Le bloguing en réseau: diffuser avant tout
Medium.com
73. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Le bloguing en réseau: diffuser avant tout
tumblr.com
74. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Les articles les plus récents/populaires très visibles en haut de Home à gauche
75. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Les algorithmes pour améliorer la recirclation
Voir aussi Outbrain, taboola...
76. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Les algorithmes pour réussir enfin la personnalisation par l’automatisation
77. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
•
La machine apprend d’elle-même ce qui nous plaît, en fonction de ce que l’on clique et regarde réellement (temps passé)
•
La machine propose des contenus en affinité temporelle et géographique (sur mobile)
•
La machine propose des contenus qui nous socialisent (ce qui plaît à nos amis)
•
La machine nous fait découvrir des contenus (aléatoire/sérendipité)
78. Le Télégramme Les nouvelles facettes du journalisme Les innovations en ergonomie éditoriale - Cyrille Frank – me d i a c u l t u r e .fr 2 0 1 4 IFRA - 2008-2009
Merci de votre
attention !
Conseil éditorial, formation, accompagnement
Twitter : @cyceron site : mediaculture.fr
Newsletter : mediacademie.org