Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 19 2014

00:00

February 05 2014

16:22

The Importance of Breadcrumbs in e-Commerce Website Design

Advertise here with BSA


Breadcrumbs, or breadcrumb navigation, is a type of navigation that shows the user’s location in a website. They are horizontally arranged text links separated usually by the “greater than” symbol (>) which will show where the user is based in the hierarchy of the site. The term breadcrumbs comes from the tale Hansel and Gretel, where Hansel and Gretel leave a trail of breadcrumbs to find their way back home. Just like the real breadcrumbs that were suppose to help the kids to find their way home, breadcrumbs in web design help the users to find their way around a website.

A lot of times breadcrumb navigation is overlooked in the design process, since a lot of people still see it as something unnecessary. But the true is that this type of navigation can certainly increase usability of a site. For websites with a lot of pages, for instance, breadcrumbs will make it easier for the user to find their way around. Specially because with this type of navigation the user can count on a alternative navigation method and won’t need to click the back button, they just need to check the breadcrumb path and navigate around with fewer clicks, using the given path to navigate from place to place. You can find bellow a simple example of breadcrumb navigation at Google’s news support page.

The Importance of Breadcrumbs in e-Commerce Website Design

Breadcrumb navigation will enhance navigation experience by making clear to user where they are in a website. This is why breadcrumb is a great option for e-commerce websites, specially the ones with logical categories of products. A website with clear hierarchy and logical categories can take full advantage of breadcrumb navigation by showing exactly the path the user took to get where they are. And also allowing the user to navigate their path effortlessly. The main gain from breadcrumbs is that you can pinpoint the user inside the hierarchy of your page. So if you have several different levels of product, this is a good way to makes things easier for your users.

The Importance of Breadcrumbs in e-Commerce Website Design
Image via Shutterstock

Remember that the breadcrumb navigation is an auxiliary navigation system, they compliment the primary navigation of website and should never replace primary navigation. Think of breadcrumbs as a visual aid to show your user’s location. Think of it as a simple way to position your user within sections and pages of your site. Here are a few examples of breadcrumb navigation in e-commerce websites.

Zappos

The Importance of Breadcrumbs in e-Commerce Website Design

Overstock

The Importance of Breadcrumbs in e-Commerce Website Design

H&M

The Importance of Breadcrumbs in e-Commerce Website Design

Best Buy

The Importance of Breadcrumbs in e-Commerce Website Design

Oak Street Bootmakers

The Importance of Breadcrumbs in e-Commerce Website Design

Breadcrumbs are really important to e-commerce because without them sometimes it is difficult for the user to easily browse a collection of products. With breadcrumbs users can seamlessly navigate a website. Specially when the they land on an internal page on your site coming from an external source, breadcrumbs will allow them to see where they are within the hierarchy of your site. This way they can navigate to higher level effortlessly.

For e-commerce websites it is important to retain users and convert visits into sale. This is why breadcrumbs can help facilitate navigation and make it easier for the user to know their way around and find what they are looking for. A lot of times navigation in e-commerce websites are frustrating and users give up to find what they are looking for.

Here are a few bullet points for you to give breadcrumbs a try:

  • Improved usability
  • Eliminates additional clicks
  • Shows hierarchy
  • Reduces bounce rates

Advertise here with BSA

December 02 2013

04:43

How To Code an Image Zoom Hover Display with jQuery

Advertise here with BSA


For typical e-commerce websites you will often notice a detailed photo display when hovering an image. The zoom effect helps prospective buyers to see more of the product when deciding if it’s worth purchasing. This familiar image zoom effect can be applied to many other websites just to provide a better user experience.

In this tutorial I want to introduce a very simple jQuery plugin called EasyZoom. It’s all free and open source to download right from Github. The tool makes it super easy to create your own image zoom panel, which can appear on mouseover or be tied onto another event handler. Check out my live sample demo to get an idea of the final product.

jquery easyzoom plugin hover images tutorial preview

Live DemoDownload Source Code

Getting Started

First you’ll want to download the jQuery plugin codes directly from Github. I’ve created 2 separate folders in my working directory for css and js files. You specifically need to copy over easyzoom.js and easyzoom.css. Also download or link to a CDN with the latest version of jQuery and include all these files into the document head.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Image Hover Zoom Effect - DesignMag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/easyzoom.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/easyzoom.js"></script>
</head>

My own custom styles.css stylesheet is used to create the page layout. EasyZoom does have its own features and classes which are targeted inside the other stylesheet. You can obviously choose to overwrite them if you need the design in a slightly different manner.

  <div id="w">
    <h1>Image Zoom Magnifying Effect</h1>
    <p><em><a href="http://www.flickr.com/photos/rykneethling/5679896974/">featured image source</a></em></p>
    
    <h2>@2x Zoom</h2>
    <div class="easyzoom easyzoom--adjacent">
      <a href="images/autumn@2x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
    </div>
    
    <h2>@3x Zoom</h2>
    <div class="easyzoom easyzoom--adjacent">
      <a href="images/autumn@3x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
    </div>
  </div><!-- @end #w -->

In the HTML code you will notice the container object uses a class .easyzoom. By including a secondary class for .easyzoom–adjacent it will force the image zoom to appear next to the image. Everything is self-contained inside the HTML where the larger image URL will be inside a containing anchor link.

There are some extra classes for displaying image zoom effects off to the side, or right within the photo itself. Both of these samples are available in the Github archive if you want to see the code examples.

Common CSS Styles

There isn’t a whole lot of detail worth explaining within the EasyZoom stylesheet that can’t be understood with a quick glance. Container divs are positioned absolutely with relativity to the outer container. This way it’s simpler to ensure the hover image will appear off to the side, and you can adjust these coordinates using properties such as top: 15px.

.easyzoom-flyout {
	position:absolute;
	z-index: 100;
	overflow: hidden;
	background: #fff;
}

/**
 * EasyZoom layout variations
 */
.easyzoom--overlay .easyzoom-flyout {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.easyzoom--adjacent .easyzoom-flyout {
	top: 0;
	left: 100%;
	width: 70%;
	height: 70%;
	margin-left: 15px;
}

In my stylesheet the first line includes a relative web font named Balthazar. I’m only using this in the page title for a bit of extra design spice. Everything else follows typical page resets along with a wrapper div using the ID #w.

@import url('http://fonts.googleapis.com/css?family=Balthazar');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 62.5%; 
  line-height: 1;
  color: #414141;
  padding: 25px 0;
  background: #f3f3f3 url('bg.png'); /* http://subtlepatterns.com/straws/ */
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; }

h1 {
  font-family: 'Balthazar', 'Trebuchet MS', Tahoma, sans-serif;
  color: #515151;
  font-size: 4.4em;
  line-height: 1.4em;
  margin-bottom: 10px;
  letter-spacing: -0.05em;
  text-align: center;
}

h2 {
  font-family: Arial, Tahoma, sans-serif;
  color: #676767;
  font-size: 2.6em;
  line-height: 1.3em;
  margin-bottom: 6px;
  letter-spacing: -.075em;
}

p {
  font-size: 1.4em;
  line-height: 1.1em;
  margin-bottom: 15px;
}


a { color: #85aed1; }
a:hover { color: #91bbde; }

/** page structure **/
#w {
  display: block;
  width: 860px;
  margin: 0 auto;
  background: #fff;
  padding: 5px 11px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

My resets are based off the template by Eric Meyers and has been adapted as such. I find that some people prefer using content-specific resets rather than global ones. It all comes down to how you build websites and your own personal preferences. Customizing or editing the default EasyZoom classes will require most of your attention.

EasyZoom JS

This last bit of code should be held within <script></script> tags at the bottom of the page, before you close the body. We only need to call a single line of code in reference to the EasyZoom plugin.

$(function(){
  var $easyzoom = $('.easyzoom').easyZoom();
});

The reason for picking .easyzoom as the class selector just follows typical naming conventions. You could update this to follow another class or even a single element ID. Basically you should target an element which contains the regular image, and that tag should be wrapped around a link pointing towards the bigger image.

You might also notice in my code that I’ve setup 2 different examples. The larger images follow a naming scheme of autumn@2x.jpg and autumn@3x.jpg for being double and triple in size, respectively. You might prefer to include the largest sample image you can find, making for a better overall user experience.

Please check out the plugin’s live demo page which also includes function options and API calls at the bottom. Documentation is sparse because there isn’t a whole lot that needs customization. Using the .show() API method you can pass an individual mouse event which only displays the image zoom under certain conditions.

Overall this is a pretty simple configuration and it’s great for any website. Many other plugins also run on jQuery which makes this plugin another powerful resource for developers.

jquery easyzoom plugin hover images tutorial preview

Live DemoDownload Source Code

Closing

These code samples are not too difficult even for a beginner who has never touched jQuery. There are some alternative options that you can supply, but they’re only needed within more advanced layouts. Writing the most basic JS code will allow you to create a simple interface that works great in almost any website layout. Feel free to download a copy of my tutorial codes and see what else you can build with this plugin.


Advertise here with BSA

November 22 2013

03:00

32 Well-Designed eCommerce WordPress Themes

Advertise here with BSA


One of the amazing things about WordPress is its versatility. It is not just for blogging. It’s not just for portfolios. It’s not just for business/corporate websites. You can find a WordPress theme for almost any type of organization, from bands to restaurants to retail stores. In fact, eCommerce themes are one of the easiest themes to find, beside general purpose themes, and eCommerce layouts come in all shapes and sizes, with many being responsive themes as well.

But creative eCommerce WordPress themes aren’t always easy to find. Many seem to follow a certain format, very often with little visual stimulation…except for the collection below. In the following list, we have compiled some of our favorite well-designed eCommerce WordPress themes for your enjoyment and, perhaps, your benefit if one happens to be perfect for a project. Be sure to click on the Demo links since most of these themes come with more than one layout or extra skins. Have fun browsing!

1. StyleShop

Demo & Download

2. eStore

Demo & Download

3. Boutique

Demo & Download

4. Cance

Demo & Download

5. High Fashion

Demo & Download

6. Flatshop

Demo & Download

7. ClassicShop

Demo & Download

8. Responsive Prestashop

Demo & Download

9. Bistro Store

Demo & Download

10. Glamshop

Demo & Download

11. Moderns

Demo & Download

12. Beautyshop

Demo & Download

13. Autumn

Demo & Download

14. Trego

Demo & Download

15. R.Gen

Demo & Download

16. Shopper – Magento

Demo & Download

17. Alysum

Demo & Download

18. Warehouse

Demo & Download

19. Transformer

Demo & Download

20. Journal

Demo & Download

21. Nina Bobo

Demo & Download

22. Velvet Sky

Demo & Download

23. Legenda

Demo & Download

24. Agritourismo

Demo & Download

25. Agriculture

Demo & Download

26. 123Interior

Demo & Download

27. All Around

Demo & Download

28. Balita

Demo & Download

29. Merchant

29-ecommerce-wordpress-themes-merchant

Demo & Download

30. Clock Magazine

30-ecommerce-wordpress-themes-clock

Demo & Download

31. Handmade Two

31-ecommerce-wordpress-themes-handmade

Demo & Download

32. Sliding

32-ecommerce-wordpress-themes-sliding

Demo & Download


Advertise here with BSA

October 29 2013

17:47

How SSL Protects Your eCommerce Transactions


  

SSL (TLS) is how eCommerce stores ensure that their customer’s data is kept private. We explain what SSL is and how it works.

August 26 2013

06:30

Picking The Ideal Open Source eCommerce Option: 5 Major Players Overview


  

With the number of active users on the internet ever on the rise, more and more people are turning towards online shopping as compared to regular market shopping. As a result, several e-stores are coming up, including ones that function entirely as a web-based eCommerce store, or others that have both physical outlets and eCommerce solutions. If you are planning to start your own eCommerce website, or intend to sell your products and services online via your site in an easy manner, you have come to the right place. In this article, I shall be evaluating the pros and cons of some of the most popular and well-known open source eCommerce Content Management Systems and solutions.

July 15 2013

06:30

April 19 2012

13:30

Enhancing Your eCommerce Site’s Credibility: Part 2

In the previous part of this series I addressed the role that credibility plays in online retail sites. Because an increasing number of users are leaving these sites, it behooves us to ensure that the ones that we design are perceived favorably. I then explored a few ways to do this–to increase a retail site’s perceived credibility– including both security and ethical considerations.

Picking up where my last article left off, I’ll now discuss how certain communication and user assistance strategies can be used to further improve your perceived credibility. Let’s jump right in!

Communicate effectively

Wherever possible, information should be presented using plain language and an appropriate tone of voice. Ensure that any information you provide (including product reviews, descriptions, comparisons, policies, or disclosures, etc.) is communicated in a way that helps users’ make decisions. That is, quite often, what they’re there to do.

Provide relevant product information

Customers can feel a little like Goldilocks when trying to choose the right retail site by way of its product descriptions – some are too flowery, others include a great deal of exaggeration, and still others are too technical to convey any real meaning.

Aim to get it just right. Provide product information that’s meaningful to your users. Convey relevant information that actually helps them to discern the pros and cons of their choice. If you’re in any way unsure, conduct user testing to test your hypothesis.

Lowes.com

Lowes shows the advantages and disadvantages of a product, enabling users to make a rational buying decision.

Use product comparison tables

Though product comparison tables are common, the metrics used within them can be difficult to understand – especially when it comes to raw materials, ingredients, and industry-related jargon. Explain the meanings of all attributes – as either in-line help or tool tips – so that users can actually understand the advantages that one product might have over another.

Lenovo.com

On the Lenovo site, users can view additional information about a comparison attribute on mouse-over.

Guide users to product recall information

People are often none-the-wiser when it comes to product recalls. As usage of some products can prove hazardous, it’s imperative that you bring such products to your users’ attention.

Consider guiding users to product recalls using your site’s home page. Timely guidance shows that you not only care about your users’ safety and well-being, but that you can be trusted to do so in the future.

Target.com

Target’s product Safety & Recall page reiterates its stand on consumer safety.

Explain terms and conditions

Lengthy terms and conditions often confuse and frustrate users. Explain your terms and conditions in plain language to help users better understand the experience you wish to provide. This includes your policies related to site usage, privacy, shipping, returns, repairs, warranty, discussion forums, and commenting. Throughout, use proper paragraph breaks, categorizations, labels, and a comfortable font size.

topshop.com

Topshop’s terms and conditions have been well articulated and categorized, making it easier for users to understand the various policies and limitations.

Explain international shopping

Though online retail sites have made it easier than ever for people to shop across borders, ambiguity surrounding basic things – such as time taken for international shipping, customs duties, and return policies – can make it difficult for users to actually proceed with cross-border online shopping.

Therefore, provide information such as what products are eligible for order internationally. Explain how an international order affects delivery times, a customer’s ability to return a product, get support on a product, etc.

If your business is based out of the United States and you comply with the U.S.-EU Safe Harbor program, let your European users know that you are in compliance with their privacy protection needs. Additionally, inform users about your policies and limitations around shipping goods to a restricted area, like a US Military address (APO/FPO/DPO).

Childrensplace.com

Children’s place has an FAQ devoted to international shipping that answers some basic questions that users may have.

Provide reviews, both positive and negative

According to data released by Bazaarvoice in Talking to Strangers: Millennials Trust People over Brands, 84% of Millennials (people born between 1977 and 1995) say that user-generated content (UGC) has a significant influence on what they buy (compare that to 70% of so-called “boomers,” or folks born between 1946 and 1964). Because a huge chunk of users will likely base their opinion on what strangers’ feel about a product , its imperative that you display user-generated content in a straightforward, honest way. To avoid frustration, have a concrete policy concerning the moderation of comments, reviews, and ratings.

Make all user generated content (such as reviews) easy to comprehend. Provide a dynamic summary showing the percentage of negative and positive comments/reviews and give users the ability to sort and search for specific types of comments/reviews.

Sony.com

Sony allows users to filter comments and also provides a graphical summary of user comments of its own products.

Continuous assistance

The last credibility strategy is certainly not least: provide online shoppers with continuous assistance throughout their experience. Here are a number of ways to do that.

Prominently display contact numbers

Though contact numbers are displayed commonly on retail sites, many times they are difficult to come by during an “emergency,” such as before making a buying decision and during checkout. In these situations, it’s especially important to help users on their way. If you’ve got it, after all, why not flaunt it?

Dealsdirect.com

The customer care number on the Deals Direct site is shown at several places on product pages and persistently on the header.

Allow users to contact previous buyers

Despite their apparent trust in product reviews by strangers, users are occasionally skeptical. What if the marketing department’s “cooking the books?” To overcome such doubts, consider facilitating communication between a potential buyer and someone who has already purchased a product.

You could also invite frequent buyers or selected members of the community to support new users by guiding them through the buying process. Ask and answer-type of services and user-moderated communities are two examples of such efforts. Encouraging users to contact previous buyers will instill confidence that the information shared on your site is authentic and unbiased.

direct.tesco.com

On the direct.tesco.com site, potential buyers can get feedback directly from actual buyers.

Provide help documentation

Help is commonly provided to users in the form of manuals, write-ups, articles, descriptions, and textual how-to’s on retail sites. But that’s old hat. These days, context-sensitive help, embedded, and inline help are quite common, as is live chat.

Because of the time it takes to read documentation, users are likely to prefer a quick how-to video. Research conducted by Nielsen has shown that video consumption across multiple platforms has risen globally. About 70% of global online consumers watch online videos, while mobile video is watched by 11% globally. Considering that the adoption rate for videos is significantly high among desktop users (and catching up among mobile users), consider providing demos, how-to- videos, and interactive presentations to help users quickly understand a product or service.

made.com

Made.com provides short product videos that describes the product and helps users to visualize how the product may look physically.

Respond to feedback

The absence of a timely and sincere response – especially to negative feedback and grievances on forums linked to your site – may give the impression that you do not really care about your users and their concerns.

Always respond maturely and promptly to negative publicity, without being defensive or rude. If you have made a mistake, there is no better way than to come clean. A show of aggression or indifference, on the other hand, is best avoided at all costs.

A JetBlue representative responds on Twitter.com

In this example from its Twitter page, a JetBlue representative responds to an aggrieved flyer by informing him proactively about its Customer Bill of Rights.

Conclusion

Over the past two articles, we’ve considered many factors that may enhance or detract from the credibility of your website. Whatever mechanisms you choose, ensure that they are sustainable in the long run. Credibility and responsibility are essential qualities to the trust in any relationship.

Finally, I leave you with a rough heuristic for improving your site’s credibility:

  1. Reconsider your business’ actual stance on credibility and reflect this on your site through a mix of design and content.
  2. Consider elements that are currently on your site that (might) affect its credibility.
  3. Consider elements you could add or change on your site that would increase its credibility.
  4. Triage everything: consider what’s the easiest or fastest thing and the hardest or slowest thing you could do. Features that are relatively easy to implement include showing the total cost of a product upfront or providing navigation cues to your shipping policy. The ones that require some amount of investment, organizational motivation, and approvals include: making actual changes to policies, creating product videos, defining a plan for social engagement, etc.
  5. Put a plan into action.
  6. Implement changes in a phased manner. Give it at least three months to have an effect.
  7. Test your hypothesis using a combination of web analytics and usability testing.
  8. Keep testing and make necessary changes based on feedback till you see actual changes in users’ behavior and your Return On Investment (ROI).

You can use the above points as the base to create a realistic site strategy that has credibility at its core.

To conclude, in Fogg’s words, “those who design for credibility gain a strategic advantage,” as credibility gives site owners the power to change users’ attitudes and behaviors.

Series references


April 17 2012

13:30

Enhancing Your eCommerce Site’s Credibility: Part 1

According to data released by comScore, online retail spending amounted to $49.7 billion during Q4 2011, indicating an increase of 14 percent over 2010. As overall sales increased, however, the MarketLive Performance Index for Q3 2011 showed that the “1-and-out” rate (better known as the “bounce” rate) of online shoppers also increased by more than 22%. This implies that while retailers conduct increasingly more business online, the needs of more and more users remain unmet.

Retail site owners must invest in user research to better understand their users’ pain points and take appropriate, course-corrective actions. Specifically, they should focus on being more honest – both trustworthy and transparent – in order to increase customer retention. Paying special attention to the elements of their sites that customers associate with credibility can go a long way towards establishing and maintaining the trust they seek.

Credibility through design

B.J. Fogg of Stanford University‘s Persuasive Technology Lab states in his maxim for credible design that “to increase the credibility impact of a website, find what elements your target audience interprets most favorably and make those elements most prominent.” Interestingly, Fogg also compares the credibility of a site to its “believability.”

Four hands bracing one another

And what do users of retail sites have to believe in? That site‘s content, of course! Extending Fogg‘s maxim, everything on an eCommerce site – from its messaging strategy and operating principles to its assurances regarding security and overall tone of communication – has an impact on its believability. Every bit of copy works to either attract or detract your users.

In this two part series, I‘ll discuss changes you can make to your site to improve its perceived credibility. Note that I say perceived credibility. I won‘t get into business processes or talk about things like the importance of keeping your word – those are the fundamentals of good business and outside of the scope of this article. No, instead, I‘ll show you ways to better convey the credible, trustworthy business you already are.

The first article in the series – the one you‘re presently reading – explores both security and ethical concerns. The second part (to follow) discusses communication strategies. Combined, your organization will be well on its way to appearing more cool, calm, collected, and, yes, credible.

Address security concerns

Online security is a huge concern for eCommerce users. First and foremost, then, ensure your site is secure. Check mechanisms such as SSL (Secure Socket Layer) certificates, firewalls, encryption algorithms, etc. Double-check that you are using industry-approved security methods. Finally, make sure that you comply with the regulations of the Payment Card Industry (PCI) and the Data Security Standard (DSS) if they apply to your business.

Having done this, inform users about the tools that you have put in place to safeguard their experience.

Display trustmarks

Users who have subconsciously seen trustmarks (e.g. Verisign, TRUSTe) on their favorite retail sites may be hesitant to share information on a site that do not show them. Studies carried out by both McAfee and VeriSign independently show that online sales increase from 10% to 36% if a retail site displays familiar trustmarks. To assure hesitant visitors, consider showing the trustmarks across all pages – for example, in the footer.

Popular trustmarks

If nothing else, it‘s especially important to display security seals at the time of payment processing. Other good locations include call-to-action buttons, and, if possible, next to your site‘s links on search results pages.

Explain the meaning of trustmarks

Users can‘t trust something they don‘t understand. Therefore, inform your visitors how they benefit by the inclusion of security marks on your site.

On the FreeTaxUSA site, security seals are displayed persistently on the footer, and users can read the descriptions by clicking on any one of the seals.

On the FreeTaxUSA site, security seals are displayed persistently on the footer, and users can read the descriptions by clicking on any one of the seals.

Explain other safety mechanisms

There are many retail sites that do not display trustmarks, even though their owners have taken great pains to secure them. If you cannot or choose not to display trustmarks, it never hurts to clearly explain your organization‘s overall stance on user safety in an open way. Consider highlighting the common types of fraud found in your line of business as well as the steps your users should take if they suspect something isn‘t right.

For example, the FedEx Customer Protection Center has a page dedicated to discussing common email frauds associated with the FedEx brand. It also informs users about the steps to take in the event of receiving such fraudulent missives. This is a commendable practice because it shows the organization behind the site cares about their safety.

eBay shows its buyer protection policy persistently and explains it in an easy-to-understand way

eBay shows its buyer protection policy persistently and explains it in an easy-to-understand way

Clearly communicate your privacy policy

We‘ve all seen the sea of text that passes for privacy policies these days. Text-based white noise. Seeing this, many users may misunderstand your organization‘s intentions: why should they give you their personal information when you won‘t explain, clearly, why you need it?

Explain your policy around privacy as clearly as possible. Indicate what type of data you collect, where it‘s stored, why it‘s collected, and under what circumstances you might share it with others. Your frank disclosures will help eliminate ambiguity around your data collection methods.

Many retail sites show the TRUSTe seal indicating that their privacy policy meets a higher standard. A word of caution, though: if you are using such a seal, ensure that it is updated and verifiable else you may be seen as unreliable!

The Best Buy Privacy Hub

The Best Buy Privacy Hub provides a host of privacy-related information, including contact details

Address ethical concerns

Considering that there is a huge user base of ethical consumers out there (in the UK alone, ethical consumerism rose to £46.8 billion in 2011), your organization could benefit tremendously if it responds to some basic ethical concerns of users.

Fair-trade practices

A large number of users are concerned about the environmental, social, and societal repercussions of their spending. Many base their purchasing decisions on information like what ingredients or raw materials have been used in a product (e.g. chemical or organic), from where those raw materials were sourced (e.g. third-world, war-torn, or hostile nation), and what type of labor (e.g. child or oppressed) was used in its construction.

To address their concerns, provide details of how you source, manufacture, and distribute the products that you sell. Then be sure to then help users easily navigate to this information.

Green & Black‘s explains its stand on child labor using plain language.

Green & Black‘s explains its stand on child labor using plain language.

Animal testing

If applicable, provide users with information regarding your stance on animal testing. Users have the right to know whether or not a product meets their ethical requirements.

Urban Decay‘s stand on animal testing and cruelty-free shopping can be viewed by clicking on the Leaping Bunny, Cruelty-free, or Marley Approved logos on its site.

Urban Decay‘s stand on animal testing and cruelty-free shopping can be viewed by clicking on the Leaping Bunny, Cruelty-free, or Marley Approved logos on its site.

Humanitarian campaigns

Many retail stores publicize their support of various humanitarian causes, usually funded in-part by their revenue from sales. Because of their soon-to-be-vested interest, users should know the impact of their forthcoming contributions.

If you participate in a cause, be transparent. Show how the collected funds have been utilized, what milestones have been achieved, and what benefits have accrued to the recipients.

Dermalogica‘s support for women entrepreneurship is communicated on its website. In addition, the organization provides a dedicated site for more-detailed information.

Dermalogica‘s support for women entrepreneurship is communicated on its website. In addition, the organization provides a dedicated site for more-detailed information.

Aid decision making

Any effort to help users make a more rational decision – especially while they‘re shopping – reflects positively on your site. It indicates your willingness to be fair and increases your overall trustworthiness.

Overcome the problem of plenty

Users are often confused with the myriad options presented to them on a retail site.

To help them, provide tools for decision making such as price calculators, measurement tools, and/or high-quality product images. Some retailers have even created high-quality product videos to help familiarize users with their products.

Dell helps users to get choose the right product based on parameters like budget and primary usage.

Dell helps users to get choose the right product based on parameters like budget and primary usage.

Provide intelligent discount codes

Asking users‘ to memorize or recall an automatically generated voucher code – or, worse yet, to navigate to some other page to retrieve a code – during the checkout process may indicate a lack of seriousness on your part in actually helping them to obtain a discount. Users, for their part, also have a tendency to entirely abandon a site to go searching for voucher codes during the checkout process and getting distracted by competitors and affiliates along the way.

To overcome these challenges, Jakob Nielsen recommends that you “encode offers in special links embedded in your email newsletters and automatically transfer the coupon to the user’s shopping cart [on checkout].”

Discounts are automatically added while using a coupon code on Amazon.

Discounts are automatically added while using a coupon code on Amazon.

Display the total cost

Ensure that you don‘t disappoint your users. Display a price breakdown that clearly delineates the sub-total, duties, taxes, and estimated shipping dates of a user‘s order as soon as possible. That way they can make informed decisions (about what they want) earlier in the purchasing process. Many retail sites offer a simple “ZIP code calculator” to compute the estimated taxes and shipping of the product in question.

he My Cart link on the HP site provides a clear price breakup. Users can calculate the shipping cost and estimated tax with the help of a tool, after which it is displayed persistently at mouse-over on the My Cart link.

The My Cart link on the HP site provides a clear price breakup. Users can calculate the shipping cost and estimated tax with the help of a tool, after which it is displayed persistently at mouse-over on the My Cart link.

Enable comparison shopping

This is especially important if your site offers a low-price guarantee. A brief, informal survey that I undertook revealed that most sites of this nature used hard-to-understand terms and arcane statements. This can easily be misconstrued as deceitful attempts to get users to purchase.

If you are indeed serious about offering users the best deal possible, explain (clearly!) how your guarantee works. Further, actually enable comparison shopping.

Users can navigate to the Tesco Compare site from the home page of Tesco, where they can compare, buy, and often earn Clubcard points for buying a product through the site.

Users can navigate to the Tesco Compare site from the home page of Tesco, where they can compare, buy, and often earn Clubcard points for buying a product through the site.

In conclusion

Is your head swimming with ideas, yet? Well, hopefully not; we‘re only halfway done!

To be sure, some suggestions – like the ones pertaining to security – are “easier” to implement. Most retail sites already have these kinds of certificates in place. Others, though – such as the explanation of business ethics and/or providing decision-making tools – are more difficult. Establishing yourself as a credible business is hard work. It requires a strong motivation to explain altogether nuanced aspects of your organization.

But don‘t let that stop you. In the concluding part of this series, I’ll discuss various strategies you can use to further increase your retail site‘s credibility.

Related Reading


March 16 2012

10:00

The Evolution Of Online Shopping – 60′s to the 90′s

The wonderland called eCommerce. Today, some countries are busy doing most of their shopping online while others are starting to experiment with their online market. In either case eCommerce is here to stay. This article won’t shed any light on the future of eCommerce. No! Rather, I will be trying my best to collect in-depth data in order to help you understand how eCommerce has evolved. The journey has been more than just majestic.

1960

EDI (Electronic Data Interchange) permits companies to carry out electronic transactions. Although the concept of eCommerce did not touch the daily Internet user till the era of 1990s yet some big players had started to use EDI as early as 1960. The railroad industry was among the first to understand the importance of EDI and start using the same. Other players in the transportation industry followed.

1979

There is always a hero. Someone who comes out of nowhere and does something unusual. eCommerce has its own hero. Michael Aldrich is the man. It was the year 1979 when Aldrich was on a stroll in a supermarket with his wife. Suddenly, he was hit by an idea which changed it all for eCommerce. Aldrich connected a domestic TV and a computer with telephone lines so as to start selling groceries online via this model. How they were able to tackle various situations is a different story altogether, but at the end of the day they did come up with a model that helped them launch the business of online shopping.

1981

Have a look at this rare PDF and then read along. It was the year 1981 when Thomson Holidays picked up 66 travel agents from around England and connected them in order to come up with what has been tagged as first B2B (Business to Business) online shopping. These agents were able to extract data online and understand what was available from the Thomson Brochure so as to serve customers instantly.

1982

This was the year for France to jot down her name in the history books. France based telecom company invented Minitel which has been considered as the most happening pre-WWW online service. Even during its infant years users had the privilege to make online purchases, check phone directories, chat with each other and various other basic searches just like it happens in today’s Internet.

[via Wikipedia]

1984

How would it sound if someone tagged you as the first ever home shopper on this planet. Well, Jane Snowball was tagged as the first ever home shopper when at the age of 72 she became Tesco’s customer. It was the year 1984 itself when the world’s first B2C (Business-to-Consumer) online shopping system was launched by Tesco. The online shopping system started the concept of Online Shopping Basket which was later renamed Online Shopping Trolley.

Also, it was April 1984 when CompuServe announced Electronic Mall which was almost like the eCommerce of today.

1987

Next up was a Merchant Account launched in the year 1987 that helped software developers sell their software products online. SWREG was the name and it happens to be one of the oldest pieces of software that is still available.

1990

Here we go. The year which marked the launch of the first web browser. The name of the browser was WorldWideWeb which was later renamed to Nexus so as to avoid the obvious confusion. Nexus was also the editor for programmers who coded websites. During those days Nexus was supposed to be the only medium to access the Internet in graphical format. The amusing part is that the browser was launched for the public by using Internet newsgroups as the medium of communication. This will help you understand that the communication system (on the Internet) of those days wasn’t as big as it is nowadays.

1991

Back then NSFNET was the backbone of the Internet, but it wasn’t available for commercial use. It was the year 1991 when the NSF (National Science Foundation) cleared the way for the commercial use of NET. This was considered to be a major boost for the eCommerce industry and its future growth. Statistics state that the traffic on the backbone network of NSF jumped to over 1 trillion bytes per month in the year 1991 itself after it was opened for commercial use. By 1996 there were over 10 million hosts online and the Internet was now a global phenomenon.

It was the year 1991 itself when University of Minnesota launched “gopher”, the first point-and-click based browser that could be used to navigate files on the Internet. At times this has been tagged as the birth of Internet.  Gopher was originally designed to ease campus communication.

“The first Internet application my mom can use.” ~ Mark MaCahil, Team Lead of the computer programming team which launched Gopher.

1992

A book called “Future Shop: How new technologies will change the way we shop and what we buy” was published in the year 1992. The book was considered revolutionary considering the fact that it talked about what will happen in the future of eCommerce and how the Internet will take shape.

“Snider and Ziporyn (the authors of the book) powerfully describe the glass highways of the future, which will not only benefit consumers but will also provide fantastic opportunities for schools, hospitals, businesses, and the average American as we enter the Information Age of the 21st century.” – Conrad Burns, Chair of U.S. Senate Communications Subcommittee

1994

This could be tagged as the “Mother of all Years” for eCommerce as Netscape launched encryption certificate which became the trustworthy means of transmitting data over the Internet. Certificates gave the browsers a chance to trust a source before displaying its data and sharing personal information. Something that helped the end consumer shower more interest on the Internet and indirectly on eCommerce transactions.

This wasn’t all. The year 1994 also marked the launch of Yahoo! though the domain was registered later in the year 1995. This truly gave the Internet and eCommerce a completely new direction.

1995

It was the year 1995 when NSF started charging a fee for registering domain names. I wish I was born before so that I could have registered some of the premium single word dot com domains in 1995! At that time the Internet had 12,000 domain names registered and the number jumped to over 2 Million in the next 3 years.

January 18, 1995 was the day when the domain Yahoo.com was registered. The word Yahoo is an acronym for “Yet Another Hierarchical Officious Oracle.”

One must understand that by now a lot of other services that would later rule the web had started to appear. Some of these were Amazon, AuctionWeb (which later became eBay) and Verisign etc.

1998

PayPal came into existence in the year 1998. The current PayPal system that we see is actually the merger of X.COM, a financial service company of the late 2000s, and Cofinity which happened to be a payment and cartographic company. It was the year 1998 only when Google entered the world of eCommerce and Yahoo! launched Yahoo! Stores online.

2000 and Onwards

As they say, what followed after Google is history. Be it the dot com bubble or the Web 2.0, the Internet has experienced exponential growth (with its own pitfalls) that has shaped the lives of many. As we know it, the Internet continues to grow with major and minor eCommerce companies launching their own set of stores. Today, we can literally buy anything via the Internet. That is the wonderland of eCommerce.

March 06 2012

10:56

Design Inspiration: Shopping Cart Design

Get a free icon and vector bundle (worth $54) just for subscribing to our weekly newsletter!

The design of an e-commerce website can have a dramatic impact on the user experience throughout the process of purchasing a product. In this post we’ll take a look specifically at shopping cart pages, showing examples from 25 different e-commerce sites. The shopping cart page shows customers specifically which items are in their carts and allows them to change quantities (in most situations) or remove products.

Here are 25 examples of well-designed shopping cart pages.

Camp Luxe

Camp Luxe

Alex and Alexa

Alex and Alexa

Cheer Up Clothing

Cheer Up Clothing

Inkefx

Inkefx

Awesome Tees

Awesome Tees

Revolution

Revolution

H.J. Mews

H.J. Mews

Kate Spade

Kate Spade

Scotch & Soda

Scotch & Soda

Boob Baby

Boob Baby

Parachute

Parachute

Stella McCartney

Stella McCartney

Makr Carry Goods

Makr Carry Goods

Oak Street Bootmakers

Oak Street Bootmakers

Threadless

Threadless

Desina

Desina

MumMade

MumMade

Red Velvet

Red Velvet

Tinkering Monkey

Tinkering Monkey

Jag

Jag

The Hungarian Wine Society

The Hungarian Wine Society

Jethro & Jackson

Jethro & Jackson

ShoeBeDoo

ShoeBeDoo

Mom & Popcorn

Mom & Popcorn

Design by Humans 25.jpg

Design by Humans

For more design inspiration please see:

Royalty-Free Graphics

January 26 2012

22:30

15 Best Magento Themes For eCommerce Websites

Magento is the best platform for any e-commerce store or website because it comes with large numbers of terrific features that make it the preferred choice of many e-commerce website owners. On the other hand, finding out elegant or helpful Magento resources is rather difficult. Nearly all Magento extension and themes are so pricey if you compare them with other Content Management Systems (CMS).

Therefore today we have gathered some free but tremendous as well as high quality Magento themes for you. Scroll through our amazing collection and be inspired to create your own artworks, as well. Have fun!!

Grayscale Free Magento Template

( Demo | Download )

Em Computer Store

( Demo | Download )

Magento Classic Theme

( Demo | Download )

mEbay – Free Magento theme

( Demo | Download )

Hardwood Magento Theme

( Demo | Download )

Magento Absolute Theme

( Demo | Download )

Telescope Magento Theme

( Demo | Download )

JM Mesolite

( Demo | Download )

mHitech

( Demo | Download )

mApple

( Demo | Download )

Electronics Store 3

( Demo | Download )

Fitness Theme

( Demo | Download )

POLO

( Demo | Download )

Soccer Sports

( Demo | Download )

Inspire blue

( Demo | Download )

Brought To You By

Premier Survey
Do you want to advertise here? Click to get more info…

January 10 2012

10:00

15 Eye-Catching Food & Beverage eCommerce Website Designs

Great eCommerce web design presents an avenue for e-tailers to showcase the true essence of their brand message along with a visual representation of their products.

Presenting sumptuous and refreshing foods and beverages gives eCommerce owners much to work with when it comes to website design. Tantalizing images and a showcase of the associated benefits work well to draw customers in to the purpose behind the website and lead their clicking fingers all the way to checkout.

As you will see from these examples, a great image can go a long way. Warning: Some of these food images are so tantalizing you may find yourself reaching for a snack before the article is through.

1. 4th Street Cookie Company

4th-Street-Cookie-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

The 4th Street Cookie Company sells cookies as a supplementary income source to their physical store. The success of their web design is evident in the eye-catching images of their cookies (makes you want to reach right in to the screen and grab one!) and their easy navigation. Their clever call to action is strategically placed next to the cookie with an arrow. If you click to see the actual site, you will notice a slider that showcases five different varieties of cookies, all with images just as tantalizing as this one.

2. Black Estate Vineyard

Estate-Black-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Simplicity is the name of the game for this website and simplicity is often very effective if done right. This website nails it with its beautiful, elegant typography against the rich, black background. The design just beckons wine lovers to take a closer look.

3. Sanctuary T Shop

Sanctuary-T-Shop-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Though this site has a few “faux pas”, overall it organizes information well and draws the visitor in. The color blocks on the navigation offer a creative style to what could be a boring menu. The navigation also shows that square-edge elements can be effective if done creatively. The products are showcased in the slider and right below the main graphic to grab visitors’ attention at every turn.

I also like the “Bestselling teas” which is a great way to keep potential customers on the website. People love to read reviews or look at highly-rated products.

Two things I would adjust in this website are the logo (it’s somewhat lacking) and the main graphic image that mentions the season “autumn”. Using the seasons is a great marketing ploy which I will show you in another example, but it ceases to work if you do not update the graphic. This can actually work against you.

Do you see any other possible improvements?

4. Marie Catrib’s

Marie-Catribs-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Again, I love the mouth-watering images that make you want to research the site more. Also, the typography is a nice addition to the overall light and fun attitude behind this website. It’s simple design is effective and the products are showcased well overall.

The product pages are also designed well with ingredients displayed prominently, an important addition for the healthy-conscious customer who visits this store. Also notice the context-sensitive navigation options “More info” and “+ Cart” that appear when users hover over an item on the home page.

The only element I would change is to make the image on the home page “clickable” to direct customers to the order page for that particular item

5. CellarThief

CellarThief-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

This website is very creative and for that reason it is often showcased on many blogs as an example of the best eCommerce website design. The designer’s use of textures and color is superb and the associated content (tell your friends, choose a wine, feel good) is displayed with right-aligned text to remain secondary but also pop on the page.

The creative background brings the brand to life and the “wine of the day” is an effective call to action expressing urgency for customers to take action before the day is over. If you click to the product pages you will see a well-organized layout that focuses a lot of copy in well-defined areas.

6. Gevalia Coffee

Gevalia-Coffee-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

The font on this website may appear a little larger than most, but some newer sites are using these fonts along with grand logos and images to nail their message right from the start. The size of every element works well together. If the logo were smaller or the font any larger, it may have thrown off the whole appeal of the site.

7. Ghirardelli

Ghirardelli-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

I am showing this website because I liked the images on the slider and the concepts behind them. They not only showcase Ghirardelli chocolates as ultimately decadent, but they also display images of the benefits of the product and how it can be used. The slider shows images of Valentine’s Day recipes and also urges the customer to buy the chocolate so the recipe turns out exactly as shown.

8. Teasta

Teasta-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

The choice of bright color works well for this brand and it captivates the customer. The “Buy Now” button is prominently displayed in the center graphic and the secondary content works well with this clean design.

Social interaction is also important for this brand and the use of the Twitter bird with clever content entices customers to follow the brand to land extra coupons and discounts.

The navigation is well thought out, although I would change it up a little so it stands out more.

9. Nuts in Bulk

Nuts-in-Bulk-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Apart from some extra clutter, I chose this site for many reasons:

  • Creative, eye-catching logo
  • Nice, easy to locate navigation menu
  • Content segmented into separate blocks to streamline the design and make it appear clean.
  • Green call to action buttons in each block which stand out from the page
  • Slider showcasing products with enticing copy and images
  • Phone number displayed in orange color to pop out from the background but not overtake the design.

10. Snapple

Snapple-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

I am showing this website for creative inspiration. It is not a design I would recommend for all eCommerce stores but it works for the popular brand Snapple. Since Snapple is already a worldwide brand, it was a good idea to take the web design out of the box and create something unique.

The design offers visitors a chance to connect with Snapple on Facebook, Twitter, or via email. The website contains interesting, interactive elements that will keep visitors on the site. The site made me wonder around a little even though I don’t drink Snapple.

11. Purdy’s

Purdy's-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

I like the simplicity of this site and how all the elements pop against the purple background. I am a strong believer of the “less is more” approach for eCommerce stores and I think this strategy is displayed here nicely. The subtle leaf design in the background is also a nice touch. Also, pay attention to how the website uses the season to stay relevant and interesting. The New Year is showcased to entice visitors to stay and shop.

12. Mom & Pop Corn

Mom-Pop-Corn-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

This site is a little grunge for eCommerce but I wanted to show off its creativity. This design style would most likely appeal to a younger population with an artistic bent.

I can appreciate the creative logo design and placement as well as the fun font and eye-catching navigation. If you look closely, the design still follows a typical layout with the main image followed by three sub-sections; however, it has been injected with a lot of personality that will appeal to a particular demographic.

13. Chocomize

Chocomize-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Though there are some design elements I would change, I liked the color scheme of this site. It is also great for conversions to display any noteworthy clients as this site did below the main slider. I would have showcased them a little differently, but the strategy is a good one nonetheless.

It should also be noted that this site does a good job at passing the 6-second test. Show your website to people for six seconds or less (anywhere from 4-6 is good) and then ask them if they know what the site is selling. This site was successful at making a complex and new concept like customized chocolate easy to understand and grasp within the first few seconds.

Cookies-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Now that you are probably running to the cupboards to fill your mouth with some chocolate, hold on for just a few more minutes…

I chose this website to show how you can change the area around the slider to showcase more products. The orange call to action buttons are also popping out from the design. Additionally, the BBB logo is displayed but not obstructive to the overall design.

15. Cheryl’s

Cheryl's-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

A few reasons why this website design is successful:

  • Free shipping prominently displayed
  • Side navigation well-defined and catches the eye
  • Large banner displays advertising and draws the eye there while separating content nicely.
  • Font is easy to read and scan and separated from design elements well

A few negatives:

  • Cart symbol small and lost on background
  • Contact information not visible
  • Search bar is very small

When it comes to website design, sometimes two or three or even four eyes are better than one. Do you like these eCommerce website designs? What improvements or design changes would you make to these sites, if any? We would love to hear your opinions!

January 02 2012

12:47

25 Beautiful Ecommerce Websites

Get a free icon and vector bundle (worth $54) just for subscribing to our weekly newsletter!

If done effectively, the design of an ecommerce website can help to improve the user’s experience, which will also improve the results for the company. While many ecommerce sites are lacking in terms of design quality, that is not the case with all of them. In this post we’ll showcase 25 websites that prove ecommerce websites can be attractive.

Inkefx

Inkefx

Awesome Tees

Awesome Tees

Revolution

Revolution

L.K. Bennett

L.K. Bennett

Banana Skins

Banana Skins

Warby Parker

Warby Parker

H.J. Mews

H.J. Mews

Moda Mia

Moda Mia

Paule Ka

Paule Ka

Darling Clothes

Darling Clothes

Kate Spade

Kate Spade

Nanette Lepore

Nanette Lepore

Kookai

Kookai

Witchery

Witchery

ZoZo Reworked Vintage

ZoZo Reworked Vintage

Peter Nappi

Peter Nappi

Chic at Home

Chic at Home

Clay & Blossom

Clay & Blossom

Scotch & Soda

Scotch & Soda

Sage

Sage

DANS-EZ

DANS-EZ

CXXVI

CXXVI

Lucile

Lucile

Leila London

Leila London

wigglewaggle

wigglewaggle

For more design inspiration please see:

Royalty-Free Graphics

October 18 2011

15:25

Congratulations To The Winners Of SolidShops Hosted E-Commerce Software Subscription

Thanks to all of the participants of contest in which SolidShops Hosted E-Commerce Software Subscriptions were givingaway. We ran the MySQL random query and selected these comments to give them SolidShops.

Winners of SolidShops Hosted E-Commerce Software Subscription

  1. Sanjar
  2. Jeffrey Kam
  3. Tony
  4. Huy
  5. Oranjje

SolidShops is an extremely user friendly hosted e-commerce platform for web designers and their clients. Way too often, open source software like Magento or OScommerce disappoints when it comes to user friendliness, not to mention creating themes. On top of that you’re stuck for hours uploading and patching files to finally realize you still have to take care of backups and encrypted payments.

With SolidShops you can have a secure store up and running in just minutes, even on Facebook. That’s right: SolidShops also supports building out unique Facebook stores which can be customized to your liking by using custom HTML and CSS.

Popular payment methods like PayPal, Google Checkout, Authorize.net, Ogone and others can be set up in no time.

Thanks to SolidShops for sponsoring this wonderful contest at Smashing Apps.

If you want to conduct any contest at Smashing Apps just contact us and send us all the details.

Brought To You By

Premier Survey
Do you want to advertise here? Click to get more info…

October 03 2011

16:57

SolidShops Hosted E-Commerce Software Subscriptions Giveaway

SolidShops is running a contest, where 5 winners will get the 1 year subscription of SolidShops hosted e-commerce software. Well, you guys know what is SolidShops? Let’s say it once again for n00bs.

SolidShops is an extremely user friendly hosted e-commerce platform for web designers and their clients. Way too often, open source software like Magento or OScommerce disappoints when it comes to user friendliness, not to mention creating themes. On top of that you’re stuck for hours uploading and patching files to finally realize you still have to take care of backups and encrypted payments.

With SolidShops you can have a secure store up and running in just minutes, even on Facebook. That’s right: SolidShops also supports building out unique Facebook stores which can be customized to your liking by using custom HTML and CSS.

Popular payment methods like PayPal, Google Checkout, Authorize.net, Ogone and others can be set up in no time.

This contest will run from October 3, 2011 to October 8, 2011 and we will select the winners randomly by running MySQL query. Result can be announced any day before October 15, 2011 so keep visiting here or subscribe to our rss feed to get the latest updates. To participate in the contest and win SolidShops hosted e-commerce subscription, All you have to do is :

1. Just leave a comment.

2. Use valid email ID in the email box.

3. Make sure that you are following @Solidshops and @SmashingApps on twitter and subscribe our rss feed to track this contest and for future updates.

4. And that’s it!

So, what are you waiting for now? Let’s participate in the contest and good luck!

Brought To You By

Premier Survey
Do you want to advertise here? Click to get more info…

September 09 2011

15:30

Showcase Of Inspirational E-Commerce Websites

E-commerce websites are the revolution in the business sector that has significantly modernized the way a business runs. E-commerce websites are the trading medium that provides a quick and handy way of exchanging goods and services both regionally and internationally. The introduction of the Internet and its use in running business has opened up a new environment for e-commerce marketplace making it a virtual shopping lane that can be accessed from any corner of the world.

Here we are featuring some exceptional e-commerce website designs that you must look through if you’re also thinking to step into the world of e-commerce. These striking and salient web designs help you stand out in the crowd. Enjoy!

Storyville

Grana mau

Shop Shoe Guru

Godiva

Jawbone

Shop Curious

Natureet Decouvertes

Versapak

Cariboucoffee

Mummade

Dogcollars

Jedal Italian Fashion

The North Face

Nineteen47

Boobbaby

Spunkybubs

Free People

Little Catwalk

Satorisan

Poetrie

Aspace

B Witching Bath Co.

Wunderbloc

Famous Cookies

Rock Pillars

Mouse to Minx

Cosmic Soda

University of Whatever

Voodoo Controllers

Nest-living

Melaleuca

Skikey

Brooklyn Industries

Perfect Order

Fat Face

Rampant Sporting

Epic Dog Clothing

Steve and co

Kiki and Bree

Paul Stuart

Duchy of Cornwall Nursery

Nest Living

Hard graft

Little kids Bedrooms

Ginger Pup Lane

Brought To You By

Premier Survey
Do you want to advertise here? Click to get more info…

July 26 2011

13:00

10 Absentee UX Features on Top e-Commerce Sites

These carts are broken.

The following are some notable missing UX features in most online shopping.

Credit: Mightyohm

eCommerce sites are competing for customer attention and loyalty. The user experience features included in a site are the focal points for engaging customers, and can make or break the purchase process.

Editor’s note: In the spirit of full disclosure, the author of this article is also the founder of Usography.

But UX features aren’t free. In some cases, they are very, very expensive. Selecting the right feature set is an exercise that should be as well-informed as possible, and should take into account available resources, industry best practices, and the competitive landscape.

Usography reviewed 100 top e-commerce sites for its recently published Retailer UX Audit. In the process of conducting the audit, we were surprised to discover the user experience features that were missing from top e-commerce sites, sites that receive millions of visitors per month, and earn millions of dollars in revenue.

Here we’ll take a look at ten UX features that were missing from 90 percent or more of the sites we reviewed for the Spring 2011 UX Audit. We selected these features (from the complete feature list) based on their infrequent occurrence on e-commerce sites, and on their potential to engage customers and increase sales. They are presented below in order of decreasing occurrence. In parentheses next to each feature is the number of sites we reviewed that had the feature in the Spring 2011 UX Audit.

Product Videos (9/100)

A minute of video is worth 1.8 million words, according to Dr. James McQuivey of Forrester, a leading technology research firm. Product videos engage attention and convey information in a way that doesn’t require much effort on the part of users. Videos bring a product to life more than static images. Because of their potential for increasing sales as well as improving search engine placement, product videos are likely to become a standard feature on e-commerce product pages in the near future.

However, retail sites have been slow to include them to date. Some e-commerce sites that do include them are Zappo’s (illustrated below), Patagonia, QVC and Burberry.

Zappos

Zappos, hitting a UX home run.

Order Online, Pickup in Store (9/100)

Walmart’s e-commerce site was in the news earlier this year for starting to offer “order online, pickup in store” functionality. Pairing the convenience of online shopping with the immediate access of a store location is a winning combination that less than 10% of the sites we reviewed had taken advantage of. Some of the sites we reviewed that did have this feature, in addition to Walmart, were Nordstrom (illustrated below), Sears, and Container Store.

Admittedly, supporting this feature requires substantial backend logistics. If someone purchases a product in the store, and someone is looking at the same item online, the store inventory has to let the online catalog know in real time that one fewer of that product is available. Keeping store inventory and online inventory in sync is a feat that not every retailer can manage with current technology, but it is a UX feature that customers are likely to look for in increasing numbers as more retailers offer it.

Nordstrom

Nordstrom’s Pickup option.

Price Drop Alert (5/100)

Price is a key determining factor for purchase decisions. Customers often hop from one site to the next to find the best price. It makes sense, then, to let customers know when the price of a product they have indicated an interest in drops. It’s an incentive to return and buy it. Customers have to surrender their email address to use this feature, so it’s a win-win situation.

Nevertheless, only 5 of 100 top e-retailers had this feature in Usography’s most recent UX Audit. Among them were Newegg (illustrated below), Tool King, and Rugs USA. Of the sites that did offer this feature, the most common UX design was a Price Alert link adjacent to the product price or Add to Cart button.

Newegg

Newegg’s price drop alert.

Customer Product Images (5/100)

Product catalog images are idealized views of a product, paired with idealized people. Customers’ homes and bodies are different. They realize that, and it causes hesitation when shopping online: What will that look like on me? Or in my house?

To deal with this objection head-on, some retailers are allowing customers to post their own image of a product they have purchased directly on that product’s detail page. There is a risk, of course, that a less than perfect image will break the sale. But retailers like Petco (illustrated below), Northern Tool, and Zales feel that the risk is outweighed by the persuasive power of customers who bought the item and liked it enough to return and post a picture. In Zales product reviews, customers upload images that show how diamond products look on their hands. In the Petco customer image below, a cute Chihuahua models a dress on the product’s detail page.

Petco

Chihuahua model at Petco.com

Product Details in Spanish (4/100)

Given the census data regarding the growth of the hispanic population in the USA, it is astonishing that only 4 out of the 100 top retailers reviewed in the UX Audit include the option on product detail pages to view the page in Spanish. Granted, there is a substantial cost associated with translating a massive product catalog into another language. But having a product page that a percentage of your site visitors can’t read is a large, and growing, missed opportunity. A couple of sites that did include Spanish product pages were Victoria’s Secret (illustrated below) and Rooms To Go.

Victoria's Secret

Victoria’s Secret acknowledges their multilingual audience.

Customer Product Tagging (3/100)

Letting customers create their own tags for products keeps the taxonomy fresh and relevant. It also gets customers involved with products that they like. When a customer sees that another customer described a product in a certain way, it seems more authentic and natural than the terms marketers have devised to describe that same product. After all, they weren’t paid to say it.

Furthermore, customers typically have to log in in order to tag a product, which is a step that supports ongoing loyalty and self-investment. The three sites we reviewed that included this feature were Urban Outfitters (illustrated below), Amazon.com, and Zappo’s.

Urban Outfitters

Crowdsourced tagging at Urban Outfitters

Co-Shopping (2/100)

Co-shopping is UX feature that lets people in different locations view the same product page, and chat in a sidebar about the product. Usography has noted a decrease in the availability of this feature since Buy.com purchased DecisionStep, creators of the leading co-shopping solution called Shop Together.

The decrease in availability is unfortunate, because there are situations in which people who are not at the same location want to view products together, chat about them, navigate to other products, etc. People working for the same company who are located in different cities, or even spouses who are temporarily apart but need to make an online purchase decision, can use co-shopping to complete the transaction. At the time of our Spring 2011 UX Audit, the only retail sites we reviewed that offered the co-shopping feature were Buy.com and Dell.com (illustrated below).

Dell.com

Coshopping, alive and well at Dell.

BFF/Text Us (1/100)

Charlotte Russe was the only site we reviewed that had this feature. It makes sense that any retailer that sells to Millennials would set up a communication channel based on texting. But texting is not just for Millennials. SMS text messaging is the most widely used data application in the world, with over 2 billion active users! So why is Charlotte Russe (illustrated below) alone out there with this feature?

Charlotte Russe

Charlotte Russe sets up texting.

What Other Customers Are Viewing Now (1/100)

Customers looking for ideas or wanting to know what items are hot right now may like a window into what other customers are viewing at any given moment in time. Buy.com has an elegant feature that does just that. It’s hard to appreciate the impact of this UX feature in the static image below. It’s worth a look at it in action on Buy.com to see how such a feature could enhance browsing and serendipity.

Buy.com

Buy.com allows users to see who’s looking at what.

Virtual Try-On (0/100)

Well, none of the retailers we reviewed had this feature. At least not on the product detail page (if a feature is buried somewhere outside the main product catalog path, we didn’t count it.) Why do we include it here? Because it is arriving on the scene, and will usher in a more realistic form of online shopping that makes store visits less necessary for certain categories of merchandise. Virtual Try-On has recently made advances in consumer awareness through augmented reality apps that are appearing on the scene, such as Zugara (shown below as implemented on the Fashionista / Tobi site).

The feature isn’t limited to apparel shops, although that’s the product category that seems to garner the most attention. It could also show BMW customers what they would look like pulling that new metallic blue Series 7 into the driveway. Or, how your living room would look with different kinds of furniture and decor. The Virtual Try-On feature is so compelling for customer engagement that we’ll continue to include it in the UX Audit, even with a score of 0.

Zugara

Zugara helps users see possibilities, with a little help from augmented reality (AR).

Editor’s note: For more info about the technology behind augmented reality (which is needed for virtual try-ons), check out this explainer at How Stuff Works.

Onwards…

UX Features are focal points of attention on e-commerce site. Understanding how your customers shop for your products, and what competitors in that category offer in terms of features, are key building blocks in a winning UX strategy.


Advertise here with BSA

July 19 2011

10:49

25 Ecommerce Websites for Your Design Inspiration

Grab $54 worth of premium icons & vectors just for subscribing to our weekly newsletter

Ecommerce websites can be one of the more challenging types of websites for designers. There is a lot that needs to be considered (see 9 Characteristics of Well-Designed Ecommerce Websites) and the design decisions can have a significant impact on the effectiveness of the website at converting visitors to customers.

In this post we’ll showcase 25 ecommerce websites that feature an attractive visual design. They should serve as an excellent source of inspiration when working on ecommerce projects of your own.

Red Velvet

Red Velvet

Anna & Boy

Anna & Boy

Custom Bags HQ

Custom Bags HQ

Camp Luxe

Camp Luxe

Make It Bead

Make It Bead

Neve Inspired

Neve Inspired

Tinkering Monkey

Tinkering Monkey

Mr. Porter

Mr. Porter

Sassy Duck

Sassy Duck

Gabbard Farms

Gabbard Farms

CXXVI Clothing Co.

CXXVI Clothing Co.

Gossard

Gossard

Mimco

Mimco

Juicy Couture

Juicy Couture

JAG

JAG

SABA

SABA

Crescendo

Crescendo

Christening Cards

Christening Cards

The Hungarian Wine Society

The Hungarian Wine Society

Jethro & Jackson

Jethro & Jackson

Burton

Burton

Graham and Green

Graham and Green

ShoeBeDoo

ShoeBeDoo

The Cassette

The Cassette

Rezet

Rezet

For more design inspiration please see:


Save on hosting with our favorite host, Eleven2. Enter the promo code “vandelay” to save:

  • 20% off each month for the first 12 months on shared hosting.
  • 30% off your first month on a cloud hosting account.

July 04 2011

13:50

Magento: Up and Running – New on Premium

Advertise here

Getting started with Magento themes is far more intimidating than it needs to be. This tutorial will get you familiar with Magento’s theming file structure, how Magento makes your life easier with a theme fallback system, and how to use layout configuration files.

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Magento: Up and Running - New on Premium

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl