El diseño de un catálogo online requiere considerar el público que lo visitará y desde que dispositivo lo hará. Es tiempo de dejar atrás las réplicas de un catálogo impreso pensando en el pliego de papel y en las dimensiones tradicionales en centímetros.
El primer paso para diseñar un catálogo online es establecer la medida que va a tener. Es el momento de pensar en píxeles en lugar de centímetros, con las dimensiones de las pantallas de los smartphones en mente. Más del 70% del tráfico en un catálogo digital procede de celulares.
El mejor ejercicio es investigar las estadísticas de nuestro sitio web o de nuestro catálogo online, si ya lo tenemos. Podremos determinar cuáles son los 5 ó 10 celulares más usados por nuestros visitantes y diseñar la experiencia para ese perfil de usuarios.
Un error muy común es que todo el proceso de diseño, corrección y aprobación de un catálogo se realice en un entorno «desktop», es decir, en algún tipo de computadora de escritorio e incluso en soberbios e inmensos monitores Apple que no serán los usados por nuestros clientes.
Es obligación de quienes piensan y diseñan un catálogo online considerar los siguientes aspectos:
- Tamaño de página ajustado a las dimensiones de los smartphones más usados.
- Cantidad de productos por página
- Cantidad de texto en cada página
- Tamaño y legibilidad de las tipografías utilizadas
Todo esto debe ser verificado en dispositivos móviles reales que nos permitan comprobar que los textos de un producto, descripción, precio, etc. son legibles en los dispositivos más comunes, en aquellos que el cliente medio de nuestro sitio utiliza. Si logramos una buena experiencia en celulares también lograremos lo mismo en desktop, pero no así a la inversa.
El análisis de comportamiento de los usuarios en un catálogo online -visto desde celulares- nos ofrece como resultado que gran parte de los visitantes deben hacer zoom para poder leer correctamente la información del producto de interés. Es muy importante mejorar la experiencia de usuario para lograr más conversiones.
Es muy importante el cambio de paradigma en el diseño. Debemos abandonar los estándares de la industria gráfica y abrazar los parámetros del diseño web y dispositivos móviles. No podemos pensar las páginas en los tradicionales 20 x 28 cm, 21 x 27,5 cm, etc. Las medidas han cambiado y también las proporciones.
Medidas y safe area
No existe una medida única y «universal» para los catálogos en línea. Para aproximarnos a ella debemos, en primer lugar, utilizar el concepto mobile first. Primero pensar en celular y diseñar con eso en mente, pero existen decenas de marcas y centenares de modelos ¿cuál debemos considerar como válida?
La información que nos entrega Google Analytics nos permitirá conocer el perfil de nuestros usuarios y desde qué dispositivo ingresan al catálogo. Allí veremos los modelos más utilizados por nuestros clientes y obtendremos la información de las dimensiones de pantalla.
Un smartphone tiene varias dimensiones: medidas externas de ancho y alto del dispositivo, dimensiones de pantalla y finalmente el área de visualización (safe area/safe zone) o área segura. Esta es la dimensión más importante para el diseño de nuestro layout.
Dimensiones de catálogo impreso vs. catálogo online
Cuando diseñamos bajo de paradigma del catálogo impreso y creamos una réplica digital del mismo tenemos presentes las medidas relativas en cuanto a cantidad de imágenes o tamaño de texto. En estas condiciones perdemos de vista la experiencia del usuario en un celular. Nos olvidamos de 7 ú 8 personas de cada 10 que visitan nuestro catálogo.
En la imagen anterior podemos ver la diferencia relativa entre impreso y digital (visto desde un celular). Abajo podemos ver en forma más precisa como las fotos de producto y los textos pierden relevancia y condenamos a los visitantes a una experiencia frustrante.
Rediseñar es la tarea
Con la información de los dispositivos de nuestros visitantes asiduos debemos comenzar a rediseñar los catálogos que editamos ajustando el tamaño de página, la cantidad de productos en cada una de ella y modificando el tamaño del cuerpo tipográfico e incluso las familias de fuentes que nos ayuden a una mayor legibilidad.
Si este tema te interesa, no te pierdas mi próximo webinar: Cómo crear y publicar catálogos online, el próximo 26 de agosto.