La realidad del tráfico
Si tus visitas llegan desde Instagram, Facebook o TikTok, llegan desde un celular. Sin embargo, muchas páginas se siguen diseñando en un monitor grande y luego se "adaptan" a móvil, casi como trámite. Mobile-first invierte el orden: se diseña primero para la pantalla pequeña y después se expande.
La zona del pulgar
En 2013 Steven Hoober observó a cientos de personas usando su teléfono en la calle y encontró que cerca de la mitad lo sostenía con una sola mano, interactuando con el pulgar. Eso define un mapa: la parte inferior central de la pantalla es fácil de alcanzar; las esquinas superiores son incómodas.
Si tu botón principal vive donde el pulgar no llega, le estás pidiendo a tu cliente un pequeño esfuerzo extra justo en el peor momento.
La ley de Fitts
En 1954 Paul Fitts describió que el tiempo para alcanzar un objetivo depende de su tamaño y su distancia: objetivos más grandes y más cercanos se alcanzan más rápido y con menos errores. En una pantalla táctil eso se traduce en botones amplios (al menos 44 px de alto), separados entre sí y ubicados donde el pulgar descansa.
- Una sola columna, con jerarquía clara y textos de 16 px o más.
- Botón principal ancho, visible sin scroll y repetido a lo largo de la página.
- Formularios mínimos: pide solo lo indispensable y usa el teclado correcto (numérico para teléfono).
- Integración directa con WhatsApp, el canal donde tus clientes ya están.
- Imágenes ligeras y verticales que aprovechan la pantalla.
Menos opciones, más decisiones
La ley de Hick (1952) muestra que el tiempo de decisión aumenta con el número de opciones. En móvil, donde la atención es aún más frágil, cada enlace extra es una salida. Por eso una landing page de conversión elimina menús innecesarios y concentra todo en una acción.
Conclusión
Diseñar mobile-first no es encoger una página: es pensar desde el principio en cómo una persona con una mano y poca paciencia va a tomar una decisión. Cuando lo haces bien, la página en computadora sale casi sola.
Preguntas frecuentes
¿Qué significa mobile-first? +
Es diseñar primero la versión para celular y después adaptarla a pantallas grandes, en lugar de hacerlo al revés.
¿Qué tamaño deben tener los botones en móvil? +
Como referencia, al menos 44 × 44 px, que es la recomendación de accesibilidad de Apple para objetivos táctiles.
¿Por qué conectar la página con WhatsApp? +
Porque en México y Latinoamérica es donde tus clientes ya conversan; reduce la fricción frente a un formulario largo.
Lo hacemos contigo: estrategia, ejecución y medición.
Referencias
- Hoober, S. (2013). "How Do Users Really Hold Mobile Devices?". UXmatters.
- Fitts, P. M. (1954). "The information capacity of the human motor system in controlling the amplitude of movement". Journal of Experimental Psychology, 47(6).
- Hick, W. E. (1952). "On the rate of gain of information". Quarterly Journal of Experimental Psychology, 4(1).
- Apple. Human Interface Guidelines: Layout and accessibility.
Este artículo es divulgativo y refleja el análisis del equipo de ZYX a partir de las fuentes citadas. No constituye asesoría legal, fiscal ni financiera.