web-dev-qa-db-fra.com

Comment indiquez-vous qu'un élément d'interface utilisateur permet de glisser sans utiliser un véritable curseur?

Je conçois une interface pour une application Android qui permettrait à l'utilisateur de contrôler la hauteur, le tempo, le volume, etc. d'une musique jouée en arrière-plan.

Voici ce que j'ai esquissé jusqu'à présent:
settings for pitch, tempo, and volume, each with +/- buttons on each side

J'ai évité d'utiliser des curseurs dans le but de rendre l'interface utilisateur moins encombrée. Cependant, je veux toujours que les utilisateurs puissent changer les valeurs des paramètres en glissant horizontalement sur l'un d'eux (en plus de pouvoir cliquer sur un bouton +/-).

Par exemple, pour augmenter le volume, vous placez un doigt sur 34% et vous glissez vers la droite.

Existe-t-il un moyen de s'assurer que l'utilisateur est au courant de cette possibilité "cachée"? Ou quelqu'un a-t-il vu quelque chose de similaire implémenté sur une application existante (iOS ou Android)?

7
Gautam

Au lieu d'un curseur, que diriez-vous d'un rouleau, mais cette fois orienté horizontalement?

horizontal rollers for selecting pitch, tempo, and volume

Vous pouvez également vous débarrasser du + et - et vous avez un contrôle à la fois fin et grossier des trois valeurs, peu d'encombrement et une interface visuelle qui serait évidente sur la façon de fonctionner.

En outre, comme le note @JOG, "dans certains cas, l'utilisateur ne pourra pas voir la valeur au milieu, car son doigt pourrait être sur le chemin" ... la conception du rouleau est supérieure à la conception du curseur dans la mesure où l'utilisateur peut contrôler la valeur en interagissant à n'importe quelle position horizontale.

15
Erics

C'est une interaction vraiment cool mais ce n'est pas standard. Glisser sur une ligne est le geste de suppression pour les notifications Android. Vous devez éduquer vos utilisateurs sur ce contrôle en les laissant tomber dessus accidentellement ou en créant une expérience de première utilisation pour afficher tous les Voir section Invitations dans Mobile Design Pattern Gallery pour l'inspiration.

De plus, le moyen le plus naturel pour que ce geste fonctionne est de permettre de glisser sur toute la ligne sans point de départ désigné. En d'autres termes, tout mouvement de gauche à droite/de droite à gauche sur une rangée devrait signifier respectivement une diminution/augmentation tant qu'il y a une certaine pression et direction pour éviter des changements accidentels.

5
dnbrv

Je suis d'accord avec les autres. Pour toute interaction inhabituelle, vous devez éduquer l'utilisateur. Voici un exemple de Google Voice pour iOS sur ce qui devient rapidement une interaction iOS attendue pour actualiser une liste de résultats:

enter image description here

Dans cet exemple, le "Conseil: tirer pour actualiser" disparaît une fois que l'utilisateur l'a fait une fois. Vous pourriez peut-être faire quelque chose comme ça avec le texte "Astuce: faites glisser les éléments pour modifier leurs valeurs".

Mais attention à ne pas laisser cette interaction glisser masquer la valeur numérique.

2
Matthew Moore

Je vais vous donner une réponse ennuyeuse et c'est qu'avec le signe - et le signe + et les chiffres, je pense que ui serait encore encombré.

  • Pourquoi ne pas utiliser un curseur qui affiche les chiffres comme info-bulle lorsque vous appuyez dessus? Ou pour économiser plus d'espace, utilisez un bouton?

    Ce que vous essayez de mettre en œuvre n'est pas standard et même si vous montrez un introscreen, les gens le rejetteront. De plus, les gens aiment vraiment les interfaces utilisateur qu'ils ont vues et avec lesquelles ils ont interagi auparavant, car ils n'ont pas besoin de trop réfléchir et d'apprendre à utiliser uniquement votre modèle de conception.

1
Tony Bolero

Voici quelques réflexions:

  • @dnbrv a raison, vous devez éduquer vos utilisateurs.
  • Si le glissement est pour la précision, veuillez noter que l'utilisateur dans certains cas ne pourra pas voir la valeur au milieu, car son doigt pourrait être sur le chemin.
  • Si vous avez choisi la pièce maîtresse comme point de départ ou non, vous pouvez laisser cela être le premier endroit à partir duquel glisser.
  • Vous pouvez laisser la pièce maîtresse bouger légèrement lorsque vous appuyez sur les boutons +/-. De cette façon, les utilisateurs apprennent que la pièce maîtresse se déplaçant vers la droite et en appuyant sur + est la même chose.
  • Une autre façon de les éduquer est lors de l'ouverture de la page, vous pouvez animer le comportement encouragé. Disons qu'en ouvrant une page, le volume commence à 50% et se déplace vers la gauche jusqu'à atteindre 37%. De la même manière, la hauteur commence en C et se déplace vers la droite jusqu'à ce qu'elle atteigne C #. L'animation entière ne doit pas durer plus d'une seconde ou deux.
0
JOG

Utilisez un motif graphique "grossier" sur une partie de la chose qui glisse.

La possibilité est que, comme avec un objet réel, la chose s'agrippera et glissera avec votre doigt si vous glissez dessus.

(Windows l'a toujours utilisé dans le coin inférieur droit d'une fenêtre pour montrer qu'il peut être redimensionné)

0
PhillipW