web-dev-qa-db-fra.com

Sélecteur de langue plus contrôle d'action

Une application Web sur laquelle je travaille a une action de contenu principale pour "ajouter" quelque chose à une collection. Comme choix secondaire, l'utilisateur peut choisir une langue particulière à cet élément de contenu.

J'ai implémenté le contrôle de la manière la plus simple, comme indiqué dans cette maquette:

mockup

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

Cependant, l'interaction de changer la langue semble un peu maladroite.

Existe-t-il des modèles d'interaction ou d'autres approches d'interface utilisateur pour résoudre ce problème? La grande majorité du temps, la langue par défaut sera choisie. L'action "ajouter" doit rester principale.

Éditer:

Ces contrôles sont affichés dans un panneau dont la portée visuelle affecte le contenu qu'ils prévisualisent:

mockup

télécharger la source bmml

2
Jason Suárez

Plutôt qu'un menu déroulant, puisque vous choisissez une façon particulière d'afficher le même contenu, que diriez-vous d'un contrôle onglet? Vous pouvez utiliser horizontal (photo ci-dessous) ou vertical si vous avez besoin de plus d'espace pour les langues. Lorsque vous choisissez la langue, le contenu ci-dessous montre le même élément dans la langue choisie.

mockup

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

Pour affirmer à l'utilisateur que la sélection d'onglets affecte réellement la façon dont l'élément est ajouté, du texte est placé à côté du bouton Ajouter. Je crois que c'est une meilleure interface utilisateur qu'une liste déroulante à côté du bouton. En particulier, les onglets sont le moyen canonique de fournir une vue différente des mêmes données. Une liste déroulante à droite qui a changé le contenu à gauche serait, à mon avis, source de confusion plutôt que de clarification. Les utilisateurs ne s'attendent pas à ce que le contenu change en sélectionnant un choix dans une liste déroulante.

1
Myrddin Emrys

Plutôt que d'avoir un contrôle, vous pourriez simplement avoir des commentaires. Un peu comme ça ...

---------
| Add + |
---------

You content will be added as *English* (is this not correct?)

Utilisez ensuite la détection de langue pour effectuer la mise à jour. Vous commencez donc à taper le contenu, et après quelques mots le système dit "hé, ce n'est pas l'anglais, c'est le français!". Donc, il se met à jour en conséquence, peut-être avec un petit éclat visuel pour vous montrer qu'il a remarqué. Ensuite, bien sûr, si cela se passe mal (ce qui est probablement assez improbable à moins que vous n'écriviez dans l'une des deux langues très proches), vous pouvez simplement le dire explicitement avec le horriblement étiqueté "n'est-ce pas correct?" lien. (Je dirais mieux que ça, mais c'est tard!).

0
Peter Bagnall

Je pense qu'il doit être séparé en 2 étapes pour le rendre plus utilisable. Cela réduira également le taux d'erreur pour la saisie d'un contenu dans une langue incorrecte (car par défaut l'anglais est sélectionné).

Je pense que le bouton devrait être bien visible et devrait simplement dire + Ajouter comme indiqué ci-dessous:

enter image description here

Et la langue doit être affichée à l'étape suivante, par défaut l'anglais sélectionné, et le bouton Enregistrer affiché à côté. Pour de meilleurs résultats, il doit être affiché dans une fenêtre de superposition jquery (style web2.0) plutôt que l'utilisateur ne passe à la page suivante.

enter image description here

0
Ades