La meilleure façon d'offrir une grande quantité d'options sélectionnables (sans utiliser Javascript)?
Je viens de stackoverflow et je n'ai pas de réponse pour celui-ci, donc je me tourne vers les gars de l'interface utilisateur pour obtenir de l'aide.
Disons que j'ai une application de bibliothèque qui permet à un utilisateur (bibliothécaire) d'ajouter un livre à la base de données. L'une des fonctionnalités consiste à marquer un auteur sur un certain livre. Un livre peut avoir plusieurs auteurs, une interface utilisateur autorisant plusieurs balises est donc requise. Je veux vraiment qu'il suive l'approche amélioration progressive, d'un site fonctionnel de base à une version améliorée JS/CSS.
J'ai déjà une base de données d'au moins 450 auteurs. Pour la version améliorée, une sélection auto-complétée et modifiable est dans mon arsenal et s'est avérée efficace. Le problème est avec la version de base, en particulier pour les appareils mobiles et les navigateurs incapables (comme opera mini peut-être?).
Du point de vue d'un programmeur, une sélection multiple <select> boîte devrait faire. Mais en lisant au moins 3 livres UX, une sélection multiple <select> est un "no go" car il n'y a aucune indication (sauf mention explicite) qu'un select est multi-activé. Pas bon non plus pour les personnes à mobilité réduite car il faut maintenir Command (Mac) ou Ctrl (PC) à plusieurs sélections. Les navigateurs mobiles n'ont également aucune de ces clés! Pour ajouter à cela, plus de 450 sélections dans une seule boîte?
En résumé:
- Plus de 450 articles au choix
- sélection de plusieurs éléments
- approche d'amélioration progressive
- c'est pour la vue de base (pas de Javascript, CSS limité)
- principalement destiné aux dispositifs de navigation non modernes et à fonctionnalités limitées (comme opera mini-navigateurs et mobiles qui ne disposent pas de capacité JavaScript)
Quelle est la meilleure façon de faire face à cette situation? Comment ont-ils même fait cela avant le Web 2.0?
Une liste déroulante de plus de 450 valeurs est extrêmement inutilisable sur n'importe quel appareil, y compris le bureau. Mais vous dites que vous ne recherchez qu'une solution pour la version mobile de base, alors restons-en là.
La meilleure façon de simplifier cela pour le mobile est probablement d'avoir un premier écran/popup affichant l'alphabet, puis lorsque vous appuyez sur une lettre, vous descendez dans la liste des auteurs commençant par cette lettre. Votre liste la plus longue par lettre, même pour les lettres les plus courantes, devrait être d'environ 30 à 40 valeurs, qui peuvent être défilées facilement. Ensuite, vous appuyez sur un nom pour le sélectionner, appuyez sur Retour pour revenir à l'alphabet et procédez à la sélection d'autres auteurs jusqu'à ce que vous appuyiez sur Terminé. C'est l'approche la plus standard pour mobile, basée sur une navigation linéaire simple.
Une meilleure façon serait de développer quelque chose qui ressemble à une application d'annuaire téléphonique, mais je suppose que vous ne pouvez pas le faire sur une application Web sans JS.
À moins que vous n'ayez une saisie automatique, une liste avec plus de 450 options n'est jamais très conviviale et toujours difficile à utiliser, surtout lorsque vous autorisez même plusieurs sélections.
Étant donné que la tâche d'ajouter des livres à la bibliothèque est une tâche très courante, qui devrait être effectuée rapidement, je proposerais une solution plus simple basée sur le backend en utilisant deux étapes simples:
- Tout d'abord, l'utilisateur est présenté avec un champ de saisie simple où il entre simplement les noms des auteurs. Pour plusieurs auteurs, ils sont simplement séparés par des virgules.
- Lors de la soumission, le backend fractionne ces entrées et essaie de trouver les entrées de base de données existantes pour elles. Si vous trouvez une correspondance unique, choisissez cet auteur. Si vous trouvez plusieurs possibilités, conservez-les toutes.
- Présentez à l'utilisateur vos résultats pour qu'il puisse les vérifier. En cas de possibilités multiples, faites-lui choisir la bonne correspondance à l'aide d'une simple case de sélection. Lorsqu'aucune correspondance n'a été trouvée, permettez-lui de créer l'auteur à cette étape (et peut-être aussi demander des informations plus détaillées). Faites cela pour chaque valeur séparée par des virgules que vous avez trouvée.
- Lors de la soumission finale, vous devriez avoir toutes vos informations.
Pourquoi ne pas essayer quelque chose comme ce que vous obtenez dans l'application iOS Mail.
- Un simple champ de saisie de texte
- Dérouler la suggestion automatique (comme dans la recherche Google)
- Lorsque vous avez ajouté un seul élément (comme auteur dans votre cas), vous pouvez en saisir un autre en appuyant sur + à la fin du champ de saisie (et les éléments précédemment saisis peuvent être supprimés un par un.)
Cette solution pourrait également être facilement utilisée sur un téléphone intelligent et un ordinateur de bureau. Je pense que pour plus de 100 éléments, une sorte de solution de "recherche" doit être utilisée.
C'est génial que vous amélioriez progressivement! Cependant, vous créez un problème qui se crée là où il n'y en a pas.
L'approche UX consiste à penser à l'utilisateur et à l'environnement dans lequel le produit est utilisé. Examinons donc vos préoccupations:
La zone de liste doit être maintenue enfoncée CTRL ou Command pour sélectionner plusieurs éléments, ce qui n'est pas trop accessible aux utilisateurs handicapés.
- Combien de vos utilisateurs (bibliothécaires) ont un handicap moteur sévère qui les empêche de maintenir les touches requises d'une main et de déplacer la souris de l'autre main? - Pas tant que ça.
- Existe-t-il une technologie d'assistance permettant aux personnes handicapées motrices d'utiliser efficacement les claviers? - Oui (claviers à l'écran et claviers physiques spéciaux).
La sélection multiple dans la zone de liste a une faible accessibilité car les utilisateurs ne savent pas comment maintenir enfoncée CTRL ou Command.
- Pouvez-vous améliorer la possibilité de sélection multiple? - Oui, vous pouvez inclure des instructions explicites à ce sujet.
Les appareils mobiles n'ont pas CTRL ou Command clés ou peuvent avoir des navigateurs non compatibles avec JavaScript.
- À quelle fréquence le système sera-t-il utilisé à partir d'un appareil mobile? - Peut-être occasionnellement.
- Quels appareils n'ont pas CTRL ou Command clés? - Presque tous.
- Quels appareils utilisent principalement Opera Mini et autres navigateurs non compatibles avec JavaScript? - Appareils plus anciens.
- Quelles sont les autres caractéristiques de ces anciens appareils? - Ils ont des processeurs moins puissants, des écrans plus petits et des connexions Internet plus lentes.
- Dans quelle mesure une liste d'éléments 450+ sera-t-elle utilisable sur de tels appareils? - Très inutilisable car il rendrait et défilerait lentement.
- Quel type d'appareil est susceptible d'être utilisé pour saisir des informations de livre loin du bureau? - Une tablette ou similaire en raison de la quantité de saisie de texte nécessaire.
- Ces appareils prennent-ils en charge le JavaScript moderne? - Absolument.
En consolidant tout ce qui précède, vous ne devriez pas vous soucier des zones de liste pour les appareils mobiles ou les utilisateurs handicapés. En fait, vous devez rendre la version mobile la plus simple en lecture seule et en supprimer les capacités d'édition et de création afin que les utilisateurs ne l'essaient même pas. Dans le même temps, une zone de liste sera entièrement utilisable par quiconque dans la version la plus simple pour les navigateurs de bureau tant que vous expliquez aux utilisateurs comment sélectionner plusieurs éléments.
Je commencerais la page Web avec une seule liste déroulante qui inclurait tous les auteurs. Ensuite, sous cela, cochez une case qui dit "ajouter un autre auteur". Cela ferait ce qui est attendu, probablement via javascript, et l'utilisateur pourrait continuer à ajouter des auteurs.
J'ai récemment dû faire une sélection multiple et une boîte de sélection multiple ne permettait pas aux colonnes d'afficher plus de données et les utilisateurs ne savent pas comment utiliser une boîte de sélection multiple en tout cas.
J'ai donc créé un div avec des barres de défilement, et dans votre cas, vous pouvez créer plusieurs div en fonction de votre style (par exemple, un div par lettre d'alphabet pour les auteurs).
Voici comment le mien est sorti pour vous donner une idée:
Évidemment, vous devrez jouer avec l'espacement et la taille pour correspondre à votre appareil préféré.
Veuillez noter qu'il ne s'agit que d'une suggestion.
Même sans l'utilisation de javascript, vous pouvez essayer d'utiliser une sorte de saisie semi-automatique côté serveur.
L'utilisateur entre manuellement le name (ou une partie de celui-ci) et frappe search.
Ces informations sont traitées par le serveur et donnent une simple liste html (avec des cases à cocher) de réponses possibles.
En bas, il y aurait 2 boutons: add et add & complete
Cela permet à l'utilisateur d'ajouter le ou les noms de la liste actuelle, puis de revenir en arrière pour en ajouter d'autres, ou d'ajouter le ou les noms de cette liste et de terminer l'ajout d'auteurs.
Je ne suis pas un expert de l'interface utilisateur, donc je ne sais pas à quel point il serait intuitif à utiliser, mais le côté technique devrait être parfait!