2009-09-02 8 views
1

J'ai besoin de créer une liste déroulante, qui peut contenir 100s d'options.scrollable sélectionnez cohérente à travers les navigateurs?

J'ai besoin d'une barre de défilement pour apparaître et être cohérent dans tous les navigateurs.

Google est apparu vide: Y at-il une bonne URL qui décrit si cela est cohérent ou non?

Merci.

+1

L'étiquette de sélection standard ne serait-elle pas suffisante dans votre cas? – LucaM

+0

Je ne suis pas sûr à 100%, mais je pense que certains navigateurs se comportent différemment avec un widget de sélection plus grand que l'écran. – DVK

+0

Qu'avez-vous utilisé? –

Répondre

4

Je vous déconseille fortement d'avoir un choix déroulant avec 100s d'options pour des raisons d'ergonomie.

À l'exception d'une case d'angle, la navigation (à la fois dans la recherche et dans la sélection) de cette liste est vraiment très difficile et très ennuyante pour l'utilisateur.

Le raisonnement de conception de l'interface est qu'il nécessite:

  • grand geste de la souris (fatiguant), suivie d'arrêt précis immédiat (difficile à faire en raison de l'inertie)

  • Très difficile à utiliser l'interface d'une barre de défilement (points supplémentaires pour la barre de défilement étant au milieu de la page plutôt que sur le côté droit) - voir la critique habituelle de Jacob Nielsen et d'autres sur les difficultés d'utilisation des barres de défilement.

  • Les yeux ont besoin de numériser la valeur entière de la page de menu de haut en bas et en arrière, tout le temps. très fatigant.

Here is a set of bad examples

[le cas de coin est lorsque tous les noms d'options sont uniformément réparties dans l'alphabet (jusqu'à la première lettre), qui permet la navigation au clavier seulement quelque peu possible dans le goutte à en appuyant sur la première lettre d'une option]. Une solution d'interface utilisateur appropriée est d'avoir un select dont le contenu est rempli dynamiquement en fonction d'un champ de recherche - soit du texte tapé (pensez au nouveau champ de recherche de Google, ou de la barre d'adresse du navigateur) ou parfois des cases à cocher. BTW, solutions de sous-menu également sucent pour la navigation de la souris - contraction mineure du poignet et vous avez perdu tout le travail de pointage. Je m'excuse que cette réponse ne soit pas une réponse à «comment résoudre mon problème technique», mais je suis d'avis que vous résolvez le mauvais problème en premier lieu.

HTH.

+0

Merci pour ce DVK. En fait, j'essaye de convaincre mon client de la même opinion, et j'essayais de trouver des munitions pour expliquer pourquoi l'utilisation d'un select défilant pourrait finir par devenir difficile à manier (à mesure que d'autres options sont ajoutées). – toolkit

+0

J'ai édité et ajouté un lien qui a quelques illustrations de pourquoi c'est une mauvaise idée. P.S. Comme une auto-promotion éhontée, je voudrais que vous marquez cette réponse comme une réponse acceptée, si ce lien est utile de parler à votre client. – DVK

0

La réponse courte est no, pour l'élément HTML standard select et les exigences que vous décrivez. Cependant, savez-vous que vous pouvez définir l'attribut size pour combien de lignes sont visibles en même temps? AFAIK cela va forcer le défilement dans tous les navigateurs, mais ce n'est pas une liste déroulante. Comme ceci:

<select size="10"> 
    <option>etc</option> 
    ... 
</select> 

Il y a aussi la possibilité de optgroup de diviser les options en catégories.

Si vous avez plusieurs catégories, vous pouvez faire ce que j'ai fait sur un site et utiliser ce jQuery click menu, en utilisant la fonction click pour définir un champ caché. Alors maintenant j'ai une liste déroulante avec des sous-catégories et il est assez facile de trouver la bonne option.

Questions connexes