Archives par mot-clé : information

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!

Feltron 2013 Annual Report

Nicholas Felton passe la plupart de son temps à collecter les données, et à les exposer en camemberts. Il est l’auteur des Feltron Reports qui met en image et en chiffres l’activité de ses journées et met en évidences ses routines.

Pour son rapport 2013, il explique au New York Times comment il a pu utiliser tous les derniers outils pour se faciliter la vie dans l’enregistrement de ses données (Nike Fuelband, Fitbit, et ses applications maison Daytum et Reporter).

Quelques résultats de statistiques. Le document entier sera imprimé. Quelques exemples des plus originales visualisations dans la suite de ce post:

FAR13_06

FAR13_02

FAR13_07

FAR13_11

FAR13_10

FAR13_14

Bonne visite et exploration.

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

Front row to fashion week

Esthétique et efficace, la nouvelle interface de visualisation des différents défilés de mode lors de la Fashion Week de New York. Réalisée par Mike Bostock, le créateur de nombreuses visualisations pour le site du New York Times a choisi d’apporter un nouveau regard sur les photos de défilé. Continuer la lecture de Front row to fashion week

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’ :

iA : WebTrend map

Une autre agence à suivre, Information Architects, basée à Tokyo. Nous connaissions le Web Trend map imprimé, réalisé par l’agence de design d’information.

Avec avec Craig Mod, ils lancent aujourd’hui une version interactive de ce service, que je vous invite à découvrir sur webtrendmap.com. Le service est toujours aussi élégant, et fournit nombre d’informations sur les contenus des sites sélectionnés, grâce à l’affichage des flux RSS associés.

Web Trend map

Toutes les infographies et illustrations étudiées sur Gabyu :

➜ David McCandless, l’infographie distrayante.
➜ La Mosca, l’agence aux infographies verticales.
➜ SPVZ (Valentin Adam), l’infographie en tant qu’auto-portrait.
➜ Dave Bowker, la lecture d’une infographie en trois temps.
➜ Information Architects (iA), WebTrend map, et l’infographie sociale.
➜ Catalogtree, illustrations et/ou design d’information ?
➜ Timm Lerkeritz, L’infographie multi-supports