Je concevons un long formulaire d'entrée HTML et je débats entre quelques choix de conception:
Toute recherche ou meilleure pratique ici?
14 Réponses :
Bien que je ne puisse citer aucune recherche, j'ai vu de nombreuses formes de plusieurs pièces populaires en cours d'utilisation.
Certaines des meilleures formes en ligne que j'ai vues ont toujours eu:
Cela, je dirais, devrait être la meilleure pratique :)
La question demande des recherches ou des meilleures pratiques; vous ouvrez de "Bien que je puisse citer aucune recherche." Une sorte de défaite le but.
De plus, AJAX appelle à la validation / épargne est également faisable sous une forme longue.
En tant qu'utilisateur, je préfère définitivement l'option 1.
Tout le reste est un mensonge. Vous pensez que vous avez terminé la bureaucratie requise, puis il y a plus.
D'autre part, en tant que propriétaire de site Web, vous souhaitez souvent tromper un utilisateur dans le processus d'inscription, le tendant à un simple écran 1 du formulaire.
Les interfaces d'onglet sont inestimables pour la navigation, mais sont, imo, presque jamais utile pour une entrée séquentielle.
Ceci est un peu noir et blanc, pavel; Il existe des formes multi-pages incroyablement bien conçues qui n'ont pas le problème que vous citez comme leur problème, car ils ont des marqueurs clairs pour la quantité de formulaire que vous avez terminée (et que vous avez toujours laissée à compléter), et même contextuel Indices sur le contenu des sections restantes qui ne sont pas sur la page.
Peut-être que ... et pourtant, je préférerais me défiler moi-même. Cela me donne le privilège de look-avance, avoir une valeur morale de "ils n'ont rien à cacher". Je trouve ça bien.
combiner 2 et 3.
Guidez l'utilisateur à travers les pages avec des boutons suivants et arrière, et Certains éléments d'interface (onglet sont superbes, mais aussi des étiquettes de chapelure ..) Pour laisser l'utilisateur passer directement aux pages.
permet aux utilisateurs de faire défiler. Si vous utilisez une approche "Wizard", les utilisateurs auront du mal à examiner ou à modifier des informations déjà entrées.
J'aime l'option 1 le meilleur. Vous pouvez classer des choses logiquement dans des divs ou des champs, puis les utilisateurs peuvent tabuler leur chemin le formulaire.
avec des formes multi-pages Il est toujours gênant de devoir cliquer sur Suivant puis revenez à la frappe.
Le gouvernement du gouvernement américain.GOV Site a Un article intéressant sur le Résultats d'une étude nationale de l'Institut de cancer de la facilité d'utilisation de la forme, mais cela ne couvre pas exactement vos options; Il se concentre davantage sur la conception des éléments de forme elles-mêmes.
Alsol, Dey Alexander Consulting a une liste de ressources de conception de formulaire qui pourrait vous aider à vous aider.
On dirait que le lien avec la convivialité. L'article degov a déménagé. Peut-être c'est-à-dire celui-ci?
Tout d'abord, un bon article est, comme d'habitude, Nielsen .
Une bonne analyse peut également être trouvée dans ce poste .
Mes pensées (nombreuses années de conception d'applications web ainsi que la conception de l'interface utilisateur et le niveau d'études utilisabilité diplômés dans le passé comme base):
1. Avantages et inconvénients
formes long HTML:
Difficile de naviguer en cliquant sur la barre de défilement (très étroit), mais assez facile à naviguer avec molette de défilement sur une souris.
Plusieurs pages avec des liens "suivant"
Le pire des deux mondes. Difficile de cliquer ( « suivant » est une petite cible), pas d'accès aléatoire à une partie de la forme (doit-il donner un sens). Cette option est utile lorsque vous MUST compléter les parties du formulaire dans l'ordre spécifique et retourner est pas une option.
Interface Tab
Ceci est une bonne option, mais avec des inconvénients. Le seul inconvénient est de ne pas voir toutes les informations sous forme à la fois (et vous devez vous rappeler quelle question était sur quel onglet si vous souhaitez revenir navigate / etc.).
2. Conclusion
Il est donc un coup de pile entre # 1 et # 3 en fonction de vos utilisateurs plus facile (long rouleau contre la page, cliquez sur les onglets verticaux).
3. Remarques
S'il vous plaît Notez que Windows GUIs formes utilisent presque universellement, donc la plupart des onglets de recherche probablement montré qu'il est une meilleure ergonomie sage, pensé que je n'ai pas de références à cie au moment.
S'il vous plaît noter que d'avoir « l'occasion de faire la validation / vérification / enregistrement / etc ... » via des appels AJAX a à peu près rien à voir avec les choix ci-dessus - vous pouvez lancer un appel d'AJAX une fois tout élément que vous choisissez sur un formulaire pERD / le focus.
Le seul avantage de l'interface à onglets pour cela est que c'est le signal axé sur l'utilisateur « je suis fait avec cet ensemble d'éléments de forme » - qui peut être fait intelligemment via JS sans avoir les onglets et sans que l'utilisateur vous dire qu'il est fait explicitement (e .. il se concentre sur l'élément suivant).
Vous pouvez également désactiver « pas encore prêt pour vous » éléments de formulaire jusqu'à ce que tous les précédents éléments requis sont 100% rempli.
4. notes secondaires
Pourquoi exactement avez-vous une telle forme longue? L'un des points principaux de la recherche de la facilité d'utilisation est que le remplissage de toute forme est longue, dure et odieuse pour les utilisateurs. Donc, à moins que vous devez obtenir les informations, ne demandez pas. Cela vaut particulièrement pour les formulaires d'inscription -. Voir Nielsen et autres références
Personnellement, j'utilise l'approche multi-pages, mais cela pourrait également être adapté aux onglets. Voici quelques-unes de mes raisons:
Cela dit, vous devez veiller à ce que vous incluiez une idée de la quantité de progression de l'utilisateur si le nombre de pages est supérieur à 2-3. Vous devez permettre de naviguer à la fois en avant et en arrière à travers le formulaire. C'est certainement plus de travail pour vous, mais je pense, une meilleure expérience utilisateur pour la plupart.
Si vous décidez d'aller avec un formulaire à onglets. J'utiliserais Ajax et faire la validation sur la navigation sur l'onglet. De cette façon, vous validez une tabulation à la fois et vous pouvez plus facilement afficher des erreurs de validation. Vous pouvez appliquer l'ordre d'onglet en activant uniquement les onglets sous forme d'onglets précédents, si nécessaire. Je pense que votre interface à onglets devrait se dégrader à la variété multi-page si JavaScript n'est pas disponible.
Pour une forme longue utilisée pour effectuer une entrée de données toute la journée, les utilisateurs se familiarisent rapidement avec la mise en page. Ceux qui maîtrisent le clavier n'auront pas envie de naviguer entre les commandes avec une souris. Si vous définissez la commande de tabulation et utilisez un formulaire de défilement vertical long, cela peut plaire aux personnes de saisie des données. Ils seront capables de remplir les champs de données beaucoup plus rapidement que s'ils doivent utiliser la souris pour cliquer sur les onglets ou les boutons suivants.
Le meilleur des deux mondes: Un hybride intéressant que j'ai utilisé a permis à l'utilisateur de choisir le style d'affichage. Entrée de données Les personnes pouvaient afficher la version de défilement longue et verticale. D'autres utilisateurs qui venaient d'afficher les données (et éventuellement éditer des champs sélectionnés) pourraient voir une version à onglets qui évitait le défilement vertical. Nous avons utilisé la personnalisation pour définir la préférence de l'utilisateur pour la vue par défaut.
i préférez (1) la simplicité de défilement HTML avec des sections clairement définies.
De nombreux sites Web commerciaux préfèrent l'approche intérieure de (2), avec peut-être un peu (3) pour permettre aux clients de revoir leurs options. (2) Garde tout à l'écran, veille à ce que l'utilisateur lise ce que vous voulez qu'ils lisent.
Nous avons des formulaires similaires dans notre société et nous nous retrouvons avec les combinaisons de 2 et 3, c'est-à-dire que l'onglet indique l'onglet en haut de l'écran, incluez également un bouton Suivant pour passer à l'onglet suivant. Voici quelques raisons / considérations, 1, utilisez AJAX pour charger chaque onglet, pour rendre le formulaire plus petit côté client, généralement l'utilisateur, affichez-les / modifiez une ou deux onglets à chaque fois. 2, nous pouvons montrer différents onglets lorsque le formulaire est chargé, base sur le scénario différent. 3, semblable à 1, nous pouvons montrer / masquer certaines tabulations sur le privilège de l'utilisateur. 4, certains champs sont liés, alors lorsque l'onglet précédent est mis à jour, nous modifions certains paramètres sur l'autre onglet en conséquence. 5, et parfois, la forme est trop longue pour fonctionner si vous ne vous séparez pas en onglets.
Avec des vues partielles, je construisons essentiellement les deux n ° 1 et 3 et je vais obtenir des commentaires de mes utilisateurs. Mon sentiment initial est que n ° 3 va être plus évolutif que j'ajoute de plus en plus de données.
J'ai écrit un plugin à cet effet spécifique - principalement pour une utilisation dans les domaines de la santé et des arènes juridiques - mais cela fonctionne pour toute exigence de formulaire HTML long:
Formulaires géniaux - MultiPage JQuery HTML Form Plugin < / p>
Je n'aime pas vraiment les formes très longues sur une page. Je les trouve difficile à naviguer dans la mesure où il est difficile de trouver un champ parmi beaucoup lorsque vous essayez de vérifier vos entrées. L'autre chose que je n'aime pas à leur sujet, c'est que dans certains cas, cela pourrait prendre un certain temps pour terminer la forme et que faites-vous si vous êtes interrompu? Une autre possibilité est que si la session est supprimée, ou que le navigateur se bloque ou que le réseau tombe en panne ou qu'il y a une guerre nucléaire, etc.
Je préfère beaucoup les onglets de chaque section avec des boutons suivants et précédents. L'autre chose que j'ajouter est lorsque l'utilisateur navigue d'une section à l'autre, il enregistre les données. L'autre option consiste à inclure une fonctionnalité de sauvegarde automatique.
Les formes plus courtes sont meilleures, mais parfois, vous avez juste besoin des données et ne reçoivent aucune alternative.
Vous pouvez également avoir une interface à tabulation sans Ajax, montrant et masquant des divs. Plus simple, mais évidemment une charge initiale plus longue.