Vive les tableaux de bord en ligne !

J’adore les tableaux de bord : simples à lire, concis, efficaces… Mais j’adore encore plus les tableaux de bord en ligne : versatile, personalisables, évolutifs… Les tableaux de bord sont à mon sens une des briques essentielles de l’Entreprise 2.0, et un très bon moteur d’implication et de collaboration.

Problème : comment concevoir et déployer des tableaux de bord en ligne ? En fait dès que vous creusez un peu, vous vous rendez compte qu’il existe de nombreux écrits et théories sur le sujet, de même que plusieurs blogs : The Dashboard Spy et Dashboards by Example.

Il existe aussi quantité de fournisseurs de solutions : Corda, The Dashboard Company, BrightPoint

Online_Dashboards.jpg

L’idée derrière ces tableaux de bords en ligne est de pouvoir exploiter au mieux les possibilités des interfaces riches pour proposer une lecture à plusieurs niveaux :

drilldown_fig.jpg

Il existe à ce sujet un projet universitaire très intéressant du nom de ASU Dashboards qui propose ce type d’interaction : une exploitation progressive des données par clic successifs qui permettent d’affiner la granularité des données. Exemple ici : Summary Factbook 2007.

La conception d’un tableau de bord est ainsi un exercice très périlleux qui cumule les complexité de plusieurs disciplines : architecture de l’information, design des interaction, visual thinking

Si le sujet vous intéresse, je vous recommande de vous plonger dans les différents exemples et études de cas des fournisseurs spécialisés.

(via Social Media Today)

/!\ Article précédemment publié sur FredCavazza.net.

Encore plus d’interfaces riches pour la finance en ligne

Suite à un précédent billet sur le sujet (cf. ), Alexandre M. me signale que la section IRA du site Bank of America propose également une interface riche de toute beauté : Individual Retirement Accounts.

Il y a tout d’abord un très bon tutoriel pour les novices ainsi qu’un assistant avec une voix off très agréable :

BoA_RIA_1.jpg

Il y a également un très bon tableau de synthèse avec des glissières très simples à utiliser (plus large que la moyenne) :

BoA_RIA_2.jpg

Et ça continu jusqu’à l’entrée du tunnel de conversion avec de très belles cinématiques d’ouverture de page et de transition. Vous noterez au passage la qualité de la signalétique (guidage très fort de l’œil vers les boutons d’action) :

BoA_RIA_3.jpg

Je suis une fois de plus séduis par la qualité de cette section du site, c’est propre, très agréable, incitatif et terriblement efficace. Rien à redire.

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés

Interfaces riches + finance en ligne = €€€

J’ai découvert hier la nouvelle version de l’outil de planification financière de E*Trade : Retirement QuickPlan (cliquez sur la boîte à droite de l’écran). Non seulement c’est un modèle d’ergonomie (lisibilité, incitation) mais l’expérience d’utilisation est des plus satisfaisante. Comprenez par là : on s’y amuse parce que les images sont belles. Images ? Non pas tout à fait, ça serait ne pas faire justice aux très beaux effets cinématiques des courbes et autres outils de visualisation.

Mais commençons par le commencement avec un très bel écran d’accueil sous forme d’assistant à choix fermés (rythme d’épargne, objectifs…) :

QuickPlan_1.jpg

Nous avons ensuite cette très belle courbe censée représentée le planning d’épargne qui doit vous permettre de financer votre retraite dorée (on peut en plus déplacer des glissières pour modifier la courbe) :

QuickPlan_2.jpg

Vous avez ensuite ce superbe écran récapitulatif avec cet histogramme dont je ne sais pas trop à quoi il sert si ce n’est à en mettre plein la vue :

QuickPlan_3.jpg

Force est de constater que les équipes d’E*Trade savent s’y prendre pour vous faire rêver avec une application très rébarbative (mettre de l’argent de côté pour financer la retraite que l’État ne pourra pas vous verser). Tout est ici mi en œuvre pour faciliter le décryptage des informations : les formes, les contrastes, les proportions, les graphiques (éléments centraux des pages)… Le résultat est à la fois très ludique (on peut jouer avec les glissières) et informatif (les montants sont réels).

Bref, vous aurez compris que je suis séduis par cet outil auquel je délivre le titre honorifique de “Best Practice“. (via RIApedia)

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés

Mes réflexions autour de Silverlight 2 et du MIX08

Suite à une série de billets publiés sous forme de compte-rendu, je me livre maintenant à une analyse à froid de la stratégie de Microsoft sur les interfaces riches et sur Silverlight en particulier.

Silverlight est là pour durer

Au vue de l’ambition et des moyens qui sont engagés par Microsoft, il est clair que les interfaces riches est un créneau (marché ?) que Microsoft veut investir durablement. Traduction : ils mettent le paquet pour réussir.

Ce n’est donc pas un hasard si Silverlight est proposé dans les mises à jour de Windows, le déploiement doit se faire rapidement.

Deux leviers de différenciation

Pour rattraper son retard sur Flash, Silverlight doit trouver sa place dans un marché un quête d’un second souffle. Microsoft a donc choisi de miser sur deux critères de différenciation : La vidéo HD et les applications d’entreprise.

Le premier car ce créneau est encore quasi vierge (du coup Adobe contre-attaque avec son initiative HD Video). Le gros partenariat avec NBC pour la retransmission des J.O. devrait jouer un rôle important dans l’évangélisation de Silverlight auprès du grand public.

Le second car Adobe a du mal à pénétrer ce marché et que Microsoft dispose déjà d’une très importante base de clients et de développeurs (lire à ce propos un billet de l’année dernière : Réflexions autour de Silverlight). La mise à disposition d’un ensemble de composants standards d’interface (boutons, menus déroulant, champs…) est ainsi un premier pas vers une approche industrialisée du développement de RIA d’entreprise.

Un discours tourné vers les annonceurs

Force est de constater que Microsoft ne s’embête pas trop à séduire les utilisateurs, ce serait un chantier bien trop laborieux et inutile (surtout avec Deux sites qui se font concurrence : microsoft.com/silverlight et silverlight.net).

Microsoft préfère concentrer son attention sur les annonceurs en leur fournissant des outils qui facilitent la monétisation des contenus :

  • L’intégration native de la gestion des publicités au sein de l’environnement de développement (ad templates) qui permet de gérer l’apparition de bannières à des moments précis de la timeline ou sur déclenchement d’un évènement, de gérer leur comportement, d’afficher des bannières transparentes en sur-impression (ad overlay) ou encore de faire du tracking ;
  • La possibilité de faire du téléchargement progressif (progressive download) pour ne pas gâcher de la bande passante inutilement (améliorant ainsi les coûts d’exploitation) ;
  • La possibilité d’activer la gestion dynamique de la bande passante (adaptive streaming) qui permet de réduire la qualité d’une vidéo pour ne pas interrompre le streaming (et donc l’affichage des fameuses bannières).

Bref, vous l’aurez compris, ils ont pensé à tout et les annonceurs / agences ne seront pas sourds à ces outils très précieux.

Quid des outils de conception ?

Je ne sais pas pour vous mais j’ai la très désagréable impression d’être la troisième roue du carrosse. Je m’explique : pour faire un site web ou une application en ligne, vous avez besoin de trois types d’intervenants : les designeurs qui s’occupent du look&feel, les développeurs qui s’occupent de la programmation et de la viabilité technique, les architectes fonctionnels qui se chargent des aspects métiers et de l’utilisabilité.

Microsoft tout comme Adobe concentrent tout leurs efforts sur les designeurs et les développeurs, mais ne s’adressent pas du tout aux concepteurs. C’est très dommage, car ces trois métiers travaillent de concert et devraient partager le même environnement de travail.

Je rêve ainsi d’une plateforme unifiée servant à faire la conception graphique, technique et fonctionnelle d’une RIA. Une plateforme de conception où il serait possible de :

  • Créer des arborescences ;
  • Modéliser des processus métiers ou des parcours clients (sous forme de use cases) ;
  • Faire du prototypage rapide sur des écrans fonctionnels (appelé ça comme vous voulez : storyboard, wireframe…) ;
  • Décrire le comportement des interfaces et des différentes modalités d’interaction (des sortes de mini-specs).

Jusqu’à présent l’offre des grands éditeurs est inexistante sur ce créneau, il n’existe que des acteurs de niche comme Norpath ou Axure.

Pour l’instant je n’ai entendu que des rumeurs et bruits de couloir : une extension à la suite Expression pour Microsoft et un certain projet “bordeaux” chez Adobe (un outil à mi-chemin entre Fireworks et Thermo).

2008 sera une année décisive

Je suis intimement persuadé que 2008 va être une année charnière pour les interfaces riches où tout va se jouer en quelques trimestres. Les enjeux sont de taille et le web 2.0 se cherche un second souffle, la bataille s’annonce donc épique avec un probable point culminant pour les sorties officielles de Silverlight 2 et Flash 10.

En attendant, Microsoft (tout comme Adobe) poursuit son travail d’évangélisation et de séduction. Espérons qu’ils n’oublieront personne en chemin (cf. mon paragraphe sur les outils de conception).

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés

TasteBook.com, beaucoup d’audace pour des interfaces riches inédites

Je souhaiterais vous parler ce soit d’un site remarquable : TasteBook. D’après ce que j’ai compris, il s’agit d’une place de marché de recettes de cuisine que vous pouvez assembler pour concevoir votre livre de recettes à vous.

Mais ce qu’il y a de particulièrement remarquable dans ce site c’est l’accumulation d’un certain nombre d’innovations tout à fait intéressantes en matière d’interfaces riches.

Il y a tout d’abord la page d’accueil et son système de coverflow :

TasteBook_1.jpg

Il y a ensuite la possibilité de feuilleter les livres avec un principe d’onglets sur le côté droit et la possibilité de voir la tranche (une fonction inédite il me semble) :

TasteBook_2.jpg

Vous avez enfin dans l’écran de personnalisation de votre livre un système de sélection multiple puis de glisser-déposer (heureusement il y a une cinématique à l’ouverture de la page pour vous l’expliquer, une liste infinie (comme sur Google Reader) et la possibilité d’afficher les détails (principe d’îlots de données) :

TasteBook_3.jpg

Rajoutez à cela des pages très épurées comme l’inscription ou le panier et vous obtenez une belle réussite ergonomique.

Impossible de dire si ces enrichissements de l’interface favorisent ou pénalisent les ventes, en tout cas le résultat est une remarquable source d’inspiration.

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés

Vive les transitions !

J’adore les interfaces qui se servent de cinématiques et d’animations pour concentrer l’attention et “poser le décor”. J’ai déjà eu l’occasion de parler des très beaux effets de transition présents dans le Adobe Media Player (plus d’infos ici : TV 2.0 Move it along).

Je vous propose de découvrir l’intérêt de ces transitions sur un site de contenu : Where Life Connects de Linksys.

WhereLifeConnects.jpg

Ce ne sont pas tant les animations au sein des blocs qui sont intéressantes mais plutôt la façon dont la page se compose : les blocs arrivent ou sont dépliés les uns après les autres. Une manière très intéressante de théâtraliser la mise en scène des contenus et des messages.

Alors bien évidement les pages de ce site sont plus lourdes et bien moins accessibles que du contenu en HTML mais le rendu n’est pas du tout le même. En tout cas cet “OVNI” est un cas d’école tout à fait intéressant dans son genre, plus d’infos sur le blog de l’agence qui l’a réalisé : Where Life Connects: Connecting with customers through email marketing. Vous en connaissez d’autres ?

/!\ Article précédemment publié sur FredCavazza.net.

Adobe AIR officiellement lancé

Ce matin Adobe vient de lancer officiellement AIR dans sa version 1.

on_adobe_air_logo.jpg

Pour faire court, AIR est un acronyme pour “Adobe Integrated Runtime“, il s’agit donc d’un programme que vous installez sur votre ordinateur pour faire tourner d’autres programmes. L’équivalent de la machine virtuelle du monde Java sauf qu’ici les applications reposent sur les technologies d’Adobe.

C’est à mon sens un grand pas dans la banalisation des applications connectées (autrement appelées Rich Desktop Applications) et dans l’évolution des habitudes de consommation des services en ligne (cf. 10 ans d’évolution des interfaces web au service de l’expérience utilisateur).

Le site dédié à AIR regorge d’exemples d’applications possibles, mais sachez qu’il existe aussi d’autres technologies permettant de faire sensiblement la même chose. Exemples avec des applications pour la FNAC (Bientôt une RDA pour la FNAC ?) ou encore pour Otto (Otto-Store, le rich media futur du e-commerce ?).

Plus d’infos sur le blog officiel : Its On – Flex 3.0 and Adobe AIR 1.0 Are Here! et sur cet article un peu plus fourni : Adobe AIR v1.0 & Flex 3.0 Released; New Adobe Open Source Site Launched.

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés

La 3D est la mode pour représenter la Terre

Aviez-vous remarqué que les librairies 3D sont à la mode, surtout pour faire des représentations réalistes de la Terre. Dernier exemple en date avec cette application réalisée pour Discovery Channel : Earth Live.

EarthLive_OceanTemp_1.jpg

La réalisation est très belle (surtout très réaliste), même si ce n’est pas la première fois que l’on peut voir des vues 3D de la Terre et notamment chez Nike ACG (qui utilise la librairie PaperVision 3D).

NikeACG.jpg

Dans un même ordre d’idée nous avons aussi le tout nouveau Yahoo! Newsglobe :

YahooNewsglobe.jpg

Et n’oublions pas le Geolocator d’Etsy :

Etsy_Geolocator.jpg

Moi je dis : à partir de quatre exemples, c’est un début de nouvelle tendance…

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés

Microsoft prépare une grande offensive dans la vidéo en ligne avec Silverlight

Chez Microsoft ils ont visiblement décidé de mettre le paquet sur la vidéo pour assurer la promotion de Silverlight.

Nous avons tout d’abord eu la retransmission live de l’intervention de Bill Gates lors du CES : Watching the Bill Gates CES 2008 Keynote powered by Silverlight.

Il y a également eu la diffusion gratuite de Jackass 2.5 : Watch Jackass 2.5 – Free and Exclusive on Silverlight!.

Ils ont également fait un partenariat avec CBS/Paramount et Entertainment Tonight pour le lancement du mini-site des Golden Globe Awards : ET’s new Golden Globes Site powered by Silverlight.

GoldenGlobes.jpg

Enfin, ils viennent d’annoncer un partenariat avec NBC pour faire de MSN la source d’information officielle des jeux olympiques : Silverlight to power the online video portal for the 2008 Olympics.

nbc_silverlight.jpg

Une très grosse nouvelle puisque les J.O. représentent tout de même près de 15 millions de visiteurs uniques. De quoi accélérer le déploiement de la v.2 de Silverlight.

Impossible pour moi d’achever ce billet sans une touche de francophonie, je vous propose donc de jeter un œil au site des TechDays 2008 de Paris :

TechDays.jpg

Tout ça est très intéressant, d’autant plus que côté Adobe les vidéos en HD (pas encore de full HD ?) commencent à voir le jour, notamment sur le site Hulu ou encore sur leur HD Gallery.

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés

Est-ce la mode des menus déroulant riches ?

Voilà plus de 10 ans que le web existe. Plus de 10 ans que nous nous contentons de ce que le HTML nous propose comme éléments d’interactions (boutons, menus…). Peut-être serait-il temps d’expérimenter de nouvelles choses afin de gagner de la place. Dans ce contexte, laissez-moi vous présenter des choses tout à fait intéressantes, et notamment ces composants surprenants.

Premier exemple chez Google Base avec ces menus déroulant qui intègrent des cases à cocher et même des champs de saisie :

RichDropDown1.jpg RichDropDown2.jpg

Autre exemple chez Getty Images avec ce champ de recherche extensible (les options apparaissent lorsque le curseur est dans le champ) :

RichDropDown3.jpg

Dernier exemple chez Monster avec ce mélange de menu déroulant, de listes extensibles et cases à cocher :

RichDropDown4.jpg

J’ai personnellement un petit faible pour les menus déroulant de Google Base, même si je serais curieux de voir la réaction d’utilisateurs lambda… A quand une intégration de ces composants dans le Google Web Toolkit ?

/!\ Article précédemment publié sur FredCavazza.net.

Les commentaires sont fermés