Ideas how to fix notification experience (add to cart etc)?

For the past few days I've been working on overhauling a site design to work with 1.5 from 1.4. Some of the new features are useful, but some of the design decisions are...lets call them "perplexing".

A contender for "worst idea" is the page jump when adding a product to the cart or adding to the product comparison or whatever. I know users need to know the product has been added (which used to be signified by the product image flying off to the cart), but scrolling the page is just a PITA. At its most obvious, if you've got two or more related items that you want to add (e.g. a jewellery set of necklace, earrings and bracelet) then on the page for one item you might show the related items, think you'd like the full set, click "add" for the item and get scrolled to the top, then scroll back down, click add for the first related item, get scrolled to the top, scroll back down again, click add for the second item and get scrolled back to the top again (possibly with a "screw this, I'm not shopping here again if I have to keep doing this"). It'd be much better to just be able to scroll down so you can see the product and the related items then hit the three "add to cart" buttons with no more scrolling.

Unfortunately, not all of the actions have particularly good cues that they've worked (Amazon doesn't use JS/AJAX and dumps you to an "item added" page, while most comparison sections I've seen recently float a small box near the item you've just clicked with the list of selected items shown) so the user needs to know that something has occurred. I'm just really doubtful that all the scrolling is the right thing. I think it is mainly the position of the bar (which also causes page content to shift, which again seems like a bad idea) that kinda necessitates it.

Does anyone have any ideas, solutions or fixes that they've used themselves? Anything that still gives feedback but doesn't make the customer think "WTF was that about?" during their shopping session?

Thanks.

you could change the way an item is added to the cart, and design a popup window which notifies you the item has been added and fades away after a short period, that might solve your issue, then the page wouldnt jump anywhere.

A floating layer might be the best option, but it'd need to be close to the cursor. With the jQuery code that is there at the moment it wouldn't be a simple fix, as it seems to lose such useful information as "where the click was" by the time it gets to the common function.

Actually, I guess anything is going to be a bit of an overhaul in multiple places :\ Maybe one of the later versions will do something better and official

I agree the page jump with the notification bar is a problem. I've disabled it - but it leaves my site lacking a visual cue to show the add to cart has been successful.

Anyone know why the fly to cart animation was dropped? It was there in the early versions of 1.5.x but then disappeared.

On the site I support then I've removed the HTML for the cart at the top and added the shopping cart module. It puts it in a better position and makes it more obvious when things change for almost any link customers might click on.

I've just come across this in the extension store. Looks promising

http://www.opencart.com/index.php?route ... tification &sort=e.date_modified&order=DESC

Seems like a sensible idea. I might spend 15 minutes and do something similar and avoid spending $10. To each their own, but I don't feel a minor fix like that needs to be paid for.

IBBoard wrote:Seems like a sensible idea. I might spend 15 minutes and do something similar and avoid spending $10. To each their own, but I don't feel a minor fix like that needs to be paid for.

Did you ever do that? I feel the same way.

I've got it fixed in the top-right corner now. I can't remember whether it is quite what I had planned at the time, but it works well enough, and with just CSS (I hate using JavaScript unnecessarily) then it stays in place when people scroll, so it is always visible.

Basically, I think I've tweaked the template and the CSS so that the existing notifications are still used but are in a new place. Comparing to the demo site, I think I've tweaked the JavaScript to add a timeout to make it disappear as well as appear. Unlike the default one, nothing moves.