The modal dialog that is used when clicking "add cart" creates quite some confusion. After discussing with Allison we concluded we should either add a shadow or transparent effect to the background. After doing a couple different designs I concluded we should use a shadow effect.

The problem that we are trying to solve is:

People are a bit thrown off by the popup upon clicking add to cart. Partially because there is no popup visual effect but also because its not a common webshop pattern. - Moderate

We do this by adding a shadow effect.
checkout-popup.jpg

If anyone wants to, I have also updated the visual styling a bit and solved the following issues:

  • The checkout/continue shopping buttons where hard to distinguish, I made continue shopping gray to solve this
  • There was a very long "the following product has been added to your cart" this was lengthy and hard to scan, instead of just I have created a small succes message.
  • I moved the close button inside the modal, so it could be noticed
CommentFileSizeAuthor
#7 Capture d’écran 2012-07-31 à 16.56.39.png36.09 KBcookiz
#3 Capture d’écran 2012-07-24 à 18.22.34.png196.46 KBcookiz
checkout-popup.psd3.5 MBBojhan
checkout-popup.jpg248.93 KBBojhan

Comments

guguss’s picture

guguss commented
Assigned: Unassigned » cookiz
guguss’s picture

guguss commented
Priority: Normal » Major
cookiz’s picture

cookiz commented
Assigned: cookiz » bojanz
Status: Active » Needs review
StatusFileSize
new Capture d’écran 2012-07-24 à 18.22.34.png196.46 KB

Fixed.
https://code.drupalcommerce.org/#/c/213/

bojanz’s picture

bojanz commented
Status: Needs review » Fixed

Merged.

Bojhan’s picture

Bojhan commented
Status: Fixed » Needs work

Can we also fix the labeling? And reverse the blue on total and $..

guguss’s picture

guguss commented
Assigned: bojanz » cookiz
cookiz’s picture

cookiz commented
Assigned: cookiz » Bojhan
StatusFileSize
new Capture d’écran 2012-07-31 à 16.56.39.png36.09 KB

https://code.drupalcommerce.org/236

Ok so the "title" on the dialog box is now "Item successfully added to your bag".
I've reduced font-size to 14px to have the title on a single line (to respect your initial redesign).

cookiz’s picture

cookiz commented
Status: Needs work » Needs review
Bojhan’s picture

Bojhan commented
Status: Needs review » Reviewed & tested by the community

Looks good to me.

bojanz’s picture

bojanz commented
Status: Reviewed & tested by the community » Fixed

Merged.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

Updated issue summary.