Exemples de bonne utilisation de l'animation sur les pages Web
Je suis en train de repenser le thème Magento de notre entreprise, dans le but d'augmenter notre taux de conversion autant que possible (évidemment :-)). J'ai ce que je ressens comme une bonne mise en page globale avec l'œil attiré aux bons endroits - des choses comme le `` ajouter au panier '', la livraison gratuite `` en stock '', de bonnes images de produits, des critiques, etc. ont toutes un design proéminent mais de bon goût caractéristiques pour attirer l'œil.
Un domaine que je pensais avoir été négligé était le bouton de "paiement" dans l'en-tête de notre page. Je ne voulais pas agrandir le bouton ou utiliser une couleur conflictuelle pour attirer l'œil car je pensais que cela pourrait compromettre la sensation générale du design, alors ce que j'ai décidé de faire est (évidemment, je vais tester A/B ceci) ajoutez une ligne blanche de lumière scintillante pour glacer rarement sur le bouton, dans l'espoir d'attirer inconsciemment l'attention des utilisateurs - si c'est quelque chose qu'ils ont peut-être manqué au début.
Avant de l'implémenter (et de commencer les tests), je me demandais si quelqu'un d'autre avait des expériences avec ce genre de choses qu'ils pouvaient partager, ou s'il y avait d'autres bons exemples de la façon dont l'animation peut être utilisée dans la conception.
Merci.
Je suggère que vous n'attiriez l'attention sur le bouton de paiement qu'à un moment approprié, par exemple après que l'utilisateur a ajouté un article au panier. De plus, la zone du bouton de paiement est plus qu'un simple bouton (voir ci-dessous).
Si le panier est vide, il ne sert à rien d'y attirer l'attention de temps en temps - il détourne l'utilisateur de la tâche d'achat/de navigation.
Immédiatement après qu'un article a été ajouté au panier, c'est le moment idéal, car c'est à ce moment-là que l'utilisateur est le plus susceptible de vouloir cliquer dessus. C'est également un délai raisonnable pour le faire, même si l'utilisateur souhaite ajouter plus d'articles au panier - au lieu de le faire "rarement" (c'est-à-dire un peu au hasard).
Quant à la méthode de dessiner l'œil sur le bouton de paiement, généralement:
- l'arrière-plan change de couleur
- le nombre d'articles dans le panier change
- la valeur du panier change
- le bouton de paiement est activé une fois le premier élément ajouté.
Cela devrait être beaucoup de changement suffisant pour attirer l'attention de l'utilisateur, sans avoir à ajouter d'animation également, et les changements sont tellement plus pertinents pour l'utilisateur . Un effet d'animation va juste laisser le bouton de paiement dans le même état par la suite qu'avant!
Voici un exemple de John Lewis
Remarquez comment ils changent également le libellé d'un panier descriptif Votre panier en un panier actionnable Voir une fois les articles ajoutés. Une belle touche.