Via LukeW : les boutons « suivant » et « précédent » dans les formulaires

Luke Wroblewski nous gratifie à nouveau d’un article sur la conception de formulaire. Il évoque cette fois-ci le positionnement et la forme des boutons « Suivant » / « Précédent ».

Un des exemples détaillés dans l’article

1er cas : Les deux boutons sont trop près l’un de l’autre. Pas de distinction par la forme.

• Le risque d’erreur est augmenté.
• La distinction n’est pas assez forte, le guidage est trop faible

2ème cas : Les boutons ne sont pas centrés et mise en place d’une distinction par la forme.

• Le fait de ne pas centrer les boutons favorise la visibilité des boutons
• La distinction par la forme permet de mettre en valeur le bouton d’action le plus « important »

3ème cas : les boutons sont éloignés l’un de l’autre (bonne pratique) mais le sens n’est pas le bon (bouton next devrait être à droite dans le sens de l’action)

• En positionnant les boutons de chaque côté de la page, cela renforce le guidage.
• Le risque d’erreur est diminué.
• En revanche le sens n’est pas logique
• A noter que sur cet exemple, le contenu du formulaire est suffisament long pour que le bouton « Next » soit visible. Des libellés très courts et des champs très courts auraient eu pour effet d’ »isoler » le bouton « Next » totalement à droite et donc ne serait pas recommandé.

4ème cas : les boutons sont éloignés l’un de l’autre (bonne pratique) et dans le bon sens

• En positionnant les boutons de chaque côté de la page, cela renforce le guidage.
• Le risque d’erreur est diminué.

La suite sur le site de Luke Wroblewski