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]

How to Create a Store on Facebook?

I believe that in the years ahead Facebook will become not only a place to connect with friends and family but a place to buy and purchase stuff.
We have updated this page with some great new options for creating a Facebook storefront..
I’ve seen quite a few store front applications pop up for Facebook and I have been wanting to try one for a while. One such application is called Payvment. This application allows you quickly and easily create a storefront on a facebook page.
I had our storefront (You Brand, Inc. Storefront on Facebook) with one product set up within 15 minutes. Not bad for adding e-commerce to a Facebook fanpage. We also highly recommend the following system if you want to really learn how to sell on Facebook.
Here is a screenshot of our store below.

Here is the You Brand, Inc. storefront on Facebook

This allows you to create a separate tab on any facebook page called Storefront. The only draw back is it only allows you to take payments from Paypal, although Paypal does allow people to pay with credit cards.

How Much Does it Cost?

Currently to set up a storefront the cost is zero, yes free. As of now they don’t charge anything or take any cut of your sales. In reading the FAQ on their website it seems they are more concerned with making great technology and getting feedback to do that.

How Do I Set Up a Store?

I was amazed at how easy it was to set up a store. Like I said we had our up and running within 15 minutes.

1. You must have a paypal account, both personal and business is work.
2. Create an account on their website here
3. To set up the store just go the application page here and follow the directions outlined.

Adding a new product is a 2 step process. Enter item data and upload an image.
Some features this store has:

• You can create multiple categories of products
• Option sets (such as different sizes, colors)
• Tracking of sales
• Ability to feature a product on the main page

What I Wish It Had

Analytics. It would be great to know how many people viewed the storefront. Also how many views each individual product received.

This application is a great addition to any fan page or group page you may have. I highly suggest if you have any products that you test this out. Also see if you can find unique ways to engage your fans or group members to purchase from your storefront.

The Best Option for a Facebook Store

Storefront Social has great features to help you make the most of your Social Media storefront. Storefront Social provides preconfigured Social Share buttons that allow users to quickly showcase and share a specific product. In addition, if you have several products, adding a category to them will help segment the products on your storefront. Some storefronts will contain several products on facebook that they would like searchable. Storefront Social allows you to create an easily searchable portal for your Facebook customers.
The Buy Now! button is the goal of your storefront. It stands out and has the same look and feel of other Facebook buttons. The design elements of this application are really top notched. Storefront Social is very flexible in that it allows the store owner to select the template that best displays their products.
As with any store, it´s important to be able to highlight and feature specific sales or new items. Storefront Social allows users of specific plans to highlight and feature special items. This is one of the best out there for this. Easily highlight you best selling products and feature some of your best additional purchase items.
One common problem with having another e-commerce portal is getting all your products in sync. Storefront Social has different ways of importing your products. From CSV to RSS feed the ability to import your products is seamless. They also work with leading stores like Google Merchant Feeds and Bonanzle.
This option is not free. They have a tiered pricing based on how many products you want to have in your store. We found the pricing to be very competitive and if you have a product base that would play well within Facebook we highly suggest you look at this option.

Video Overview of Storefront Social

As you can see this is a robust and viable option for creating a very effective e-commerce solution for Facebook.

An Enterprise Facebook Storefront Option

We learned of ShopVisible a few months ago and checked them out. If your looking for a more robust solution then this is one you will want to start with.
Some of the features they have in their system are:

• Payment Processing
• Shipping Functionality
• Content Management
• Order Management
• Customer Relationship Management
• Analytics & Reporting
• PCI Level 1 Compliant
• Training & Education
• Application Integrations

Quick Video Overview

Once again this is the enterprise level solution for a Facebook store. it’s still a great option if you have tons of products and want more functionality and features than the other options we’ve listed on this page.

[Read more]

9 Facebook Marketing Success Stories You Should Model

Are you curious what other companies are doing to achieve success with Facebook marketing? You’ve come to the right place.

This article highlights nine companies (big and small) that have transformed their Facebook presence by implementing innovative Facebook marketing practices.

You’re guaranteed to find inspiration for your Facebook marketing efforts here.

These tactics will work for just about any business—large or small, B2B or B2C. So let’s dig in!

#1: Cheese & Burger Society

The Cheese & Burger Society is sponsored by the Wisconsin Milk Marketing Board. This page is an innovative way to promote Wisconsin cheese by talking about something many people love—burgers and grilling.


One savvy practice introduced here is fan gating. Fan gating, also known as “like gating,” is where you require visitors to become a fan of your page to gain access to special content, discounts or contests.
If you use a contest for fan gating, make sure you abide by Facebook’s terms of service. These articles can help: Mari Smith (compliance) and Sara Hawkins (legal promotions).

This contest brought 1000s of new fans for The Cheese & Burger Society

To increase engagement, Cheese & Burger Society created a Send to a Friend app, allowing fans to send a cheeseburger to their friends. This is fun, easy and promotes viral visibility.

The Cheese & Burger Society also encourages fans to post pictures. Photos and videos get a better EdgeRank (Facebook’s algorithm for determining what shows up on your fans’ news feeds) and people love to share photos.

In fact, approximately 6 billion photos are shared on Facebook each month according to Pixable. For some tips on how to take full advantage of photos on your page, see this article by Debbie Hemley.

Fans love posting pictures of themselves

Key Takeaways:

1. Elevate the conversation to topics larger than your specific brand or niche.
2. Find creative ways to engage your audience with photos and contests.
3. If appropriate, develop an app to encourage fans to share your content (e.g., Send to a Friend).

#2: IdeaPaint

IdeaPaint is a B2B company that sells a specialty paint that converts walls and other spaces into a dry-erase writing surface, eliminating the need for hanging white boards and opening up creative space.
In keeping with their creative purpose and mission, IdeaPaint makes innovative use of their welcome tab by creating hot spots with links to their social sites. This promotes interactivity. The exploratory user will also find a link for a coupon.

Idea Paint's welcome page is loaded with discreet hotspots

Find the "Download" button and find this clever coupon.

A key to building long-term customer loyalty is to give your customers a good first experience with your product or service. IdeaPaint does this by providing detailed videos on their Facebook page on how to install and use their product.

Idea Paint provides a variety of instructional and inspirational videos.

IdeaPaint integrates several social components in their Facebook videos. In addition to the Like button, they use the Send button, which enables you to directly send the link to your friends. The Facebook comment section allows people to make comments that will show up on their wall.

Look at the smart social integration on this video.

Another smart tactic employed by IdeaPaint is their use of NetworkedBlogs to automatically pull their blog posts to a dedicated tab. Additionally, they manually add their posts to their wall. As explained by Mari Smith, this will enhance your news feed. (Get a free class here from Mari on Facebook News Feed Optimization. See the yellow box.)

Key Takeaways:

1. Use hot spots on your welcome page to integrate your other online sites.
2. Use videos to instruct and inspire, taking advantage of comments.
3. Integrate your blog manually and automatically with your Facebook page.

#3: American Express Open Forum

American Express has created a forum just for small business owners and leaders. Through a strategic partnership with Facebook, they created a massive contest for small businesses that generated lots of interest and increased their fan base. Note the importance of having a valuable prize ($20,000).

This contest brought lots of new small business fans to Amex.

A key to creating ongoing engagement on your wall is to use variety in your posts. Notice how Amex uses questions, quotes and articles to engage their fans. It’s also important to use shorter posts. Buddy Media found that posts with 80 characters or fewer get 27% greater engagement than longer posts.

Notice the variety in these 3 posts.

American Express also cleverly integrated their rewards program so people can redeem points for Facebook ads. Maybe you can’t leverage a deal with Facebook, but perhaps this kind of rewards incentive might get you thinking about partnership opportunities you’ve been overlooking.

This partnership with Facebook helps small business owners.

Amex features their authors and articles through some savvy Facebook integration. This requires special programming, but gives contributors the notoriety they deserve.

Amex features their experts and ads variety with polls and video clips.

Key takeaways:

1. Integrate your blog with your Facebook page.
2. Create variety in your posts.
3. Form strategic partnerships that benefit your fans.

#4: Banez Insurance Agency

Banez Insurance Agency is a local Farmers Insurance agency in Stockton, California. This small business is doing a number of things smart marketers should study.

Ron Banez is the owner of this insurance agency. He makes an immediate impression on his welcome page by doing two things: 1) Making a charitable donation for every Like and 2) using a video.

Notice Ron's disclaimer.

A few things to notice on his wall: First, observe how Ron has taken advantage of the photo strip by creating 5 interchangeable photos that reinforce his core messaging. Here’s a helpful article on optimizing your photo strip.

Banez insurance makes good use of their photo strip.

Next, observe how Ron incorporated his photo in his profile image, enabling him to use his headshot as his avatar when interacting on his Facebook wall. In a relationship-based business like insurance, it’s important for people to see you’re a person.

Additionally, see how the profile image points you toward the links below it. This subtle guidance will keep visitors on your page longer, increasing the likelihood they will engage with you as a fan.

Finally, this page makes a great use of the tabs. Through the tabs you can get a quote, learn about insurance products and enter a contest.

Key Takeaways:

1. Take advantage of the photo strip for messaging.
2. Draw attention to your tabs.

#5: PETCO

PETCO is a national pet supply store. They have masterfully integrated their store on Facebook, allowing greater social engagement. See how it allows fans to tell their friends which products they like, even as they shop.

NOTE: Mari Smith recommends TabJuice as a great service for small businesses wanting to set up a store on Facebook.

PETCO makes it easy to share your favorite products with your Facebook friends.

Everyone wants fan engagement, but few companies tell their audience the rules of engagement. PETCO does it in a friendly, but direct, manner.

PETCO's engagement guidelines are clear and lighthearted.

As an example of fan gating, PETCO shows you the benefits of becoming a fan: access to coupons, news and Facebook-only contests.

PETCO makes it easy to see the benefits of liking their page.

Key Takeaways:

1. Integrate your store with Facebook.
2. Tell fans the rules of engagement on your page.
3. Make clear the benefits of liking your page.

#6: Red Bull

Red Bull is a popular energy drink that has built a very strong fan base. Let’s study some of their smart practices.

Upon your first visit to their page, you can’t avoid their strong, but fun, call to action. If their power of suggestion isn’t enough, they also provide a subtle hint as to what’s waiting for you when you become a fan (notice the grayed-out videos). This is a powerful alternative to PETCO’s approach of listing the benefits. Determine which approach makes more sense for your business.

The grayed out area shows you what you're missing until you like Red Bull.

The more you can get fans returning to your page and lingering, the greater the likelihood they’ll tell their friends about you and eventually choose your products and services.

Red Bull developed a series of games and a TV channel for this very reason. While you may not have the budget to hire game developers or start your own TV channel, this might inspire some creative thinking on how to keep fans returning to your page.

Red Bull has created games to keep fans returning to their page.

Red Bull also has their own TV channel.

Depending on your brand, it might be valuable to find ways to meet your fans in person. The Events tab can be a powerful way to let your fans know where to find you. Red Bull makes a great use of this.

Some of the places Red Bull fans can gather.

Look at a couple of things about Red Bull’s tabs. They have creatively integrated their logo on their iFrame tabs. However, the Events tab gets lost due to the number of tabs they have. This highlights an important lesson: think carefully about the order of your tabs.

Key Takeaways:

1. Don’t be afraid to be bold and creative when asking for a Like.
2. Find innovative ways to keep fans on your page through games, TV, apps, videos, photos, etc.
3. Use the Events tab to allow fans to find you face-to-face./li>

#7: Toll Booth Saddle Shop

Toll Booth Saddle Shop is a local horse supply shop in Mt. Holly, NJ (suburb of Philadelphia). This small business has built a loyal following by utilizing several smart Facebook strategies.

On their welcome page, they provide a clear overview of why a fan would want to Like their page and keep returning. Make sure to put your URL in the About section. As a physical business, you can create a Facebook Places page by merely including your address in your profile, thus allowing for check-ins.

The design of Toll Booth's welcome page is fitting for horse lovers.

Toll Booth’s store experience is highly social, allowing customers to tell their friends about their favorite items. Additionally, they provide an added benefit for following their page: a 10% discount automatically deducted when you shop in their Facebook store. That’s some easy money!

See how they've made their shopping social.

On Toll Booth’s welcome page they also encourage you to sign up for their mailing list, telling you why you might want to do that. They have made it easy by using an iFrame app that links their list with Constant Contact.

Integration with your mailing list can be easy with an app.

Toll Booth Saddle Shop keeps their page fun by incorporating a humorous series of horse videos each week. This is a great strategy to keep the interest of young and old customers alike. Many parents prefer shopping in places where their children enjoy themselves.

Fun videos increase engagement.

Toll Booth announces the fun video.

Key Takeaways:

1. Utilize Facebook Places.
2. Integrate social proof into your store—and give discounts to your fans.
3. Have fun with your videos.

#8: Threadless

Threadless is a community-based online t-shirt company. They invite artists to create t-shirt designs and then sell the ones selected by fans. As you can imagine, their fans are very engaged (as noted by every post having comments).

A design-based company should utilize their graphic capabilities to keep their site interesting. Threadless does this by regularly changing their photo strip images and rotating various profile images.

Great graphics make your page stand out.

Threadless has found ways to segment their audience by interest and location. To differentiate interest groupings, they have developed separate pages for things like Kids and Design. Threadless has done an amazing job of taking their community off the Internet to communities around the globe through meetups.

Targeting different interests.

Targeting fans by location.

Threadless sells most of their products online, so it’s vital to have compelling photos. But they establish their brand as “by the people for the people” by using real people as their models and having fun.

Threadless uses everyday people to sell their products.

More examples of how Threadless uses everyday people.

One of Threadless’ trademarks is their customer involvement in the design and selection process of their business.

Many businesses could benefit from these principles by running contests or challenges where you invite your customers to develop a new product, process or concept. Then have your fans vote on their favorites.

T-shirt challenges provide ways to engage the creative powers of the Threadless community.

The leaderboard encourages community participation.

Key takeaways:

1. Allow your fans to help define your business by letting them design and vote on your products.
2. Use pictures to enhance the online shopping experience.
3. Build and deepen your community through cross-promoting related pages and meetups.

#9: Skittles

Skittles is a colorful candy company that uses Facebook to reinforce their fun-loving, wacky culture.
On their welcome page they provide several opportunities to further engage their brand. They offer social buttons, links to memorable ads and the chance to “Experience the Rainbow” (a link back to their website). Additionally, they have a rotating “fan of the week,” who happens to be a comedian showing up in a variety of fun settings.

Skittles provides integration with their other media on their welcome page.

Skittles also has a set of guidelines that are short, clear and fun.

The Skittles rules of engagement are fun, but clear.

Finally, Skittles has developed a unique voice for their wall posts. They always speak in the first person. The posts are personal, playful and creative. Fans are encouraged to engage with each other directly.

Key takeaways:

1. Integrate social buttons on your welcome tab.
2. Make your guidelines fun and friendly.
3. Keep your posts personal, playful and creative.

[Read more]