Meilleur design pour une longue HTML formulaire de saisie
Je suis en train de concevoir une longue HTML formulaire de saisie et suis débattre entre quelques-uns des choix de conception:
- Seule page du formulaire long et les utilisateurs ont à faire défiler vers le bas
- Plusieurs pages où vous devez cliquez sur "suivant", pour chaque nouvelle page
- Utiliser certaines onglet Interface AJAX pour organiser les entrées de formulaire, mais les onglets.
La recherche ou de la meilleure pratique ici?
- Vous pouvez également avoir un onglet de l'interface sans Ajax, il suffit de montrer et de cacher les divs. Plus simple, mais, évidemment, plus de chargement initial de la page.
Vous devez vous connecter pour publier un commentaire.
Le gouvernement des états-UNIS usability.gov le site a un article intéressant sur le résultat d'un Institut National du Cancer, l'étude de la forme de la convivialité, mais il ne correspond pas exactement à couvrir vos options; il se concentre plus sur la conception de la forme des éléments eux-mêmes.
Alsol, Dey Alexander Consulting a une liste de la forme de la conception de l'utilisabilité des ressources que peut-être vous aider.
Mise à jour: en Regardant beaucoup d'autres réponses, il y a beaucoup de "c'est à droite et les autres options sont mauvais" qui se passe ici. La réponse ultime est qu'il n'existe pas une approche correcte ici; un peu de contexte peut aider à vous guider vers une bonne solution pour vous, si. Par exemple, la division d'un formulaire en plusieurs pages HTML peuvent être idéal si vous devez faire une bonne affaire de la validation et de la prise de branchement (par exemple, ce qui apparaît sur la page 2 du formulaire est entièrement dépendante de la réponse d'un utilisateur à une question sur la page 1), car cela vous permet de garder la validation et la ramification de code 100% côté serveur. Mais même alors, il existe d'autres options qui pourraient être mieux dans votre cas, mais c'est difficile de répondre sans en savoir plus sur votre cas.
Tout d'abord, un bon article est, comme d'habitude, Nielsen.
Une bonne analyse peut également être trouvé dans ce post.
Mes propres pensées (de nombreuses années d'application web design plus grad niveau de la conception de l'INTERFACE utilisateur et l'ergonomie des études dans le passé comme base):
1. Les avantages et les inconvénients
Long de formulaires HTML:
Difficile de naviguer en cliquant sur la barre de défilement (très étroit), mais assez facile à naviguer à l'aide de la molette de défilement de la souris.
Plusieurs pages avec "suivant" liens
Pire des deux mondes. Difficile à cliquer ("prochain" est une petite cible), pas de hasard l'accès à tout ou partie de la forme (il devrait faire sens). Cette option n'est utile que lorsque vous DOIT remplir le formulaire de pièces dans un ordre spécifique, et pour en revenir n'est pas une option.
Onglet interface
C'est une bonne option, mais avec des inconvénients. Le seul inconvénient est de ne pas voir les infos à la fois (et vous devez vous rappeler de la question à laquelle a été sur l'onglet si vous voulez revenir en arrière/en avant).
2. Conclusion
Donc c'est un tirage au sort entre #1 et #3 en fonction de ce que vos utilisateurs de trouver plus facile (de défilement verticale longue page vs cliquez sur onglets).
3. Notes
Veuillez noter que Windows Gui presque universellement utilisation des onglets de formes, de sorte que probablement la recherche a montré qu'il est préférable de convivialité sage, pensé que je n'ai pas de références à la cie pour le moment.
Veuillez noter que le fait d'avoir "la possibilité de faire de la validation/vérification/sauvegarde/etc..." via des appels AJAX a à peu près RIEN à voir avec les choix ci - dessus-vous pouvez lancer un appel AJAX une fois que tout élément que vous choisissez sur un formulaire perd/focus gains.
Le seul avantage de l'interface à onglets c'est qu'il est axé sur l'utilisateur signal "j'en ai fini avec cet ensemble d'éléments de formulaire" - qui peut être intelligemment fait 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 "n'est 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. Côté notes
Exactement pourquoi vous avez une telle forme longue? L'un des points PRINCIPAUX de la recherche de facilité d'utilisation, c'est que le remplissage de formulaires est long, dur et haineux pour les utilisateurs. Donc, sauf si vous DEVEZ obtenir les informations, ne pas le demander. Ceci est surtout valable pour les formulaires d'inscription - voir Nielsen et d'autres références.
En tant qu'utilisateur, je préfère largement l'Option 1.
Tout le reste est un mensonge. Vous pensez que vous avez mené à terme la bureaucratie, et puis, il y a plus.
D'autre part, en tant que propriétaire de site web, vous souhaitez souvent de tromper l'utilisateur dans le processus d'inscription, tentant de lui avec un simple Écran 1 de la forme.
Onglet interfaces sont inestimables pour la navigation, mais sont, de l'OMI, presque jamais utile pour séquentielle d'entrée.
Permettent aux utilisateurs de faire défiler. Si vous utilisez un "assistant" approche, les utilisateurs auront un moment difficile de l'examiner ou de modifier les informations déjà saisies.
J'ai comme dans l'option 1 le meilleur. Vous pouvez regrouper les choses logiquement dans les divs ou des balises html fieldsets alors les utilisateurs peuvent onglet leur chemin vers le formulaire.
Avec des formulaires multi-pages, c'est toujours ennuyeux d'avoir à cliquer sur suivant puis revenir à la saisie.
Pour un long formulaire utilisé pour faire l'entrée de données tout au long de la journée, les utilisateurs deviennent rapidement familiers avec la mise en page. Ceux qui sont compétents sur le clavier ne sera pas comme la navigation entre les contrôles de la souris. Si vous définissez l'ordre de tabulation et d'utiliser un long défilement vertical, qui peut plaire à l'entrée de données de personnes. Ils seront en mesure de remplir les champs de données beaucoup plus rapidement que si ils ont à utiliser la souris pour cliquer entre les onglets ou les boutons Suivant.
Le meilleur des deux mondes: Un hybride intéressant, j'ai utilisé permettait à l'utilisateur de choisir le style d'affichage. Entrée de données de personnes pourrait voir le long défilement vertical version. D'autres utilisateurs qui ont juste de consulter les données (et éventuellement de l'édition de champs sélectionnés) pourrait voir une version avec onglets qui a évité le défilement vertical. Nous avons utilisé la personnalisation pour définir les préférences de l'utilisateur pour l'affichage par défaut.
Mélanger 2 et 3.
Guide l'utilisateur à travers les pages avec les boutons suivant et précédent, et définir certains éléments de l'interface (onglet sont grands, mais aussi des étiquettes comme de la chapelure..) pour permettre à l'utilisateur d'accéder directement aux pages.
Personnellement, j'utilise le multi-page d'approche, mais il peut également être adapté à onglets. Voici quelques une de mes raisons:
Cela dit, vous devez prendre soin de s'assurer que vous incluez un certain sens de la façon dont beaucoup de progrès de l'utilisateur si le nombre de pages est plus que 2-3. Vous devrait permettre de naviguer en avant et en arrière à travers la forme. 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 des onglets de forme. Je voudrais utiliser AJAX et faire de la validation sur l'onglet de navigation. De cette façon, vous êtes à la validation d'un onglet-à-un-temps, et peut plus facilement montrer les erreurs de validation. Vous pouvez appliquer l'onglet ordre par seulement permettre onglets les onglets précédents ont été complété, si nécessaire. Je pense que votre interface à onglets devrait se dégrader pour le multi-page variété si javascript n'est pas disponible.
Je préfère (1) la simplicité de défilement html avec chapitres bien définis.
De nombreux sites web commerciaux préfèrent les abrutir approche de (2), avec peut-être un peu de (3) pour permettre aux clients d'examiner leurs options. (2) maintient le tout à l'écran, permet de s'assurer que l'utilisateur est la lecture de ce que vous voulez lire.
Nous avons les mêmes formes dans notre société, et nous nous retrouvons avec les combinaisons de 2 et de 3, c'est montrer l'onglet sur le haut de l'écran, également inclure un bouton Suivant pour passer à l'onglet suivant. Voici quelques raisons et considérations,
1, l'utilisation d'ajax pour charger chaque onglet, pour rendre le formulaire plus petite sur le côté client, généralement il suffit à l'utilisateur afficher/modifier un ou deux onglets à chaque fois.
2, nous pouvons montrer les différents onglets lorsque le formulaire est chargé, sur la base de différents scénarios.
3, semblable à 1, nous pouvons afficher/masquer des onglets de base sur le privilège de l'utilisateur.
4, certains champs sont liés, de sorte que lorsque l'onglet précédent est mis à jour, nous permet de modifier certains paramètres sur l'onglet autres en conséquence.
5, et parfois, la forme est tout simplement trop de temps à travailler avec si vous ne séparez pas dans des onglets.
bien que je ne peux citer aucune recherche, j'ai vu beaucoup de multi-formes populaires en cours d'utilisation.
certains des meilleurs en ligne les formulaires que j'ai vu ont toujours eu:
Que, je dirais, devrait être la meilleure pratique 🙂
avec vue partielle sur, je suis essentiellement la construction à la fois #1 et #3 et je vais obtenir des commentaires de mes utilisateurs. Mon premier sentiment est que le #3 va être plus évolutive que je ajouter de plus en plus de données.
J'ai écrit un plugin pour ce but spécifique, principalement pour une utilisation dans les soins de santé et juridiques arènes, mais il fonctionne pour toute la longue html exigence de la forme:
Génial les Formulaires de plusieurs pages, jQuery plugin de Formulaire HTML
Je n'aime pas vraiment beaucoup de formes dans une page. Je les trouve difficiles à naviguer en qui il est difficile de trouver un domaine parmi les nombreux lorsque vous essayez de vérifier vos entrées. L'autre chose que je n'aime pas, c'est que, dans certains cas, il pourrait prendre un certain temps pour terminer la forme et que faites-vous si vous obtenez interrompu? Une autre possibilité est que si la session est perdu, ou le navigateur se bloque ou le réseau tombe en panne ou s'il y a une guerre nucléaire, etc.
Je préfère de beaucoup les onglets pour chaque section de la prochaine & boutons précédents. L'autre chose que j'ai ajouter, c'est lorsque l'utilisateur navigue d'une section à l'autre, il enregistre les données. L'autre option consiste à inclure une fonction d'enregistrement automatique.
Formes plus courtes sont les meilleures, mais parfois vous avez juste besoin de données et ne sont pas d'alternative.