Curseur de prix adapté aux mobiles
Je veux concevoir un filtre de plage pour une plate-forme de commerce électronique qui a une excellente UX pour les utilisateurs mobiles.
Voici l'interaction de base que je pourrais faire
1) Où dois-je placer la plage actuelle (lorsque le curseur ne bouge pas)?
- Option 1: statique au centre. Cela conduit à des espaces blancs inutiles
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
- Option 2: au-dessus de chacune des poignées. Cela peut être couvert par le pouce de l'utilisateur.
Si vous souhaitez utiliser les curseurs indiqués dans votre question, je vous suggère d'utiliser l'option 2
De plus, je suppose que cela fonctionnera parfaitement sur les mobiles car les curseurs de piste seraient un peu difficiles pour la précision avec les doigts.
Cette page a plus d'options et le code aussi http://www.jqueryrain.com/?ot4e1H_o
Option 2, car dans ce cas, la valeur est clairement mappée à la poignée.
Et je ne pense pas que vous ayez à vous soucier de la valeur couverte par le doigt ou le pouce. Dans le scénario de définition de la plage, l'interaction est totalement concentrée sur cette tâche, ce qui signifie que vous pouvez laisser la valeur occuper un espace assez généreux, ce qui signifie qu'elle peut être affichée au-dessus du doigt. Une fois que l'utilisateur a relâché la poignée, la valeur peut rétrécir pour s'adapter à d'autres éléments de la mise en page.