web-dev-qa-db-fra.com

Meilleur emplacement pour les actions de page "ultimes"

Je conçois une interface pour une société financière et je ne suis pas fou de l'emplacement de nos boutons dans certains de nos wireframes.

Current Wireframe

Essentiellement, les liens dans la barre latérale gauche sont pour des actions "plus petites": envoyer un e-mail au PDG de l'entreprise, définir mon statut avec l'entreprise, afficher les contacts avec l'entreprise ...

Les boutons gris foncé me donnent des brûlures d'estomac. Ce sont ces boutons qui devraient permettre une action plus "ultime" sur l'ensemble de l'entreprise qu'ils regardent. Alors que les actions plus petites concernent la modification de paramètres mineurs, les boutons gris déterminent la manière dont l'utilisateur agira finalement sur l'entreprise. C'est un engagement aussi lourd que de cliquer sur "finaliser l'achat" sur un site de commerce électronique.

Quoi qu'il en soit, je pense qu'ils ont besoin d'un emplacement plus stratégique, tout comme la façon dont Google Apps a un bouton très saturé dans le coin supérieur droit. Cependant, je ne peux pas décider du meilleur endroit pour mettre cela afin que l'utilisateur ne le manque pas.

2
Adam Grant

Mon problème actuel avec cette conception est que lorsque j'ai vu cette disposition pour la première fois, je pensais que les parties grises étaient des en-têtes de table ou des styles pour simplement servir de différenciateurs. Ils n'attirent pas vraiment l'attention, car la plupart du temps, mon œil était concentré sur le contenu de droite. Ma recommandation serait d'avoir ces boutons lourds ou boutons d'appel à l'action situés à droite de l'écran dans des endroits stratégiques de telle sorte que le contenu mène l'utilisateur vers eux.

J'avais posté une réponse similaire dans cette question

Laquelle des options suivantes attire le mieux l'attention sur l'action "acheter des billets" sans nuire à la hiérarchie visuelle environnante?

Si vous n'aviez qu'un seul bouton lourd majeur, je recommanderais de le mettre à droite car il se démarquerait et la personne lirait de gauche à droite et son œil resterait sur la zone la plus à droite en dernier, mais puisque vous avez trois boutons, vous pouvez les échelonner par rapport au contenu comme cette maquette ici

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Cependant, si vous ne disposez que de boutons d'action uniques, consultez ces articles sur les informations sur les meilleures pratiques pour les boutons d'appel à l'action

  1. Boutons d'appel à l'action: enquête sur les meilleures pratiques

  2. Boutons "Appel à l'action": lignes directrices, meilleures pratiques et exemples

Si vous devez utiliser la disposition que vous avez spécifiée, déplacez votre bouton sur enter image description here

La raison étant que votre logo sera très probablement coloré et que le fait d'avoir un logo et un bouton colorés sur la même ligne fera sauter l'œil. Le fait de l'avoir plus bas dans la deuxième colonne, il sera plus facile pour la personne de le remarquer car il scanne de gauche à droite et vous n'avez pas d'éléments distrayants sur la gauche

3
Mervin