Où dois-je placer ce bouton "Continuer mes achats"?
Je travaille sur la conception d'un site de commerce électronique et j'étais confus quant au placement idéal pour un bouton de poursuite des achats lorsque l'utilisateur est présenté avec sa page de panier. J'ai trois boutons sur ma page:
- Mise à jour panier
- Check-out
- Continuer vos achats
J'ai déplacé le panier de mise à jour et le paiement à gauche de la page car le lecteur lirait de gauche à droite, mais je crains d'avoir trois boutons d'affilée.
Je peux voir votre point se déplacer vers la gauche, mais le positionnement du bouton à droite pourrait bien donner à l'utilisateur le sentiment qu'il poursuit le processus, car les boutons "suivant" ont tendance à être sur le côté droit.
Compte tenu de cela, j'envisagerais de réaligner vos boutons vers la droite (où ils se trouvaient évidemment avant dans la formulation de votre question), mais d'utiliser des espaces à gauche pour attirer l'œil de l'utilisateur.
Quant à l'ordre des boutons, le paiement doit être aligné à droite. Il y a un excellent article à http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/ qui fait beaucoup de points pour cela , mais celui où je veux en venir est:
Lorsque les utilisateurs cliquent sur des boutons d'action secondaires, ils s'attendent à ce que l'application ne fasse rien et les ramène à leur écran d'origine. Ainsi, les boutons "Annuler" fonctionnent comme les boutons "Retour". Lorsque les utilisateurs cliquent sur les boutons d'action principaux, ils s'attendent à ce que l'application effectue l'action indiquée par le bouton et les fasse passer à l'écran suivant. Ainsi, les boutons "Ok" fonctionnent comme les boutons "Suivant". Placer le bouton d'action secondaire à gauche et le bouton d'action principal à droite correspond aux fonctions des boutons "Précédent" et "Suivant" auxquelles l'utilisateur peut s'attendre.
Cela ressemble à la façon dont les boutons de pagination sont placés. Le bouton qui redirige les utilisateurs vers la page suivante se trouve à droite et le bouton qui redirige les utilisateurs vers leur page précédente se trouve à gauche. Ce placement de bouton fonctionne car il correspond à la direction de lecture et de navigation de gauche à droite de l'utilisateur, où droite est la direction de progression et gauche est la direction de régression.
Nous savons donc que nous avons la caisse à droite. Et les autres? Eh bien, Continuer les achats ressemble plus à un bouton de retour dans ce cas, donc l'endroit le plus logique pour le mettre est à droite. Cela conviendra également à votre interface utilisateur si le bouton est stylisé en tant que texte et les autres sont stylisés en tant que boutons complets. Cela nous laisse avec le bouton de mise à jour au milieu - également bon pour UX comme si nous le devions, comme l'utilisateur le fera inconsciemment, comparer cela à la pagination, la page "du milieu" ou "actuelle" ne nous mènera nulle part.
Comme l'a souligné TJH, le bouton "checkout" devrait être à droite. Pour renforcer l'idée continuer le long du processus, je voudrais aussi
- Remplacez le libellé par "Passer à la caisse"
- Utilisez un bouton "pointu":
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
En ce qui concerne le bouton/lien "continuer vos achats": avec une mise en page comme ci-dessus, vos utilisateurs vraiment en ont-ils besoin?
En supposant que je souhaite continuer mes achats, je peux cliquer sur
- l'un des éléments du menu de navigation de gauche
- le logo
- l'élément de navigation du menu supérieur "home".
Ce n'est pas un, pas deux, mais trois façons très évidentes de continuer à magasiner. Je dirais que vous n'avez pas besoin d'un quatrième.
Un bouton "continuer vos achats" aurait un sens dans le contexte d'une fenêtre/superposition modale, lorsqu'un article a été ajouté au panier et que l'utilisateur a le choix réel de faire:
J'accepte que l'action principale de "Checkout" soit à droite. Je m'attendrais normalement à trouver le lien pour continuer à magasiner (ce n'est pas vraiment nécessaire mais cela renforce l'idée qu'ils sont libres de prendre leur temps) à gauche. Je présenterais normalement l'appel à l'action Checkout sous forme de bouton et le lien pour continuer à magasiner sous forme de simple lien texte. Quant au contrôle de "Update Cart", ai-je raison de penser que c'est uniquement pour la mise à jour des quantités? Si c'est le cas, j'envisagerais de le placer directement sous cette colonne afin de clarifier son objectif.
Je voudrais également remettre en question un autre des boutons. Pourquoi toujours afficher un bouton "Mettre à jour le panier"? Selon moi, les utilisateurs ne peuvent faire que deux choses pour changer le formulaire:
- supprimer un élément
- augmenter/diminuer la quantité d'un article
Il y a maintenant deux façons alternatives de procéder:
- mettre à jour immédiatement le panier lorsque l'une de ces choses se produit
- fournir une action de mise à jour une fois les modifications apportées
À mon avis, il n'y a absolument pas besoin pour effectuer ces changements en deux étapes pour les utilisateurs. Lorsque l'utilisateur met à jour la quantité d'un article, mettez à jour le panier. Lorsque l'utilisateur supprime un élément, supprimez-le. Je n'ai trouvé aucune recherche à ce sujet, mais je pense que s'il y a un bouton "Mettre à jour le panier", mais pas "Annuler les modifications", cela entraînerait plutôt de la confusion de la part de l'utilisateur:
D'accord, j'ai changé pour trois livres au lieu d'un. Il y a maintenant un bouton "mise à jour" - que dois-je faire si j'ai changé d'avis et que je ne veux qu'un livre? Dois-je modifier à nouveau la valeur, puis cliquer sur "mettre à jour"? Que se passe-t-il si je continue? Pourquoi n'y a-t-il pas de bouton "annuler les modifications"?
Fait intéressant, Amazon utilise les deux approches. Supprimer supprimera instantanément l'article, en modifiant les résultats de quantité dans un lien de mise à jour ajouté.
Je suis également avec le vzwick sur le bouton "continuer les achats": c'est juste un autre élément qui n'est pas vraiment nécessaire.