web-dev-qa-db-fra.com

"Réactivement" sélectionner un article d'une grande collection fermée?

Je crée une application Web réactive. L'un des principaux objectifs de cette application est de collecter efficacement des informations. Dans certains domaines, j'ai besoin que l'utilisateur sélectionne une valeur dans une grande collection de valeurs . Pensez à un catalogue fermé de rues, par exemple. La première chose à laquelle j'ai pensé était d'utiliser un composant de saisie semi-automatique, comme Twitter bootstrap typeahed: http://Twitter.github.com/bootstrap/javascript.html#typeahead

À mon avis, cela a fière allure sur le bureau, mais sur les appareils mobiles, il est un peu difficile de sélectionner l'une des suggestions. Ce n'est pas aussi bon que le popup de sélection natif sur Android ou iOS, par exemple:

Android native select support

Cependant, ce support natif ne fournit pas de support de saisie semi-automatique dynamique.

Sur le plan sémantique, l'élément correct à utiliser serait un select car nous sélectionnons quelque chose à partir d'une source fermée d'éléments. Cependant, ces éléments semblent être assez "statiques" car ils ne permettent pas de filtrer la collection d'options, par exemple. Je comprends que c'est pourquoi la plupart des gens implémentent cela comme un champ de texte + suggestions.

L'excellent bibliothèque Select2 essaie d'atténuer cela, mais les symptômes sont plus ou moins les mêmes en ce qui concerne la réactivité.

Quel est le modèle d'interface utilisateur recommandé à utiliser dans ces cas?

Peut-être que la seule solution serait de faire des "boîtes de sélection consultables" une partie de la norme HTML?

1
miguelcobain

Tout d'abord, Android a une excellente auto-complétion sur Swype. Je ne suis pas sûr que ce soit une solution pour vous, mais cela pourrait vous donner quelques idées. Voici une image de l'auto- compléter sur Swype: enter image description here

D'après ce que je peux comprendre, le défilement vertical n'est pas efficace ici car il y a trop de choix? Qu'en est-il du défilement vertical amélioré comme dans la section des contacts Android/iOS lorsque vous avez un défilement rapide alphabétique sur le côté droit mais aussi un défilement normal. Une autre option pourrait être d'étudier les options de défilement horizontal réussies. Le défilement horizontal me semble étrange, mais si la conception convient, le problème sera résolu et une excellente conception est une conception qui résout les problèmes.

Est ce que ça aide? Peut-être que quelques captures d'écran de ce que vous avez maintenant seraient utiles ...

1
UXAndrew