Contextual alerts at floresfrescas.com

by javier on 16/06/2010

We recently noticed that some people miss filling a gift card when sending flowers through floresfrescas.com. We know they miss them because some users later complain about not having that option. This is the solution Mark Mackay came up with:

These are some of the principles we’ve applied here:

  • Place the alert as close as possible to the spot where the decision has to be made.
  • Add visual feedback that something important is going on (the message flashes) so it is noticeable.
  • Change the form (size, color and text) of the confirmation element to make sure the user notices the alert

Here’s the full scene:

If we knew that not noticing the cards was too frequent we’d consider haing another step in the process just for filling the cards. But we are unsure about that and there is no easy way for knowing this (no, usability tests don’t work for that because users pay extra attention when observed). So instead of redesigning the process making it more effective and painful we went with this “user interface hack”.

There are 5 comments in this article:

  1. 16/06/2010Tweets that mention The Cosmonauts: Contextual alerts at floresfrescas.com -- Topsy.com says:

    [...] This post was mentioned on Twitter by Floresfrescas.com and maria fanjul, Javier Cañada. Javier Cañada said: This is how we've done it: contextual alerts at floresfrescas.com: http://www.vostok.es/blog/contextual-alerts-at-floresfrescas-com [...]

  2. 16/06/2010Juan Leal says:

    Interesting but imho:

    If they miss that gift card, with this solution you’re “hiding” the solution with a link, instead of using that big button (“Continuar sin tarjeta”) that skips the step.

    So why not replacing the label of the button with “Escribir un mensaje” (main objective here) and using the link to skip the step?

    Sure you’ll get more gift cards :)

  3. 16/06/2010Mark says:

    Juan: I gave it some thought at implementation time, but I concluded that writting a message should be the secondary action because few people miss freebies, especially if it’s already hightlighted and bold :)

    Many people buy flowers for their own homes, or as a gift but to hand them in person with a hand-written note. To these users the notice is a drag. I implemented the least intrusive option, which is displaying the same action (“continuar”) at the exact same location where you clicked.

  4. 16/06/2010Juan Leal says:

    Oook, now I get the point. I thought that highlight was shown after clicking on the “Continue” button (that animated .gif brought me to think this way).

    Your explanation cleared my wrong understanding.

    Good job! :)

  5. 16/06/2010Mark says:

    It is displayed after the click! (on hover would be a bit startling).

    Try it yourself to get a feel of how it works:
    http://www.floresfrescas.com/products/1-ramo_de_la_semana/sell

Write a comment: