Diseño de interacción (UI)
Una composición puede caber en una pantalla pequeña y seguir siendo incómoda. Texto minúsculo, acciones difíciles de localizar o una imagen que ha perdido su detalle principal son problemas de diseño, aunque no exista desbordamiento.
Diseñar para móvil consiste en adaptar relaciones: entre contenidos, espacio disponible y formas de interacción. Si necesitas una introducción, puedes empezar por qué es el diseño responsive. Aquí nos centraremos en las decisiones.
Mantener la tarea principal
En nuestro ejemplo ficticio, una ficha de cerámica debe permitir observar la pieza, conocer material y medidas y consultar por ella.
En escritorio puede funcionar una imagen junto al texto. En móvil, una columna facilita disponer del ancho para leer. El orden debe conservar la identificación de la pieza y una acción comprensible.
No hace falta que todos los bloques mantengan exactamente la posición de escritorio. Sí hace falta que la adaptación conserve sentido. Revisa también que el orden del documento sea lógico cuando se navega con teclado o tecnologías de apoyo.
Ejemplo didáctico de Bocau. Proyecto ficticio.
Revisar la imagen, no solo su contenedor
Un recorte horizontal puede mostrar varias piezas. En una tarjeta vertical quizá elimine justo la que da sentido al contenido.
Decide si necesitas otro encuadre, conservar la imagen completa o cambiar su proporción. Recortar y deformar son operaciones distintas. Estirar una fotografía para llenar una caja altera el objeto.
Una imagen con texto incrustado necesita especial atención. Aunque se vea completa, ese texto puede resultar ilegible. La información esencial debe poder consultarse como contenido de la página.
Escala y espacio con intención
Un titular puede reducirse sin perder su posición jerárquica. Lo importante es compararlo con el cuerpo, los subtítulos y las acciones.
No centres automáticamente todos los párrafos. En textos largos, una alineación izquierda suele facilitar seguir el inicio de cada línea. El centrado puede tener sentido en un mensaje corto; comprueba cada caso.
Tampoco resuelvas el espacio suprimiendo el aire entre apartados. Si dos grupos se acercan demasiado, pueden parecer relacionados aunque no lo estén.
Los controles necesitan otra revisión
En una pantalla táctil no hay que depender de pasar el cursor para descubrir información. Menús, carruseles y botones deben ofrecer una forma clara de uso.
Comprueba que una barra fija no tape el contenido ni las acciones. Un carrusel necesita permitir avanzar sin impedir el desplazamiento vertical. Si una tarjeta contiene un enlace, la interacción no debe volver confuso el gesto.
Una prueba práctica de cinco minutos
Abre la página en una ventana estrecha y cambia el ancho de forma gradual. No revises únicamente dos tamaños predefinidos.
Busca un título largo, una imagen vertical y una tarjeta con más contenido. Aumenta el tamaño del texto desde el navegador. Recorre los controles con teclado y prueba después en un teléfono real.
Anota cada incidencia como observación: «el botón queda fuera de la tarjeta a este ancho». Después pide una corrección acotada a la IA y repite la prueba. «Hazlo responsive» deja demasiadas decisiones abiertas.
MDN desarrolla los fundamentos del diseño adaptable. Sus técnicas son una base; la decisión sobre qué priorizar pertenece al proyecto.
Una buena adaptación conserva lo que la persona necesita entender y hacer. El tamaño es una condición de esa decisión.
