Comment simplifier un formulaire?
Je suis en train de concevoir une application Web où vous pouvez ajouter des entrées, et chacune d'elles a une vingtaine de champs.
Pour la plupart, après avoir ajouté une entrée, elle ne devra pas être modifiée par la suite. Mais l'option de modifier n'importe quel champ doit toujours être présente. En outre, il devrait y avoir un moyen d'effectuer une recherche sur l'un des champs et d'extraire les enregistrements correspondants.
Comment puis-je concevoir ces formulaires pour qu'ils ne ressemblent pas au troisième ici?
La raison pour laquelle les produits d'Apple et de Google se présentent sous leur forme est qu'ils ont pris des décisions de conception. Au lieu de rechercher des fonctionnalités à ajouter, ils recherchent des fonctionnalités à supprimer.
Comme il s'agit d'une question très générale, tout ce que je peux offrir est une réponse très générale.
- Vos utilisateurs ont-ils besoin d'autant de champs? - Je ne peux pas imaginer un cas dans lequel une seule unité d'information nécessite 20 champs de données différents. Commencez par éliminer et combiner les champs. Si vous repensez une application qui fonctionne déjà, demandez à voir 10 formulaires aléatoires des dernières semaines. Si vous voyez des champs laissés vides (ou remplis de détritus car ils ne peuvent pas être ignorés), vous pouvez peut-être les laisser de côté.
- Y a-t-il des champs que seuls les utilisateurs avancés utilisent sont que tous les utilisateurs utilisent rarement? - Sur 20 champs, vous pouvez probablement en trouver quelques-uns. Reportez-les à l'écran secondaire , où ils n'encombrent pas et n'interfèrent pas avec le flux de travail de l'utilisateur principal. Comme dans l'astuce précédente, si vous avez accès à des données réelles, profitez-en pour voir s'il y a des champs rarement utilisés.
- Suivez les meilleures pratiques de conception de formulaire - Lisez l'article de Luke Wroblewski auquel M. Angeltveit a lié, et lisez également cet article sur formulaires Web 'pièges et astuces .
Comme avec tout le reste - esquissez, testez et répétez jusqu'à ce que vous trouviez la meilleure combinaison de formulaires. Bonne chance!
1) Lisez à propos de principes de la Gestalt , en particulier les principes de regroupement . Cela vous donnera un aperçu de la façon dont le cerveau interprétera l'organisation visuelle de votre page.
2) Lisez Luke Wroblewskis article sur la conception de formulaires Web (ou son livre). Cela vous apprendra à créer des formulaires Web fonctionnels.
Google et Apple ont également adopté l'approche selon laquelle les utilisateurs voulaient faire 1 chose avec leur produit, et ont fait 1 entrée et 1 contrôle pour le faire.
Donc, selon Yosef (et Krug, bien sûr), enlevez les choses jusqu'à ce que cela devienne un problème, puis contournez le problème et continuez à les enlever, jusqu'à ce que vous ne puissiez pas contourner le problème. Et commencez par vous concentrer sur "ce que les gens veulent faire avec ça", et non "que pouvons-nous obtenir des gens".
L'IME, axé sur l'utilisateur final est à la fois rare et hautement productif. Google et Apple font, et ils ne s'en sortent pas trop mal - non seulement en termes de revenus, mais en termes d'amour des utilisateurs. MS, OTOH, ne le font pas très bien, et perdent des parts de marché et n'ont jamais eu l'amour des utilisateurs comme Apple.
Vous pouvez gagner de l'argent, à court terme, avec un produit merdique. Vous ne pouvez gagner de l'argent à long terme (de nos jours) qu'avec un bon produit.
Lorsque vous concevez votre formulaire, pensez-y comme comment je vais amener l'utilisateur de A à B de la manière la plus simple et la plus agréable possible.
J'envisagerais de diviser le formulaire en étapes via javascript afin que le formulaire ne semble pas long et intimidant pour l'utilisateur.
Essayez de les garder concentrés sur les champs en déplaçant toutes les étiquettes en ligne et les descriptions sur le côté droit du formulaire et sur le côté des éléments de formulaires et affichez uniquement lorsque l'utilisateur se concentre sur un élément de formulaire particulier ou envisagez même d'utiliser un pop sur une icône d'information.
Essayez de remplir le formulaire pour eux sur les choses que vous pouvez rassembler comme leur emplacement, par exemple. Banlieue, code postal et ou suggérer avec le lien "Remplissage automatique avec somesuburb".
Utilisez la suggestion automatique pour les aider à taper moins.
essayez de le garder compact afin que l'utilisateur n'ait pas à faire défiler la page.
Soyez direct et gardez vos mots minimaux dans tous les messages d'erreur sans sonner dur, grossier ou condescendant et surtout sans sonner comme un robot à répétition. par exemple. Obligatoire ... Obligatoire ... Obligatoire ...
Évitez d'utiliser le mot requis sur l'étiquette, utilisez plutôt (facultatif) sur tous les champs qui ne sont pas obligatoires.
N'essayez pas d'être unique ou de réinventer la roue comme si vous essayez si fort d'être cool avec de nouveaux noms fantaisistes pour vos étiquettes, soyez direct et utilisez ce que les gens connaissent déjà dans ces domaines et qui parle à tout le monde à chaque niveau (p. ex. enfants, parents, grands-parents).
Utilisez des étiquettes plutôt que du texte d'espace réservé uniquement si vous envisagez cette méthode. Il est toujours ennuyeux de devoir se concentrer pour voir ce que vous devez taper dans un champ de saisie et utiliser du texte d'espace réservé comme moyen d'indiquer quoi écrire à l'utilisateur.
Essayez de garder les cases à cocher et les radios sur une seule ligne.
Plutôt que de penser à toutes les grandes choses que vous pouvez mettre dans votre formulaire, pensez à ce que je peux retirer pour le faire ou l'utilisateur a-t-il réellement besoin de le spécifier.
J'espère que cela vous aidera à démarrer!
Comme beaucoup d'autres l'ont dit, pensez au regroupement. De plus, les principes de hiérarchie entrent souvent en jeu avec ces regroupements. Des en-têtes clairs pour les groupes d'informations sont essentiels lorsque vous demandez beaucoup d'informations sur un formulaire.
J'ai récemment eu un formulaire très volumineux qui faisait partie d'un processus d'approbation vaste et complexe qui oblige le formulaire rempli à passer par une variété de files d'attente car il est marqué par diverses personnes pour approbation. Pour résoudre l'organisation, le formulaire a été divisé en "onglets" à gauche qui se déplacent avec l'utilisateur au fur et à mesure qu'il remplit les zones, lui permettant de savoir quel type d'informations il doit saisir à ce moment-là. Il n'y a pas de défilement, mais plutôt des boutons "suivant" pour passer d'un sujet à l'autre.
Toutes les étiquettes de champ sont au-dessus des champs alignés à droite avec le champ de saisie pour une numérisation facile.
Cet article sur Smashing fournit d'excellents conseils et ressources.
Ma recommandation, et là où je pense que toute saisie de données et interaction est dirigée, est la présentation intelligente et dynamique des champs en fonction du contexte. Voici l'exemple le plus simple possible ...
[[# # ~] exemple [~ # ~] Un formulaire d'inscription, se présente comme simple et rapide, avec trois champs (amélioration de la mise en œuvre) Puis ajoute des champs au fur et à mesure que l'utilisateur termine la tâche.
PERTINENCE ET APPRENTISSAGE CONTEXTUEL Les formulaires contextuels sont conçus de la même manière, de sorte que si vous demandez à quelqu'un Possède-t-il sa propre maison, la question suivante "depuis combien d'années possédez-vous votre maison" n'est-elle pas présentée si la réponse est négative. S'ils ont répondu qu'ils n'avaient pas d'enfants, vous n'avez pas de champs pour leur âge. etc.
HELP MENUS pourrait être si facilement géré avec une pertinence contextuelle. Si un utilisateur est connu pour utiliser un outil de dessin, par exemple, l'aide pertinente serait sur cet ensemble d'outils ... Quelqu'un devrait aider Adobe et Apple avec cela.