Glisser-déposer dans une application web

Glisser-déposer dans une application web

Mattia A. Fritz
TECFA, Université de Genève

Évolution des UI dans le temps

Linehcart de l'évolution de la qualité des interfaces graphiques

Les UI dans les applications web ont pu rattraper le rétard des logiciels grâce à l'évolution de HTML5, CSS et JavaScript.

Définition du glisser-déposer

Dans les interfaces graphiques, le glisser-déposer est un geste de pointage dans lequel l'utilisateur sélectionne un objet virtuel en le saisissant et en le faisant glisser vers un autre endroit ou sur un autre objet virtuel. En général, il peut être utilisé pour invoquer de nombreux types d'actions, ou créer divers types d'associations entre deux objets abstraits.

— Adapté de Wikipedia

Number Sorting Games

Application avec trois modalités interactives différentes, dont le glisser-déposer.

Technique répandue, mais...

Le glisser-déposer existe depuis plusieurs années, mais présente deux éléments critiques principaux :

Affordance et action exécutée
Surtout dans les pages web, le glisser-déposer doit être bien signalé (c.f. concept d'affordance) et ses effets indiqués aux utilisateurs, afin que le résultat de l'action soit perçu correctement.
Dextérité et motricité fine
L'action physique du glisser-déposer implique (1) la planification et (2) l'exécution. L'éxecution nécessite une certaine précision ou elle risque d'être interrompue (e.g. perte de contact avec l'objet).

Affordance et action exécutée

La fonction "glisser-déposer" n'est pas présente dans toutes les applications, bien qu'elle soit parfois une technique rapide et facile à apprendre. Cependant, il n'est pas toujours évident pour les utilisateurs qu'un objet puisse être glissé et déposé, ou quelle est la commande exécutée par le glisser-déposer, ce qui peut diminuer l'usabilité.

— Adapté de Wikipedia

Que peut-on glisser-déposer ?

Essayez de glisser-déposer les éléments de la slide.

Vous avez essayé de glisser le titre de la slide ?

Dextérité et motricité fine

La loi de Fitts prédit que le temps nécessaire pour déplacer rapidement un objet vers une zone cible est une fonction définie par le rapport entre la distance à la cible et la largeur de celle-ci. $$\text{ID} = \log_2 \Bigg(\frac{2D} {W}\Bigg)$$ ID = indice de difficulté | D = distance du centre de la cible | W = largeur de la cible

— Adapté de Wikipedia

Exemple avec petite cible

Glissez le robot dans le carré jaune à l'autre côté de l'écran.

Exemple avec grande cible

Glissez le robot dans le carré jaune à l'autre côté de l'écran.

Utilisations pédagogiques

Rélation item-conteneur
Déposer un item dans un conteneur avec une relation sémantique, par exemple les éléments d'une même catégorie.
Degré d'approximation spatiale ou temporelle
Placer un élément le plus proche possible dans une relation spatiale ou sur une timeline temporelle.
Correspondance visuo-spatiale physique ou conceptuelle
Le positionnement absolu et/ou relatif des éléments dans l'espace véhicule de l'information utile au niveau physique ou conceptuel.

Liste non exhaustive et utilisations non mutuellement exclusives.

Relation item-conteneur

Glissez les verbs en anglais dans le temps verbal.

drove

fly

talk

woke

stood

see

Present tense

Past tense

Degré d'approximation

Glissez les villes selon leur distance autoroutière de Genève.

0km

100km

200km

300km

400km

500km

Bern 0
Lausanne 0
Saint Gallen 0
Zürich 0

Correspondance visuo-spatiale

Disposition des joueurs par rapport à la glace, la rondelle, et aux coéquipiers/adversaires.

Pour aller plus loin

Les concepts abordés dans cette présentation sont traités de manière plus technique dans l'article jQuery UI sur EduTechWiki.

EduTechWiki est un wiki sur la technologie éducative hébergé est maintenu par TECFA, une unité de l'Université de Genève, depuis 2006.

Merci pour votre attention !

Mattia A. Fritz
TECFA, Université de Genève

Présentation créée avec Reveal.js.