Ergonomie editoriale : les innovations et tendances 2015 Mediaculture.fr - Cyrille Frank

Les innovations en ergonomie

éditoriale

Twitter : @cyceron site : mediaculture.fr

Newsletter : mediacademie.org

Conseil éditorial, formation, accompagnement

Le Télégramme Les nouvelles facettes du journalisme IFRA - 2008-2009 Les innovations en ergonomie éditoriale - Cyrille Frank – mediaculture.fr 2014

Les tendances


La progression du Responsive Design


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).


Mais progression parallèle des applis en temps passé sur smartphone

En savoir plus sur Viuz.com

http://www.viuz.com/2014/04/02/les-apps-86-du-temps-mobile/�


L’irruption des homes déstructurées


Homes destructurées : 3 cols/2cols


Homes destructurées sur la verticalité aussi


Homes destructurées sur la verticalité aussi

Theverge.com


La lecture « zen »


• 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)


gigaom.com


lemonde.fr


getpocket.com


Titres très fortement en avant


Le titre (long pour le SEO avec mots clés ou le social avec termes incitatifs ) s’étend sur trois colonnes dans l’article




La forte mise en avant des contenus multimédia

en Home


latimes.com


lemonde.fr


lefigaro.fr


theverge.com


La personnalisation


mashable.com


francetvinfo.fr

Une relation de proximité avec le lecteur comme ce passage de témoin et ces réponses personnelles


Le développement des interfaces horizontales


time.com


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


La navigation horizontale (adaptation à la tablette)


thenextweb.com


lemonde.fr

Sur PC : navigation horizontale par clic sur les flêches


Sur tablette : navigation horizontale au doigt

lemonde.fr



Le retour de la barre de menu verticale


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)


Barre de navigation fixe avec sous navigation dynamique

laprovence.com/


Barre de navigation accessible au clic


latimes.com/

Barre de navigation et sous-navigation en roll-over



La mise en avant du partage social


Boutons accessibles en premier niveau (et non plus en liste déroulante)


Un choix : moins de réseaux, mais mieux

theverge.com


Une omnipésence : avant, après le contenu

upworthy.com


Une omnipésence : les boutons de partage magnétiques

buzzfeed.com


Les boutons d’interaction aussi : partage, commentaire, impression…


Les photos, citations “prêts à partager”

mashable.com

Les innovations


La navigation infinie


mashable.com

Navigation déployée sous chaque article


lesechos.fr

Accès à toutes les rubriques depuis la Home : Ascenseur (presque) sans fin > 17 écrans !


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


L’irruption des interfaces « applis »



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)

https://gigaom.com/2014/09/29/chartbeat-gets-certified-to-measure-attention-tries-to-move-advertising-away-from-clicks-and-pageviews/�


Place inédite accordée aux visuels

immenses


Visuel immense format panoramique au début des articles

gigaom.com


medium.com


lequipe.fr/explore

Large place aux visuels dans les formats longs en parallaxe


La hiérarchie chronologique

Présentateur

Commentaires de présentation

Les blogs, les marques, les institutions produisent elles-mêmes du contenu grâce à la facilité d’accès aux technologies web 2,0


Présentateur

Commentaires de présentation

Les blogs, les marques, les institutions produisent elles-mêmes du contenu grâce à la facilité d’accès aux technologies web 2,0


L’actu en bref



lemonde.fr


brief.me


politico.com



Les recirculations originales


Présentations de trois sujets forts avant les articles et non pas après (ceci dit, recirculer avant de circuler ?)

gigaom.com



Le reblog via la plateforme Wordpress : diffuser avant tout

techcrunch.com


Le bloguing en réseau: diffuser avant tout

Medium.com


Le bloguing en réseau: diffuser avant tout

tumblr.com


Les articles les plus récents/populaires très visibles en haut de Home à gauche


Les algorithmes pour améliorer la recirclation Voir aussi Outbrain, taboola...


Les algorithmes pour réussir enfin la personnalisation par l’automatisation


• 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é)


Merci de votre attention !

Conseil éditorial, formation, accompagnement

Twitter : @cyceron site : mediaculture.fr

Newsletter : mediacademie.org

News & Politics

Ergonomie editoriale : les innovations et tendances 2015 Mediaculture.fr - Cyrille Frank