web-dev-qa-db-fra.com

Quel contrôle dois-je utiliser pour indiquer des listes à sélection multiple sur iOS?

Scénario

L'utilisateur peut choisir plusieurs éléments dans une liste, qui seront reportés à l'action suivante.

Problème

Dans iOS, aucune case à cocher n'est disponible pour indiquer clairement à l'utilisateur qu'il s'agit d'une liste à sélection multiple.

Android fournit des cases à cocher indiquant les options disponibles à la sélection pour l'utilisateur.

Question

Comment transmettez-vous visuellement les options de sélection multiple dans iOS?

mockup

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

11
Big_Chair

Apple aime les commutateurs

Les interrupteurs coulissants étaient un moyen de contrôle astucieux à l'époque. Ils étaient un moyen pour iOS d'annoncer

"Hé, regarde! J'aime les gestes. Tu devrais glisser des trucs."

Dans une courte liste où vous voudrez peut-être désactiver votre wifi ou Bluetooth pour économiser de la batterie, cela fonctionne bien. Lorsque vous avez une liste d'éléments sélectionnables, iOS vous demande de penser à ces éléments en termes d'E/S commutables.

iOS switch controls

Ils sont allés trop loin

Je suppose que l'absence de cases à cocher dans les recommandations d'iOS n'est pas un oubli - ils ont eu un certain temps pour vivre avec cette décision. Cela ne signifie pas que ce n'est pas une erreur. L'idée que nous utiliserions leurs jolis petits commutateurs pour tout était inutilement limitante.

iOS laisse entendre que les vérifications sont toujours cool avec des listes sélectionnées. L'indicateur non sélectionné (aucun indicateur) n'est pas comme une case à cocher. Et c'est pour la sélection d'un seul élément de toute façon, donc ... ¯\_ (ツ) _/¯

iOS select lists have checks

Faire votre propre

Qu'est-ce qu'un designer UX empathique doit faire? Les interwebs posent cette question depuis un moment . La conclusion à laquelle je souscris:
Il n'y a rien de mal avec les cases à cocher sur les appareils tactiles.

Demandez au développeur de cocher un bouton. C'est une chose facile à faire . Et les gens ont déjà cette case à cocher entière. Après tout, les utilisateurs iOS n'étudient pas pour le test iOS HIG ou quoi que ce soit, non? Ils utilisent d'autres interfaces au cours de leur journée.

iOS with home-made checkboxes

Suivez les utilisateurs

D'après mon expérience, les utilisateurs savent quoi faire lorsqu'ils voient des cases à cocher clairement indiquées. En fait, j'ai constaté que plus d'utilisateurs savent quoi faire avec les cases à cocher que les commutateurs à bascule, au moins pour les listes à sélection multiple. Testez votre audience et voyez si vous pouvez confirmer le contraire.

11
plainclothes

Je pense que Apple a tort de ne pas inclure la sélection multiple. Les commutateurs se sentent comme s'ils étaient pour les paramètres. Je ne peux pas m'empêcher de les considérer comme "on" et "off". Je ne ' Je veux dire que je désactive le travail de tee dans ma pratique de baseball. Je veux dire que je ne le fais pas aujourd'hui et désélectionner. Ici, j'ai dessiné ma propre case à cocher pour la comparaison avec la recommandation native des commutateurs. checkboxes vs. switches

C'est bien le temps passé Apple réorganiser les éléments de l'interface utilisateur. Révolte ;-)

3
riaJay

Comme indiqué précédemment, les commutateurs conviennent aux paramètres booléens où les options sont activées ou désactivées .

Cependant, les cases à cocher n'ont jamais été manquantes dans iOS, et elles sont utilisées pour sélectionner plusieurs éléments :

Multiple selection on iPhoneOSMultiple selection on iOS

3
Jason Hibbs

La sélection multiple peut être facilement résolue avec le type d'accessoire de coche standard: enter image description here

Vous pouvez le définir sur autant de cellules que vous le souhaitez:

cell.accessoryType = selectedIndexes[indexPath.row] ? .checkmark : .none

selectedIndexes est un simple tableau de booléens dans mon cas. Je les mets à jour

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)

Vous devez décider vous-même de la façon dont les données de sélection sont stockées.

Maintenant, ne mélangeons pas les concepts lorsque nous parlons de cases à cocher. La case à cocher traditionnelle qui est venue sur le Web à partir du PC est un contrôle qui permet d'activer/désactiver une seule valeur. Il a été conçu pour l'interface graphique qui utilisait la souris. Le contrôle des commutateurs dans iOS a le même objectif, mais est conçu pour l'interface tactile.

Comme l'a dit Chriskowalskowski:

vous devez faire la distinction entre une tâche où l'utilisateur doit définir un état booléen (marche/arrêt) ... ou, laisser l'utilisateur sélectionner plusieurs cellules contenant des informations

La case à cocher traditionnelle et le commutateur sont conçus pour faire le premier - permettre à l'utilisateur de définir l'état d'activation/désactivation.

En outre, une coche d'aspect similaire a commencé à être utilisée dans les vues de liste sur PC pour permettre une sélection multiple. Bien que le contrôle de case à cocher puisse être utilisé dans la vue de liste, son objectif est différent - pour indiquer la ligne sélectionnée plutôt que d'activer/désactiver une option.

Il existe deux façons d'effectuer une sélection multiple dans UITableView.

Tout d'abord, comme je l'ai démontré ci-dessus - permet à l'utilisateur de choisir une ou plusieurs options dans la liste et de continuer. Il s'agit d'une simple solution prête à l'emploi.

Un autre, comme l'ont démontré Lisa Tweedie et Jason Hibbs, lorsque l'indicateur de sélection - coche blanche à l'intérieur du cercle bleu - est affiché sur le côté gauche. Celui-ci est principalement utilisé pour les opérations de groupe avec les éléments eux-mêmes, c'est-à-dire l'édition, le déplacement, plutôt que pour indiquer le choix sélectionné. Voir l'application Mail par exemple.

2
Davyd Geyl

Utilisez une liste de commandes de commutateur, comme ceci:

iOS settings switch control exmaple

1
Kip

J'examine exactement cette question. J'ai un joli Android design et je veux quelque chose de similaire pour IOS

Et je viens de trouver cela d'Apple:

https://developer.Apple.com/library/content/samplecode/TableMultiSelect/Introduction/Intro.html

circular checkboxes

Est-ce que les puristes IOS puristes ont un problème avec cela car c'est d'Apple ??

0
Lisa Tweedie

Si vous souhaitez présenter une liste et laisser l'utilisateur sélectionner plusieurs cellules, vous devez faire la distinction entre une tâche où l'utilisateur doit définir un état booléen (marche/arrêt) pour chaque cellule - comme les notifications ou les contrôles de confidentialité - Ou, laissez le l'utilisateur sélectionne plusieurs cellules qui contiennent des informations - Par exemple, la sélection de contenu divers (Par exemple, un fournisseur de VOD: Sélectionnez les genres)

Dans le dernier cas, vous devez utiliser tableViewCells avec un accessoireView - Dans ce cas, UITableViewAccessoryCheckmark. Ceci est personnalisable et vous permet d'avoir différents états pour les éléments désélectionnés et sélectionnés.

En regardant votre Android sketch, vous voudrez probablement utiliser la deuxième option.

0
Chriskowalskowski