1.6 Diseño de página web – checklist de 36 consejos prácticos
Introducción
El éxito o fracaso de tu tienda online depende directamente de la experiencia que tenga un usuario durante los primeros segundos de visitar tu sitio web. Si algo no le gusta, inmediatamente dejará tu tienda y buscará otra alternativa.Son solo algunos segundos los que tienes a tu disposición para lograr seducira ese usuario de que permanezca en tu sitio, navegue por sus diferentes páginas y, finalmente, concrete una compra. Ese es el gran desafío.
Además, siempre debes tener presente que en el comercio digital solo dispones de dos de los cinco sentidos que temenos los seres humanos: la vista y el oido. Vale decir, un comprador digital toma sus decisiones de compra solo por lo que ve y escucha, nada más. No puede oler, ni tocar ni degustar un producto online. Es por ello que todos tus esfuerzos deben orientarse en lograrla mejor presentación de tus productos, con las mejores imagenes y videos, así como con un buen relato. Esos son los ingredientes básicos que te ayudarán a que un usuario se sienta atraído a permanecer en tu tienda y, eventualmente,hacer una compra.
Por otra parte, cuando tomaste la decisión de adoptar el canal digital para la promoción y venta de tus productos o servicios, probablemente lo hiciste basado en lo que estaba sucediendo en el mercado. Asimismo, lo queimplementaste fue una buena solución para el momento y para el nivel de conocimiento que tenías. Para tu consulelo, la gran mayoría lo aborda así.
En este documento, te queremos invitar a que te tomes un tiempo y revises por completo tu canal de ventas digital. Para ello, ponemos a tu disposición este checklist con los 36 puntos más críticos, de tal manera que al final del proceso de revisión y ajuste, tendrás un sitio web capaz de responder a los desafíos que presenta hoy día este canal. Los hemos agrupado en las siguientes categorías:
1. Asegurarse de que el sitio web sea responsivo
Esto es crucial cuando se trata de diseñar un sitio de comercio electrónico. Con más dispositivos capaces de conectarse a Internet que nunca antes, no querrás tener un sitio de comercio electrónico que no funcione en un smartphone o una tablet. Las cifras muestran que el 62% de los usuarios de smartphones hicieron una compra a través ese dispositivo. Además, no tendrá ninguna posibilidad de tener éxito con una estrategia de marketing de comercio electrónico omnicanal si tu sitio web no funciona bien en los dispositivos móviles.
2. El icono del carrito de compras debe estar disponible en cada página
Los sitios de comercio electrónico bien diseñados tienen sus iconos de carrito claramente visibles en la esquina superior derecha de cada página. Si tu cliente ha añadido artículos al carrito, mostrará cuántos artículos hay en él. Stanley, un minorista de envases de alimentos y bebidas, va un paso más allá con su diseño web de comercio electrónico, que muestra una vista previa del carrito cuando los clientes pasan el cursor sobre el icono del carrito.
3. El botón de pago debe ser siempre claramente visible
El botón de pago se encuentra normalmente junto al icono del carrito. Algunos sitios de comercio electrónico tienen su icono del carrito que lleva directamente a la página del carro, como se puede apreciar en el ejemplo de Amazon que se muestra a continuación.
4. Tener una barra de búsqueda prominente en cada página
Si echas un vistazo a cualquier sitio web de comercio electrónico, tendrán una barra de búsqueda situada en la parte superior de cada página. Una función de búsqueda completa permite a los usuarios encontrar un producto en su catálogo. Si es capaz de proporcionar términos de búsqueda sugerentes mientras su cliente teclea en la barra de búsqueda, eso es aún mejor.
5. Borrar los menús de navegación
Tener un menú de navegación claro contribuye a identificar los diferentes tipos de categorías de productos que tu sitio web vende a los clientes. Es importante que utilices términos generales para segmentar sus productos. Por ejemplo,una marca de moda diferenciará su gama de productos por «Hombres»,»Mujeres» y «Niños».
6. Información de contacto en cada página
Tener la información de contacto en cada página reduce la ansiedad del comprador. Le da a los clientes la seguridad adicional de que pueden contactarte, si tienen alguna duda o pregunta.
7. Mantener la confianza del consumidor
Siendo la seguridad cibernética una preocupación importante para los compradores en línea, asegúrate de que cada página tenga enlaces a las siguientes páginas:
• Testimonios de clientes
• ¿Por qué comprar con nosotros?
• Política de privacidad
• Información de entrega
• Política de devoluciones
Puedes enlazar estas páginas en el pie de página de tu sitio para mantener unlook más limpio. Aquí hay un ejemplo de la empresa Nine Line Apparel:
8. Mostrar logotipos
Si tu comercio electrónico vende marcas conocidas, asegúrate de incluir esos logos, siempre que sea posible. Tener logotipos de grandes marcas le da al cliente una indicación de qué tipo de producto vendes – además, añade cierta autenticidad y prestigio a tu marca por estar afiliada a los líderes de laindustria. Aquí hay un ejemplo de cómo Best Buy utiliza los logotipos en susitio:
Checklist de la página de inicio
La página de inicio (homepage) es normalmente la primera página que ven tus clientes. Y muchas marcas exitosas de comercio electrónico ven su página de inicio como el primer paso del viaje de un cliente dentro de tu tienda. No conviertas tu página de inicio en una página con un listado de productos. Úsala para crear un atractivo.
9. Llamadas prominentes a la acción
Anime a sus visitantes a explorar el sitio. Si está realizando una venta o una promoción de una selección de productos, asegúrese de tener esto en la página de inicio e incluya una llamada a la acción como «Vea nuestras últimas ofertas» e incluya un enlace a un listado de productos de todos los productos que se incluyen en la venta.
Otros ejemplos de llamada a la acción incluyen «Vea nuestra gama de ideas para el cumpleaños». Tu llamada prominente a las acciones debe ser relevante para el producto que vendes. Aquí tienes un ejemplo de la página de inicio de North Face (mira cómo sullamada a la acción anima a sus clientes a explorar el sitio):
10. Tener una fotografía emocionalmente atractiva
La fotografía es muy importante cuando se trata de vender en línea. Recomendamos encarecidamente (si es posible) que invierta en fotografía profesional de estilo de vida para capturar visualmente (y emocionalmente) el momento en que sus productos están en uso. Los sitios de comercio electrónico de moda, como Reforma, han utilizado con éxito su inversión en fotografía de estilo de vida para capturar momentos de personas que usan su producto. Vea el ejemplo a continuación:
Otro ejemplo es la industria de los viajes, ellos capturan el momento en que la gente disfruta del sol, encendiendo la envidia y el deseo al mismo tiempo.
11. Incluyen «Top Selling», «Producto destacado» y «Recomendado parausted»
Además de incluir los productos que están en promoción, incluye los productos que son más vendidos o incluso destacados. Incluso puedes añadiruna lista de productos que son adecuados para tu cliente. Esto se puede lograr de varias maneras; puede seleccionar los productos manualmente o automatizar la selección en base a un criterio diferente (por ejemplo, «los clientes también compraron…»).
12. Utilice las imágenes para apoyar las llamadas a la acción y los «TopSellers».
Los clientes absorben mejor la información si se presenta visualmente, además de gatillar las emociones. Es decir, usa fotos del producto o de los clientes disfrutándolo.
Checklist de la página del catálogo
Los clientes suelen llegar a una página de catálogo de productos a través de la barra de búsqueda o seleccionando una categoría en el menú de navegación.La página de productos nunca debe incluir todos los productos, de lo contrario,puede resultar demasiado extensa y abrumadora. Se sugiere presentar el listado de productos por lo que su cliente quiere, por lo que se recomienda utilizar etiquetas para segmentar tus productos.
13. Añade una introducción a la categoría
Dependiendo de tu industria, es una buena práctica incluir una introducción a la categoría de productos con una imagen representativa apropiada. Ayuda a mejorar el enganche del cliente, porque inmediatamente se presentan los productos en su contexto. Si el cliente llegó a través de la búsqueda, entonces este paso es menos relevante.
Consejo de SEO: Utiliza esta sección para crear un «cómo» o «guía del comprador». Esto te permite optimizar las páginas de la categoría para diferentes palabras clave de mucha extensión. La empresa Revzilla es un gran ejemplo de esto, cuya imagen se muestra a continuación:
14. Mostrar la disponibilidad de existencias
A medida que un cliente se desplaza a través de tu lista de productos, infórmale la disponibilidad de stock en la página de listado de productos.
Mostrar esta información en la página de listado de productos evita que tucliente se sienta frustrado si hace clic en la página del producto y descubre queel producto está agotado.
15. Mostrar las funciones de filtrado y clasificación
Añadir un filtro y una función de clasificación ayuda a tus clientes encontrar mucho más fácilmente lo que buscan. Por ejemplo, si un cliente quiere comprar un par de zapatos marrones para hombre en un rango de precios de 45 a 50 dólares, puede seleccionar el color marrón y el precio en la sección de filtros.
Aquí hay un ejemplo de la página de listado de productos de Walmart que tiene filtros en el lado izquierdo:
16. Destacar los más vendidos o los favoritos de los clientes
Los clientes tienden a favorecer los productos que han sido comprados por otros o que han sido clasificados como de alto nivel.
17. Incluya las puntuaciones de las revisiones de los clientes
Los puntajes de revisión de los clientes pueden ayudar a los clientes a identificar qué productos han sido altamente calificados y probados socialmente (ver el ejemplo anterior de Walmart).
Checklist de las páginas de productos
La página de producto es donde se gana o se pierde el cliente. Es lo que ven los compradores después de seleccionar un producto de la página del catálogo.
18. Destaque el botón «Comprar» o «Añadir al carrito»
Debe incorporar la regla de los 3 segundos cada vez que un cliente visite la página de un producto. Así que haz que el botón «Comprar» o «Añadir al carrito» sea claramente visible. Utiliza colores vivos y brillantes para que el botón llame la atención de inmediato.
Ver el ejemplo de JD Williams a continuación, en el que destaca la valoración de clientes (color rosado, arriba), así como el botón del carrito (color verde,abajo):
19. Ofrece un botón de «Añadir a la lista de deseos»
El botón «Añadir a la lista de deseos» no debería ser tan visible como el botón»Comprar», pero da al cliente la oportunidad de seleccionar y apartar los artículos que le gustaría comprar en una fecha posterior.
20. Función «También te puede gustar» (apoya el aumento de ventas)
En su sitio web, la empresa The Iconic utilizó una función que ofrecía recomendaciones de productos basadas en lo que otros clientes habían comprado (es decir, los clientes que compraron X, también compraron Y) para obtener el máximo efecto. Ayuda a crear una experiencia de compra personalizada en tu sitio web y también apoya la venta del producto. (ver la siguiente imagen).
20. Función «También te puede gustar» (apoya el aumento de ventas)
En su sitio web, la empresa The Iconic utilizó una función que ofrecía recomendaciones de productos basadas en lo que otros clientes habían comprado (es decir, los clientes que compraron X, también compraron Y) para obtener el máximo efecto. Ayuda a crear una experiencia de compra personalizada en tu sitio web y también apoya la venta del producto. (ver la siguiente imagen).
21. Breve descripción del producto
Las descripciones de productos deben ser lo más concisas posible. Es poco probable que los clientes lean las descripciones de productos, a menos que quieran hacerlo. Si los productos tienen una descripción muy extensa, y el cliente está interesado, añada un «leer más» debajo de la versión concisa de la descripción del producto, para permitir al cliente obtener más información.
22. Fotos de productos desde diferentes ángulos
Debes exhibir una variedad de fotos que muestren diferentes ángulos delproducto. En lo posible, agregar una función de «zoom» para que los clientespuedan ver el producto más de cerca.
23. Agregar demostraciones de video
Hay muchas maneras de utilizar el contenido de video en las páginas de tus productos, pero las demostraciones de video del producto se están volviendo muy populares. Puedes hacer tu propio video para mostrar a los clientes cómo usar el producto y también dejar una reseña positiva de éste.
24. Mostrar el tiempo estimado de entrega
No dejes a tus clientes adivinando o especulando. Dales una estimación precisa de cuándo pueden esperar que el producto llegue a su puerta, tal como semuestra en la siguiente imagen:
25. Usa pestañas para productos que tienen muchos detalles
Los productos de alta gama, por lo general tienen mucha información. La utilización de pestañas es un recurso útil, que ayuda a mantener la información del producto en forma limpia y ordenada.
26. Mostrar comentarios o testimonios de clientes
Una lista de todos los comentarios de los clientes se encuentra generalmente al final de la página del producto. Esto le da a los clientes la oportunidad de ver lo que otros clientes han dicho sobre el producto, antes de tomar su decisión de compra.Usar los testimonios de los clientes a través de tu sitio web de comercio electrónico es uno de los trucos más eficaces para convertir más visitantes en clientes y es genial para el SEO, tal como se muestra en la siguiente imagen:
27. Mostrar la disponibilidad de existencias
Al igual que la página de listado de productos, mostrar el nivel de stock le da al cliente una indicación de si el producto está disponible o no. Si los niveles de existencias son bajos, asegúrate de que esto se indique explícitamente en la página, para que el cliente pueda hacer una compra ahora y no cuando sea muy tarde, por quiebre de stock.
Checklist de la página del carrito de compras
Una vez que el cliente ha elegido los productos que quiere comprar, revisará los artículos que están en el carrito de compras.
28. Mostrar todos los costos por adelantado
Las tarifas ocultas son la razón número uno para el abandono del carro de compras. Si hay algún cargo adicional, asegúrate de que se mencione en la página del carrito. Por ejemplo, si tu tienda online vende entradas de conciertos, asegúrate de informar a tu cliente de la comisión de reserva que tendrá que pagar.
29. Proporcionar una manera fácil de actualizar los artículos del carrito
Debes ofrecer a los clientes la opción de actualizar las cantidades o eliminarlos productos no deseados. Ego Pharmaceuticals, una marca de productos para el cuidado de la piel, es un buen ejemplo a seguir. En su página de compras, se puede actualizar fácilmente la cantidad de productos y eliminarlos productos no deseados del carrito, antes de realizar la compra.
30. Incluye un enlace «Volver a la tienda»
Los clientes tienden a revisar sus artículos en el carrito y tal vez quieran volvera la tienda para revisar el listado de productos y comprar más artículos.
31. Función «También te puede gustar» (otra vez)
La página del carrito es la última oportunidad de vender cualquier producto.Incluye imágenes y detalles de productos que pueden emparejarse con los artículos del carro de compra que ya fueron seleccionados por el cliente. Con este truco puedes aprovechar que el cliente ya confió en tu negocio y podría estar abierto a tentarse con otro artículo, con lo cual aumentarás el monto dela venta.
32. Mostrar opciones de entrega
Es muy importante informar a los clientes todas las opciones de entrega que ofrece tu empresa. Los compradores tienden a querer que sus artículos sean entregados más pronto que tarde. Así que si ofreces una entrega express, el mismo día o al día siguiente, debes mencionar esas opciones, pero sujetas al pago de una prima adicional.
Checklist de la página de pago
Una vez que los clientes estén conformes con los artículos seleccionados, procederá a comprarlos. Ahí es donde entra en juego la página de pago.
33. Elimina el menú de navegación
Cuando los clientes ya hicieron la selección de productos que quieren comprar,debes asegurarte que se concentren en completar la transacción, por lo que se recomienda eliminar el menú de navegación en la página de check out.
34. Dividir el proceso de pedido en 4 pasos
Esto asegura que el proceso de pedido se desarrolle con mayor fluidez. Puedes dividir el proceso de pedido en las siguientes 4 etapas:
• La interfaz del carro
• Nombre del cliente, detalles y dirección de entrega
• Información sobre el pago
• Página de confirmación
Northeast Nursery, una empresa de suministros de jardinería, hace exactamente lo que se requiere para producir un proceso de compra racionalizado y optimizado para la conversión:
35. Ofrece varias opciones de pago
Cuantas más opciones de pago ofrezcas, mejor. La forma de pago más obvia es a través de una tarjeta de crédito o débito. Pero también puedes integrar PayPal y Amazon Pay, ya que son dos de las soluciones de pago más confiables y conocidas.
36. Sellos de seguridad
Ofrezca a los clientes la seguridad de que sus datos financieros están a salvo mostrando su certificado de seguridad digital o cualquier sello de seguridad en la página de pago.