El diseño de la versión móvil de una tienda online

El diseño de la versión móvil de una tienda online

El diseño de aplicaciones móviles enfocadas al comercio online debe de regirse por principios diferentes a otro tipo de apps.

El usuario se mueve, trabaja, habla con los amigos, si alguien le recomienda un producto las posibilidades de que lo apunte y luego lo busque en casa son mínimas, hoy en día lo normal es que busque el producto en su teléfono y visite la tienda, por tanto debemos prestar mas atención al público móvil cuándo diseñamos tiendas online y debemos garantizar un servicio adecuado para las compras desde dispositivos móviles.

Según el informe de GFK afirma que las ventas online mediante apps han aumentado en un 38% de media en este último año.

Ya sabemos que una página web que no pase la prueba para dispositivos móviles de google está fuera de las búsquedas móviles, por tanto muchas empresas han dedicado gran parte de su esfuerzo en adaptar sus websites para que sean lo mas mobile friendly posibles, ¿pero crees que es suficiente?, tu competencia ha realizado los mismos pasos, no obstante ha sido la «puntilla» que ha obligado a muchas empresas a acometer un reforma integral en su estrategia de marketing online. Y muchas han recapacitado en mejorar la experiencia de compra desde dispositivos móviles creando aplicaciones a propósito.

El diseño de aplicaciones móviles para comercio debe centrarse en pautas muy específicas y concretas a los dispositivos en los que van a ser usadas, el diseño debe apoyarse en varios pilares imprescindibles para optimizar los recursos de los que dispone: marketing, productos, audiencia y en vender.

Para que el diseño de una tienda móvil (mobile store) sea efectivo debe ser práctico e intuitivo, la usabilidad es muy importante frente a otras apps en las cuáles no se hayan tenido en cuenta la navegabilidad, tamaños de botones, letras y tamaños.

Debemos tener claro que en un mobile store los tamaños están mucho mas restringidos, por lo que en estos proyectos cobra gran importancia el prototivado de la aplicación móvil para mejorar y corregir elementos que pueden crear conflicto a la hora de visitar la tienda. El tener un prototipo diseñado para nuestro público objetivo puede ayudarnos mucho con la estrategia de ventas a seguir.

Por qué recomiendo realizar un prototipo previo, muy sencillo: si mezclamos el poco espacio, la información, los elementos como botones e imágenes y el propio layout que sujeta la interfaz, veremos la necesidad de probar e interectuar para optimizar y mejorar los recursos de los que disponemos.

Pros del prototivado de aplicaciones o de interfaces:

• Mejorar la arquitectura del contenido.
• Mejorar la usabilidad.
• Optimizar los recursos que disponemos.
• Testeo y solución de errores antes de llevar el trabajo a código.
• Pruebas con usuario.
• Estudio de la accesibilidad desde distintos dispositivos.
• Establecer los affordances y eliminar falsos afordances.

Contras del prototivado de aplicaciones o de interfaces:

• Aumento del presupuesto.
• Aumento en el tiempo de entrega.

Cuándo se realiza un prototipo para la interfaz de un e commerce  si existe documentación sobre una guía de estilo del sitio de escritorio puede que tengamos algunos problemas resueltos, pero algunas pautas debemos cambiarlas por la particularidad de los dispositivos.

Layout o interfaz:

Es la primera impresión que se lleva el cliente de tu tienda, por tanto debes aprovechar ese espacio mostrando las opciones disponibles e intentar que el usuario comience a hacer cosas en la interfaz, aquí debes preocuparte de que sea intuitiva para que el usuario encuentre lo que busca en el menor número de clics.

Debes prestar mucha atención a la arquitectura de la información  para poder optimizar la home al máximo.

Un buen paso a la hora de diseñar una interfaz para comercio móvil es sustituir todos los enlaces que sea posible por iconos y ensamblar el boceto de la estructura con botones, imágenes, encabezados para saber cuales son los elementos imprescindibles en nuestra interfaz.

En realidad lo mas importante en las mobile stores es saber que elementos sobran en la interfaz o como poder mantenerlos en segundo plano sin que distraigan al cliente de la compra.

 

Diseño:

En las versiones de escritorio tenemos el ratón con el que puedes acceder a cualquier área por pequeña que sea, en cambio en los dispositivos móviles la interacción la realizamos con el dedo, esto hace que el tamaño de links y botones se vea afectado, la medida estandar de la yema del dedo son 44px por lo que debemos prestar cuidado con botones minúsculos.

Tamaño de la letra, el gran enemigo de muchas tiendas, debemos usar una letra lo mas legible posible en un tamaño adecuado para que se pueda leer sin problemas, cuidado con el gigantismo tipográfico que es tendencia en las webs porque en un layout movil puede ser desastroso. El tamaño ideal para las fuentes de comercio electrónico son desde 11pt a 15 pt.

El tipo de letra es una decisión capital, debes elegir una letra fácil de leer y que combine con el estilo de tu tienda.

Dentro del apartado de textos muy importante es que los links parezcan links para el usuario y no crear falsos affordances que generen frustración.

El color juega un papel principal en el comercio, por lo que debes prestar atención a elegir una paleta correcta que esté suficientemente contrastada para atraer la atención sobre botones y call to action.

Las imágenes son vitales para un e commerce y para una mobile store mucho mas porque parte de la información mas suprimible la hemos descartado, por lo que la imagen debe hablar del producto, por lo que debemos darles mas importancia de la que normalmente damos por lo que debemos dejar que ocupen gran parte de la página en el caso de productos debemos tener en cuenta un tamaño bastante como para poder examinar el producto sin quemarnos las pestañas.

Una vez hemos conseguido un prototipo en el que se integren todos los elementos debemos tener en cuenta su adaptación en la mayor cantidad de dispositivos posibles, lo que nos puede llevar a refinar elementos y depurar mas el contenido a mostrar.

Conclusiones:

El diseño para comercio electrónico tiene sus propias reglas y mas concretas en el caso de diseño de aplicaciones para dispositivos móviles, si tu intención es una tienda funcional y accesible en cualquier dispositivo móvil, una de las mejores formas es construir una aplicación móvil para poder tener un diseño independiente en muchos aspectos del diseño principal o del layout de escritorio.

En el caso de comercio on line el prototivado no debería ser algo caprichoso, sino parte en la especificación del proyecto, para poder trabajar con mayor seguridad, mejorar los resultados y optimizar la app.