Del escritorio al móvil: cómo diseñar interfaces complejas sin perder nada

Una pantalla de escritorio te da espacio para mostrarlo todo a la vez. Un móvil te da una fracción del ancho, un pulgar en lugar de un ratón y un usuario que probablemente está haciendo otra cosa al mismo tiempo. La respuesta fácil es recortar funciones hasta que la versión móvil quepa. Casi siempre es la equivocada.

Alrededor del 60 % del tráfico web mundial viene del móvil, así que, en muchos productos, la versión móvil es el producto. He llevado dashboards, apps de reservas e interfaces en tiempo real del escritorio al móvil, y el objetivo siempre es el mismo: conservar todo lo que el usuario necesita y cambiar cómo y cuándo lo ve. Así es como lo hago.

Antes de dibujar una sola pantalla móvil, hago una lista de todos los elementos de la pantalla de escritorio: datos, acciones, navegación, funciones sociales y textos de ayuda. Después los separo en tres grupos:

1. Siempre visible. Lo que el usuario necesita para tomar la siguiente decisión. En la mayoría de pantallas son dos o tres cosas, no diez.
2. A un toque. Contexto que apoya la decisión pero que no tiene por qué competir con ella: historial, detalles, estadísticas secundarias.
3. Bajo demanda. Ajustes, explicaciones y todo lo que se usa una vez por sesión.

En esta fase no se elimina nada. Se trata de decidir cuándo aparece cada elemento, no si existe. Si el equipo no se pone de acuerdo sobre qué va en el primer grupo, es una pregunta de producto que conviene resolver antes de empezar a diseñar.

Una de las pantallas más densas que he diseñado fue un concepto de ruleta para SolCrash, un producto de juegos con criptomonedas, en 2022. En escritorio todo convivía en paralelo: las opciones de apuesta, el beneficio potencial, las tiradas recientes, la lista de jugadores de la ronda y un chat en directo. El modo oscuro hacía que los números y las apuestas destacaran, y el chat le daba al producto su lado social.

En el móvil no había espacio para enseñarlo todo a la vez, y quitar cualquier pieza habría cambiado el producto. Así que conservé todo y reconstruí la jerarquía en torno a tres ideas:

• Un layout priorizado. Las opciones de apuesta y el beneficio potencial van primero, porque son lo que impulsa la siguiente acción. Nada que afecte a esa acción queda oculto.
• Capas bien pensadas. La información de apoyo vive en capas sobre la vista principal, para consultarla sin salir de la ronda.
• Menús plegables. Las tiradas recientes y la lista de jugadores siguen accesibles en secciones que se abren cuando hace falta, y el chat se adaptó al móvil en lugar de apretujarlo en una barra lateral estrecha.

El principio sirve para cualquier producto en tiempo real, ya sea un dashboard de trading, una subasta en directo o una app deportiva: el usuario tiene que poder actuar sin buscar los controles y consultar el contexto sin perder el sitio.

La mayor parte del trabajo se reduce a un puñado de patrones móviles conocidos, usados con intención:

• Bottom sheets y capas superpuestas. El contenido secundario sube sobre la vista principal y vuelve a bajar. El usuario nunca pierde la pantalla en la que estaba.
• Secciones plegables y acordeones. Las listas largas, los filtros y las preguntas frecuentes se reducen a una línea cada uno. Perfecto para contenido que se escanea y luego se abre de uno en uno.
• Pestañas y controles segmentados. Cuando dos vistas importan lo mismo, como los jugadores y el chat, deja que el usuario cambie entre ellas en vez de apilarlas.
• Flujos paso a paso. Un formulario de escritorio con diez campos se convierte en cinco pantallas con dos campos cada una. Cada pantalla resulta fácil y el progreso siempre está a la vista.
• Una acción principal fija. El botón principal se queda al alcance del pulgar mientras el contenido se desplaza por debajo.

Lo que evito: esconder funciones clave detrás de un menú hamburguesa, encoger tablas de escritorio hasta que el texto es ilegible y usar scroll horizontal para cualquier cosa que no sea un carrusel.

Algunos productos son complejos porque hacen muchas cosas, no porque una pantalla esté muy cargada. Mylo es un buen ejemplo: una app para descubrir y reservar servicios, desde una clínica dental hasta un spa. En una pantalla grande podrías enseñar la búsqueda, el perfil del negocio y el calendario en una sola vista. En el móvil, cada uno se convierte en su propia pantalla con una tarea clara: descubrir, decidir, reservar.

La reserva sigue el patrón paso a paso. Elegir el servicio, escoger la franja horaria y confirmar ocurren uno detrás de otro y terminan en una pantalla clara de “You’re all set!”, así que el usuario siempre sabe dónde está y qué le queda. Usé la misma idea en el flujo para vender tu reloj de Timepiece FNF, donde cada pantalla pide una sola cosa.

Godono, una app de voluntariado y donaciones, tenía otro reto: un feed social, chat con organizaciones, eventos con mapas, perfiles de voluntarios y un flujo de donación. Aquí la pantalla de inicio se encarga de priorizar, con las causas destacadas primero, y cada una de las demás funciones tiene su propia pantalla. Unas pantallas de onboarding breves explican la idea antes de que la app pida nada.

Lo mismo vale para las webs. En Bandar’s Bounties, una comunidad que ayuda a sus miembros a encontrar errores de precio online y ofertas exclusivas, cada elemento de escritorio se optimizó para móvil en lugar de eliminarse: el hero con ejemplos reales de aciertos anteriores, la comparativa de precios, los testimonios y la prensa, y las preguntas frecuentes.

Las secciones que generan confianza son justo las que los equipos tienen la tentación de quitar en móvil, porque son largas. En lugar de eso, ajústalas: menos palabras por tarjeta, una columna en lugar de una cuadrícula y acordeones para las preguntas frecuentes, para que la página sea corta hasta que alguien quiera el detalle. El cuidado en móvil también es uno de los principios de diseño web de lujo en los que me apoyo para que una web transmita calidad.

• Cada elemento de escritorio está visible, a un toque o, de forma deliberada, bajo demanda.
• La acción principal de cada pantalla está al alcance del pulgar y nunca desaparece al hacer scroll.
• Los números que impulsan decisiones nunca se esconden detrás de un menú.
• Las zonas táctiles miden al menos 44 × 44 puntos, con espacio suficiente entre ellas para evitar toques erróneos.
• El texto mantiene un tamaño legible; nada se encoge solo para que quepa.
• El contenido largo se pliega, y el estado plegado sigue diciendo qué hay dentro.
• Cada capa y cada bottom sheet tiene una forma evidente de cerrarse.
• Los estados vacíos, de carga y de error también están diseñados para la pantalla pequeña.
• Lo has probado en un móvil de verdad, con una sola mano.

Si estás planteando un cambio más grande, mi checklist para rediseñar un SaaS cubre la parte del sistema, y en mis casos de estudio encontrarás más trabajo de producto.