18 de enero de 2019 | Nateevo | Ecommerce, Experiencia de usuario

Mejoran la usabilidad y la experiencia de usuario ayudándole a navegar. Año tras año el comercio electrónico sigue creciendo, y así lo demuestran los informes de Ecommerce Foundation sobre la conversión en e-commerce.

Según estos informes, en el ámbito europeo el sector e-commerce ya se incrementó en 2017 un 11% respecto al año anterior y se espera que en este pasado 2018, las cifras hayan logrado un crecimiento del 13%.

Si algo ha influido en el aumento de las ventas en el comercio electrónico, es cómo las microinteracciones ayudan en la interacción interfaz-usuario y fomentan la disminución de la barrera que separa al cliente de la tienda física, mejorando la usabilidad y la experiencia de usuario.

En este artículo hablaremos de cómo las microinteracciones ayudan a que tu e- commerce venda más, qué tipo de microinteracciones hay y en qué parte de un e-commerce es mas rentable aplicarlas.

 

¿Qué tipos de microinteracciones existen y dónde podemos aplicarlas para mejorar la usabilidad de nuestro e-commerce?

Las microinteracciones son acciones sencillas y poco intrusivas entre la interfaz y el usuario.
Esta interacción en muchos casos se produce a modo de respuesta cuando el usuario ha realizado una acción. Su principal objetivo es el de informar al usuario del estado de una funcionalidad y/o ayudar y guiar al usuario a realizar la siguiente acción que esperamos que realice generándole una mejor experiencia de usuario.

Existen diversos tipos de microinteracciones (gestuales, de navegación, de movimiento, de transformación, etc). Cada una de ellas podemos utilizarlas en diferentes situaciones y contextos para mejorar la experiencia de usuario y ayudar lo a interactuar mejor con nuestra web y nuestros productos.

e-commerce

Desktop Hover Interaction by Kzsolt

En este caso podemos ver como la página hace foco allí donde el usuario sitúa el ratón. Aplicando a la imagen más luminosidad, con el objetivo de ayudar al usuario a ver de manera más clara aquello en lo que está interesado, posicionándolo visualmente en un nivel superior ante el resto de elementos similares.

Microinteracciones que mejoran la usabilidad del buscador

Search icon interaction by Oleg Frolov for Magic Unicorn

En el caso de los iconos es muy común ver una microinteracción de transformación de éste. Este ejemplo ayuda al usuario a entender que este campo es un buscador y que al hacer clic y aparecer el cursor, está listo para escribir. Así, con una simple transformación le hemos informado al usuario del estado del campo.

Search bar interaction by Allen Wang

En este otro ejemplo podemos ver un conjunto de microinteracciones que potencian la usabilidad y mejoran la experiencia del usuario. Empezando por que el botón del buscador cambia su estado visual al realizar un hover (pasar el cursor por encima). Al hacer clic vemos como de forma poco intrusiva y sin perder de vista el resto de elementos, se muestra el campo buscador listo para escribir. Y como cuando el usuario empieza a escribir se muestra un nuevo botón a la derecha para volver a cerrar el campo. Con apenas unas pocas interacciones hemos resuelto la necesidad del usuario de poder buscar lo que necesita.

Elegir y añadir un producto al carro, más fácil que nunca

e-commerce

Catalog page add to cart interaction by Virgil Pana

Algo similar ocurre en este grid de productos, donde el usuario puede interactuar con el producto con diversas acciones, incluso añadirlo a la cesta sin necesidad de entrar en su ficha.
En este caso las microinteracciones nos muestran qué puedes hacer con el producto y qué ocurre al pulsar diferentes botones, como el del slide o el de añadir al carro. En este último caso  vemos literalmente cómo se está añadiendo a la cesta. Reducir los tiempos de espera y ayudar a que las acciones relacionadas con la compra se completen más rápido, es uno de los puntos positivos para favorecer la compra impulsiva y lidiar con la impaciencia de este tipo de comprador.

e-commerce

Monoqi Concept by mxmc

En el caso de estos productos, el hecho de poder verlos en 360º simplemente con situar el cursor sobre el producto, ayuda potencialmente en la elección del producto y su decisión de compra.

e-commerce

 

Monoqi Mobile Concept by mxmc

Sin olvidarnos de que el móvil es cada vez más protagonista en las ventas online, el hecho de crear soluciones polivalentes y totalmente funcionales en cualquier dispositivo, ayudará al usuario a realizar la compra en cualquier tipo de dispositivo.

e-commerce

Add to Cart micro-interaction by Alberto Conti

Evitar al usuario cambiar de página y sintetizar todas las funcionalidades necesarias en unas pocas interacciones, hará que este no tenga que esperar ni pensar en cómo añadir un producto al carro, principalmente en un dispositivo móvil en el que se busca la rapidez e inmediatez. En este ejemplo vemos lo fácil que es desde un smartphone comprar un producto cambiando incluso la cantidad. Y lo más importante, cómo una microinteracción de cambio de estado, nos indica cuándo el producto ha sido añadido a la cesta.

Configura y observa el producto desde casa, como si estuvieras en la tienda

e-commerce

Minimalistic Storefront Interaction by Nick Herasimenka for Ramotion

Cuando el usuario está visualizando un producto, espera que este cubra sus necesidades. Esto es clave para la toma de decisión de comprar ese producto.

En este ejemplo no solo le dan la oportunidad al usuario de ver el producto completamente, mediante el giro al pasar a la siguiente fotografía, sino que el efecto que realiza el cambio de fotografía (simulando unas olas de mar), traslada al usuario al lugar donde va a utilizar ese producto. Sin duda una microinteracción con una carga emocional clave para potenciar las ventas.

e-commerce

3D Product Swipe by Minh Pham ✪

En este ejemplo el usuario puede cambiar de producto con un simple clic y mediante una transición sencilla puede visualizar el siguiente producto. Además mediante microinteracciones de movimiento, potencia su sentido de la manipulación directa, ya que se le da la oportunidad de poder ver el producto en 3D como si lo estuviera viendo y tocando en cualquier tienda física.

e-commerce

Order an Ice Candy by Milan Maheshwari

Una de las complejidades que nos encontramos en una ficha de producto con diversas características, o incluso en un “bundle product”, es poder ver todas las características y seleccionar la que nos interesa. Si resolvemos este tipos de casos más complejos, sin duda ayudará a que el usuario pueda añadir a su cesta su producto ideal. En este ejemplo, de nuevo vemos como un conjunto de microinteracciones resuelve esta necesidad, y con apenas unos clics tenemos el producto configurado.

Haz más ameno el duro trance de pagar

Si hay algún punto crítico en cualquier e-commerce, ese es el momento en que el usuario debe finalizar su compra. La cesta de la compra y el checkout son puntos donde existe una elevada tasa de abandono.

De media, la tasa de abandono del carrito es superior al 70% según un estudio de Salecycle. Algunas microinteracciones pueden ayudar y guiar al usuario sobre cómo finalizar su compra, mejorando la conversión del e-commerce. Incluso a que un checkout le transmita la confianza suficiente como para terminar comprando.

e-commerce

Payment Interaction by Vishnu Prasad

Microinteracciones como poner el foco en el campo donde el usuario está escribiendo, mostrar el tipo de tarjeta detectado o mostrar el progreso del pago e informar al usuario cuando se ha realizado correctamente, ayuda obtener un feedback y minimizar los errores y bloqueos en el proceso de pago y con ello, el abandono de la compra.

e-commerce

e-commerce shopping app UI Kit interaction by Divan Raj

Otro de los puntos donde una correcta microinteracción es clave, es en la validación de los formularios. Principalmente en esos casos donde se le informa al usuario que algún campo no es correcto o falta completarlo.

Conclusiones

Podríamos resumir algunas de las ventajas que ofrecen todas estas microinteracciones mejorando la usabilidad de un e-commerce:

  • Ayudan a captar la atención del usuario y que sitúe el foco allí donde es más relevante para potenciar las ventas.
  • Mejoran la interacción entre el usuario y la interfaz, haciendo que al usuario le sea más fácil y ameno realizar las acciones necesarias.
  • Informan del estado de las acciones y funcionalidades y dan el feedback necesario,ayudando a prevenir errores y bloqueos por parte del usuario.
  • Guían al usuario en la navegación por la web de forma intuitiva.
  • Algunas microinteracciones son simplemente detalles que marcan la diferencia, haciendo que tu comercio electrónico conecte con tus usuarios, convirtiéndolos en clientes mejorando su experiencia de usuario.

Si quieres más información sobre como las microinteracciones pueden ayudarte a mejorar la conversión de tu e-commerce, te invitamos a que contactes con nosotros y nos expliques tus necesidades.

En Nateevo estaremos encantados de poder ayudarte.

Vanessa Castellano

Consultora UX

Tags e-commerce, UX
compartir

Más entradas