Drag

Quand on fait glisser un élément, les autres s’écartent et se replacent dans le nouvel ordre.

Ajoute une « Drag-to-Reorder List » (aussi appelée sortable list) sur [où].
L’élément déplacé doit suivre directement le pointeur et se soulever légèrement, pendant que les autres s’écartent en douceur ; au relâchement, il doit se caler rapidement dans l’emplacement le plus proche.
Prends en charge le tactile comme la souris, et propose un moyen de déplacer les éléments au clavier, avec la nouvelle position annoncée aux lecteurs d’écran.

Glisser une ligne de liste sur le côté révèle des boutons d’action comme supprimer ou archiver.

Ajoute une interaction « Swipe to Delete » (aussi appelée swipe actions ou swipe to reveal) sur [où].
Quand on fait glisser une ligne sur le côté, elle doit suivre directement le doigt pour découvrir derrière elle des boutons d’action comme archiver et supprimer, s’arrêter une fois qu’ils sont entièrement visibles, et au relâchement glisser en douceur à sa place, sans rebond.
Garde le défilement vertical fonctionnel pendant le glissement horizontal, et rends les mêmes actions accessibles au clavier et aux lecteurs d’écran sans glisser.

Tirer une liste vers le bas fait apparaître un indicateur de chargement et recharge le contenu au relâchement.

Ajoute une interaction tirer pour actualiser (Pull to Refresh) (aussi appelée swipe to refresh) sur [où].
Quand on tire la liste vers le bas depuis le haut, elle doit suivre le doigt avec un peu de résistance et révéler un indicateur de chargement qui tourne pendant la traction ; au relâchement, il continue de tourner pendant le rechargement, puis la liste remonte en douceur.
Ne la déclenche que lorsque la liste est déjà tout en haut, et propose aussi un bouton d’actualisation classique aux utilisateurs du clavier et des lecteurs d’écran.

Un séparateur déplaçable révèle une image d’un côté et une autre de l’autre.

Ajoute un comparateur avant/après (Before-After Slider), aussi appelé image comparison slider ou compare slider, sur [où].
Deux images sont superposées, et faire glisser un séparateur vertical dévoile davantage l’une et moins l’autre ; le séparateur suit directement le pointeur, sans retard.
Place le séparateur au milieu au départ, et fais-le fonctionner au toucher et avec les flèches du clavier.

Le libellé du placeholder remonte et rétrécit au-dessus du champ quand il a le focus ou est rempli.

Ajoute un label flottant (Floating Label) sur [où], aussi appelé float label ou animated placeholder.
Quand le champ a le focus ou contient une valeur, le libellé placé à l’intérieur doit glisser vers le haut et rétrécir jusqu’au bord supérieur du champ, de façon fluide et rapide, et ne redescendre que quand le champ est vide et sans focus.
Garde un vrai label associé à l’input, et fais en sorte que la hauteur du champ ne change pas pour que le formulaire ne bouge jamais.

Une icône de cœur se remplit de couleur et projette de petites particules ou pulse au clic.

Ajoute une animation « Like / Heart Burst » (aussi appelée heart animation ou favorite toggle) sur [où].
Au like, le cœur doit se remplir de couleur et rebondir avec élasticité pendant qu’un anneau et de petits points jaillissent vers l’extérieur puis s’estompent, le tout rapide et ludique ; en retirant le like, le cœur se vide simplement, sans effet.
Fais-en un vrai bouton bascule avec son état pressé, et ne joue l’éclat qu’à l’activation.

Maintenir un élément enfoncé un instant déclenche des actions supplémentaires ou un remplissage de progression.

Ajoute une interaction d’appui long (Long Press) (aussi appelée press and hold ou touch and hold) sur [où].
Pendant l’appui, l’élément doit s’enfoncer légèrement tandis qu’un remplissage de progression le parcourt à rythme régulier ; une fois plein, il revient avec un petit ressort et ouvre son menu, et relâcher trop tôt annule et réinitialise le remplissage.
Donne aux utilisateurs du clavier et des lecteurs d’écran un autre moyen d’accéder aux mêmes actions, et empêche l’appui de sélectionner du texte ou d’ouvrir le menu contextuel du navigateur.