Dégradation gracieuse de saisie automatique / saisie semi-automatique
Considérez le cas lorsque l'utilisateur est invité à sélectionner un élément dans une liste fixe.
Si la liste contient plus d'une douzaine d'éléments, un widget de type saisie semi-automatique/typeahead s'est avéré très convivial et rapide à utiliser. Vous tapez quelques lettres et une fenêtre contextuelle apparaît - ou est mise à jour - avec les correspondances pertinentes, sans voler votre focus dans la zone de recherche. Lorsque vous trouvez ce que vous cherchez, vous pouvez cliquer dessus dans la fenêtre contextuelle ou le sélectionner avec les touches fléchées et confirmer avec Entrée.
Lorsque la liste contient moins de quelques centaines d'éléments, la meilleure dégradation gracieuse uniquement HTML est une simple case de sélection. La liste des pays (206 au moment de la rédaction de cet article) est l'exemple classique qui est à la limite de l'utilisabilité d'une boîte de sélection. Quelque chose de plus long que cela et il devient lourd à télécharger et à rendre et lourd à utiliser.
Alors, quelle est une bonne dégradation gracieuse uniquement HTML pour une boîte de saisie/saisie semi-automatique, lorsque la liste contient milliers d'éléments?
Idées:
Laissez simplement l'utilisateur saisir ce qu'il veut dans le champ de texte. S'ils n'ont pas de Javascript et résument simplement le formulaire, vous pouvez leur montrer une étape intermédiaire où ils verront les éléments correspondants, affiner leur recherche et faire un choix.
Mais que se passe-t-il si le formulaire d'origine contient plus d'une boîte de saisie? Souhaitez-vous leur montrer une séquence d'étapes intermédiaires, une pour affiner chaque sélection?Remplacez les zones de saisie par des boutons. * Chaque bouton soumettra le formulaire partiel (à stocker sur le serveur dans un stockage temporaire ou de session) et affichera une page avec tous les outils pour rechercher des éléments et faire une sélection. Lorsque l'utilisateur fait sa sélection, revenez au formulaire à moitié rempli et laissez-le continuer.
Remplacez les zones de frappe par des iframes * (disons, 5 à 10 lignes de hauteur, aussi grandes qu'une zone de texte.) Chaque iframe leur permettra d'effectuer des recherches et des sélections indépendantes, qui seront stockées sur le serveur, sans perturber le formulaire principal.
Une autre idée?
_____________
* Bien sûr, techniquement, c'est le contraire: vous mettez l'interface dégradée dans le HTML, puis utilisez JS pour la remplacer par la saisie semi-automatique.
Vous avez demandé une dégradation gracieuse ... ce n'est pas idéal, mais une variation de l'idée 1 fonctionnerait bien.
Donnez à l'utilisateur un champ de texte avec un bouton de recherche à côté. L'utilisateur saisit sa chaîne de recherche et lance la recherche. Actualisez la page pour leur montrer une liste des meilleures correspondances en tant que sélections radio.
L'utilisateur peut choisir de sélectionner une option ou de rechercher à nouveau.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Vous pouvez traiter cela de manière réaliste comme un bloc plus grand sur votre formulaire et vous pouvez donc en avoir plusieurs sans problème. Je ne sais pas quel type de ramification cela peut avoir du côté du serveur.