UX Design of a Mobile Off Canvas Mini Cart

One of the most important aspects of UX is making it a very clear experience without making it so simple it hurts the experience.


In this post we are going to try a new Off Canvas Mini Cart in Magento. We are also going to design it so that we can make life a little easier on our front-end developers. With keeping mobile in mind first, we can create a cart that will occupy the full width. We can then use the same cart design and sizing for tablet and laptop sizes. If we are going above 1440 px we may consider new padding and size to fill the space. For this example we will use the same design for mobile, tablet, and laptops.

Related: The Checkout Debate: Multi-Step, One Step or Accordion

Clean & Simple

The goal is to keep this very clean and simple for the user to see at a glance the current items in their cart. We want to make sure to include only the most important information for the product. For example we have the colour/style of the watch, the quantity, and the price. This keeps it nice and simple and if the user needs to more details they can click to go to the full description.

Leave the Heavy Lifting for the Main Cart

When it comes to applying gift cards and promotions we will let the full cart page take care of those as well as shipping and taxes. Once all those are figured out we can display them in our off canvas mini cart if they continue to shop around.

Text and Function then Design

We really want to make an effort to make it easy right away to find the checkout button. We have found that the language you use for your call to action is extremely important and will affect your conversions. Typically calling out that it’s secure does wonders rather than just “checkout”. Here we make sure it’s green giving a positive indication (if you can you want to avoid red as it’s can be viewed as stop rather than go). We also want to make sure that only are checkout buttons have this colour. Then it helps make the relationship of that colour to checking out so the user can quickly identify the button no matter on what page.

Off Canvas Mini Cart Example:

DM-Mini-Cart-1024-16px
The take away from this is always think about only the important aspects of the design for the user. Sometimes making a design super clean can actually make it harder for the user to use the site especially forms. We can chat about that next time! Now that you know more about the UX Design of a off canvas mini cart, check out how to actually execute this strategy in this Magento mini-tutorial by our Certified Magento Front-End Developer Valentina here: [Mini Tutorial] Magento Mobile Off Canvas Mini Cart

Please tweet and share to gain access to all the psd files for mobile, tablet, and laptop! Thanks!

Related: [Mini Tutorial] – Change Step Order in Magento’s One Step Checkout