9 questions sur des idées reçues concernant le design d'éléments ou de pages de sites médias.
Faut-il tuer la homepage ? Faut-il tuer l'habillage ? Faut-il tuer le menu burger ?
Datagif recrute : http://www.datagif.fr/jobs/
Inscrivez-vous à la beta Newsline : http://www.newsline.fr/
3. 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 confort
des utilisateurs.
4. Média
Média ? Au coeur de la
création, du traitement
et de la circulation
de l’information.
6. 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 refonte
de leur site ou de leurs supports print.
7. Entendu
lors de briefs
Idées reçues Nous
allons prendre quelques
minutes pour questionner
nos idées reçues,
qui semblent tellement
évidentes lors du design
de pages d’un site media.
14. L’annonce de la
nouvelle formule
Phrases clé Au lancement
de votre futur site, après
des mois de travail, vous
aurez envie de le
présenter. Voici une
sélection des vraies
phrases clé qui reviennent
le plus souvent, parmi un
corpus d’une dizaine de
sites medias français.
19. « 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 »
21. La réaction
des lecteurs
Haters gonna hate
Immanquablement, vos
lecteurs réagiront.
Voici un florilège de
commentaires choisis au
hasard à la suite de ces
articles. Pas de panique,
il y a des haters partout.
27. DIMINUEZ
LATAILLE 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 PEUTTOUT
COMPLIQUER ...
MAINTENANT
ON SE CROIRAIT
À LAS VEGAS :
ÇA BRILLE DE
PARTOUT, ÇA
CLIGNOTE, ÇA
OUVRE DESTRUCS
EN PASSANT SA
SOURIS SANS QU’ON
NE DEMANDE RIEN,
ON NE SAIT PAS OÙ
IL FAUT POSER SES
YEUX...
30. SIZEDOESMATTER
Une question de taille
Est-ce que la homepage
doit tout contenir ?
Ou doit-elle être
la plus courte possible ?
31. Quels contenus pour
la 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.
32. A.
Je mets
tout mon
contenu dans
la homepage
parce que ça
sert à ça la
homepage.
Quels contenus pour
la homepage ?
33. A.
Je mets
tout mon
contenu dans
la homepage
parce que ça
sert à ça la
homepage.
B.
Je mets
tout mon
contenu dans
la homepage
mais de toute
façon personne
n’y va.
Quels contenus pour
la homepage ?
34. A.
Je mets
tout mon
contenu dans
la homepage
parce que ça
sert à ça la
homepage.
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 dans
la homepage
mais de toute
façon personne
n’y va.
Quels contenus pour
la homepage ?
35. A.
Je mets
tout mon
contenu dans
la homepage
parce que ça
sert à ça la
homepage.
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 dans
la 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 pour
la homepage ?
36. A.
Je mets
tout mon
contenu dans
la homepage
parce que ça
sert à ça la
homepage.
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 dans
la 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çon
la homepage
ça ne sert plus
à rien.
Quels contenus pour
la homepage ?
37. 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’innovation
New York Times, mai 2014
39. Qz old version
Pas de homepage
À son lancement,
la homepage de
Quartz faisait
entrer l’internaute
directement par
un article.
40. Qz version actuelle
Une home raisonnée
Puis Quartz a
ré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 revenir
souvent revenir sur la
«home», donc sur un
article déjà lu.
42. La peur du scroll
VS l’acceptation
du scroll
La maladie de l’Internet Beaucoup
d’é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.
43. 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 scroll
VS l’acceptation
du 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ême
niveau. Sans peur du
scroll, on libère
totalement la navigation
et on peut ainsi avoir
une hompage mieux
construite, plus
équilibrée, et plus
agréable pour l’internaute.
44. Libération Alors que
nous travaillons sur la
refonte de Liberation.fr,
nous avons proposé un fil
conducteur pour la
nouvelle home.
45. Libération
Top Scroll En suivant ce
Top 100, l’internaute défile
la homepage, sans avoir
peur de scroller. Cela
implique plus de place
pour les contenus, une
meilleure hierarchisation,
plus d’espaces potentiels
pour les publicités.
46. Slate
Une home flexible Lors
de notre travail de refonte
de Slate.fr, la rédaction
a émis le souhait de tout
remettre à plat. Son
approche magazine et le
recul sur les sujets
d’actualité nous ont
permis 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.
49. Reader
Le flux Lorsque nous
avons travaillé sur le site
Reader.fr, l’approche
a été différente : le site
est un flux global ; la
homepage n’est plus un
portail nécessaire,
l’internaute entre
directement par les
contenus.
52. habillage
pavé
Vampirisation Alors que
les habillages publicitaires
étaient des formats
événementiels, ils sont
devenus automatisés,
contraignant les
medias à se conformer
à des contraintes de taille
drastiques. Comment
construire une home
correcte avec seulement
1000 px de large ?
55. 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.
56. Libération Dans notre
accompagnement de
Libération, nous avons
soutenu l’abandon de
l’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 exemples
d’alternatives.
61. RTL
Les fausses relances Les liens sponsorisés sont ces blocs que l’on retrouve à la suite
des articles sur la plupart des médias. Ils prêtent à confusion sur le parcours de l’internaute.
63. France Montagnes
ELLE
Les Echos
Mes idées recettes
Champagne-Ardenne
Get The Look
RTL
Audience perdue
Dans cet exemple, RTL
recommande à ses
visiteurs 6 autres
médias ou sites
publicitaires comme
suite de lecture. Pourquoi
s’acharner à garder son
lectorat sur son support
pour ensuite l’offrir à des
concurrents ?
64. 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
70. Sur un article,
quel score adblock ?
18 22 13 18 7 18 5 15 13 8
Libération
Le Monde
L’Obs
Le 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.
71. 57 %
des pubs affichées
ne sont pas vues par
des internautes
Kantar Media, octobre-décembre 2014
72. 1s
50 %
Vue ? Pour être
considérée comme vue,
une publicité soit être à
minima affichée
1 seconde, avec 50 %
de sa surface visible.
73. 1s
70 %
Contraintes L’IAB
reconnaît qu’atteindre
100 % est impossible,
et recommande donc de
fixer le seuil minimal
à 70 % de surface
affichée.
76. Wired
Des alternatives possibles De nombreux supports explorent le «native advertising» pour
proposer du contenu éditorial en lien avec les sujets des annonceurs.
77. 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...
85. 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é.
86. Chez Slate Nous l’avons
utilisée pour afficher le
menu : l’ensemble des
rubriques se déploie dans
un volet
87. 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.
90. Que lire après votre
article ? Un article a un
début et une fin ; la
question essentielle pour
les médias est de garder
son lecteur le plus
longtemps sur son site en
lui faisant consulter un
maximum de contenus.
91. Les relances Da manière
assez classique, on
s’attend à ce qu’un
internaute termine sa
lecture pour qu’on lui
propose d’autres
contenus, parfois en
multitude.
92. Avant la fin Sauf que
certains lecteurs
n’atteignent jamais le bas
de l’article ; les médias ont
donc pensé à placer des
relances 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 suffisamment
pertinent.
93. Dans le texte Autre ten-
dance : ajouter des
relances directement dans
le corps du texte.
À ce stade, l’internaute a
davantage de
sollicitations de lecture
que de contenu d’un
article en lui-même.
94. Le scroll vers le haut
Nous avons observé que
les internautes qui
parcouraient 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.
95. 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 de
l’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.
96. 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 de
l’observation du parcours
d’internautes qui
consultaient peu l’article
en entier après avoir
cliqué.
99. 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.
100. Mobile 2 mn
Desktop 2,45 mn
Temps moyen par visite
On 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.
102. Fev 2013 Oct 2013 Juin2014 Fev 2015Juin2013 Fev 2014 Oct 2014Avr 2013 Déc 2013 Août2014 Avr 2015Août2013 Avr 2014 Déc 2014
Le mobile n’a pas
tué 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 milliards
ComScore, 2015
112. 20K J’aime
Moche
Plus gros le logo Les
boutons sont de plus en
plus gros et de plus en
plus nombreux.
Mais sont-ils réellement
efficaces ? Comment
mieux les intégrer ?
115. A.
Est-ce utile
de mettre
le bleu
Facebook ?
B.
Est-ce utile
de mettre des
boutons de
partage
partout ?
Que faire de
nos boutons ?
116. A.
Est-ce utile
de mettre
le bleu
Facebook ?
C.
Est-ce utile
de mettre des
boutons de
partage
si gros ?
B.
Est-ce utile
de mettre des
boutons de
partage
partout ?
Que faire de
nos boutons ?
117. A.
Est-ce utile
de mettre
le bleu
Facebook ?
C.
Est-ce utile
de mettre des
boutons de
partage
si gros ?
B.
Est-ce utile
de mettre des
boutons de
partage
partout ?
D.
Est-ce utile
de mettre
le logo
Facebook ?
Que faire de
nos boutons ?
118. A.
Est-ce utile
de mettre
le bleu
Facebook ?
C.
Est-ce utile
de mettre des
boutons de
partage
si gros ?
B.
Est-ce utile
de mettre des
boutons de
partage
partout ?
D.
Est-ce utile
de mettre
le logo
Facebook ?
E.
Est-ce utile
de ne rien
mettre
du tout ?
Que faire de
nos boutons ?
122. Partager Partager Partager Partager Partager
Partager
Europe 1
6
Nombre de boutons
de partage dans un article
123. Partager Partager Partager Partager Partager
Partager Partager Partager
Slate, Quartz
8
Nombre de boutons
de partage dans un article
124. Partager Partager Partager Partager Partager
Partager Partager Partager Partager
Le Parisien, 20 minutes, Le Point
9
Nombre de boutons
de partage dans un article
125. Partager Partager Partager Partager Partager
Partager Partager Partager Partager Partager
Partager
FranceTVinfo
11
Nombre de boutons
de partage dans un article
126. Partager Partager Partager Partager Partager
Partager Partager Partager Partager Partager
Partager Partager
L’Express
12
Nombre de boutons
de partage dans un article
127. Partager Partager Partager Partager Partager
Partager Partager Partager Partager Partager
Partager Partager Partager Partager
Le Monde, L’Obs
14
Nombre de boutons
de partage dans un article