Download - Le design de l’information en ligne
![Page 1: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/1.jpg)
Le design de l’information en ligneNouvelles pratiques multimédia, traitements innovants
![Page 2: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/2.jpg)
Enjeux
I.
![Page 3: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/3.jpg)
A. Surcharge informationnelle« Information overload », terme introduit dans les
années 1950 par Alvin TofflerUn accroissement rapide de l’information nouvelleLa facilité de la duplication par les moyens numériquesUn nombre croissant de canaux de diffusionUn large historique d’information disponibleNous entrons dans l’ère de l’économie de l’attentionComment naviguer dans la sur-information ?
![Page 4: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/4.jpg)
Orange.fr
![Page 5: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/5.jpg)
B. La fragmentation des pratiques de lecture
le numérique démultiplie les pratiques le basculement vers la lecture en ligne un éclatement des supports (mobiles, tablettes etc.)
![Page 6: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/6.jpg)
C. La culture de l’algorithme Quand les algorithmes définissent les choix éditoriaux Guardian Zeitgeist compile les articles les + lus
![Page 7: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/7.jpg)
D. Quels modes de consultation de l’information à l’ère numérique ?
lecture et serendipité / non-linéarité lecture « zapping » vs lecture « immersive » lecture « sélective » lecture « mobile » / courte lecture participative, co-énonciation
![Page 8: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/8.jpg)
Publicité et presse en ligne Carte d’occultation après 1 min 30 s (étude Altics oct 2009)
![Page 9: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/9.jpg)
Publicité et presse en ligne Banner blindness – carte de chaleur après 1 min 30 s (étude Altics oct 2009)
![Page 10: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/10.jpg)
Les informations de 1er plan sur Le Monde.fr
![Page 11: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/11.jpg)
Une perspective évolutionniste
« un nouveau médium ne s’ajoute jamais aux média antérieurs et ne les laisse jamais intacts. Il les bouscule sans cesse
et leur trouve de nouvelles formes et de nouveaux emplois.»
Marshall McLuhan, 1964
II.
![Page 12: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/12.jpg)
A. La mort du portail d’information Le portail web, genre utilitaire et éditorial, s’efface peu à
peu en tant que mode d’accès unifié aux contenus Éclipsé par les agrégateurs et pages personnaliséesUn design d’interface caractéristique : forte densité
éditoriale, structure en U renversé, modules
![Page 13: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/13.jpg)
Yahoo!
![Page 14: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/14.jpg)
B. L’avènement des modèles verticaux d’organisation de l’information
la presse en ligne adopte progressivement le format vertical et antéchronologique du blog
Un modèle à remettre en cause
![Page 15: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/15.jpg)
+ 8 000 px
![Page 16: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/16.jpg)
![Page 17: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/17.jpg)
Un mode d’organisation hérité du papier
![Page 18: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/18.jpg)
Un mode d’organisation hérité du papier
![Page 19: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/19.jpg)
Un mode d’organisation intermédiaire
![Page 20: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/20.jpg)
Un mode d’organisation proche du blog
![Page 21: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/21.jpg)
Des modes d’organisation optimisés
![Page 22: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/22.jpg)
Des modes d’organisation optimisés
![Page 23: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/23.jpg)
C. La « mobilisation » des usages Le WAP n&b l’iPhone
NOUVEAUTESMA SELECTIONSELECTION ITINERIS COMMUNAUTESDIVERTISSEMENTSSHOPPINGPROXIMITEMON ESPACE CLIENTRECHERCHERPROFILPour faire de cette page votre page par défaut, cliquez ici.
Paris
Le WAP 2.0 256 couleurs
Smartphone
![Page 24: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/24.jpg)
C. La « mobilisation » des usages ... c’est aussi cela aujourd’hui : tablettes, livres
électroniques, consoles, MID, UMPC...
![Page 25: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/25.jpg)
D. Vers de nouveaux modes d’organisation de l’information
Gérer la densité informationnelle L’information « mosaïquée » Lectures horizontales
![Page 26: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/26.jpg)
Times Skimmer
![Page 27: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/27.jpg)
Toronto Star : choose the way you view the news
![Page 28: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/28.jpg)
Moco Loco
![Page 29: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/29.jpg)
Google News Timeline
![Page 30: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/30.jpg)
Google Fast Flip
![Page 31: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/31.jpg)
BBC 3D Explorer
![Page 32: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/32.jpg)
RSS Voyage
![Page 33: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/33.jpg)
D. Designer la « simplexité » de l’information en ligne
Vers la visualisation de l’information De nouveaux « idiomes » pour les interfaces
d’informationLe genre des « infographies interactives »
![Page 34: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/34.jpg)
Washington Post TimeSpace
![Page 35: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/35.jpg)
BBC News Globe
![Page 36: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/36.jpg)
Wall Street Journal : infographie interactive
![Page 37: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/37.jpg)
Culture Box
![Page 38: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/38.jpg)
Digg Lab
![Page 39: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/39.jpg)
MSN Spectra
![Page 40: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/40.jpg)
Et un grand classique : Newsmap
![Page 41: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/41.jpg)
Des formes hybridées
« L’hybridation ou la rencontre de deux média est
un moment de vérité et de découverte
qui engendre des formes nouvelles. »
Marshall McLuhan
III.
![Page 42: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/42.jpg)
C. Du point de trame au pixel les médias électroniques dominés par la référence à
l’imprimé (métaphore de la page écran)
![Page 43: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/43.jpg)
Libération un journal mis en abyme dans une interface mobile
![Page 44: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/44.jpg)
Application iPad du Monde
![Page 45: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/45.jpg)
Application iPad du Monde
![Page 46: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/46.jpg)
Éditions électroniques
![Page 47: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/47.jpg)
D. Vers des formes applicatives de l’information
Content as a softwareContent as a serviceApplications iPad/iPhone/widgets/RDA
![Page 48: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/48.jpg)
Times Reader
![Page 49: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/49.jpg)
Application iPad de NPR
![Page 50: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/50.jpg)
Application iPad d’Associated Press
![Page 51: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/51.jpg)
Nouvelles situations d’usage, nouvelles formes d'écritures
IV.
![Page 52: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/52.jpg)
A. Une écriture démultipliée multimédia, rich-media Webdocumentaires Le photojournalisme à l’ère d’internet
![Page 53: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/53.jpg)
FLYP, magazine multimédia & interactif
![Page 54: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/54.jpg)
NPR multimedia section
![Page 55: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/55.jpg)
Prison Valley
![Page 56: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/56.jpg)
Reportaje 360
![Page 57: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/57.jpg)
New York Times Lens blog
![Page 58: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/58.jpg)
B. L’écriture temps-réel de l’informationTwitter : une innovation ou une contribution à l’information
overload ? Pas uniquement Twitter mais aussi les multiples formes de
flux comme les « news rivers », la messagerie instantanée... Un nouveau paradigme pour la collaboration ?
![Page 59: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/59.jpg)
CNN NewsPulse
![Page 60: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/60.jpg)
BBC News Radar, nouveau mode d’entrée dans le contenu
![Page 61: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/61.jpg)
Wall Street Journal + Foursquare
![Page 62: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/62.jpg)
C. Database journalismune pratique née dans les années 1950 comme « journalisme
assisté par ordinateur » Internet en a redéfini le concept : rassembler les données, les
distribuer, les rendre navigables et interprétables « produire du sens avec des chiffres convertis en images »
(A. Joannes)une valeur ajoutée dans l’approfondissement le risque de l’esthétisme gratuit
![Page 63: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/63.jpg)
The Guardian – MP expenses
![Page 64: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/64.jpg)
Telegraph – UK General Election 2010
![Page 65: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/65.jpg)
D. Quand l’information devient jouableUn nouveau genre éditorial, les news gamesPermettre la prise en main ludique de l’information à travers
les codes du game playEncourager le sens critique des citoyens ? Une distanciation ?Allier pédagogie et information ?Construire de nouveaux scénarios de consultationUn prolongement gestuel, tactile de la lecture d’informationUn rôle important dans la satire politique
![Page 66: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/66.jpg)
MSNBC NewsBreaker
![Page 67: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/67.jpg)
CNN Challenge
![Page 68: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/68.jpg)
E. Vers l’information ambiante Calm computing, un concept inventé par Mark Weiser et
John Seely Brown (Xerox Parc)Une information qui se « dilue » dans l’environnementDes interfaces qui informent en permanence de façon
«diffuse» mais ne monopolisent pas l’attention
![Page 69: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/69.jpg)
Chumby
![Page 70: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/70.jpg)
Center Field
![Page 71: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/71.jpg)
Ambient Orb
![Page 72: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/72.jpg)
Pour conclure
![Page 73: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/73.jpg)
New York Times R&D Group
![Page 74: Le design de l’information en ligne](https://reader034.vdocuments.net/reader034/viewer/2022042715/55838e9bd8b42a8e0c8b5092/html5/thumbnails/74.jpg)
IDEO : 14 scenarios pour le futur