Comment placer 3 boutons CTA tout aussi importants?
Ceci est un formulaire de devis de transfert aéroport que j'ai créé.
L'utilisateur sélectionnera d'abord la prise en charge, la destination et le nombre de passagers.
Ensuite, ils récupéreront le type de véhicule, le prix et le temps estimé.
À ce stade et si l'utilisateur le souhaite, je lui demande de prendre les mesures suivantes:
- Ajouter un transport de retour ou un autre transport
- Entrez leur adresse e-mail et bénéficiez d'une remise de 2 euros
- Continuez la réservation
Étant donné que ces actions sont complètement différentes les unes des autres, je ne sais pas s'il est correct de les placer au bas du formulaire. Existe-t-il de meilleures pratiques pour ce type de demande? Quel est le meilleur emplacement pour ceux-ci?
Un exemple en direct de ce formulaire peut être trouvé à www.simontaxi.com
Ma proposition:
- Les boutons opposés à chacun ensemble -> meilleure distinction et scannabilité.
- Les boutons ont plus forme carrée -> ils sont plus faciles à taper, moins de tapes manquantes, une meilleure convivialité
- Les boutons (qui sont également les actions) sont ensemble et mis en miroir, et l'entrée de courrier électronique est plus proche des entrées de l'autre formulaire -> conception plus cohérente.
- Icône de flèche ajoutée dans le bouton Continuer -> meilleure numérisation.
- Position en bas à droite du bouton Continuer correspondant aux attentes des utilisateurs mobiles/ modèles mentauxlié au flux.
- Les nombres sont dans une ligne différente et pas à la fin de celui-ci => Meilleure numérisation
(je ne sais pas si ce serait positif de parler du prix d'un point de vue marketing)
Si vous souhaitez que la pertinence de l'entrée e-mail soit plus ou moins au même niveau que le bouton, réduction de la hauteur des boutons et augmentation de celle de l'entrée, plus un changement de fond (un plus coloré, maintenant gris) le fera.
En ce moment, vous en demandez trop à l'utilisateur. Je demanderais l'e-mail sur l'écran de paiement, ce qui, je pense, est plus logique. Cela vous laisserait avec deux appels à l'action et le rendrait beaucoup plus simple à résoudre.
L'un doit être primaire et l'autre secondaire. Primaire avec un contraste élevé entre le texte et le bouton, secondaire avec un contraste plus faible. Les boutons d'arrière-plan solides combinés avec les boutons dits "fantômes" fonctionnent bien dans ce cas.
Au fait, le "transfert" est-il le même que le "transport"? Si oui, vous ne devez utiliser qu'un seul mot pour éviter toute confusion.
Je suis allé à l'exemple en direct que vous avez fourni et je l'ai utilisé.
Votre interface graphique est très, très bonne et je n'ai eu aucun mal à comprendre ce qui se passait. Je ne changerais rien. En fait, d'autres devraient l'utiliser comme modèle de simplicité de conception Web. Gloire!