3

I'm currently redesigning our company's Magento theme, with the aim of increasing our conversion rate as much as possible (obviously :-) ). I have what I feel to be a good overall layout with the eye being drawn to all the right places - things like the 'add to cart', free shipping 'in stock', good product images, reviews etc all have prominent yet tasteful design features to draw the eye.

One area I felt was neglected was the actual 'checkout' button in the header of our page. I didn't want to make the button larger or use a clashing colour to draw the eye as I felt it might compromise the overall feel of the design, so what I've decided to do is (obviously I'll A/B test this) add a white line of shimmering light to infrequently glaze over the button, with the hope of subconsciously attracting the users attention - should it be something they may have missed at first.

Before I implement this (and start testing) I was wondering if anyone else had any experiences with this kind of thing that they could share, or if there are any other good examples of how animation can be used in design.

Thanks.

Improve this question

1 Answer 1

Reset to default
3

I would suggest that you only bring attention to the checkout button at an appropriate time, such as after the user has added an item to the basket. Also that the checkout button area is more than just a button (see below).

If the basket is empty, there's no point in drawing the eye to it every now and then - it distracts the user away from the shopping/browsing task.

Immediately after an item has been added to the basket is the perfect time because that's when the user is most likely to want to click on it. It's also a reasonable time to do it, even if the user wants to add more items to the basket - as opposed to just doing it 'infrequently' (ie a bit randomly).

As to the method of drawing the eye to the checkout button, typically:

  • the background changes colour
  • the number of items in the basket changes
  • the value of the basket changes
  • the checkout button is enabled once the first item is added.

That should be plenty of change enough to attract the user's attention, without having to add animation as well, and the changes are so much more pertinent to the user. An animation effect is just going to leave the checkout button in the same state afterwards as it was before!

Here's an example from John Lewis

enter image description here

Notice how they also change the wording from a descriptive Your Basket to an actionable View Basket once items are added. A nice touch.

Improve this answer
3
  • I realise this is not an answer to the question as specifically asked - I just think it was the wrong question :-)
    – Roger Attrill
    Commented Dec 15, 2011 at 10:16
  • Thanks, that's some good logical reasoning right there. :-) With my particular setup, the user is taken to the actual checkout page when they add a product to the cart with the option to 'continue shopping' to return to where they were. Given what I just said, I should probably not need to draw the users attention to the checkout button... The John Lewis example is good - it does make sense to disable the checkout button if there is nothing to "check-out". Thanks.
    – Anonymous
    Commented Dec 15, 2011 at 10:18
  • Taking users straight to the checkout page is another question worth asking. Are you trying to close the sale after one item, or go for a fuller basket?
    – Taj Moore
    Commented Dec 15, 2011 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.