_juin 29  08
_Billet

Les lignes de temps interactives sont des exemples de formalisations séquentielles, des modes d’exploration des interfaces qui rompent avec la conception d’une navigation à simplement “cliquer/pointer”. Dans les time lines, la navigation est “manipulable” par l’usager. Les lignes de temps empruntent leur culture à l’histoire comme discipline (les frises chronologiques que chacun a parcouru en classe). Avec l’avènement des usages sociaux, la popularité des lignes de temps a grandi, et leur utilisation ne se cantonne plus à la presse en ligne ou au discours institutionnel.

Un discours de plus en plus présent dans le design d’interface consiste à préférer les idiomes visuels aux métaphores. Alan Cooper se montre critique à l’égard des métaphores, dans le chapitre 2 de son ouvrage About Face 3 (p36-37). Pour lui, les représentations métaphoriques qui exploitent les procédés mécaniques dégradent les interactions de l’utilisateur dans l’interface. Certaines métaphores faisant référence à des objets sont plus complexes à utiliser que leur référent réel. Il prend l’exemple de la métaphore du livre, qui comporte plusieurs défauts, dont celui de ne pouvoir être annoté, corné. Cooper propose alors de prendre pour principe de ne jamais utiliser une métaphore de ce qu’il nomme l’ « âge mécanique » pour en faire une interface sans lui apporter des améliorations de l’ « âge de l’information ». Pour lui, les métaphores ne doivent pas artificiellement limiter les possibilités du design.

Dans l’ouvrage, Beyond the Desktop Metaphor (sous la direction de Victor Kaptelinin et de Mary Czerwinski), un chapitre envisage la ligne de temps comme principe d’organisation alternatif à la métaphore du bureau : “Beyond Lifestreams: The Inevitable Demise of the Desktop Metaphor”.

Les timelines ont ansi l’avantage d’être plus proches des idiomes que des métaphores sur le plan de la formalisation. En schématisant, on peut les considérer comme des barres de défilement graduées, qui proposent un certain type d’organisation de l’information.

Voici quelques exemples marquants de lignes de temps :

Dipity, un service en ligne qui permet de construire facilement des lignes de temps. Un exemple de timeline des faits marquant d’internet. Même type d’expérience sociale avec l’application de CircaVie.

Dipity Timeline

CircaVie

Oakley, une marque de lunettes de ski, déroule un fil narratif intéressant à travers les journaux en ligne de 6 sportifs.

Oakley Diary Timeline

Dans une perspective pédagogique, la BBC a mis en ligne une histoire britannique interactive.

BBC British History Timeline

Dans un registre de discours plus institutionel, Epson met en scène son histoire de l’innovation et General Electric propose une expérience similaire. Les producteurs de laine australien communiquent, eux, sur une histoire “spatialisée”.

Espson Innovation Timeline

General Electric Timeline

Australian Merino Wool Timeline

Dans la tradition du design d’information, le New York Times a retracé la vie de Benazir Bhutto dans une “infographie interactive”.

Benazir Bhutto Timeline New York Times

Un reportage interactif sur la chasse à la baleine, The Whale Hunt.

Whale Hunt Timeline

Whale Hunt Timeline

Le musée d’art moderne d’Istanbul a envisagé le calendrier de ses expositions sur un mode linéaire.

Istanbul Modern Museum

_Commentaires

1 Trackback

5 Comments

  1. Gilles Satgé a publié ce commentaire le 30 juin 08

    Très beau florilège.

    On remarque que tous les exemples à l’exception du premier sont en flash.

    Le premier (http://www.dipity.com/user/tatercakes/timeline/Internet_Memes/embed_tl?fs=1 ) lui est en Ajax.

    C’est un peu moins fluide que le flash, mais, je ne sais trop dire pourquoi, je préfère la qualité de l’interaction en Ajax .

  2. Olivier alias ze kat a publié ce commentaire le 30 juin 08

    Question: est-ce que une ligne de temps “horizontale” est une manière naturelle et conviviale d’explorer du contenu dans le contexte d’un navigateur Web ?

    J’en doute…

  3. Pascal a publié ce commentaire le 30 juin 08

    joli article! j’ajouterais Plurk
    http://www.plurk.com/
    un Twitter-like sur ce type de paradigme de lignes de temps, bien que j’estime qu’il faudrait inverser le sens du site, selon moi le future se trouve à droite, le passé à gauche, plus logique…

  4. laurent frobert a publié ce commentaire le 03 juil 08

    à signaler une bibliothèque Javascript pour faire des timeline très facilement : http://simile.mit.edu/timeline/

  5. nodesign a publié ce commentaire le 03 juil 08

    Ligne de temps est une traduction francaise de l’anglais “time line”.
    En français, on parle plutôt de chronologie. Elles sont utilisé de manière graphique depuis l’apparition de l’image didactique dans les livres (encyclopédie, manuel scolaire, livre d’histoire naturelle).
    En plus d’être structuré par le temps, celle ci peuvent être multi thématique. C’est à dire proposer différents critères en ordonné qui permettent de faire une representation temps/theme dont les “trous” , les absences sont aussi parlant que les Unité d’information (vue synoptique). Des cd-roms comme Le louvre ont crée le modèle réfèrent interactif école de peinture/période. L’aviation a intégré des suites contextuelle thématiques chronologiques (liens logiques entre les unités d’informations thématiques), c’est à dire naviguer à l’interieur de la chronologie par contenu indépendamment du temps. L’aviation proposait également une chronologique Aviation/performamance qui montre la courbe d’évolution de développement de l’aviation pionnier, performance, maturité (courbe epistemologique) Chaque unité donnait accès à une vue de profil du modèle d’avion. La Resistance proposait une chronologie sonore de toute la seconde guerre mondiale avec des documents sonores.

    Director, Director+flash ont permis de s’amuser et d’inventer les interfaces dite riche aujourd’hui.

    Bravo Benoit pour ce blog, très americanophile

Publier un commentaire

Les commentaires de ce blog sont modérés a priori. Leur publication peut prendre quelques heures.

Votre e-mail ne sera pas publié. Les champs obligatoires sont signalés par *

*
*