Une nouvelle expérience de consommation des médias avec les webdocumentaires

J’ai déjà eu l’occasion de vous parler des webdocumentaires, un format à mi-chemin entre site web et DVD-Rom : France5 et CuriosphereTV expérimentent les web-documentaires. Je souhaiterais aujourd’hui rattraper une grande injustice et vous faire l’apologie de Prison Valley, un superbe web documentaire sorti il y a quelques mois et coproduit par Arte, Upian et le CNC qui vous plonge dans l’univers incroyable d’une ville-prison du fin fond de l’Amérique.

La page d'accueil de Prison Valley

Ce n’est pas le premier webdocumentaire réalisé (il me semble que le premier date de 2007 : Thanatorama) mais c’est à ce jour le plus abouti avec près de 250 K€ de budget et un certain nombre de récompenses (cf. Les webdocumentaires d’Upian). Ce qu’il y a de particulièrement intéressant avec ce « site » c’est qu’il intègre de façon parfaitement harmonieuse la narration vidéo interactive et la dimension sociale. Pour accéder au documentaire, il faut ainsi se créer un compte ou se connecter avec un profil Facebook ou Twitter. Pourquoi ? Tout simplement pour faire vivre le site de nombreux mois après sa publication, ou plus précisément pour faire vivre les discussions en rapport avec le sujet traité.

Le site est ainsi étendu sur différents médias sociaux avec un blog, un forum, une page Facebook et un compte Twitter. Le « produit » est également disponible en VOD, en application iPhone et en livre.

Mais ce qui nous intéresse particulièrement c’est le site web et son incroyable modèle d’interaction où la trame narrative est enrichie par de nombreux d’éléments interactifs. Le fil rouge est bien entendu le documentaire en lui-même qui est découpé en plusieurs chapitres :

Le lecteur vidéo de PRison Valley

L’interface est très épurée avec une timeline et un bouton unique qui permet de rentrer au motel où séjournaient les journalistes. La chambre du motel sert ainsi d’écran d’orientation entre les différents chapitres de la vidéo et les contenus additionnels :

La chambre du motel qui sert d'écran d'orientation

Au fur et à mesure du visionnage des séquences vidéo, vous amassez des indices qui vous apportent un complément d’information sur l’enquête en cours. La référence au monde des jeux vidéo est ici évidente, mais elle fonctionne particulièrement bien dans ce contexte :

Les compléments d'information sous forme d'indices

Les différents personnages qui sont mentionnés dans le reportage viennent compléter une galerie à laquelle il est possible d’accéder, toujours pour avoir des compléments d’infos :

Les fiches détaillées des personnages

L’expérience d’utilisation de ce site est réellement unique : l’immersion est totale et le documentaire est ponctué de nombreux embranchements pour maintenir l’attention de l’internaute et lui donner envie de consulter les bonus. Le basculement d’un écran à un autre est parfaitement intuitif et les boutons sont suffisamment larges pour pouvoir manipuler cette interface à l’aide d’un touchbook.

Un touchbook comme l’iPad ? Non car l’iPad souffre de limitations qui ne permettent pas de consulter ce site (en Flash), mais de nombreux modèles concurrents vont voir le jour d’ici la fin de l’année et permettront de pleinement profiter de ce format. Pleinement ? Oui car c’est en position de repos (assis ou allongé) que ce documentaire se consomme, les manipulations étant réduites au strict minimum.

Là où je suis particulièrement conquis par ce format c’est qu’il fonctionne à la fois sur les touchbooks (pour un premier visionnage) mais également sur un ordinateur (pour l’accès au bonus et la participation aux discussions). La formule magique semble donc avoir été trouvée : un document vidéo chapitré + des contenus additionnels + une interface minimaliste + des espaces d’interactions sociales.

Ce documentaire préfigure-t-il l’avenir du web ? Non car les sites traditionnels continueront de dominer le web pour de nombreuses années. Par contre, attendez-vous à voir fleurir de nombreux autres formats novateurs de ce type qui parviennent à repousser les limites du web.

Et on reparle des bibliothèques de modèles de conception

Pour compléter ma précédente liste de User Interface Patterns Library (cf. Vive les librairies de modèles de conception d’interfaces) je vous propose de découvrir une nouvelle bibliothèque qui s’illustre par son interface : Quince.

Les modèles sont ainsi répartis par tâches, tags et types de wireframe. À chaque mode de classement correspond une interface, ici la recherche par tâches :

La recherche par xx chez Quince
La recherche par tâches chez Quince

Là, la recherche par tags :

La recherche par tag de Quince
La recherche par tag de Quince

Et voici enfin à quoi ressemble la fiche d’un modèle de conception :

Un modèle de conception sur Quince
Un modèle de conception sur Quince

C’est donc une interface très originale que nous propose cette bibliothèque de modèles de conception, un peu perturbante au départ mais finalement assez simple d’utilisation. Voici en tout cas un bon moyen de faire évoluer les mentalités et notamment les à priori vis à vis des interfaces riches. (via Usability Post)

DAB + RIA = WF

Vous n’aimez pas les écrans des distributeurs automatiques de billets (DAB) ? Vous préfériez des interfaces plus riches (RIA) ? Alors vous aimerez sûrement les nouveaux automates de Wells Fargo (WF). Cette banque américaine a en effet eu recours aux services d’une agence de design (Hot Studio) pour concevoir l’interface de ses nouveaux distributeurs automatiques :That design is money! A better ATM experience from Wells Fargo.

Le résultat est tout simplement bluffant avec des écrans d’une grande sobriété mais à la lisibilité parfaite. Ici la saisie du code PIN :

WF_ATM1.jpg

Et là un écran de confirmation avec un exemple de processus :

WF_ATM2.jpg

Juste pour rigoler je vous propose un avant / après du menu principal :

WF_ATM3.jpg

Rien à redire, c’est du très bon travail et cette nouvelle interface participera grandement à réduire les frictions (incompréhensions, frustrations, erreurs…) et à améliorer l’expérience d’usage.

/!\ Billet initialement publié sur FredCavazza.net.

10 ans d’évolution des interfaces web au service de l’expérience utilisateur

2007 sera une grande année pour les interfaces riches (voir à ce sujet mon précédent billet). Pour célébrer cette révolution à venir, je vous propose de faire une rétrospective sur dix années d’évolution des interfaces web, en incluant un peu de prospective sur l’année à venir.

J’ai résumé tout cela dans ce schéma :

10 ans d'évolution des interfaces web

La page HTML : simple et efficace

La manière la plus simple de réaliser une interface web est d’utiliser HTML. Pour consulter une page web, il faut : un système d’exploitation et un navigateur. C’est simple et efficace, suffisamment efficace pour faire fortune (à l’image d’eBay ou d’Amezon).

L’applet : un peu plus de puissance mais au détriment du confort d’usage

Durant la fin des années 90, sont apparus des micro-applications qui pouvaient être exécutées au sein d’une page web : les applets réalisées en Java. Pour pouvoir les exécuter, il fallait bien évidemment un système d’exploitation, un navigateur, mais également une machine virtuelle. C’est cette dernière qui servait à interpréter le code Java (qui n’a rien à voir avec Javascript).

Les applets permettent de faire plus de chose que le HTML mais au détriment du confort d’usage, car les applets sont lourdes et longues à démarrer (de 1 à 3 secondes) et que la machine virtuelle nécessite souvent des mises à jour intempestives. Quand il s’agit du configurateur en 3D deVolkswagen, ça va, mais quand il s’agit d’un simple calendrier pour choisir une date comme sur le site de la banque Fortis, c’est inadmissible.

Les RIA : le meilleur compromis à ce jour

Puis sont apparues les Rich Internet Applications qui proposaient de bien plus grandes possibilités d’affichage et de manipulation que le HTML. Ces interfaces riches pouvaient être réalisées enAJAX (à l’image du sélecteur de diamant d’Amazon ou du site de GAP) ou en exploitant des technologies vectorielles comme Flash ou WPF/E. Pour les faire tourner, vous devez posséder le bon plug-in (ce qui est le cas de 99% des ordinateurs pour Flash). L’intégration des animations au sein d’une page web est transparente et très performante (à l’image du très bon comparateur deFord Vehicles).

Les widgets : petites mais terriblement efficaces

Plus récemment, des petits modules autonomes sont venus s’installer sur notre bureau : leswidgets. Ces micro-applications nécessitent plusieurs choses pour pouvoir tourner : soit un programme appelé moteur de widget (Yahoo! WidgetGoogle DesktopKapsules sous Linux ou encore le navigateur Opera), soit un système d’exploitation de nouvelle génération comme Windows Vista ou Mac OS X.

Les RDA : l’avenir du logiciel ?

La toute dernière évolution des interfaces web s’appelle les Rich Desktop Applications. Tout comme les applets, les RDA nécessitent une machine virtuelle (Eclipse RCPNetBeansJava Web StartXULRunner de Mozilla, Le futur Apollo d’Adobe ou encore le SmartClient de Microsoft). Ces technologies permettent d’avoir des interfaces aussi robustes que des applications et la simplicité de déploiement des sites web (pas besoin de les installer sur le système d’exploitation).

Plusieurs expérimentations sont en cours autour des RDA : SongBird (un concurrent de iTunes réalisé avec XUL), le Mozilla Amazon Browser (une RDA qui exploite le catalogue d’Amazon) ou encore le module d’eBay réalisé avec Apollo.

Conclusion : le service avant tout

Après ce formidable déballage des technologies toutes plus prometteuses les unes que les autres, je vous propose de faire le constat suivant : Qui avons-nous à gauche du schéma ? Amazon et eBay. Qui retrouvons-nous à droite du schéma ? Amazon et eBay. L’enseignement que nous pouvons en tirer est le suivant : si votre service est bon alors ces différentes technologies (et les plus récentes en particulier) ne doivent vous servir qu’à enrichir l’expérience utilisateur que vous proposez. Par contre si votre service n’est pas performant alors ne rêvez pas, l’interface (quelle que soit la technologie utilisée) ne compensera pas une expérience utilisateur négative.

Je vous laisse méditer là dessus…

/!\ Article initialement publié sur FredCavazza.net.