Part 1 of “Improving the Online Shopping Experience” focused on the upper part of the purchase funnel and on ways to get customers to your website and to find your products. Today, we move down the funnel, looking at ways to enable customers to make the decision to buy and to guide them through the check-out process.

Ways to improve the online shopping experience and to reduce the drop in the purchase funnel. Part 1 covered points 1 to 3.

[Note: Have you already pre-ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]

Enable The Customer To Decide

Inform and reinforce the customer’s buying decisions by offering in-depth product information. The content on product pages should be relevant and should give the customer a virtual feel for the product. Ensure that your website addresses the key elements of a product page, listed below.

• Product name
  Product names should contain relevant keywords to help customers find and identify the right product. For a product such as a book, information about the author and edition is required.
• Images
  Use clear product images, with alternate views. Where appropriate, allow customers to zoom in, see different color swatches, or spin the product around with a 360° view. The product page for a book could get away with an image or two, but apparel should offer most of these options.
• Video
  Static images are not always sufficient to present a product. Video is a good way to showcase complex products that need detailed explanation or a “how to” demonstration.
• Pricing and availability
  Clearly list the price and availability. When products have variations (for example, different capacities for a hard drive, or different colors for shoes), make it easy for users to identify size and color combinations that are in stock (see the screenshot for Kohl’s below). And provide sizing charts to avoid surprises and returns later. If your business also has brick-and-mortar stores, allow users to check in-store availability online.
• Description
  Give customers a clear understanding of your products by providing detailed descriptions, with text and multimedia. Descriptions should be simple, clear and jargon-free. Consider tablet and mobile users by providing alternatives to Flash and Java content, and don’t require mouse hovering to access essential information.
• Customer ratings and reviews
  Unbiased and unedited ratings and reviews by customers will help visitors make up their minds about products that they may not be familiar with (for example, customer reviews suggesting to buy half a shoe size larger for a better fit will help others not make the same mistake). Many users look up ratings and reviews when they are in stores, not only at their desk, so make ratings and reviews easily accessible from mobile devices.
• Suggestions of related products
  These could be complementary products (for example, a USB power adapter when the customer is buying an iPod Touch), alternative products (different styles, models or versions) or recommendations based on other people’s purchases (“Customers who bought this also bought…”). Whatever their nature, they should be relevant and valuable to the user, not just an attempt to sell more.
• Tools
  Give users ways to save and share pages on the website. Businesses commonly do this through wish lists, “Email this page” features, and social sharing and bookmarking. Speaking of social, companies such as Buy.com (see screenshot below) and Wet Seal are experimenting with social shopping, allowing users to shop with their Facebook friends.
• Contact information
  Make it easy for customers to reach you when they need help.
• “Add to cart”
  Last but not least, make the call to action clear and prominent, to ensure that customers know how to check out.

The key elements of product pages on Zappos.com are highlighted.

Kohl’s offers a visual way to identify color and size combinations that are in stock.

Social shopping on Buy.com includes: (1) friends who are currently shopping together, (2) a chat window.

Reduce Shopping-Cart Abandonment

Customers abandon their shopping carts for numerous reasons, many of which can be prevented by improving the experience.

• Make the shopping cart always visible and accessible, and display a summary of items in the cart, keeping check-out a click away. As basic as this sounds, some websites still don’t enable customers to get to their shopping cart without adding something else to their order.
  
  Deal Genius offers no visible way to get to one’s shopping cart.
• A persistent shopping cart is important. Users who leave the website without completing their purchase should see their items in the cart when they return. If the user is logged in, the cart should also persist across devices, allowing them to seamlessly continue shopping anywhere and anytime.
• Using the customer’s address or ZIP code, show taxes, shipping options and costs, delivery estimates, and the total cost, thus avoiding last-minute “cart shock.”
• Give users the ability to update their shopping cart without having to go back to the product page.
• If you offer promotional discounts or coupons, give users the option to redeem them without making others feel like they are missing out on savings. Let users know how they can get these discounts (“Sign up for our weekly newsletter to get a discount on your next purchase!”).
• Offer contextual support to answer questions that shoppers may have regarding when their items will arrive, your return policy, and how to contact live help through a phone number, call-back or chat. Display this information in a sidebar, on the shopping-cart page or in a small pop-up window, so that users do not lose the context of where they are.
  
  Office Depot’s shopping cart features: (1) a persistent shopping cart, which shows the total cost and expands on hover to show its items; (2) the estimated total; (3) options to update the cart; (4) discounts, if applicable; (5) help options.

Keep Registration Short And Optional

Make the registration process optional and short; forcing registration is one of the main reasons why users don’t complete purchases. If you still need convincing, “The $300 Million Button” should drive the point home.

• When the check-out process starts, allow registered customers to log in, and provide easy ways for them to recover forgotten account information.
• Allow new customers to check out without registering. At the end of the check-out process, give them the option to register and save their information for future use. By this time, they will be motivated to simply create a password in order to avoid typing all of that information the next time.
  
  Sears has simple check-out options, allowing new users to register after checking out.
• Simplify and minimize the information required during the check-out and registration processes, by logically grouping the most important information first, and putting optional information towards the end. Some retailers, like Adorama, have got their check-out process down to one page.

Streamline Check-Out

Streamline the check-out process with relevant recommendations, a progress indicator, an order summary and confirmation.

• Relevant recommendations can be a valuable reminder to customers as they check out. Like product suggestions, recommendations at check-out should be relevant and useful to the customer, instead of a way to try to sell anything and everything. Buying the same noise-cancelling headphones from Buy.com and Amazon resulted in very different recommendations, as shown below.
  
  Very different recommendations from Buy.com (above) and Amazon (below).
• “Enclose” the check-out process by removing the header, navigation and footer. This will minimize distractions and guide the customer through the last few steps to complete their purchase.
• Use a progress indicator to show customers where they are in the process. “Three steps completed. Just one more to go!”
• Give users a choice of payment methods. If users prefer not to give their credit-card information, allow them to pay by PayPal, Google Checkout or another trusted local payment option. Make sure the third party displays the total amount to be charged before asking for any payment information.
• Link to your policies in context: link to the privacy policy when asking for an email address, and a link to the security policy near the credit-card fields. This relieves users from having to hunt for these policies and also instills confidence.
• When displaying the summary page of their order, allow customers to verify (and change, if necessary) the details before confirming the order. This is also a good place to restate the estimated delivery dates so that they can change the shipping method if desired.
• The final call to action that directs users to complete their purchase (“Place order”) should be prominent. Don’t lose customers at this stage by presenting other options to them.
  
  The check-out process on Adorama has been streamlined to a single page: (1) progress indicator; (2) multiple payment options; (3) contextual policies; (4) option to make changes; (5) prominent final call to action.
• Once the order has been placed, display a confirmation page, with the order number, saving and printing functionality, and a summary of the customer’s next steps or options. The order confirmation page for Shutterfly, a photo publishing website, not only tells users what their next steps are, but also displays timelines for the fulfillment of their order and contextual links to the next steps.
  
  Shutterfly’s order confirmation page informs users what to expect next, using contextual links.
• If your website allows new customers to check out without registering (as suggested above), then that would be a good time to ask them whether they would like to select a password to create an account and save their information for next time. Highlight some of the benefits of creating an account, so that registering at this stage becomes a no-brainer.

Take Action

Congratulations on making it through the 50 techniques in this two-part series. But this is just the beginning. If you kept your users in mind as you read through this article, you may have already identified areas in your online shopping experience that could be improved. Some of these, like presenting contextual links, are quick fixes, while others, like improving findability, will take weeks or months to implement.

When making changes, measure the impact of the changes using analytics, multivariate or A/B testing, and usability testing (see the further reading below). Improving the online shopping experience not only will make it easier for users and satisfy them more, but will increase your bottom line!

Amazon turned sweet sixteen this year, and, by extension, so did online shopping as we know it. As online shopping has grown over the past 16 years, so have user needs and expectations related to the online shopping experience. Setting up shop online is easy, but creating an experience that satisfies target users is a different story altogether.

In the traditional journey of a purchase, commonly depicted as a funnel, a business loses potential customers as they move closer to the purchasing stage. While this is natural and expected, improving the user experience can reduce this loss by removing unnecessary barriers to shopping online.

Ways to improve the online shopping experience and reduce the drop in the purchase funnel.

The guidelines, techniques and best practices in this two-part series address common user experience issues on e-commerce websites. They are intended as a starting point; books have been written on many of these topics, and a few are recommended at the end. Improving the user experience requires a good understanding of your users and their goals on your website. Use that lens as you read through, to see which of the techniques will improve the online shopping experience for your users.

This first part covers the upper part of the funnel: getting customers to your website and helping them find your products. Part 2 will address the lower part of the funnel: guiding customers through the decision-making process and check-out.

[Note: Have you already pre-ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]

Promote Your Online Presence

Make it easy for customers to find your website by using a combination of online and offline marketing tactics. Analytics will show you how users are coming to your website — for most websites, search engines and other online referrals, including social media, play a big role. What these reports will not show you are missed opportunities, such as customers ending up on your competitors’ websites instead of yours because of their search keywords.

• Analyze your website and the websites of key competitors to compare how you rank on the search terms used by your target users and to identify areas for optimization. Personas, which are representative profiles of target users, can be used as a tool for search marketing efforts, helping you to identify and prioritize keywords, offers and features and to create targeted landing pages. Digital consultancy Roundarch has an example of a keyword persona that it uses when working on search engine optimization (SEO) for Avis.
• If your business is selling in a competitive market, supplement your SEO efforts by buying relevant keywords for paid placement alongside search results, using services like Google AdWords and Microsoft adCenter.
• Create business profile pages on services such as Google Places, Bing Business Portal and Yahoo Local: these will be highlighted in search results and on location-based social networking services. In addition to your business name, include your physical address, phone number, URL and hours of operation.
• Use email campaigns to attract new customers and draw previous customers back to your website. In a recent Forrester study, retailers ranked email as having the highest return on investment (ROI) among their marketing efforts, including paid search, affiliate marketing and Facebook marketing.
• Create, join or support communities and social networks related to your products or related to issues that your product addresses. An example is Aspirin manufacturer Bayer’s involvement in and sponsorship of the Strong @Heart community on Facebook.
• Go where your customers are; these days, that includes social networks. Companies are experimenting with Facebook ads and check-in coupons, offering promotions on their Facebook walls, and tweeting time-limited deals to their followers. Although companies such as JCPenney and 1-800-Flowers.com have set up Facebook storefronts, their ROI is questionablein value.
  JCPenney’s Facebook storefront allows users to shop on the social network.
• Use a short, simple, intuitive and memorable Web address, and secure alternate spellings (walmart and wal-mart) so that users can get to your website even if they misspell your name (jcpenny, jcpenney, jcp).
• Increase visibility in search engine results using SEO techniques, including picking the right keywords and creating keyword-rich and search-friendly page URLs, titles, headings, tags and content. SEO is not a dirty acronym if done the right way. Trying to fool search engines may work for a while, but you will eventually be penalized, as JCPenney and Overstock recently discovered.
• Feature the URL prominently offline: in printed material, while people are on hold on the phone waiting for service or support, in offline advertising and promotion, and in brick-and-mortar stores where appropriate. Quick Response (QR) codes give smartphone users quick access to a website, a sub-section or a particular page without having to type in a long address.

Instill Confidence In Customers

Instill confidence and trust in customers by prominently displaying clear policies, trust certificates, security badges and contact information. Customers are cautious when asked for personal information, and rightly so, with news of hacked websites being so common. Even established brands that customers recognize and trust can use these techniques to reinforce confidence.

• Looks matter, and your website’s design is often the first impression that a customer will get of your business. Creating a professional-looking website is easy and inexpensive, so get the basics right and make a good first impression. This includes designing for accessibility and especially ensuring that your website renders well on mobile devices.
• Highlight security on secure areas of the website to remind customers that their information is safe; even though browsers have small built-in indicators to show secure areas, reiterate it on the page. Amazon does this through its sign-in button; other websites display a padlock icon near the log-in area.
  
  Amazon’s sign-in button reinforces a sense of security.
• Clearly state your business practices (including privacy, security and return policies), and make them accessible from every page. Don’t make users hunt for this information; rather, present these links contextually where appropriate (for example, display a link to your privacy policy near the email-address field).
• Visible contact information instills confidence, even if the customer does not have to use it. Offer contact options and alternatives: even though Amazon does not publicize its customer-service phone number, it makes up for it by offering excellent support via email, chat and call-backs.
• Lesser-known brands should do all of the above, as well as instill confidence by displaying trusted third-party certification and affiliations. These include trust certificates (e.g. TRUSTe), security badges (e.g. VeriSign), accreditation (e.g. BBB) and ratings (e.g. Bizrate).
  Instill confidence with trusted third-party certification and affiliations.

Enhance Product Findability

Enable customers to quickly find and discover products by offering robust search and navigation. Customers will not always start on your home page — a search engine or QR code could drop them many levels deep on your website — but good navigation and search should help them find their bearings.

• Create a strong foundation through distinct product categories and user-centric labels that help users explore other areas of the website. Involve users in the design process by conducting exercises such as card-sorting to understand their mental model and to create an architecture that is intuitive to them.
• Mega-menus can be used to expose multiple category levels without making users drill down. See Econsultancy’s article “25 E-Commerce Mega-Menus Dissected” for more examples. Keep in mind, though, that mega menus aren’t a panacea, they also require profound usability considerations.
  OfficeMax’s mega-menus facilitate the scanning of categories.
• Breadcrumb navigation enables customers to identify where they are on your website and helps them backtrack or broaden their search results if needed.
• Keep the search box consistently in the same location across the website. Customers expect it to include a text field, followed by a button labeled “Search,” usually in the top right of the screen.
• Accept colloquial synonyms and common misspellings as search keywords, and match results accordingly. On Amazon, a search for “iTouch” brings up the iPod Touch, and a search for “polar bear book” (as information architects so lovingly call it) brings up Information Architecture for the World Wide Web (which happens to be a great resource that looks closely at many concepts mentioned in this section).
• Help users get faster and more relevant search results. Predictive type-ahead options help users select the appropriate term before running a search. Providing related search terms helps with typos and more common alternatives.
• Display results based on relevance, but give users the options to refine, filter, compare and sort results based on various criteria and to control the number of results displayed at a time.
• Display a summary of key product information in the search resultsto speed up identification and selection. In addition to the name and image that the user expects, provide pricing, availability, ratings, shipping details and other relevant information.
  The search results for “polar bear book” on Amazon, which include: (1) predictive type-ahead; (2) tolerance for synonyms; (3) sorting options; (4) filtering options; (5) summary of key product information (ratings, reviews, formats, pricing, availability).

Stay tuned for the second part, which will focus on guidelines and techniques to help customers make purchasing decisions and to guide them through the check-out process.

Mediante herramientas de analítica web podemos determinar con exactitud en qué momento abandonan los usuarios el proceso de compra con más frecuencia, y determinar cuáles son los motivos que le llevan a ello.

Navegando por la web encontré un gráfico que refleja el camino tradicional de la compra, representado mediante un embudo, en el cual se puede observar que las empresas pierden sus clientes potenciales a medida que se van acercando a la etapa final de compra.

He aquí la importancia de diseñar un buen proceso de compra, que permita al usuario terminar su compra con facilidad. Para mejorar la experiencia del usuario en los sitios web de comercio electrónico, es importante llevar a cabo las siguientes tácticas y prácticas:

1. Aumenta tu presencia online

Los usuarios deben encontrar tu sitio web fácilmente dentro de la red, mediante la combinación de tácticas de marketing off- y on-line.

• Analiza tu sitio web y los de tus principales competidores para comparar su posicionamiento en los distintos buscadores, y ante los términos de búsqueda más usados por los usuarios del sector. Esto te puede ayudar a determinar las mejores palabras clave por las que tu sitio web debe ser buscado y encontrado.
• Si tu negocio está vendiendo en un mercado competitivo, complementa tus esfuerzos en SEO y SEM comprando palabras clave relevantes para las búsquedas a través de servicios como Google Adwords y Microsoft AdCenter.
• Crea la página de perfil de tu negocio en servicios como Google Places, Bing Business Portal y Yahoo Local. Incluye aquí tu nombre comercial, teléfonos de contacto y horarios de operación.
• Realiza campañas de correo electrónico para atraer nuevos clientes, y para traer de vuelta a los ya clientes.
• Crear o unirse a comunidades y redes sociales relacionadas con sus productos.
• Elige una dirección URL para tu web que sea simple, intuitiva y fácil, e incluso recogiendo palabras con faltas de ortografía, de manera que los usuarios lleguen a tu sitio web aún escribiendo mal tu dirección web. Para ello, es necesario adquirir varios dominios, redirigiéndolos al correcto.
• Incluye la dirección de tu sitio web en tu material impreso y así tus clientes la verán mientras están esperando en tu establecimiento. Usa códigos QR, que facilitan a los usuarios que disponen de smartphones un acceso rápido y fácil a tu página.

2. Da confianza a tus clientes

Exhibe claramente tu política de privacidad, certificados de seguridad SSL, información de contacto, términos y condiciones del servicio, etc.

• En las áreas seguras, resalta la seguridad empleada, para recordar a los usuarios que su información está tratandose de forma segura. Aunque los navegadores ya muestran esta información con el candado, no está de más mostrarlo en tu página.

3. Haz que tu producto sea fácil de encontrar

La navegación y usabilidad de la web es muy importante. El usuario debe saber en todo momento dónde está, qué categoría o producto está visualizando y cómo encontrar o navegar por la web.

• Crea una estructura de categorías de los distintos productos y añade un sistema de clasificación de etiquetas. Haz que la navegación sea intuitiva para el usuario.
• Muestra los denominados breadcrumbs o ruta de navegación, que indican al usuario donde están y le ayudan a volver a categorías previas o superiores.
• Incluye un formulario de búsqueda en la parte superior derecha de la pantalla. Los usuarios están habituados a tener un campo de texto para introducir el texto a buscar, y a su derecha el botón de buscar.
• Es importante que en las búsquedas, se acepten sinónimos de los términos buscados y faltas de ortografía comunes.
• Muestra los resultados basandose en la relevancia y ofrece al usuario filtros para restringir, comparar y ordenar los resultados en base a diversos criterios tales como precio, opinión de los usuarios, relevancia, etc…

4. El cliente es quien decide

Ayuda al cliente en su decisión de compra, ofreciendo una información del producto lo más detallada posible, incluyendo:

• Nombre del producto, usando palabras clave relevantes que ayuden al cliente a encontrarlo fácilmente. Por ejemplo, para un libro: información sobre el autor, edición, isbn, etc…
• Imágenes: ofrece imágenes y puntos de vista alternativos, con posibilidad e ampliar la imagen, siempre sin perder la navegación (mostradoras en capas superiores). Las vistas 360º son muy útiles, o imágenes del producto en distintos colores, etc…
• Video
• Precio y disponibilidad. Cuando los productos tienen variaciones (colores, características, capacidades, …) haz que sea fácil al usuario encontrar las combinaciones que se encuentran en stock.
• Descripción
• Calificaciones y opiniones o experiencias de otros clientes.
• Sugiere productos relacionados
• Herramientas para compartir la información con otros usuarios (enviar a un amigo, compartir en redes sociales, etc…). Es muy útil para el usuario disponer de una herramienta para ir añadiendo productos a su ‘lista de deseos’ o wish lists.
• Información de contacto
• Añadir al carro de la compra. Muestra un botón claro y visible.

5. Reduce el abandono del usuario en el carro de la compra

• Haz que el carrito de compra esté siempre visible durante toda la navegación en la web, y que sea fácilmente accesible. Tan sólo haciendo un click en él debe desplegar un resumen de los artículos incluidos.
• Permite al usuario modificar sus artículos del carro sin necesidad de volver a la página del producto, eliminando o añadiendo cantidades de los diferentes artículos.
• Si su web ofrece descuentos mediante promociones o cupones, ofrece al usuario la opción de hacerlo de forma clara.
• Muestra al usuario toda la información relativa a cúando recibirá el pedido, política de devoluciones o cambio, y de cómo ponerse en contacto (vía telefónica, chat o solicitando ser llamado).

Imagen: permuto.com

6. Haz que el proceso de registro de usuario sea breve y además opcional.

Esta es una de las principales razones por las cuales el usuario abandona la compra.

• Para clientes registrados, ofrece la posibilidad de recordar su contraseña.
• Para clientes nuevos, permíteles terminar la compra sin necesidad de registrarse. Pero al final del proceso, recuérdales las ventajas de registrarse (no tener que introducir la información la próxima vez que compre, descuentos, acceso a información exclusiva, etc…)
• Simplifica al máximo la información requerida durante el proceso de compra. Si lo puedes hacer en una sola página mejor.

7. Simplifica el proceso de compra

• Indica en todo momento que paso del proceso se encuentra el cliente y cuáles son los siguientes pasos.
• Aisla el proceso de compra del resto de la web, eliminando la cabecera de la web, navegación y pie de página. Esto reducirá la distracción del usuario le guiará en sus últimos pasos.
• Da al usuario la posibilidad de pagar de diferentes formas: Paypal, pago con tarjeta de crédito, etc… Asegúrate de mostrarle el precio total una vez haya seleccionado el método de pago.
• Incluye un enlace a la política de privacidad cuando se pida una dirección de correo electrónico o datos personales, y un enlace a la política de seguridad cuando se soliciten datos de tarjeta de crédito.
• Una vez que el pedido se ha realizado, muestra una página de confirmación, con el número de pedido, y da la posibilidad de imprimir.
• Si el usuario no se ha registrado previamente, este último paso de confirmación es buen momento para recordarle al cliente si quiere registrarse usando los datos utilizados durante el proceso de compra, de modo que tan sólo una contraseña que le permita guardar los datos para futuras compras

Igual que en años anteriores la mayoría de los compradores (64,7%) prefieren pagar sus compras electrónicas a través de tarjeta de crédito o débito.

La segunda opción preferida de pago, aunque a una clara distancia del pago por tarjeta, es el pago mediante PayPal. El pago contra reembolso, en tercer lugar, sólo son preferidas por el 9,9% y los pagos por transferencia bancaria por el 5,7% de los internautas compradores.

Las mujeres, los más jóvenes (34 años o menos), individuos de nivel socio-económico medio-bajo y los residentes en municipios pequeños (de 10.000 a 50.000 habitantes) se decantan por el pago contra reembolso en mayor proporción que el total de compradores, mientras que los hombres, los mayores de 35 años, las personas con estudios universitarios y los individuos de nivel socioeconómico alto o medio alto optan mayoritariamente por la tarjeta de crédito.