Quartz 3.0

On m’a encore récemment demandé quelle était mon app iPhone favorite pour lire l’actualité. Et d’admettre que la plupart des apps y sont installées essentiellement pour les notifications, seul flux accessible en Chine: par exemple, les contenus des applications iOS le Monde New York Times sont bloquées en Chine.

J’ai récemment pris le coup de coeur des pure players qui spécialisent leur thématiques de manière claire (Slate, Eon Magazine, ou encore Good). Parmi mes préférés: Quartz ou qz.com. Le site prend le parti, et ce depuis ses débuts, de mettre en avant la plateforme mobile, et ce.. sans utiliser la moindre app, et opte pour une version responsive particulièrement travaillée.

Quartz opère sa deuxième refonte. Quartz explique que la refonte inclus l’ajout d’une homepage éditorialisée, et ce malgré que le site n’a jamais cru aux longues listes de contenus. Besoin d’audience supplémentaire? Possible. Le site souhaite convaincre ses lecteurs et les marques que la qualité et la rareté des contenus intrusifs iront de pair. Les annonceurs ne sont pas mis au placard, mais vont disposer d’espaces plus immersifs.

Une épure visuelle qui ferait plaisir à voir chez nos chers medias français.

Sous le header minimal et l’immense photo de une, quelques gros plans sur la section de la homepage intitulée « The Brief », qui prend le parti de presenter une nouvelle en 2 ou 3 phrases courtes, accompagnées de liens. L’équivalent de 3 a 4 tweets rassemblées.

The Brief. Notez que c'est la seule zone du site qui comporte la présence d'un annonceur.
The Brief. Notez que c’est la seule zone du site qui comporte la présence d’un annonceur.

Dans les articles, une navigation facile d’accès et réactive. Je vous ai capturé un exemple de parcours utilisateur dans la vidéo ci-dessous:

La version desktop du site est réussie meme si on ressent facilement que la refonte du site cible avant tout les mobiles.

Avec une seule colonne, le site démontre qu'aucun compromis a été pris pour mettre des batons dans les roues des utilisateurs. Seule obligation: scroller ou utiliser la navigation des menus.
Avec une seule colonne, le site démontre qu’aucun compromis a été pris pour mettre des batons dans les roues des utilisateurs. Seule obligation: scroller ou utiliser la navigation des menus.

Force est de constater que les choix de la simplification de la mise en page des sites d’information vont de l’avant. Avec de tels parti pris, je ne peux souhaiter que bonne continuation à Quartz!

Los Angeles Times 2014 redesign

Une refonte efficace et complète pour le Los Angeles Times, LA Times pour les intimes. Elle a été réalisée par les talentueux designers de Code and Theory, qui n’en sont pas a leur premier coup d’essai.

Homepage du LA Times (2014).
Homepage du LA Times (2014).

Vous qui recherchez la colonne publicitaire, l’espace sponsorisé, vous risquez d’être décus. Tout ces espaces ont littéralement fondu dans le décor, et fait place devant l’intelligence d’une mise en page résolument simplifiée. Car au delà des nécessités de l’utilisateur moderne (responsive design), ainsi que celles qui rendent le site simplement élégant (une typographie particulièrement travaillée), le site a fait un gros efforts de nettoyage et de suppression de tout le superflu en terme de gestion, mais aussi d’affichage et de transition du contenu: le concept de page et sa problématique rupture (lors du chargement, mais pas seulement) disparaissent.

Le pitch est simple: Si le LA Times produit du contenu, l’utilisateur se l’approprie, et le parcoure comme s’il s’agissait du sien. Comme bon le lui semble.

Les videos, signées LA Times, qui fait sa promo:


La navigation par rubrique, qui s’affiche en toute circonstance, sans s’imposer. L’architecture d’information, par rubriques, est le reflet d’une organisation interne conçue pour produire du contenu. Chaque rédaction produit du contenu pour ‘sa’ rubrique. Le problème, c’est que pendant longtemps, les sites de presse ont trop misé sur ces onglets pour afficher d’autres type d’informations, plus commerciales. Plus que jamais, le lecteur a besoin de ce repère, mais le passage d’une rubrique à l’autre ne doit plus rompre l’experience de lecture.


Le chargement des photos en grand format, pour naviguer en mode visuel, pour les détesteurs de chapeaux d’articles.


Pour les twittos, des fonctions de partage qui vous mache le travail, tout en vous laissant le controle. Cela parait si simple… pourtant si éloigné de la plupart des comportements de boutons de partage.


Les galeries ont toujours été l’obsession des marketeux. Source de pages vues? Marketing enrichi? que nenni! Ici les images défilent intuitivement, comme si l’on parcourait ses propres photos sur sa tablette.


La bonne vieille liste d’articles en relation (comme vous en trouverez en bas de ce post) commence a sentir le moisi. Si un article vous plait, un clic sur l’onglet ‘related’ et, surprise…

Le modèle économique? un modèle qui se tourne vers le payant, avec une offre a environ 50 dollars US par an.

Bim.

Bloomberg View

Connu avant tout pour son flux d’actualités du milieu financier, Bloomberg se cherche différents moyens pour diversifier son offre de contenus. Le redesign du site Bloomberg view apporte une réponse aux lecteurs qui ne lisent que les contenus de la rubrique Opinion.

Conçue par le studio Schema, la homepage du site propose une interface en grille pour chacun des contenus d’articles. Le rendu est proche de celui d’une application iOS et a été conçu pour supporter les formats mobiles, en responsive. Entrecoupé d’un nombre restreint de formats publicitaires, la plupart des contenus sont agrémentés de photographies et d’un elegant portrait illustré du contributeur de l’article. Le résultat est à la hauteur et montre que la proche collaboration du studio avec l’équipe éditoriale porte toujours ses fruits.

Bloomberg View — Homepage.
Bloomberg View — Homepage.
Bloomberg View — Article page.
Bloomberg View — Article page.
Bloomberg View — Mobile view.
Bloomberg View — Mobile view.

Pour en savoir plus, suivez le studio Schema sur Twitter.

Redesign du site TIME

Un redesign réussi pour TIME, qui se tourne vers une interface responsive dépouillée et résolument mobile. La gestion des contenus de la Homepage est simple et sans multi-colonnage. Il fallait faire rester les 60 millions de visiteurs habitués à la précédente version. L’objectif est de poursuivre sur la lancée opérée en 2013, avec plus du double de lecteurs depuis un an et une audience mondiale qui nécessite des éditions sur plusieurs continents. Continuer la lecture de « Redesign du site TIME »

The Independent redesign

The Independant cover redesign (2013)

Le journal britannique The Independent a dévoilé il ya quelques semaines un nouveau design, le résultat de 3 mois de travail pour Matt Willey et l’équipe interne. Comme pour chaque refonte, de gros changement au niveau du masthead et pour les magazines. L’identité visuelle (caractérisée par le fameux « aigle ») a également été retravaillée. Visuels de la nouvelle maquette dans CR blog.

Circa

Cela faisait un moment qu’aucune application sérieuse s’intéressait à améliorer notre manière de consommer l’information en ligne, en utilisant une app iPhone. L’idée maitresse :

« We can take a story and cut eighty percent of it. »

 

Circa est une application de curation d’info – avec un travail de synthèse entre les meilleures sources d’infos, realisée par une équipe éditoriale en interne.

Ses 3 objectifs:

  • Ne pas avoir à relire systématiquement la meme information, souvent rewritée d’un site de news, à l’autre. Réduire la surabondance d’information redondantes.
  • Présenter au lecteur un maximum d’enrichissements utiles au beau milieu du texte, en contexte. Confort et convivialité.
  • Consommer l’info dans un environnement difficile (transport urbains), avec une seule main. Pouvoir rester sur l’appli sans avoir besoin de gerer plusieurs apps simultanément via des liens, en utilisant le ‘gap time‘, ce moment ou vous attendez qui est tant convoité par les app de casual gaming ou Twitter.

Quelques nouveautés en terme d’interface utilisateur ont été ajoutées. En voici quatre qui me paraissent particulièrement bien conçues :

Scrolling ‘aimanté’

L’expérience de scrolling sur iOS oblige parfois à jongler avec 2 doigts ou à être rapide afin de l’interrompre. Ici, le système de pagination fonctionne par swipe (de manière à éviter le problème du scrolling incontrôlable).

Embed et contextualisation

En matière de présentation du contenu de l’info, chaque ‘article’ dispose de plusieurs styles, comme une carte au beau milieu d’un article, une citation, ou d’une photo. Ici , l’idée est de rendre l’information avec tous les enrichissements possibles. Le plus: Un systeme de ‘couverture’ pour chaque article, avec une photo et un résumé. Les sources d’informations, sont elle, savamment presentées car toujours en contexte de la page affichée.

 

Personnalisation ‘invisible’

Le solution de customisation est encore rudimentaire, mais l’idée ici est de s’eloigner du complexe Flipboard et de ses thématiques imposées. Ici, il s’agit de rapidement ‘follower’ un contenu pour générer ensuite une liste personnalisée. Circa ne se positionne ni en app de curation ni en app de flux automatiques. Elle fait les deux.

Partage d’un point de lecture

Le principe du partage sélectif. Ici, il est possible de partager une info entière ou une bribe d’information que l’on aura denichée au sein d’un article. C’est là encore un moyen supplémentaire de faire gagner du temps aux lecteurs.

Si on veut voir plus loin on peut s’interroger :

  • Est-ce que ce type de consommation d’information va modifier la manière de produire l’information (avec 60% de staff technique, 30% de redactionel) ?
  • Est-ce que le modele economique de la curation peut fonctionner (l’application est gratuite, mais imaginons qu’elle devienne payante) ?
  • Comment Flipboard, Instapaper, mais aussi Apple vont-ils réagir en regard de ces quelques innovations ergonomiques ?

Avec des investisseurs tout aussi passionnés d’ergonomie et d’interface utilisateur, comme Dave Morin (Path), on peut s’attendre a des évolutions de plus en plus intéressantes sur cette app. À suivre, donc !

Comptes Twitter : Matt Galligan @mg, @circa
Site officiel : About CircaAppstore 

Quelques liens:

 

Slate.fr v2

Ces dernières semaines ont été importantes pour ces medias que l’on appelle ‘pure-players’, non qu’ils recherchent à tout prix à ressembler aux medias plus traditionnels, mais qu’ils aient pu mobiliser des moyens comparables, tant sur le fond que sur la forme. Dans cette course contre la montre pour obtenir le scoop, l’arrière-garde que représente les web designers ont aussi leur role pour trouver de nouveaux modes d’accès à l’information.

Après un an d’existence, le nouveau magazine slate.fr assure un redesign efficace à partir de lundi 12 juillet. De nouvelles ambitions apparaissent pour ce pur-player un moins populaire que Rue89 (ou, plus récemment, de Mediapart), qui continue très certainement à se distinguer par la longueur agréable de ses articles ainsi que de son esprit analytique et moins caustique.

Réalisé par Upian, cette refonte s’articule de nombreux changements visuels et structurels. En voici l’avant-première.

Slate.fr — nouvelle version (Homepage)Slate.fr — nouvelle version (page article)

Ce qui faisait un des originalités du site slate.fr, à savoir la liste de liens verticale appelé « ici et ailleurs », s’appelle désormais « Lu, Vu & Entendu, et s’affiche à l’horizontale. Comme pour signifier que Slate.fr poursuit son évolution un format web-magazine, et s’éloigne de la logique de flux en temps réel. Un choix relativement risqué : les chiffres d’audience générés par ce type de contenu sont importants, mais il ne faut pas négliger l’économie d’énergie réalisée. Maintenir un desk requiert beaucoup de temps aux équipes en interne.

Les contenus générés par les utilisateurs ont vu davantage qu’un lifting, avec l’integration des commentaires dès la homepage. Comme pour marquer une nouvelle ambition pour le site, celle d’attirer de plus en plus de nouveaux lecteurs et participants. Avec, au même niveau hiérarchique, la présence d’une liste de récents blogposts, ainsi que de réactions de lecteurs.

Enfin, comme pour tenter de diversifier un peu plus les contenus, slate.fr se dote d’un affichage de galeries photo tout doit inspiré de Boston, avec une première application du format « Big Picture » à la française. Plus immersif encore, avec le choix d’afficher les photos sur un fond foncé. Autre nouveauté de contenu, l’arrivée d’une chaine Slate.tv, qui recense les dernières bonnes vidéos et met en valeur les futures productions vidéos maison.

Enfin, quelques fonctionnalités existantes ont pu être remaniées et mises en valeur, comme la possibilité de naviguer d’article à article, par grands sujet d’actualité (ex tags) mais aussi par ordre chronologique, la possibilité de se connecter à son réseau social favori pour pouvoir poster un commentaire.

En exclu pour le blog Gabyu, la page d’accueil et la page article (sur Flickr).

Le coup d’oeil dans le de ‘rétroviseur’ :

Arte Webdocs

Le site d’Arte Webdocs va, je l’espère, réussir son pari. L’enjeu ne concerne pas seulement Arte. Le principal enjeu : mieux intégrer et valoriser les web-documentaires sur les sites d’informations et ainsi générer une nouvelle et importante source d’audience sur ces sites. La direction artistique est réalisée par la webagency Upian (Sebastien Brothier), la réalisation de Thibaut Lion et la gestion du projet a été confiée à Marie Chevalier. Fidèle à l’aperçu à J-10, la capture du site prise ce matin.

Arte-Webdocs-20100223

En ligne également, le web-documentaire consacré à Havana et Miami. Ici, l’interface permettant de réagir et d’ajouter de contenus. Tout en couleurs et en contrastes !

arte-webdocs-interface-com

L’idée est ‘simple’ : il s’agit d’éditorialiser et d’organiser une base de documentaires multimedias (essentiellement vidéos) avec du texte enrichi, au travers d’articles rédigés par Arte. Le tout avec une mise en avant de sélections de vidéo, de classement et de commentaires via les plateformes sociales comme Twitter.

Les codes graphiques (par Karim Moreau et Eric Drier de Upian) reprennent un player vidéo géant (avec une large format pour le webdoc du moment), suivi d’un déroulé d’articles plus classiques. Il y a encore quelques petits détails qui me chiffonnent (petit jeu : parviendrez-vous à trouver l’annonce du webdoc « Gaza-Sderot » ?), mais dans l’ensemble je ne cacherai pas que c’est une belle réussite et que les gros écueils ont été évités.

Quelques particularités et mes ‘bons points’ au niveau des web-feuilletons :

  • Chaque web-documentaire dispose d’une élégante interface de consultation/navigation, afin d’offrir au lecteur une experience de consultation unique. Elle est un bon moyen de faciliter l’ajout de commentaires et de remettre le ‘lecteur’ au centre de l’expérience.
  • Chaque web-feuilleton dispose de sa propre url et un sous-domaine. Cela est necessaire quand on sait que les webdoc sont disponibles au format flash, un format pas idéal niveau SEO. Lorsque l’on connait l’état du débat sur le Flash/html5 à l’arrivée des tablettes Apple en France, on peut se dire que Flash a encore quelques beaux jours devant lui. Le fait qu’il sera possible de bidouiller le flash pour le transformer en application iPad empêche une profonde remise en question, pourtant nécessaire..
  • Vu la fréquence de mise à jour des productions (certaines sont des feuilletons s’étalant sur 3 mois), le flux RSS pour chaque webdoc est d’une réelle utilité. Imaginer d’autre méthodes d’alertes de mise à jour (email pour les plus gâteux) n’aurait pas été de trop.
  • La question du débit : Ce genre d’experience n’est possible qu’à partir de l’ADSL. Je fais la fine bouche, me direz-vous, mais c’est le genre de mention qu’on verra très certainement apparaitre je l’espère.
  • La question du modèle économique n’est visiblement pas un problème, et le choix de ne pas afficher de format publicitaire classique est un réel plaisir. Cela laisse supposer que si publicité il y aura, elle se trouvera ailleurs  (le webdocu sponsorisé par un annonceur?).

J’espère que vous irez vous faire une idée sur webdocs.arte.tv, et lire vos avis sur vos sites respectifs ou ci-dessous !

Social News

mayer

La présence de Marissa Mayer (une des baronnes de Google) à la conférence Leweb ’09 n’aura pas vraiment permis de découvrir de nouveaux produits… Michael Arrington, bien que montrant beaucoup de talent, n’aura pas réussi à la ‘cuisiner’ davantage. Hormis les quelques anecdotes sur Wave (qui est un peu utilisé par les équipes en interne), ou sur Safari (son navigateur préféré apres celui de la maison, Chrome browser), on n’en saura pas plus.

Ce qui m’a surpris, c’est l’intéret porté par Google aux médias, à la presse, bref, aux nouvelles (‘news’). Le poids de son speech sur les médias et le contenu éditorial laisse envisager que Google souhaite définitivement repenser les médias traditionnels et proposer de nouveaux modes de consommation de l’actualité, et ce, grâce aux contribution des réseaux sociaux :

L’information hyper-personnalisée

Pas de changements : le poids d’une information est associée à celle d’un lien. À l’aide du ‘bruit’ généré par les utilisateurs des réseaux sociaux, les pages articles sont interconnectées entre elles, permettant d’établir un nouveau maillage de contenus. La grande différence réside plutot dans l’utilisation des liens par Google, et proposer à l’utilisateur une information personnalisée, des liens personnalisés au pied des articles de medias et journaux en ligne. Marissa Mayer l’explique bien : Les medias traditionnels n’offrent pas assez de liens contextuels en bas de chaque article. Google va ainsi proposer au medias d’étoffer des liens associés. Reste à savoir si les medias vont accepter et se preter au jeu.

Screen shot 2009-12-09 at 7.46.36 PM

Petits ruissaux d’articles, formant un long fleuve : De l’article au dossier.

Si les actualités sur Google news sont généralement classés par thématique (Sports, sciences…), le système Living Stories à venir va rester avant tout anté-chronologique, avec des liens vers des contenus tout fraichement publiés. Pour Google, nul question de remettre en cause l’unité de base du contenu éditorial à savoir un article. Pour elle, tout ce qui reste à faire concerne, là encore, des relations entre les articles et de créer un fil d’articles sur une thématique précise et définie par les tweets et leur hashtags (en tout, 12 critères, selon Marissa). Ainsi un ‘dossier’ Changement climatique pourrait permettre de lire tous les dernières informations relatives à ces contenus, le tout en temps réel. Ce mode de consultation va ouvrir des possibilités de découvrir de nouveaux médias, il rappelle scrupuleusement le role du média et lui propose de se concentrer sur son métier de création d’articles, plutôt que de devenir agrégateur. Uniquement en anglais, le service Living stories affiche déjà plus qu’une simple liste de liens, car il conserve votre historique et parcours de navigation et sait ce que vous n’avez pas encore lu, les derniers développement d’une actualité brulante — et ne vous proposer que ceux-ci.

GOTO CHINA

Il est très utile et passionnant de suivre les récentes mises à jour des sites de Radio France et Marianne2.fr, toutefois, pour le moment, j’ai envie de faire un break.

Pour ces quelques jours de repos en France, mon petit coup de coeur photographique sur le GOTOCHINA, un site/portfolio/guide de Shanghai et Beijing.

goto-china-1

goto-china-2

goto-china-3

Réalisé par des étudiants norvégiens en 2008. Si ces photos sont relativement ‘classiques’ pour tout visiteur ou touriste, leur mise en valeur révèle l’intérêt de créer des guides visuels plutot que textuels. Une initiative qui séduit Ruba, un guide fraîchement sorti qui lance ses guides visuels.