Diseño Mobile

Usabilidad para dispositivos móviles

La adaptación de la estructura de navegación a los dispositivos móviles no es una moda, sino una necesidad. De media en España el 20% de las compras se realizan desde dispositivos móviles, llegando en el caso de algunas tiendas online al 40 y al 60%.

Por tanto la adaptación de la tienda online a la experiencia de usuario es crítica para mejorar la tasa de conversión a venta.

Aunque parece sencillo, adaptarse a los distintos dispositivos o más bien adaptarse a las distintas resoluciones de pantalla no es una tarea fácil. De media es necesario realizar al menos 4 versiones distintas de estructura y diseño, con lo cual la gestión y la inversión dedicada tanto en la adecuación de la tienda como el mantenimiento se incrementan.

Si los cambios que se producen no están bien estudiados a nivel de estructura de la información, podemos obtener el efecto contrario al deseado, y es que los clientes no tengan “a mano” la información en dispositivos con un tamaño de pantalla reducido suelen abandonar rápidamente la web a la que acceden.

Tras varios proyectos de Magento y Prestashop realizados en sus versiones responsive podemos resumir las principales claves:

  • Estudio de los principales dispositivos con los que entran los usuarios a nuestra tienda. Con esto adecuaremos los diseños e información a los dispositivos y resoluciones más relevantes ya que conoceremos cómo acceden nuestros clientes. 
  • Analizar la información más relevante para nuestros usuarios. Esto lo podemos analizar con herramientas de mapas de calor de Crazy Egg o con el propio Google Analytics y rápidamente podremos tomar decisiones sobre cómo organizar la información a mostrar según la importancia que tiene para nuestros clientes.
  • Estructura previa a diseño de cómo serán las distintas adaptaciones. De forma que podamos testar con usuarios reales si las maquetas cumplen con la navegación natural del cliente.
  • Diseño y programación de las versiones responsive.
  • Seguir analizando y optimizando continuamente ya que el usuario Ecommerce es cada vez más activo, requiere rapidez y nuestra tienda ha de estar a la última para dar un buen servicio.

A continuación os mostramos algunos ejemplos de usabilidad responsive con particularidades de la versión smartphone, la más exigente a la hora de estructurar la información y mejorar procesos transaccionales como el proceso de compra.

En la versión para smartphone, la principal información debe estar muy clara y accesible, y la información no relevante debe estar en un plano secundario e incluso puede llegar a ser innecesaria. Recordemos que dos son los objetivos, mostrar información relevante y que garantizar la compra con la mayor rapidez posible para el usuario.

Diseño Responsive Ecommerce

En este caso tenemos un menú estudiado para facilitar al usuario la navegación y reclamos o funcionalidades extra que le guian en todo momento acelerando su proceso de decisión:

  • Mensaje principal de la tienda. ¡Envíos gratis! Es importante porque incrementará en un alto % la conversión a compra.
  • Lupa de búsqueda. Permite al usuario no tener que usar la navegación por categorías, y así por tanto reducir las pulsaciones hasta el producto.
  • Acceso al menú de categorías y mi cuenta, para que el usuario pueda ir a las zonas más visitadas de la tienda.

Una vez que pasamos a la información del producto es importante tener la información legible y dar prioridad a los elementos que captan la atención del usuario.

  • La foto del producto es la protagonista
  • El call to action de agregar al carrito como segundo proceso.
  • El acceso a la guía de tallas el tercer elemento más importante, lo que más consultan del producto los clientes, reduciendo así las dudas en el momento de compra.

Diseño Responsive Ecommerce

Autor: Carla Chueca (Estrategia y Marketing ECOMMBITS)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *