Concevoir l'interaction
pour la navigation
dans des collections
de contenu media
(par similarité)
Présentation publique de thèse, 17 février 2015    





Christian Frisson
Institut numediart, Université de Mons, Belgique Jury: Thierry Dutoit, Stéphane Dupont, Xavier Siebert,
Jean Vanderdonckt, Marcelo Wanderley, Jef Wijsen
(design visuel par Charles-Alexandre Delestage et Willy Yvart)

Contexte

Organiser des objets

Dans un garage...


photo par Christian Frisson

Contexte

Organiser l'information

Paul Otlet, le Mundaneum à Mons


image par Marc Wathieu

Contexte

Organiser des sons

Dans un espace de travail pour le sound design


studios de post-production Dame Blanche à Bruxelles, photo par Christian Frisson

Le navigateur de sons couvre 1/2 de l'espace numérique.

Contexte

Organiser des sons

Une longue liste à faire défiler et à examiner...


capture de l'écran du dessus: AVID/Digidesign Pro Tools Workspace

Une question de cette thèse: comment faciliter cette tâche?

Contexte

Questions et pistes de recherche

du livre Designing for Interaction par Dan Saffer, New Riders Pr., 2007

Comment aider les sound designers à trouver des sons?

  • En combinant des techniques: interaction (IHM) + organisation (MIR)
  • En pensant au-delà du type de media: de l'audio aux visuels
  • En entreprenant des évaluations avec des utilisateurs

Menu

Contexte

Etat de l'art

Méthode

Prototypes

Expérimentations

Etat de l'art

Etat de l'art

Navigation dans du contenu media

Quel navigateur de fichiers/media utiliser?

studios de post-production Dame Blanche à Bruxelles, photo par Christian Frisson

Etat de l'art

Explorateurs de fichiers

(IHM) tendances: grilles, listes, présentation visuelle sérielle rapide


vues du Finder dans Apple OSX : icônes, liste, colonnes, CoverFlow

(MIR) pas d'organisation basée sur le contenu

Etat de l'art

Explorateurs de sons (recherche)

(IHM) tendance: nuages de points = (scatter)plots

CataRT
CataRT, SonicBrowser, SoundTorch

(MIR) parfois avec organisation basée sur le contenu

Etat de l'art

Explorateurs de sons (commerciaux)

(IHM) tendances: listes et grilles


Digital/Media Asset Managers: AudioFinder, SoundFisher, SoundMiner

(MIR) rarement avec organisation basée sur le contenu

Etat de l'art

Explorateurs "big media/data"

(IHM) tendance: starfield/galaxie et visualisation d'information


De FilmFinder à SpotFire

((M)IR) plus pour la "science des données" que les arts creatifs!

Etat de l'art

Explorateurs de video

(IHM) tendance: grilles (de vignettes) puis scatterplots


ITEC Video Explorer, MediaMill Fork Browser, Panopticon

(MIR) fréquemment avec organisation basée sur le contenu

Note: plus de campagnes d'évaluation que pour le son.

(TrecVID, VideOlympics, VideoBrowserShowcase)

Etat de l'art

Navigateurs de media comparés


par type de media, techniques IHM et MIR, évaluations d'utilisabilité...

Méthode

Méthode

Organisation (MIR)

Interaction (IHM)

Méthode

Organisation (MIR)

Graphe d'organisation de contenu par similarité

Méthode

Organisation (MIR)

Extraction de caractéristiques


(droite) Ulric Colette, Genetic Portraits (2011)

Méthode

Organisation (MIR)

Segmentation


(droite) Die Kaffeemühle, Georg Reil and Kathy Scheuring, 2010

Méthode

Organisation (MIR)

Génération de résumés


(droite) ITEC Video Explorer par Klaus Schoeffmann

Méthode

Organisation (MIR)

Réduction de dimension


(droite) Escher, Relativity (1953)

Méthode

Organisation (MIR)

Positionnement


(droite) La Médiathèque ASBL / PointCulture, Archipel (2011)

Méthode

Organisation (MIR)

Rendu, affichage


(droite) Scott Draves, Flame #191 (1993)

Méthode

Interaction (IHM): infovis

Variables visuelles (fondations)


tiré de: Charles-Eric Dessart, Vivian Genaro Motti, and Jean Vanderdonckt,
Animated Transitions between User Interface Views, Proc ACM AVI 2012

originellement par: Jock Mckinlay, Automatic design of graphical presentations, PhD, Stanford, 1986

Notre focus: évaluer un jeu réduit de variables

Méthode

Interaction (IHM): infovis

Variables visuelles (similarité)


Colin Ware, Visual thinking for design, Morgan Kaufmann, 2008

Notre focus: position et glyphes (couleur, forme)

Prototypes

Prototypes

Contexte

Projets numediart trimestriels

Cadencés pour produire des démos

Prototypes

Contexte

Projets numediart sur la navigation media

capturé de la vidéo numediart sur vimeo créée par Laura Colmenares Guerra

Types de media dans cette thèse: surtout audio, puis vidéo

Prototypes

Cadriciel (MIR)

MediaCycle


(gauche) graphe d'organisation de contenu similaire (droite) arborescence

Prototypes

Boîte à outils (IHM)

DeviceCycle pour PureData


Novint Falcon, Apple Magic Trackpad, 3Dconnexion Space Navigator, Contour Design Shuttle Pro2

disponible sur github.com/ChristianFrisson/DeviceCycle

Prototypes

Nos navigateurs de media comparés



2 exemples: inter-audio (gauche), intra-video (droite) presentés à ACM TEI 2014

Expérimentations

Expérimentations

Intra-video

Inter-audio

Expérimentations

Intra-video

Inter-audio

Expérimentations

Méthode (générique)

Evaluation par recherche de cibles connues


ambiance au Video Browser Showdown 2013

Expérimentations

Intra-video

Inter-audio

Expérimentations

Question de recherche (inter-audio)

Pour présenter sur une vue 2D des résultats de requête
par mot-clef dans une collection de sons, une carte organisée
par similarité de contenu est-elle plus efficace
qu'une grille ordonnée par nom de fichier?

ou
?

Expérimentations

Jeu de données (inter-audio)

Collection de sons One Laptop Per Child (Creative Commons)

(gauche) mots-clefs extraits des noms de fichiers, vus avec Word Cloud Generator de Jason Davies

Contient des bruitages.
Filtrabilité par mots-clefs des noms de fichiers.
Jeu de données "ouvert", vers la réplicabilité expérimentale.

Expérimentations

Appareillage (inter-audio)

Survol audio (touchpad), buzzer de cible (space navigator)


photos par Charles-Alexandre Delestage (gauche) et Willy Yvart (droite)

Données récoltées: temps, chemin du pointeur, actions.

Expérimentations

Intra-video

Inter-audio

Hypothèses

Système

Protocole

Résultats

Expérimentations

Hypothèses 1 (inter-audio)

Faits issus de recherches antérieures:

Pas de comparaison entre des vues d'organisation de sons basée sur leur contenu vs une grille ordonnée par nom de fichier.

Solution à évaluer:

Comparer les 2 agencements, évaluer l'effet du positionnement.

Expérimentations

Système 1-4 (inter-audio)

Réduction de dimension

t-SNE (Student t-distributed statistical neighbors embedding)


(droite) t-SNE sur la collection d'images COIL dans Divvy

(MIR) voisinages de similarité assignée à la position (IHM)

Expérimentations

Protocole 1 (inter-audio)

Grille vs galaxie

Vues comparées: grille vs galaxie.

Expérimentations

Résultats 1 (inter-audio)

Quantitatifs


u-tests de Mann-Whitney (grille > galaxie) pour les temps à retrouver la cible:
p=0.66 Z=-0.43 Mgrille=30.72 Mgalaxie=32.03

La grille est plus efficace (pas significativement) que la galaxie.

Expérimentations

Hypothèses 2 (inter-audio)

Faits issus de l'expérience précédente:

Assigner la similarité à une variable visuelle
(position) n'était pas efficace.

Solution à évaluer:

Assigner la similarité à plus de variables visuelles
en combinant positions et glyphes.

Expérimentations

Système 2-4 (inter-audio)

Caractéristique audio (dans YAAFE): l'acuité acoustique

(droite) par Thomas Grill, Perceptually Informed Organisation of Textural Sounds,
PhD, Univ. of Music and Performing Arts Graz, Austria, 2012

(MIR) Acuité acoustique assignée à luminosité/contour (IHM)

Expérimentations

Protocole 2 (inter-audio)

Grille vs nuage de glyphes

Vues comparées: grille vs nuage.

Expérimentations

Résultats 2 (inter-audio)

Quantitatifs


u-tests de Mann-Whitney (grille > nuage) pour les temps à retrouver la cible:
p=0.04 Z=-1.78 Mgrille=33.94 Mnuage=40.21

Grille plus efficace (quasi-significativement) que nuage.

Expérimentations

Résultats 2 (inter-audio)

Qualitatifs

Les testeurs préfèrent le nuage que la grille.

Expérimentations

Hypothèses 3 (inter-audio)

Faits issus de l'expérience précédente:

Assigner la similarité à plusieurs variables visuelles (position+couleur+forme) n'était pas efficace.

Solution à évaluer:

Recruter des testeurs plus proches des utilisateurs cibles (sound designers): des étudiants en communication audiovisuelle.

Expérimentations

Protocole 3 (inter-audio)

Etudiants "experts" (même système)

Vues comparées: grille vs nuage.

Expérimentations

Résultats 3 (inter-audio)

Quantitatifs


t-tests de Student non-appariés (grille > nuage) pour les temps à retrouver la cible:
p=0.02 t=-2.04 Mgrille=50.18 Mnuage=56.29

Grille plus efficace (quasi significativement) que nuage.

Expérimentations

Résultats 3 (inter-audio)

Qualitatifs

Les testeurs préfèrent le nuage que la grille.

Expérimentations

Résultats 1-3 (inter-audio)

Qualitatifs


Les 10 éxécutions les plus efficaces par tâche.

Les utilisateurs ont une recherche plus "dirigée" avec la grille.
(barre de progression 2D, direction du parcours)

Expérimentations

Hypothèses 4 (inter-audio)

Faits issus de l'expérience précédente:

Assigner la similarité à plusieurs variables visuelles (position+couleur+forme) n'était pas efficace,
même pour des "experts"
.

Solution à évaluer:

Combiner les avantages de la grille ("recherche dirigée")
avec ceux du nuage (voisinages de similarité).

Expérimentations

Système 4 (inter-audio)

La vue metro: nuage grillagé par une grille de proximité

Différentes vues sur une même collection OLPC filtrée par le mot "water"
suivant: Wojciech Basalaj, Proximity visualisation of abstract data, PhD, Univ. Cambridge, 2001

Expérimentations

Système 4 (inter-audio)

La vue metro: voisins les plus proches visualisés

Vue metro sur une collection OLPC filtrée par le mot "water"
avec (droite) / sans (gauche) liens de premiers voisins

Expérimentations

Système 4 (inter-audio)

La vue metro: taille optimale préservant les voisins directs

Proportion de voisins directs vs tailles de grille de proximité (77 sons OLPC water)

tailles de grille:
de la taille de la collection (gauche)
à sa racine carrée supérieure (droite)

voisins:
(bleu) horizontaux, (vert) verticaux, (rouge) diagonaux

lignes horizontales:
voisins pour une grille ordonnée par nom de fichier

Les barres doivent dépasser les lignes horizontales.

Expérimentations

Protocole 4 (inter-audio)

La vue metro

Vues comparées: grille vs album vs metro.

Expérimentations

Résultats 4 (inter-audio)

Quantitatifs


Test de Kruskal-Wallis de rang: chi-square=5.26 avec p=0.07.
Comparaisons multiples de Tukey des temps à retrouver la cible à 95% (>: plus efficace que):
p(metro>grille)=0.01 - p(metro>album)=0.34 - p(album>grille)=0.26

La vue metro est significativement plus efficace que la grille!

Expérimentations

Résultats 4 (inter-audio)

Qualitatifs

Les testeurs préfèrent metro qu'album, puis grille.

Expérimentations

Résumé (inter-audio)

Résultats prometteurs pour la vue metro!

Contributions

Contributions

Résumé

Etat de l'art'

53 navigateurs media comparés

Designs

Cadriciel MediaCycle (MIR+IHM)

Boîte à outils DeviceCycle (IHM)

10 navigateurs media prototypés

Expérimentations

4 inter-audio: la vue metro




Contributions

Publications

Conférences: 13 (premier auteur), 5 (co-auteur)

Journal: 1 (co-auteur)

Contributions

Un manuscript

Travaux futurs

Travaux futurs

MIR


Descripteurs dédiés aux bruitages

Essayer Essentia (UPF-MTG)

Réduction de dimension

Réduire les erreurs de projection

Optimisation de la grille de proximité

Comparer avec d'autres méthodes:
SAT-NeRV (dessus), SelfSortMap (dessous)

Travaux futurs

HCI

Visualiser la similarité en listes 1D

Pour ordonner des vues type classeurs

Combiner mots-clefs et similarité

Pour couvrir l'ensemble du processus de recherche

Interagir par le geste

Pour "ressentir" le contenu media (photo: inFORM)

Travaux futurs

MIR+IHM

Un "vrai" navigateur de sons pour les sound designers!


Combinant la plupart des travaux futurs cités.

Merci!

Merci!

Remerciements

Jury

Collègues

Chercheurs

Opensource

Créatifs

Amis

Famille

Merci!

Une copie imprimée de cette thèse?

Lisez moi d'abord (en ligne):


Demandez-moi un exemplaire pour la seconde session d'impression!

Discussion

Méthode

Méthode

Interaction (IHM): infoviz

"La visualisation d'information n'a pas encore fait ses preuves pour les interfaces de fouille."

Marti A. Hearst, Search User Interfaces, Cambridge Univ Press, 2009

Notre focus: la visualisation d'information

Méthode

Interaction (IHM): fouille

Recommandation de conception 12:

On défile rarement dans les résultats de fouille, l'information "importante" doit être localisée sur la première page.

Max L. Wilson, Search User Interface Design, Morgan & Claypool, 2012

Notre choix: ni défilement, ni panoramique, ni zoom

Expérimentations

Intra-video

Expérimentations

Protocole (intra-video)

6 équipes, 10 tâches avec experts et 8 avec novices

Cible de 10s à trouver dans 1 parmi 10 vidéos d'1h


Serveur du Video Browser Showdown 2013

Expérimentations

Système (intra-video)

VideoCycle édition VBS 2013

capture d'écran de VideoCycle édition VBS 2013

Sans similarité basée sur le content! (MIR)
Purement par présentation sérielle visuelle rapide(IHM)

Expérimentations

Résultats (intra-video)

Soumissions moyennes par tâche

graphique par Schoeffmann et al. IJMIR 2014

Expérimentations

Résultats (intra-video)

Temps à retrouver les cibles

graphique par Schoeffmann et al. IJMIR 2014

Expérimentations

Inter-audio

Expérimentations

Système 4 (inter-audio)

La vue metro: grillager le nuage par une grille de proximité

Recherche en spirale de la cellule idéal d'allocation.


méthodes: vide / échange / pare-choc

point: allocation idéale (noir) et réelle (blanc)
couleur de cellule: occupée (gris) / disponible (blanc)
flèche: déplacement d'allocation
par Wojciech Basalaj, Proximity visualisation of abstract data, PhD, Univ. Cambridge, 2001

Nous avons utilisé la méthode vide.


Expérimentations

Système 4 (inter-audio)

La vue metro: préservation des voisins directs

différentes vues d'une même collection: album (gauche), nuage (milieu), metro (droite)
avec (bas) / sans (haut) liens de premier voisin

Expérimentations

Système 4 (inter-audio)

La vue metro: taille optimale de grille

Proportion de voisins directs vs tailles de grille de proximité sur des collections OLPC filtrées


mot-clef (sons): (gauche-droite) toy (46), scrape (64), water (77), spring (93), hit (129), metal (147)
tailles de grille: de la taille de la collection (gauche) à sa racine carrée supérieure (droite)
voisins: (bleu) horizontaux, (vert) verticaux, (rouge) diagonaux
lignes horizontales: voisins pour une grille ordonnée par nom de fichier

Expérimentations

Système 4 (inter-audio)

La vue metro: compacité et préservation

Proportion de voisins directs vs tailles de grille de proximité (77 sons OLPC water)
tailles de grille: de la taille de la collection (gauche) à sa racine carrée supérieure (droite)
voisins: (bleu) horizontaux, (vert) verticaux, (rouge) diagonaux
lignes horizontales: voisins pour une grille ordonnée par nom de fichier

Expérimentations

Système 4 (inter-audio)

La vue metro: compacité et préservation

Proportion de voisins directs vs tailles de grille de proximité (77 sons OLPC water)


tailles de grille: de la taille de la collection (gauche) à sa racine carrée supérieure (droite)
voisins: (bleu) horizontaux, (vert) verticaux, (rouge) diagonaux
lignes horizontales: voisins pour une grille ordonnée par nom de fichier

Expérimentations

Système 4 (inter-audio)

La vue metro: quoi de neuf?

Notre méthode d'optimisation préservant les voisins directs.

Jamais appliquée sur des navigateurs de sons.

publication carrefour: Kerry Rodden, Wojciech Basalaj, David Sinclair, and Kenneth Wood, Does organisation by similarity assist image browsing? ACM CHI 2001, DOI=10.1145/365024.365097

Erratum: PhotoMesa n'utilise pas de grille de proximité!

Benjamin B. Bederson, PhotoMesa: a zoomable image navigateur using quantum treemaps and bubblemaps,ACM UIST 2001, DOI: 10.1145/502348.502359