Datagif, profile picture
Téléchargé parDatagif
15,786 vues

Datagif : medias et design. Web2day, juin 2015

Le document aborde la conception et la refonte de sites média en mettant l'accent sur l'amélioration de l'expérience utilisateur. Il soulève des questions sur des idées reçues en matière de design et examine l'évolution des comportements des lecteurs face aux formats de contenu. Des exemples concrets illustrent les défis rencontrés par les médias dans l'adaptation de leurs sites aux nouveaux usages numériques.

Intégrer la présentation

Téléchargé 139 fois
1 / 142
2 / 142
3 / 142
4 / 142
5 / 142
6 / 142
7 / 142
8 / 142
9 / 142
10 / 142
11 / 142
12 / 142
13 / 142
14 / 142
15 / 142
16 / 142
17 / 142
18 / 142
19 / 142
20 / 142
21 / 142
22 / 142
23 / 142
24 / 142
25 / 142
26 / 142
27 / 142
28 / 142
29 / 142
30 / 142
31 / 142
32 / 142
33 / 142
34 / 142
35 / 142
36 / 142
37 / 142
38 / 142
39 / 142
40 / 142
41 / 142
42 / 142
43 / 142
44 / 142
45 / 142
46 / 142
47 / 142
48 / 142
49 / 142
50 / 142
51 / 142
52 / 142
53 / 142
54 / 142
55 / 142
56 / 142
57 / 142
58 / 142
59 / 142
60 / 142
61 / 142
62 / 142
63 / 142
64 / 142
65 / 142
66 / 142
67 / 142
68 / 142
69 / 142
70 / 142
71 / 142
72 / 142
73 / 142
74 / 142
75 / 142
76 / 142
77 / 142
78 / 142
79 / 142
80 / 142
81 / 142
82 / 142
83 / 142
84 / 142
85 / 142
86 / 142
87 / 142
88 / 142
89 / 142
90 / 142
91 / 142
92 / 142
93 / 142
94 / 142
95 / 142
96 / 142
97 / 142
98 / 142
99 / 142
100 / 142
101 / 142
102 / 142
103 / 142
104 / 142
105 / 142
106 / 142
107 / 142
108 / 142
109 / 142
110 / 142
111 / 142
112 / 142
113 / 142
114 / 142
115 / 142
116 / 142
117 / 142
118 / 142
119 / 142
120 / 142
121 / 142
122 / 142
123 / 142
124 / 142
125 / 142
126 / 142
127 / 142
128 / 142
129 / 142
130 / 142
131 / 142
132 / 142
133 / 142
134 / 142
135 / 142
136 / 142
137 / 142
138 / 142
139 / 142
140 / 142
141 / 142
142 / 142
Web2day . Datagif . juin 2015 .
Design et refonte de 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 confort des utilisateurs.
Média Média ? Au coeur de la création, du traitement et de la circulation de 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 refonte de leur site ou de leurs supports print.
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.
“ÉVIDEMMENTQU’ILFAUT DESESPACESPUBPARTOUT” Un client Réunion, 2015
“BIENSÛRQU’ILFAUTDESBOUTONS DEPARTAGEENDÉBUTETENFIND’ARTICLE” Un client Réunion, 2015
“OUIILFAUTLESNOMSDES RUBRIQUESSURTOUTESLESPAGES” Un client Réunion, 2015
“TOUTDOIT TENIR DANSLEPREMIERÉCRAN,ILFAUTUN MINIMUMDESCROLL” Un client Réunion, 2015
“LÀILRESTEDU BLANC, ONPEUTMETTREUNE PUB?” Un client Réunion, 2015
Votre futur lancement de site
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.
« FAIT PEAU NEUVE »
« PLUS ÉLÉGANTE, PLUS SOBRE, PLUS ÉPURÉE »
« PLUS AUDACIEUX, PLUS SURPRENANT, PLUS INFORMÉ »
« PLUS MODERNE »
« 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 »
« CHAUD ET CALÉ, BEAU ET DÉCALÉ »
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.
BONSOIR MERDIQUE CETTE PRÉSENTATION SUR CE SITE
SITE MAL CONSTRUIT, ILLISIBLE, SANS FIL DIRECTEUR, ET ÇA A DU COÛTER UN BRAS
FIASCO COMPLET. JE ME RETIRE, C’EST TROPCOMPLIQUÉ POUR MOI.
REVOYEZ VOTRE COPIE D’URGENCE.
VIREZ VOS INFORMATICIENS !
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...
Faut-il tuer la homepage ?
SIZEDOESMATTER
SIZEDOESMATTER Une question de taille Est-ce que la homepage doit tout contenir ? Ou doit-elle être la plus courte possible ?
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.
A. Je mets tout mon contenu dans la homepage parce que ça sert à ça la homepage. Quels contenus pour la homepage ?
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 ?
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 ?
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 ?
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 ?
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
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 faisait entrer l’internaute directement par un article.
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.
Qz version actuelle
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.
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.
Libération Alors que nous travaillons sur la refonte de Liberation.fr, nous avons proposé un fil conducteur pour la nouvelle home.
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.
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.
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.
Faut-il tuer la homepage ? notre réponse : ça dépend
Faut-il tuer l’habillage ?
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 ?
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 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.
Faut-il tuer l’habillage ? notre réponse : oui
Faut-il tuer les 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 suite des articles sur la plupart des médias. Ils prêtent à confusion sur le parcours de l’internaute.
VOUS AIMEREZ AUSSI DÉCOUVREZ LA VÉRITABLE RECETTE DES GALETTES DE POMMES DE TERRE
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 ?
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
OKLM Ces générateurs de liens détruisent le travail des rédactions.
Faut-il tuer les générateurs de liens sponsos ? notre réponse : si ça ne tenait qu’à nous…
Faut-il tuer la pub display ?
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.
57 % des pubs affichées ne sont pas vues par des internautes Kantar Media, octobre-décembre 2014
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.
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.
25 % des internautes qui consultent des sites médias sont équipés d’adblock
“NOUSSOMMESUNE RÉPONSEÀ L’INCAPACITÉDEL’IABDEFAIREÉVOLUERLESCHOSES” Till Faida Fondateur d’Adblock Plus octobre 2013
Wired Des alternatives possibles De nombreux supports explorent le «native advertising» pour proposer 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 tuer la pub display ? notre réponse : ça se tente
Faut-il tuer le hamburger ?
1981 Pas si neuf Le burger menu nous vient tout droit du passé : il a été inventé chez Xerox lors de la cré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 tuer le hamburger ? notre réponse : non
Faut-il tuer les relances ?
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.
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.
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.
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.
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.
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.
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é.
Faut-il tuer les relances ? notre réponse : non
Faut-il tuer le 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 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.
CNN Bleacher Report Chicago Tribune Vice Chron Gawker Salon Boston Mashable LA Times Le top 10 Top 10 des médias US principalement consultés sur mobile. Pew Research center, avril 2015, USA.
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
Faut-il tuer le site ? notre réponse : non
Faut-il tuer les boutons de partage ?
J’aime
J’aime
J’aime
J’aime
J’aime
J’aime
J’aime
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 ?
Que faire de nos boutons ?
A. Est-ce utile de mettre le bleu Facebook ? Que faire de nos boutons ?
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 ?
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 ?
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 ?
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 ?
Partager Partager Partager BFMTV 3 Nombre de boutons de partage dans un article
Partager Partager Partager Partager Libération 4 Nombre de boutons de partage dans un article
Partager Partager Partager Partager Partager Le Figaro 5 Nombre de boutons de partage dans un article
Partager Partager Partager Partager Partager Partager Europe 1 6 Nombre de boutons de partage dans un article
Partager Partager Partager Partager Partager Partager Partager Partager Slate, Quartz 8 Nombre de boutons de partage dans un article
Partager Partager Partager Partager Partager Partager Partager Partager Partager Le Parisien, 20 minutes, Le Point 9 Nombre de boutons de partage dans un article
Partager Partager Partager Partager Partager Partager Partager Partager Partager Partager Partager FranceTVinfo 11 Nombre de boutons de partage dans un article
Partager Partager Partager Partager Partager Partager Partager Partager Partager Partager Partager Partager L’Express 12 Nombre de boutons de 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 boutons de partage dans un article
Partager Partager Medium 2 Nombre de boutons de partage dans un article
“WE’VEFOUNDEFFECTIVELYNOCORRELATION BETWEENSOCIALSHARES ANDPEOPLEACTUALLYREADING” Tony Haile CEO de Chartbeat 2 février 2014, sur son compte Twitter
Faut-il tuer les boutons de partage ? notre réponse : il faut sérieusement y songer
Faut-il tuer les messages à propos des 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 tuer les messages à propose des cookies ? notre réponse : on est tous d’accord, oui
Bonus
Quelle est notre vision d’un media cool possible ?
@Datagif

Contenu connexe

PDF
Growth Hacking
parMattan Griffel
 
PDF
Blogging animation de communautés - easy writing par comenvrai
parLpCoMeN ComenVrai
 
PDF
13 apports d'excellents backlinks mal utilisés
parEmmanuel BEB à NGON
 
PDF
Résultats de l'enquête relative aux tendances typographiques
parGeoffrey Dorne
 
PDF
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
parDagobert
 
PDF
Pour que les marques comptent !
parDagobert
 
PDF
Mobile scanning
parDagobert
 
PDF
20141211simplicite 141215021819-conversion-gate01
parRégine Garric Advielle
 
Growth Hacking
parMattan Griffel
 
Blogging animation de communautés - easy writing par comenvrai
parLpCoMeN ComenVrai
 
13 apports d'excellents backlinks mal utilisés
parEmmanuel BEB à NGON
 
Résultats de l'enquête relative aux tendances typographiques
parGeoffrey Dorne
 
Marques et réseaux sociaux : comment affirmer sa personnalité en ligne ? ER S...
parDagobert
 
Pour que les marques comptent !
parDagobert
 
Mobile scanning
parDagobert
 
20141211simplicite 141215021819-conversion-gate01
parRégine Garric Advielle
 

Similaire à Datagif : medias et design. Web2day, juin 2015

PPT
Evolution du look & feel du web 0.0 au 2.0 - Printemps.com
parbenoit.rigaut
 
PDF
Les 10 Tendances Webdesign de 2014 by Vanksen
parVanksen
 
PPTX
Atelier conversion AEI
parSylvie de Meeûs
 
PDF
Les 10 Tendances Webdesign pour 2014 by Vanksen
parSolange Derrey
 
PDF
Les 11 tendances du webdesign en 2014
parNineteengroupe
 
PPT
Etre visible sur le web : tendances 2014
parechangeurba
 
PPT
SMX France 2017 - Top 10 des priorités pour optimiser son SEO OnPage
parLaurent Tulpan
 
PDF
telmedia* : tendances digitales 2014, l'engagement émotionnel
partelmedia
 
PPT
Hec Ergonomie
parmastertic
 
PPTX
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
parClub des Community Managers de Lyon
 
PDF
Cci bordeaux - Etre visible sur le web : tendances 2014
parpolenumerique33
 
PPT
Conception de sites Web
parSaïd Radhouani
 
PPTX
A6 rendre son site plus performant
parSteph Tripot
 
PPTX
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
parIntuiti
 
PPTX
Supports de cours Fit4Digital future - CMS
parAnnabelle Buffart
 
PDF
Ecrire pour le Web en 2010
parLes Propulseurs
 
PDF
Référencement avec Joomla - SEO Camp
parSEO CAMP
 
PPT
Atelier Numérique "Optimiser le contenu de mon site web"
parKate De Gourdon
 
PPT
6 1-ergonomie du web
parRYMAA
 
PDF
Créer un site web moderne en 30 minutes
parValéry BERNARD
 
Evolution du look & feel du web 0.0 au 2.0 - Printemps.com
parbenoit.rigaut
 
Les 10 Tendances Webdesign de 2014 by Vanksen
parVanksen
 
Atelier conversion AEI
parSylvie de Meeûs
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
parSolange Derrey
 
Les 11 tendances du webdesign en 2014
parNineteengroupe
 
Etre visible sur le web : tendances 2014
parechangeurba
 
SMX France 2017 - Top 10 des priorités pour optimiser son SEO OnPage
parLaurent Tulpan
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
partelmedia
 
Hec Ergonomie
parmastertic
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
parClub des Community Managers de Lyon
 
Cci bordeaux - Etre visible sur le web : tendances 2014
parpolenumerique33
 
Conception de sites Web
parSaïd Radhouani
 
A6 rendre son site plus performant
parSteph Tripot
 
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
parIntuiti
 
Supports de cours Fit4Digital future - CMS
parAnnabelle Buffart
 
Ecrire pour le Web en 2010
parLes Propulseurs
 
Référencement avec Joomla - SEO Camp
parSEO CAMP
 
Atelier Numérique "Optimiser le contenu de mon site web"
parKate De Gourdon
 
6 1-ergonomie du web
parRYMAA
 
Créer un site web moderne en 30 minutes
parValéry BERNARD
 

Plus de Datagif

PDF
OpenGif #5 avec les Produits Laitiers
parDatagif
 
PPTX
L'Heure Médias #3 : Quelle stratégie éditoriale et design pour renouer la con...
parDatagif
 
PDF
Comment réussir la couverture des élections dans les médias ?
parDatagif
 
PDF
Les newsletters : un territoire de créativité inexploré
parDatagif
 
PDF
Opengif#4 avec le théâtre Dijon Bourgogne
parDatagif
 
PDF
Opengif #3 v L'Imprévu : La refonte media
parDatagif
 
PDF
Opengif #2 v RATP - "Expliquer pour désamorcer"
parDatagif
 
PDF
[Web Design] Opengif v Contexte
parDatagif
 
PDF
Présidentielle US 2016 : comment les sites médias anglo-saxons sortent de le...
parDatagif
 
OpenGif #5 avec les Produits Laitiers
parDatagif
 
L'Heure Médias #3 : Quelle stratégie éditoriale et design pour renouer la con...
parDatagif
 
Comment réussir la couverture des élections dans les médias ?
parDatagif
 
Les newsletters : un territoire de créativité inexploré
parDatagif
 
Opengif#4 avec le théâtre Dijon Bourgogne
parDatagif
 
Opengif #3 v L'Imprévu : La refonte media
parDatagif
 
Opengif #2 v RATP - "Expliquer pour désamorcer"
parDatagif
 
[Web Design] Opengif v Contexte
parDatagif
 
Présidentielle US 2016 : comment les sites médias anglo-saxons sortent de le...
parDatagif
 

Datagif : medias et design. Web2day, juin 2015

  • 1.
  • 2.
  • 3.
    Design Design ? Lebut : 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 ? Aucoeur de la création, du traitement et de la circulation de l’information.
  • 5.
  • 6.
    Datagif Nous sommesune é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éesreç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.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
    L’annonce de la nouvelleformule 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.
  • 15.
  • 16.
    « PLUS ÉLÉGANTE, PLUSSOBRE, PLUS ÉPURÉE »
  • 17.
  • 18.
  • 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 »
  • 20.
    « CHAUD ET CALÉ,BEAU ET DÉCALÉ »
  • 21.
    La réaction des lecteurs Hatersgonna 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.
  • 22.
  • 23.
    SITE MAL CONSTRUIT, ILLISIBLE, SANSFIL DIRECTEUR, ET ÇA A DU COÛTER UN BRAS
  • 24.
    FIASCO COMPLET. JE MERETIRE, C’EST TROPCOMPLIQUÉ POUR MOI.
  • 25.
  • 26.
  • 27.
    DIMINUEZ LATAILLE DES POLICES, PARPITIÉ. 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...
  • 28.
  • 29.
  • 30.
    SIZEDOESMATTER Une question detaille Est-ce que la homepage doit tout contenir ? Ou doit-elle être la plus courte possible ?
  • 31.
    Quels contenus pour lahomepage ? 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 contenudans la homepage parce que ça sert à ça la homepage. Quels contenus pour la homepage ?
  • 33.
    A. Je mets tout mon contenudans 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 contenudans 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 contenudans 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 contenudans 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, lahomepage 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
  • 38.
  • 39.
    Qz old version Pasde homepage À son lancement, la homepage de Quartz faisait entrer l’internaute directement par un article.
  • 40.
    Qz version actuelle Unehome 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.
  • 41.
  • 42.
    La peur duscroll 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 noustravaillons sur la refonte de Liberation.fr, nous avons proposé un fil conducteur pour la nouvelle home.
  • 45.
    Libération Top Scroll Ensuivant 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 flexibleLors 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 Lorsquenous 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.
  • 50.
    Faut-il tuer la homepage? notre réponse : ça dépend
  • 51.
  • 52.
    habillage pavé Vampirisation Alors que leshabillages 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 ?
  • 53.
  • 54.
  • 55.
    Vice Non Vice Francefait 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 accompagnementde 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.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
    RTL Les fausses relancesLes 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.
  • 62.
    VOUS AIMEREZ AUSSI DÉCOUVREZLA VÉRITABLE RECETTE DES GALETTES DE POMMES DE TERRE
  • 63.
    France Montagnes ELLE Les Echos Mesidé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 Exactementla 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
  • 65.
  • 66.
  • 67.
    OKLM Ces générateurs deliens détruisent le travail des rédactions.
  • 68.
    Faut-il tuer les générateurs deliens sponsos ? notre réponse : si ça ne tenait qu’à nous…
  • 69.
  • 70.
    Sur un article, quelscore 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 pubsaffiché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îtqu’atteindre 100 % est impossible, et recommande donc de fixer le seuil minimal à 70 % de surface affichée.
  • 74.
    25 % des internautes quiconsultent des sites médias sont équipés d’adblock
  • 75.
  • 76.
    Wired Des alternatives possiblesDe nombreux supports explorent le «native advertising» pour proposer du contenu éditorial en lien avec les sujets des annonceurs.
  • 77.
    Buzzfeed La place dela 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...
  • 78.
  • 79.
  • 80.
    Faut-il tuer la pubdisplay ? notre réponse : ça se tente
  • 81.
  • 82.
    1981 Pas si neufLe burger menu nous vient tout droit du passé : il a été inventé chez Xerox lors de la création des premières interfaces
  • 83.
    2008 Mobile Facebook lance sonapplication mobile, avec cette icone pour le menu
  • 84.
    2009 Mieux Peu detemps après, Facebook rajoute une ligne
  • 85.
    2010 - aujourd’hui Le classiqueFinalement, 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 Nousl’avons utilisée pour afficher le menu : l’ensemble des rubriques se déploie dans un volet
  • 87.
    Trop de burgerstuent 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.
  • 88.
    Faut-il tuer le hamburger? notre réponse : non
  • 89.
  • 90.
    Que lire aprèsvotre 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 Damaniè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 finSauf 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 texteAutre 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 versle 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’estpas 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 enpriorité 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é.
  • 97.
    Faut-il tuer les relances? notre réponse : non
  • 98.
  • 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 Desktop2,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.
  • 101.
    CNN Bleacher Report Chicago Tribune Vice Chron Gawker Salon Boston Mashable LATimes Le top 10 Top 10 des médias US principalement consultés sur mobile. Pew Research center, avril 2015, USA.
  • 102.
    Fev 2013 Oct2013 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
  • 103.
    Faut-il tuer le site? notre réponse : non
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
    20K J’aime Moche Plus grosle 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 ?
  • 113.
  • 114.
    A. Est-ce utile de mettre lebleu Facebook ? Que faire de nos boutons ?
  • 115.
    A. Est-ce utile de mettre lebleu Facebook ? B. Est-ce utile de mettre des boutons de partage partout ? Que faire de nos boutons ?
  • 116.
    A. Est-ce utile de mettre lebleu 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 lebleu 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 lebleu 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 ?
  • 119.
    Partager Partager Partager BFMTV 3 Nombrede boutons de partage dans un article
  • 120.
    Partager Partager PartagerPartager Libération 4 Nombre de boutons de partage dans un article
  • 121.
    Partager Partager PartagerPartager Partager Le Figaro 5 Nombre de boutons de partage dans un article
  • 122.
    Partager Partager PartagerPartager Partager Partager Europe 1 6 Nombre de boutons de partage dans un article
  • 123.
    Partager Partager PartagerPartager Partager Partager Partager Partager Slate, Quartz 8 Nombre de boutons de partage dans un article
  • 124.
    Partager Partager PartagerPartager Partager Partager Partager Partager Partager Le Parisien, 20 minutes, Le Point 9 Nombre de boutons de partage dans un article
  • 125.
    Partager Partager PartagerPartager Partager Partager Partager Partager Partager Partager Partager FranceTVinfo 11 Nombre de boutons de partage dans un article
  • 126.
    Partager Partager PartagerPartager Partager Partager Partager Partager Partager Partager Partager Partager L’Express 12 Nombre de boutons de partage dans un article
  • 127.
    Partager Partager PartagerPartager Partager Partager Partager Partager Partager Partager Partager Partager Partager Partager Le Monde, L’Obs 14 Nombre de boutons de partage dans un article
  • 128.
    Partager Partager Medium 2 Nombre deboutons de partage dans un article
  • 129.
  • 131.
    Faut-il tuer les boutonsde partage ? notre réponse : il faut sérieusement y songer
  • 132.
    Faut-il tuer les messages àpropos des cookies ?
  • 134.
  • 135.
  • 136.
  • 137.
    j’accepte À vie Nous sommes condamnésà toujours cliquer sur “fermer” ou “j’accepte” toute notre vie.
  • 138.
    Faut-il tuer les messages àpropose des cookies ? notre réponse : on est tous d’accord, oui
  • 139.
  • 140.
    Quelle est notre vision d’unmedia cool possible ?
  • 142.