web-dev-qa-db-fra.com

Comment puis-je indiquer que plusieurs ensembles de boutons radio s'excluent mutuellement?

J'ai un panneau où un utilisateur sélectionne une caméra à visualiser à partir d'un emplacement afin de pouvoir charger des images à partir de cette caméra. Ils ne peuvent charger des images qu'à partir d'une seule caméra et d'un seul emplacement. Pour cette raison, j'ai utilisé des boutons radio; une seule entrée valide par emplacement. Mais les groupes individuels de boutons radio sont également mutuellement exclusifs.

Un exemple est ci-dessous. La caméra 1 du premier emplacement est sélectionnée. Si j'ai sélectionné la caméra 2 dans le premier emplacement, le bouton de la caméra 1 apparaît. Il apparaît également si j'ai choisi un appareil photo à partir d'un autre emplacement.

enter image description here

J'ai regroupé physiquement les boutons pour suggérer la connectivité, mais je ne sais pas comment je le ferais ou si je devrais indiquer que les groupes séparés s'excluent également mutuellement. Cependant, il est assez évident d'utiliser l'interface, car les boutons apparaîtront visuellement si vous choisissez une autre option.

11
Ben Brocka

Que diriez-vous de changer la couleur de la ligne pour montrer qu'elle est sélectionnée? Comme ça:

enter image description here

Ensuite, chaque fois qu'ils changent une caméra qui se trouve dans une liste différente, ils verront également toute la ligne changer.

6
Matt Rockwell

Je pense que vous faites du bon travail jusqu'à présent. Mais je ferais une suggestion forte: ne redémarrez pas la numérotation. Cela indique une séparation de l'espace de noms, ce qui implique également une séparation de la sélection.

enter image description here

Si vous utilisez la même liste et la même disposition, mais numérotez les caméras séquentiellement sur toute la liste, cela contribuera à renforcer l'idée que vous choisissez une caméra dans la liste, pas une caméra dans la liste chaque.

6
Myrddin Emrys

Voici mon idée filaire: Complex Radio Buttons

Vous pouvez inclure autant ou aussi peu d'informations pour chaque caméra que vous le souhaitez (j'ai omis l'ID dans cette esquisse), mais regroupez les informations de manière à ce que chaque bouton raconte essentiellement l'histoire de cette caméra particulière: comment on l'appelle, ce qu'elle fait et où il se trouve.

En disposant tous les boutons avec le même poids et en utilisant l'emplacement pour les encadrer, vous 1) rendez l'exclusivité mutuelle un peu plus intuitive et 2) préservez leurs relations sans compromettre le point 1.

Si utiliserait plusieurs lignes de boutons disposées comme ceci, et n'ayez pas peur de casser un emplacement sur plusieurs lignes.

3
Taj Moore

Vous pouvez ajouter une colonne qui affiche une icône indiquant que la caméra associée est en train de s'afficher, comme peut-être une icône en forme d'œil. Toutes les autres lignes de cette colonne seraient vides, mais à mesure que l'icône passe de la ligne sélectionnée à la ligne sélectionnée, l'association entre la caméra en direct et l'icône devrait devenir claire.

1
Todd Sieling

Pour simplifier la conception, vous pouvez masquer les options des boutons de l'appareil photo pour les boutons de l'appareil photo qui ne se trouvent pas à l'emplacement actif.

Les emplacements inactifs peuvent avoir un seul bouton intitulé "montrer cet emplacement" et en survolant le bouton peut être transformé en un libellé "voir la caméra:" plus un bouton par caméra (uniquement dans le cas de plusieurs caméras).

1
Pau Giner

Ben, il semble que le problème réside dans le moment où vous changez de caméra. À ce moment, l'utilisateur devrait être certain que l'ancien ne fonctionne plus, alors peut-être qu'une solution serait d'avoir quelque part sur la zone de disposition (de préférence en haut) pour appeler clairement la caméra active comme: "Un endroit MO, appareil photo: 3 ". De cette façon, si vous changez la caméra, vous verrez en haut (peu importe où vous vous trouvez dans la liste des caméras) qu'elle a été modifiée.

btw, je suis conscient que ce n'est pas la meilleure solution comme je l'ai dit, mais peut-être avoir quelque chose de similaire pourrait aider.

(en plus vous pouvez connecter le bouton pour la caméra sélectionnée avec le texte pour "actif" par couleur)

enter image description here

1
Damjan Stankovic

Gardez l'interface la même, mais changez les étiquettes sur les caméras pour incorporer une référence à l'emplacement. Donc "1" devient "A place - 1".

0
Jon White

En pensant avec mon chapeau 508, pourquoi ne pas utiliser les boutons radio dont l'étiquette est associée aux réponses? en affichant un bouton radio, vous dites à l'utilisateur qu'il doit choisir un seul élément.

0
Mike Hill