Zone de texte avec sélecteur d'addons
Mes utilisateurs doivent saisir un nombre. Pour cela, je voudrais un contrôle qui est une zone de texte pour l'entrée numérique et une section à la fin de la zone de texte qui indique une unité de mesure par défaut, similaire aux entrées ajoutées de Bootstrap. En outre, l'utilisateur peut cliquer sur la section du module complémentaire pour modifier l'unité de mesure.
Est-ce une bonne idée? Existe-t-il un contrôle qui le fait déjà?
Mise à jour: J'ai fait une maquette rapide dans jsBin qui montre ce que je pense. http://jsbin.com/ivafag/1
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je suis sûr que beaucoup d'entre nous rencontrons quotidiennement un schéma similaire.
Voici un exemple que je vois au moins deux fois par jour; Photoshop:
Et voici ce que fait Google:
Ou peut-être que vous êtes souvent sur Github:
Ce que je veux dire, c'est qu'il existe de nombreuses façons de procéder, et elles fonctionnent toutes très bien. La question à vous poser est plutôt "quelle mise en œuvre de ce modèle correspond le mieux au reste de mon interface utilisateur?"
Quoi que vous choisissiez, soyez très clair sur les points suivants dans la conception finale:
- Il y a deux champs de saisie
- Ce sont des types différents
- Ils travaillent à l'unisson
Vous le voyez certainement sur le Web sous de nombreuses formes (voir ci-dessous). Je ne suis pas sûr qu'il ait un nom officiel, mais je l'appellerais probablement une entrée unifiée .
Assurez-vous qu'il y a une flèche ou quelque chose à côté du texte de la liste déroulante pour indiquer clairement à l'utilisateur qu'il IS en fait une liste déroulante. Vous remarquerez que tous les exemples ci-dessous suivent ce modèle. I pense que la flèche fait partie de ce qui la différencie d'un traditionnel "Entrée ajoutée ou ajoutée" .
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Exemples provenant du Web:
Liste déroulante des boutons de Twitter Bootstrap en tant que modules complémentaires de champ
Conversions de recherche Google
Recherche GitHub
Mise à jour du statut Facebook
Oui, ce type de contrôle fractionné est largement utilisé dans Microsoft Office 2013. Je ne pense pas qu'il soit utilisé aussi couramment dans les sites Web, car en général, vous voulez garder ces types d'applications aussi simples que possible (tant du point de vue fonctionnel que du point de vue de la conception) . Cependant, je pense que beaucoup de gens peuvent voir l'avantage d'employer ce type d'élément d'interface utilisateur pour fournir une interaction plus riche. À moins qu'il ne soit conçu dans le style "plat" de Microsoft, vous n'avez pas besoin de fournir des repères de conception très lourds à l'utilisateur car ils comprendront une combinaison de contrôles d'interface utilisateur standard.