Web
¿Por qué limitar Lar a un único dispositivo?
Lar nació como una app móvil, pero anotar una lista compartida o consultar la ruta por la tienda no siempre ocurre desde el teléfono. Esta versión web traslada esa misma experiencia a tablet y escritorio, pensada para quien prefiere seguir la compra desde otro dispositivo sin perder ninguna función ni la identidad visual de la app original.
En este proyecto me he encargado del diseño responsive completo, partiendo de la investigación y las personas ya definidas en Lar App: estrategia de breakpoints, sistema de componentes, diseño de pantallas y validación con test de usabilidad.
Lar solo existía en el móvil. Anotar la lista o consultar la ruta por la tienda desde otro dispositivo obligaba a instalar una app que no todo el mundo quiere tener ocupando espacio.
Un sistema de componentes responsivo y el rediseño de las pantallas clave (listas, productos y categorías) para tablet y escritorio, aplicando patrones mobile-first como navegación persistente, rejillas fluidas y vistas en paralelo que aprovechan el espacio de las pantallas grandes.
Contexto
Este proyecto es una evolución de Lar App, para trasladar el diseño de la aplicación móvil, a uno web, responsivo, pensado para móvil, tablet y ordenadores.
Trasladar Lar, hasta ahora solo disponible en el móvil, a tablet y escritorio: la misma lista, el mismo mapa de la tienda y los mismos participantes, pensados para cada tamaño de pantalla.
Con un sistema de componentes responsivo y patrones de diseño mobile-first (off-canvas, navegación persistente, rejillas fluidas, vistas en paralelo) aplicados a las pantallas clave.
Para que cada persona pueda anotar la compra o consultar la ruta desde el dispositivo que tenga más a mano, sin perder consistencia entre ellos.
Diseñar ya pensando en varios tamaños de pantalla abre también la puerta a futuras iteraciones: reutilizar este trabajo para adaptar la propia aplicación de Lar, hasta ahora solo diseñada para móvil, a otros dispositivos.
Sistema de componentes
Los tres anchos de referencia (412 / 1280 / 1728 px) parten de las dimensiones reales de los marcos de dispositivo de Figma, y el diseño se adapta de forma fluida entre ellos, sin saltar bruscamente de un estado fijo a otro. Así cambian los componentes que se repiten por todo Lar Web, con la misma lógica en cada sitio donde aparecen: no es solo que se vean distintos, cambia su estructura según el dispositivo.
Esta adaptación a la web también ha servido para incorporar mejoras que salieron del estudio de usabilidad de Lar App, como un mayor contraste de color para reforzar la accesibilidad.
Navegación
La navegación cambia de forma en cada dispositivo, así que para entenderla bien hay que verla en su sitio: aquí está señalada sobre la pantalla de Inicio completa, tal como aparece en app móvil, web móvil, web tablet y web escritorio.
En web móvil y tablet, al pulsar el icono, el menú ocupa la pantalla
App móvil: barra inferior con iconos y una pequeña palabra descriptiva junto a cada uno, dentro de la zona que el pulgar alcanza con comodidad en el uso a una mano.
PrincipioPatrón de barra de pestañas inferior (Material Design), para un grupo pequeño de destinos principales (entre 3 y 5).
Web, en móvil y tablet: menú hamburguesa, para no ocupar tanto espacio de pantalla. Evita sobrecargar la interfaz de elementos, reduce el ruido visual y ayuda a las personas a centrar la atención.
PrincipioNielsen Norman Group advierte que ocultar la navegación reduce su visibilidad; aquí se compensa con iconos y texto claro dentro del propio menú.
Web escritorio: barra con palabras descriptivas e iconos universales para algunas funciones. Al haber espacio de sobra, se mantiene siempre visible en vez de ocultarla.
PrincipioHeurística de Nielsen: "reconocer antes que recordar".
Elemento seleccionado: se señala aumentando un poco el tamaño de letra y con un color verde que destaca sobre el fondo y sobre el negro del resto de elementos.
PrincipioWCAG 1.4.1: no depender únicamente del color para transmitir información (se combina con tamaño).
Selector de idioma
El idioma cambia de sitio según el dispositivo: en la app vive dentro de Perfil, como un ajuste más de la cuenta; en la web es un icono fijo en la barra de navegación, siempre a mano. Aquí, señalado en cada contexto.
Al pulsar el icono, se despliega el selector de idioma
App móvil: el idioma vive dentro de Perfil, en la sección Cuenta, como una fila más de configuración, no en la barra de navegación.
PrincipioAgrupar una preferencia de cuenta junto al resto de ajustes es el patrón habitual en apps móviles: coherencia y estándares (heurística de Nielsen).
Web, en móvil, tablet y escritorio: el idioma es un icono fijo en la barra de navegación (globo + código de idioma), siempre visible.
PrincipioCambiar de idioma puede necesitarse en cualquier momento de la navegación web; mantenerlo siempre visible sigue la heurística de visibilidad del estado del sistema.
Al pulsarlo: se despliega un selector con las opciones, sin salir de la pantalla (tarjeta compacta en web móvil, barra ancha en tablet y escritorio, según el espacio disponible).
PrincipioEvita una navegación completa para un cambio reversible y frecuente: eficiencia y flexibilidad de uso (heurística de Nielsen).
Idioma activo: se marca en negrita dentro del listado, para confirmar qué opción está seleccionada.
PrincipioVisibilidad del estado del sistema (heurística de Nielsen): la persona siempre sabe qué idioma tiene activo.
Tarjeta de producto
La ficha de producto es la misma tarjeta flotante sobre la imagen en las cuatro versiones, pero cambia cómo ocupa la pantalla: a pantalla completa en móvil y tablet, como una superposición en escritorio.
App móvil y Web móvil: la misma pantalla, prácticamente sin cambios entre ambas versiones.
PrincipioMantener la misma estructura entre la app y la web móvil reduce la curva de aprendizaje al cambiar de una a otra: coherencia y estándares (heurística de Nielsen).
Web tablet: ocupa toda la pantalla, igual que en móvil, pero con más aire y mejor aprovechamiento del espacio al haber más ancho disponible.
PrincipioAdaptar el contenido al espacio disponible, en vez de escalar el mismo diseño pensado para móvil, es uno de los principios fundacionales del diseño web responsive.
Web escritorio: se muestra como una tarjeta superpuesta que sube desde abajo, con el contenido de la pantalla de origen difuminado detrás. Al haber aún más espacio, la información nutricional pasa de dos columnas a cuatro, por ejemplo.
PrincipioMantener visible, aunque difuminado, el contexto de origen ayuda a saber dónde se está y a volver atrás sin perder el sitio: patrón de ventana modal (Nielsen Norman Group).
Buscador
El buscador vive siempre en el mismo sitio, justo debajo del saludo de Inicio, con el mismo aspecto y la misma posición en los cuatro contextos, para que encontrarlo no dependa del dispositivo.
También en Categorías, en el mismo sitio (y así dentro de cada categoría)
En Inicio, Categorías y dentro de cada categoría: el buscador ocupa una posición fija, justo debajo del saludo o del título, con el mismo icono de lupa y el mismo texto de ejemplo ("Buscar productos").
PrincipioMantener la posición y la apariencia constantes en toda la aplicación refuerza su reconocimiento: coherencia y estándares (heurística de Nielsen).
Campo con fondo de color en vez de un simple borde, para que se note que es un área interactiva sin competir visualmente con el resto de la pantalla.
PrincipioUn affordance visual claro ayuda a identificar qué elementos se pueden usar, sin necesidad de instrucciones adicionales.
"Buscar productos" como texto de ejemplo, sin una etiqueta aparte encima del campo, para no repetir información y ahorrar espacio vertical.
PrincipioPatrón habitual en buscadores mobile-first, donde el espacio en pantalla es limitado y cada línea cuenta.
Diseño de pantallas
Tres pantallas representativas del reto responsive (pantalla de listas, lista de productos y categorías), comparadas lado a lado en los tres dispositivos, con la decisión de diseño detrás de cada adaptación.
Navegación: se colapsa en un menú hamburguesa en móvil y tablet, y se expande a una barra completa en escritorio, que es donde sobra espacio para tenerla siempre visible.
PrincipioHeurística de Nielsen: reconocer antes que recordar.
Tarjetas de lista: mantienen la misma estructura en los tres tamaños (icono, título, número de artículos, colaboradores y botón de acción); lo único que cambia es su disposición: apiladas en móvil, en una rejilla de dos columnas en tablet y escritorio, aprovechando el ancho disponible sin inventar un patrón nuevo.
PrincipioConsistencia y estándares.
Botón "Crear lista": ocupa todo el ancho en los tres casos: cuanto más grande y más accesible es un objetivo, menos cuesta acertarlo, sea con el dedo o con el ratón.
PrincipioLey de Fitts.
Colaboradores: los avatares de quién colabora en cada lista se ven directamente en la tarjeta, sin tener que entrar a comprobarlo.
PrincipioVisibilidad del estado del sistema.
Mis listas: las tarjetas pasan de ocupar una sola columna en móvil a repartirse en una rejilla que añade columnas según el ancho disponible.
PatrónMostly fluid.
Navegación: el menú se oculta tras un icono en móvil y tablet, y se vuelve persistente (siempre visible) en escritorio, donde ya no hace falta ocultar nada.
PatrónDe off-canvas a navegación persistente.
Tarjetas de lista: el componente no cambia de estructura entre dispositivos, solo cuántas caben por fila.
PatrónTiny tweaks.
Conclusiones y lecciones aprendidas
Este proyecto demuestra que una misma experiencia de usuario puede adaptarse a distintos dispositivos sin perder coherencia ni identidad, siempre que la adaptación se apoye en un sistema de componentes sólido y no en el simple redimensionado de pantallas. Más allá del resultado visual, ha sido un ejercicio de diseño responsive con criterio: partir de la investigación y el testeo ya validados en Lar App, y tomar cada decisión de adaptación con ese contexto como base.
Lecciones aprendidasLo más difícil fue encontrar el equilibrio entre adaptar el diseño existente y aprovechar el nuevo espacio para proponer disposiciones de contenido más originales. Replicar la interfaz móvil tal cual no era viable: la experiencia resultaría incómoda y poco usable en pantallas más grandes. Pero rediseñar desde cero tampoco era una opción, porque Lar ya tenía una identidad establecida que debía mantenerse reconocible entre la app y la web. El reto, por tanto, era innovar dentro de las decisiones de diseño ya tomadas, no sustituirlas.
Si tuviera que cambiar algo, pondría más énfasis en la accesibilidad desde las primeras fases del proyecto. Durante el proceso creí tenerla en cuenta en todo momento, pero el estudio de usabilidad de Lar App reveló que el contraste de color resultaba insuficiente para una de las personas participantes. Es un recordatorio de que cumplir la normativa no siempre es suficiente: también hay que comprobarlo con personas.
De este proyecto me llevo la confianza para dimensionar los componentes sin miedo cuando cambio de un dispositivo pequeño a uno más grande. Aumentar el tamaño de un elemento o repensar su disposición en pantallas grandes no es solo "llenar espacio": es aprovecharlo con intención, en lugar de apilar los mismos componentes en vertical simplemente porque hay más alto donde colocarlos.
También me lo llevo como recordatorio de seguir mirando hacia fuera. No hace falta reinventar la rueda: estudiar cómo resuelven estos mismos problemas otras páginas (ya sea en auditorías de competencia o simplemente navegando), cómo organizan la información y qué decisiones de layout o estilo funcionan, sigue siendo una fuente de inspiración constante y necesaria.