La guía definitiva para el diseño de sitios web de comercio electrónico

Las ventas de comercio electrónico en EE. UU. continúan alcanzando nuevas alturas en 2018. En todo el mundo, el comercio electrónico continuará registrando ganancias sólidas por una suma de $ 2.3 billones. Pero, ¿qué hace que un sitio de comercio electrónico triunfe sobre otro?

Varios factores determinan el éxito general de un sitio web de comercio electrónico, incluida la calidad del producto, el reconocimiento de la marca, los costos de envío, las políticas de devolución, la confiabilidad y el servicio al cliente. Sin embargo, el diseño reflexivo de la experiencia del usuario también es clave para brindar a los clientes una experiencia satisfactoria y sin fricciones. No solo convertirá los clics potenciales en transacciones de comercio electrónico reales, sino que también hará que los clientes regresen una y otra vez.

Aquí hay una guía completa de diseño de UX de comercio electrónico para crear excelentes sitios web de comercio electrónico, completa con ejemplos.

Diseño de comercio electrónico para la confianza y la seguridad

En primer lugar, es importante diseñar un sitio web en el que los compradores sientan que pueden confiar. A la mayoría de los compradores les preocupa la privacidad y si el sitio protegerá sus datos personales proporcionando una transacción segura. Si el sitio web no se siente confiable, simplemente elegirán comprar en otro lugar.

Aquí hay algunos métodos que comunicarán confiabilidad:

• Incluya una descripción general del negocio:

  • Proporcionar información general
  • Fotografías de personas detrás del negocio.
  • Información del contacto
  • Enlaces a las redes sociales
  • Una página de preguntas frecuentes (FAQ)

• Publique las políticas de la tienda y asegúrese de que no sean demasiado difíciles de encontrar:

  • Políticas de envío y devolución
  • Describe el proceso de devolución y qué productos se pueden devolver
  • Proporcione fácil acceso a una política de privacidad que cubra la información personal y financiera de los compradores (esto es crucial)

Escriba en un lenguaje sencillo y evite la jerga legal o de política interna.

• Compartir reseñas de productos. Proporcione reseñas de productos para ayudar a los compradores a comprender más sobre el producto; esto ayudará a aliviar cualquier inquietud que puedan tener y brindará una excelente experiencia de usuario de comercio electrónico. Vaya un paso más allá ofreciendo reseñas de productos junto con información adicional sobre los revisores, o resumiendo las reseñas. Este paso puede ayudar a que sea más fácil para los compradores obtener el máximo beneficio de las opiniones de los demás.
• Utilice un servidor seguro. Los compradores esperan que su información personal permanezca segura mientras compran en línea. Los certificados SSL (capa de conexión segura) autentican la identidad de un sitio web y cifran la información que debe permanecer segura. Es una señal esencial que indica que las cajas son seguras. Asegure a los compradores que sus datos están protegidos mediante la implementación de SSL y mostrando insignias de certificados SSL.

• Agregar sellos de confianza reconocidos. Un sello de confianza verifica la legitimidad y seguridad de un sitio web. Algunas compañías fiduciarias incluso agregan una capa adicional de protección al ofrecer algún seguro si la transacción resulta ser fraudulenta. El uso de sellos de confianza reconocidos garantiza a los compradores potenciales un proceso de transacción seguro, lo que conduce a un aumento de las ventas y proporciona una mejor experiencia de usuario en el comercio electrónico.
• Mostrar atención al detalle. Haga que el sitio web se vea legítimo y profesional al evitar errores tipográficos, imágenes faltantes, enlaces rotos, errores 404 (página no encontrada) u otros errores que acaban con la experiencia de usuario del comercio electrónico.

Consideraciones de diseño de interfaz de usuario de comercio electrónico

La apariencia de un sitio web es el principal impulsor de las primeras impresiones. La investigación concluye que las personas determinarán si les gusta un sitio web o no en solo 50 milisegundos.

Estos son algunos consejos esenciales para el diseño de la interfaz de usuario:

• Sigue la identidad de la marca. La marca debe ser evidente en todo el sitio web. Elija colores que reflejen la marca y establezca el estilo para dejar claro qué tipo de productos se venden. Asegúrese de que la experiencia de marca sea consistente en todos los canales, ya sea en línea, en la tienda o en un dispositivo móvil. Esto ayudará a construir una fuerte relación marca-cliente.
• Adoptar jerarquía visual. El contenido más crítico debe mostrarse en la parte superior de la página. En algunos casos, usar menos espacio en blanco para acercar los elementos es mejor que empujar el contenido crítico debajo del pliegue.
• No sobrediseñe. Limite los formatos de fuente, como la fuente, los tamaños y los colores. Cuando el texto se parezca demasiado a los gráficos, se confundirá con un anuncio. Use texto de alto contraste y colores de fondo para que el contenido sea lo más claro posible.
• Cíñete a los símbolos conocidos. Utilice iconos o símbolos que sean fáciles de identificar. Los íconos desconocidos solo confundirán a los compradores. Una buena manera de evitar cualquier posible confusión es proporcionar etiquetas para los íconos.
• Evite las ventanas emergentes. Las ventanas emergentes son una distracción. Incluso si contienen información valiosa, es más probable que los compradores los descarten de inmediato; una vez que se van, incluso si lo desean, es difícil para los compradores encontrar la información nuevamente.

La importancia de la navegación del sitio de comercio electrónico sin fricciones

Libre de fricción es la forma de ser. La navegación se trata de lo fácil que es para las personas moverse por el sitio web, encontrar lo que buscan y, finalmente, actuar. La experiencia de compra en el comercio electrónico debe ser fluida para que los compradores no se queden a la mitad del proceso.

Algunos aspectos clave del diseño del sitio web de comercio electrónico para facilitar la navegación incluyen:

Categorías de productos bien definidas

El nivel superior de navegación debe mostrar el conjunto de categorías que ofrece el sitio. Agrupe los productos en categorías y subcategorías que tengan sentido. Las etiquetas de categoría funcionan mejor como palabras individuales que describen la gama de productos, de modo que los compradores puedan escanearlas y comprender al instante lo que representan. Lo mejor es probar la navegación del sitio por parte del usuario tanto como sea posible para una excelente experiencia de usuario de comercio electrónico, ya que es una característica clave del sitio.

Búsqueda de Producto

En pocas palabras, si los compradores no pueden encontrar el producto, no pueden comprar el producto: cree una función de búsqueda que les ayude a encontrar fácilmente lo que están buscando:

• Haz que la búsqueda sea omnipresente. Coloque el cuadro de búsqueda en cada página y en lugares familiares. La caja debe ser visible, rápidamente reconocible y fácil de usar. Las posiciones estándar para implementar el cuadro de búsqueda son la parte superior derecha o superior central de las páginas, o en el menú principal.
• Soporta todo tipo de consultas. Las búsquedas deben admitir todo tipo de consultas, como nombres de productos, categorías y atributos de productos, así como información relacionada con el servicio al cliente. Es una buena idea incluir una consulta de búsqueda de muestra en el campo de entrada para sugerir a los compradores el uso de las distintas funciones.
• Tener una funcionalidad de búsqueda de autocompletar. La función de autocompletar facilita que los compradores encuentren lo que buscan y aumenta el potencial de ventas al sugerir cosas dentro del área que ya están buscando.
• Permitir ordenar y filtrar los resultados. Permita que los compradores clasifiquen los resultados de búsqueda según varios criterios (los más vendidos, el precio más alto o más bajo, la calificación del producto, el artículo más nuevo, etc.) y elimine los artículos que no encajan en una categoría determinada.

Productos filtrantes

Cuantas más opciones se dan, más difícil es elegir. Ayude a los compradores a encontrar los productos correctos implementando filtros. Les ayudará a reducir sus opciones y saltar directamente a la gama de productos deseada.

Vista rápida del producto

Una "vista rápida" reduce el tiempo que tardan los compradores en encontrar el producto correcto al eliminar las cargas de página innecesarias. Por lo general, los detalles del producto se muestran en una ventana modal sobre la página vista. No intente mostrar todos los detalles del producto, en su lugar, incluya un enlace a la página completa del producto para ver los detalles completos. Además, asegúrese de incluir un botón "Agregar al carrito" en un lugar destacado, así como una funcionalidad "Guardar en la lista de deseos".

Ofertas especiales

Los compradores siempre buscan ofertas especiales, descuentos o las mejores ofertas. Haga visibles las ofertas exclusivas para que los compradores las conozcan. Incluso si las diferencias de precio no son tan grandes, la sensación psicológica de ahorrar algo de dinero crea la ilusión de tener ventaja.

Diseño de página de producto de comercio electrónico

Para una experiencia de usuario de comercio electrónico sobresaliente cuando los compradores encuentran con éxito el producto que desean, permítales conocer el producto. Diseñe una página de producto que cree una experiencia lo más similar posible a una experiencia de compra en persona, incluyendo muchas imágenes, descripciones detalladas y cualquier otra información útil y relacionada con el producto. Echemos un vistazo en profundidad a lo que esto significa.

Proporcione excelentes imágenes de productos

Con el comercio electrónico, los compradores no pueden tocar, sentir o probar el producto. En cambio, todo depende de lo que ven en línea. Esta es la razón por la cual es fundamental proporcionar imágenes de productos que muestren claramente todos los aspectos del producto. Aquí hay una lista de verificación para imágenes de productos perfectas:

• Usa un fondo blanco. El fondo de las imágenes del producto no debe distraer ni entrar en conflicto con el producto en sí. Un fondo blanco funciona mejor porque permite que el producto se destaque y funciona con casi cualquier estilo o combinación de colores.
• Utilice imágenes grandes y de alta calidad. Las buenas imágenes venden el producto. Las imágenes de alta calidad captan el interés de los compradores y les muestran exactamente lo que están comprando. Tener imágenes grandes permite a los compradores ampliar y examinar un producto con gran detalle.

• Usa una variedad de imágenes. Muestre el producto desde varios ángulos diferentes e incluya primeros planos para proporcionar una idea más completa del producto. Una vista de 360 ​​grados, donde pueden mover el producto, es una buena manera de brindar una experiencia cercana a ingresar físicamente a la tienda e interactuar con ella. VR eCommerce es la próxima ola de esta experiencia.
• Usa vídeo. Los videos tienen la capacidad de brindar mucha información en poco tiempo. Use un video para mostrar el producto en uso y para proporcionar tanta información funcional como sea posible.
• Se consistente. Use imágenes que sean consistentes en varias páginas y que también estén en línea con la apariencia del resto del sitio web. Esto mantendrá todo limpio y ordenado. La imagen principal del producto debe ser la misma en todas las áreas del sitio, como los aspectos destacados del producto o en la sección de artículos destacados.

Proporcione la cantidad justa de información del producto

Proporcione a los compradores información detallada sobre el producto para que puedan tomar una decisión de compra informada. Muestra disponibilidad, opciones para diferentes tamaños o colores, dimensiones, una tabla de tallas, materiales utilizados, costo total, garantías y más. Cuantas menos preguntas les queden sobre un producto, más probable es que realicen una compra.

Emplear diseño persuasivo

De acuerdo con el principio de escasez, los humanos otorgan un valor más alto a un objeto que es escaso y un valor más bajo a los que son abundantes. Cree una sensación de urgencia en el proceso de ventas al mostrar la escasez: muestre cuántos productos quedan, marque en gris los tamaños que están agotados o muestre los plazos de venta. La escasez motivará a los compradores potenciales a tomar medidas.

Cada vez más, las empresas utilizan investigaciones psicológicas avanzadas y, para generar más participación y compras, han convertido lo que solía ser un arte en una ciencia. El diseño persuasivo en el comercio electrónico es una forma muy efectiva de obtener más compras.

Mostrar productos relacionados y recomendados

Muestre productos similares que a los compradores también les puedan gustar y que funcionen bien con el producto actual o los productos que otros han comprado. Esto se puede mostrar en una página de detalles del producto o en el carrito de compras y ayudará a guiar a los compradores a los productos que satisfacen sus necesidades, animándolos potencialmente a continuar comprando, una excelente manera de realizar ventas cruzadas de productos relacionados.

Diseño de carrito de compras

El carrito de compras es esencial ya que es donde los compradores revisan los productos seleccionados, toman la decisión final y proceden a pagar. El objetivo principal del carrito de compras es llevar a los compradores a pagar. A continuación se ofrecen consejos sobre cómo diseñar un carrito de compras que sea fácil de usar y anime a los compradores a seguir comprando.

• Utiliza una llamada a la acción (CTA) clara. El llamado a la acción principal en la página del carrito de compras debe ser el botón de pago. Use colores brillantes, muchas áreas en las que se pueda hacer clic y un lenguaje simple para que el botón de pago sea visible, sencillo y fácil de usar.
• Proporcione retroalimentación adecuada. Asegúrese de que cuando se agrega un producto al carrito de compras, se confirme de manera inmediata y clara. Los compradores se confunden con comentarios inadecuados, como mostrar un texto de confirmación discreto. Una buena idea es usar animaciones, ya que el movimiento atrae el ojo humano.
• Use un mini widget de carrito. Permita que los compradores agreguen productos a su carrito sin salir de la página en la que se encuentran, usando un mini carrito. También les permite navegar, descubrir y agregar más productos. Los mini widgets de carrito siempre deben vincularse al carrito de compras de página completa.

• Mostrar detalles del producto. Mostrar detalles como nombres de productos, imágenes, tamaños, colores y precios en el carrito de compras ayuda a los compradores a recordar cada producto, así como a comparar productos. Vincule los productos en el carrito de vuelta a sus páginas completas de productos, para que los compradores puedan revisar más detalles cuando sea necesario.
• Haz que el carrito sea fácilmente editable. La capacidad de eliminar, guardar para más tarde o cambiar detalles como el tamaño, el color o la cantidad debería ser de fácil acceso.
• Evite la sorpresa de costos de envío e impuestos inesperados. Los costos de envío inesperados son una de las principales razones por las que los compradores abandonan sus carritos de compras. Coloque las opciones de envío y los impuestos con un cálculo preciso de los costos y una fecha de entrega prevista por adelantado.

Diseño de pago de comercio electrónico

Un diseño elegante y moderno no determina un sitio web de comercio electrónico exitoso ni necesariamente proporciona una gran experiencia de usuario de comercio electrónico. El éxito del comercio electrónico solo se mide por la cantidad de compras completadas. Aquí hay algunas formas de crear una página de pago bien diseñada, que contribuirá a una conversión exitosa:

• Ofrece varias opciones de pago. Diferentes compradores tienen diferentes preferencias cuando se trata de realizar pagos. Ofrezca tantas opciones de pago como sea posible (dependiendo del público objetivo) para expandir la base de clientes y facilitar que los compradores completen su pedido.
• Mantenlo simple. Minimiza el número de campos y pasos para completar la compra. Usar la dirección de envío como dirección de facturación de forma predeterminada es una buena manera de minimizar la cantidad de campos; idealmente, diseñe un pago de una sola página donde los compradores puedan ver su carrito e ingresar la información de entrega y pago.

• Hacer el registro opcional. Obligar a los compradores a crear una cuenta antes de su primera compra ahuyentará a los compradores. Ofrézcales la opción de registrarse después de completar la compra y resalte los beneficios del registro cuando les pida que se registren. Los beneficios incluyen un pago más rápido gracias a la información personal, como la dirección de envío guardada o la información de pago, y el acceso a ofertas exclusivas que solo están disponibles para miembros registrados.
• Utilice indicaciones de error claras. No hay nada más frustrante que no poder hacer una compra o no saber por qué. En lugar de mostrar los errores después de enviar un formulario, haga que las notificaciones de errores aparezcan en tiempo real. Coloque mensajes de error claros y concisos directamente encima o al lado del artículo que requiere corrección, para que los compradores los noten y los entiendan.

• Mantenga a la gente en el buen camino. Cuando utilice un pago de varias páginas, incluya una barra de progreso que muestre cuántos pasos más quedan para completar la compra. Esto eliminará cualquier ambigüedad y asegurará a los compradores que están en el camino correcto. Cuando se complete la compra, muestre una confirmación del pedido y el estado del pedido con el seguimiento del envío.
• Ofrece apoyo. Incluya un chat en vivo o un número de contacto durante todo el proceso de pago, de modo que cuando los compradores tengan preguntas, puedan obtener respuestas rápidamente en lugar de tener que abandonar el sitio e ir a otro lado.

Resumen

Los compradores en línea esperan experiencias sin fricciones pase lo que pase. Al diseñar un sitio de comercio electrónico, no se trata solo de crear un sitio web, sino también de crear una experiencia de compra en línea que convierta a los compradores pasivos en clientes de pago.

Con suerte, esta guía de diseño de sitios web de comercio electrónico lo ayudará a tomar decisiones de diseño esenciales para crear una excelente experiencia de usuario de comercio electrónico que sea profesional, atractiva, fácil de usar y que haga que los compradores regresen por más una y otra vez. El rápido crecimiento más una participación de mercado relativamente baja significa que todavía hay una enorme oportunidad para que los nuevos jugadores superen a los líderes tradicionales de la industria.

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX – Principios y estrategias de diseño esenciales
• UX de comercio electrónico para la experiencia móvil
• Cómo enganchar a los compradores de comercio electrónico a través del diseño UX
• Comercio electrónico rediseñado: cómo los cambios menores lograron importantes mejoras en la experiencia de usuario