How to add Configurable Product in Magento

[Read more]

Polaroid: A Free Magento Theme For Your E-Commerce Website

Today we are glad to release a yet another freebie: Polaroid Magento Theme, a professional design skin for the shops powered by the popular open-source ecommerce web application Magento. The theme was designed by eCommerce-Themes and released for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.

Download the theme for free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

• live demo
• large preview (.png)
• installation guide and documentation
• download the .zip-package (zip, 1.1 Mb)
• release on the developer’s site

Features

The Polaroid theme includes the following features:

• the Polaroid effect is made with CSS3. The product grid displays products in random orientations.
• Product zoom: the category page was spiced up by adding a zoom functionality to the product grid. When you mouse over a product, it zooms in to show the product in more details.
The .zip-package also contains additional modules “Best Sellers”, “Features Products”, “New Products”, and “Multi Shipping”.

Home (large preview)



Category (large preview)

[Read more]

Boost Your Mobile E-Commerce Sales With Mobile Design Patterns

People are increasingly using their smartphones as a replacement for desktop computers, even for activities such as shopping and purchasing. And as more people move away from the desktop and onto mobile-optimized websites to shop for products and services, website creators can use established design patterns to help kickstart a mobile e-commerce project.

Having a good mobile e-commerce experience matters a lot. In fact, recent research has found that people are 67% more likely to make a purchase if a website they’ve reached on their phone is smartphone-friendly.
The power of design patterns is that they show you how other designers have solved similar problems so that you are not always reinventing the wheel. They also enable you to design your website in a way that meets the expectations that people develop from the other websites they’ve used, and they encourage you to consider design approaches that you would not have thought of on your own.

In this article, which focuses on smartphones, not tablets, we’ll look at design patterns and approaches used for mobile e-commerce functionality, including the following:

• Home pages,
• Site-wide navigation,
• Suggested search,
• Search results,
• Search filtering and sorting,
• Product pages,
• Photo galleries,
• Shopping carts,
• Checking out with an account or as a guest,
• Forms.

All the examples in this article are drawn from mobile websites that run in smartphone browsers. Most are taken from large multi-department retailers because they have large product catalogs that require a thoughtful approach to features such as search and filtering and sorting of search results. There are also countless native apps for e-commerce, and many of these patterns can be applied to them as well.

Home Pages

When visited on mobile devices, home pages are often less about content and more about helping users find what they are looking for. Common patterns are simple single-column layouts for promotions and single-column lists of links to featured website areas or product categories. Keyword search is commonly included on home pages, as are links to store locators and registration forms for promotional emails and loyalty programs.



Amazon and Macy’s both use a mix of promotional elements and list menus.



Target’s promotional content takes up more screen space than a simple list but makes a stronger visual impact. Threadless uses a dashboard pattern, which is more common in native apps than on e-commerce websites on mobile.

If shoppers are coming to your website to compare prices quickly, then a simple list pattern and search function are probably more desirable. If they are coming to explore promotions and sales, then the approach taken by Target may be more appropriate. To answer these questions, you’ll need to mine your analytics to get an idea of what consumers are doing on your website.

Site-Wide Navigation

Beyond using the home page as the main navigational hub, many websites also have navigation menus on most of their pages, usually in the header. This enables shoppers to easily get from one part of the website to another without having to return to the home page.



Lowe’s site-wide menu has icons for each option. Best Buy’s menu has a two-column layout for navigation and has buttons instead of list items. Lowe’s menu covers the page when it appears, while Best Buy’s pushes the page’s content down the screen.



Macy’s has a site-wide menu that contains submenu options. CVS has a two-column menu with an icon for each option. In both cases, the menu is displayed at the top of the page.

As you can see from the screenshots above, there are several ways to design a site-wide menu. Lowe’s design is simple, and the icons add a nice bit of visual polish. The fact that the rest of the page fades into the background when the user chooses to use the navigation helps users focus on their current tasks. CVS seems cluttered in comparison, with two columns of options, each item accompanied by an icon. CVS’ menu also places a lot of tap targets close to each other, which can present usability problems on touchscreens.
It’s interesting that large e-commerce websites usually don’t have many navigation options displayed at once. They try to balance the visual design of the navigation with the information architecture of your website, carefully considering the number of items that should be in the global navigation. Use website analytics to see which menu options shoppers click to help you determine what should be in the menu. Conducting A/B testing and usability tests of different designs to see whether one has too many options and overwhelms people is not just recommended but necessary to find the optimal solution — for your business and for your users.

Suggested Search

Suggested search, also known as type-ahead or autocomplete, displays potential results as soon as a shopper has typed in a few characters. For commonly searched terms, this can be a real convenience to shoppers, especially if the search term is long. One limitation of suggested search is that tapping a wrong character on a virtual keyboard is easy, which would change the suggested results. Showing common “correct” results instead might be useful. Also, consider using an improved Auto-Suggest pattern to reduce the amount of typing needed to enter queries, and utilizes slower mobile bandwidth in the most efficient manner.



Typing “d-r-a-f” into the search box on Office Depot’s website brings several possible results. And mistyping “d-r-a-g” instead of “d-r-a-f” leads to unexpected results for someone who is trying to find drafting supplies. Tapping a letter adjacent to the intended one is a common problem on virtual keyboards.
While designers can’t do anything about people mistyping queries, they can ensure there are other ways to get to product pages from mistyped results, such as drill-down lists for product categories or a site-wide menu of top-level categories. Website managers can also fine-tune their search functionality by suggesting results for “draft” from queries typed as “dragt.” Your ability to do this will depend on the search engine technology you are using.

Search Results

Two primary patterns are used for search results on mobile e-commerce websites: table display and grid display. Tables show a thumbnail photo and some basic information such as product name and price in a compact row. Grids show larger images with less descriptive information. Some websites allow shoppers to switch between the two views.



Zappos shows its search results in a grid to allow for larger photos of its products, a sensible choice in a market like shoe sales. Walgreens has a table that includes buttons for finding item in stores and adding items to a shopping cart.



OfficeMax asks shoppers to select a subcategory for broad search terms like “Paper.” Once a subcategory has been selected, results are displayed as a table. Searches for terms like “Scissors,” which have fewer subcategories, takes shoppers directly to the table view of the results.
Having shoppers select a subcategory can be problematic if it’s not clear where a product fits in a complicated hierarchy. In the OfficeMax example above, someone looking for 8.5 × 11-inch paper for their home printer might not know whether to look in “Copy & multipurpose paper” or “Laser paper.” A better approach might be to list subcategories under search filters, where they can be presented in context with other filters, like “color” and “size.” Regular testing (every 4–6 weeks) with representative users and commonly searched-for terms and top-selling products could give you insight into which approach is better. A/B testing could also reveal whether one approach gets more people to a product page and leads to a higher conversion rate.



Visitors to Gap’s website see a table display by default, with the option to see a grid display. Notice that Gap also retains the search term in the keyword field.

Gap lets shoppers choose how to view search results, allowing them to switch from an easy-to-scan list to a view with larger photos. Gap could have retained some product information though — e.g. prices — in its grid display (as Zappo’s does). Details such as price and color make it easier for a shopper to determine which product they want to learn more about.

Retaining the term in the field also reminds shoppers what they searched for and lets them easily narrow the results by adding another word (like “red”) to the search term.

Searching Gap for “men’s tshirts” takes shoppers to a page with no results (not shown), and without linking to search results for “men’s t-shirts.” Gap could improve its search by adding a “Did you mean?”-type question to the results page. Google handles this scenario by listing “mens t shirts” as a suggested query and then presenting results for “men’s t-shirts” if that suggestion is ignored.

Sorting Results

Sorting results helps shoppers organize a large set of results along a continuum of values, usually numerical ones such as price and consumer rating. Common interface patterns for sorting are buttons and <select> menus.



Walmart lets shoppers select one of three buttons to sort results. Sears uses a similar approach, but with a “segmented control”. JavaScript frameworks such as jQuery Mobile are making these app-like interface widgets more readily available to designers.



J.C. Penney allows for sorting through a <select> menu that is slightly customized in style, while Eddie Bauer uses the browser’s default <select> menu. Both trigger the browser’s native control for <select> menus (in these examples, the iPhone picker).

The size and generous spacing between Walmart’s buttons make for better tap targets; although, to be fair, Walmart has only three options, while Sears has four. Sears’ inclusion of an “All” button allows shoppers to get back to the original results page if they don’t find what they want after having sorted. Using a <select> menu is a quite safe choice because it is supported by modern mobile browsers and allows for longer lists of sorting options. However, it also takes a lot of valuable space. These are the types of design trade-offs that can be evaluated with regular testing.

Filtering Results

Filters enable shoppers to narrow their results based on one or more attributes, like color, brand and size. Filters are usually organized by type (called facets), with several values appearing under each facet (for example, color is a facet, and red is a facet value). Common interface patterns for displaying filtering options are <select> menus, drop-down lists and accordion displays. Filtering can be applied when one or more values are selected from within a facet. While allowing a single search to include values from more than one facet is technically possible, it comes with a higher interaction cost and could lead to no results (for example, cross-training athletic shoes that cost less than $75).



CVS uses <select> menus in its “Refine” tab for filtering. Selecting a menu option will immediately filter the results. J.C. Penney offers a drop-down list for selecting filters and indicates the number of products that match a filter value. J.C. Penney also allows multiple values from a single facet to be selected on one screen, the trade-off being that the shopper has to tap the “Apply” button.



Kohl’s uses an accordion to expose a set of checkboxes for each filter type. Threadless exposes the values for all of its search facets as buttons. On both websites, selecting a single filter value will immediately filter the results.

Showing the number of items available under each facet value offers greater transparency into what shoppers will get with each selection. Threadless’ approach of showing all available facet values takes up the entire screen, but it offers consumers an at-a-glance view of all filtering choices available to them. Whether you take this approach or use an accordion like Kohl’s will likely depend on how many facet values are present for a given category of products. If your catalog has a high degree of variability in the number of facet values for each category, then you will need to experiment to find the right design. You could optimize the filtering interface for those product categories for which shoppers use filters the most.

Product Pages

Product pages are where e-commerce websites really showcase their products in detail. They are not a “pattern” in the true sense of the word, but rather a collection of patterns that include elements such as tabs, accordions and photo galleries. Two common approaches to product pages are one long page with all of a product’s information or a page with tabs or accordions to allow for progressive disclosure of information as shoppers need it.



Samsung and Dell progressively disclose content on their product pages, which have a lot of information for shoppers. Samsung uses accordions to expose chunks of information, while Dell uses tabs.



Cabela’s and Office Depot both use a single long page to display product information. This approach requires more swiping up and down to get to information, but it frees shoppers from having to work with small tabs or manipulate accordion headers. Your choice will depend on the amount of information associated with a product and how the information can be broken down into logical sections.

Long product pages require more scrolling than pages broken into manageable chunks with tabs or accordions. They also require shoppers to put more effort into finding the specific information they are seeking. In my own usability testing, I’ve heard people express preferences for both approaches, but they seem to have an easier time working with a page broken into logical chunks. If you take this approach, make sure any content not initially displayed renders quickly when the shopper taps on the tab or accordion.
The obvious way to accomplish this is to load all of the page’s content at once so that the hidden content appears almost instantly. This approach has an advantage for when the user’s network connection drops while they are switching between sections. The big downside is that all product information has to be downloaded, whether it is actually viewed or not; this adds more load to your servers and uses more of the shopper’s data plan, which could be metered.

Photo Galleries

Photo galleries are particularly critical in e-commerce industries such as apparel and consumer electronics. You might not need to see a wrench from three different angles when shopping at Home Depot, but more images are better when looking for clothes, shoes or a high-end smartphone or tablet. A few commonly used patterns are the swipeable gallery, “double-tap to zoom”, and thumbnails for selecting photos.



Payless uses a swipeable gallery to show its products from different angles. Users can also double-tap to zoom in to see details like stitching and eyelets.

Payless wisely keeps its “Tap tap to zoom” call-out on the screen for several seconds, giving the shopper time to understand how to navigate the page and still notice it. The ability to zoom in to a photo to view a product’s details is critical for apparel and shoes.



Dockers (above left) has a swipeable photo gallery, with double-tap to zoom in to details, and shoppers can see a product in different colors. Levi’s (above right) takes a similar approach, with the addition of thumbnails to indicate the photo angles in the gallery. Selecting a new color on Dockers’ website causes a full-page refresh, while Levi’s does not.

Levi’s keeps most of the page from refreshing when the shopper changes colors, which at first seems like a better user experience. But, from a brief review of both websites on the same date and at the same time of day, Dockers’ full-page refreshes appeared to run faster from the time I tapped a color swatch to the moment the page with the new photo appeared. Levi’s slowness could have been caused by the five thumbnails needing to be refreshed, in addition to the main photo, or other unseen factors, such as a heavy traffic load. Each approach has its trade-offs.



Samsung (above left) and Dell (above right) both use swipeable photo galleries for their products. Samsung incorporates the gallery into an accordion on its product page, while Dell uses a separate page.

Samsung’s approach seems more user-friendly because it has fewer pages to navigate. Both Samsung and Dell go with large high-resolution photos, because apparently image quality is critical when looking at expensive products. One advantage to Dell’s approach is that it allows shoppers to focus on the photos themselves without any distracting page content.

Shopping Carts

Shopping carts usually display products using a table pattern. Besides displaying the contents to be purchased, they also offer additional functionality, such as the ability to save an order, to save a product to a favorites or wish list, to remove products or update quantities, to choose shipping or in-store pickup, to apply promotional or coupon codes, and to check out. Once a product has been added, a shopping cart is commonly reached through an icon in the website’s header or an option in the global navigation menu.



Each table row in the Lowe’s shopping cart (above left) lets the user remove the corresponding product from their cart, and it includes options for shipping or in-store pickup. Bed Bath & Beyond (above right) also allows items to be removed; product quantities may be changed for each item in the table, and a single button farther down updates the page.


Crate & Barrel (above left) has table rows that allow users to remove products, save to favorites and update quantities. Each row also includes shipping information such as cost and delivery time. Payless (above right) also allows consumers to update quantities and remove items; its cart also offers a choice of delivery options, including having the product sent to a Payless store (not shown).
Shopping carts should provide maximum utility because shoppers are close to the final point of purchase. Allowing shoppers to change quantities, remove items and apply promotional or coupon codes without having to go to another page is critical to getting them through the purchasing funnel quickly. If you feel this adds too much content to the page, you can use progressive disclosure to hide some content (such as promo code fields) behind accordions until it is needed.

Checkout

Checkout is more of a process than a pattern, although form patterns can be applied to checkout flows. Many e-commerce websites allow customers who use their websites on mobile to check out with an existing account or as a guest. For people who already have an account, the checkout process is greatly streamlined by using existing payment and shipping information.



Crutchfield and Nordstrom both allow customers to check out as guests or by using their existing account. Both allow mobile shoppers who have checked out as guests to create an account after placing their order, and both support password resetting.



Amazon asks for an email address on the first page of the checkout, whether the shopper has an account or is checking out as a guest. The experience is very much the same like for users of the website on desktop. Target offers options on the mobile website to sign in with an account, to check out as a guest or to create an account. Both support password resetting.

Allowing customers to either sign in or check out as a guest and to reset their password is a must for mobile e-commerce websites. Also, consider inviting shoppers to create an account on their phone after placing their order, because they have already given you enough information (except for a password) to do so. This could make guests more likely to create an account because the effort should be minimal at this point.
The “Create a Target.com account” button could lead to some abandoned carts if shoppers go down that path and decide it’s too much effort. Confirming the order first and then inviting registration on the invoice page might be better. Limiting the initial checkout screen to two choices could improve conversions because the shopper will have fewer decisions to make while working on a small screen. Fewer choices in critical tasks such as check out usually works better.

Forms

Forms are most commonly used in mobile e-commerce for searching, checking out, registering, and entering coupon and promotional codes. Be aware of a few good practices when designing forms for the small screen:

• Place form labels above input fields so that they don’t shift off screen when the user zooms into the input.
• Use HTML5 input types to display the appropriate keyboard for the field being used. For email addresses, use type="email". For numeric fields, like ZIP codes, use type="number" or type="tel" (the latter will display a numeric keypad with larger buttons).
• Make fields mandatory only when absolutely necessary. This will reduce friction in getting customers through the checkout process.

The best way to handle forms on a smartphone is to use as few of them as possible. You can use geo-location to suggest the shopper’s ZIP code, and you can allow customers to check out using the account information they entered earlier when using your site. Remember that the best form is the one the shopper never has to complete.


CVS (above left) doesn’t bring up a numeric keyboard when the user taps the ZIP code field on the checkout page. This requires one unnecessary tap from the shopper to get the correct keyboard. CVS also aligns labels to the left of form fields, where they could get pushed off screen if the user zooms into a field. Crate & Barrel (above right) has a much more mobile-friendly form. It brings up the large numeric keypad when someone taps the ZIP code field. It also top-aligns form labels so that they don’t slide off the page.

Remember that forms are how shoppers complete their transactions on websites. Pay special attention to them, and do everything you can to reduce the interaction cost of completing them. Sometimes it might even mean trying out something entirely different. For example, Typeform recently suggested a new kind of experience for more responsive, simple and user-friendly Web forms. The idea is to ask just one question at a time, but display it prominently, allowing users to type the hotkeys when filling in the form. This is not the option that would work in every situation, but for some forms it might be quite helpful.

Conclusion

With the increasing importance of mobile e-commerce as a source of revenue to retailers, mobile-optimized websites are offering many of the features that shoppers want and expect based on their desktop shopping experiences. And as the research by Sterling Brands and SmithGeiger shows, mobile consumers are more willing to purchase when the website is mobile-friendly.
By using existing design patterns, you can begin to explore different options to more quickly get your e-commerce website ready for the small screen. But don’t stop with existing patterns; use them as a jumping-off point to explore a design and to help you consider options you might not have thought of. And as browser capabilities increase, consider bringing interface design and interaction patterns from native apps into your browser-based smartphone shopping experience.

[Read more]

17 New Rules for Successful E-Commerce Websites

E-commerce has, for the most part, evolved far beyond the late 1990's cliches of hair-wrenching, sanity-shattering slogs through yet another "clever" designer's take on how shopping on the web should be. Standards prevailed, usability won out, and we're now free to spend our collective $107 billion (Census.gov e-commerce stats) per annum.

That said... It can still get better. Online shopping is in, if not infancy, at least a toddler stage. The advances that brought us here have made the process simpler and easier than ever, but some sites still haven't caught on.

Since I've been doing an inordinate amount of online shopping recently (thanks to the theft last weekend and my upcoming lengthy trip to China), I feel uniquely qualified to share a few e-commerce site design tips - 17 tips, actually. Enjoy.
_

_

#1 - Tell Me Where I Am
Whenever a user is navigating inside a store with more than 1 sub-level of navigation, it's critical to show them where in the site structure they are. This should be accomplished with headlines, sub-headers (when necessary) and breadcrumbs (e.g. Home > Category > Sub-cat > Product).

#2 - Let Me Remove Narrowing Options
When a user starts to "narrow" their navigation inside a particular category (in this case by selecting the designer "Ted Baker"), it's only right to allow them to remove those navigation selections rather than forcing the use of repetitive "back button" clicks.

#3 - Allow Me to Sort Every Which Way
The standards are "Price - low to high," "Price - high to low," "Popularity," aka "Best Selling," "Featured," "User Rating" (or "Editor Rating" if you don't have users rate products), and "New" or "Latest." You can eliminate "Featured" if you've got nothing to push, but all the other sorting options must exist (assuming it's possible to do so).

#4 - Show Me the Products
Unless you've got more than 200 products total in a sub-category, it's only right to offer the user the option of seeing every product on one page. Broadband has rendered the load time argument nearly irrelevant and I personally (along with Mystery Guest) can't stand sites lacking the feature.

#5 - Refining Options Bring Joy
If you can provide the user with a useful refinement option, you've made their experience better. In the instance of sizing, this is particularly important, as users loathe finding that "perfect" piece of apparel, only to discover you don't carry it in their size.

#6 - The More Specifics, the Better
Rule #6 is so worthwhile, I'm repeating it. Actually, #7 serves to illustrate a substantive difference between refining your browsing in a section (as #6 shows) vs. navigating to a new sub-category. Offering the latter as an option where relevant and valuable (and when the number of items warrants it) is a wise decision.

#7 - Tell Me What it Costs & What I'm Saving
Some product category pages shows items without the detail users are craving. It's particularly important for discount sites (anything off MSRP helps conversions) to show pricing, but nearly every website can benefit from providing an extra bit of detail before the click to the product page. Tell them materials, give a tiny description or list the sizes/colors/options you have in stock.
_

_

#8 - Keep the Search Bar in Easy Reach
When a search has been performed, don't just show the search and the results, do like the engines and make the search bar front and center, while maintaining the user's query in the box for potential modification.

#9 - Give Me Search Refinement Options
If you have an advanced searching system, or can allow users to select prices, options, colors, sizes, models, etc, do it. Your bottom line will thank you - users often rate "search" as the most frustrating part of many e-commerce sites (apologies for not having the study to cite here).

#10 - Get as Close As You Can Get (while staying relevant)
In the example above, eBay has done a masterful job showing which queries would have produced results. This advanced technique should be a wake-up call to others.
_

_

#11 - Share the Critical "Fit" Information
Many products are designed to "fit" certain criteria, whether it's a laptop (in this case) or a human body (with clothes) or another piece of equipment (when compatibility matters). In every instance of potential matches, show the critical information in the product details. I can't tell you how many laptop bag sites I browsed before finding this one that actually showed which laptop sizes it was intended for.

#12 - Tell Me If You've Got It
There are still sites out there that let you click "add to cart" or even "checkout" before discovering the awful truth - no more of your SKU in stock. It's the kind of experience that will lead you to permanently switch e-tailers.

#13 - You Can Never Have Too Many Photos
Since you don't get to see the item in real life, photos, reviews, videos and even fancy, 3D interfaces (where appropriate) are invaluable to helping the user feel like they've "experienced" the product prior to purchase. One photo, from one angle, sent by the manufacturer to every online store doesn't cut it. Go above and beyond the call of visual duty and conversions will skyrocket - links might, too.
_

_

#14 - Let Me See Delivery Options
There is a certain subset of users that has to see the delivery options before they start shopping. Older generations often fit this stereotype, but those baby boomers still have a lot of online spending years to go, so don't ignore them. It's best to make the link obvious in the permanent navigation (it's most customarily at the bottom of each page).

# 15 - If You Won't Send it To Me, Tell Me Who Will
In the example, Ted Baker is refusing to sell me the $200 dress shoes I want, but what's worse is that he won't tell me who will ship them to his old colony. I ended up finding them on Amazon.com, eventually, but Ted's losing out on his commission with them by not providing the link (and if I wasn't so dedicated to the brand, he'd probably lose the sale, too).
_

_

#16 - Reassure Me With Email
I panicked earlier tonight when I realized the replacement laptop I ordered may not have been shipped quickly enough to arrive in time for my trip to China (and no one wants to spend 28 hours on planes without a lappy). Luckily, Dell's order confirmation proved that I'd chosen wisely. Replicate this experience for your own customers, rather than leaving them in the dark (or, worse, crowding up your customer service dept. with e-mails that could have been answered in an automated fashion).

#17 - Give All the Order Details ASAP
When you send out order confirmations, make sure to include all of the product details to re-assure the buyer that they've selected properly. If I accidentally ordered the size 9 instead of size 8, I want to be able to fix it before the package arrives.

[Read more]

5 Universal Principles For Successful eCommerce-Sites

When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge.

There is no “Consumer Trust for Dummies,” but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur.

(Smashing’s note: If you are looking for a good book on mobile, this is the one. Our brand new book on best design and coding practices for mobile, Responsive Web design and UX design for mobile. Get it now!)

1. Paint Your Pictures At Home

If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you’re designing for the customer is a no-brainer.

Years ago, I had an SVP of DotCom tell my team, “You can go home if you want to paint pictures.” And for the rest of the day, I couldn’t wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn.

2. Good UX Is Like A Perfect Movie Score

Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple’s customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company’s products and reputation.

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because “it just works.” The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, “What would Jobs do?” and then look at other websites for inspiration.

3. eCommerce UX Pitfalls To Avoid

Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience.

Product Detail page

The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user’s time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.

A few recent trends on eCommerce websites are “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.

The Checkout Process

Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped.

But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them.

Security

Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough.

Page Weight

A page’s weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page’s “weight.”
Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser.

4. The Value Of Content And Then SoMe

We cannot talk about user experience without touching on content and social media (SoMe). In order to be profitable, eCommerce retailers need to engage customers with their content and use social media outlets within and outside their own websites.

93% of social media users believe a company should have a presence in social media, according to Cone, while an overwhelming 85% believe a company should not only have a presence in but also interact with its consumers via social media.

• 60% of all online adults use social media.
• 85% believe a company should not only have a presence in but also interact with its consumers via social media.
• 56% of users feel a stronger connection with, and feel better served by, companies when they can interact with them in a social media environment.

When a website such as Facebook, which just turned 5 years old in February, has an active user base of over 175 million people, it is easy to see the unlimited potential to increase your wallet share simply by giving your customers what they want. Some options are:

• Give your customer the ability to add your website or product detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter and Facebook.
• Give them the ability to customize their experience on your website. These experiences can range from customizing the home page as they see fit to uploading their image to go beside their product reviews.
• Create an RSS feed for your website. If your website has a blog or some other content area that changes regularly, give your customers the option to add it to their favorite RSS reader.

They say, “Content is king,” but if you cannot account for your king’s whereabouts, he needs to be beheaded. Your website’s content is only as relevant as its success. So, test as much as you can. Some tests you can perform to get hard data include:

• Website and email A/B testing
  Split your promotion views between your customers. 50% see version A, and 50% see version B. You can perform these tests for just about any purpose, but make sure your goals are clear before beginning. Figure out what you are trying to solve, and then move forward with the testing. From changing your website’s navigation to simply testing the style of your promotion’s copy, doing an A/B test will give you the relevant data you need to decide whether to update or remain the same.
• Polls
  Polls are quick and simple but, depending on your pool of users, can give you mountains of data. To get more people to take your poll, consider giving some kind of incentive to participate. Some polls are fun to take, but if you’re asking, “Which brand of television is better?” and not, “Who’s hotter, Jessica Simpson or Britney Spears?” then you may want to think more carefully about how much the feedback is worth.

5. Using Type And Color To Influence

Using color and typography is nothing new to designers. Using them in eCommerce is not much different. When designing for a retail website, your client is the customer. You are trying to convince thousands, tens of thousands, even millions of potential customers to click on your promotion and buy whatever you are selling. Consider the following.

Can It Be Read?

Most designers love to play with typography: twisting, shaping and contorting letters and word to obey your every whim, forming a beautiful masterpiece of skill and beauty. However, if your customer is not an artist, chances are they won’t get what you’re doing, and you’ve just lost a sale. Up front and to the point messaging is not always the answer either.

Consider using fun copy as an alternative. For example, if you sell banjos, instead of saying, “Shop New Banjo Supplies,” you could say, “Add More Twang to Your Thang.” As stated earlier with regard to designing for the customer, this depends a lot on what your target demographic is.

Can It Be Red?

No big surprise, red is the color of choice for error messages. But consider this when thinking about the user experience. What color does Target.com use for its error messages? Makes you think, right? Good! By the way, it uses red, too. The point is to consider alternatives. If your company has red in its brand, and the website has a lot of red as well, consider another color. You’re trying to get the user’s attention, so blue text with an alert icon could work just as well.

Consistency in Type: Stylistically and Creatively.

Making sure your headers, sub-headings and body copy are consistent across your website is easy. Making sure your website has a well-defined style guide is not. A style guide requires a lot of patience and care and is never complete. A website’s style guide should be a living, breathing document that continues to grow as your company and brand grows.
There is nothing wrong with this. As you find certain styles that perform better than others, find a way to add them to the guide. This document, depending on the complexity of your brand and the size of your website, could potentially be split into two separate documents: a creative style guide and a copy style guide. Each guide serves a different purpose but live together harmoniously.

[Read more]

Magento Go: Create New Products, Start My Store

[Read more]