Datagif : medias et design. Web2day, juin 2015

13 507 vues

Publié le

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/

Publié dans : Internet
4 commentaires
36 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
13 507
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6 889
Actions
Partages
0
Téléchargements
131
Commentaires
4
J’aime
36
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Datagif : medias et design. Web2day, juin 2015

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

×