web-dev-qa-db-fra.com

Puis-je utiliser l'interaction drag'n'drop dans un site Web mobile?

Je conçois actuellement un site Web mobile. Mon intention était d'utiliser des modèles d'interaction comme drag'n'drop pour certaines fonctionnalités interactives.

Par exemple. Je souhaite demander aux utilisateurs de trier 5 éléments par pertinence personnelle - les éléments sont organisés de gauche à droite. Il y aura plus d'éléments que cela sur la page et il pourra défiler.

J'ai aimé l'idée en premier lieu, mais maintenant je suis assez convaincu que cela ne fonctionnera pas car cela entraînerait des problèmes de défilement et @ # * jusqu'à l'expérience.

Maintenant, ma question était de savoir s'il y avait un moyen technique de le faire fonctionner - par exemple limiter le drag'n'drop à une région. OR dois-je éviter les interactions comme le glisser-déposer et le réduire pour appuyer, faire défiler et glisser.

4
John Sample

J'utiliserais un "hotspot" sur les éléments à trier, afin que l'utilisateur puisse à la fois faire défiler la page et trier les éléments.

Si l'utilisateur initie un balayage depuis le hotspot, il fait glisser et déposer l'élément et la page ne défile pas (sauf s'il doit glisser au-delà du bord de l'écran). Si l'utilisateur lance un balayage depuis un autre endroit, la page défilera et les éléments ne bougeront pas.

J'ai une application téléphonique qui fait exactement cela (pour une liste verticale) et cela fonctionne très bien.

simple list with sorting hotspot

3
Fractional

Oui, si nous ne planifions pas correctement l'organisation du contenu, ce sera une mauvaise expérience pour l'utilisateur d'avoir cette chose triable (glisser-déposer) dans un contenu défilant. Encore une fois, sur une note positive, ce glisser-déposer est l'une des fonctionnalités reconnaissables sur mobile pour les utilisateurs, où ils voient et utilisent cette fonctionnalité dans quelques applications qu'ils utiliseront dans la vie quotidienne (EG: Notes application sur iPhone)

Option1:
Cette option de glisser-déposer fonctionnera mieux si la page est de hauteur fixe. Peut être en train de réexaminer l'organisation du contenu de la page, afin que la page reste à une hauteur fixe et que l'utilisateur puisse utiliser cette option triable (glisser-déposer) sans affecter l'expérience entière.

Option2:
S'il n'y a aucune chance de réorganiser le contenu comme indiqué ici dans (Option: 1), vous pouvez toujours lister ces 5 éléments dans la longue page déroulante, et vous pouvez donner un bouton "Trier mes éléments" près à ces éléments. En cliquant sur le bouton, nous pouvons afficher cette option triable (glisser-déposer) dans une superposition, qui devrait être spécifique pour trier ces éléments.

Comme ces éléments sont affichés en superposition, l'utilisateur peut facilement trier ces éléments sans interagir avec la longue page déroulante (qui est en arrière-plan) car elle sera verrouillée.

Option3:
Cette option peut ne pas être conviviale car elle nécessite plus de clics et plus d'erreurs. C'est l'option la plus défavorable, j'essaie juste de lancer une idée.
Si Option1 & Option2 ne fonctionne pas, nous pouvons toujours afficher ces 5 éléments dans la longue page déroulante, et pouvons donner un bouton "Trier les éléments" près de ces éléments. Une fois qu'ils ont cliqué sur le bouton, nous pouvons ensuite afficher le (compteur/liste déroulante) avec les chiffres 1-5 pour chaque article. Ainsi, les utilisateurs peuvent sélectionner un numéro unique dans chacune des 5 listes déroulantes, puis cliquer sur le bouton pour les trier.

0
user36854