i18N et conception de formulaire
J'essaie de concevoir un formulaire Web prenant en charge l'internationalisation (i18n). Le formulaire fera partie d'un grand logiciel de gestion d'événements. Les utilisateurs se connectent, créent des événements (comme des conférences, des roadshows, etc.). Plusieurs champs de saisie de texte doivent prendre en charge i18n afin de présenter l'événement dans différentes langues. Par exemple, le titre de l'événement peut être présenté en anglais, français, allemand, etc., ainsi que l'ordre du jour, le résumé, etc. Il y aura une langue principale ou par défaut (selon l'emplacement du client) et deux ou (beaucoup) plus langues supplémentaires à choisir.
Je peux penser à deux stratégies ou scénarios qui pourraient fonctionner:
Le client ouvre le formulaire et trouve la langue par défaut présélectionnée. Supposons qu'elle décide de passer du français à l'allemand. Instantanément, cela pourrait déclencher un rechargement de formulaire. A partir de là, tout texte qu'elle pourrait saisir est lié au correspondant, c'est-à-dire le lieu sélectionné. Si elle sélectionne une autre langue, cela déclenche à nouveau un rechargement du formulaire (tous les champs de texte sont vidés). L'idée est de modifier le formulaire complet pour chaque langue sélectionnée à la fois.
Cette approche "améliore" chaque champ de formulaire de saisie de texte i18n (en utilisant JS/jQuery). Encore une fois, le client ouvre le formulaire et sélectionne une ou plusieurs langues (en utilisant des cases à cocher). Cela ajoutera automatiquement des champs de texte de saisie supplémentaires sous le champ de saisie qui représente la langue principale. Maintenant, les clients saisissent du contenu dans chaque champ de formulaire. Si le client décoche "Français", tous les champs de formulaire correspondants sont supprimés. Il n'y a pas de rechargement de formulaire, il suffit d'ajouter et de supprimer des champs de formulaire de saisie de texte supplémentaires (jQuery magic :)
Existe-t-il un meilleur moyen de réduire la complexité et de conduire à une meilleure expérience utilisateur lors de la saisie des formulaires i18n?
Le problème que j'ai avec la seconde approche est qu'elle ajoute un certain nombre de champs supplémentaires (si je comprends bien votre question, elle double littéralement le nombre de champs) . Cela peut entraîner des problèmes pour l'utilisateur car il doit soigneusement choisir le champ dans lequel il saisit les données. De plus, s'il ne fait pas attention, il peut entrer les données du champ agenda dans le champ titre de l'événement comme celui-ci.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Un autre problème intéressant que j'ai remarqué (en jouant avec google translate) est que les langues utilisent le même mot pour désigner quelque chose, par exemple le mot pour Agenda en néerlandais est le même que celui de l'anglais c'est-à-dire Agenda. Par conséquent, voir deux agendas sur le formulaire peut dérouter l'utilisateur (en supposant qu'il ait sélectionné le néerlandais comme langue de traduction de l'anglais).
Je recommanderais d'aller avec l'approche une, mais si possible, lors de la sélection d'une nouvelle langue, si l'utilisateur a déjà entré du contenu existant, assurez-vous que le contenu entré est déjà entré dans le formulaire lors du rechargement du formulaire. Si cela n'est pas possible en raison de la difficulté à déterminer quand enregistrer les données, vous pouvez opter pour une approche dans laquelle l'utilisateur doit d'abord sélectionner la langue, puis seulement il a affiché les champs du formulaire. Cela garantira qu'il est présenté avec sa langue de prédilection, ce qui ressemblerait à quelque chose comme ceci:
Si vous envisagez de suivre cette approche, je recommanderais de définir la valeur par défaut dans la liste déroulante égale à la valeur déterminée par les paramètres régionaux de la personne
Utilisez une page de préférences utilisateur, où vous pouvez choisir la langue. Utilisez PHP et MySQL pour stocker la préférence. Le reste est encore plus facile. Par exemple "If (Lang ==" de ") {Include (de.inc);} Else {Include (en .inc);} "