Datagif : medias et design. Web2day, juin 2015

Web2day . Datagif . juin 2015 .

Design et refontede site media

Design

Design ? Le but : inventer, améliorer ou faciliter l’usage d’un produit ou d’un service pour faciliter la vie et améliorer le confortdes utilisateurs.

Média

Média ? Au coeur de la création, du traitementet de la circulationde l’information.

@Datagif

Datagif Nous sommes une équipe de 12 personnes,et le design est notre métier. Nous accompagnons des marques et des médias dans la création ou la refontede leur site ou de leurs supports print.

Entendulors de briefs

Idées reçues Nousallons prendre quelques minutes pour questionner nos idées reçues,qui semblent tellement évidentes lors du design de pages d’un site media.

“ÉVIDEMMENT QU’IL FAUT DES ESPACES PUB PARTOUT ”

Un clientRéunion, 2015

“BIEN SÛR QU’IL FAUT DES BOUTONS DE PARTAGE EN DÉBUT ET EN FIN D’ARTICLE”

Un clientRéunion, 2015

“OUI IL FAUT LES NOMS DESRUBRIQUES SUR TOUTES LES PAGES”

Un clientRéunion, 2015

“TOUT DOIT TENIR DANS LE PREMIER ÉCRAN, IL FAUT UN

MINIMUM DE SCROLL”

Un clientRéunion, 2015

“LÀ IL RESTE DU BLANC, ON PEUT METTRE UNE PUB ? ”

Un clientRéunion, 2015

Votre futurlancement de site

L’annonce de lanouvelle formule

Phrases clé Au lancement de votre futur site, après des mois de travail, vous aurez envie de leprésenter. Voici unesélection des vraies phrases clé qui reviennent le plus souvent, parmi un corpus d’une dizaine de sites medias français.

« FAIT PEAUNEUVE »

« PLUS ÉLÉGANTE, PLUS SOBRE, PLUS

ÉPURÉE »

« PLUS AUDACIEUX,

PLUS SURPRENANT, PLUS INFORMÉ »

« PLUSMODERNE »

« S’ADAPTE À TOUS VOS ÉCRANS »« TEMPS RÉEL » « NOUVEAU PROJET

ÉDITORIAL »

« MUTATION PASSIONNANTE »

« UNE NOUVELLE MANIÈRE DE CONSOMMER L’ACTUALITÉ »

« MET L’ACCENT SUR CES NOUVEAUX

USAGES »

« UNE NOUVELLE EXPÉRIENCE »

« LE MÉDIA DE LA MOBILITÉ »

« RÉVOLUTION NUMÉRIQUE»

« S’ADAPTE À TOUS VOS ÉCRANS »« SE RÉINVENTE » « NOUVEAU PROJET

ÉDITORIAL »

« CHAUDET CALÉ, BEAUET DÉCALÉ »

La réactiondes lecteurs

Haters gonna hateImmanquablement, vos lecteurs réagiront.Voici un florilège decommentaires choisis auhasard à la suite de ces articles. Pas de panique,il y a des haters partout.

Les commentairesqui acceuillent les nouvelles formules

BONSOIRMERDIQUE CETTEPRÉSENTATION

SUR CE SITE

SITE MAL CONSTRUIT,

ILLISIBLE, SANS FIL DIRECTEUR, ET ÇA A DU COÛTER UN BRAS

Les commentairesqui acceuillent les nouvelles formules

FIASCO COMPLET.JE ME RETIRE, C’EST

TROPCOMPLIQUÉ POUR MOI.

REVOYEZ VOTRE COPIE

D’URGENCE.

VIREZ VOSINFORMATICIENS !

DIMINUEZ LA TAILLE DES

POLICES, PAR PITIÉ. LA LECTURE EST DEVENUE ASSEZ DÉSAGRÉABLE

ET FASTIDIEUSE, IL FAUT SCROLLER EN PERMANENCE...

BROUILLON, ET PAS PRATIQUE.

MAIS ON S’HABITUERA.

C´EST NUL ET ARCHI-NUL !

200CMS CARRÉS POUR NOUS FORCER

À REGARDER LES POSTS LES PLUS MALINS ...PLUS

MALINS POUR QUI ?GROS CARACTÈRES,

IMPOSSIBLES À RÉDUIRE

IL FAUT AVOIR BAC + 20 POUR

CHERCHER LES INFOS QUE L’ON SOUHAITE.

NOUVELLE PRÉSENTATION

COMPLÉTEMENT CON. VITE REVENEZ

À L’ANCIENNE. LA PUB EST

INNOMMABLE. JE NE LA REGARDE PLUS ET JE REFUSE

D’ACHETER LES MARQUES

PRÉSENTÉES

POURQUOI FAIRE SIMPLE QUAND ON PEUT TOUT COMPLIQUER ...

MAINTENANT ON SE CROIRAIT À LAS VEGAS : ÇA BRILLE DE PARTOUT, ÇA CLIGNOTE, ÇA

OUVRE DES TRUCS EN PASSANT SA

SOURIS SANS QU’ON NE DEMANDE RIEN, ON NE SAIT PAS OÙ IL FAUT POSER SES

YEUX...

Faut-il tuerla homepage ?

SIZE DOES MATTER

SIZE DOES MATTER

Une question de taille Est-ce que la homepage doit tout contenir ?Ou doit-elle êtrela plus courte possible ?

Quels contenus pourla homepage ?La question de la taille dépend en réalité du contenu. Posons-nous les bonnes questions pour déterminer ce qu’on y retrouve.

A.Je mets

tout mon contenu dansla homepage parce que ça sert à ça lahomepage.

Quels contenus pourla homepage ?

A.Je mets

tout mon contenu dansla homepage parce que ça sert à ça lahomepage.

B.Je mets

tout mon contenu dansla homepage mais de toute

façon personne n’y va.

Quels contenus pourla homepage ?

A.Je mets

tout mon contenu dansla homepage parce que ça sert à ça lahomepage.

C.Je ne

mets qu’une sélection de mon contenu

car je suis chez moi après

tout.

B.Je mets

tout mon contenu dansla homepage mais de toute

façon personne n’y va.

Quels contenus pourla homepage ?

A.Je mets

tout mon contenu dansla homepage parce que ça sert à ça lahomepage.

C.Je ne

mets qu’une sélection de mon contenu

car je suis chez moi après

tout.

B.Je mets

tout mon contenu dansla homepage mais de toute

façon personne n’y va.

D.Je ne

mets qu’une sélection mais

uniquement ce que tous les lecteurs auront

déjà lu.

Quels contenus pourla homepage ?

A.Je mets

tout mon contenu dansla homepage parce que ça sert à ça lahomepage.

C.Je ne

mets qu’une sélection de mon contenu

car je suis chez moi après

tout.

B.Je mets

tout mon contenu dansla homepage mais de toute

façon personne n’y va.

D.Je ne

mets qu’une sélection mais

uniquement ce que tous les lecteurs auront

déjà lu.

E.Je ne mets

rien, puisque de toute façonla homepage

ça ne sert plusà rien.

Quels contenus pourla homepage ?

Selon le NYT, la homepage est de

toute façon déjà morte.

:’(

Divisé par deux En deux ans, le New York Times a vu le trafic de sa homepage se diviser par deux. Les internautes ne viennent plus consulter les actus via la home, mais davantage par des liens extérieurs. On est passéà une consommation plus éclatée de l’actualité.

Source :rapport d’innovationNew York Times, mai 2014

2011 2012 2013

160

60

0

100

40

80

20

120

140

MillionsR.I.P.

Qz old version

Pas de homepage À son lancement, la homepage de Quartz faisaitentrer l’internaute directement par un article.

Qz version actuelleUne home raisonnée Puis Quartz aréintroduit une homepage, présentant une va-leur ajoutée : le brief (mémo de l’actu)et une sélection des meilleurs articles. Car le media s’est rendu compte que ses lecteurs avaient une circulation les faisant revenirsouvent revenir sur la «home», donc sur un article déjà lu.

Qz version actuelle

La peur du scrollVS l’acceptationdu scrollLa maladie de l’Internet Beaucoupd’éditeurs de sites sont persuadés que les internautes ne scrollent pas. Cette peur est un cercle vicieux : en créant des pages ultra condensées, les internautes n’ont en effet pas envie d’en voir davantage.

Contenu important

Articles à la une..

Pub..

Articles récents..

Top..

Pub..

Article partenaire..

Les plus lus..

Articles à la une..

Pub..

Articles récents..

Top..

Pub..

Article partenaire..

Les plus lus..

Contenu peu important

La peur du scrollVS l’acceptationdu scroll

PEUR PAS PEUR

Prioriser l’important Le réflexe basique est de vouloir tout caser en haut de la page, et tout devient important, au mêmeniveau. Sans peur du scroll, on libèretotalement la navigation et on peut ainsi avoir une hompage mieux construite, plus équilibrée, et plus agréable pour l’internaute.

Libération Alors que nous travaillons sur la refonte de Liberation.fr, nous avons proposé un fil conducteur pour lanouvelle home.

Libération

Top Scroll En suivant ce Top 100, l’internaute défile la homepage, sans avoir peur de scroller. Celaimplique plus de place pour les contenus, une meilleure hierarchisation, plus d’espaces potentiels pour les publicités.

Slate

Une home flexible Lors de notre travail de refonte de Slate.fr, la rédaction a émis le souhait de tout remettre à plat. Sonapproche magazine et le recul sur les sujetsd’actualité nous ontpermis de construire le haut de la homepage sous forme d’ensemble de contenus qui vivent tout au long de la journée dans différents espaces.

Reader

Le flux Lorsque nous avons travaillé sur le site Reader.fr, l’approchea été différente : le site est un flux global ; la homepage n’est plus un portail nécessaire,l’internaute entredirectement par les contenus.

Faut-il tuerla homepage ?

notre réponse : ça dépend

Faut-il tuerl’habillage ?

habillage

pavé

Vampirisation Alors que les habillages publicitaires étaient des formatsévénementiels, ils sont devenus automatisés, contraignant lesmedias à se conformerà des contraintes de taille drastiques. Comment construire une homecorrecte avec seulement 1000 px de large ?

habillage

pavé

1000 px

habillage

pavé

Vice

Non Vice France fait partie des rares médias qui ont dit non à l’habillage et proposent d’autres formats. L’habillage a tendance à disparaître mais résiste bien dans le paysage français.

Libération Dans notreaccompagnement deLibération, nous avonssoutenu l’abandon del’habillage en homepage. Libération.fr a eu le courage de s’en défaire et sera l’un des premiers grands médias français à oser s’en passer, au profit d’autres formats dont voici quelques exemplesd’alternatives.

Faut-il tuerl’habillage ?

notre réponse : oui

Faut-il tuerles générateurs

de liens sponsos ?

Oui.

VOUS AIMEREZ AUSSI

RTL

Les fausses relances Les liens sponsorisés sont ces blocs que l’on retrouve à la suitedes articles sur la plupart des médias. Ils prêtent à confusion sur le parcours de l’internaute.

VOUS AIMEREZ AUSSIDÉCOUVREZ LA VÉRITABLE

RECETTE DES GALETTESDE POMMES DE TERRE

France MontagnesELLELes EchosMes idées recettesChampagne-ArdenneGet The Look

RTL

Audience perdue Dans cet exemple, RTL recommande à sesvisiteurs 6 autresmédias ou sitespublicitaires comme suite de lecture. Pourquoi s’acharner à garder son lectorat sur son support pour ensuite l’offrir à des concurrents ?

Le Figaro

Confusion Exactement la même structure sur la plupart des médias : on mélange contenu sponsorisé et contenu de circulation interne, pour la plus grande incompréhension du lecteur

Nouvel Obs

L’Express

OKLMCes générateurs de liens détruisent le travail des rédactions.

Faut-il tuerles générateurs

de liens sponsos ? notre réponse : si ça ne tenait qu’à nous…

Faut-il tuerla pub display ?

Sur un article,quel score adblock ?

18 22 13 18 7 18 5 15 13 8

LibérationLe Monde

L’ObsLe Figaro

20 minutes

Le Parisien

L’Express

Le Point Europe 1

BFMTV

Multiplication des pains Certains médias affichent des scores de nombre d’emplacements pub impressionnants.

57 % des pubs affichées

ne sont pas vues par des internautes

Kantar Media, octobre-décembre 2014

1 s50 %

Vue ? Pour être considérée comme vue, une publicité soit être à minima affichée 1 seconde, avec 50 % de sa surface visible.

1 s70 %

Contraintes L’IAB reconnaît qu’atteindre100 % est impossible,et recommande donc de fixer le seuil minimalà 70 % de surfaceaffichée.

25 % des internautes qui consultent

des sites médias sont équipés d’adblock

“NOUS SOMMES UNE RÉPONSE À L’INCAPACITÉ DE L’IAB DE FAIRE ÉVOLUER LES CHOSES”

Till FaidaFondateur d’Adblock Plus

octobre 2013

Wired

Des alternatives possibles De nombreux supports explorent le «native advertising» pourproposer du contenu éditorial en lien avec les sujets des annonceurs.

Buzzfeed

La place de la marque BuzzFeed offre une place à l’annonceur, qui s’intègre dans la maquette au même titre que les autres contenus. La frontière devient ténue...

NY Times

Medium

Faut-il tuerla pub display ?

notre réponse : ça se tente

Faut-il tuerle hamburger ?

1981

Pas si neuf Le burger menu nous vient tout droit du passé : il a été inventé chez Xerox lors de lacréation des premières interfaces

2008

Mobile Facebook lance son application mobile, avec cette icone pour le menu

2009

Mieux Peu de temps après, Facebook rajoute une ligne

2010 - aujourd’hui

Le classique Finalement, c’est la version des trois ligne qui à partir de 2010 sera communément utili-sée. Une icône simple, qui contient son sens :efficacité et universalité.

Chez Slate Nous l’avons utilisée pour afficher le menu : l’ensemble des rubriques se déploie dans un volet

Trop de burgers tuent le burger Attention à l’abus : sur cette page de Google Apps, on a 4 formes différentes de l’icône de menu, aux fonctions et interprétations variables. Beurk.

Faut-il tuerle hamburger ?

notre réponse : non

Faut-il tuerles relances ?

Que lire après votrearticle ? Un article a un début et une fin ; laquestion essentielle pour les médias est de garder son lecteur le plus longtemps sur son site en lui faisant consulter unmaximum de contenus.

Les relances Da manière assez classique, ons’attend à ce qu’uninternaute termine salecture pour qu’on luipropose d’autrescontenus, parfois enmultitude.

Avant la fin Sauf que certains lecteurs n’atteignent jamais le bas de l’article ; les médias ont donc pensé à placer desrelances avant la fin, avec l’inconvénient de créer de la distraction. C’est reconnaître que son contenu n’est peut-être pas suffisammentpertinent.

Dans le texte Autre ten-dance : ajouter des relances directement dans le corps du texte. À ce stade, l’internaute adavantage de sollicitations de lecture que de contenu d’unarticle en lui-même.

Le scroll vers le haut Nous avons observé que les internautes quiparcouraient un article sans le lire avaient un comportement différent : ils scrollent vers le haut pour revenir au header. C’est pourquoi nous avons prévu dans certains de nos projets d’afficher les relances uniquement lorsque l’internaute remonte.

Le choix multiple n’est pas plus efficace Contrairement à ce que l’on pourrait imaginer,proposer une multitude de relances ne contribue pas à faciliter la vie del’internaute, bien au contraire. En lui proposant un choix principal, vous le guidez dans sa navigation et augmentez les chances qu’il reste chez vous.

Huff post

Relances en prioritéSur la version mobile du Huffpost, il faut cliquer pour déployer le reste de l’article après le premier paragraphe. La conséquence del’observation du parcours d’internautes quiconsultaient peu l’article en entier après avoircliqué.

Faut-il tuerles relances ?

notre réponse : non

Faut-il tuerle site ?

39 / 50Sur une étude de 50 médias définis, 39 sont davantage consultés via un mobile plutôt qu’un ordinateur

Battle mobile / pas mobile

Pew Research center, avril 2015, USA.

Mobile 2 mn

Desktop 2,45 mn

Temps moyen par visiteOn passe davantage de temps sur un ordinateur mais la consommation est plus nombreuse et plus éclatée sur mobile.

Pew Research center, avril 2015, USA.

CNNBleacher ReportChicago Tribune

ViceChron

GawkerSalon

BostonMashableLA Times

Le top 10Top 10 des médias US principalement consultés sur mobile.

Pew Research center, avril 2015, USA.

Fev 2013 Oct 2013 Juin 2014 Fev 2015Juin 2013 Fev 2014 Oct 2014Avr 2013 Déc 2013 Août 2014 Avr 2015Août 2013 Avr 2014 Déc 2014

Le mobile n’a pastué votre ordinateur

1000

600

200

800

400

0

900

500

100

700

300

Mobile

Ordinateur

En réalité, le mobile a créé de nouvelles fenêtres temporelles de consultation du web.

Total de minutes passées en ligne en milliardsComScore, 2015

Faut-il tuerle site ? notre réponse : non

Faut-il tuerles boutonsde partage ?

J’aime

J’aime

J’aime

J’aime

J’aime

J’aime

J’aime

20K J’aime

Moche

Plus gros le logo Lesboutons sont de plus en plus gros et de plus en plus nombreux. Mais sont-ils réellement efficaces ? Comment mieux les intégrer ?

Que faire denos boutons ?

A.Est-ce utilede mettre

le bleu Facebook ?

Que faire denos boutons ?

A.Est-ce utilede mettre

le bleu Facebook ?

B.Est-ce utile

de mettre desboutons de

partagepartout ?

Que faire denos boutons ?

A.Est-ce utilede mettre

le bleu Facebook ?

C.Est-ce utile

de mettre desboutons de

partage si gros ?

B.Est-ce utile

de mettre desboutons de

partagepartout ?

Que faire denos boutons ?

A.Est-ce utilede mettre

le bleu Facebook ?

C.Est-ce utile

de mettre desboutons de

partage si gros ?

B.Est-ce utile

de mettre desboutons de

partagepartout ?

D.Est-ce utilede mettre

le logo Facebook ?

Que faire denos boutons ?

A.Est-ce utilede mettre

le bleu Facebook ?

C.Est-ce utile

de mettre desboutons de

partage si gros ?

B.Est-ce utile

de mettre desboutons de

partagepartout ?

D.Est-ce utilede mettre

le logo Facebook ?

E.Est-ce utile de ne rien

mettre du tout ?

Que faire denos boutons ?

Partager Partager Partager

BFMTV

3

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager

Libération

4

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager Partager

Le Figaro

5

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager Partager

Partager

Europe 1

6

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager Partager

Partager Partager Partager

Slate, Quartz

8

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager Partager

Partager Partager Partager Partager

Le Parisien, 20 minutes, Le Point

9

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager Partager

Partager Partager Partager Partager Partager

Partager

FranceTVinfo

11

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager Partager

Partager Partager Partager Partager Partager

Partager Partager

L’Express

12

Nombre de boutonsde partage dans un article

Partager Partager Partager Partager Partager

Partager Partager Partager Partager Partager

Partager Partager Partager Partager

Le Monde, L’Obs

14

Nombre de boutonsde partage dans un article

Partager Partager

Medium

2

Nombre de boutonsde partage dans un article

“WE’VE FOUND EFFECTIVELY NO CORRELATIONBETWEEN SOCIAL SHARES

AND PEOPLE ACTUALLY READING”

Tony HaileCEO de Chartbeat

2 février 2014, sur son compte Twitter

Faut-il tuerles boutons de

partage ? notre réponse : il faut sérieusement y songer

Faut-il tuerles messages

à proposdes cookies ?

j’accepte

j’accepte

j’accepte

j’accepte

À vie

Nous sommes condamnés à toujours cliquer sur “fermer” ou “j’accepte” toute notre vie.

Faut-il tuerles messages

à proposedes cookies ?

notre réponse : on est tous d’accord, oui

Bonus

Quelle estnotre vision

d’un media coolpossible ?

@Datagif