Techniques et / ou exemples de pages de vente longues?
J'ai travaillé avec un certain nombre d'experts UX au cours des derniers mois et bien que j'aie résisté à emprunter le chemin de la "forme longue", ils m'ont contourné à cette époque à maintes reprises sans faute. Il y a un consensus à 100% que la forme longue est la bonne approche pour mon produit de courbe d'apprentissage peu compris et potentiellement plus raide.
Compte tenu de cette position, je cherche à apprendre la technique appropriée de "forme longue". J'ai terminé la plupart de la rédaction textuelle, mais maintenant je cherche:
A) des méthodes pour l'améliorer ou l'ajuster pour une narration maximale et un attrait commercial (tactiques psychologiques) et
B) une démonstration claire ou des exemples solides de la façon de concevoir visuellement le contenu correctement.
Pourriez-vous me fournir des informations à ce sujet?
Les exemples de page de formulaire long sont un sou une douzaine, pour ainsi dire, (vous pouvez voir un million de hits WSO sans vraiment trouver d'exemples dorés), donc je cherche des exemples ou des techniques de "crème de la crème". Encore mieux serait des détails à suivre ou un tutoriel qui explique les modèles éprouvés qui fonctionnent.
Il y a ce livre, par Caroline Jarrett: " Forms that Work: Designing Web Forms for Ergonomie (Interactive Technologies) ".
Elle communique son expérience d'années de travail pour le gouvernement britannique sous la forme de formulaires très longs.
En plus de cela, je peux déchiqueter quelques idées:
- Brisez le formulaire en pages. Ne pensez pas forme longue = beaucoup de défilement . Faites de chaque page une sorte de section des données, contenant des champs en quelque sorte liés. En bas de l'écran, définissez un artefact avec
[prev]et[next]et le numéro de page ainsi:[page 3 of 8]. - Lorsque le formulaire est long, il est important de rendre l'aide disponible à proximité du champ correspondant. Idéalement, je montrerais des instructions juste en dessous du champ correspondant.
- Utilisez la disposition dite "à deux colonnes", avec des étiquettes à gauche des champs de saisie. Pour les petits formulaires, la pose des étiquettes au-dessus des formulaires n'est pas un problème.Pour les formulaires longs, les dispositions à 2 colonnes présentent des avantages, comme des textes d'étiquette plus grands et donc plus lisibles, des formulaires à hauteur réduite moins décourageants à première vue et avec moins de défilement. En outre, faites de la colonne à 2 colonnes en fait 3 colonnes avec 1 étiquette, 2 champs et 3-le bouton d'aide local.
- Lorsque l'utilisateur clique pour obtenir de l'aide sur un champ, affichez-le juste en dessous du champ, en faisant glisser les champs restants avec une animation de type jQuery. L'animation aide l'utilisateur à voir où sont passés les autres champs au cas où ils glisseraient sous le pli.
- Utilisez différentes tailles pour les champs de saisie, en fonction de la longueur attendue du texte attendu. C'est un bon conseil pour l'utilisateur, et cela aide également à se recentrer rapidement (par opposition à une colonne d'entrées de taille égale qui force l'utilisateur à analyser à nouveau les étiquettes).
- Montrez à l'utilisateur où se trouve le focus, par exemple en modifiant légèrement la couleur d'arrière-plan du champ.
- Bien sûr, en ce qui concerne l'artefact précédent/suivant, ne perdez pas l'entrée de l'utilisateur lorsqu'elle examine les pages précédentes.
- De nombreux formulaires mettent en évidence les étiquettes et les bordures, je préfère les atténuer afin de rendre le texte saisi plus visible, plus facile et plus rapide à réviser. Mais c'est ma référence .
- En parlant de frontières, plus il y a de choses dans la forme, plus le travail cognitif nécessaire pour le grogner est élevé. J'aime les rendre aussi minimalistes que possible. Par exemple, affichez un bouton d'aide très léger uniquement lorsque la mise au point atteint le champ associé et mettez-le en surbrillance uniquement.
- N'affiche jamais un champ de saisie à droite d'un précédent, à moins qu'ils ne soient complètement liés, comme
name first[_____] second[_____]. Ce faisant, vous risquez de confondre l'utilisateur dans l'un ou l'autre choix, ou tout simplement d'oublier le second.