web-dev-qa-db-fra.com

Curseur tactile avec deux curseurs - meilleure pratique

Je recherche une solution conviviale pour modifier deux valeurs par un seul curseur. enter image description here
J'ai un seuil supérieur et un seuil inférieur tandis que chaque valeur est représentée par un bouton sur le curseur. Comme je traite des écrans tactiles, chaque bouton a une région cliquable. Si les boutons sont proches les uns des autres, se chevauchant ainsi les régions, l'utilisateur sélectionnera toujours le bouton en couches sur le dessus. La seule façon de penser à résoudre ce problème serait de permettre à l'utilisateur de cliquer à nouveau puis de sélectionner l'autre bouton.
Supposons la situation suivante:
1) L'utilisateur déplace le bouton gauche près du bouton droit
2) L'utilisateur veut déplacer le bouton droit encore plus à droite mais il saisira celui de gauche car il était superposé par défaut.
3) L'utilisateur doit cliquer à nouveau sur la région pour sélectionner l'autre bouton
4) Après tout cela, l'utilisateur peut appuyer à nouveau et faire glisser. L'autre solution serait de commencer à faire glisser dès que le deuxième clic a été effectué.

Une autre solution serait de placer des boutons radio à proximité et de sélectionner le curseur.
Un autre problème est bien sûr le réglage fin des curseurs, donc je dois placer un bouton +/- quelque part. Je voudrais juste placer un jeu de +/- pas pour les deux, ce qui conduirait à avoir toujours un bouton actif.


Existe-t-il des lignes directrices concernant un tel problème?

touch-screensliders
6
blaster

Il y a trop de problèmes avec la superposition de deux éléments glissables différents sur le même contrôle. D'une part - si vous voulez que les deux valeurs soient les mêmes, il sera difficile de voir qu'il y a deux indicateurs, ou si vous souhaitez ensuite ajuster l'un d'entre eux, il est difficile de vous assurer que vous saisissez le bon élément.

S'il n'y a que deux points de glissement, alors pourquoi ne pas opter pour une approche au-dessus/en dessous? Cela permet de voir plus facilement quel indicateur est lequel et vous permet des ajustements plus fins.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

(Vous voudrez probablement aussi des champs de texte là-dedans, pour les personnes qui ne veulent pas/ne peuvent pas faire glisser des éléments. Mais c'est vraiment un point distinct)

24
JonW

J'ai résolu une exigence similaire en fournissant plusieurs curseurs et en les reliant, afin qu'ils "valident" les uns contre les autres (interface utilisateur pour configurer les changements - ce qui revient finalement à heures de début). Les images de droite indiquent les conditions aux limites (min et max, pour ainsi dire):

Shift 1: --|--------------------- 02:00        |-----------    ---------|--
Shift 2: ----------|------------- 10:00        -|----------    ----------|-
Shift 3: ------------------|----- 18:00        --|---------    -----------|

Comptez pour que cela soit applicable, il peut être nécessaire d'avoir une plage de valeurs discrète (dans mon cas, les changements peuvent commencer par incréments d'une demi-heure).

2
Astrogator

J'aime mieux la solution de JonW, mais une autre possibilité est qu'une fois que les deux pouces sont suffisamment proches, vous pouvez diviser par deux les régions cliquables de chaque pouce afin que la région cliquable du pouce gauche soit sa moitié gauche et que la région cliquable du pouce droit soit sa moitié droite. (Ou vous pouvez ajuster en continu les régions cliquables à mesure que la distance entre elles change; le but est de s'assurer qu'elles ne se chevauchent jamais.)

1
jamesdlin

Une autre alternative. Déplacez les points "actifs" sur vos pouces du milieu du pouce vers le côté droit du pouce gauche et la diapositive gauche du pouce droit similaire à ce que Android fait avec sa coupe de texte/fonctionnalité de copie.

Android-like slider

Cela a l'avantage que les deux pouces sont du même côté, ce qui réduit l'espace vertical nécessaire et permet de déplacer les deux pouces en même temps si vous le souhaitez et a toujours l'attribut de ne pas se chevaucher.

1
Bill Dagg

La solution de JonW est probablement la meilleure pour rendre les curseurs visiblement distincts pour l'utilisateur, et si je l'implémentais, c'est probablement ce que j'irais avec.

Cependant, si vous n'utilisez pas ci-dessus/ci-dessous et utilisez la configuration d'origine, une autre solution possible consiste à vérifier si les régions se chevauchent et, dans l'affirmative, sélectionnez le curseur qui a l'origine la plus proche du point d'entrée.

on_input()
{
    if(MinSlider.Contains(inputLocation) AND MaxSlider.Contains(inputLocation))
    {
        minLength = DistanceBetween(MinSlider.Origin, inputLocation)
        maxLength = DistanceBetween(MaxSlider.Origin, inputLocation)
        if(minLength <= maxLength)
        {
            //Select Minimum Slider
        }else{
            //Select Maximum Slider
        }
    }else{
        //Regular selection based on region
    }
}
0
JonBee