Grande liste déroulante

Bonjour,

Pour mon site e-commerce, je dois mettre en place un moyen pour que le client choisisse la quantité d'article qu'il désire, classique...

Il peut acheter de grande quantité, au moins jusqu'à 100.

Quelle stratégie me conseilleriez-vous d'adopter ?

- Une liste déroulante tout HTML avec <option value="1">1</option> répété 100 fois ?
- Une liste déroulante avec une boucle en JavaScript qui va de 1 à 100 (pour alléger le code !), avec une solution pour ceux qui n'aurait pas JC
- un champ texte ou l'utilisateur inscrit le nombre qu'il désire ? (je ne trouve pas cela très ergonomique personnellement...)
D'autres idées pour que cela soit irréprochable point de vue ergonomie, sémantique et tout ?

Noisequik a écrit :
- un champ texte ou l'utilisateur inscrit le nombre qu'il désire ? (je ne trouve pas cela très ergonomique personnellement...)

D'une, c'est la solution la plus souple. De deux, je trouve ça infiniment plus ergonomique qu'une liste déroulante avec 100 éléments (surtout que certains navigateurs n'en affichent que 15 ou 20 à la fois, et on se retrouve avec une barre de défilement dans la liste déroulante, parfois une liste de déroulante trop haute qui déborde des petits écrans, etc.). Par contre, on a un problème de fiabilité des données (il faudra tester que la valeur envoyée correspond bien à un nombre entre 1 et 100).

Noisequik a écrit :
D'autres idées pour que cela soit irréprochable point de vue ergonomie, sémantique et tout ?

Pour la «sémantique» tu as plusieurs choix valides, dont la liste déroulante (select + option) et le champ texte (input type="text").

Pour l'ergonomie, tout dépend du type de produit et des attentes supposées des clients. Est-ce qu'il s'agit de produits qui se commandent à l'unité dans 85% des cas? Ou bien par deux ou trois? Ou bien plutôt par dizaines ou douzaines?

Le principe est de fournir des raccourcis à l'utilisateur vers les valeurs fréquentes. Pour des produits qui se commandent les plus souvent à l'unité, rajouter par défaut une quantité de 1 et proposer un bouton [+] pour l'incrémentation (bouton généré en Javascript, prévoir par défaut un champ texte pour modifier la quantité). Pour des produits commandés par lot, le système suivant peut être intéressant:

<p>Quantité:</p>
<ul>
<li><input type="radio" name="quantite" id="quantite1" value="1" /> <label for="quantite1">1</label></li>
<li><input type="radio" name="quantite" id="quantite2" value="5" /> <label for="quantite2">5</label></li>
<li><input type="radio" name="quantite" id="quantite3" value="10" /> <label for="quantite3">10</label></li>
<li><label for="quantite-autre">Autre quantité:</label> <input type="text" name="quantite-autre" id="quantite-autre" /> (quantité minimum: 1; quantité maximum: 100)</li>
</ul>

Ce n'est qu'un exemple théorique. Pour l'ergonomie, franchement, c'est à toi de voir.

Je plussoie Florent.

Florent V. a écrit :
Par contre, on a un problème de fiabilité des données (il faudra tester que la valeur envoyée correspond bien à un nombre entre 1 et 100).

Problème que l'on a également avec une liste déroulante.

Florent V. a écrit :
Ben avec une liste déroulante tu détermines à l'avance les choix possibles, non? Je suppose que l'utilisateur bidouilleur pourra modifier le code à la volée et envoyer des données erronées, et donc qu'une vérification de sécurité s'impose, mais il me semble que ça n'est pas du même niveau.

Il me semble que c'est exactement le même problème, et donc le même niveau. A moins que tu ne parles de vérification côté client, auquel cas je t'avais mal compris.
Modifié par Julien Royer (29 Nov 2007 - 12:46)

Disons que je trouvais le principe du champ de texte moins ergonomique car il m'oblige à utiliser ma main gauche pour taper une valeur au clavier, alors que je peux choisir avec la souris pour une liste.

Maintenant, il me semble effectivement que la solution du champ demande une vérification supplémentaire, dans le cas par exemple ou le client introduirait un caractère à la place d'un nombre...

Noisequik a écrit :
je trouvais le principe du champ de texte moins ergonomique car il m'oblige à utiliser ma main gauche

Euh... l'ergonomie, ça n'est pas que l'expérience personnelle du mec qui en parle, hein. Ça demande au minimum de prendre un peu de recul.
(Et je suis conscient que lorsque je dis ça, ça fait un peu hôpital qui se fout de la charité. )

Noisequik a écrit :
pour taper une valeur au clavier, alors que je peux choisir avec la souris pour une liste.

Certains utilisateurs trouveront cela plus commode, pour diverses raisons (navigation au clavier par préférence ou par commodité, navigateur mobile avec... pas de souris, habitude de l'utilisation conjointe du clavier et de la souris, etc.).

Mon souci principal avec une liste déroulante de 100 éléments est que les agents utilisateur ne sont pas toujours bien équipés pour gérer ce genre de chose.
Certains navigateurs affichent 20 items. IE en affiche 30. En 800x600, cela peut poser problème. En 1024x768 avec deux agrandissements de la taille du texte dans Firefox, je ne peux pas sélectionner les quatre premiers items (sauf à l'aveugle au clavier...).
En navigant au clavier, si je veux aller à la fin de la liste pour choisir «100», je dois appuyer 100 fois sur une touche donnée pour faire défiler les options. Et avec une synthèse vocale, la synthèse m'annonce tous les choix un par un (car pas de optgroup).

Bref, la saisie directe me semble être plus fiable.

Au fait, tu n'as toujours pas dit de quel type de produit il s'agit (et surtout de quel type de commande il s'agit: unitaires en majorité, par lots, etc.).
Modifié par Florent V. (29 Nov 2007 - 14:12)

Eh oui je suis entièrement d'accord, je ne suis pas représentatif du 100% des internautes (bien que si un élément me gêne vraiment, je suppose qu'il risque de gêner beaucoup de monde)

Je pense que je vais choisir le champ de texte, pour les raisons concrètes que tu as énumérées.

Le choix de plusieurs éléments est intéressant également, mais je pense qu'il risquerait d'apporter un peu de confusion dans mon cas, surtout qu'il y a plusieurs produits affichés par page.

Pour répondre à ta question, il s'agit de vins, et le client peut tout à fait les commander à l'unité ou un par un nombre quelconque (pas de notion de packs).

J'aurai aussi imaginé qqch comme une liste de 1 à 10 puis de 10 à 100 par dizaine (10, 20, 30...) mais ça pourrait pénaliser celui-qui souhaite un nombre genre 34...

Salut Noisequik,

côté esthétique rien à redire mais juste 2 remarques :

- la partie "Affiner votre sélection" qui marche avec des onchange n'est pas accessible avec JS désactivé ...

- il n'y a pas de test sur une quantité non entière : par exemple on peut saisir 1.6

A+

Hello !

merci beaucoup pour ces 2 remarques pertinentes !

pour la première, je me suis dit que cette option n'était pas essentielle étant donné qu'elle permet simplement un peu plus de confort, mais qu'elle n'empêche pas le processus d'achat pour ceux qui n'ont pas le JavaScript...
Si j'ai le temps, je pourrais éventuellement rajouter un bouton accessible au non JavaScript

la 2ème, c'est très juste !
Je corrige de suite !!!

Heyoan a écrit :
Salut Noisequik,

côté esthétique rien à redire mais juste 2 remarques :

- la partie "Affiner votre sélection" qui marche avec des onchange n'est pas accessible avec JS désactivé ...

- il n'y a pas de test sur une quantité non entière : par exemple on peut saisir 1.6

A+

Salut,

j'aime bien le coté esthetique bien réussi je trouve. Simple, léger, suggestif... Néanmoins le verre dans le bandeau fait vraiment cracra, ca tranche avec le reste, il doit y avoir un défaut de perspective... voila c'est juste ce que je voulais dire... parce qu'un compliment sans critique c'est un peu comme un vin trop sucré (je sais pas ou je l'ai trouvée celle la).

Sinon sur le js pareil que Heyoan pour le test des valeurs non entières.
Modifié par skywalk3r (12 Dec 2007 - 16:26)