web-dev-qa-db-fra.com

Pourquoi cette interface utilisateur (Google Translate) a-t-elle un ensemble de boutons à bascule au lieu de boutons radio?

J'ai vu cela sur Google Translate, où Google utilise ces contrôles segmentés (ou boutons à bascule) pour répertorier les langues. enter image description here

Contrairement à ceux présents dans d'autres produits tels que Google Agenda ou les onglets Faceboook (qui entraînent un changement de vue), il s'agit essentiellement d'un contrôle de sélection.

enter image description here

enter image description here

Vous vous demandez quelle est la raison de remplacer les boutons radio par ceux-ci. Edit: C'est peut-être une supposition de ma part qu'ils remplacent les boutons radio. Côté fonctionnalité, je pense qu'ils ressemblent beaucoup aux boutons radio plutôt qu'aux cases à cocher ou aux menus déroulants! D'où la question.

formstabsradio-buttonstogglesegmented
2
Anusha

Je pense que c'est une question de choix. boutons bascule besoin de moins d'interface utilisateur car l'étiquette est déjà l'entrée.

Les boutons à bascule peuvent être utilisés pour regrouper les options connexes. Organisez la disposition et l'espacement pour indiquer que certains boutons à bascule font partie d'un groupe.

(...)

Basculer les exigences du bouton:

  • Avoir au moins trois boutons à bascule dans un groupe
  • Étiqueter les boutons avec du texte, une icône ou les deux

Les combinaisons suivantes sont recommandées:

  • Multiple et non sélectionné
  • Exclusif et non sélectionné
  • Exclusif seulement

La sélection exclusive est celle utilisée dans ce cas:

enter image description here

5
Alvaro

En plus de ce que les autres ont déjà répondu, considérez qu'il s'agit d'une barre d'outils personnalisée réactive qui vous permet de choisir parmi un grand nombre de langues, mais aussi = détecte langues parlées. Le contrôle doit être suffisamment flexible pour permettre des noms de langue longs et courts sans gâcher la mise en page quelle que soit la taille à laquelle l'utilisateur voit cette interface. Voici un exemple de ce qui se passe lorsque vous allez plus loin dans l'interface utilisateur et commencez à sélectionner différentes langues. Un menu déroulant s'ouvre sous la petite flèche. J'ai dit "Hier, j'ai mangé une voiture" à l'aide du microphone et il a détecté que l'anglais était parlé. Bien joué, Google.

Google Translate Screen Shot

Jetons-lui une balle courbe. Je l'ai testé en parlant dans le microphone et il a détecté le lituanien. Il doit indiquer dynamiquement ce nouveau choix de langue directement dans la barre d'outils. Cela demande énormément de boutons radio. Ils sont difficiles à maintenir, donc je ne peux pas imaginer les utiliser dans ce scénario. Lithuanian to Spanish

3
LindaCamillo

C'est une bonne décision de conception d'interface utilisateur avec le contexte suivant:

  1. Les boutons radio horizontaux sont difficiles à numériser/lire. Sinon, vous avez besoin de trop d'espace pour distinguer clairement les options. Comparez les images:
    enter image description here . enter image description here
    .

  2. Meilleure indication de l'état du système. Pour une disposition horizontale, la surface entière du bouton indique mieux la sélection actuelle, par rapport à une petite coche ronde. Vous remarquez la différence de couleur de manière beaucoup plus rapide.

.

  1. La petite taille du bouton radio rend difficile l'interaction. Même aujourd'hui, certains développeurs n'utilisent pas d'étiquette appropriée pour augmenter la taille d'un bouton radio. Et certains utilisateurs n'utilisent qu'une petite coche ronde pour cliquer sur le bouton radio. Donc, selon la loi de Fitts , ils ont augmenté la taille du contrôle de sélection, et c'est assez clair pour les utilisateurs.
    .
3
Alexey Kolchenko