UX de comercio electrónico para la experiencia móvil

El término "comercio móvil" fue introducido hace 20 años por Kevin Duffey cuando sugirió que un dispositivo móvil podría funcionar como una tienda minorista en el bolsillo de un cliente. Teniendo en cuenta las limitaciones tecnológicas de la época, ¿quién hubiera pensado que algún día podríamos explorar, revisar y comprar productos fácilmente en un pequeño dispositivo de bolsillo?

No puedo exagerar cómo los dispositivos móviles están cambiando la forma en que interactuamos con nuestros consumidores; tenemos que aceptar estos cambios. – Joel Anderson, director ejecutivo de Walmart

El asombroso crecimiento del comercio electrónico también ha impulsado el crecimiento del comercio electrónico móvil, que ahora tiene un valor de casi $ 700 mil millones. El comercio electrónico móvil es actualmente la porción más grande del gigante mercado en línea. Más del 80 % de los estadounidenses han realizado una compra en línea en el último mes; hace tres años, la cifra era solo del 11,6 %.

Un informe de Business Insider Intelligence sugirió que el comercio móvil aumentará hasta un 45 % para 2020. La investigación de ComScore estuvo de acuerdo y, en 2016, informó un aumento del 44 % en el gasto a través de dispositivos móviles en comparación con 2015.

A pesar de las altas cifras de ventas, más del 60 % de los usuarios todavía se sienten preocupados por la posibilidad de que su información financiera sea pirateada cuando usan un teléfono móvil. Sin embargo, la satisfacción del cliente sigue siendo bastante alta, con gigantes minoristas móviles como Amazon y Apple recibiendo una calificación de satisfacción de más del 80%.

Prácticas recomendadas de UX de comercio electrónico móvil para el éxito

Admite el zoom de imágenes mediante gestos de pellizco y doble toque

La gente está familiarizada con gestos como tocar dos veces y pellizcar para acercar las imágenes en el móvil. Durante un estudio de usabilidad de comercio electrónico móvil, el Instituto Baymard descubrió que, naturalmente, los compradores quieren poder inspeccionar el producto a fondo y están preocupados por los pequeños detalles. Los usuarios que estaban interesados ​​en comprar un producto pero no podían explorarlo acercándose no se sentían cómodos comprándolo y, a menudo, no se comprometían con la venta.

Es bastante sorprendente que de las 50 aplicaciones de comercio electrónico móvil con mayor recaudación, más del 40 % no admite gestos de zoom. Incluso los sitios que ofrecían versiones de imágenes en primer plano experimentaron tasas de rebote similares, lo que sugiere que la compatibilidad con los gestos de zoom de imágenes de productos en una aplicación de comercio electrónico móvil es fundamental.

Teniendo en cuenta el tamaño de pantalla pequeño de los dispositivos móviles, este es un problema específico de la plataforma. La compatibilidad con al menos una de estas características pondrá una aplicación en la compañía del 50% superior de las aplicaciones de comercio electrónico, es decir, la lista de mayor recaudación.

Algunos factores a considerar:

• Las imágenes de baja resolución son el equivalente de las imágenes sin zoom. Los usuarios están interesados ​​en ver claramente los detalles de un producto y necesitan imágenes de alta resolución para hacerlo. La opción de acercar una imagen de baja calidad es bastante inútil, ya que no permite que el usuario vea los detalles.
• El Instituto Baymard descubrió que el 50 % de las aplicaciones no indican a los usuarios que pueden pellizcar o tocar dos veces las imágenes de los productos. Es importante indicar la disponibilidad del zoom de la imagen. Aunque estos gestos son comúnmente conocidos por los usuarios de dispositivos móviles, aún debe demostrarse que están disponibles. Para ello se recomienda el uso de iconos o representaciones visuales.

Proporcione una función "Guardar" para el carrito de compras

Como se mencionó anteriormente, el tamaño de pantalla pequeño de los dispositivos móviles es un obstáculo principal cuando se trata de comercio electrónico móvil. El Instituto Baymard observó que más del 61 % de los usuarios de dispositivos móviles a menudo usan sus computadoras de escritorio para completar una compra en lugar de su teléfono.

Una función de "guardar carrito de compras" reduce la cantidad de carritos abandonados y permite a los compradores guardar artículos para una compra posterior. Los carros de compras persistentes permiten a los clientes continuar con sus compras sin la necesidad de buscar el producto deseado en su devolución, una característica que el 55% de los compradores utilizaría.

He aquí cómo retener a estos clientes:

1. Haga que el carrito funcione como una lista de deseos guardando los artículos agregados al carrito.
2. Cree una opción para permitir que los compradores reciban correos electrónicos con artículos guardados. Muestre recordatorios de que pueden usar su escritorio para finalizar la compra.

Use formularios descriptivos y bien etiquetados

La aplicación de mejores prácticas para formularios móviles es otra consideración. Es importante que el diseño UX de una aplicación o sitio de comercio electrónico, mientras elimina cualquier confusión, permita a los usuarios completar formularios lo más rápido posible.

Estas son las mejores prácticas para la usabilidad de formularios móviles:

• Coloque etiquetas de formulario encima del formulario para mejorar la legibilidad, la facilidad de uso y la claridad. Explicar por qué se necesita cierta información reducirá la ansiedad de los usuarios a la hora de rellenar formularios en su móvil.
• Haga coincidir las entradas de texto con el teclado apropiado. Muestre un teclado de marcación cuando ingrese números de teléfono y dígitos de tarjetas de crédito, y un teclado de texto cuando ingrese direcciones y texto. Esto reducirá los errores de los usuarios y acelerará la finalización del formulario.
• Limite el número de campos de entrada para reducir el esfuerzo de escritura. Menos campos de entrada generarán un formulario menos cargado y mejorarán el flujo de pago de UX.
• Avanza automáticamente cada campo hacia arriba en la pantalla cuando se completa. Hacer esto no obstruirá la vista de los campos incompletos.
• Use escaladores en lugar de menús desplegables para reducir el esfuerzo del comprador. Los escaladores se utilizan para aumentar o disminuir el valor en una cantidad constante y son una solución con la que es más rápido trabajar y más atractiva a la vista.

Proporcione sugerencias automáticas inteligentes, detección automática, búsqueda de direcciones y errores

El propósito principal detrás de la sugerencia automática es hacer que sea más fácil y rápido para los usuarios completar formularios. La sugerencia automática predice consultas de búsqueda comunes y ayuda a los compradores a encontrar productos más fácilmente.

La usabilidad móvil se puede mejorar aún más mediante el uso de la detección automática del tipo de tarjeta de crédito. La detección automática agiliza el proceso de compra al proporcionar comentarios inmediatos sobre los tipos de tarjeta admitidos. La automatización de tantos procesos de entrada de datos como sea posible, preferiblemente con imágenes, mejora la experiencia del usuario y afectará positivamente las tasas de conversión.

La búsqueda y validación de direcciones aceleran el proceso de pago: varias API (como Google Places y USPS) permiten una fácil implementación de esta función.

Proporcionar validación de entrada en línea para errores también es una buena práctica en el diseño de UX móvil. La falta de un rendimiento rápido es una gran frustración para los compradores de comercio electrónico. Esto se puede ayudar proporcionando a los usuarios comentarios en vivo sobre su progreso (durante el pago, por ejemplo), especialmente cuando cometen un error involuntario. Esto permite a los usuarios corregir sus errores de inmediato, lo que afecta la usabilidad de manera positiva.

Use microinteracciones para mejorar la experiencia de usuario de las compras móviles

Las microinteracciones son detalles en la interfaz de un producto destinados a realizar una sola tarea mientras mejoran el flujo natural del producto. Me gusta y calificar un producto, elegir un color y un tamaño, y deslizar hacia abajo para actualizar los datos son ejemplos de microinteracciones.

Teniendo en cuenta lo comunes que son, las microinteracciones pueden hacer o deshacer la UX de una aplicación de comercio electrónico móvil.

Las microinteracciones se pueden utilizar para:

• Guiar al usuario a través de la aplicación de una forma más intuitiva;
• Transmita una mejor sensación de confianza, reduzca la ansiedad del comprador y aumente la comodidad psicológica general debido a interacciones más fluidas y naturales;
• Evite futuros errores y proporcione comentarios inmediatos a los usuarios en función de las actividades que hayan completado; y/o
• Mejore la interacción del usuario con la aplicación respondiendo a las notificaciones.

Proporcione una interacción fácil y orientada al pulgar

Comprender las formas más comunes en que los compradores sostienen sus dispositivos móviles mejora la experiencia y la usabilidad del usuario de comercio electrónico móvil. En 2013, Steven Hoober preguntó "¿Cómo sostienen realmente los usuarios los dispositivos móviles?" y observó cómo las personas interactúan y sostienen sus teléfonos inteligentes, y notó tres patrones de comportamiento principales que deberían guiar el diseño de UX móvil.

Adaptar las interfaces a la forma natural en que las personas usan los teléfonos móviles aumentará la comodidad del usuario y reducirá la ansiedad de los compradores. Los dispositivos móviles y los tamaños de pantalla varían, pero la "zona del pulgar", un aspecto crítico del diseño y la experiencia del usuario, sigue siendo la misma.

Diseñando alrededor de la “zona del pulgar”:

• Resuelve problemas potenciales con la navegación y la exploración.
• Mejora la interacción al acomodar mejor los gestos y el alcance de los dedos
• Convierte mejor y mejora la usabilidad al colocar elementos importantes en zonas de "fácil acceso"

Consideraciones para el diseño de comercio electrónico móvil orientado a la conversión

Transmita una sensación de seguridad en las aplicaciones móviles de comercio electrónico

La seguridad es una de las mayores preocupaciones de los usuarios al comprar en dispositivos móviles. Comunicar que sus transacciones son seguras agrega mucho valor a la percepción positiva que los compradores tienen de una tienda.

Aquí hay algunas técnicas de diseño de UX que comunican seguridad a los usuarios y reducen la ansiedad del usuario:

• Haga que las etiquetas de los botones sean sugestivas y claras sobre adónde van los compradores. Palabras como "continuar", "seguro" y "cifrado" fortalecerán la comodidad psicológica de los usuarios.
• Utilice símbolos de candado para garantizar a los compradores que sus transacciones son seguras.
• Utilice insignias de confianza de proveedores de seguridad como McAfee Secure y Norton. Esto ayuda a los usuarios a percibir un sitio web de manera positiva (estudio del Instituto Baymard).
• Aplique los principios de la psicología del color en el diseño para una percepción de confianza aún mejor por parte de los compradores. Algunos de estos principios incluyen colores orientados a la audiencia y específicos de género.

Priorizar la búsqueda (y mantenerla en la mitad superior)

Los compradores usan un sitio o aplicación de comercio electrónico móvil para explorar productos o comprar un producto en particular; en consecuencia, una búsqueda bien diseñada adquiere una importancia crítica para una aplicación de comercio electrónico móvil. eBay cree que la búsqueda en su sitio es una de las características más importantes para los compradores móviles y la enfatiza colocándola en el centro y encima del pliegue de la interfaz.

Consideraciones importantes para la búsqueda móvil:

• ¡Asegúrate de que esté visible! Mantener la barra de búsqueda de fácil acceso y en la parte superior de la página ofrece a los compradores una forma de buscar productos sin esfuerzo.
• Proporcione búsqueda anticipada mediante el uso de datos adquiridos de patrones de búsqueda comunes y muestre productos relacionados en las páginas de resultados de búsqueda.
• Proporcione opciones de filtrado avanzadas que permitan a los clientes encontrar sus productos deseados de forma rápida y sin esfuerzo.

Un aspecto importante a tener en cuenta al mostrar formularios de búsqueda es que solo son valiosos en las primeras etapas de la interacción de un usuario con la aplicación. Los usuarios generalmente buscan la aplicación al comienzo de su viaje de compras, y puede haber casos en los que mostrar un formulario de búsqueda más adelante en el viaje puede dañar la UX.

Por ejemplo, durante el proceso de pago, la búsqueda ya no es útil y solo distraerá porque podría hacer que los usuarios pierdan el enfoque y renuncien a su compromiso con la compra.

Proporcione un pago suave, fácil y rápido

Los estudios han demostrado que el proceso de pago es la parte más estresante de completar una compra en línea. El Instituto Baymard informa una tasa del 35% de abandono del carrito debido al requisito de crear una cuenta antes de comprar. Para disminuir las tasas de abandono del carrito, es importante diseñar un proceso de pago fácil y rápido que no pida a los compradores que se registren primero.

Los estudios de usabilidad han encontrado que más del 60% de los usuarios tuvieron dificultades para encontrar la opción de pago como invitado; ergo, la opción de pago para invitados debe ser claramente visible y de fácil acceso.

Aquí hay algunas sugerencias para mejorar el flujo de pago de comercio electrónico:

• Para promover la participación de los usuarios, etiquete cada paso del proceso de pago numerando y mostrando el paso actualmente activo.
• Use representaciones visuales como barras de progreso para mostrar el avance en el proceso de pago.
• Proporcione una opción para registrarse e iniciar sesión durante el proceso de pago, pero conviértalo en una opción.
• Para reducir la ansiedad y las tasas de rebote, sugiera a los usuarios que inicien sesión o se registren después de finalizar la compra si lo han hecho como invitados.
• Aplique técnicas de divulgación progresiva para mejorar el enfoque del usuario y cargar contenido un 30 % más rápido.

En resumen: ¿Cuáles son algunas de las características clave de un diseño de comercio electrónico móvil exitoso?

• Proporciona flujos de proceso de pago y registro rápidos y fáciles
• Inculca una sensación de seguridad y confianza al mostrar íconos, insignias, reseñas y testimonios apropiados
• Proporciona una interacción diseñada en torno a zonas aptas para los pulgares
• Utiliza una navegación consistente y condensada.
• Incorpora búsqueda rápida y fácil filtrado de productos
• Comprende el vínculo directo entre el estrés, la ansiedad y las tasas de conversión de los usuarios para las aplicaciones móviles.
• Proporciona experiencias receptivas y de carga rápida de sitios móviles
• Admite gestos para hacer zoom en la imagen del producto

El espacio de comercio electrónico móvil solo se hará más grande

Las tendencias de comercio electrónico móvil muestran que el mercado de comercio electrónico móvil está creciendo exponencialmente y el crecimiento de la industria ha creado una multitud de beneficios para los vendedores. Sin embargo, con eso vinieron muchas mejores prácticas y estándares para el diseño de comercio electrónico móvil que los vendedores deben seguir si quieren tener éxito.

Los compradores esperan una aplicación móvil que funcione bien, se vea hermosa y se adapte a sus comportamientos. Aunque cada aplicación es diferente con sus propias limitaciones y objetivos, seguir los principios fundamentales descritos en este artículo ayudará a crear aplicaciones de comercio electrónico móviles exitosas.

Descargue una hoja de trucos para mejorar la experiencia de usuario del comercio electrónico móvil

• • •

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

• Tendencias destacadas de comercio electrónico y su influencia en el diseño (con infografía)
• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• eCommerce UX – Principios y estrategias de diseño esenciales
• La guía definitiva para el diseño de sitios web de comercio electrónico
• Comercio electrónico rediseñado: cómo los cambios menores lograron importantes mejoras en la experiencia de usuario