web-dev-qa-db-fra.com

Une autre façon de faire la multi-sélection sur mobile autre que les cases à cocher?

J'ai vu une question similaire posée mais ce n'était pas exactement la même chose. Sur les cases à cocher mobiles, je me sens plutôt compliqué et pour être honnête dans ma recherche sur le Web, je n'ai pas vu de cases à cocher couramment utilisées sur les sites mobiles. J'ai des filtres qui filtrent une page de liste de nouvelles. Actuellement, la version de bureau utilise des cases à cocher pour affiner les résultats. Qu'est-ce qui est le plus couramment utilisé sur mobile pour les options de sélection multiple autres que les cases à cocher?

8
Reloaded

Une option consiste à utiliser des boutons pleine largeur combinés avec des cases à cocher ou des boutons qui peuvent être activés.

Vous pouvez voir les deux styles tilisé par jQuery Mobile :

jQuery Mobile checkboxes

jQuery Mobile toggle button set

Sinon, faites une ligne entière du tableau ou un élément de liste sélectionnable comme suggéré par Henrik Ekblom.

Et selon directives Android :

En règle générale, vous devez présenter chaque option de case à cocher dans une liste verticale.

5
jfrej

Le problème ici est accessibilité. Les cases à cocher indiquent clairement que la sélection de cet élément le sélectionnera simplement et n'effectuera aucune autre action.

Si vous n'avez pas de cases à cocher du tout, vous serez coincé avec des moyens plus pauvres et peut-être des utilisateurs confus. De plus, vous devrez marquer les éléments sélectionnés d'une manière ou d'une autre, ce qui serait généralement une case à cocher - de sorte que vous ne gagnerez pas beaucoup.


Alternativement, vous pouvez déplacer la possibilité de sélectionner derrière un autre bouton d'action. Cela se fait généralement dans les applications iOS, où sélectionnez un bouton (généralement un "modifier"), qui révèle ensuite les cases à cocher à sélectionner. Seulement maintenant, sélectionner n'importe où sur l'article vérifie l'article.

enter image description here


Le problème devrait être davantage sur la façon dont vous pouvez rendre les cases à cocher moins "délicates" et non sur la façon dont vous pouvez les éviter. L'une des meilleures façons est de rendre la zone active de la case à cocher beaucoup plus grande que la zone visuelle. Vous pouvez ensuite avoir une petite case à cocher subtile pour montrer les moyens et la sélectionner facilement. C'est ce que fait Gmail pour Android, et il s'est avéré facile à utiliser.

enter image description here

5
JohnGB

Rendez la ligne entière sélectionnable, mais utilisez également des cases à cocher comme indication de la ligne sélectionnée (si aucune case à cocher n'est utilisée, les états sélectionnés et non sélectionnés peuvent être difficiles à différencier).

Selected items

2
Henrik Ekblom