Magento Design Guidelines
-
Upload
karl-wills -
Category
Documents
-
view
224 -
download
0
Transcript of Magento Design Guidelines
-
7/31/2019 Magento Design Guidelines
1/26
Magento Design Guidelines
The purpose of this guide is to raise awareness of designing for a specific purpose
and technology (Magento), while implementing general best practices for
e-commerce design.
IntroductionWho should read this? Well, everyone involved in creating Magento e-commerce
experiences, meaning: The designer, web-developer and finally the client. Educating
everyone about the process, platform and the approach is essential.
It's MagentoMagento as a framework is now three years old and even at the beginning it had
one huge advantage over the competition (besides being the powerhouse it is and
its marketing): a well designed default theme which exposed its possibilities loud
and clear. In fact, the Modern theme (http://www.magentocommerce.com/magento-
connect/modern-theme.html) alone made me take a better look into the whole
framework making it my profession today.
The point is that just by installing Magento you get years of experience, testing and
best practices in e-commerce. Whether you take a look at the product page,
12/8/11 1:55 PM
1 of 26
-
7/31/2019 Magento Design Guidelines
2/26
catalog page, or the whole checkout process, good foundations are already laid out
for you. It's not all appropriate for every shop of course, and that's where you come
in.
In this guide I'll go through all of the important page views in Magento
It's necessary to go through the whole shopping experience to get the feel for the
platform you're designing for. The best way to do that would be to visit the demo
store (http://www.magentocommerce.com/demo) after reading this guide and to go
through the process of shopping for products, searching for a specific product,
reviewing the process of checking out as a registered or unregistered customer.
The next step would be really putting yourself in the position of the store owner by
going into the administration panel to get a perspective of how settings and inputs
from the administration panel affect the front-end.
In this guide I'll cover important aspects of designing the user experience by going
through all of the important page views in Magento. By doing so, you'll have a
complete outlook on the store, making it easy to keep track of project progress, and
it will help you present your design decisions/propositions to the client.
Let's begin...
Main Parts of the StoreThere are several major sections that need to be covered with each Magento
design:
CMS pages
Category product listing pageProduct view pageUser login/register page (logged or guest view)User account pageCheckout process
In order to fully grasp the sections mentioned above it's advisable to go over to the
Magento demo store (http://www.magentocommerce.com/demo) and take some
time to explore both the front-end and the back-end. At the bottom of the demo
page there are three choices for Front-end, back-end and then the multi-store demo
for the Magento Community Edition.
12/8/11 1:55 PM
2 of 26
-
7/31/2019 Magento Design Guidelines
3/26
Home page
Home page is the store front and should always address both newcomers and
regular customers, registered or unregistered, with your store to keep them
informed and engaged.
One of the best practices is to display featured and new products for loyal
customers, besides displaying main product categories for newcomers. Presenting
users with clearly defined options that engage instantly is the key, although finding
the balance is actually hard work that involves real data testing. Luckily, you can
always use different layouts and content variations while doing A/B testing and see
what works.
This is also an excellent place to state the not so obvious: Shipping availability,
Secure shopping, Info about the shopping process, links to store policies and so
12/8/11 1:55 PM
3 of 26
-
7/31/2019 Magento Design Guidelines
4/26
on. Everything that can resolve doubts, answer questions is welcome. In return, it
ensures a good relationship from the start.
I won't go into detail about this particular page since there are a lot of articles
addressing this challenge already.
Category PageDemo URL: Category page (http://demo.magentocommerce.com/catalog/category
/view/s/living-room/id/22/)
The belly of your store needs extra attention. This is where your catalog has to
shine from both an architectural and front-end standpoint. You can't afford to have
to go back and re-design the whole thing just because your shop inventory wasn't
12/8/11 1:55 PM
4 of 26
-
7/31/2019 Magento Design Guidelines
5/26
set properly, attributes, categories, prices etc. I'll address this either as "Catalog
design" or "Catalog Architecture"
Assuming you've set your product catalogue with care and attention you'll now
have these important aspects of the page to care of next:
Product Filtering
Grid viewList view
Presume you'll need both down the road, it's important to design both these views.
Product Sorting
This is a feature which reflects how well the "Catalog Design" has been carried out,and you'll need to pay extra attention to the needs of your customers if you intend
to empower them to find what they're looking for.
By default in Magento, sorting the products in a category and its respective
subcategories is done by way of a drop-down containing the list of attributes you've
set to be sortable in the admin panel.
From a usability point of view, you should consider customizing this one by
removing the need for that "arrow" which is used for ascending and descending the
values.
Tip: It's only a few hours of extra work but it pays of to have the options of "A-Z"
and "Z-A" listed one below the other than using an extra unintuitive click for that.
Prices
Sooner or later you'll have to deal with: "Special prices", "Tier prices", "From-to"
display of prices, "Price as configured", so it's better to have those planned already
in wireframes. Prices have their own section later on in this article
(http://webdesign.tutsplus.com/tutorials/workflow-tutorials/magento-project-
guidelines-for-designers/#tut-prices).
Rating
Besides all of the data for a single product listing on the category page here, ratings
are another aspect that needs to be planned ahead early in the wireframes, or at
least at the design stage.
12/8/11 1:55 PM
5 of 26
-
7/31/2019 Magento Design Guidelines
6/26
They are particularly interesting since their visibility can be set on a permission level
so that only registered users can actually review. This creates different versions of
the page based on viewing permissions.
Category page is also the perfect place to tag products that are "On Sale", "Hand
Picked" or perhaps "Coming Soon" with some nice looking informative graphics.
Product Page
With Magento you have 6+3 product types at your disposal, where those +3 are
placed across the store as "Up-Sell", "Cross-Sell" or "Related" products.
You need to know the platform you're designing for
It is essential to discuss what types of products will be used in the store, so thatyou can effectively design for the particular ones.
12/8/11 1:55 PM
6 of 26
-
7/31/2019 Magento Design Guidelines
7/26
At this stage, designing the product page, this is the moment you'll reallyneed to
get yourself acquainted with the layout and template structure if you haven't
already. Alternatively, consult with Magento experts about what implications your
design will have on developing the actual page.
Simple ProductDemo URL: Nokia 2610 Phone Product page
(http://demo.magentocommerce.com/nokia-2610-phone.html)
The following elements of the "Simple Product" are, in general, common to all
product types:
Tip:Use "Firebug" or "Web inspector" to take a look at the elements on the actual
demo page for yourself.
Product essential box
12/8/11 1:55 PM
7 of 26
-
7/31/2019 Magento Design Guidelines
8/26
Product collateral box
Product essential box
Product image box
Product imageImage Zoom sliderMore views image thumbnails
Product shopRatings boxAvailability boxPrice boxAdd to box holding add to cart button and "Add to wishlist" and "Addto compare"Quick Overview box
Product collateral box
This section of the product page is dedicated for the "Details", "Up sell products",
"Reviews", "Tags" etc.
One Magento quirk here is the "Reviews" which was is shown to the user after a
page reloads, replacing all other content in the collateral box. Bear this one in mind
while designing, or check out these (http://inchoo.net/ecommerce/magento
/get-product-review-info-independent-of-review-page/) articles(http://spenserbaldwin.com/magento/show-product-review-on-product-page/) on
how to make it work for you out of the "default" template content flow.
Simple Product with Custom OptionsDemo URL: Simple Product with options (http://demo.magentocommerce.com
/acer-ferrari-3200-notebook-computer-pc.html)
12/8/11 1:55 PM
8 of 26
-
7/31/2019 Magento Design Guidelines
9/26
Simple product with custom options adds an options section with "Add to Cart"
box placed inside, since the product's acquisition depends on both required and
non required options. This must be kept in mind since this page has to be updated
in the design for the simple product.
Price can be set as "Special price" or "Regular price" in which case both need to be
addressed in the design. Also, there is an option of Tier pricing which is explained in
the Magento knowledge base (http://www.magentocommerce.com/knowledge-
base/entry/how-do-i-use-tier-pricing).
Bundle ProductDemo URL: Bundle Product (http://demo.magentocommerce.com
/my-computer.html)
12/8/11 1:55 PM
9 of 26
-
7/31/2019 Magento Design Guidelines
10/26
The Bundle product page has a similar layout to the simple product, with the
exception of the price that can be displayed as "From/To" and "As low as", and with
the addition of "The price as configured.
In Bundled product types, there are also differences in the General and Prices
pages, as follows:
Bundle Items: Bundled Items appear in the store as a list of available options. Foreach option you can configure the title, input type (single and multiple selection
fields are available), whether the field is mandatory (for example: it can be True for a
computer processor and False for an additional battery of a laptop computer) and
its position on the page.
Price View: Specifies whether the product's price is shown as a range, from the
least expensive component to the most expensive (Price Range), or is only the least
expensive shown (As Low As).
12/8/11 1:55 PM
10 of 26
-
7/31/2019 Magento Design Guidelines
11/26
Grouped ProductDemo URL: Grouped Product (http://demo.magentocommerce.com/magento-
red-furniture-set.html)
The only significant difference when compared to the "Simple Product" page view is
that all the products of a group are presented inside a table.
Configurable productDemo URL: Configurable product (http://demo.magentocommerce.com/cn-clogs-
beach-garden-clog-83.html)
12/8/11 1:55 PM
11 of 26
-
7/31/2019 Magento Design Guidelines
12/26
This product type page has the configurable product options in form of a drop
down similar to the ones seen on the "Bundle product".
Downloadable ProductDemo URL: Downloadable Product (http://demo.magentocommerce.com/pivot-
table-excel.html)
12/8/11 1:55 PM
12 of 26
-
7/31/2019 Magento Design Guidelines
13/26
The layout is very similar to the layout of the "Simple Product" and has the
"Sample" feature that provides a link to the downloadable portion of the actual
"Downloadable product".
After the purchase, customers can download the product from the checkout page.
If you haven't already, you should get to know all the products inside-out by going
through the Magento documentation (http://www.magentocommerce.com/knowledge-base) and exploring the inner workings of the layouts and templates.
The main point of listing each and every "Product Type" page view is that you'll
need to pay attention to where you place the actual "Buy button" in your designs.
As a logical rule of thumb, it should always be positioned after all the choices and
options are listed. Common mistakes like placing an extra "Buy button" both on top
and the bottom of the product page are usability and technical nightmares, yet I've
seen such examples backed by the "The button is way below the fold" reasoning or
worse.
This example is an extreme one but it illustrates well what happens if the design
strays from the path of usability or just breaks the function of the page.
One other common case is when the product is out of stock, yet is still visible in the
store. In that case the "Add to cart" section is not displayed. This needs to be
addressed in the design as well.
12/8/11 1:55 PM
13 of 26
-
7/31/2019 Magento Design Guidelines
14/26
Up Sell, Cross Sell and Related
ProductsAs mentioned at the beginning of this "Product types" section, they are not special
by type, but by placement on the page or the site section.
Up Sell productsDemo URL: Up Sell Product (http://demo.magentocommerce.com/microsoft-
natural-ergonomic-keyboard-4000.html)
Up sell products are displayed on the product page in the product description. This
example presents a more expensive keyboard and other products as up-sells to the
less expensive keyboard.
Cross sell productsDemo URL: (Add something to Cart first) Cart Page(http://demo.magentocommerce.com/checkout/cart/)
12/8/11 1:55 PM
14 of 26
-
7/31/2019 Magento Design Guidelines
15/26
Cross-sell products appear next to the shopping cart by default. When a customer
navigates to the shopping cart page (whether automatically after adding a product
or otherwise), these products are displayed as cross-sells to the items already in the
shopping cart.
Cross-sell products can be seen as impulse purchases, like magazines and candy
at the cash registers in grocery stores.It's advisable to use this space in situations
when there's no cross sell product (not available, out of stock and so on) for a store
banner, message to the customer and the like.
Product types and Price(s)This is the point where I'll need to make a recap of the product types and various
price options. Please refer to Magento documentation afterwards.
12/8/11 1:55 PM
15 of 26
-
7/31/2019 Magento Design Guidelines
16/26
Types of products:
Simple product and Simple product with optionsGrouped productBundle product and "Bundle" with optionsConfigurable product and "Configurable" with optionsDownloadable product and "Downloadable" with optionsVirtual product and "Virtual" with options
Types of prices:
Regular priceSpecial priceFrom/to pricePrice as configuredTier prices
Every product can have a special price in addition to the regular price. Also, a
special price can be set to start and expire on a desired date.
"From/to" and "Price as configured" are displayed on a bundle product where the
price is ranged from the item with the lowest price up to the item with the highest
price in the bundle. On the category page there will be only a "From/to" price
displayed for the same product.
Tier pricing is a promotional tool that lets you price items differently for higher
quantities. This is an effective way to move more merchandise.
For example: you sell office supplies and you want to create a promotion where
customers who buy three boxes of printer paper save money compared to buying
just one box.
Next we'll go through the "Cart page" thus getting one step closer to the actual
Checkout process.
Shopping CartDemo URL: (Add something to Cart first) Cart (http://demo.magentocommerce.com
/checkout/cart/)
12/8/11 1:55 PM
16 of 26
-
7/31/2019 Magento Design Guidelines
17/26
Obviously, there are two states of the Cart : Empty and Populated.
Populated CartHere we have the page laid out in two rows. The first being the table displaying all
the products waiting to be purchased. Below them we'll usually have the "Cross
Sell" products (see "Cross Sell" products), Discount codes, Shipping and Tax and
finally the checkout section with subtotals, grand totals and the "Proceed to
checkout" button.
In brief:
Shopping cartCross sell boxDiscount & shipping & checkout button
The shopping cart is a table displaying the cart items with class names for
alternating the styles of each table row. This helps distinguish products from each
other when there are more then 4 products in the cart.
12/8/11 1:55 PM
17 of 26
-
7/31/2019 Magento Design Guidelines
18/26
Cross sell box appears only if the product has an cross sell product or products
are assigned from the store admin panel. Please see the Cross Sell page.
Shipping & Discount codes with the Checkout button are placed inside a div
(.cart-collateral-block) and since they contain input fields which are
displaying error messages those need to be designed too.
Empty Cart
The empty cart page is displayed when there are no products in the cart, so it's a
great opportunity to make it valuable to the user by designing it with some call to
action content. You can place a category listing, Advanced search box and/or
provide the link back to the last Catalog page visited.
Checkout (One page)Demo URL: (Add something to Cart first) One page Checkout
(https://demo.magentocommerce.com/checkout/onepage/)
12/8/11 1:55 PM
18 of 26
-
7/31/2019 Magento Design Guidelines
19/26
There are two main sections in the "One checkout page":
"Your checkout progress" displays checkout progress"Main content" Checkout steps in tabs
Checkout MethodBilling InformationShipping InformationShipping MethodPayment InformationOrder Review
The purpose of the "One page" checkout is to avoid the "many steps" feeling you
would get if every part of the checkout process from the "Main Content" was on a
separate page. Therefore, here we have all the steps combined on one page and
the data is passed back and forth to the server via AJAX.
Unless you're challenged with creating a fully customized checkout it's strongly
advisable to just "skin" this part.
By doing so you'll get fewer headaches with development and it will be easily
upgradable in the future (something to advise the client for sure).
One possible change in behavior of "tabs" is to make them visible one at a time and
use CSS3 or JavaScript animation for sliding for the next or previous step. Of
course, you'll still need the "Progress indicator" which can be set on top of the
checkout steps indicating all the steps in the process and highlighting the current
one.
12/8/11 1:55 PM
19 of 26
-
7/31/2019 Magento Design Guidelines
20/26
Finally, once the order has been placed, Magento will display the "Success Page"
and that's a great candidate for adding extra information about the purchase,
product shipment date, order summary and maybe some incentives to continue
shopping which are more engaging than the plain old "Continue Shopping" button.
If things don't go as planned with the checkout, well, then the user gets an errormessage which we'll go through next.
Message BoxesIn Magento all of the contextual interaction between the user and the store is
handled by message boxes. Message boxes can have "Error Messages" or
"Success Messages" presented to the user.
Since these interactions are an essential part of the user experience their design
and placement should be considered as a priority and not as an after thought.
Error message example in context:
Success Message example after submitting
valid data:
Error Message example after submitting
non-acceptable data:
12/8/11 1:55 PM
20 of 26
-
7/31/2019 Magento Design Guidelines
21/26
Notice Message example after submitting
data:
Primary consideration should be the placement of message boxes minding layout
and context.
Design should be pretty straightforward, since they onlyneed to fit into the look and
feel of the site.
SearchDemo URL: Search result (http://demo.magentocommerce.com/catalogsearch
/result/?q=computer)
Magento's built-in search function on the frontend has three ways of searching for
products:
Regular search using the search boxCatalog Advanced search using a separate page with options for the searchsettingsSearch with Autocomplete search with automatically suggested results
It should definitely be a key factor in every online store strategy. That's why you'll
need to pay special attention when designing the page for the following:
12/8/11 1:55 PM
21 of 26
-
7/31/2019 Magento Design Guidelines
22/26
No Results page
What will the user get to see besides the default "Message box" informing that
nothing was found?
Will you provide them with suggestions in case of a misspelled word, and/or an
advanced search page where your regular informed or savvy users can search by
SKU among other criteria?
Advanced Search
Advanced search form
12/8/11 1:55 PM
22 of 26
-
7/31/2019 Magento Design Guidelines
23/26
Advanced search results
Search Autocomplete
404 pageDemo URL: There's nothing to see... (http://demo.magentocommerce.com
/nooooway)
12/8/11 1:55 PM
23 of 26
-
7/31/2019 Magento Design Guidelines
24/26
The 404 page comes as default with Magento but, just like the favicon, it can slip
through the cracks and not get the attention it deserves. Being a CMS page you
can plan for the "Oh No!" user scenario by making it less stressful and provide
emergency strategy for the user.
Sidebar Blocks
I'm using the "Sidebar blocks" term for everything that appears outside of the main
content, for example, in two or three column layout templates.
Layer navigationCurrency selectorNewsletter
Popular TagsPollProduct ComparisonRelated ProductsMy Cart
There's no need to go into detailed description for each, I rather just listed them for
everyone to serve as a reminder.
12/8/11 1:55 PM
24 of 26
-
7/31/2019 Magento Design Guidelines
25/26
My Account and Transactional
Emails
My AccountWoohoo! We finally got to the part that in the end matters the most.
The My Account area of the site is what users will regard as their own place to get
all they need concerning the status of their orders, shipment and any other feature
that you have in store for them.
It's a great place to establish trust between the customer and the store, avoidingunnecessary communication by informing registered users about each and every
aspect of their shopping experience.
Designing the "My Account" area without any real data about customer needs is
tricky, but try to search for inspiration on other sites by becoming their customers or
pinpoint what's good and the bad about the stores you're already registered to.
Transactional EmailsThese are the PR and Customer Relations' right hand. For every order that's been
placed, shipment or general inquiry being sent to the customer each of these
represents the store and determines how well it's perceived.
You should have the designs for these emails ready before the launch since they
need to blend in with the rest of the brand's visual identity.
Luckily, Magento allows you to have complete control over them. You can findanswers in one of my older posts (http://inchoo.net/ecommerce/magento/custom-
transactional-emails/).
ConclusionI realize this one was a bit of a long read so I'm listing some of the highlights and
important stuff at the end.
12/8/11 1:55 PM
25 of 26
-
7/31/2019 Magento Design Guidelines
26/26
You should come back as often as you can and refer to this article as a sort of
general guide or a reminder when discussing projects and during design.
General guidelines
Get to know the platform you'll need that for your designs to workShopping experience It's invaluable. Get one.Consult Magento experts Prompt feedback when in doubtThink Back and forth: As a customer, store owner and developer
Design deliverablesThese are recommendations regarding your PSDs delivered to a developer or a
client. It would also be great to use some kind of a "Cloud Service" like "Dropbox"
for sharing.
One PSD Organize in Layer Comps or Layer GroupsAdd notes Describe What, Where, How and Why when neededDefine Colors This one is extremely helpful when coding CSSDefine hover, visited, active and normal states for links
This is it. You've come to the end of the article and will hopefully use these
guidelines in your project. Be aware that you can always come back and reference
it when you need to.
Remember, nobody notices what you do until you don't do it.
12/8/11 1:55 PM